/* Anonymous Tracks - responsive & consistency fixes (mobile/tablet audit). Loaded last, site-wide. */

/* ---------- WooCommerce pagination: dark pills (was the default light/violet style) ---------- */
.woocommerce nav.woocommerce-pagination ul,.woocommerce-pagination ul.page-numbers{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px 0 8px!important;padding:0!important;border:0!important}
.woocommerce nav.woocommerce-pagination ul li,.woocommerce-pagination ul.page-numbers li{border:0!important;margin:0!important;float:none!important;overflow:visible!important}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span,.woocommerce-pagination .page-numbers a,.woocommerce-pagination .page-numbers span{display:inline-grid!important;place-items:center;min-width:42px;height:42px;padding:0 12px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.12)!important;background:#0f0f12!important;color:#c9c6c0!important;font:700 14px/1 Manrope,Inter,system-ui,sans-serif!important;text-decoration:none!important;transition:background .15s,border-color .15s,color .15s}
.woocommerce nav.woocommerce-pagination ul li a:hover,.woocommerce nav.woocommerce-pagination ul li a:focus-visible{border-color:rgba(227,18,27,.6)!important;color:#fff!important;background:#16090b!important}
.woocommerce nav.woocommerce-pagination ul li span.current{background:#e3121b!important;border-color:#e3121b!important;color:#fff!important}

/* ---------- WooCommerce notices: brand colours instead of the default violet ---------- */
.woocommerce-info,.woocommerce-message,.woocommerce-notice--info{border-left-color:#e3121b!important;border-top-color:#e3121b!important}
.woocommerce-info::before,.woocommerce-message::before{color:#e3121b!important}

/* ---------- Seller dashboard: sidebar buttons never touch the edge ---------- */
.nk-sidebar .btn,.nk-sidebar a.btn{max-width:100%;white-space:normal;text-align:center}

/* ========================================================================
 * Tablet + mobile
 * ===================================================================== */
@media (max-width:1024px){
	/* Long SEO article on the home: collapsed with "Read more" (content stays in the page for Google). */
	.at-seo-collapse{position:relative;max-height:560px;overflow:hidden;transition:max-height .35s ease}
	.at-seo-collapse::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(180deg,transparent,var(--at-seo-bg,#050506) 85%);pointer-events:none}
	.at-seo-collapse.is-open{max-height:none}
	.at-seo-collapse.is-open::after{display:none}
	.at-seo-more{display:flex;margin:14px auto 0;align-items:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font:800 14px/1 Manrope,Inter,system-ui,sans-serif;cursor:pointer}
	.at-seo-more:hover{border-color:#e3121b;background:rgba(227,18,27,.1)}
}

/* ========================================================================
 * Mobile
 * ===================================================================== */
@media (max-width:767px){
	/* Header on ONE row: logo left, icons right (was logo row + icons row = 180px, sticky). */
	.elementor-element.at-nav>.e-con-inner,.elementor-element.at-nav.e-con-full,.elementor-location-header .at-nav>.e-con-inner{flex-wrap:nowrap!important;align-items:center!important;gap:6px!important}
	.elementor-element.at-nav{--padding-top:8px!important;--padding-bottom:8px!important;--padding-left:12px!important;--padding-right:12px!important}
	.at-nav .at-logo{flex:0 1 auto!important;min-width:0!important;width:auto!important;max-width:clamp(96px,32vw,124px)!important;order:0!important;margin-right:auto!important}
	.at-nav .at-logo img{width:100%!important;height:auto!important;max-height:46px;object-fit:contain;object-position:left center}
	.at-nav .at-account-widget{order:1!important;flex:0 0 auto!important;width:auto!important;margin:0!important}
	.at-nav .at-cart{order:2!important;flex:0 0 auto!important;width:auto!important;margin:0!important}
	.at-nav .at-menu{order:3!important;flex:0 0 auto!important;width:auto!important;margin:0!important}
	.at-nav .at-account{gap:6px!important}
	.at-nav .at-account .at-wl-head{width:36px;height:36px}
	.at-nav .at-acc-btn--seller{width:36px!important;height:36px!important;padding:0!important;justify-content:center}
	.at-nav .at-acc-toggle{padding:2px!important;gap:0!important}
	.at-nav .at-acc-chevron{display:none!important}
	/* Frosted bar a bit more opaque on small screens (text scrolling under it). */
	.elementor .elementor-element.at-nav::before,body .elementor-location-header .at-nav::before{background:rgba(5,5,6,.94)!important}

	/* Genre chips (home "Latest tracks"): one swipeable row instead of ~15 wrapped rows. */
	.at-chips{flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px!important;margin-right:-16px!important;padding-right:16px!important;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
	.at-chips::-webkit-scrollbar{display:none}
	.at-chips>*{flex:0 0 auto!important;scroll-snap-align:start}
}

/* WordPress admin bar is not fixed under 600px: the sticky header must not leave a 46px hole. */
@media (max-width:600px){
	.admin-bar .elementor-element.at-nav,.admin-bar .elementor-location-header .at-nav{top:0!important}
}

.at-seo-more[hidden]{display:none!important}
@media (max-width:767px){.elementor-element.at-nav,body .elementor-location-header .at-nav{padding-left:12px!important;padding-right:12px!important}.elementor-element.at-nav>.e-con-inner{padding:0!important;max-width:100%!important}}
@media (max-width:767px){body .elementor-element.at-nav .elementor-element.at-logo{margin:0!important;--margin-left:0px!important}body .elementor-element.at-nav .elementor-element.at-logo img,body .elementor-element.at-nav .elementor-element.at-logo .elementor-widget-container img{width:100%!important;max-width:100%!important;height:auto!important}}
/* Header cart: icon + count only below 1440px (the total made the bar overflow on medium screens). */
@media (max-width:1440px){.at-nav .at-cart .elementor-menu-cart__toggle_button .elementor-button-text{display:none!important}.at-nav .at-cart .elementor-menu-cart__toggle_button{gap:0!important}}
/* Medium desktops (1025-1280px): logo + spacing tightened so menu, account icons and cart all fit. */
@media (min-width:1025px) and (max-width:1280px){body .elementor-element.at-nav>.e-con-inner{gap:10px!important}body .elementor-element.at-nav .elementor-element.at-logo{max-width:160px!important;width:160px!important;flex:0 0 160px!important}body .elementor-element.at-nav .elementor-element.at-logo img{width:100%!important;height:auto!important}.at-nav .at-account{gap:6px!important}}
/* Tablet (768-1024px): menu button at the far right, 3 track cards per row. */
@media (min-width:768px) and (max-width:1024px){.at-nav .at-logo{order:0!important;margin-right:auto!important}.at-nav .at-account-widget{order:1!important}.at-nav .at-cart{order:2!important}.at-nav .at-menu{order:3!important}.woocommerce ul.products:not(.at-dt-list),.elementor-widget-woocommerce-products ul.products{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}.woocommerce ul.products:not(.at-dt-list)::before,.woocommerce ul.products:not(.at-dt-list)::after{display:none!important}.woocommerce ul.products:not(.at-dt-list) li.product{width:auto!important;float:none!important;margin:0!important;clear:none!important}}
/* Card buttons: stacked when the card itself is narrow (any screen), never spilling out of the card. */
.woocommerce ul.products li.product{container-type:inline-size}
@container (max-width:250px){.atpc-actions{flex-direction:column!important;align-items:stretch!important}.atpc-actions>.button{width:100%!important;justify-content:center;margin:0!important}}
.atpc-actions>.button{min-width:0}