.music-store,
.music-store *,
.ms-shopping-cart,
.ms-shopping-cart *,
.music-store-song *,
.ms-shopping-cart-list *,
.ms-shopping-cart-summary *,
.ms-shopping-cart-text{
	box-sizing: border-box !important;
	font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.music-store{margin: 0 auto;
  max-width: var(--content-width);}
.ms-shopping-cart-list a{display:inline-block !important;}
.music-store a:before,
.ms-shopping-cart a:before,
.music-store-song a:before,
.music-store-collection a:before,
.ms-shopping-cart-list a:before,
.ms-shopping-cart-summary a:before,
.music-store a:after,
.ms-shopping-cart a:after,
.music-store-song a:after,
.music-store-collection a:after,
.ms-shopping-cart-list a:after,
.ms-shopping-cart-summary a:after{display:none !important;}

.ms-shopping-cart-summary select,
.music-store select,
.music-store-song select{font-size:16px;line-height:20px;}

.music-store-items .clearer{clear:both;height:20px;}
.ms-player *:not(.mejs-time-float):not(.mejs-volume-handle):not(.mejs-volume-slider){transform: none;}
.ms-payment-gateway-label{font-size:16px;line-height:20px;font-style:italic;}

.price-selection [type="radio"]{margin-right:10px;}

.music-store-song a,
.music-store-pagination a{box-shadow: none !important;}

.music-store-pagination{text-align:center;position:relative;clear:both;}
.music-store-pagination .page-link{margin:0 5px;display:inline;}
.music-store-pagination .page-selected{font-weight:bold;}

.music-store-item {float:left;margin-bottom:20px;}
.music-store-items{position:relative;clear:both;padding-top:10px;}

.music-store-header{width:100%;position:relative;clear:both;margin-bottom:10px;}
.music-store-filters{ /*white-space:nowrap;*/ float:left; margin-bottom:5px; }
.music-store-header .music-store-filters span{display:inline-block; padding-right: 5px;}
.music-store-ordering{float:right;}
.music-store-header .music-store-filters span:first-child,
.music-store-header .music-store-ordering span:first-child{font-size:16px;line-height:20px;}

.music-store-song{width:92%;margin-left:4%;}

.music-store-song .song-cover{width:150px; max-height:150px; margin-bottom:5px; overflow:hidden;}
.music-store-song .song-cover img{box-shadow:none !important;border:0 !important;}
.music-store-song .song-cover.single{width:250px;height:auto;max-height:none;}

.music-store-song .song-cover img{width:100%;}

/** COLUMNS ON MULTIPLE PAGES **/
.music-store-song .left-column{float:left;width:150px;}
.music-store-song .right-column{	float:left; padding-left:10px; width:-moz-calc(100% - 160px); width:-webkit-calc(100% - 160px);	width:calc(100% - 160px);}

.ms-title-player-row{display:flex;align-items:center;gap:5px;}
.ms-title-player-row .ms-player{margin:0 !important;}
.ms-title-player-row .song-title{display:flex;align-items center;gap:5px;}
.ms-title-player-row .song-title a{flex-grow:1;}
.song-payment-buttons form{display: flex;gap:5px;align-items: center;}

/** COLUMNS ON SINGLE PAGES **/
.ms_song  .entry-title{display:none;}

.music-store-song .left-column.single{float:left;width: 250px;}
.music-store-song .right-column.single{	float:left; padding-left:10px; width:-moz-calc(100% - 260px); width:-webkit-calc(100% - 260px);	width:calc(100% - 260px);}

.music-store-song .song-title{font-size:20px;line-height:26px;}
.music-store-song .song-title.single{font-weight:normal; font-size:32px; line-height:36px;}

.music-store-song .song-title.single div:first-child{margin-top:10px;}

.music-store-song .label{font-weight:normal; font-style:italic;font-size:16px; line-height:20px;margin-right:5px;}

.music-store-song .song-artist ul,
.music-store-song .song-album ul,
.music-store-song .song-genre ul,
.music-store-song .song-gender ul,
.music-store-song .song-tempo ul{padding:0; margin:0;clear:both;line-height:20px;}

.music-store-song .song-artist li,
.music-store-song .song-album li,
.music-store-song .song-genre li,
.music-store-song .song-gender li,
.music-store-song .song-tempo li{padding:0; margin:0 5px 0 0; display:inline-block;font-size:16px;line-height:20px;}

.music-store-song .song-artist li .arrow,
.music-store-song .song-album li .arrow,
.music-store-song .song-genre li .arrow,
.music-store-song .song-gender li .arrow,
.music-store-song .song-tempo li .arrow{color: #E47911; font-size: 20px; font-weight: bold; margin-right: 0.2em;}

.music-store-song a{text-decoration:none !important;}

.music-store-song .song-price{color: #990000; font-size:20px; line-height:26px;}

.music-store-song .right-column.single .song-payment-buttons{margin-top:10px;margin-bottom:10px;}

.ms-add-to-cart.add-to-cart{
	background-color: #000000;
    border: 2px solid #000000;
    color: #fff;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    box-sizing: border-box;
}
.ms-add-to-cart.add-to-cart:hover{
	background-color: #000000;
    border-color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.ms-add-to-cart.add-to-cart:active{
	transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.music-store-song .bottom-content{margin-top:30px;}

.music-store-song  .ms-player .mejs-container{ margin:0; display:block !important; }

select[name="ms_payment_gateway"],
select.ms_payment_gateway,
input.ms-variable-price-box{max-width:100%;min-width:80px;padding:2px 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size:16px;line-height:20px;}

.music-store-song .ms-player{margin-bottom:10px;}
.music-store-song .ms-player.multiple{width:30px;position:relative;float:left;margin:0 5px 0 0;overflow:hidden;}

/* EXTENDING SKINS */
.ms-player .mejs-time{overflow:visible !important;}
.ms-player .mejs-time-handle-content,
.ms-player .mejs-time-hovered{display:none !important;}
.ms-player .mejs-controls .mejs-time-rail .mejs-time-float{border:0;}
.ms-player .mejs-controls{padding:0 !important;}

.ms-player.multiple{flex-shrink:0;}

/* Classic Player */
.ms-player.mejs-classic.multiple{ width:26px !important; height: 26px !important;}
.ms-player.mejs-classic.multiple .mejs-playpause-button{ margin-left:-3px;margin-top:-6px;}
.ms-player.multiple:empty{display:none;}

/* TED player */
.mejs-container.mejs-ted {bottom:0;position:absolute;margin:0;}
.mejs-ted .mejs-mediaelement{background:none;}
.hentry .mejs-ted .mejs-controls,
.mejs-ted .mejs-controls {background: #eee;height: 65px;}
.ms-player.multiple .mejs-container.mejs-ted,
.ms-player.multiple .mejs-ted .mejs-controls{background:none;}
.ms-player.multiple .mejs-ted .mejs-controls .mejs-playpause-button{top:auto;bottom:0;left:0;}
.ms-player .mejs-ted .mejs-controls .mejs-time{height:17px; padding: 2px 3px 0;}
.ms-player .mejs-ted .mejs-controls .mejs-time-rail{margin: 0;height:21px;}
.ms-player .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-current{width: 100%;}
/* .ms-player .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-total{left:10px} */
.ms-player .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-current{left:0;}
.ms-player .mejs-ted .mejs-controls .mejs-playpause-button{border-radius:5px;overflow:hidden;}
.ms-player.single.mejs-ted{height:65px;position:relative;}
.ms-player.multiple.mejs-ted{width:49px;height:28px;}

/* WMP player */
.mejs-container.mejs-wmp {position:absolute;bottom:0;background:none;margin:0;}
.mejs-wmp .mejs-mediaelement{background:none;}
.ms-player.multiple .mejs-container.mejs-wmp,
.ms-player.multiple .mejs-wmp .mejs-controls{background:none;}
.ms-player.multiple .mejs-wmp .mejs-controls .mejs-playpause-button {top:auto; bottom:0;}
.ms-player .mejs-wmp .mejs-controls .mejs-currenttime-container,
.ms-player .mejs-wmp .mejs-controls .mejs-duration-container{top:20px;}
.ms-player .mejs-wmp .mejs-time-rail{padding-top:0; margin: 5px 10px;}
.ms-player .mejs-wmp .mejs-controls div.mejs-time-rail{height:3px;}
.ms-player .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-current{width: 100%;}
.ms-player.single.mejs-wmp{height:65px;position:relative;background-color:rgba(0,0,0,0.8);border-radius:10px;}
.ms-player.multiple.mejs-wmp div,
.ms-player.multiple.mejs-wmp{width:40px;height:40px;}
.ms-player.multiple.mejs-wmp .mejs-controls .mejs-playpause-button{border-radius:50px;width:36px;height:36px;overflow:hidden;}
.ms-player.multiple.mejs-wmp .mejs-controls .mejs-playpause-button button{margin-left:-2px;margin-top:-2px;}

/*** MIDI PLAYERS ***/
.ms-player .midiPlayer span{ display:block; border: 0; text-decoration:none; color:transparent !important; outline-color: transparent !important; float:right;}

.ms-player.mejs-classic .midiPlay,
.ms-player.mejs-classic .midiStop{ background: rgba(0,0,0,0.9); overflow: hidden;  height: 30px; width: 26px;}
.ms-player.mejs-classic .midiPlay span,
.ms-player.mejs-classic .midiStop span{ height: 16px; width: 16px; margin:7px 5px; background: transparent url(controls.svg) no-repeat;}
.ms-player.mejs-classic .midiStop span{ background-position: 0 -16px; }

.ms-player.mejs-ted .midiPlay,
.ms-player.mejs-ted .midiStop{ overflow: hidden; }
.ms-player.mejs-ted .midiPlay span,
.ms-player.mejs-ted .midiStop span{ height: 28px; width: 49px; background: url(controls-ted.png) no-repeat -50px -23px;}
.ms-player.mejs-ted .midiStop span{ background-position: 0 -23px; }

.ms-player.mejs-wmp .midiPlay,
.ms-player.mejs-wmp .midiStop{ overflow: hidden; }
.ms-player.mejs-wmp .midiPlay span,
.ms-player.mejs-wmp .midiStop span{ height: 40px; width: 40px; background: url(controls-wmp.png) no-repeat 0 0;}
.ms-player.mejs-wmp .midiStop span{ background-position: 0 -40px; }
/*** END MIDI PLAYERS ***/

.music-store-song .song-price.single{color: #333;display:inline-block;background-color:#EFEFEF;padding:0 10px;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-shadow: 1px 1px #FFF;}

.music-store-song .song-info{text-align:right;}
.ms_song .entry-header{display:none;}


.explain-text{font-style:italic;font-size:16px; line-height:20px;}

.music-store-tabs{list-style: none outside none;margin: 0 0 1.618em;overflow: hidden;padding: 0 0 0 1em !important;position: relative;}
.music-store-tabs:before{border-bottom: 1px solid #E0DADF;bottom: 0;content: " ";left: 0;position: absolute;width: 100%;z-index: 1;}
.music-store-tabs li{
    overflow-x:visible !important;
    overflow-y:visible !important;
	background: #f7f6f7;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjZmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlMGRhZGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #f7f6f7 0%, #e0dadf 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f6f7), color-stop(100%,#e0dadf));
	background: -webkit-linear-gradient(top, #f7f6f7 0%,#e0dadf 100%);
	background: -o-linear-gradient(top, #f7f6f7 0%,#e0dadf 100%);
	background: -ms-linear-gradient(top, #f7f6f7 0%,#e0dadf 100%);
	background: linear-gradient(to bottom, #f7f6f7 0%,#e0dadf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f6f7', endColorstr='#e0dadf',GradientType=0 );
	border: 1px solid #E0DADF;border-top-left-radius: 4px;border-top-right-radius: 4px;box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.6) inset;display: inline-block;margin: 0 -5px;padding:10px 20px;position: relative;z-index: 0;cursor:pointer;}
.music-store-tabs li:after{border-bottom-left-radius: 4px;box-shadow: -2px 2px 0 #E0DADF;right: -6px !important;bottom: -2px !important;border: 1px solid #E0DADF;border-width: 0px 0px 1px 1px;content: " ";height: 5px;position: absolute;width: 5px; margin: none !important;}
.music-store-tabs li:before{border-bottom-right-radius: 4px;box-shadow: 2px 2px 0 #E0DADF;left: -6px !important;bottom: -2px !important;border: 1px solid #E0DADF;border-width: 0 1px 1px 0;content: " ";height: 5px;position: absolute !important;width: 5px; margin: none !important;}
.music-store-tabs li.active-tab {background: none repeat scroll 0 0 #FFFFFF;border-bottom-color: #FFFFFF;z-index: 2;box-shadow: none;}
.music-store-tabs li.active-tab:after {box-shadow: -2px 2px 0 #FFFFFF;}
.music-store-tabs li.active-tab:before {box-shadow: 2px 2px 0 #FFFFFF;}
.music-store-tabs-container{display:none;}
.music-store-tabs-container.active-tab{display:block;}

.music-store-sales-counter{text-align:center;}
.music-store-sales-counter img{display:inline-block;}
.ms-clear,
.clear {clear: both;}
.fb_iframe_widget_lift{ max-width:auto; }
.buy-now-btn{border:0;max-width:none;}

.music-store-error-mssg{ border: 1px solid #FF0000; color: #FF0000; text-align:center; width:100%; }
.music-store-error-mssg ul{ list-style:none; margin:10px;}
.music-store-error-mssg ul li{margin:5px;}

@media screen and (max-width:600px) {
	.music-store-item {clear:both;}
    .music-store-header{min-width:0;}
	.music-store-filters{white-space:normal;}
	.music-store-header span{ display: inline-block;clear:both;float:left;}
	.music-store-ordering{float:left;}
	.music-store-song .left-column{width:100%;clear:both;}
	.music-store-song .right-column.single{float:left; padding-left:0; width:100%;}
	.music-store-song .song-cover{width:100%;max-height:none;}
}

.music-store-song .ms-player .mejs-offscreen{display:none;}

.music-store-filtering-result{ padding-left: 5px; border-top:1px solid rgba(51, 51, 51, 0.1); border-bottom:1px solid rgba(51, 51, 51, 0.1); width:100%; }

/** POPULARITY **/
.song-popularity{clear:both;}
.star-active{ display:inline-block; height: 14px; width: 15px; background: url(star_on.png) 0 0 no-repeat;cursor:pointer;position:relative;}
.star-inactive{ display:inline-block; height: 14px; width: 15px; background: url(star_off.png) 0 0 no-repeat;cursor:pointer;position:relative;}
.star-active:hover:after,
.star-inactive:hover:after {
    background: rgba(0, 0, 0, .5);
    border-radius: 25%;
    bottom: 16px;
    left: -2px;
    color: #fff;
    content: attr(data-title);
    padding: 0;
    position: absolute;
    z-index: 98;
    width: 20px;
    height: 20px;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    font-family: sans-serif;
}
.song-popularity .votes{font-size:16px; line-height:18px;}
.song-popularity .votes::after{content:')';}
.song-popularity .votes::before{content:' (';}
.song-popularity .votes::empty{display:none;}

/* PURCHASED PRODUCTS PAGE */

.music-store-purchased-items{margin-top:30px;}
.music-store-purchased-item{border-bottom:1px dashed #3333333d;padding-bottom:10px; margin-bottom:10px;}
.music-store-purchased-item .left-column{float:left;clear:none;width:150px;margin-right:10px}
.music-store-purchased-item .right-column{float:left;clear:none;width:calc( 100% - 160px );}
.music-store-purchased-item .label{font-style:italic;}
.music-store-purchased-item *{font-size:14px;}
.music-store-purchased-item .ms-player *{font-size:11px;}
.music-store-purchased-item .music-store-purchased-item-title *{font-size:18px;}

/** LOGIN FORM **/

#ms-login-form{max-width: 50%;}
#ms-login-form label{display: block; width: 100%; clear: both;}
#ms-login-form input[type="text"],
#ms-login-form input[type="password"]{height: 40px; padding: 5px; line-height: 20px; width: 100%; box-sizing: border-box;}
#ms-login-form [type="submit"]{background: black; color: white; border: 0; padding: 10px 20px; border-radius: 5px; }
#ms-login-form [type="submit"]:hover{ background: #333;	}

/* wcmp-player-visualizer */
.ms-player:has(.ms-player-visualizer){position:relative;}
.ms-player-visualizer {
	width: 100%;
	height: 50px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	position:relative;
}

.ms-player-visualizer-bars-container {
	top: 0;
	bottom: 0;
	left:0;
	right:0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: flex-end;
	gap: 4px;
	background: transparent;
	padding: 5px 0;
	box-sizing: border-box;
	overflow: hidden;
	position:absolute;
}

.ms-player-visualizer-bar {
	flex: 0 0 4px;
	height: 0;
	background: repeating-linear-gradient(
		to top,
		rgba(255, 255, 255, 0) 0px,
		rgba(255, 255, 255, 0) 1px,
		rgba(0, 115, 170, 1) 2px,
		rgba(0, 115, 170, 1) 3px
	  );
	opacity: 0.85;
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
	border-radius: 3px;
	transition: height 0.08s ease-out, opacity 0.08s ease-out;
}

 .ms-player:has( .mejs-wmp ) .ms-player-visualizer{padding-left:20px; padding-right:20px;}
 .ms-player:has( .mejs-ted ) .ms-player-visualizer{padding:10px 10px 5px 10px;background:#eee;height:50px;}
 .ms-player:has( .mejs-ted ) .ms-player-visualizer-bar{
	background: linear-gradient(to top, #606368, #a1a4a8);
	background: repeating-linear-gradient(
		to top,
		rgba(255, 255, 255, 0) 0px,
		rgba(255, 255, 255, 0) 1px,
		rgba(0, 0, 0, 0.5) 2px,
		rgba(0, 0, 0, 0.5) 3px
	  );
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25);
	opacity: 0.5 !important;
}

/* ==========================================================================
 * DEFAULT STORE DESIGN
 *
 * These rules rebuild the store when no layout is selected, that is, when the
 * plugin runs without its own layout stylesheet. The check is made on the
 * root element:
 *
 *     html:not(:has(#ms-css-layout-css,#ms-js-layout-js))
 *
 * `ms-css-layout-css` is the id WordPress gives to the layout stylesheet
 * (handle "ms-css-layout") and `ms-js-layout-js` the one of the layout script
 * (handle "ms-js-layout"). While a layout is active one of them is in the
 * document, the selector stops matching and the store is left entirely to the
 * layout: the default design can never bleed into it. When no layout is
 * active the selector matches and these rules, being the last ones in the
 * file, take over from the legacy rules above.
 *
 * The palette is deliberately neutral: near black for the text, a hairline
 * grey for the lines and the vendor amber for the pay button. No new hue is
 * introduced, so the store keeps working with any theme.
 * ========================================================================== */

/* --- Palette and metrics ---------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)){
	--msdef-ink:			#111111;
	--msdef-ink-2:			#3D3D3D;
	--msdef-muted:			#6B6B6B;
	--msdef-line:			#E4E4E4;
	--msdef-line-2:			#CFCFCF;
	--msdef-soft:			#F6F6F6;
	--msdef-surface:		#FFFFFF;
	--msdef-accent:			#FFC439;
	--msdef-accent-ink:		#111111;
	--msdef-radius:			14px;
	--msdef-radius-sm:		10px;
	--msdef-shadow:			0 1px 2px rgba(17,17,17,.05), 0 12px 26px -22px rgba(17,17,17,.45);
	--msdef-shadow-hover:	0 1px 2px rgba(17,17,17,.06), 0 18px 32px -22px rgba(17,17,17,.55);
	--msdef-ease:			cubic-bezier(.2,.6,.3,1);
}

/* --- Store shell ------------------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(
	.music-store,
	.music-store-song,
	.music-store-collection
){
	color: var(--msdef-ink);
	letter-spacing: normal;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection){
	width: 100%;
	margin-left: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store{
	padding-bottom: 48px;
}

/* --- Header: filters and ordering -------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
	width: 100%;
	margin: 0 0 0;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--msdef-line);
	position: static;
	float: none;
	clear: both;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-filters{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	float: none;
	margin: 0;
	min-width: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-ordering{
	display: flex;
	align-items: center;
	gap: 10px;
	float: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-header :is(.music-store-filters,.music-store-ordering) span{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	float: none;
	clear: none;
	line-height: 20px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-header :is(.music-store-filters,.music-store-ordering) span:first-child{
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--msdef-muted);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-filtering-result{
	width: 100%;
	margin: 0;
	padding: 12px 0 0;
	border: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--msdef-muted);
}

/* --- Selects ----------------------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(
	.music-store select,
	.music-store-song select,
	.music-store-collection select,
	.ms-shopping-cart-summary select
){
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: inline-block;
	min-height: 44px;
	margin: 0;
	padding: 11px 34px 11px 12px;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	color: var(--msdef-ink);
	background-color: var(--msdef-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B6B6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px 8px;
	border: 1px solid var(--msdef-line);
	border-radius: var(--msdef-radius-sm);
	cursor: pointer;
	transition: border-color .16s var(--msdef-ease), box-shadow .16s var(--msdef-ease);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(
	.music-store select,
	.music-store-song select,
	.music-store-collection select,
	.ms-shopping-cart-summary select
):hover{
	border-color: var(--msdef-line-2);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(
	.music-store select,
	.music-store-song select,
	.music-store-collection select,
	.ms-shopping-cart-summary select
):focus-visible{
	outline: none;
	border-color: var(--msdef-ink);
	box-shadow: 0 0 0 3px rgba(17,17,17,.08);
}

/* --- Items grid -------------------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 26px 24px;
	padding-top: 26px;
	position: static;
	clear: both;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items .clearer{
	display: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-item{
	display: flex;
	float: none;
	width: auto !important;
	margin: 0;
}

/* The card fills the item, so every card of a row ends up the same height. */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items .music-store-item > :is(.music-store-song,.music-store-collection){
	flex: 1 1 auto;
}

/* --- Product card ------------------------------------------------------ */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items :is(.music-store-song,.music-store-collection){
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 16px;
	background: var(--msdef-surface);
	border: 1px solid var(--msdef-line);
	border-radius: var(--msdef-radius);
	box-shadow: var(--msdef-shadow);
	transition: border-color .18s var(--msdef-ease), box-shadow .18s var(--msdef-ease), transform .18s var(--msdef-ease);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items :is(.music-store-song,.music-store-collection):hover{
	border-color: var(--msdef-line-2);
	box-shadow: var(--msdef-shadow-hover);
	transform: translateY(-2px);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items :is(.song-data,.collection-data){
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}

/* --- Cover ------------------------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items :is(.song-cover,.collection-cover){
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-height: none;
	height: auto;
	margin: 0 0 14px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--msdef-soft);
	border-radius: var(--msdef-radius-sm);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items :is(.song-cover a,.collection-cover a){
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items :is(.song-cover img,.collection-cover img){
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* --- Title, badges and metadata ---------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-title-player-row{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-title-player-row :is(.song-title,.collection-title){
	display: block;
	min-width: 0;
	font-size: 17px;
	line-height: 24px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-title-player-row :is(.song-title a,.collection-title a){
	font-size: 17px;
	font-weight: 600;
	line-height: 24px;
	color: var(--msdef-ink);
	text-decoration: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-title-player-row :is(.song-title a,.collection-title a):hover{
	text-decoration: underline;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-title-player-row :is(.song-title a,.collection-title a):focus-visible{
	outline: 2px solid var(--msdef-ink);
	outline-offset: 3px;
	border-radius: 3px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-icon,.collection-icon){
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 7px;
	margin-right: 8px;
	border-radius: 6px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(
	.song-artist,
	.collection-artist,
	.song-genre,
	.collection-genre,
	.song-album,
	.collection-album,
	.song-gender,
	.collection-gender,
	.song-tempo,
	.collection-tempo
){
	font-size: 13px;
	line-height: 20px;
	color: var(--msdef-muted);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(
	.song-artist,
	.collection-artist,
	.song-genre,
	.collection-genre,
	.song-album,
	.collection-album,
	.song-gender,
	.collection-gender,
	.song-tempo,
	.collection-tempo
) ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(
	.song-artist,
	.collection-artist,
	.song-genre,
	.collection-genre,
	.song-album,
	.collection-album,
	.song-gender,
	.collection-gender,
	.song-tempo,
	.collection-tempo
) li{
	display: inline-block;
	font-size: 13px;
	line-height: 20px;
	color: var(--msdef-muted);
	margin: 0 10px 0 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(
	.song-artist,
	.collection-artist,
	.song-genre,
	.collection-genre,
	.song-album,
	.collection-album,
	.song-gender,
	.collection-gender,
	.song-tempo,
	.collection-tempo
) li .arrow{
	color: var(--msdef-line-2);
	font-size: 14px;
	font-weight: 400;
	margin-right: .25em;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .label{
	font-style: normal;
	font-weight: 600;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--msdef-muted);
	margin-right: 6px;
}

/* --- Popularity -------------------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-popularity,.collection-popularity){
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3px;
	font-size: 13px;
	line-height: 20px;
	color: var(--msdef-muted);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-popularity,.collection-popularity) .label{
	margin-right: 2px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.star-active,.star-inactive){
	display: inline-block;
	width: 15px;
	height: 14px;
	margin: 0 1px;
	vertical-align: middle;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-popularity,.collection-popularity) .votes{
	font-size: 13px;
	color: var(--msdef-muted);
}

/* --- Price ------------------------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) :is(.song-price,.collection-price){
	color: var(--msdef-ink);
	font-size: 19px;
	line-height: 26px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) :is(.song-price,.collection-price).invalid{
	color: var(--msdef-line-2);
	text-decoration: line-through;
}

/* --- Payment block ----------------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-payment-buttons,.collection-payment-buttons) form{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 20px;
}

/* The pay block sits at the bottom of the card, so the buttons of a row
   share the same baseline even when a cover is missing. */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items :is(.song-payment-buttons,.collection-payment-buttons){
	margin-top: auto;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-payment-buttons,.collection-payment-buttons) form br{
	display: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-payment-buttons,.collection-payment-buttons) .ms-payment-gateway-label{
	display: block;
	flex: 0 0 100%;
	width: 100%;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--msdef-muted);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-payment-buttons,.collection-payment-buttons) .ms-payment-gateway{
	display: block;
	flex: 1 1 150px;
	min-width: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-payment-buttons,.collection-payment-buttons) .ms-payment-gateway select{
	width: 100%;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-payment-buttons,.collection-payment-buttons) input[name="ms_coupon_code"]{
	flex: 0 1 auto;
	min-width: 90px;
	min-height: 44px;
	max-width: 130px;
	padding: 9px 10px;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	color: var(--msdef-ink);
	background: var(--msdef-surface);
	border: 1px solid var(--msdef-line);
	border-radius: var(--msdef-radius-sm);
	transition: border-color .16s var(--msdef-ease), box-shadow .16s var(--msdef-ease);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.song-payment-buttons,.collection-payment-buttons) input[name="ms_coupon_code"]:focus-visible{
	outline: none;
	border-color: var(--msdef-ink);
	box-shadow: 0 0 0 3px rgba(17,17,17,.08);
}

/* --- Pagination -------------------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-pagination{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 34px 0 0;
	padding: 0;
	text-align: center;
	position: static;
	clear: both;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-pagination :is(a.page-link,span.page-selected){
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	margin: 0;
	background: var(--msdef-surface);
	border: 1px solid var(--msdef-line);
	border-radius: var(--msdef-radius-sm);
	color: var(--msdef-ink-2);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	transition: border-color .16s var(--msdef-ease), background-color .16s var(--msdef-ease), color .16s var(--msdef-ease);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-pagination a.page-link:hover{
	border-color: var(--msdef-line-2);
	background: var(--msdef-soft);
	color: var(--msdef-ink);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-pagination a.page-link:focus-visible{
	outline: 2px solid var(--msdef-ink);
	outline-offset: 2px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-pagination span.page-selected{
	background: var(--msdef-ink);
	border-color: var(--msdef-ink);
	color: var(--msdef-surface);
	font-weight: 700;
}

/* --- Promotion note ---------------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(
	.music-store-discount-promotion,
	.collection-discount-promotion,
	.song-discount-promotion
){
	margin: 18px 0 0;
	padding: 14px 16px;
	background: var(--msdef-soft);
	border: 1px solid var(--msdef-line);
	border-radius: var(--msdef-radius-sm);
	color: var(--msdef-ink-2);
	font-style: normal;
	font-size: 14px;
	line-height: 22px;
}

/* A pseudo element cannot be used inside :is(), so the quote marks of the
   promotion note are set with one rule per pseudo element. They are the
   frame of the promotional message, so they are kept. */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-discount-promotion div:before,
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .collection-discount-promotion:before,
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .song-discount-promotion:before{
	content: "\201C";
	display: inline-block;
	color: var(--msdef-ink);
	font-size: 120%;
	font-weight: 700;
	line-height: 1;
	position: relative;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-discount-promotion div:after{
	content: "\201D";
	display: inline-block;
	color: var(--msdef-ink);
	font-size: 120%;
	font-weight: 700;
	line-height: 1;
	position: relative;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-discount-promotion h2{
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--msdef-ink);
}

/* --- Tabs (single product pages) --------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-tabs{
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	list-style: none;
	margin: 26px 0 18px;
	padding: 0 0 0 0 !important;
	border-bottom: 1px solid var(--msdef-line);
	overflow: visible;
	position: relative;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-tabs:before{
	display: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-tabs li{
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 9px 14px;
	color: var(--msdef-muted);
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-tabs li:after,
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-tabs li:before{
	display: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-tabs li.active-tab{
	background: none;
	border-bottom-color: var(--msdef-ink);
	box-shadow: none;
	color: var(--msdef-ink);
	font-weight: 600;
}

/* --- Single product pages ---------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) :is(.left-column.single,.right-column.single){
	float: left;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) .left-column.single{
	width: 300px;
	max-width: 100%;
	margin: 0 32px 0 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) .right-column.single{
	width: calc(100% - 332px);
	min-width: 0;
	max-width: 100%;
	padding-left: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) :is(.song-cover.single,.collection-cover.single){
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	max-height: none;
	margin: 0 0 18px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--msdef-soft);
	border-radius: var(--msdef-radius);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) :is(.song-cover.single img,.collection-cover.single img){
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) :is(.song-title.single,.collection-title.single){
	font-size: 28px;
	line-height: 36px;
	font-weight: 600;
	color: var(--msdef-ink);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) :is(.song-price.single,.collection-price.single){
	display: inline-block;
	padding: 4px 14px;
	background: var(--msdef-soft);
	border-radius: 999px;
	color: var(--msdef-ink);
	font-size: 18px;
	font-weight: 700;
	text-shadow: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) :is(.song-price.single.invalid,.collection-price.single.invalid){
	color: var(--msdef-line-2);
	background: transparent;
	text-decoration: line-through;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) .explain-text{
	font-style: normal;
	font-size: 14px;
	line-height: 22px;
	color: var(--msdef-muted);
}

/* --- Collection track list --------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .tracks{
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: auto;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track{
	height: auto !important;
	padding: 0;
	margin: 0;
	border-top: 0;
	border-bottom: 1px solid var(--msdef-line);
	background: transparent !important;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track:last-child{
	border-bottom: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track td{
	padding: 12px 0;
	margin: 0;
	border: 0 !important;
	background: transparent !important;
	vertical-align: middle;
	text-align: left !important;
	font-size: 14px !important;
	line-height: 20px !important;
	font-weight: normal !important;
	color: var(--msdef-ink);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection td.track-player{
	width: 62px;
	padding-right: 12px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection td.track-title{
	width: auto;
	padding-right: 16px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection td.track-title a{
	color: var(--msdef-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection td.track-title a:hover{
	text-decoration: underline;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection td.track-title a:focus-visible{
	outline: 2px solid var(--msdef-ink);
	outline-offset: 3px;
	border-radius: 3px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection td.track-price{
	width: 1%;
	white-space: nowrap;
	padding: 12px 20px 12px 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right !important;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection td.track-button{
	width: 1%;
	white-space: nowrap;
	padding: 12px 0;
}

/* A track row has no room for the coupon field - it squeezes the price and
   the gateway select. The discount is applied from the product page or from
   the cart, where the field is shown. */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track-button form{
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 8px;
	font-size: 0;
	line-height: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track-button input[name="ms_coupon_code"]{
	display: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track-button .ms-payment-gateway{
	flex: 0 0 auto;
	margin: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track-button select{
	margin: 0;
	min-width: 128px;
}

/* --- Shopping cart ----------------------------------------------------- */

/* The cart widget of the store header keeps the icon that ships with the
   plugin: paypal_buttons/shopping_cart/button_g.png. That graphic is a 128x51
   transparent PNG whose cart is drawn at x 14..44 and y 14..37, so the icon
   is taken from the file with a negative background position that crops the
   rest of the canvas away. The rest of the widget keeps the design of the
   default store. */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart{
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	padding: 6px 14px;
	background: var(--msdef-surface);
	border: 1px solid var(--msdef-line);
	border-radius: 999px;
	color: var(--msdef-ink-2);
	font-size: 13px;
	line-height: 20px;
	text-align: left;
	text-decoration: none;
	float: right;
	margin: 0 0 12px;
	transition: border-color .16s var(--msdef-ease), background-color .16s var(--msdef-ease);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart::before{
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 31px;
	height: 24px;
	margin-right: 8px;
	background-image: url(../paypal_buttons/shopping_cart/button_g.png);
	background-repeat: no-repeat;
	background-size: 128px 51px;
	background-position: -14px -14px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart:hover{
	border-color: var(--msdef-line-2);
	background: var(--msdef-soft);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-text{
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart .ms-sc-items-number{
	font-weight: 700;
	color: var(--msdef-ink);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-list{
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 22px;
	background: var(--msdef-surface);
	border: 1px solid var(--msdef-line);
	border-radius: var(--msdef-radius);
	overflow: hidden;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-list > div:not(.ms-shopping-cart-row){
	display: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row{
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 16px;
	position: relative;
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid var(--msdef-line);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row:last-child{
	border-bottom: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row div{
	display: block;
	width: auto;
	padding: 0;
	vertical-align: middle;
	font-size: 14px;
	line-height: 20px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row img{
	width: 56px;
	height: 56px;
	object-fit: contain;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row a{
	color: var(--msdef-ink);
}

/* The product title is a title, not a link in a paragraph: it keeps the ink
   colour and only underlines on hover. */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row > div:nth-child(2) > a{
	color: var(--msdef-ink);
	font-weight: 600;
	text-decoration: none;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row > div:nth-child(2) > a:hover{
	text-decoration: underline;
}

/* The legacy stylesheet forces `display:inline-block !important` on every
   link of the list, so the button needs the same treatment to centre its
   label vertically. */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row a.button{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--msdef-line);
	border-radius: var(--msdef-radius-sm);
	background: var(--msdef-surface);
	color: var(--msdef-ink-2);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	transition: border-color .16s var(--msdef-ease), background-color .16s var(--msdef-ease);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row a.button:hover{
	border-color: var(--msdef-line-2);
	background: var(--msdef-soft);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row a.button:focus-visible{
	outline: 2px solid var(--msdef-ink);
	outline-offset: 2px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-summary{
	box-sizing: border-box;
	width: 100%;
	color: var(--msdef-ink);
	background: var(--msdef-surface);
	border: 1px solid var(--msdef-line);
	border-radius: var(--msdef-radius);
	padding: 4px 18px 18px;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-summary > div:not(:last-child){
	border-bottom: 1px solid var(--msdef-line);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-summary div{
	padding: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-summary > div{
	padding: 12px 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-summary .ms-shopping-cart-summary-title{
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
	color: var(--msdef-ink);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-summary form{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	background: none;
	border-radius: 0;
	padding: 0;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-summary input[name="ms_coupon_code"]{
	min-height: 44px;
	max-width: 160px;
	padding: 9px 10px;
	font-family: inherit;
	font-size: 14px;
	color: var(--msdef-ink);
	background: var(--msdef-surface);
	border: 1px solid var(--msdef-line);
	border-radius: var(--msdef-radius-sm);
}

/* The payment caption of the summary uses the same uppercase caption as the
   product cards, so the whole store speaks one language. */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-summary .ms-payment-gateway-label{
	display: inline-block;
	margin-right: 10px;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--msdef-muted);
	vertical-align: middle;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-summary .ms-payment-gateway{
	display: inline-block;
	margin-right: 12px;
	vertical-align: middle;
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-summary .ms-shopping-cart-summary-discount-note{
	margin: 12px 0 0;
	padding: 12px 14px;
	background: var(--msdef-soft);
	border-radius: var(--msdef-radius-sm);
	font-size: 14px;
	line-height: 22px;
	color: var(--msdef-ink-2);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-total{
	font-weight: 700;
	color: var(--msdef-ink);
}

html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-total.invalid{
	color: var(--msdef-line-2);
	text-decoration: line-through;
	padding-right: 10px;
}

/* --- Purchased items page ---------------------------------------------- */
html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-purchased-item{
	border-bottom: 1px solid var(--msdef-line);
	padding-bottom: 16px;
	margin-bottom: 16px;
}

/* --- Narrow screens ---------------------------------------------------- */
@media screen and (max-width: 900px){
	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items{
		gap: 20px;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) :is(.left-column.single,.right-column.single){
		float: none;
		width: 100%;
		padding-left: 0;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) .left-column.single{
		margin: 0 0 22px;
		max-width: 320px;
	}
}

@media screen and (max-width: 600px){
	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-header{
		align-items: flex-start;
		gap: 12px;
		padding-bottom: 14px;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-header :is(.music-store-filters,.music-store-ordering){
		width: 100%;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-header span{
		display: inline-flex;
		clear: none;
		float: none;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-item{
		clear: none;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items :is(.song-cover,.collection-cover){
		width: 100%;
		max-height: none;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) :is(.left-column.single,.right-column.single){
		float: none;
		width: 100%;
		padding-left: 0;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(.music-store-song,.music-store-collection) .left-column.single{
		margin: 0 0 22px;
		max-width: 100%;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row{
		grid-template-columns: 44px minmax(0, 1fr);
		row-gap: 8px;
		padding: 12px;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .ms-shopping-cart-row img{
		width: 44px;
		height: 44px;
	}

	/* The four columns of a track row do not fit on a narrow screen, and a
	   table row cannot wrap on its own. The row is turned into a flex box: the
	   player, the title and the price share the first line and the buy
	   controls move to a line of their own. */
	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .tracks,
	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .tracks tbody{
		display: block;
		width: 100%;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 10px;
		padding: 12px 0;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track td{
		display: block;
		width: auto;
		padding: 0;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track td.track-player{
		flex: 0 0 56px;
		padding-right: 0;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track td.track-title{
		flex: 1 1 auto;
		min-width: 0;
		padding-right: 0;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track td.track-price{
		flex: 0 0 auto;
		width: auto;
		padding: 0;
		text-align: right !important;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track td.track-button{
		flex: 1 0 100%;
		margin-top: 12px;
		padding: 0;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track-button form{
		flex-wrap: wrap;
		justify-content: flex-start !important;
		gap: 8px;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track-button .ms-payment-gateway{
		flex: 1 1 auto;
		min-width: 0;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-collection .track-button select{
		width: 100%;
	}
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) :is(
		.music-store select,
		.music-store-song select,
		.music-store-collection select,
		.ms-shopping-cart-summary select,
		.music-store-items :is(.music-store-song,.music-store-collection),
		.music-store-pagination :is(a,.page-selected)
	){
		transition: none;
	}

	html:not(:has(#ms-css-layout-css,#ms-js-layout-js)) .music-store-items :is(.music-store-song,.music-store-collection):hover{
		transform: none;
	}
}