/* ── Self-hosted fonts ────────────────────────────────────────────────────────
   These used to be loaded from Google's font CDN, which handed every visitor's
   IP address to Google on every page view - a third-party transfer we would then
   have had to disclose and defend in the privacy notice. Self-hosting removes
   it entirely, and is faster (no extra DNS + TLS handshake to another origin).
   Both files are VARIABLE fonts, so one @font-face covers every weight the site
   uses: DM Sans 300/400/500, Playfair 400/500/700.
   Source TTFs live in assets/fonts/ at the repo root; the woff2s here are what
   deploys. Do not re-add a Google Fonts <link> - see privacy.html. */
@font-face{
  font-family:'DM Sans';
  src:url('assets/fonts/DMSans.woff2') format('woff2-variations'),
      url('assets/fonts/DMSans.woff2') format('woff2');
  font-weight:100 1000; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Playfair Display';
  src:url('assets/fonts/PlayfairDisplay.woff2') format('woff2-variations'),
      url('assets/fonts/PlayfairDisplay.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
}

/* ── The String Gauge — Shared Stylesheet ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#B47A2E;--gold-light:#FAF0E0;--gold-mid:#E8C97D;
  --black:#111111;--surface:#FAFAF8;--surface2:#F3F1ED;
  --border:#E8E4DC;--border2:#D4CFC4;
  --text:#1A1814;--text-dim:#4A4540;--text-mute:#8A847A;
  --green:#2D6A4F;--green-bg:#EAF4ED;
  --red:#8B2020;--red-bg:#FCECEC;
  --amber:#7A4F1A;--amber-bg:#FFF4E0;
  --radius:10px;--radius-lg:14px;

  /* ── Retailer tokens ──────────────────────────────────────────────────────
     Source of truth is retailer_theme.json at the repo root. These are a
     FALLBACK for first paint and for pages that load before SG_DATA; site_app.js
     overwrites them from SG_DATA.theme on load. Do not edit a colour only here —
     change retailer_theme.json and re-run export_site_data.py, or the two drift.
       -dot  dark surfaces (cards, top edges)   >=3:1 vs #161310
       -ink  light surfaces (retailer pages)    >=4.5:1 vs #FAF8F4
       -cta  buttons carrying white text        >=4.5:1 vs #FFFFFF          */
  --r-andertons-dot:#C1C1C1;    --r-andertons-ink:#1A1A1A;
  --r-andertons-cta:#1A1A1A;    --r-andertons-cta-hover:#333333;
  --r-thomann-dot:#009FE3;      --r-thomann-ink:#0078B9;
  --r-thomann-cta:#007CBD;      --r-thomann-cta-hover:#00669C;
  --r-guitarguitar-dot:#BA4F0B; --r-guitarguitar-ink:#BA4F0B;
  --r-guitarguitar-cta:#BA4F0B; --r-guitarguitar-cta-hover:#9C4209;
  --r-peach-dot:#E38528;        --r-peach-ink:#B05B00;
  --r-peach-cta:#B55F00;        --r-peach-cta-hover:#984F00;
  --r-g4m-dot:#FFBA99;          --r-g4m-ink:#9F6346;
  --r-g4m-cta:#A4684B;          --r-g4m-cta-hover:#8A573E;
  --r-scan-dot:#006EB9;         --r-scan-ink:#006EB9;
  --r-scan-cta:#006EB9;         --r-scan-cta-hover:#005C9B;
  /* Unknown/unmapped retailer: neutral, never another shop's brand colour.
     Was #FF8A4C (Gear4Music's old orange) used as a generic default. */
  --r-unknown-cta:#4A4540;      --r-unknown-cta-hover:#35312d;
  --sg-gold:#D4A748;
}
html{font-size:16px}
body{font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--text);line-height:1.5}

/* Nav */
.nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border);padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--black);letter-spacing:-.3px;text-decoration:none}
.logo span{color:var(--gold)}
.nav-links{display:flex;gap:4px;font-size:13px}
.nav-links a{text-decoration:none;color:var(--text-dim);padding:6px 12px;border-radius:6px;transition:all .15s}
.nav-links a:hover,.nav-links a.active{color:var(--black);background:var(--surface2)}
.nav-dropdown{position:relative}
.nav-dropdown-btn{cursor:pointer;display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:6px;color:var(--text-dim);font-size:13px;transition:all .15s;user-select:none}
.nav-dropdown-btn:hover{color:var(--black);background:var(--surface2)}
.nav-dropdown-btn.active{color:var(--black);background:var(--surface2)}
.nav-dropdown-btn::after{content:'▾';font-size:10px;opacity:.6}
.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:6px;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.08);display:none;z-index:200;margin-top:0}
.nav-dropdown.open .dropdown-menu{display:block}
.nav-dropdown:hover .dropdown-menu{display:block}
.nav-dropdown .dropdown-menu:hover{display:block}
.dropdown-menu a{display:block;padding:8px 12px;font-size:13px;color:var(--text-dim);text-decoration:none;border-radius:8px;transition:all .15s}
.dropdown-menu a:hover{background:var(--surface2);color:var(--black)}
.dropdown-menu a.current{color:var(--gold);font-weight:500}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-socials{display:flex;gap:8px}
.nav-social{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;text-decoration:none;opacity:.6;transition:opacity .15s}
.nav-social:hover{opacity:1}
.nav-cta{background:var(--black);color:#fff;font-size:12px;font-weight:500;padding:7px 16px;border-radius:20px;cursor:pointer;border:none;letter-spacing:.02em;white-space:nowrap}

/* Ticker */
.ticker{background:var(--black);color:#fff;padding:8px 0;font-size:12px;overflow:hidden;white-space:nowrap}
.ticker-inner{display:inline-flex;gap:40px;animation:ticker 50s linear infinite}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{display:inline-flex;align-items:center;gap:8px}
.t-name{color:#888}
.t-drop{color:#5DCAA5;font-weight:500}
.t-rise{color:#F09595;font-weight:500}
.t-sep{color:#333}

/* Page layout */
.page{max-width:1200px;margin:0 auto;padding:32px 40px;display:grid;grid-template-columns:1fr 280px;gap:28px}
.page.full{grid-template-columns:1fr}

/* Section heads */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.section-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--black);letter-spacing:-.2px}
.section-link{font-size:12px;color:var(--gold);text-decoration:none;font-weight:500}
.section-link:hover{text-decoration:underline}

/* Filter bar */
.filter-bar{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.filter-btn{font-size:12px;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:#fff;color:var(--text-mute);cursor:pointer;transition:all .15s}
.filter-btn:hover{border-color:var(--border2);color:var(--text-dim)}
.filter-btn.active{background:var(--black);color:#fff;border-color:var(--black);font-weight:500}

/* Deal cards */
.deal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:36px}
.deal-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:box-shadow .2s,border-color .2s}
.deal-card:hover{border-color:var(--border2);box-shadow:0 4px 20px rgba(0,0,0,.06)}
.card-img{height:160px;background:var(--surface2);display:flex;align-items:center;justify-content:center;position:relative;font-size:56px;opacity:.12}
.card-badge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:500;padding:3px 9px;border-radius:20px}
.badge-drop{background:var(--green-bg);color:var(--green)}
.badge-bstock{background:var(--amber-bg);color:var(--amber)}
.badge-best{background:var(--red-bg);color:var(--red)}
.badge-new{background:#EEF;color:#446}
.card-body{padding:12px 14px}
.card-brand{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute);margin-bottom:4px}
.card-name{font-size:13px;line-height:1.4;color:var(--text);margin-bottom:10px;min-height:36px}
.card-prices{display:flex;align-items:baseline;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.price-now{font-size:20px;font-weight:500;color:var(--black)}
.price-was{font-size:12px;color:var(--text-mute);text-decoration:line-through}
.price-drop{font-size:11px;font-weight:500;color:var(--green);background:var(--green-bg);padding:2px 7px;border-radius:4px}
.card-retailers{display:flex;gap:4px;flex-wrap:wrap}
.r-chip{font-size:10px;padding:3px 7px;border-radius:4px;background:var(--surface2);color:var(--text-mute);border:1px solid var(--border)}
.r-chip.cheap{background:var(--green-bg);color:var(--green);border-color:transparent;font-weight:500}

/* B-Stock table */
.bstock-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);margin-bottom:36px}
.bstock-table th{background:var(--surface2);padding:9px 14px;text-align:left;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute);border-bottom:1px solid var(--border)}
.bstock-table td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.bstock-table tr:last-child td{border-bottom:none}
.bstock-table tr:hover td{background:var(--surface)}
.cond-pill{font-size:10px;padding:3px 8px;border-radius:20px;font-weight:500;white-space:nowrap}
.cond-bstock{background:var(--amber-bg);color:var(--amber)}
.cond-demo{background:#EEF2FF;color:#4338CA}
.cond-used{background:var(--surface2);color:var(--text-mute)}
.save-pill{font-size:11px;padding:3px 8px;border-radius:4px;background:var(--green-bg);color:var(--green);font-weight:500}

/* Sidebar */
.sidebar-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px}
.sidebar-title{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--black);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.brief-item{padding:10px 0;border-bottom:1px solid var(--border)}
.brief-item:last-child{border-bottom:none;padding-bottom:0}
.brief-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.brief-label.drop{color:var(--green)}
.brief-label.rise{color:var(--red)}
.brief-label.bstock{color:var(--amber)}
.brief-name{font-size:12px;line-height:1.4;color:var(--text);margin-bottom:2px;font-weight:500}
.brief-meta{font-size:11px;color:var(--text-mute)}
.ad-slot{background:var(--surface2);border:1px dashed var(--border2);border-radius:var(--radius-lg);min-height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ad-label{font-size:10px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}
.alert-card{background:var(--black);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px}
.alert-card h4{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:6px}
.alert-card p{font-size:12px;color:#888;margin-bottom:14px;line-height:1.5}
.alert-input{width:100%;padding:9px 12px;border-radius:7px;border:none;font-size:12px;margin-bottom:8px;background:rgba(255,255,255,.1);color:#fff;outline:none;font-family:'DM Sans',sans-serif}
.alert-input::placeholder{color:rgba(255,255,255,.35)}
.alert-btn{width:100%;padding:9px;border-radius:7px;border:none;background:var(--gold);color:#fff;font-size:12px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif}

/* Search */
.search-bar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 16px;margin-bottom:20px;transition:border-color .15s}
.search-bar:focus-within{border-color:var(--gold)}
.search-bar input{border:none;background:none;font-size:14px;color:var(--text);outline:none;width:100%;font-family:'DM Sans',sans-serif}
.search-bar input::placeholder{color:var(--text-mute)}

/* Tabs */
.tab-bar{display:flex;gap:2px;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:0}
.tab-btn{font-size:13px;padding:10px 18px;border:none;background:none;color:var(--text-mute);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;font-family:'DM Sans',sans-serif}
.tab-btn:hover{color:var(--text-dim)}
.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold);font-weight:500}
.tab-content{display:none}
.tab-content.active{display:block}

/* Retailer hero */
.ret-hero{padding:40px;border-bottom:1px solid var(--border)}
.ret-hero-eyebrow{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:10px}
.ret-hero h1{font-family:'Playfair Display',serif;font-size:36px;font-weight:700;line-height:1.2;color:var(--black);margin-bottom:10px}
.ret-hero p{font-size:14px;color:var(--text-dim);max-width:520px;line-height:1.65;margin-bottom:20px}
.ret-stats{display:flex;gap:28px;flex-wrap:wrap}
.ret-stat .val{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--black)}
.ret-stat .val.drop{color:var(--green)}
.ret-stat .lbl{font-size:11px;color:var(--text-mute);margin-top:2px}
.ret-cta{display:inline-block;margin-top:20px;background:var(--gold);color:#fff;padding:10px 24px;border-radius:20px;font-size:13px;font-weight:500;text-decoration:none;transition:opacity .2s}
.ret-cta:hover{opacity:.85}

/* Blog cards */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:36px}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:box-shadow .2s;text-decoration:none;display:block}
.blog-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.06)}
.blog-img{height:140px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:44px;opacity:.25}
.blog-body{padding:16px}
.blog-tag{font-size:10px;font-weight:500;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.blog-title{font-size:15px;font-weight:500;line-height:1.4;color:var(--black);margin-bottom:8px;font-family:'Playfair Display',serif}
.blog-excerpt{font-size:12px;color:var(--text-mute);line-height:1.6;margin-bottom:10px}
.blog-meta{font-size:11px;color:var(--text-mute)}

/* Brand logos strip */
.brand-logos-strip{background:#1a1814;border-bottom:3px solid var(--gold);padding:18px 40px}
.brand-logos-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:#555;margin-bottom:14px}
.brand-logos-grid{display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:center}
.brand-logo-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;opacity:.65;transition:opacity .2s;text-decoration:none}
.brand-logo-item:hover{opacity:1}
.brand-logo-item img{height:32px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.brand-logo-item span{font-size:9px;color:#555;text-transform:uppercase;letter-spacing:.06em}

/* Social section */
.social-section{background:var(--black);padding:40px;border-top:3px solid var(--gold)}
.social-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.social-section h2{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:6px}
.social-section p{font-size:13px;color:#777;margin-bottom:20px}
.yt-placeholder{width:100%;aspect-ratio:16/9;background:#1a1a1a;border-radius:var(--radius-lg);border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.yt-play{width:56px;height:56px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center}
.yt-play::after{content:'';border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:4px}
.yt-lbl{font-size:12px;color:#555}
.social-follow-title{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:#555;margin-bottom:14px}
.social-btn{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #1a1a1a;text-decoration:none;transition:opacity .2s}
.social-btn:last-child{border-bottom:none}
.social-btn:hover{opacity:.7}
.s-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;color:#fff}
.s-yt{background:#FF0000}
.s-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.s-tt{background:#010101;border:1px solid #222}
.s-fb{background:#1877F2}
.s-name{font-size:13px;font-weight:500;color:#fff}
.s-handle{font-size:11px;color:#555}

/* Footer */
footer{background:var(--black);color:#444;padding:28px 40px;font-size:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-logo{font-family:'Playfair Display',serif;font-size:15px;color:#fff;font-weight:700}
.foot-logo span{color:var(--gold)}
footer a{color:#444;text-decoration:none}
footer a:hover{color:#888}
.foot-links{display:flex;gap:20px}

/* ── CTAs ────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'DM Sans',sans-serif;font-weight:500;border:none;cursor:pointer;transition:all .18s;text-decoration:none;white-space:nowrap}
.btn-gold{background:var(--gold);color:#fff;border-radius:20px}
.btn-gold:hover{background:#9E6A22;color:#fff}
.btn-black{background:var(--black);color:#fff;border-radius:20px}
.btn-black:hover{background:#333;color:#fff}
.btn-outline{background:transparent;color:var(--gold);border:1.5px solid var(--gold);border-radius:20px}
.btn-outline:hover{background:var(--gold);color:#fff}
.btn-sm{font-size:11px;padding:6px 14px}
.btn-md{font-size:13px;padding:9px 20px}
.btn-lg{font-size:14px;padding:11px 26px}
.btn-full{width:100%;border-radius:8px}

/* Deal card CTA */
.card-cta{display:block;width:100%;padding:9px 0;text-align:center;font-size:12px;font-weight:500;color:#fff;background:var(--gold);border-radius:0 0 var(--radius-lg) var(--radius-lg);text-decoration:none;transition:background .18s;margin-top:10px}
.card-cta:hover{background:#9E6A22;color:#fff}
/* Retailer buttons — tokens only. The previous hover colours were leftovers from
   an older palette (Andertons hovered red, G4M green, Scan purple); they now
   darken their own brand. Fills were also disagreeing with site_app.js: peach was
   #E8650A here vs #E8853D there, g4m #FF6B00 vs #FF8A4C, scan #006FFF vs #1F6FB2. */
.card-cta.retailer-and{background:var(--r-andertons-cta)}
.card-cta.retailer-and:hover{background:var(--r-andertons-cta-hover)}
.card-cta.retailer-tho{background:var(--r-thomann-cta)}
.card-cta.retailer-tho:hover{background:var(--r-thomann-cta-hover)}
.card-cta.retailer-gg{background:var(--r-guitarguitar-cta)}
.card-cta.retailer-gg:hover{background:var(--r-guitarguitar-cta-hover)}
.card-cta.retailer-peach{background:var(--r-peach-cta)}
.card-cta.retailer-peach:hover{background:var(--r-peach-cta-hover)}
.card-cta.retailer-g4m{background:var(--r-g4m-cta)}
.card-cta.retailer-g4m:hover{background:var(--r-g4m-cta-hover)}
.card-cta.retailer-scan{background:var(--r-scan-cta)}
.card-cta.retailer-scan:hover{background:var(--r-scan-cta-hover)}

/* Matrix price links */
table.matrix td a{text-decoration:none;color:inherit;display:block;width:100%}
table.matrix td a:hover{text-decoration:underline}
.matrix-buy{display:block;font-size:10px;color:var(--gold);margin-top:2px;font-weight:500}
table.matrix .p-cheap a{color:var(--green)}
table.matrix .p-cheap .matrix-buy{color:var(--green);opacity:.8}
table.matrix .p-dear a{color:var(--red)}

/* B-Stock CTA */
.bstock-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:5px 12px;border-radius:20px;background:var(--amber-bg);color:var(--amber);border:1px solid var(--gold-mid);text-decoration:none;transition:all .18s;white-space:nowrap}
.bstock-btn:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* Price alert banner */
.alert-banner{background:linear-gradient(135deg,var(--black) 0%,#1e1a14 100%);border-top:3px solid var(--gold);padding:28px 40px}
.alert-banner-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.alert-banner h3{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:4px}
.alert-banner p{font-size:13px;color:#888}
.alert-banner-form{display:flex;gap:8px;flex-wrap:wrap}
.alert-banner-input{padding:10px 16px;border-radius:20px;border:1px solid #333;background:rgba(255,255,255,.08);color:#fff;font-size:13px;outline:none;font-family:'DM Sans',sans-serif;min-width:200px}
.alert-banner-input::placeholder{color:#555}
.alert-banner-input:focus{border-color:var(--gold)}

/* Sticky retailer bar */
.sticky-ret-bar{position:fixed;bottom:0;left:0;right:0;z-index:50;padding:12px 40px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translateY(100%);transition:transform .3s ease}
.sticky-ret-bar.visible{transform:translateY(0)}
.sticky-ret-bar-name{font-size:13px;font-weight:500;color:#fff}
.sticky-ret-bar-sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:1px}

/* Spread highlight */
.spread-good{background:#EAF4ED;color:var(--green);font-weight:600}

/* Matrix overrides */
table.matrix th{text-align:right}
table.matrix th:first-child{text-align:left}
table.matrix td{text-align:right;white-space:nowrap;font-size:13px}
table.matrix td:first-child{text-align:left;white-space:normal}
table.matrix .matrix-buy{display:none}
.matrix-wrap{overflow:hidden}
.matrix-wrap > div{overflow-x:auto}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {

  /* Nav */
  .nav{padding:0 16px;height:52px}
  .nav-links{display:none}
  .nav-socials{display:none}
  .nav-cta{display:none}

  /* Ticker */
  .ticker{font-size:11px}

  /* Page layout — collapse sidebar below main */
  .page{padding:16px;grid-template-columns:1fr;gap:20px}

  /* Hero section (index.html) */
  .hero-section,
  section[style*="grid-template-columns:1fr auto"],
  section[style*="grid-template-columns:1fr 1fr"]{
    display:flex !important;
    flex-direction:column !important;
    padding:28px 16px !important;
  }
  section[style*="grid-template-columns:1fr auto"] img,
  section[style*="grid-template-columns:1fr 1fr"] img{
    position:static !important;
    width:100% !important;
    height:200px !important;
    border-radius:var(--radius-lg) !important;
    order:1;
  }
  section[style*="grid-template-columns:1fr auto"] > div,
  section[style*="grid-template-columns:1fr 1fr"] > div{
    order:2;
    padding-right:0 !important;
  }

  /* Hero text */
  h1[style*="font-size:42px"]{font-size:28px !important;max-width:100% !important}
  p[style*="max-width:480px"]{max-width:100% !important}

  /* Stats row */
  div[style*="display:flex;gap:20px;flex-wrap:wrap"]{gap:14px !important}

  /* Filter bar */
  .filter-bar{gap:4px}
  .filter-btn{font-size:11px;padding:5px 10px}

  /* Deal grid — 2 columns on mobile */
  .deal-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card-img{height:120px}

  /* B-stock table — scroll horizontally */
  .bstock-table{font-size:12px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bstock-table th,.bstock-table td{padding:8px 10px;white-space:nowrap}

  /* Retailer hero */
  .ret-hero{padding:24px 16px}
  .ret-hero h1{font-size:26px}
  .ret-stats{gap:16px}

  /* Social section */
  .social-inner{grid-template-columns:1fr;gap:24px}
  .social-section{padding:28px 16px}

  /* Alert banner */
  .alert-banner{padding:24px 16px}
  .alert-banner-inner{flex-direction:column;gap:16px}
  .alert-banner-form{flex-direction:column}
  .alert-banner-input{min-width:unset;width:100%}

  /* Brand logos strip */
  .brand-logos-strip{padding:16px}
  .brand-logos-grid{gap:18px}

  /* Blog grid */
  .blog-grid{grid-template-columns:1fr;gap:12px}

  /* Footer */
  footer{padding:20px 16px;flex-direction:column;align-items:flex-start;gap:16px}
  .foot-links{flex-wrap:wrap;gap:12px}

  /* Matrix table — scroll horizontally */
  .matrix-wrap > div{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.matrix{font-size:12px;min-width:500px}

  /* Sticky bar */
  .sticky-ret-bar{padding:10px 16px}

  /* Tabs — scrollable if many */
  .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:0}
  .tab-btn{white-space:nowrap;font-size:12px;padding:10px 14px}

  @media (max-width: 768px) {
  /* Prevent anything from blowing out the viewport width */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Ticker — let it scroll but don't expand the page */
  .ticker {
    overflow: hidden;
    max-width: 100vw;
  }

  /* Jump to retailer bar */
  .jump-bar, 
  div[style*="Jump to retailer"],
  section[style*="overflow-x"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }

  /* Filter pills row — allow horizontal scroll rather than overflow */
  .filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
}
@media (max-width: 768px) {
  /* Force cards to respect container width */
  .deal-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .deal-grid {
    grid-template-columns: 1fr;
    padding: 0;
    width: 100%;
  }

  /* Make sure the main content area isn't overflowing */
  .page {
    padding: 16px !important;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
  }

  main, .main-content {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }
}

}
@media (max-width: 500px) {
  .deal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  /* Very small phones — single column deal grid */
  .deal-grid{grid-template-columns:1fr}
  h1[style*="font-size:42px"]{font-size:24px !important}
}

/* ── Mobile stopgap (04/07/2026): the two inline-styled spots index.html has.
     The classed layout already carries its own media rules; these cover the
     hero (inline grid) + the compare table. Retire with the redesign. ── */
@media (max-width: 760px){
  section[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
    padding:32px 18px 28px !important;
    min-height:0 !important;
  }
  section[style*="grid-template-columns:1fr 1fr"] h1{font-size:29px !important}
  #sgCompareTable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body{overflow-x:hidden}
}

/* ── Social-style deal cards (homepage drops + savings) — 22/07/26.
   Mirrors the individual /socials hero card: dark card, gold −%, white image
   panel (retailer shots are white-bg so they sit seamlessly), name, price,
   retailer-coloured pill, gold footer. ── */
.sgcard{background:#161310;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:100%;transition:box-shadow .2s,border-color .2s;position:relative}
.sgcard:hover{border-color:var(--gold);box-shadow:0 6px 24px rgba(0,0,0,.28)}
/* Top edge = what the card DOES. Retailer colour where the card hands off to a
   retailer CTA (the hook); gold where the card is ours and links back into the
   site. Drawn as a pseudo-element so it costs no height in the 261x413 box. */
.sgcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--sg-edge,var(--sg-gold));z-index:2}
.sgcard.edge-and{--sg-edge:var(--r-andertons-dot)}
.sgcard.edge-tho{--sg-edge:var(--r-thomann-dot)}
.sgcard.edge-gg{--sg-edge:var(--r-guitarguitar-dot)}
.sgcard.edge-peach{--sg-edge:var(--r-peach-dot)}
.sgcard.edge-g4m{--sg-edge:var(--r-g4m-dot)}
.sgcard.edge-scan{--sg-edge:var(--r-scan-dot)}
.sgcard-top{padding:14px 14px 0;text-align:center}
.sgcard-eyebrow{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#D4A748;font-weight:600;margin-bottom:2px}
/* Provenance line — replaces the fixed gold "TRACKED NIGHTLY" strap with a
   per-card statement of when the price was checked and by whom (ch.16 trust). */
.sgcard-foot.prov{background:none;color:#6f685c;border-top:1px solid #2a251d;letter-spacing:.05em;font-size:9.5px;font-weight:500;padding:9px 8px;text-transform:none}
/* Andertons' brand colour is #1A1A1A against a #161310 card — 1.06:1. The white
   label reads fine, but the pill itself has no edge, so it stops looking like a
   button. The silver token fixed the top edge, not this. A 1px inset rim gives
   the shape back without touching their brand colour. Only Andertons needs it. */
.sgcard.edge-and .sgcard-cta{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.sgcard-pct{font-family:'Playfair Display',serif;font-size:46px;font-weight:700;color:#D4A748;line-height:1.02}
.sgcard-img{margin:10px 12px 0;height:150px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sgcard-img img{max-width:88%;max-height:88%;object-fit:contain}
/* cut-out cards: transparent panel so the background-removed guitar floats on the
   dark card, with a drop-shadow to lift it (28/07). c.frame transform applies on top. */
.sgcard-img.cut{background:transparent}
.sgcard-img.cut img{max-width:96%;max-height:96%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.sgcard-img .ph{font-size:44px;opacity:.15}
.sgcard-body{padding:11px 14px 0;text-align:center;flex:1;display:flex;flex-direction:column}
.sgcard-name{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:#fff;line-height:1.22;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px}
.sgcard-price{margin-top:9px;font-family:'Playfair Display',serif;font-size:23px;font-weight:700;color:#fff}
.sgcard-price .was{font-size:14px;color:#8a8377;text-decoration:line-through;margin-left:7px}
.sgcard-cta{display:block;margin:12px 14px;color:#fff;font-size:12.5px;font-weight:700;padding:11px 0;border-radius:40px;text-align:center;text-decoration:none;letter-spacing:.05em;transition:filter .15s}
.sgcard-cta:hover{filter:brightness(1.12)}
.sgcard-foot{background:#D4A748;color:#161310;text-align:center;padding:8px;font-size:9px;letter-spacing:.13em;font-weight:700;margin-top:2px}
@media(max-width:600px){.sgcard-img{height:120px}.sgcard-pct{font-size:38px}}

/* Keep the social cards 2-up on phones (the earlier 768px rule forces 1fr, which
   blows these portrait cards up full-width). Placed last so it wins; !important
   beats the existing single-column rule. Cards flow, nothing clips. */
@media (max-width:760px){
  .deal-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .sgcard-img{height:118px}
  .sgcard-pct{font-size:36px}
  .sgcard-name{font-size:13.5px;min-height:34px}
  .sgcard-price{font-size:20px}
}
@media (max-width:380px){
  .deal-grid{grid-template-columns:1fr !important}
  .sgcard-img{height:150px}
}

/* ── Drops view toggle + list view (brief-cms row style, 23/07) ── */
.view-toggle{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.view-toggle .vt{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;padding:5px 11px;border:none;background:#fff;color:var(--text-mute);cursor:pointer;transition:all .15s}
.view-toggle .vt:hover{color:var(--black)}
.view-toggle .vt.on{background:var(--black);color:#fff}
.drops-list{display:flex;flex-direction:column;gap:6px;margin-bottom:36px}
.drow{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px 14px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.drow:hover{border-color:var(--border2);box-shadow:0 3px 14px rgba(0,0,0,.05)}
.drow .pct{flex-shrink:0;font-weight:700;font-size:13px;border-radius:8px;padding:6px 9px;min-width:66px;text-align:center;background:var(--green-bg);color:var(--green)}
.drow .body{flex:1;min-width:0}
.drow .name{font-size:14px;font-weight:600;line-height:1.3;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .sub{font-size:12px;color:var(--text-mute);margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.drow .rchip{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--surface2);color:var(--text-mute);border:1px solid var(--border)}
.drow .right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.drow .price{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;line-height:1;color:var(--black)}
.drow .was{font-size:11px;color:var(--text-mute);text-decoration:line-through}
@media(max-width:600px){.drow .name{white-space:normal}.drow .pct{min-width:56px;font-size:12px}}

/* ===== hero slider (moved from index.html 23/07 — used by home + retailer pages) ===== */

/* Homepage hero slider (22/07/26). Slides are a fixed 1920x480 canvas SCALED to
   the container width, so what Paul curates in /hero ships pixel-identical.
   Slide 1 = the brand header; the rest = data.hero drop banners. */
.sg-hero{position:relative;background:#000;border-bottom:1px solid var(--border);overflow:hidden;}
.sg-hero-stage{position:relative;width:100%;overflow:hidden;}
.sg-hero-slide{position:absolute;top:0;left:0;width:1920px;height:480px;transform-origin:top left;
  opacity:0;transition:opacity .5s ease;pointer-events:none;overflow:hidden;background:#000;}
.sg-hero-slide.on{opacity:1;pointer-events:auto;}
.sg-hero-fallback{display:block;} /* the no-JS static hero; JS hides it */
.sg-hero.live .sg-hero-fallback{display:none;}
.sg-hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;
  font-size:22px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .15s;}
.sg-hero.live .sg-hero-nav{display:flex;}
.sg-hero-nav:hover{background:var(--gold);color:#161310;border-color:var(--gold);}
.sg-hero-nav.prev{left:14px;} .sg-hero-nav.next{right:14px;}
.sg-hero-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:20;display:none;gap:9px;}
.sg-hero.live .sg-hero-dots{display:flex;}
.sg-hero-dots i{width:26px;height:7px;border-radius:4px;background:rgba(255,255,255,.4);cursor:pointer;transition:all .2s;}
.sg-hero-dots i.on{background:#fff;width:34px;}
/* ---- drop-banner internals (ported 1:1 from the /hero studio) ---- */
.sgh{position:absolute;inset:0;font-family:'DM Sans',sans-serif;}
.sgh .bar{position:absolute;top:0;left:0;right:0;height:76px;background:#D4A748;display:flex;align-items:center;gap:22px;padding:0 40px;z-index:3;}
.sgh .bar .tsg{font-family:'Playfair Display',serif;font-size:52px;font-weight:700;color:#fff;letter-spacing:-.5px;}
.sgh .bar .lbl{font-family:'Playfair Display',serif;font-size:52px;font-weight:900;color:#161310;letter-spacing:-.5px;}
.sgh .body{position:absolute;top:76px;left:0;right:0;bottom:0;}
.sgh .imgslot{position:absolute;right:300px;top:0;width:820px;height:100%;display:flex;align-items:center;justify-content:center;}
.sgh .imgslot img{max-width:100%;max-height:100%;object-fit:contain;}
.sgh.bleed .imgslot{position:absolute;top:-85px;right:-100px;width:1265px;height:627px;z-index:4;}
.sgh.bleed .imgslot img{max-width:none;max-height:none;width:100%;height:100%;object-fit:contain;}
.sgh .left{position:absolute;left:0;top:0;width:640px;height:100%;z-index:5;text-align:center;}
/* Name lives in a FIXED band and the price block is PINNED - so price + CTA land
   in the exact same spot on every slide regardless of how long the name is. */
.sgh .nblock{position:absolute;left:40px;right:40px;top:12px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;}
.sgh .pname{font-family:'Playfair Display',serif;font-size:56px;font-weight:700;color:#fff;line-height:1.12;max-height:110px;overflow:hidden;}
.sgh .pcol{font-family:'Playfair Display',serif;font-size:34px;font-weight:700;color:#8a8377;margin-top:8px;line-height:1.2;max-height:40px;overflow:hidden;}
.sgh .pblock{position:absolute;left:40px;right:40px;top:174px;}
.sgh .pnow{font-family:'Playfair Display',serif;font-size:64px;font-weight:700;color:#2e9e5b;line-height:1;}
.sgh .pwas{font-family:'Playfair Display',serif;font-size:34px;font-weight:700;color:#c0392b;text-decoration:line-through;margin-top:4px;}
.sgh .cta{display:inline-block;margin-top:16px;background:var(--r-unknown-cta);color:#fff;font-size:26px;font-weight:700;padding:16px 40px;border-radius:60px;letter-spacing:.04em;text-decoration:none;}
.sgh .right{position:absolute;right:0;top:0;width:300px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 18px;z-index:5;}
.sgh .offbig{font-family:'Playfair Display',serif;font-size:58px;font-weight:700;color:#D4A748;line-height:1;}
.sgh .offlbl{font-family:'Playfair Display',serif;font-size:30px;color:#D4A748;margin-top:2px;}
.sgh .tag{font-family:'Playfair Display',serif;font-size:30px;color:#D4A748;margin-top:14px;line-height:1.25;}
/* ---- brand slide ---- */
.sgb{position:absolute;inset:0;background:#000;}
.sgb .col{position:absolute;left:0;top:0;width:1120px;height:100%;padding:0 64px;z-index:2;display:flex;flex-direction:column;justify-content:center;}
.sgb .eyebrow{font-size:20px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:14px;}
.sgb h2{font-family:'Playfair Display',serif;font-size:56px;font-weight:700;line-height:1.08;letter-spacing:-1px;color:#fff;margin:0 0 14px;max-width:840px;}
.sgb p{font-size:22px;color:rgba(255,255,255,.65);max-width:760px;line-height:1.45;margin:0 0 20px;}
.sgb .stats{display:flex;gap:36px;margin-bottom:22px;}
.sgb .stats .v{font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:#fff;line-height:1;}
.sgb .stats .v.g{color:var(--green);}
.sgb .stats .k{font-size:16px;color:rgba(255,255,255,.45);margin-top:8px;}
.sgb .ctas{display:flex;gap:16px;}
.sgb .ctas a{font-size:22px;font-weight:700;padding:14px 34px;border-radius:10px;text-decoration:none;}
.sgb .ctas .gold{background:var(--gold);color:#161310;}
.sgb .ctas .out{border:1px solid rgba(255,255,255,.3);color:#fff;}
.sgb .art{position:absolute;right:0;top:0;width:900px;height:100%;object-fit:cover;z-index:1;}



/* ── Affiliate disclosure strip ───────────────────────────────────────────────
   CAP Code rule 2.1: a marketing communication must be obviously identifiable
   as one. ASA/CMA guidance is that the disclosure has to be UPFRONT and
   PROMINENT - a link in the footer is not enough, because most people never
   reach it. So this sits directly under the nav, above every affiliate link on
   the page. Do not move it below the fold and do not shrink it further. */
.aff-strip{background:var(--gold-light);border-bottom:1px solid var(--gold-mid);
  padding:7px 40px;font-size:12px;line-height:1.5;color:var(--text-dim);text-align:center}
.aff-strip a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;font-weight:500}
@media(max-width:760px){.aff-strip{padding:7px 16px;font-size:11px;text-align:left}}