/* Storefront display modes. Width limits apply to every page region together. */
.storefront{--page-width:1440px;--page-gutter:32px}
html[data-layout="tablet"] .storefront{--page-width:1040px;--page-gutter:24px}
html[data-layout="mobile"] .storefront{--page-width:520px;--page-gutter:16px}
.storefront>header,.storefront>.site-nav,.storefront>.catalog-nav,.storefront>main,.storefront>footer,.storefront>.display-toolbar{width:100%;max-width:var(--page-width);margin-inline:auto;padding-inline:var(--page-gutter);min-width:0}
.storefront>header{gap:32px}
.storefront>main{padding-top:20px}
.storefront>nav{flex-wrap:wrap;gap:12px 22px;white-space:normal;overflow:visible}
.storefront>.catalog-nav{min-height:52px}
.storefront>.catalog-nav a,.storefront>.catalog-nav button{min-height:36px;display:inline-flex;align-items:center}
.storefront>.catalog-nav [data-cat].active::after,.storefront>.catalog-nav [data-cat-link].active::after{bottom:0}
.display-toolbar{display:flex;align-items:center;gap:16px;padding-block:14px;border-bottom:1px solid var(--line);font-size:12px}
.catalog-shortcut{font-weight:700;white-space:nowrap;margin-right:auto}
#layoutStatus{color:var(--muted);font-size:11px}
.storefront .hero{min-height:300px}
.storefront .herotext{padding:28px 32px 18px}
.storefront h1{font-size:clamp(28px,2.6vw,38px);line-height:1.5;margin:14px 0}
.storefront .herotext p{font-size:13px}
.storefront .primary{margin:8px 0 16px;min-height:44px}
.storefront .principles{margin-bottom:36px}
.storefront #catalog{scroll-margin-top:80px}
.catalog-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
.catalog-sidebar,.catalog-content{min-width:0}
.catalog-sidebar{background:#f6f7f7;border:1px solid var(--line);border-radius:6px}
#brandBrowser>summary{padding:18px;font-weight:700;font-size:14px;cursor:pointer;min-height:52px}
.brand-browser-content{padding:0 16px 16px}
.storefront .instrument-notice{font-size:12px;line-height:1.8;margin:0 0 16px;color:#52575b;overflow-wrap:anywhere}
.storefront .instrument-notice a{text-decoration:underline;text-underline-offset:3px}
.storefront .audio-brands{padding:0;border:0;gap:6px;margin:12px 0 20px;white-space:normal;overflow:visible}
.storefront .audio-brands a{font-size:12px;padding:8px;min-height:40px;display:flex;align-items:center;background:#fff;overflow-wrap:anywhere}
.storefront .audio-brands a:hover{background:#203c42}
.catalog-sidebar .brand-directory{padding:10px;margin:10px 0;background:#fff;border-radius:4px}
.catalog-sidebar .brand-directory summary{flex-wrap:wrap;gap:8px;font-size:12px;white-space:normal}
.catalog-sidebar .distributor-logo{width:120px;flex-basis:120px}
.catalog-sidebar .brand-directory summary>span:last-child{flex-basis:100%}
.catalog-sidebar .brand-directory-grid{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px}
.catalog-sidebar .brand-entry{padding:12px}
.catalog-content .filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:16px}
.catalog-content #categories{grid-column:1/-1}
.catalog-content .filters>label{display:grid;gap:6px;min-width:0;white-space:normal}
.catalog-content .filters select{width:100%;max-width:100%;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:4px;font-size:14px;padding:10px}
.catalog-content .chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.catalog-content .sales-paths{gap:8px;margin:16px 0}
.catalog-content .sales-paths button{min-height:44px;padding:9px 12px}
.catalog-content .sales-paths a{width:100%;margin:4px 0 0}
.catalog-content .resultline{gap:16px;align-items:start;flex-wrap:wrap;font-size:12px;padding:16px 0}
.catalog-content .resultline #catalogStatus{max-width:100%;text-align:left}
.catalog-content #results{font-size:15px;font-weight:700;color:var(--ink)}
.catalog-content .products{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}
.catalog-content .product{min-width:0;align-self:start}
.catalog-content .product h3{font-size:15px;overflow-wrap:anywhere}
.catalog-content .product .type{white-space:normal;overflow-wrap:anywhere;font-size:11px;letter-spacing:.03em}
.catalog-content .product-foot{display:block}
.catalog-content .product-foot .view{display:inline-flex;gap:16px;margin-top:8px}
.catalog-content .sku{overflow-wrap:anywhere;font-size:10px;letter-spacing:0}
.storefront footer>div{gap:16px;flex-wrap:wrap}
.storefront footer>div>div{display:flex;gap:12px;flex-wrap:wrap}
.storefront footer a,.storefront footer button{min-height:36px}
.storefront .detail-info{overflow-wrap:anywhere}
/* Tablet: compact brand drawer above a two-column catalog. */
html[data-layout="tablet"] .catalog-layout,html[data-layout="mobile"] .catalog-layout{grid-template-columns:minmax(0,1fr);gap:20px}
html[data-layout="tablet"] .catalog-content .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
html[data-layout="tablet"] .catalog-sidebar .brand-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-layout="tablet"] .catalog-sidebar .brand-directory summary>span:last-child{flex-basis:auto}
html[data-layout="tablet"] .storefront>header{gap:24px;flex-wrap:wrap}
html[data-layout="tablet"] .storefront .search{min-width:240px}
html[data-layout="tablet"] .storefront>.display-toolbar{flex-wrap:wrap;gap:8px 16px}
html[data-layout="tablet"] #layoutStatus{flex-basis:100%}
/* Phone: one readable product per row and a full-width search. */
html[data-layout="mobile"] .storefront>header{flex-wrap:wrap;gap:18px;padding-block:20px}
html[data-layout="mobile"] .storefront .logo{font-size:26px}
html[data-layout="mobile"] .storefront .search{order:3;flex-basis:100%;max-width:none;min-height:46px}
html[data-layout="mobile"] .storefront .search input{font-size:16px}
html[data-layout="mobile"] .storefront>.site-nav{font-size:12px;gap:8px 16px;padding-block:10px}
html[data-layout="mobile"] .site-account{margin-left:0}
html[data-layout="mobile"] .storefront>.catalog-nav{position:static;gap:6px 16px;padding-block:8px;font-size:12px}
html[data-layout="mobile"] .storefront>.catalog-nav .navright,html[data-layout="mobile"] .storefront>.catalog-nav .navutility{display:none}
html[data-layout="mobile"] .display-toolbar{display:block;padding-block:12px}
html[data-layout="mobile"] .catalog-shortcut{display:inline-block;margin-bottom:10px}
html[data-layout="mobile"] #layoutStatus{display:block;margin-top:8px}
html[data-layout="mobile"] .storefront .hero{grid-template-columns:minmax(0,1fr);min-height:0}
html[data-layout="mobile"] .storefront .herotext{padding:24px}
html[data-layout="mobile"] .storefront h1{font-size:28px}
html[data-layout="mobile"] .storefront .heroimage,html[data-layout="mobile"] .storefront .herolabel{display:none}
html[data-layout="mobile"] .storefront .principles{grid-template-columns:1fr;gap:8px;margin-bottom:24px;padding:16px 0;text-align:left;font-size:12px}
html[data-layout="mobile"] .storefront .principles span+span{border:0}
html[data-layout="mobile"] .storefront .sectionhead h2{font-size:22px}
html[data-layout="mobile"] .storefront .sectionhead p{display:none}
html[data-layout="mobile"] .catalog-content .filters{gap:12px}
html[data-layout="mobile"] .catalog-content #categories{gap:6px}
html[data-layout="mobile"] .catalog-content .chip{font-size:12px;padding:8px}
html[data-layout="mobile"] .catalog-content .filters select{font-size:16px}
html[data-layout="mobile"] .catalog-content .sales-paths{gap:6px}
html[data-layout="mobile"] .catalog-content .sales-paths button{font-size:12px;padding:8px 10px}
html[data-layout="mobile"] .catalog-content .products{grid-template-columns:minmax(0,1fr);gap:18px}
html[data-layout="mobile"] .catalog-content .product{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding-bottom:18px}
html[data-layout="mobile"] .catalog-content .photo{aspect-ratio:1;align-self:start}
html[data-layout="mobile"] .catalog-content .product .photo>img{padding:8px}
html[data-layout="mobile"] .catalog-content .product .type{margin:0;font-size:10px}
html[data-layout="mobile"] .catalog-content .product h3{font-size:14px;line-height:1.6;margin-top:6px}
html[data-layout="mobile"] .catalog-content .price{font-size:16px}
html[data-layout="mobile"] .catalog-content .badge{font-size:9px;letter-spacing:0;top:5px;left:5px;padding:2px 4px;max-width:calc(100% - 10px)}
html[data-layout="mobile"] .catalog-content .brand-logo{width:70px;height:28px;max-width:70%;padding:4px;right:4px;bottom:4px}
html[data-layout="mobile"] .catalog-content .availability-badge{font-size:10px;max-width:calc(100% - 8px);padding:4px;right:4px;top:4px}
html[data-layout="mobile"] .catalog-content .photo:has(.availability-badge)>.badge{top:auto;bottom:34px}
html[data-layout="mobile"] .storefront .about{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px;margin-top:32px}
html[data-layout="mobile"] .storefront .about h2{font-size:22px}
html[data-layout="mobile"] .storefront .entry-paths a{display:block;margin:12px 0}
html[data-layout="mobile"] .storefront dialog{width:min(520px,calc(100% - 24px));padding:36px 18px 24px}
html[data-layout="mobile"] .storefront .detail{grid-template-columns:minmax(0,1fr);gap:20px}
html[data-layout="mobile"] .storefront .product-gallery{position:static}
html[data-layout="mobile"] .storefront .product-gallery .detail-media img{height:250px}
html[data-layout="mobile"] .storefront .purchase-panel{grid-template-columns:minmax(0,1fr)}
html[data-layout="mobile"] .storefront .product-meta div{grid-template-columns:95px minmax(0,1fr);gap:10px}
html[data-layout="mobile"] .storefront .empty{padding:30px 16px}
@media(min-width:1400px){html[data-layout="desktop"] .catalog-content .products{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.storefront .photo img{transition:none}}