/* ==========================================================================
   Queen Natasha - "qn" theme  |  Solo Yellow, editorial luxury
   Modern heritage-resale: big confident serif, generous air, one yellow CTA.
   Loaded AFTER bootstrap.min.css so it wins. Restyles stock OC markup + qn twigs.
   ========================================================================== */

/* ---- Design tokens -------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Cambria, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale - 1.25 major third, base 17px. Bigger, more confident. */
  --fs-xs: 0.75rem;      /* 12 */
  --fs-sm: 0.875rem;     /* 14 */
  --fs-base: 1.0625rem;  /* 17 */
  --fs-md: 1.1875rem;    /* 19 */
  --fs-lg: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-xl: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem);
  --fs-2xl: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);
  --fs-3xl: clamp(2.8rem, 1.8rem + 4.5vw, 4.6rem);

  /* Spacing - 4px base, used generously */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --s9: 56px; --s10: 72px; --s11: 96px; --s12: 128px;

  --r-sm: 10px; --r: 14px; --r-lg: 22px; --r-pill: 999px;
  --maxw: 1400px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .2s;

  /* Light palette */
  --ground: #f6f4ee;
  --surface: #ffffff;
  --surface-2: #faf8f2;
  --ink: #232221;
  --ink-soft: #56544f;
  --muted: #726f66;
  --line: #e9e6dc;
  --line-strong: #d8d4c6;
  /* Border of interactive form controls. WCAG 1.4.11 wants 3:1 against the field
     background, which --line-strong (1.48:1 on --surface) misses by a wide margin. */
  --line-form: #8f8b7c;

  --brand: #f6e55b;
  --brand-hover: #f2dc36;
  --brand-ink: #2a2822;
  --accent: #806a00;
  --accent-hover: #6d5c00;

  --sale: #d8442a;
  --sold: #97372f;
  --success: #2e7d46;
  --star: #d99a1c;
  /* Molten-gold gradient stops for sale prices (dark enough for AA on white) */
  --gold-1: #6d5c00; --gold-2: #a08200; --gold-3: #806a00;

  --shadow-sm: 0 1px 2px rgba(30,26,15,.05), 0 2px 6px rgba(30,26,15,.05);
  --shadow: 0 8px 24px -10px rgba(30,26,15,.16), 0 3px 8px -3px rgba(30,26,15,.08);
  --shadow-lg: 0 30px 60px -24px rgba(30,26,15,.30), 0 10px 24px -10px rgba(30,26,15,.14);
  --skel-base: #ece9df;
  --skel-shine: #f6f4ee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #151517; --surface: #1e1e21; --surface-2: #25252a;
    --ink: #f2f0e8; --ink-soft: #c9c7be; --muted: #918e86;
    --line: #303038; --line-strong: #3f3f49; --line-form: #75737c;
    --brand: #f6e55b; --brand-hover: #fff07a; --brand-ink: #2a2822;
    --accent: #f0dc6a; --accent-hover: #fff08a;
    --sale: #c2452c; --sold: #a33b3b; --success: #57b877; --star: #f0c14b;
    --gold-1: #d8c26a; --gold-2: #fff08a; --gold-3: #f0dc6a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow: 0 10px 28px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 34px 64px -26px rgba(0,0,0,.72);
    --skel-base: #27272d; --skel-shine: #33333b;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground:#f6f4ee; --surface:#fff; --surface-2:#faf8f2; --ink:#232221; --ink-soft:#56544f; --muted:#726f66;
  --line:#e9e6dc; --line-strong:#d8d4c6; --line-form:#8f8b7c; --brand:#f6e55b; --brand-hover:#f2dc36; --brand-ink:#2a2822;
  --accent:#806a00; --accent-hover:#6d5c00; --sale:#d8442a; --sold:#97372f; --success:#2e7d46; --star:#d99a1c;
  --gold-1:#6d5c00; --gold-2:#a08200; --gold-3:#806a00;
  --shadow-sm:0 1px 2px rgba(30,26,15,.05),0 2px 6px rgba(30,26,15,.05);
  --shadow:0 8px 24px -10px rgba(30,26,15,.16),0 3px 8px -3px rgba(30,26,15,.08);
  --shadow-lg:0 30px 60px -24px rgba(30,26,15,.30),0 10px 24px -10px rgba(30,26,15,.14);
  --skel-base:#ece9df; --skel-shine:#f6f4ee;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:#151517; --surface:#1e1e21; --surface-2:#25252a; --ink:#f2f0e8; --ink-soft:#c9c7be; --muted:#918e86;
  --line:#303038; --line-strong:#3f3f49; --line-form:#75737c; --brand:#f6e55b; --brand-hover:#fff07a; --brand-ink:#2a2822;
  --accent:#f0dc6a; --accent-hover:#fff08a; --sale:#c2452c; --sold:#a33b3b; --success:#57b877; --star:#f0c14b;
  --gold-1:#d8c26a; --gold-2:#fff08a; --gold-3:#f0dc6a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow:0 10px 28px -12px rgba(0,0,0,.6);
  --shadow-lg:0 34px 64px -26px rgba(0,0,0,.72);
  --skel-base:#27272d; --skel-shine:#33333b;
}

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
/* Bootstrap 3 sets html{font-size:10px} which halves every rem. Reset to the
   browser default so the type scale renders at its intended size. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; background: var(--ground); }
body {
  background: var(--ground); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Kill the few px of horizontal scroll that absolute overlays (the mega dropdown) add.
   clip on BOTH html and body caps the viewport width; clip (unlike hidden) does not create a
   scroll container, so vertical scroll, position:sticky and the slide-in drawer all keep working. */
html, body { overflow-x: clip; }
/* visually-hidden label for icon-only controls (bootstrap ships .sr-only too; keep a copy so it
   survives if bootstrap is trimmed) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
h1,h2,h3,h4,h5 { font-family: var(--font-serif); color: var(--ink); line-height: 1.12; text-wrap: balance; letter-spacing: -.015em; margin: 0 0 var(--s4); font-weight: 600; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s4); }
a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover, a:focus { color: var(--accent-hover); }
img { max-width: 100%; }
/* Bootstrap hardcodes background-color:#fff on .img-thumbnail, so its 4px mat
   renders as a white letterbox around every photo in dark theme (cart dropdown,
   product option swatches). Token it so the tile follows the surface, not the photo. */
.img-thumbnail { background-color: var(--surface-2); border-color: var(--line); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* Bootstrap ships a:focus{outline:5px auto} and .dropdown-toggle:focus{outline:0}, both of
   which outrank the bare :focus-visible above - restate at matching specificity. */
a:focus-visible, .dropdown-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
a:focus:not(:focus-visible), .dropdown-toggle:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--brand); color: var(--brand-ink); }
/* width:100% overrides Bootstrap's fixed .container width:1170px (min-1200) - a bare
   max-width can never widen past that fixed width, so the shell was stuck at 1170. */
.container { width: 100%; max-width: var(--maxw); }

/* Uppercase micro-label utility used across pages */
.qn-eyebrow { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); }

/* ---- Buttons ------------------------------------------------------------- */
.btn { border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-base); padding: 12px 22px; border: 1.5px solid transparent; transition: all var(--dur) var(--ease); line-height: 1.3; }
.btn-lg { padding: 16px 28px; font-size: var(--fs-md); }
.btn-primary, .btn-qn { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow-sm); font-weight: 700; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-qn:hover,.btn-qn:focus { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-default { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-default:hover,.btn-default:focus { background: var(--surface-2); border-color: var(--ink-soft); color: var(--ink); }
.btn-inverse,.btn-inverse:focus { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn-inverse:hover { background: #000; color: var(--brand); }
.btn-info,.btn-info:focus { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-info:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
/* Quiet secondary action - demotes stock yellow/primary buttons where Solo Yellow is not the view's CTA. */
.qn-btn-quiet,.qn-btn-quiet:focus { background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink); }
.qn-btn-quiet:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.btn-danger,.btn-danger:focus { background: var(--sale); border-color: var(--sale); color: #fff; }
.btn-danger:hover { background: var(--sold); border-color: var(--sold); color: #fff; }
/* One light sweep across conversion CTAs on hover/focus */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary, .btn-qn, #product #qn-offer-btn, .home-hero__cta, .offer-band__cta { position: relative; overflow: hidden; }
  .btn-primary::after, .btn-qn::after, #product #qn-offer-btn::after, .home-hero__cta::after, .offer-band__cta::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; opacity: 0;
    transform: skewX(-18deg); pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); }
  .btn-primary:hover::after, .btn-qn:hover::after, #product #qn-offer-btn:hover::after, .home-hero__cta:hover::after, .offer-band__cta:hover::after,
  .btn-primary:focus-visible::after, .btn-qn:focus-visible::after, .home-hero__cta:focus-visible::after, .offer-band__cta:focus-visible::after {
    animation: qn-cta-sheen .7s var(--ease); }
  @keyframes qn-cta-sheen { from { left: -80%; opacity: 1; } to { left: 130%; opacity: 1; } }
}

/* ---- Top utility bar ----------------------------------------------------- */
/* Utility bar stays dark in BOTH themes (var(--ink) would flip light in dark). */
#top { background: #232221; color: rgba(255,255,255,.72); font-size: var(--fs-sm); border: 0; min-height: 44px; padding: 0; }
#top .container { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; min-height: 44px; }
#top a, #top .btn-link { color: rgba(255,255,255,.8); }
#top a:hover { color: var(--brand); }
#top #top-links .list-inline { margin: 0; display: flex; align-items: center; gap: var(--s3); }
#top #top-links li { padding: 0; }
/* Account dropdown: premium panel, quiet trigger (no reserved yellow), aligned badge. */
#top .dropdown-menu { background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); border-radius: var(--r-sm); padding: var(--s2); margin-top: 8px; min-width: 200px; }
#top .dropdown-menu > li > a, #top .dropdown-menu a { color: var(--ink); border: 0; border-radius: 8px; padding: 10px 16px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; white-space: nowrap; }
#top .dropdown-menu a:hover, #top .dropdown-menu a:focus { background: var(--surface-2); color: var(--ink); }
#top .dropdown > .dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 4px 10px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
#top .dropdown > .dropdown-toggle:hover,
#top .dropdown.open > .dropdown-toggle,
#top .dropdown.open > .dropdown-toggle:hover,
#top .dropdown.open > .dropdown-toggle:focus { background: rgba(255,255,255,.12); color: #fff; }
#top .dropdown > .dropdown-toggle .caret { opacity: .7; }
/* qn_offer injects .qn-notify-badge as position:absolute top-right (it overlaps the
   caret). This id-scoped rule outranks that inline-<style> class rule: dock it inline,
   vertically centred by the flex trigger, no overlap. */
#top .dropdown > .dropdown-toggle .qn-notify-badge { position: static; top: auto; right: auto; margin-left: 2px; }

/* Social icon row (top bar right): muted, inherits #top's brand hover colour. */
#top .qn-top-social { display: inline-flex; align-items: center; gap: 2px; }
#top .qn-top-social a { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--r-pill); color: rgba(255,255,255,.58); font-size: 15px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
#top .qn-top-social a:hover { background: rgba(255,255,255,.08); }
/* phones: drop social icons from the cramped utility bar - footer carries them */
@media (max-width: 767px) { #top .qn-top-social { display: none; } }

/* Day/night switch: pill track with a sliding knob; the active mode's icon rides
   the white knob (brand-coloured), the other sits dim on the track. Knob position
   + icon highlight both driven by the theme, so state is unmistakable. */
#qn-theme-toggle { position: relative; display: inline-block; width: 48px; height: 24px; padding: 0; border-radius: var(--r-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); cursor: pointer; vertical-align: middle; transition: background var(--dur) var(--ease); }
#qn-theme-toggle:hover { background: rgba(255,255,255,.2); }
#qn-theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#qn-theme-toggle::after { content: ""; position: absolute; inset: -10px -6px; }
#qn-theme-toggle .qn-tt__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.4); transition: transform var(--dur) var(--ease); }
#qn-theme-toggle .fa { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; font-size: 11px; line-height: 1; transition: color var(--dur) var(--ease); }
#qn-theme-toggle .fa-sun-o { left: 5px; }
#qn-theme-toggle .fa-moon-o { right: 5px; }
/* default = light: knob left, sun active. Active icon is a fixed dark gold - the
   knob is always white, so it must not use a theme token that flips light. */
#qn-theme-toggle .fa-sun-o { color: #806a00; }
#qn-theme-toggle .fa-moon-o { color: rgba(255,255,255,.5); }
/* dark: knob slides right, moon active */
:root[data-theme="dark"] #qn-theme-toggle .qn-tt__knob { transform: translateX(24px); }
:root[data-theme="dark"] #qn-theme-toggle .fa-moon-o { color: #806a00; }
:root[data-theme="dark"] #qn-theme-toggle .fa-sun-o { color: rgba(255,255,255,.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #qn-theme-toggle .qn-tt__knob { transform: translateX(24px); }
  :root:not([data-theme="light"]) #qn-theme-toggle .fa-moon-o { color: #806a00; }
  :root:not([data-theme="light"]) #qn-theme-toggle .fa-sun-o { color: rgba(255,255,255,.5); }
}

/* The switch paints the new theme in, spreading from the button like ink. The
   browser holds a snapshot of each state and we clip the incoming one with a
   growing circle, so the cost is two composited textures - nothing on the page
   re-renders or reflows while it plays. Only active while qn-theme.js has set
   data-qn-vt, so any other view transition keeps the default cross-fade.
   Coordinates and reach come in as custom properties from the click point. */
:root[data-qn-vt]::view-transition-image-pair(root) { isolation: auto; }
:root[data-qn-vt]::view-transition-old(root),
:root[data-qn-vt]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root[data-qn-vt]::view-transition-old(root) { z-index: 0; }
:root[data-qn-vt]::view-transition-new(root) { z-index: 1; animation: qn-vt-ink .45s cubic-bezier(.4, 0, .2, 1); }
@keyframes qn-vt-ink {
  from { clip-path: circle(0 at var(--qn-vt-x) var(--qn-vt-y)); }
  to { clip-path: circle(var(--qn-vt-r) at var(--qn-vt-x) var(--qn-vt-y)); }
}
/* The new snapshot is live, so every colour transition on the page would run
   again underneath the wipe and muddy the edge. The toggle keeps its own
   transition - its knob sits at the centre of the circle, in full view. */
:root[data-qn-vt] *:not(#qn-theme-toggle, #qn-theme-toggle *) { transition: none !important; }

/* ---- Masthead ------------------------------------------------------------ */
header { background: var(--surface); border-bottom: 1px solid var(--line); }
header .container { padding-top: var(--s6); padding-bottom: var(--s6); }
header .row { display: flex; align-items: center; }
#logo { margin: 0; } #logo img { max-height: 60px; width: auto; } #logo h1 { margin: 0; font-size: var(--fs-xl); }
/* Monochrome dark logo is invisible on the dark header -> force it white in dark mode. */
@media (prefers-color-scheme: dark) { #logo img { filter: brightness(0) invert(1); } }
:root[data-theme="dark"] #logo img { filter: brightness(0) invert(1); }
:root[data-theme="light"] #logo img { filter: none; }

/* no overflow:hidden - it would clip the absolutely-positioned typeahead panel;
   the pill shape comes from rounding the input's left + the button's right end */
#search { box-shadow: none; border-radius: var(--r-pill); border: 1.5px solid var(--line-form); background: var(--surface-2); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
#search:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px rgba(138,116,0,.1); }
#search .form-control { height: 54px; border: 0; background: transparent; box-shadow: none; font-size: var(--fs-base); color: var(--ink); padding-left: var(--s6); border-top-left-radius: var(--r-pill); border-bottom-left-radius: var(--r-pill); }
#search .form-control::placeholder { color: var(--muted); }
#search .btn { height: 54px; background: var(--ink); color: var(--surface); border: 0; border-radius: 0; border-top-right-radius: var(--r-pill); border-bottom-right-radius: var(--r-pill); padding: 0 var(--s6); font-size: var(--fs-md); }
#search .btn:hover { background: var(--ink-soft); color: var(--surface); }

/* Neutral bordered pill - Solo Yellow is reserved for the one primary CTA per view. */
#cart > .btn { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); height: 54px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-base); padding: 0 var(--s6); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
#cart > .btn:hover { background: var(--surface-2); border-color: var(--ink); transform: translateY(-1px); }
/* Tablet: the full-size pill overflows the 768px header row by ~5px and the last
   digit of the total gets clipped at the viewport edge. */
@media (min-width: 768px) and (max-width: 991px) {
  #cart > .btn { height: 46px; font-size: var(--fs-sm); padding: 0 var(--s4); }
}
#cart .dropdown-menu { min-width: 360px; max-width: calc(100vw - 24px); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); background: var(--surface); padding: var(--s4); }
#cart .dropdown-menu .table { color: var(--ink); font-size: var(--fs-sm); }
/* global img{max-width:100%} collapses thumbs inside the auto-layout table */
#cart .dropdown-menu img.img-thumbnail { max-width: none; width: 47px; border-radius: var(--r-sm); border-color: var(--line); }
#cart .dropdown-menu .btn-danger { background: transparent; border-color: var(--line-strong); color: var(--sale); }
#cart .dropdown-menu .btn-danger:hover { border-color: var(--sale); background: transparent; color: var(--sale); }
/* mini-cart footer: Checkout is the primary (filled block), View cart a quiet link */
#cart .dropdown-menu .qn-minicart-foot { margin: var(--s4) 0 0; text-align: center; }
#cart .dropdown-menu .qn-minicart-viewcart { display: inline-block; margin-top: var(--s3); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
#cart .dropdown-menu .qn-minicart-viewcart:hover, #cart .dropdown-menu .qn-minicart-viewcart:focus { color: var(--accent); }
/* item rows: give the name real width so it stops wrapping one word per line */
#cart .dropdown-menu .table td { vertical-align: middle; }
/* bootstrap's #f9f9f9 stripe hides light text in dark theme */
#cart .dropdown-menu .table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-2); }
#cart .dropdown-menu .table-striped td.text-left { min-width: 150px; }
#cart .dropdown-menu .table-striped td.text-left > a { display: inline-block; font-size: var(--fs-xs); line-height: 1.4; font-weight: 600; color: var(--ink); }
#cart .dropdown-menu .table-striped td.text-left > a:hover { color: var(--accent); }
#cart .dropdown-menu .table-striped td:nth-child(3) { color: var(--muted); white-space: nowrap; }
#cart .dropdown-menu .table-striped td:nth-child(4) { white-space: nowrap; }
/* phones: the row must fit the 100vw-capped dropdown, not push past it */
@media (max-width: 480px) {
  #cart .dropdown-menu { padding: var(--s3); }
  #cart .dropdown-menu .table td { padding: 6px; }
  #cart .dropdown-menu .table-striped td.text-left { min-width: 110px; }
  #cart .dropdown-menu img.img-thumbnail { width: 40px; }
}

/* ---- Main nav + mega menu -----------------------------------------------
   All #qn-menu / mega-menu / mobile-drawer styles live inline in
   catalog/view/theme/qn/template/common/menu.twig (global chrome). */
/* 768-1200px: mega panels anchored to right-side items reach past the viewport
   even while hidden (visibility keeps them in scroll overflow) - anchor them
   to the full-width menu bar instead. Extra selector weight beats the
   twig-inline rules that come later in the document. */
@media (min-width: 768px) and (max-width: 1200px) {
  #qn-menu .qn-nav .qn-nav__item { position: static; }
  #qn-menu .qn-nav .qn-nav__item > .qn-mega { left: var(--s4); }
}

/* ---- Section headings (home Featured, category h3, etc.) ----------------- */
#content > h3, .qn-section-title { font-size: var(--fs-xl); margin: 0 0 var(--s7); position: relative; padding-bottom: var(--s4); font-weight: 600; }
#content > h3::after, .qn-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--brand); border-radius: var(--r-pill); }

/* ---- Breadcrumb ---------------------------------------------------------- */
.breadcrumb { background: transparent; padding: var(--s6) 0; margin: 0 0 var(--s6); font-size: var(--fs-sm); }
.breadcrumb > li + li::before { color: var(--muted); padding: 0 10px; }
.breadcrumb a { color: var(--ink-soft); } .breadcrumb a:hover { color: var(--accent); }
.breadcrumb > .active { color: var(--ink-soft); }
@media (max-width: 767px) {
  /* one swipeable line instead of a wrapped stack; qn-theme.js adds the edge fades */
  .breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb > li { float: none; flex: 0 0 auto; white-space: nowrap; }
}

/* Edge fade for horizontal scrollers (breadcrumb, tabs) - qn-theme.js toggles
   the classes only while there is hidden content on that side. */
.qn-fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.qn-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.qn-fade-l.qn-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
/* A diagonal drag on a horizontal scroller nested in a scrolling page is ambiguous, and the
   browser resolves it by panning the page - so the strip fights the finger. pan-x hands it
   the horizontal axis outright; pinch-zoom stays allowed so page zoom still works from here.
   Set by qn-theme.js only while the strip overflows, so one that fits keeps page scroll. */
.qn-hscroll { touch-action: pan-x pinch-zoom; }

/* ---- Product card (stock .product-thumb, theme-wide) --------------------- */
.product-thumb { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: var(--s6); display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.product-thumb:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.product-thumb .image { position: relative; background: var(--skel-base); overflow: hidden; }
.product-thumb .image a { display: block; }
.product-thumb .image img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; opacity: 0; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.product-thumb .image img.qn-loaded, .no-js .product-thumb .image img { opacity: 1; }
.product-thumb:hover .image img { transform: scale(1.04); }
.product-thumb .caption { padding: var(--s5) var(--s5) var(--s3); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.product-thumb .caption h4, .product-thumb .caption h3, .product-thumb .caption h2 { font-size: var(--fs-md); margin: 0 0 var(--s2); line-height: 1.3; font-weight: 600; }
.product-thumb .caption h4 a, .product-thumb .caption h3 a { color: var(--ink); } .product-thumb .caption h4 a:hover, .product-thumb .caption h3 a:hover { color: var(--accent); }
.product-thumb .caption p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.55; margin: 0 0 var(--s3); }
/* Card rhythm. These clamps used to live in a <style> block inside product/category.twig keyed
   on .qn-listing, so they existed on exactly one page - which is why the homepage rendered a
   seven-line eBay title and pushed its own price off the card. Here they reach every grid that
   renders a .product-thumb: home, search, specials, manufacturer, related. Clamping is what
   keeps price and CTA on a shared baseline across a row; the list view unclamps below. */
.product-thumb .caption h4 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.3em * 2); }
.product-thumb .caption p:not(.price) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* List view: horizontal card. Not gated on a min-width any more - the toggle sits in the
   phone toolbar, and behind that gate tapping it produced the same grid. A full-width row is
   also the only place on a phone where brand, whole title and a real description all fit,
   which is what the toggle is for. */
.qn-listing .product-list .product-thumb { flex-direction: row; align-items: stretch; }
.qn-listing .product-list .product-thumb > .image { flex: 0 0 240px; max-width: 240px; }
.qn-listing .product-list .product-thumb > .image img { height: 100%; aspect-ratio: auto; }
.qn-listing .product-list .product-thumb > div:not(.image) { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.qn-listing .product-list .product-thumb .caption { padding: var(--s6); }
.qn-listing .product-list .product-thumb .caption h4 { -webkit-line-clamp: 2; }
.qn-listing .product-list .product-thumb .price { margin-top: auto; }
.qn-listing .product-list .product-thumb .button-group { border-top: 1px solid var(--line); }
@media (max-width: 767px) {
  /* A 240px still lets the text column keep ~130px on a 390px screen; below that the row
     stops being more readable than the grid it replaced. */
  .qn-listing .product-list .product-thumb > .image { flex: 0 0 132px; max-width: 132px; }
  .qn-listing .product-list .product-thumb .caption { padding: var(--s4); }
  .qn-listing .row > .product-layout.product-list { width: 100%; }
}

/* Condition micro-label on cards - answers "is it pre-owned?" before the click.
   Quiet by design: the Sold flag stays the only loud thing on a card. */
.product-thumb .qn-cond { display: block; font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s2); }
/* Brand + condition share one eyebrow row: the brand links to its brand page and truncates
   when long; the condition stays fully visible after a small dot. Kept on ONE line on purpose -
   letting it wrap turns three words of uppercase into the loudest thing on the card. */
.product-thumb .qn-eyebrow { display: flex; align-items: center; min-width: 0; margin: 0 0 var(--s2); }
.product-thumb .qn-eyebrow .qn-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.product-thumb .qn-eyebrow .qn-brand:hover, .product-thumb .qn-eyebrow .qn-brand:focus { color: var(--accent); text-decoration: underline; }
/* The condition yields first, not the brand. "Pre-owned" is on almost every item in this
   catalogue, so it carries little information, while the brand is the buy signal - letting a
   fixed-width "PRE-OWNED" squeeze "Longines" down to "LO..." had it backwards. The brand keeps
   a floor of ~5 characters before anything is cut. */
.product-thumb .qn-eyebrow .qn-brand { min-width: 5ch; }
.product-thumb .qn-eyebrow .qn-cond { flex: 0 1 auto; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-thumb .qn-eyebrow .qn-brand + .qn-cond::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 var(--s2); border-radius: 50%; background: currentColor; opacity: .45; vertical-align: middle; }
/* Stars are stock .fa-stack markup, which is 2em per star by default - on a card that renders
   five 30px stars that wrap onto a second line and shout louder than the price. Scale the whole
   stack down to caption size and keep it on one row. */
.product-thumb .rating { display: flex; flex-wrap: nowrap; align-items: center; margin: 0 0 var(--s2); }
.product-thumb .rating .fa-stack { width: 1em; height: 1em; line-height: 1em; font-size: 13px; vertical-align: middle; }
.product-thumb .rating .fa-stack-2x { font-size: 1em; }
.product-thumb .rating .fa-star { color: var(--star); } .product-thumb .rating .fa-star-o { color: var(--line-strong); }
.product-thumb .price { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--fs-lg); font-weight: 700; color: var(--ink); margin: 0; padding: 0 var(--s5) var(--s5); letter-spacing: -.01em; }
/* Centered view-all link under the home featured/new-arrivals grid */
.qn-featured__more { text-align: center; margin: var(--s4) 0 var(--s2); }
.qn-featured__more .btn { padding: 10px 28px; }
/* Stock featured/category markup nests <p class="price"> inside .caption where
   the generic caption-p rule would mute it. Re-assert price styling and pin it
   to the card bottom. */
.product-thumb .caption p.price { font-family: var(--font-sans); font-size: var(--fs-lg); line-height: 1.2; font-weight: 700; color: var(--ink); margin: 0; margin-top: auto; padding: var(--s2) 0 0; }
.product-thumb .price-old { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 400; font-size: var(--fs-base); margin-left: 8px; }
.product-thumb .price-tax { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 400; font-family: var(--font-sans); margin-top: 2px; }
/* Sale block on narrow grid cards (phones): the 4-digit now/was pair + countdown
   can't sit inline at ~140px like they do on desktop/list, so lay them as a tidy
   flush-left column - now, struck was, then the countdown chip - instead of a
   ragged wrap. Desktop and list view keep the inline row. */
@media (max-width: 767px) {
  .product-grid .product-thumb .price { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
  .product-grid .product-thumb .price-old { margin-left: 0; font-size: var(--fs-sm); }
  .product-grid .product-thumb .qn-cd-mini { margin-left: 0; margin-top: 5px; }
  /* list view on phones stacks full-width - center the now/was/counter to match */
  #content .product-list .product-thumb .price { text-align: center; }
}
/* Single-row action bar: the cart label never wraps, secondary actions
   (wishlist / compare / injected qn_offer) are fixed icon squares. */
.product-thumb .button-group { display: flex; flex-wrap: nowrap; align-items: stretch; border-top: 1px solid var(--line); background: var(--surface-2); }
.product-thumb .button-group button, .product-thumb .button-group .qn-card-offer { border: 0; background: transparent; color: var(--ink-soft); min-height: 48px; padding: 0 var(--s2); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; cursor: pointer; border-right: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--dur) var(--ease); }
.product-thumb .button-group > :last-child { border-right: 0; }
.product-thumb .button-group button:not(:first-child), .product-thumb .button-group .qn-card-offer { flex: 0 0 44px; width: 44px; padding: 0; }
.product-thumb .button-group button:first-child { color: var(--ink); flex: 1 1 auto; min-width: 0; white-space: nowrap; }
/* the stock hidden-xs/sm/md label span stays visible at every width */
.product-thumb .button-group button:first-child span { display: inline !important; }
.product-thumb .button-group button:first-child:hover { background: var(--brand); color: var(--brand-ink); }
.product-thumb .button-group button:hover, .product-thumb .button-group .qn-card-offer:hover { background: var(--surface); color: var(--accent); }
/* Once the offer button is injected the row has four actions - drop compare to
   keep it uncluttered. :has fires post-injection; the 480px rule below is the
   fallback for browsers without :has. */
.product-thumb .button-group:has(.qn-card-offer) button[onclick^="compare.add"] { display: none; }
/* Make an Offer is the shop's differentiator, but qn_offer injects it as a bare
   icon so it reads as decoration next to the labelled cart button. Promote it to
   the quiet-button idiom - inset pill, real border, visible word. The wording is
   the admin setting module_qn_offer_button_label and the injected markup carries
   it in aria-label only, so mirror that attribute rather than hardcode English -
   and give the pill its own row, because an admin-chosen label has no length
   budget and would otherwise squeeze the labelled cart button off the card. */
.product-thumb .button-group:has(.qn-card-offer) { flex-wrap: nowrap; }
/* the wishlist icon now ends row one - its divider would land on the card edge */
.product-thumb .button-group:has(.qn-card-offer) button:not(:first-child):not(.qn-card-offer) { border-right: 0; }
/* min-width:0 lets a long admin label ellipsise instead of bursting the card */
/* Offer sits between Add to Cart and the heart, carrying the same weight as Add to
   Cart - it is an alternative way to buy, not a louder one. Label comes from the
   button's own aria-label so a renamed admin label follows automatically. */
.product-thumb .button-group button.qn-card-offer { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 var(--s2); border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink-soft); font-weight: 600; }
/* Grid cards are too narrow for "Make an Offer" - it truncated to "Make an ...".
   The icon carries the meaning, so the grid shows the short label and the list,
   which has room, keeps the full one. */
.product-thumb .button-group button.qn-card-offer::after { content: attr(data-short); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.product-list .product-thumb .button-group button.qn-card-offer::after { content: attr(aria-label); }
.product-thumb .button-group button.qn-card-offer:hover { background: var(--surface); color: var(--accent); }
@media (max-width: 480px) {
  /* One compact action row even on ~180px 2-up cards: labeled cart + Save (heart);
     compare is hidden and the offer pill sits on the row below. */
  .product-thumb .button-group button:first-child { padding: 0 var(--s1); font-size: var(--fs-xs); gap: 5px; }
  .product-thumb .button-group button:first-child .fa { font-size: 1.05em; }
  .product-thumb .button-group button:first-child span { display: inline !important; }
  .product-thumb .button-group button:not(:first-child) { display: inline-flex; flex: 0 0 40px; width: 40px; }
  .product-thumb .button-group button[onclick^="compare.add"] { display: none; }
  /* re-states flex/width: the icon-square rule above ties on specificity */
  .product-thumb .button-group button.qn-card-offer { flex: 1 1 auto; width: auto; margin: 0; font-size: var(--fs-xs); }
  /* Two cards per row leaves ~175px for three actions, where even "Offer" clips to
     "O." - the grid AND the home "New Arrivals" block (also 2-up, but its cards carry
     no .product-grid class) keep the icon alone; the list, which is full width, still
     shows the label. */
  .product-grid .product-thumb .button-group button.qn-card-offer,
  #qn-home .product-thumb .button-group button.qn-card-offer { flex: 0 0 40px; width: 40px; padding: 0; }
  .product-grid .product-thumb .button-group button.qn-card-offer::after,
  #qn-home .product-thumb .button-group button.qn-card-offer::after { content: none; }
  /* Home "New Arrivals" on phones: icons only - the cart label is dropped too so the row
     reads as three even icon actions (cart / offer / save), matching the owner's ask. The
     card title above already names the product, so the button label is redundant here. */
  #qn-home .product-thumb .button-group button:first-child { flex: 1 1 auto; }
  #qn-home .product-thumb .button-group button:first-child span { display: none !important; }
}

/* Sold listing cards: muted photo, action row swapped for a static bar */
.product-thumb--sold .image img { filter: grayscale(1); opacity: .9; }
.product-thumb--sold:hover .image img { transform: none; }
.qn-sold-bar { display: flex; align-items: center; justify-content: center; min-height: 48px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--sold); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* Equal-height product grids - kills the Bootstrap-3 float staircase where
   cards of differing height snag and leave gaps. Flex-wrap + stretch. */
.row:has(> .product-layout) { display: flex; flex-wrap: wrap; }
.product-layout { float: none; display: flex; }
.product-layout > div, .product-layout > .product-thumb { width: 100%; }
/* Grid view: pin the action row (or sold bar) to the card bottom so rows align
   even when captions differ. List view keeps its own flow (price has the auto
   margin there). */
.product-grid .product-thumb > div:not(.image) { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.product-grid .product-thumb .button-group, .product-grid .product-thumb .qn-sold-bar { margin-top: auto; }

/* Skeleton shimmer */
@keyframes qn-shimmer { 100% { transform: translateX(100%); } }
/* .js-gated like the gallery skeleton (line ~415): without JS nothing ever adds .qn-ready,
   so an ungated overlay would permanently cover every listing image for no-JS visitors. */
.js .product-thumb .image:not(.qn-ready)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--skel-base); }
.js .product-thumb .image:not(.qn-ready)::after { content: ""; position: absolute; inset: 0; z-index: 1; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skel-shine), transparent); animation: qn-shimmer 1.3s infinite; }
.product-thumb .image.qn-ready::before, .product-thumb .image.qn-ready::after { display: none; }

/* ======================================================================== */
/*  CATEGORY / LISTING PAGE                                                  */
/* ======================================================================== */
#product-category > h2, #product-search > h2, #product-special > h2, #product-manufacturer > h2 { font-size: var(--fs-2xl); font-weight: 600; margin: 0 0 var(--s6); max-width: 24ch; }
.category-thumb, #product-category .category-img { display: none; } /* stock category banner image: hide the tiny one */

/* Left column: category list + refine as clean panels */
#column-left { padding-right: var(--s6); }
/* Hide leftover OC demo banner module (a swiper with a stock PC image) in sidebars */
#column-left .swiper-viewport, #column-right .swiper-viewport { display: none; }
#column-left .list-group, #column-right .list-group { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); margin-bottom: var(--s6); box-shadow: var(--shadow-sm); }
#column-left .list-group-item, #column-right .list-group-item { border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: var(--fs-base); padding: 13px var(--s5); transition: all var(--dur) var(--ease); }
#column-left .list-group-item:last-child, #column-right .list-group-item:last-child { border-bottom: 0; }
#column-left .list-group-item:hover, #column-right .list-group-item:hover { background: var(--surface-2); color: var(--accent); padding-left: calc(var(--s5) + 4px); }
#column-left .list-group-item.active, #column-left a.active { background: var(--ink); color: var(--ground); font-weight: 600; }
#column-left .list-group-item + .list-group-item.active { border: 0; }

/* Refine subcategory block */
.refine-search { margin-bottom: var(--s7); }
.refine-search > h3, h3.qn-refine { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-sans); font-weight: 700; color: var(--ink); margin-bottom: var(--s4); }
.refine-search ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s2) var(--s5); }
.refine-search ul li a { display: inline-flex; color: var(--ink-soft); font-size: var(--fs-base); padding: 4px 0; }
.refine-search ul li a:hover { color: var(--accent); }

/* Listing toolbar (sort / limit / list-grid) - style controls only, no giant pill */
.product-compare-header, #compare-total, #product-category #compare-total, a[onclick*="compare"] { color: var(--muted); font-weight: 500; }
#content .btn-group .btn { border-radius: var(--r-sm) !important; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); padding: 8px 14px; }
#content .btn-group .btn:hover { color: var(--accent); border-color: var(--accent); }
/* List/grid switch - one segmented pill. The bordered container lives in the
   listing twig toolbar block; flatten the generic btn-group skin above so the
   two segments sit flush inside it. */
#content .qn-toolbar__view .btn { border: 0 !important; border-radius: 0 !important; width: 46px; height: 44px; padding: 0; background: var(--surface); color: var(--ink-soft); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-md); }
#content .qn-toolbar__view .btn + .btn { border-left: 1.5px solid var(--line-strong) !important; }
#content .qn-toolbar__view .btn:hover { background: var(--surface-2); color: var(--ink); }
/* container overflow:hidden clips an outside focus ring - draw it inside */
#content .qn-toolbar__view .btn:focus-visible { outline-offset: -3px; }
#content #grid-view.active, #content #list-view.active { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.form-control, select.form-control { border: 1.5px solid var(--line-form); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); box-shadow: none; font-size: var(--fs-base); height: 44px; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,116,0,.12); }
select.form-control { height: 44px; padding: 0 var(--s4); }
/* Bootstrap default legend is #333 on a light border - unreadable in dark. */
legend { color: var(--ink); border-bottom: 1px solid var(--line); font-family: var(--font-serif); font-size: var(--fs-lg); padding-bottom: var(--s2); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; }
.radio label, .checkbox label { padding-top: var(--s1); padding-bottom: var(--s1); min-height: 28px; }
/* Bootstrap absolutely-positions the .checkbox-inline box over its label text
   (and off-card in flex labels) - inline it with a real gap and size. */
label.checkbox-inline { padding-left: 0; }
.checkbox-inline input[type="checkbox"] { position: static; margin: 0 var(--s2) 0 0; width: 16px; height: 16px; accent-color: var(--accent); }

/* Pagination */
.pagination { gap: 6px; display: inline-flex; flex-wrap: wrap; }
.pagination > li > a, .pagination > li > span { border: 1.5px solid var(--line-strong); color: var(--ink-soft); border-radius: var(--r-sm) !important; margin: 0; padding: 10px 16px; background: var(--surface); font-weight: 600; }
.pagination > li > a:hover { background: var(--surface-2); color: var(--accent); border-color: var(--accent); }
.pagination > .active > span, .pagination > .active > a { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--ground) !important; }
.text-right.pagination-results, .col-sm-6.text-right { color: var(--muted); font-size: var(--fs-sm); }

/* List view cards (common.js toggles .product-list). The base horizontal
   layout lives inline in the listing twigs; #content bumps specificity so
   these refinements win over it. */
@media (min-width: 768px) {
  #content .product-list .product-thumb > .image { flex: 0 0 260px; max-width: 260px; background: var(--surface-2); border-right: 1px solid var(--line); }
  #content .product-list .product-thumb > .image img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
  #content .product-list .product-thumb .caption { padding: var(--s6) var(--s6) var(--s4); }
  #content .product-list .product-thumb .caption h4, #content .product-list .product-thumb .caption h3, #content .product-list .product-thumb .caption h2 { font-size: var(--fs-lg); }
  #content .product-list .product-thumb .caption p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #content .product-list .product-thumb .price { margin-top: auto; text-align: right; padding: 0 var(--s6) var(--s5); }
}

/* ======================================================================== */
/*  PRODUCT DETAIL PAGE (custom qn layout)                                   */
/* ======================================================================== */
#product-product > .breadcrumb { margin-bottom: var(--s4); }
.qn-product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s10); align-items: start; margin-bottom: var(--s9); }

/* Gallery: big main + thumb strip + custom lightbox */
.qn-product__gallery { position: sticky; top: var(--s6); }
.qn-gallery__main { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); aspect-ratio: 1/1; touch-action: pan-y pinch-zoom; }
.qn-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: opacity var(--dur) var(--ease); }
/* Sliding track (built by JS): frames sit side by side and follow the pointer */
.qn-gallery__track { display: flex; width: 100%; height: 100%; transition: transform .3s var(--ease); will-change: transform; }
.qn-gallery__track.is-drag { transition: none; }
.qn-gallery__slide { flex: 0 0 100%; min-width: 0; height: 100%; }
@media (prefers-reduced-motion: reduce) { .qn-gallery__track { transition: none; } }
/* Deferred/loading main image: shimmer until the gallery JS marks it ready (matches listing cards). */
.js .qn-gallery__main:not(.qn-ready)::after { content: ""; position: absolute; inset: 0; z-index: 2; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skel-shine), transparent); animation: qn-shimmer 1.3s infinite; pointer-events: none; }
.qn-gallery__empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 3rem; }
.qn-gallery__zoom { position: absolute; bottom: var(--s4); right: var(--s4); width: 48px; height: 48px; border-radius: var(--r-pill); border: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; font-size: var(--fs-md); transition: all var(--dur) var(--ease); }
.qn-gallery__zoom:hover { background: var(--brand); color: var(--brand-ink); transform: scale(1.06); }
/* One horizontal line: native scroll + hidden scrollbar; qn-theme.js wraps it in
   .qn-gallery__strip and toggles the fade masks + edge arrows on overflow */
.qn-gallery__strip { position: relative; margin-top: var(--s4); }
.qn-gallery__thumbs { display: flex; gap: var(--s3); flex-wrap: nowrap; margin-top: var(--s4); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.qn-gallery__thumbs::-webkit-scrollbar { display: none; }
.qn-gallery__strip .qn-gallery__thumbs { margin-top: 0; }
.qn-gallery__thumb { position: relative; flex: 0 0 auto; width: 84px; height: 84px; padding: 0; border: 2px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); cursor: pointer; transition: border-color var(--dur) var(--ease); }
.qn-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qn-gallery__thumb.is-active, .qn-gallery__thumb:hover { border-color: var(--accent); }
.qn-gallery__thumb--video .qn-gallery__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); color: #fff; font-size: 1.1rem; }
.qn-gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 36px; display: none; align-items: center; justify-content: center; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; font-size: var(--fs-md); line-height: 1; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.qn-gallery__arrow:hover { border-color: var(--accent); color: var(--accent); }
.qn-gallery__arrow.is-show { display: inline-flex; }
.qn-gallery__arrow--prev { left: 0; }
.qn-gallery__arrow--next { right: 0; }
@media (max-width: 767px) {
  .qn-gallery__thumbs { scroll-snap-type: x proximity; }
  .qn-gallery__thumb { scroll-snap-align: start; }
}

/* Lightbox overlay - token veil: near-white on light, near-black on dark.
   Full-bleed column (eBay pattern): stage fills everything above the bottom
   thumb rail; controls float over the stage. */
.qn-lightbox { position: fixed; inset: 0; z-index: 2000; background: var(--ground); background: color-mix(in srgb, var(--ground) 96%, transparent); display: none; flex-direction: column; opacity: 0; transition: opacity .2s var(--ease); }
.qn-lightbox.is-open { display: flex; opacity: 1; }
/* stage clips the zoomed image; the img keeps auto contained sizing (element
   box == drawn image) so the pan-bounds math on offsetWidth stays true */
.qn-lb__stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--s3); }
/* zoomable stage image: cursor-follow pan while zoomed via its own transform */
.qn-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; cursor: zoom-in; transform-origin: center center; transition: transform .22s var(--ease); will-change: transform; touch-action: none; }
.qn-lb__img.is-out { cursor: zoom-out; }
.qn-lb__img.is-panning { transition: none; }
/* quiet zoom pill (top-left of stage) + full-res loading shimmer bar */
.qn-lb__chip { position: absolute; top: var(--s3); left: var(--s3); z-index: 3; display: none; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-size: var(--fs-xs); font-family: var(--font-mono); letter-spacing: .08em; box-shadow: var(--shadow-sm); pointer-events: none; }
.qn-lb__chip.is-on { display: block; }
.qn-lb__stage.is-loading::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%; animation: qn-lb-shimmer 1s linear infinite; }
@keyframes qn-lb-shimmer { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) {
  .qn-lb__img { transition: none; }
  .qn-lb__stage.is-loading::before { animation: none; }
}
.qn-lb__video { width: min(90vw, 1100px); aspect-ratio: 16/9; }
.qn-lb__video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--r); }
/* Circular surface controls read over both veils via hairline + shadow */
/* z-index 5 keeps close/prev above the later-in-DOM relative stage, else the
   stage box covers them and swallows taps (desktop closes via stage-click, but
   touch suppresses that synthetic click - so the buttons must be hit directly) */
.qn-lb__close, .qn-lb__nav { position: absolute; z-index: 5; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); line-height: 1; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.qn-lb__close:hover, .qn-lb__nav:hover { border-color: var(--accent); color: var(--accent); }
.qn-lb__close { top: var(--s5); right: var(--s6); width: 48px; height: 48px; font-size: 28px; }
.qn-lb__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; }
.qn-lb__prev { left: var(--s6); } .qn-lb__next { right: var(--s6); }
@media (max-width: 767px) {
  .qn-lb__close { top: var(--s3); right: var(--s3); width: 46px; height: 46px; font-size: 24px; }
  .qn-lb__nav { width: 46px; height: 46px; font-size: 26px; }
  .qn-lb__prev { left: var(--s3); } .qn-lb__next { right: var(--s3); }
}
.qn-lb__counter { position: absolute; top: var(--s5); left: 50%; transform: translateX(-50%); color: var(--ink-soft); font-size: var(--fs-sm); letter-spacing: .12em; font-family: var(--font-mono); }
/* bottom thumb rail: active slide highlighted; auto-margins = overflow-safe centering */
.qn-lb__rail { flex: 0 0 auto; display: flex; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); overflow-x: auto; scrollbar-width: none; }
.qn-lb__rail::-webkit-scrollbar { display: none; }
.qn-lb__rail:empty { display: none; }
.qn-lb__rail > :first-child { margin-left: auto; }
.qn-lb__rail > :last-child { margin-right: auto; }
.qn-lb__thumb { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; position: relative; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); overflow: hidden; cursor: pointer; opacity: .55; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.qn-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qn-lb__thumb:hover { opacity: 1; }
.qn-lb__thumb.is-active { opacity: 1; border: 2px solid var(--accent); }
.qn-lb__thumb--video::after { content: "\f04b"; font-family: FontAwesome; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; background: rgba(0, 0, 0, .35); }
@media (max-width: 767px) {
  .qn-lb__thumb { width: 48px; height: 48px; }
}

/* Header search typeahead */
#search { position: relative; }
.qn-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 900; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow-y: auto; max-height: min(70vh, 560px); display: none; }
.qn-suggest.is-open { display: block; }
.qn-suggest__item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.qn-suggest__item img { width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); object-fit: cover; flex: 0 0 auto; background: var(--surface-2); }
.qn-suggest__item:hover, .qn-suggest__item.is-active { background: var(--surface-2); }
.qn-suggest__name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qn-suggest__name mark { background: none; color: var(--accent); font-weight: 700; }
.qn-suggest__price { font-family: var(--font-serif); font-weight: 700; white-space: nowrap; color: var(--ink); }
.qn-suggest__price s { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); margin-right: 4px; }
.qn-suggest__item.is-sold img { filter: grayscale(1); opacity: .7; }
.qn-suggest__sold { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qn-suggest__all { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s3) var(--s4); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; color: var(--accent); text-decoration: none; background: var(--surface); border-top: 1px solid var(--line); }
.qn-suggest__all:hover, .qn-suggest__all.is-active { background: var(--surface-2); }
.qn-suggest__none { padding: var(--s4); color: var(--muted); font-size: var(--fs-sm); }

/* availability badge + reviews link */
.qn-avail { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--muted); }
.qn-avail i { font-size: 8px; color: var(--muted); }
.qn-avail--in { color: var(--success); } .qn-avail--in i { color: var(--success); }
.qn-avail--sold { color: var(--sold); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .qn-avail--sold i { color: var(--sold); }
.qn-reviews-link { margin-left: var(--s3); color: var(--ink-soft); font-size: var(--fs-sm); }

/* Buy box */
.qn-product__buy { display: flex; flex-direction: column; }
.qn-product__buy .qn-eyebrow { margin: 0 0 var(--s2); }
.qn-buy-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s3); }
.qn-buy-top .qn-eyebrow { margin: 0; min-width: 0; }
.qn-buy-top .qn-share-row { margin: 0; flex: 0 0 auto; }
.qn-buy-top .qn-share-pop { left: auto; right: 0; }
/* fs-xl, not fs-2xl: long eBay-style titles hit 4 lines at ~54px and push the
   price + CTA below the first desktop viewport. */
.qn-product__buy h1 { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 var(--s3); line-height: 1.15; }
.qn-product__meta { list-style: none; padding: 0; margin: 0 0 var(--s4); color: var(--ink-soft); font-size: var(--fs-base); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.qn-product__meta li { margin: 0; }
.qn-product__meta strong { color: var(--ink); font-weight: 600; }
.qn-product__meta a { color: var(--accent); }
.qn-product .rating { margin: 0 0 var(--s3); }
.qn-product .rating .fa-star { color: var(--star); } .qn-product .rating .fa-star-o { color: var(--line-strong); }
.qn-price { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin: var(--s3) 0 var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qn-price__now { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: .95; }
.qn-price__was { font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; font-size: var(--fs-md); font-weight: 400; }
.qn-price__tax { color: var(--muted); font-size: var(--fs-sm); width: 100%; margin-top: 4px; }

/* Liquid-gold sale price - molten metal, not urgency-red (--sale stays for
   SOLD/error semantics only). Solid gold fallback where clip-to-text misses. */
.qn-price__now.qn-price__sale, .product-thumb .price-new, .qn-buybar__price.qn-buybar__price--sale { color: var(--gold-3); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .qn-price__now.qn-price__sale, .product-thumb .price-new, .qn-buybar__price.qn-buybar__price--sale {
    background: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 38%, var(--gold-3) 58%, var(--gold-1) 100%);
    background-size: 220% 100%; background-position: 0% 50%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .qn-price__now.qn-price__sale, .product-thumb .price-new, .qn-buybar__price.qn-buybar__price--sale {
      animation: qn-gold-sheen 7s ease-in-out infinite;
    }
  }
}
@keyframes qn-gold-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Countdown: full-width "display case" timer under the price - hairline gold
   frame, centered label, DD:HH:MM:SS cells split by vertical hairlines (the
   colon spans are restyled into dividers so the JS markup stays unchanged).
   Numerals reuse the liquid-gold gradient-text treatment; solid --gold-3 is
   the AA-readable fallback in both themes. */
.qn-countdown {
  width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0;
  margin-top: var(--s3);
  border: 1px solid color-mix(in srgb, var(--gold-3) 28%, var(--line));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--gold-3) 6%, var(--surface));
}
.qn-countdown__label { padding: 10px 12px 2px; text-align: center; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; color: var(--muted); }
.qn-countdown.is-soon { border-color: color-mix(in srgb, var(--sale) 45%, var(--line)); background: color-mix(in srgb, var(--sale) 6%, var(--surface)); }
.qn-countdown.is-soon .qn-countdown__label { color: var(--sale); }
.qn-countdown__segs { display: flex; width: 100%; align-items: stretch; padding: 4px 0 12px; }
.qn-cd__seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.qn-cd__num { font-family: var(--font-serif); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); font-weight: 700; line-height: 1; letter-spacing: .01em; color: var(--gold-3); }
.qn-cd__unit { margin-top: 6px; font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--muted); }
.qn-cd__colon { flex: 0 0 1px; align-self: stretch; margin: 2px 0 8px; font-size: 0; color: transparent; background: color-mix(in srgb, var(--gold-3) 25%, var(--line)); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .qn-cd__num {
    background: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 38%, var(--gold-3) 58%, var(--gold-1) 100%);
    background-size: 220% 100%; background-position: 0% 50%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .qn-cd__num { animation: qn-gold-sheen 7s ease-in-out infinite; }
    .qn-countdown.is-soon .qn-cd__num { animation-duration: 2.4s; }
  }
}
/* Per-second roll-in on the seconds numeral. The clip-to-text branch restates
   the sheen (the animation shorthand replaces it) - restarting the 7s sheen
   every second effectively freezes the gradient on that one numeral: fine. */
@media (prefers-reduced-motion: no-preference) {
  .qn-cd__seg--secs.is-tick .qn-cd__num { animation: qn-cd-tick .3s var(--ease); }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .qn-cd__seg--secs.is-tick .qn-cd__num { animation: qn-cd-tick .3s var(--ease), qn-gold-sheen 7s ease-in-out infinite; }
  }
}
@keyframes qn-cd-tick { 0% { transform: translateY(.35em); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* Listing-card mini countdown: hairline gold pill in the price row - clock,
   "Ends in" micro-label (JS-injected, hidden on narrow cards), serif gold
   numerals ALWAYS ticking seconds. The time splits into a prefix span (__p)
   and a seconds span (__s) so only the seconds get the per-second roll-in;
   each span carries its own clip-to-text gradient (a transformed child of a
   clipped parent repaints unreliably). .is-soon flips the pill to --sale. */
.qn-cd-mini {
  display: inline-flex; align-items: center; gap: 7px; margin-left: var(--s2);
  padding: 5px 12px; vertical-align: middle; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--gold-3) 30%, var(--line));
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gold-3) 7%, var(--surface));
  color: var(--gold-3);
}
.qn-cd-mini > i { font-size: var(--fs-xs); color: var(--accent); }
.qn-cd-mini__l { font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--muted); }
@media (max-width: 767px) { .qn-cd-mini__l { display: none; } .qn-cd-mini { padding: 4px 9px; gap: 5px; } }
.qn-cd-mini__t { display: inline-flex; font-family: var(--font-serif); font-variant-numeric: tabular-nums; font-size: var(--fs-md); font-weight: 700; line-height: 1; letter-spacing: .01em; color: var(--gold-3); }
@media (max-width: 767px) { .qn-cd-mini__t { font-size: var(--fs-sm); } }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .qn-cd-mini__t > span {
    background: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 38%, var(--gold-3) 58%, var(--gold-1) 100%);
    background-size: 220% 100%; background-position: 0% 50%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) { .qn-cd-mini__t > span { animation: qn-gold-sheen 7s ease-in-out infinite; } }
}
@media (prefers-reduced-motion: no-preference) {
  .qn-cd-mini__s.is-tick { animation: qn-cd-tick .3s var(--ease); }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .qn-cd-mini__s.is-tick { animation: qn-cd-tick .3s var(--ease), qn-gold-sheen 7s ease-in-out infinite; }
  }
}
.qn-cd-mini.is-soon { border-color: color-mix(in srgb, var(--sale) 45%, var(--line)); background: color-mix(in srgb, var(--sale) 6%, var(--surface)); }
.qn-cd-mini.is-soon, .qn-cd-mini.is-soon > i { color: var(--sale); }
.qn-cd-mini.is-soon .qn-cd-mini__l { color: var(--sale); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .qn-cd-mini.is-soon .qn-cd-mini__t > span { background: none; -webkit-text-fill-color: var(--sale); color: var(--sale); animation: none; }
}

/* Product qty stepper - reuses the cart stepper look (.cc-stepper) on the buy box */
.qn-qty .cc-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-form); border-radius: var(--r-pill); background: var(--surface); overflow: hidden; height: 62px; }
.qn-qty .cc-stepper button { width: 44px; height: 100%; border: 0; background: transparent; cursor: pointer; color: var(--ink); font-size: var(--fs-md); line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; }
.qn-qty .cc-stepper button:hover { background: var(--surface-2); color: var(--accent); }
.qn-qty .cc-stepper input { width: 46px; height: 100%; border: 0; background: transparent; text-align: center; font-size: var(--fs-md); color: var(--ink); font-weight: 700; -moz-appearance: textfield; padding: 0; }
.qn-qty .cc-stepper input::-webkit-outer-spin-button, .qn-qty .cc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Cart-awareness: product-page notice + demoted buy CTA + listing-card states */
.qn-cartnote { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0 0 var(--s4); padding: var(--s4) var(--s5); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); font-size: var(--fs-sm); color: var(--ink-soft); }
.qn-cartnote i { color: var(--accent); }
.qn-cartnote__text { flex: 1 1 auto; }
.qn-cartnote a { color: var(--accent); font-weight: 600; border-bottom: 1px solid transparent; }
.qn-cartnote a:hover { border-bottom-color: var(--accent); }
.qn-qtyrow #qn-cart-alt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 62px; border-radius: var(--r-pill); text-decoration: none; }
/* Demoted "in cart" CTA: quiet secondary, so Solo Yellow returns only when a unit is buyable */
.qn-incart-btn, .qn-qtyrow #qn-cart-alt.qn-incart-btn { background: var(--surface-2); border: 1.5px solid var(--line-strong); color: var(--ink); box-shadow: none; font-weight: 600; }
.qn-incart-btn:hover, .qn-qtyrow #qn-cart-alt.qn-incart-btn:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); transform: none; }
.product-thumb .button-group button.qn-incart-btn { color: var(--accent); font-weight: 700; }
.product-thumb .button-group button.qn-incart-btn:hover { background: var(--surface-2); color: var(--accent); }
.product-thumb .button-group button.qn-incart-btn .fa-check { color: var(--success); }
.qn-incart-chip { position: absolute; top: var(--s3); right: var(--s3); z-index: 2; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); background: var(--gold-3); color: var(--brand-ink); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; box-shadow: var(--shadow-sm); }

/* Wishlist-awareness: hearts marked by qn-theme.js (.is-wished) fill + go gold. */
.product-thumb .button-group button.is-wished, .product-thumb .button-group button.is-wished:hover { color: var(--accent); background: transparent; }
#product .wishlist-compare .btn.is-wished { color: var(--accent); border-color: var(--accent); }
#product .wishlist-compare .btn.is-wished .fa { color: var(--accent); }

/* Product Share: quiet pill + qn popover (Copy / Facebook / X / WhatsApp / Pinterest / Email). */
.qn-share-row { position: relative; margin: var(--s4) 0 var(--s2); }
.qn-share-btn { display: inline-flex; align-items: center; gap: var(--s2); height: 38px; padding: 0 var(--s4); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: all var(--dur) var(--ease); }
.qn-share-btn:hover, .qn-share-btn[aria-expanded="true"] { border-color: var(--ink-soft); color: var(--ink); background: var(--surface-2); }
.qn-share-btn .fa { font-size: 14px; }
@media (max-width: 767px) { .qn-share-btn { height: 44px; } }
.qn-share-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 214px; padding: var(--s2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); display: none; }
.qn-share-pop.is-open { display: block; }
.qn-share-opt { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 10px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.qn-share-opt:hover, .qn-share-opt:focus { background: var(--surface-2); color: var(--ink); }
.qn-share-opt .fa { width: 18px; text-align: center; font-size: 15px; color: var(--ink-soft); }
.qn-share-opt.is-copied, .qn-share-opt.is-copied .fa { color: var(--success); }

/* Offer-awareness: card corner chip (logged-in) linking to the offer thread.
   pending = quiet surface (personal/accepted render inside the price instead). */
.qn-offer-chip { position: absolute; top: var(--s3); left: var(--s3); z-index: 3; display: inline-flex; align-items: center; max-width: calc(100% - var(--s6)); padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .01em; line-height: 1.2; text-decoration: none; box-shadow: var(--shadow-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qn-offer-chip--pending { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft); }
.qn-offer-chip:hover { filter: brightness(1.04); color: var(--brand-ink); }
.qn-offer-chip--pending:hover { color: var(--accent); border-color: var(--accent); filter: none; }
/* Sold flag sits top-left too; nudge the offer chip below it when both present */
.product-thumb .image .qn-sold-flag ~ .qn-offer-chip { top: calc(var(--s3) + 30px); }

/* Offer-in-price tag: personal/accepted offers render inside the price (gold new
   + struck old, reusing .price-new / .qn-price__sale); this quiet linked micro-
   label names the deal and points at the thread. Sized like .qn-cd-mini__l. */
.qn-offer-price__tag { display: block; margin-top: 4px; font-size: 10px; line-height: 1.3; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--gold-3); text-decoration: none; }
.qn-offer-price__tag:hover { color: var(--accent); text-decoration: underline; }
.qn-price .qn-offer-price__tag { margin-top: 0; align-self: center; }

/* Product-page offer note: same family as .qn-cartnote; gold-tinted for a live deal */
.qn-offernote i { color: var(--accent); }
.qn-offernote--personal, .qn-offernote--accepted { border-color: var(--gold-3); background: color-mix(in srgb, var(--gold-3) 8%, var(--surface-2)); }
#product-product #product > .form-group > label.control-label { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; }

/* qty + add-to-cart + injected offer/ebay, wishlist/compare */
.buttons-wrapper { margin-top: var(--s3); }
.qn-qtyrow { display: flex; align-items: flex-end; gap: var(--s4); }
.qn-qty { display: flex; flex-direction: column; gap: 6px; }
.qn-qty label { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ink-soft); margin: 0; }
.qn-qty input { width: 88px; height: 62px; text-align: center; font-size: var(--fs-md); font-weight: 600; }
.qn-qtyrow #button-cart { flex: 1; height: 62px; background: var(--brand); color: var(--brand-ink); border: 0; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-md); box-shadow: var(--shadow-sm); transition: all var(--dur) var(--ease); }
.qn-qtyrow #button-cart:hover { background: var(--brand-hover); transform: translateY(-2px); box-shadow: var(--shadow); }
.buttons-wrapper #qn-offer-actions, .buttons-wrapper #qn-ebay-actions { margin-top: var(--s3); }
/* qn_offer.js/qn_ebay.js inject a hardcoded light "classic" skin that glares
   in dark theme - re-skin with tokens (quiet secondary, Solo Yellow stays on
   Add to Cart). Extra selector weight beats their ID-scoped injected rules. */
.buttons-wrapper #qn-offer-btn, .buttons-wrapper #qn-ebay-buy { background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink); border-radius: var(--r-sm); }
.buttons-wrapper #qn-offer-btn:hover, .buttons-wrapper #qn-ebay-buy:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.buttons-wrapper #qn-ebay-trust { color: var(--muted); border-bottom-color: var(--line-strong); }
.buttons-wrapper #qn-ebay-trust:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* qn_offer modal ships a hardcoded light skin in its twig <style> block that
   glares in dark theme - re-token every painted surface. The body prefix
   outranks its ID-scoped rules; covers the card-injected .qn-offer-modal too. */
body #qn-offer-modal .modal-content, body .qn-offer-modal .modal-content { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
body #qn-offer-modal .modal-header, body .qn-offer-modal .modal-header { background: var(--surface); border-bottom: 1px solid var(--line); }
body #qn-offer-modal .modal-title, body .qn-offer-modal .modal-title { color: var(--ink); font-family: var(--font-serif); }
body #qn-offer-modal .modal-header .close, body .qn-offer-modal .modal-header .close { color: var(--ink); opacity: .55; }
body #qn-offer-modal .modal-header .close:hover, body .qn-offer-modal .modal-header .close:hover { color: var(--accent); opacity: 1; }
body #qn-offer-modal .qn-offer-product, body .qn-offer-modal .qn-offer-product { color: var(--ink); }
body #qn-offer-modal .qn-offer-listed, body .qn-offer-modal .qn-offer-listed { color: var(--muted); }
body #qn-offer-modal .qn-offer-listed strong, body .qn-offer-modal .qn-offer-listed strong { color: var(--ink); }
body #qn-offer-modal .qn-offer-min, body .qn-offer-modal .qn-offer-min { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
body #qn-offer-modal label, body .qn-offer-modal label { color: var(--ink-soft); }
body #qn-offer-modal .form-control, body .qn-offer-modal .form-control { background: var(--surface); border-color: var(--line-form); color: var(--ink); }
body #qn-offer-modal .form-control:focus, body .qn-offer-modal .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
body #qn-offer-modal .qn-invalid .form-control, body #qn-offer-modal .form-control.qn-invalid,
body .qn-offer-modal .qn-invalid .form-control, body .qn-offer-modal .form-control.qn-invalid { border-color: var(--sale); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sale) 12%, transparent); }
body #qn-offer-modal .qn-offer-fieldhint, body .qn-offer-modal .qn-offer-fieldhint { color: var(--sale); }
/* "what happens next" reassurance inside both offer forms */
body #qn-offer-modal .qn-offer-note, body .qn-offer-modal .qn-offer-note { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; margin: 0 0 12px; }
/* the offer submit IS the modal's one primary CTA */
body #qn-offer-modal #qn-offer-submit, body .qn-offer-modal #qn-offer-submit { background: var(--brand); color: var(--brand-ink); }
body #qn-offer-modal #qn-offer-submit:hover:not(:disabled), body .qn-offer-modal #qn-offer-submit:hover:not(:disabled) { background: var(--brand-hover); color: var(--brand-ink); }
body #qn-offer-modal #qn-offer-close, body .qn-offer-modal #qn-offer-close { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
/* Sold (out-of-stock, no backorder): purchase disabled, availability made explicit. */
.qn-soldout { display: flex; flex-direction: column; gap: var(--s3); }
.qn-soldbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; height: 62px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-2); color: var(--sold); font-weight: 700; font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .06em; cursor: not-allowed; }
.qn-soldout__note { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.wishlist-compare { display: flex; gap: var(--s3); margin-top: var(--s4); }
/* white-space normal: bootstrap's nowrap .btn makes the two labels' one-line
   width the column's minimum and forces horizontal overflow on phones. */
.wishlist-compare .btn { flex: 1; border-radius: var(--r-pill); height: 50px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-weight: 600; white-space: normal; }
.wishlist-compare .btn:hover { border-color: var(--accent); color: var(--accent); }
.qn-pickup { margin: 0 0 var(--s4); padding: var(--s4) var(--s5); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); font-size: var(--fs-sm); color: var(--ink-soft); display: flex; align-items: center; gap: var(--s3); }
.qn-pickup i { color: var(--accent); }

/* Full-width tabs below the fold */
.qn-tabs { margin: var(--s9) 0; }
.qn-tabs .tab-content { max-width: 860px; }

/* tabs */
/* Mobile: 3 tabs overflow 390px and clip "Reviews" - swipeable strip instead */
@media (max-width: 767px) {
  .qn-tabs .nav-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .qn-tabs .nav-tabs::-webkit-scrollbar { display: none; }
  .qn-tabs .nav-tabs > li { float: none; flex: 0 0 auto; }
  .qn-tabs .nav-tabs > li > a { white-space: nowrap; }
}
.nav-tabs { border-bottom: 2px solid var(--line); margin-top: 0; gap: var(--s2); }
.nav-tabs > li > a { border: 0; color: var(--muted); font-weight: 600; font-size: var(--fs-md); padding: var(--s3) var(--s5); border-radius: 0; margin: 0 0 -2px; text-transform: none; }
.nav-tabs > li > a:hover { background: transparent; color: var(--ink); border-bottom: 2px solid var(--line-strong); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--brand); font-weight: 700; }
@media (max-width: 767px) {
  /* single scrollable row instead of a wrapped second line; edge fades via qn-theme.js */
  .nav-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs > li { float: none; flex: 0 0 auto; }
  .nav-tabs > li > a { white-space: nowrap; padding: var(--s3) var(--s4); }
}
.tab-content { padding: var(--s7) 0; font-size: var(--fs-base); line-height: 1.75; color: var(--ink-soft); }
.tab-content h1,.tab-content h2,.tab-content h3,.tab-content strong { color: var(--ink); }

/* Imported (eBay) descriptions and CMS info pages carry inline fonts, colors
   and backgrounds that fight both themes - strip them to theme defaults. */
#tab-description *, .qn-prose * { font-family: inherit !important; color: inherit !important; background: transparent !important; font-size: inherit; line-height: inherit; }
#tab-description a, .qn-prose a { color: var(--accent) !important; }
/* spans/fonts/inline-emphasis carry inline pixel sizes from imported content;
   heading tags keep their scale */
#tab-description span, #tab-description font, #tab-description strong, #tab-description b, #tab-description em,
.qn-prose span, .qn-prose font, .qn-prose strong, .qn-prose b, .qn-prose em { font-size: inherit !important; line-height: inherit !important; }
#tab-description img, .qn-prose img { max-width: 100%; height: auto; }
#tab-description iframe, .qn-prose iframe { max-width: 100%; }
#tab-description table, .qn-prose table { max-width: 100%; border-collapse: collapse; }
/* eBay-imported description/spec HTML hard-codes desktop pixel widths (e.g. inline
   width:950px on .specification-item), which overflows the mobile page - and the fixed
   lightbox, sized to that overflowed width, then renders far larger than the screen.
   Cap every imported node to its column and let long strings wrap. */
#tab-description *, #tab-specification *, .qn-prose * { max-width: 100% !important; }
#tab-description, #tab-specification, .qn-prose { overflow-wrap: break-word; word-wrap: break-word; }

/* Sold / out-of-stock first-class flag */
.product-thumb .image .qn-sold-flag, .qn-sold-flag { position: absolute; top: var(--s3); left: var(--s3); background: var(--sold); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; padding: 5px 12px; border-radius: var(--r-pill); z-index: 2; text-transform: uppercase; }

/* ======================================================================== */
/*  ACCOUNT PAGES                                                            */
/* ======================================================================== */
.list-group a.list-group-item { font-size: var(--fs-base); }
#account-account .list-group, #account-wishlist .list-group, aside .list-group { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
h2.qn-account, #content > h1, #content > h2 { font-weight: 600; }
.panel { border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); background: var(--surface); overflow: hidden; }
.panel-heading { background: var(--surface-2); border-bottom: 1px solid var(--line); padding: var(--s4) var(--s5); font-weight: 600; }
.panel-title { font-family: var(--font-sans); font-size: var(--fs-md); }
.panel-body { padding: var(--s6); }
/* Full-width toggle bars: pull the focus ring inside so it hugs the bar instead of reading as a stray box. */
a.accordion-toggle:focus-visible, .panel-heading a:focus-visible { outline-offset: -3px; border-radius: var(--r-sm); }
.table { color: var(--ink); font-size: var(--fs-base); }
.table > thead > tr > td, .table > thead > tr > th { border-bottom: 2px solid var(--line-strong); color: var(--ink); font-weight: 700; }
.table-bordered, .table-bordered > tbody > tr > td { border-color: var(--line); }
#tab-specification .qn-spec-key { color: var(--muted); font-weight: 600; width: 40%; }
#tab-specification .qn-spec-head { background: var(--surface-2); }

/* Alerts */
.alert { border-radius: var(--r); border: 1px solid var(--line); font-size: var(--fs-base); padding: var(--s4) var(--s5); }
.alert-success { background: rgba(46,125,70,.1); border-color: rgba(46,125,70,.3); color: var(--success); }
.alert-danger { background: rgba(216,68,42,.1); border-color: rgba(216,68,42,.3); color: var(--sale); }

/* ======================================================================== */
/*  SHARED COMPONENTS (empty state, trust strip, checkout steps + rail)      */
/* ======================================================================== */
.qn-empty { text-align: center; padding: var(--s10) var(--s6); }
.qn-empty .fa { font-size: 44px; color: var(--muted); margin-bottom: var(--s4); }
.qn-empty h3 { margin-bottom: var(--s2); }
.qn-empty p { color: var(--ink-soft); max-width: 44ch; margin: 0 auto var(--s6); }
.qn-empty__actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

.qn-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin: var(--s6) 0; }
.qn-trust__item { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.qn-trust__item .fa { color: var(--accent); font-size: 18px; margin-top: 2px; }
.qn-trust__item strong { display: block; font-size: var(--fs-sm); color: var(--ink); }
.qn-trust__item span { display: block; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.45; }

/* Checkout: numbered step accordion + order rail */
#accordion.qn-steps { counter-reset: qnstep; }
#accordion.qn-steps .panel { position: relative; counter-increment: qnstep; }
#accordion.qn-steps .panel-heading .panel-title::before { content: counter(qnstep); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); color: var(--ink-soft); margin-right: var(--s3); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; }
#accordion.qn-steps .panel:has(.panel-collapse.in) { border-color: var(--accent); box-shadow: var(--shadow-sm); }
#accordion.qn-steps .panel:has(.panel-collapse.in) .panel-heading .panel-title::before { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* Pickup-only order note - shared by the cart and checkout pages. */
.cc-pickup-note{
  display:flex; gap: var(--s3); align-items:flex-start;
  background: var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  margin: 0 0 var(--s5);
  color: var(--ink-soft); font-size: var(--fs-sm); line-height:1.55;
}
.cc-pickup-note i{ color: var(--accent); margin-top: 3px; }
.cc-pickup-note strong{ color: var(--ink); }

/* Store-pickup-only badge - cart rows, header mini-cart, checkout order rail.
   Deliberately small and one-line so it decorates the name instead of competing
   with it in narrow columns. */
.cc-badge-pickup{
  display:inline-flex; align-items:center; gap: 5px;
  width:fit-content;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-size: 10px; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase;
  white-space: nowrap;
}
.cc-badge-pickup i{ font-size: 10px; }
/* Same horizontal inset as .product-thumb .price so both start on one level. */
.product-thumb .cc-badge-pickup{ margin: 2px var(--s5) 6px; }
#cart .dropdown-menu .cc-badge-pickup{ margin-top: 4px; }
#checkout-checkout .qn-rail-item--pickup{ background: color-mix(in srgb, var(--accent) 4%, transparent); }
#checkout-checkout .qn-rail-namewrap{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#checkout-checkout .qn-rail-namewrap .qn-rail-name{ flex: 0 0 auto; }

.qn-co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s8); align-items: start; }
/* Pair the address fields on wide screens: a single full-width column made the
   form twice as tall as the order rail beside it. Street lines stay full-row. */
@media (min-width: 992px) {
  .qn-addr-form, #qn-addr-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s4); align-items: start; }
  .qn-addr-form > *, #qn-addr-fields > * { grid-column: 1 / -1; }
  .qn-addr-form > .form-group, #qn-addr-fields > .form-group { grid-column: auto; }
  #qn-addr-fields > .form-group:has(> input[name$="address_1"]),
  #qn-addr-fields > .form-group:has(> input[name$="address_2"]) { grid-column: 1 / -1; }
}
.qn-rail-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); margin-bottom: var(--s5); }
.qn-rail-card h4 { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--s3); }
.qn-rail-items .qn-rail-item { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.qn-rail-items .qn-rail-item img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-sm); }
.qn-rail-trust { list-style: none; padding: 0; margin: 0; }
.qn-rail-trust li { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s2) 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.qn-rail-trust .fa { color: var(--accent); }

/* ---- Footer -------------------------------------------------------------- */
footer { background: var(--ink); color: rgba(255,255,255,.66); margin-top: var(--s12); padding: var(--s11) 0 var(--s8); }
:root[data-theme="dark"] footer { background: #0f0f11; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) footer { background: #0f0f11; } }
footer h5, footer h2 { color: #fff; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 var(--s5); }
/* phones: stacked columns - tighter shell, breathing room between groups */
@media (max-width: 767px) {
  footer { margin-top: var(--s8); padding: var(--s8) 0 var(--s7); }
  footer .row > div + div { margin-top: var(--s7); }
}
footer a { color: rgba(255,255,255,.64); font-size: var(--fs-base); }
footer a:hover { color: var(--brand); }
footer .list-unstyled li { margin-bottom: 10px; }
footer hr { border-top-color: rgba(255,255,255,.12); margin: var(--s8) 0 var(--s5); }
footer > .container > p { color: rgba(255,255,255,.6); font-size: var(--fs-sm); }
/* Footer social row: slightly larger bordered icons; brand hover from footer a:hover. */
.qn-foot-social { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.qn-foot-social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.72); font-size: 18px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.qn-foot-social a:hover { color: var(--brand); border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); transform: translateY(-2px); }

/* ======================================================================== */
/*  CONVERSION FEATURES (buy bar, toasts, recent, reveal, back-to-top)       */
/* ======================================================================== */

/* Sticky mobile buy bar - injected by qn-theme.js on product pages */
/* ---- Sticky mobile mini header (created by qn-theme.js, shows on scroll-up) */
#qn-minibar { position: fixed; top: 0; left: 0; right: 0; z-index: 940; display: none;
  align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
  padding-top: calc(var(--s2) + env(safe-area-inset-top, 0px));
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transform: translateY(-102%); transition: transform .2s var(--ease); }
#qn-minibar.is-in { transform: translateY(0); }
#qn-minibar form { display: flex; flex: 1 1 auto; min-width: 0; margin: 0; position: relative; }
#qn-minibar .qn-minibar__menu { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 0; color: var(--ink); font-size: 18px; cursor: pointer; border-radius: var(--r-pill); }
#qn-minibar .qn-minibar__menu:hover, #qn-minibar .qn-minibar__menu:active { background: var(--surface-2); color: var(--accent); }
/* 16px input font: anything smaller triggers the iOS focus auto-zoom */
#qn-minibar .qn-minibar__input { flex: 1 1 auto; min-width: 0; height: 40px; border: 1.5px solid var(--line-form);
  border-right: 0; border-radius: var(--r-pill) 0 0 var(--r-pill); background: var(--surface-2);
  padding: 0 var(--s4); font-size: 16px; color: var(--ink); }
#qn-minibar .qn-minibar__input:focus { outline: none; border-color: var(--accent); }
#qn-minibar .qn-minibar__go { height: 40px; width: 44px; border: 1.5px solid var(--line-form); border-left: 0;
  border-radius: 0 var(--r-pill) var(--r-pill) 0; background: var(--surface-2); color: var(--ink); }
#qn-minibar .qn-minibar__cart { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 40px; color: var(--ink); font-size: 18px; }
#qn-minibar .qn-minibar__count { position: absolute; top: 0; right: 2px; min-width: 16px; height: 16px;
  border-radius: 8px; background: var(--accent); color: var(--brand-ink); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* display:flex above would beat the UA [hidden] rule - keep the empty badge gone */
#qn-minibar .qn-minibar__count[hidden] { display: none; }
@media (max-width: 767px) { #qn-minibar { display: flex; } }

/* Installed-app back control, added to the breadcrumb and only inside a
   display-mode:standalone window - an iOS home-screen app has no back gesture
   and no toolbar. The breadcrumb is where the page already says where you are,
   so the way out of it belongs on that same line. */
#qn-appback { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: -3px var(--s2) -3px 0; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--ink); font-size: 17px; line-height: 1; }
#qn-appback:active { background: var(--surface-2); }
/* The breadcrumb paints its own separators between items; the button is not one
   of the trail's steps and must not get one. */
.breadcrumb > li.qn-bc-back::after, .breadcrumb > li.qn-bc-back + li::before { content: none; }

/* Install invitation. A bar, not a dialog: it is an offer, and a shopper who
   ignores it must be able to keep reading without dismissing anything. */
.qn-pwa { position: fixed; left: var(--s4); right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  z-index: 950; display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  max-width: 34rem; margin: 0 auto; padding: var(--s4) var(--s5);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--shadow-lg); transform: translateY(140%); transition: transform .3s var(--ease); }
.qn-pwa.is-in { transform: translateY(0); }
/* The product buy bar owns the bottom of the screen; sit above it, never on it. */
body.qn-buybar-open .qn-pwa { bottom: calc(72px + var(--s4) + env(safe-area-inset-bottom, 0px)); }
.qn-pwa__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; }
.qn-pwa__body { flex: 1 1 12rem; min-width: 0; }
.qn-pwa__title { display: block; font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.qn-pwa__note { display: block; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.45; margin-top: 2px; }
.qn-pwa__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.qn-pwa__no { border: 0; background: none; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; padding: 8px var(--s3); }
.qn-pwa__no:hover { color: var(--ink); }
/* The permanent answer is quieter than the temporary one on purpose - it is the
   rarer intent, and it must not be the button a thumb reaches for by reflex. */
.qn-pwa__never { border: 0; background: none; color: var(--muted); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 2px; padding: 8px var(--s2); }
.qn-pwa__never:hover { color: var(--ink-soft); }
.qn-pwa__yes { border: 0; border-radius: var(--r-pill); background: var(--brand); color: var(--brand-ink);
  font-weight: 700; font-size: var(--fs-sm); padding: 10px var(--s5); }
@media (max-width: 480px) { .qn-pwa__actions { width: 100%; margin-left: 0; justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .qn-pwa { transition: none; } }

.qn-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none;
  align-items: center; gap: var(--s4);
  padding: 8px var(--s4) calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -14px rgba(0,0,0,.25);
  transform: translateY(102%); transition: transform .25s var(--ease); }
.qn-buybar.is-in { transform: translateY(0); }
.qn-buybar__price { flex: 1 1 auto; min-width: 0; height: 56px; display: flex; align-items: center;
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--fs-lg);
  font-weight: 700; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
.qn-buybar__btn { flex: 0 0 auto; height: 48px; padding: 0 var(--s7); border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: var(--fs-base);
  box-shadow: var(--shadow-sm); cursor: pointer; }
.qn-buybar__btn:active { background: var(--brand-hover); }
@media (max-width: 767px) {
  .qn-buybar { display: flex; }
  body.qn-buybar-open { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Toasts - qn-theme.js re-homes stock action alerts here */
.qn-toasts { position: fixed; right: var(--s6); bottom: var(--s6); z-index: 1500;
  display: flex; flex-direction: column; gap: var(--s3);
  width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.qn-toast { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4) var(--s5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); color: var(--ink); font-size: var(--fs-sm); line-height: 1.5;
  cursor: pointer; pointer-events: auto;
  opacity: 0; transform: translateY(10px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.qn-toast.is-in { opacity: 1; transform: none; }
.qn-toast.is-out { opacity: 0; transform: translateY(6px); }
.qn-toast__icon .fa { font-size: 16px; margin-top: 2px; }
.qn-toast--success .qn-toast__icon .fa { color: var(--success); }
.qn-toast--danger .qn-toast__icon .fa { color: var(--sale); }
.qn-toast__body { min-width: 0; flex: 1 1 auto; }
.qn-toast__body a { font-weight: 700; }
.qn-toast__close { flex: 0 0 auto; margin: -2px -4px 0 0; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted);
  font-size: 14px; line-height: 1; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.qn-toast__close:hover { background: var(--line); color: var(--ink); }
@media (max-width: 767px) {
  /* bottom-center, clear of the sticky buy bar zone */
  .qn-toasts { left: var(--s4); right: var(--s4); width: auto;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* Cart pill pulse on total change (qn-theme.js toggles the class once) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes qn-cart-pulse { 40% { transform: scale(1.09); } }
  #cart > .btn.qn-cart-pulse { animation: qn-cart-pulse .25s var(--ease); }
  .qn-fly { position: fixed; z-index: 1200; border-radius: 50%; object-fit: cover; pointer-events: none;
    border: 2px solid var(--accent); box-shadow: var(--shadow-lg); background: var(--surface);
    transition: transform .7s cubic-bezier(.5,.05,.6,1), opacity .7s ease; will-change: transform; }
}

/* Recently viewed strip (product page, filled by qn-theme.js) */
.qn-recent { margin-top: var(--s9); }
.qn-recent__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); }
.qn-recent__card { display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.qn-recent__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); color: var(--ink); }
.qn-recent__card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--skel-base); }
.qn-recent__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; min-height: 2.7em; margin: var(--s3) var(--s3) 2px; }
.qn-recent__price { display: block; font-family: var(--font-sans); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); margin: 0 var(--s3) var(--s3); }
@media (max-width: 767px) {
  .qn-recent__row { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: var(--s2); }
  .qn-recent__card { flex: 0 0 150px; scroll-snap-align: start; }
}

/* Scroll reveal - hidden state only when qn-theme.js ran (html.qn-js) and
   motion is welcome; everyone else sees content immediately */
@media (prefers-reduced-motion: no-preference) {
  .qn-js .qn-reveal { opacity: 0; transform: translateY(14px);
    transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .qn-js .qn-reveal.is-in { opacity: 1; transform: none; }
}

/* Back to top - quiet, bottom-left */
.qn-top { position: fixed; left: var(--s5); bottom: var(--s5); z-index: 800; width: 44px; height: 44px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-soft); box-shadow: var(--shadow-sm); cursor: pointer; font-size: 18px;
  display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s, color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.qn-top.is-show { opacity: 1; visibility: visible; transform: none; }
.qn-top:hover { color: var(--accent); border-color: var(--accent); }
/* Installed-app back, stacked one button-height above back-to-top so that one
   keeps the corner the thumb already knows. Only ever created in standalone. */
.qn-top--back { bottom: calc(var(--s5) + 52px); }
@media (max-width: 767px) {
  body.qn-buybar-open .qn-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.qn-buybar-open .qn-top--back { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}

/* Cross-document view transitions - progressive, inert where unsupported */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}

/* ---- Motion / responsive ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } .product-thumb .image img { opacity:1 !important; } }
@media (max-width: 991px) {
  #menu .dropdown-menu { min-width: 0; }
  /* Rail column sits after the steps in DOM, so it naturally drops below them. */
  .qn-co-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  header .row { flex-wrap: wrap; gap: var(--s4); }
  header .col-sm-4, header .col-sm-5, header .col-sm-3 { width: 100%; float: none; }
  #logo { text-align: center; }
  /* Theme switch excluded: it is a fixed 48x24 track (min-height would square it
     into a circle); its 44px tap target comes from the ::after hit extension. */
  #top a, #top button:not(#qn-theme-toggle), #top .btn-link, #top-links a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--s2); }
  #product-product h2 { font-size: var(--fs-2xl); }
  #column-left { padding-right: 0; }
  /* minmax(0,1fr), not 1fr: auto min-size lets the gallery image force overflow */
  .qn-product { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .qn-product__gallery { position: static; }

  /* Listing pages on phones: the header chrome ate ~340px before the first product and cards
     were only ~170px wide. Tighten the side gutters + vertical rhythm so previews are larger
     (edge-to-edge like eBay). Selectors carry the #product-* / .qn-listing ancestor so they
     win over each listing twig's inline styles. */
  #product-category.container, #product-search.container, #product-special.container,
  #product-catalog.container, #product-manufacturer.container { padding-left: 10px; padding-right: 10px; }
  /* The 10px container gutter above is narrower than bootstrap's -15px row margin,
     which left a 5px horizontal rubber-band on phones - match the row to it. */
  #product-category > .row, #product-search > .row, #product-special > .row,
  #product-catalog > .row, #product-manufacturer > .row { margin-left: -10px; margin-right: -10px; }
  #product-category > .breadcrumb, #product-search > .breadcrumb, #product-special > .breadcrumb,
  #product-catalog > .breadcrumb, #product-manufacturer > .breadcrumb { padding: var(--s3) 0; margin-bottom: var(--s3); }
  .qn-listing .qn-listing__head { margin-bottom: var(--s4); }
  .qn-listing .qn-toolbar { padding: var(--s3) 0; margin-bottom: var(--s5); }
  .qn-listing .row:has(> .product-layout) { margin-left: -5px; margin-right: -5px; }
  .qn-listing .row > [class*="product-layout"] { padding-left: 5px; padding-right: 5px; }

  /* Two-up on a 390px phone leaves ~165px of card. The lever is type size, not layout: shrink
     the card's own scale a step and everything that was fighting for room - brand, title,
     description - fits without dropping any of it. The eyebrow deliberately stays on one line
     and ellipsises; wrapping it turns three words of uppercase into the loudest thing on the
     card, which is the opposite of what an eyebrow is for. */
  .product-thumb .caption { padding: var(--s4) var(--s4) var(--s2); }
  .product-thumb .caption h4 { font-size: var(--fs-sm); }
  .product-thumb .caption p:not(.price) { font-size: 0.8125rem; line-height: 1.45; margin-bottom: var(--s2); }
  /* Quietest text on the card by a clear step. Uppercase, bold and tracked, so it stays legible
     well below body size, and the bigger gap from the 14px title sharpens the hierarchy. */
  .product-thumb .qn-eyebrow .qn-brand { font-size: 0.625rem; letter-spacing: .04em; }
  .product-thumb .qn-cond { font-size: 0.5625rem; letter-spacing: .03em; }
  /* One line. At this size nearly every brand fits beside its condition; the dot separator cost
     ~19px of a 141px row, so it gives way to a narrow gap. When something still has to give it
     is the condition, never the brand: "PRE-OWN..." is still readable and repeats down the whole
     column, where a cut brand ("LO...") destroys the one word that sells the piece. */
  .product-thumb .qn-eyebrow .qn-brand + .qn-cond::before { display: none; }
  .product-thumb .qn-eyebrow .qn-brand { flex: 0 0 auto; max-width: 68%; }
  .product-thumb .qn-eyebrow .qn-cond { flex: 0 1 auto; min-width: 0; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; }
  .product-thumb .price { padding: 0 var(--s4) var(--s4); font-size: var(--fs-base); }
  .product-thumb .button-group button, .product-thumb .button-group .qn-card-offer { font-size: var(--fs-xs); }
}
@media (max-width: 575px) {
  .qn-trust { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Faceted filter UI: left rail, custom checkboxes, active chips, mobile drawer.
   Colours come only from tokens, so light/dark are automatic. Motion rides the
   global prefers-reduced-motion clamp near the top of this file.
   ========================================================================== */

/* ---- Left rail (premium filter card) ------------------------------------- */
.qn-rail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); margin-bottom: var(--s6); overflow: hidden; }
.qn-rail__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s5) var(--s5) var(--s3); }
.qn-rail__title { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.qn-rail__clear { background: none; border: 0; padding: 0; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.qn-rail__clear:hover { color: var(--accent-hover); text-decoration: underline; }

.qn-rail__group { border-top: 1px solid var(--line); }
.qn-rail__group:first-of-type { border-top: 0; }
.qn-rail__grouphd { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; background: none; border: 0; padding: var(--s4) var(--s5); cursor: pointer; text-align: left; color: var(--ink); }
.qn-rail__grouplabel { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.qn-rail__chev { color: var(--muted); font-size: var(--fs-base); transition: transform var(--dur) var(--ease); }
.qn-rail__group.is-collapsed .qn-rail__chev { transform: rotate(-90deg); }
.qn-rail__body { padding: 0 var(--s5) var(--s5); }
.qn-rail__group.is-collapsed .qn-rail__body { display: none; }

.qn-rail__opts { display: flex; flex-direction: column; gap: 2px; }
.qn-rail__opt { display: flex; align-items: center; gap: var(--s3); margin: 0; padding: var(--s2) 0; cursor: pointer; color: var(--ink-soft); font-size: var(--fs-base); font-weight: 500; line-height: 1.3; }
.qn-rail__opt--extra.is-hidden { display: none; }
.qn-rail__check { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.qn-rail__box { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--line-form); border-radius: 6px; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
/* the tick rides the accent fill, which is dark in light theme and light in dark
   theme - --surface is the only token that inverts with it */
.qn-rail__box::after { content: ""; width: 5px; height: 10px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur) var(--ease); margin-top: -2px; }
.qn-rail__check:checked + .qn-rail__box { background: var(--accent); border-color: var(--accent); }
.qn-rail__check:checked + .qn-rail__box::after { transform: rotate(45deg) scale(1); }
.qn-rail__check:focus-visible + .qn-rail__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.qn-rail__opt:hover .qn-rail__box { border-color: var(--accent); }
.qn-rail__optname { flex: 1 1 auto; }
.qn-rail__count { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-2); }
.qn-rail__count:empty { display: none; }
/* zero-count, unselected: muted + inert */
.qn-rail__opt.is-empty { opacity: .42; cursor: default; }
.qn-rail__opt.is-empty:hover .qn-rail__box { border-color: var(--line-form); }

.qn-rail__more { background: none; border: 0; padding: var(--s2) 0 0; margin-top: var(--s2); color: var(--accent); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.qn-rail__more:hover { color: var(--accent-hover); text-decoration: underline; }

.qn-rail__prices { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.qn-rail__price.form-control { flex: 1 1 0; width: auto; min-width: 0; height: 42px; }
.qn-rail__dash { color: var(--muted); flex: 0 0 auto; }

.qn-rail__foot { padding: 0 var(--s5) var(--s5); }
.qn-rail__apply { width: 100%; }
/* JS hides the no-JS submit affordance (html gets .js before first paint) */
html.js .qn-rail__foot { display: none; }

.qn-rail--inline { margin-bottom: var(--s6); }
/* Fallback rail renders in #content, then JS relocates it into #column-left / the
   drawer. Hide it only while JS is present-and-pending so no-JS still shows it. */
html.js .qn-rail--pending { display: none; }

/* NOT sticky: the rail shares column_left with the category-list module, and a
   sticky rail slides down over it while scrolling (owner-reported overlap). */

/* ---- Active-filter chips (above the grid) -------------------------------- */
.qn-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s6); }
.qn-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 34px; padding: 4px 6px 4px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: all var(--dur) var(--ease); }
.qn-chip > span { line-height: 1.2; }
.qn-chip .fa-times { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 11px; color: var(--ink-soft); }
.qn-chip:hover { border-color: var(--accent); }
.qn-chip:hover .fa-times { background: var(--accent); color: var(--brand-ink); }
.qn-chip--clear { padding: 4px 14px; background: none; color: var(--accent); border-color: transparent; }
.qn-chip--clear:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--accent-hover); }

/* ---- Toolbar: mobile Filters button + hide-on-mobile --------------------- */
.qn-toolbar__filters { display: none; align-items: center; gap: var(--s2); height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
.qn-toolbar__filters:hover { border-color: var(--accent); color: var(--accent); }
.qn-toolbar__filters .fa-sliders { font-size: var(--fs-md); }
.qn-filters-btn__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 700; }

@media (max-width: 767px) {
  .qn-hide-mobile { display: none !important; }
  .qn-toolbar__filters { display: inline-flex; order: 0; }
  .qn-toolbar__group--left { order: 0; flex: 0 0 auto; gap: var(--s2); }
  .qn-toolbar__group--right { order: 1; }
  .qn-toolbar__view { order: 2; }
}

/* ---- Mobile off-canvas drawer -------------------------------------------- */
html.qn-fdrawer-lock { overflow: hidden; }
.qn-fdrawer { position: fixed; inset: 0; z-index: 1200; }
.qn-fdrawer[hidden] { display: none !important; }
.qn-fdrawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .26s var(--ease); }
.qn-fdrawer.is-open .qn-fdrawer__backdrop { opacity: 1; }
.qn-fdrawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(88vw, 380px); background: var(--ground); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s var(--ease); will-change: transform; }
.qn-fdrawer.is-open .qn-fdrawer__panel { transform: translateX(0); }
.qn-fdrawer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s5); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.qn-fdrawer__title { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 600; }
.qn-fdrawer__close { width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font-size: var(--fs-md); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.qn-fdrawer__close:hover { background: var(--surface); color: var(--accent); }
.qn-fdrawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--s4) var(--s5); }
/* the rail sits flat inside the drawer (its card chrome would double up) */
.qn-fdrawer__body .qn-rail { position: static; max-height: none; border: 0; box-shadow: none; background: none; margin: 0; overflow: visible; }
/* the drawer top bar already says Filters - the rail's own head would duplicate it */
.qn-fdrawer__body .qn-rail__head { display: none; }
.qn-fdrawer__body .qn-rail__grouphd { padding-left: 0; padding-right: 0; }
.qn-fdrawer__body .qn-rail__body { padding-left: 0; padding-right: 0; }
.qn-fdrawer__foot { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); background: var(--ground); }
.qn-fdrawer__clear { flex: 0 0 auto; background: none; border: 0; padding: var(--s2) var(--s3); color: var(--accent); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.qn-fdrawer__clear:hover { color: var(--accent-hover); text-decoration: underline; }
.qn-fdrawer__cta { flex: 1 1 auto; }

@media (min-width: 768px) { #qn-fdrawer { display: none; } }

/* ---- Grid swap skeleton state -------------------------------------------- */
#qn-grid-swap { position: relative; }
#qn-grid-swap.is-swapping { pointer-events: none; }
#qn-grid-swap.is-swapping > .row { opacity: .45; transition: opacity var(--dur) var(--ease); }
#qn-grid-swap.is-swapping::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%; animation: qn-lb-shimmer 1s linear infinite; }

/* ---------- Product reviews tab -------------------------------------------------
   The list markup is injected into #review by AJAX, so its styling cannot live in the
   fragment (pagination would paste a second copy) nor in product.twig, which OCMOD
   shadows - a stale shadow left the reviews rendering as bare bullets. The stylesheet
   is neither shadowed nor duplicated, so it is the only correct home. */
#tab-review .qn-rvl { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s4); }
#tab-review .qn-rvl__item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); }
#tab-review .qn-rvl__head { display: flex; align-items: baseline; gap: var(--s2) var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
#tab-review .qn-rvl__author { font-weight: 600; color: var(--ink); }
#tab-review .qn-rvl__date { color: var(--muted); font-size: var(--fs-xs); margin-left: auto; }
#tab-review .qn-rvl__badge { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-xs); font-weight: 600; color: var(--success); border: 1px solid currentColor; border-radius: var(--r-pill); padding: 1px var(--s2); }
#tab-review .qn-rvl__stars { display: inline-flex; gap: 2px; margin-bottom: var(--s2); }
#tab-review .qn-rvl__stars .fa-star { color: var(--star); }
#tab-review .qn-rvl__stars .fa-star-o { color: var(--line-strong); }
#tab-review .qn-rvl__text { margin: 0; color: var(--ink-soft); line-height: 1.7; }
#tab-review .qn-rvl__photos { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
#tab-review .qn-rvl__photos img { width: 68px; height: 68px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); display: block; }
#tab-review .qn-rvl__scores { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
#tab-review .qn-rvl__scores li { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-xs); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px var(--s3); }
#tab-review .qn-rvl__scores span { color: var(--muted); }
#tab-review .qn-rvl__scores b { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
#tab-review .qn-rvl__scores b .fa { color: var(--star); font-size: 10px; }
#tab-review .qn-rvl__reply { margin-top: var(--s3); border-left: 3px solid var(--brand); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--s3) var(--s4); }
#tab-review .qn-rvl__reply-head { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); margin-bottom: var(--s1); }
#tab-review .qn-rvl__reply-head .fa { color: var(--accent); margin-right: var(--s1); }
#tab-review .qn-rvl__reply-head span { color: var(--muted); font-weight: 400; }
#tab-review .qn-rvl__reply-text { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.65; }
#tab-review .qn-rvl-empty { color: var(--muted); margin: 0 0 var(--s6); }

/* Rating input: real radios kept for keyboard and screen readers, painted as stars. */
#tab-review .qn-rvf__stars { display: inline-flex; flex-direction: row-reverse; gap: var(--s1); }
#tab-review .qn-rvf__stars input { position: absolute; opacity: 0; width: 0; height: 0; }
#tab-review .qn-rvf__stars label { cursor: pointer; font-size: 26px; line-height: 1; color: var(--line-strong); margin: 0; transition: color var(--dur) var(--ease); }
#tab-review .qn-rvf__stars label:hover,
#tab-review .qn-rvf__stars label:hover ~ label,
#tab-review .qn-rvf__stars input:checked ~ label { color: var(--star); }
#tab-review .qn-rvf__stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#tab-review .qn-rv-locked { background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: var(--s5); color: var(--ink-soft); margin: 0; }