:root{
  --bg:#171020;
  --surface:#1f162b;
  --input:#0f0b16;
  --pill:#232b3d;
  --border:#2f2341;
  --text:#f1ecf7;
  --muted:#ccc4d8;
  --magenta:#ff2e9a;
  --lime:#9be32a;
  --purple:#a35bf0;
  --pinkdeep:#e0198f;
  --void:#050309;   /* near-black base: page background, hamburger fill, mobile menu overlay */
  --yellow:#ffe600;  /* hamburger only -- unused elsewhere, so it reads as that control's own colour */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* flat near-black base; the photo and its darkening gradient were removed
     2026-09-15, and the base darkened to --void on request. */
  background:var(--void);
  color:var(--text);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px}
header{padding:20px 28px 0}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.wordmark{max-width:276px;width:auto;height:auto;display:block;margin:0}
nav.main{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin:0;flex:1;min-width:0}
nav.main a{
  color:var(--muted);text-decoration:none;font-size:.92rem;text-transform:uppercase;
  letter-spacing:.03em;padding:4px 18px;border:1px solid var(--border);border-radius:999px;
  height:52px;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .12s ease,color .12s ease,background .12s ease;
}
nav.main a:hover{color:var(--text);border-color:var(--nav-accent,var(--magenta));border-width:2px;padding:3px 17px;box-shadow:0 0 10px var(--nav-accent-soft,rgba(255,46,154,.45)),0 0 22px var(--nav-accent-dim,rgba(255,46,154,.25))}
nav.main a.active{color:#fff;border-color:var(--nav-accent,var(--magenta));background:var(--nav-accent-soft,rgba(255,46,154,.12));border-width:2px;padding:3px 17px;box-shadow:0 0 10px var(--nav-accent-soft,rgba(255,46,154,.45)),0 0 22px var(--nav-accent-dim,rgba(255,46,154,.25))}
/* Colour-coded sections: every destination carries its own accent so users
   learn home=lime / discogs=purple / ebay job lots=magenta / auctions=amber.
   dim = always-on whisper of the colour on inactive pills; soft = hover/active */
nav.main a.nav-home{--nav-accent:#9be32a;--nav-accent-soft:rgba(155,227,42,.14);--nav-accent-dim:rgba(155,227,42,.06);--nav-accent-border:rgba(155,227,42,.38)}
nav.main a.nav-discogs{--nav-accent:#2fb3e3;--nav-accent-soft:rgba(47,179,227,.16);--nav-accent-dim:rgba(47,179,227,.07);--nav-accent-border:rgba(47,179,227,.38)}
nav.main a.nav-ebay{--nav-accent:#ff2e9a;--nav-accent-soft:rgba(255,46,154,.14);--nav-accent-dim:rgba(255,46,154,.06);--nav-accent-border:rgba(255,46,154,.38)}
nav.main a.nav-auctions{--nav-accent:#9be32a;--nav-accent-soft:rgba(155,227,42,.14);--nav-accent-dim:rgba(155,227,42,.06);--nav-accent-border:rgba(155,227,42,.38)}
nav.main a.nav-mainlink{background:var(--nav-accent-dim,transparent);border-color:var(--nav-accent-border,var(--border))}
nav.main a.nav-mainlink img{margin-right:8px}
nav.main a.nav-mainlink .navlabel{display:flex;flex-direction:column;line-height:1.15;text-align:left;min-width:0}
nav.main a.nav-mainlink .navlabel .t1{font-size:.92rem;white-space:nowrap}
nav.main a.nav-mainlink .navlabel .t2{font-size:.62rem;font-weight:600;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
nav.main a.nav-mainlink:hover{background:var(--nav-accent-soft)}
/* active pill must win over the generic nav-mainlink dim styles above (higher specificity + later) */
nav.main a.nav-mainlink.active{color:#fff;border-color:var(--nav-accent);background:var(--nav-accent-soft);box-shadow:0 0 10px var(--nav-accent-soft,rgba(255,46,154,.45)),0 0 22px var(--nav-accent-dim,rgba(255,46,154,.25))}
nav.main a.nav-home{color:var(--nav-accent)}
nav.main a.nav-mainlink img.navic{height:15px;width:15px}
nav.main a.nav-mainlink img.navic-ebay{height:34px;width:auto}
.nav-toggle{display:none}
nav.main a.nav-foot{display:none}
/* Tablet (761-1100px): nav drops to its own full-width row under the wordmark,
   pills centred and wrapping - avoids the top-right corner squash. */
@media(max-width:1100px) and (min-width:761px){
  .head-row{flex-wrap:wrap}
  nav.main{flex-basis:100%;justify-content:center}
}
@media(max-width:760px){
  header{position:relative;text-align:center}
  .head-row{display:block}
  .wordmark{max-width:280px;width:88%;height:auto;margin:0 auto 16px}
  /* Always-on yellow identity on a near-black fill. Green was already used by the nav
     accents, prices, the active filter segment and the buy buttons, so this takes
     the one hue the palette does not use -- maximum contrast (~16:1) and a colour
     of its own. (2026-09-15) */
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;position:fixed;top:22px;right:16px;width:40px;height:40px;border-radius:10px;font-size:1.2rem;line-height:1;cursor:pointer;background:var(--void);border:1px solid var(--yellow);color:var(--yellow);z-index:300}
  /* keeps the yellow and adds a matching glow, rather than switching hue */
  .nav-toggle:hover{color:#fff9c4;box-shadow:0 0 10px rgba(255,230,0,.45),0 0 22px rgba(255,230,0,.22)}
  nav.main{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;margin:0;padding:96px 20px 40px;flex-direction:column;justify-content:flex-start;align-items:stretch;display:none;overflow-y:auto;background:var(--void)}
  nav.main.open{display:flex}
  /* Fixed height so every button matches: content-sized heights gave 52, 58.8 and 68
     at once (the 34px eBay icon plus a two-line label needs 68px). flex-shrink:0
     stops a long menu compressing them unevenly; the overlay scrolls. (2026-09-15) */
  nav.main a{width:100%;max-width:400px;margin:10px auto 0;border-radius:12px;text-align:center;padding:16px 18px;font-size:1rem;border-top:1px solid var(--border);height:68px;flex-shrink:0;justify-content:center}
  /* Plain-text footer links (About/FAQ/Terms) sit text-only inside inline-flex
     anchors: without align-items they tip high. (2026-09-14) */
  nav.main a.nav-foot{display:flex;align-items:center;justify-content:center}
  nav.main a:first-child{margin-top:auto}
  nav.main a:last-child{margin-bottom:auto}
  nav.main a.nav-foot{display:flex;align-items:center;justify-content:center}
}
section{padding:26px 0 34px;border-top:0 solid transparent}
h1,h2{text-transform:uppercase;font-weight:700}
h2{font-size:1.35rem;margin-bottom:18px}
h1{font-size:1.5rem;margin-bottom:18px;letter-spacing:.01em}
h1 .dot,h2 .dot{color:var(--lime)}
h1 .dotimg,h2 .dotimg{height:1.15em;width:auto;vertical-align:-0.18em;margin-right:6px}
h1 img.hbrand{height:1em;width:auto;vertical-align:-0.12em;margin-right:8px}
p{color:var(--muted)}
p+p{margin-top:12px}
article .wrap ul{margin:16px 0 22px;list-style:none;padding-left:0}
article h2{margin-top:2em}
/* Default container for body text: readable panel over the photo background */
.text-panel{
  background:rgba(31,22,43,0.70);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px 32px;
  margin:16px auto 26px;
  max-width:1264px;
}
.text-panel h1:first-child,.text-panel h2:first-child{margin-top:0}
/* Panels double as .wrap (whose padding is inside the box), so below the panel's
   max-width the background sits flush with the viewport - give them real gutters. */
@media(max-width:1320px){.wrap.text-panel{margin-left:28px;margin-right:28px}}
@media(max-width:600px){.wrap.text-panel{margin-left:18px;margin-right:18px;padding-top:30px;padding-bottom:34px}}
a{color:var(--lime)}
footer{text-align:center;padding:42px 24px 56px;color:var(--muted);font-size:.85rem}
.trustbox{max-width:1100px;margin:28px auto 10px;display:flex;justify-content:center;padding:0 28px}
.trust-label{color:#9f5eff;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;flex:none}
.trust-stats{display:flex;align-items:center;justify-content:center;gap:10px;flex:none;flex-wrap:wrap}
.trust-item{display:inline-flex;align-items:center;gap:12px;background:#34233da3;border:2px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 16px;color:var(--muted);font-size:.85rem;text-decoration:none;flex:none;height:40px}
.trust-item:hover{border-color:rgba(255,255,255,.34)}
.trust-item .ticon{height:20px;width:20px;flex:none;opacity:.9}
.trust-item.ebay .ticon{height:30px;width:30px}
.trust-item.discogs .ticon{height:18px;width:18px}
.trust-item .tnum{color:var(--lime);font-weight:700;font-size:.85rem}
.trust-item .tunit{font-weight:600;color:var(--text)}
.trust-item .tpct{color:var(--muted)}
/* feedback pill in the page h1, floated right */
.trust-head{margin-left:auto;align-self:center}
h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* testimonials pill-box: [label] [scrolling quote] on one row */
.trust-tests{display:flex;align-items:center;gap:14px;border:2px solid rgba(255,255,255,.18);border-radius:999px;background:#34233da3;padding:7px 20px;width:auto;max-width:620px;min-width:0}
.trust-tests .trust-label{margin:0;font-size:.68rem}
.trust-viewport{flex:1;min-width:0;overflow:hidden}
.trust-quote-row{display:flex;transition:transform .6s ease}
.trust-quote{flex:0 0 100%;color:var(--muted);font-size:.78rem;font-weight:700;font-style:italic;line-height:1.35;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finfo a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--border)}
.finfo a:hover{color:var(--text);border-color:var(--purple)}
.finfo span{color:var(--border)}
@media(max-width:860px){.trustbox{flex-wrap:wrap;justify-content:center}.trust-tests{flex-basis:100%;max-width:100%}}
@media(max-width:600px){.wrap{padding:0 18px}.wordmark{max-width:280px}nav.main{gap:6px}nav.main a{padding:9px 14px;font-size:.84rem}
  .trustbox{flex-wrap:wrap;gap:4px 8px;padding:0 18px;justify-content:center;margin:16px auto 2px}
  .trust-stats{flex-direction:column;align-items:center;row-gap:6px}
  .trust-item,.trust-item .tnum{font-size:.68rem}
  .trust-item .ticon{height:16px;width:16px}
  /* Mobile testimonial pill: REMOVED on phones (2026-09-11). Even tidied, a quote
     block above the fold reads badly at the top of a mobile page — Ura's call:
     don't render it on mobile at all. The markup stays in the HTML (crawlers still
     see it) and desktop/tablet keep the pill unchanged. */
  .trustbox{display:flex}
  .trustbox .trust-item{display:none}
  /* Mobile homepage order (2026-09-11): lead with the headline and the introductory
     copy, then the records-for-sale stats. Telling a first-time visitor sales
     statistics before they know what the site is reads badly on a phone. Desktop
     keeps its existing order. */
  #about{display:flex;flex-direction:column}
  /* The wraps are flex items now. .wrap carries `margin:0 auto`, and auto margins
     on a flex item absorb the free space, so the item shrink-to-fits and centres
     instead of stretching — that left the stats bar floating narrow in portrait.
     Fix by zeroing those auto margins so it stretches. Do NOT use width:100% here:
     the intro panel also matches this block and already carries 18px side margins,
     so 100% + margins pushed its right edge 19px past the viewport (whole page
     scrolled sideways). (2026-09-14) */
  #about>.wrap{margin-left:0;margin-right:0;width:auto}
  #about>.wrap.text-panel{margin-left:18px;margin-right:18px;width:auto}
  #about>.wrap{order:2}
  #about>.wrap.text-panel{order:1}
  /* Breathing room above the final "Got Questions?" panel on phones — it used to sit
     2px under the shop cards. Higher specificity than the page's inline rule. */
  #contact>.wrap.text-panel{margin-top:22px}}
@media(max-width:800px){article .wrap,section#about .wrap,section#contact .wrap{text-align:center}section#contact .emailrow{justify-content:center}article .wrap ul{list-style:none;padding:0;text-align:center;margin:20px 0 28px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Desktop header (in-app browser comment 2): the wordmark links home, so the Home
   pill is redundant on desktop — hidden here, still present in the mobile menu.
   Wordmark and nav both centred. */
@media (min-width:701px){
  .head-row{flex-direction:column;align-items:center;gap:12px}
  nav.main{justify-content:center;flex:0 1 auto}
  nav.main a.nav-home{display:none}
}
/* Dim the testimonial text. */
.trust-quote{opacity:.7}

/* Trustbox: pill integrated and smaller; glow dialled back (in-app browser
   comments 7 and 8). */
.trustbox{gap:10px;align-items:center;flex-wrap:wrap}
.trustbox .trust-item{height:auto;padding:5px 12px;font-size:.72rem;box-shadow:none}
.trustbox .trust-item .tnum{font-size:.78rem}
.trustbox .trust-item .ticon{height:16px;width:16px}
.trustbox .trust-item.ebay .ticon{height:20px;width:20px}

/* --- Trust row + section accents (2026-09-15) -------------------------------
   Ura: the ratings pill was sitting on its own row under the testimonials and
   eating vertical space, the purple no longer sits right, and Individual Records
   should use the logo green rather than amber so the sections read
   green / blue / pink like the wordmark. */
.trustbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
          gap:10px;max-width:1100px}
/* Shrink-to-fit so the pill can share the row; width:100% was claiming it. */
.trust-tests{flex:0 1 auto;width:auto;max-width:620px;
             border-color:rgba(255,255,255,.18);box-shadow:none}
.trust-item{border-color:rgba(255,255,255,.18);box-shadow:none}
.trust-item:hover{border-color:rgba(255,255,255,.34)}
.trust-label{color:#8f86a3}
nav.main a.nav-auctions{--nav-accent:#9be32a;--nav-accent-soft:rgba(155,227,42,.14);
                        --nav-accent-dim:rgba(155,227,42,.06);--nav-accent-border:rgba(155,227,42,.38)}

@media(max-width:1024px){
  .trust-tests{flex:0 1 auto;max-width:620px}
}
/* Pill off the row, testimonials forward — down to phone widths too. This also
   re-enables the trust row on phones: an earlier call hid the whole .trustbox
   there, which took the testimonials with it. */
@media(max-width:860px){
  .trust-tests{flex-basis:100%;max-width:100%}
  .trustbox .trust-item{display:none}
}
@media(max-width:600px){
  .trustbox{display:flex;margin:16px auto 2px;padding:0 18px}
  .trust-tests{max-width:100%}
  .trustbox .trust-item{display:none}
}