/* ---------- 1. Tokens ----------

   TWO THEMES, one set of names.

   The five supplied swatches are fixed. Everything else is a ROLE that points
   at one of them, and only the roles change between themes — so no component
   below this block ever needs to know which theme is active.

   Three roles do the heavy lifting:
     --stroke      the hue every hairline, tint and subtle fill mixes from
     --invert      background of inverted controls (primary button, orb, badge)
     --invert-ink  text sitting on --invert

   Light is the default. Dark applies when the visitor's OS asks for it, and an
   explicit [data-theme] choice beats both.
   ------------------------------------------------------------------------- */
:root{
  /* Supplied swatches — identical in both themes */
  --charcoal:#2B2B2B;      /* Charcoal Noir  */
  --iron:#565656;          /* Ironclad Grey  */
  --fog:#848484;           /* Urban Fog      */
  --silver:#B3B3B3;        /* Moonlit Silver */
  --veil:#E0E0E0;          /* Cloud Veil     */
  --brand:#E08A2E;          /* the amber in their own mark */
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E");
  /* Banner grounds. Deep and saturated enough to catch the eye, dark enough
     that they never fight the catalogue below. Each carries its own ink, so
     they read identically in light and dark mode. */
  --ban-ember:#2E1A12;      /* warm brown-red, the amber's own family */
  --ban-forest:#17251F;     /* deep green */
  --ban-slate:#161C26;      /* blue-black */
  --ban-teal:#12252A;       /* deep teal, for the fourth tile */
  --ban-ink:#F2EFEA;        /* text on any of the three */
  --ban-mute:#B9B2A8;

  /* Steps below Charcoal, for dark grounds. Never #000. */
  --pitch:#151515;
  --base:#1B1B1B;
  /* Steps above Cloud Veil, for light grounds. Never #FFF. */
  --mist:#EAEAEA;
  --paper-lt:#F2F2F2;

  --serif:"Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --sans:"Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.55s;
  --t:.85s;
  --t-slow:1.5s;

  /* Retail geometry — the reference is hard-edged. Chips and tags keep the
     pill; panels, cards and buttons do not. */
  --r-xl:3px;
  --r-2xl:3px;
  --r-3xl:4px;
  --r-4xl:4px;
  --r-pill:9999px;

  --wrap:96rem;
  --gut:clamp(1.25rem,4vw,4.5rem);
  --hdr:78px;
}

/* ---- LIGHT (default) --------------------------------------------------- */
/* White is the ground the client asked for. Dark is no longer the base: it
   applies only when the visitor's own OS asks for it, or when they pick it
   from the toggle. The :not() guards keep an explicit choice authoritative
   over the system setting in BOTH directions. */
:root,
:root[data-theme="light"]{
  color-scheme:light;

  --canvas:#FFFFFF;         /* page ground — retail white, like the reference */
  --canvas-deep:#F4F4F4;    /* alternating band, separates rails             */
  --linen:#FFFFFF;          /* card surface                                  */
  --paper:#F7F7F7;          /* raised / hover                                */

  --ink:var(--charcoal);    /* 12.6:1 on white */
  --ink-soft:var(--iron);   /*  7.0:1 on white */
  --ink-mute:#6B6B6B;       /*  5.3:1 on white */

  --stroke:var(--charcoal);
  --invert:var(--charcoal);
  --invert-ink:#FFFFFF;
  --invert-hi:var(--iron);
  --invert-lo:var(--iron);
  --accent:var(--iron);
  --ok:var(--iron);
  --hatch-a:#F2F2F2;
  --hatch-b:#E6E6E6;

  --rule:#DDDDDD;           /* the hairline that carries a dense retail grid */
  --bar:var(--charcoal);    /* full-width category nav ground                */
  --bar-ink:#FFFFFF;
  --util:#F4F4F4;           /* thin utility strip above the header           */

  --sand:var(--silver);
  --sand-soft:var(--veil);
  --gold:var(--iron);
  --gold-deep:var(--charcoal);
  --sage:var(--fog);
  --sage-deep:var(--iron);
  --ember:var(--iron);

  --shadow-soft:0 1px 3px rgba(43,43,43,.10);
  --shadow-lift:0 6px 20px rgba(43,43,43,.12);
  --shadow-panel:0 28px 80px rgba(43,43,43,.20);
  --shadow-gold:0 8px 24px rgba(86,86,86,.20);
}

/* ---- DARK (only when the visitor asks for it) --------------------------
   This used to follow prefers-color-scheme, so a phone set to dark mode got a
   dark shop. The client asked for the bright one to be what everybody sees,
   which is also what the reference retailer does — a white ground is how a
   catalogue of black cameras reads.

   Dark is still here, and the header toggle still switches to it. It is now a
   choice the visitor makes rather than one their operating system makes for
   them, and the choice is remembered. */
:root[data-theme="dark"]{
    color-scheme:dark;
  
    --canvas:var(--base);
    --canvas-deep:var(--pitch);
    --linen:#242424;
    --paper:#2E2E2E;
  
    --ink:var(--veil);
    --ink-soft:var(--silver);
    --ink-mute:#949494;
  
    --stroke:var(--veil);
    --invert:var(--veil);
    --invert-ink:var(--charcoal);
    --invert-hi:#F2F2F2;
    --invert-lo:var(--silver);
    --accent:var(--veil);
    --ok:var(--silver);
    --hatch-a:#242424;
    --hatch-b:#2C2C2C;
  
    --rule:#3A3A3A;
    --bar:#111111;
    --bar-ink:var(--veil);
    --util:#141414;
  
    --sand:var(--iron);
    --sand-soft:var(--charcoal);
    --gold:var(--silver);
    --gold-deep:var(--veil);
    --sage:var(--silver);
    --sage-deep:var(--veil);
    --ember:var(--fog);
  
    --shadow-soft:0 6px 24px rgba(0,0,0,.30);
    --shadow-lift:0 18px 48px rgba(0,0,0,.42);
    --shadow-panel:0 28px 80px rgba(0,0,0,.62);
    --shadow-gold:0 12px 34px rgba(0,0,0,.45);
}
:root[data-theme="dark"]{
  color-scheme:dark;

  --canvas:var(--base);
  --canvas-deep:var(--pitch);
  --linen:#242424;
  --paper:#2E2E2E;

  --ink:var(--veil);
  --ink-soft:var(--silver);
  --ink-mute:#949494;

  --stroke:var(--veil);
  --invert:var(--veil);
  --invert-ink:var(--charcoal);
  --invert-hi:#F2F2F2;
  --invert-lo:var(--silver);
  --accent:var(--veil);
  --ok:var(--silver);
  --hatch-a:#242424;
  --hatch-b:#2C2C2C;

  --rule:#3A3A3A;
  --bar:#111111;
  --bar-ink:var(--veil);
  --util:#141414;

  --sand:var(--iron);
  --sand-soft:var(--charcoal);
  --gold:var(--silver);
  --gold-deep:var(--veil);
  --sage:var(--silver);
  --sage-deep:var(--veil);
  --ember:var(--fog);

  --shadow-soft:0 6px 24px rgba(0,0,0,.30);
  --shadow-lift:0 18px 48px rgba(0,0,0,.42);
  --shadow-panel:0 28px 80px rgba(0,0,0,.62);
  --shadow-gold:0 12px 34px rgba(0,0,0,.45);
}

/* The page eases between themes rather than snapping — but ONLY on an actual
   switch. Without the .theme-ready gate these transitions also run on first
   paint, so every heading and price visibly fades up from the wrong colour as
   the page loads. The class is added one frame after load. */
html.theme-ready body,
html.theme-ready .hdr::before,
html.theme-ready .pcard,   html.theme-ready .cat,
html.theme-ready .surface, html.theme-ready .drawer,
html.theme-ready .fope,    html.theme-ready .modal__box,
html.theme-ready .summary, html.theme-ready .kit,
html.theme-ready .wopt,    html.theme-ready .specs,
html.theme-ready .acc,     html.theme-ready .searchbox,
html.theme-ready .trust,   html.theme-ready .ftr,
html.theme-ready .orb,     html.theme-ready .btn,
html.theme-ready .tag,     html.theme-ready .chip{
  transition:background-color var(--t) var(--ease),
             border-color var(--t) var(--ease),
             color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 1.5rem)}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* `clip`, not `hidden`: `hidden` turns the body into a scroll container of
     its own, which is how a phone ends up with two nested scrollers handing
     momentum to each other. `clip` just clips. */
  overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--invert);color:var(--invert-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Switzer throughout — display sizes take a light weight and negative
   tracking so they still read as editorial without a serif. */
/* Headings carry the wordmark's weight — bold, tight, no light display cut. */
h1,h2,h3,h4{
  margin:0;
  font-family:var(--sans);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.04em;
}

/* ---------- 3. Type ---------- */
.d1{font-size:clamp(2.9rem,7.6vw,6.6rem)}
.d2{font-size:clamp(2.2rem,4.8vw,4rem)}
.d3{font-size:clamp(1.75rem,3vw,2.7rem)}
.d4{font-size:clamp(1.3rem,1.9vw,1.75rem)}
.lede{font-size:clamp(.95rem,1.25vw,1.08rem);color:var(--ink-soft);max-width:60ch;line-height:1.75}
.small{font-size:.8125rem}
.eyebrow{
  font-family:var(--sans);font-size:.6875rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);
}
.muted{color:var(--ink-mute)}
.soft{color:var(--ink-soft)}
.price,.num{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(4rem,9vw,8.5rem)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(1.75rem,4vw,3.25rem);flex-wrap:wrap}
.section-head p{margin-top:.8rem}
.hairline{height:1px;border:0;background:color-mix(in srgb,var(--stroke) 14%,transparent)}
.divider-soft{
  height:1px;border:0;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--stroke) 20%,transparent),transparent);
}

/* ---------- 5. Surfaces ---------- */
.surface{
  background:var(--linen);
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  border-radius:var(--r-3xl);
  box-shadow:var(--shadow-soft);
}
.glass{
  background:color-mix(in srgb,var(--paper) 76%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--silver) 12%,transparent);
  border-radius:var(--r-3xl);
  box-shadow:var(--shadow-soft);
}
.glass-gold{
  background:color-mix(in srgb,var(--stroke) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--stroke) 26%,transparent);
  border-radius:var(--r-2xl);
}

/* ---------- 6. Motion ---------- */
[data-reveal]{
  opacity:0;transform:translate3d(0,46px,0);
  transition:opacity var(--t-slow) var(--ease) var(--d,0s),transform var(--t-slow) var(--ease) var(--d,0s);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none}

.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask>span{
  display:block;transform:translate3d(0,110%,0);
  transition:transform 1.75s var(--ease) var(--d,0s);will-change:transform;
}
.is-in .mask>span,.mask.is-in>span{transform:none}

@keyframes floaty{0%,100%{transform:translate3d(0,-7px,0)}50%{transform:translate3d(0,7px,0)}}
.floaty{animation:floaty 7s ease-in-out infinite}
@keyframes pulse-ring{0%{transform:scale(.85);opacity:.5}70%,100%{transform:scale(1.55);opacity:0}}
@keyframes bub-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes sweep{to{background-position:-200% 0}}
@keyframes toast-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px)}}
@keyframes step-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 7. (cursor follower removed at request) ---------- */

/* ---------- 8. Buttons ----------
   Pill, uppercase, wide tracking. Colour and shadow on hover — never scale. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  border-radius:3px;
  padding:.95rem 2rem;
  font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  background:var(--invert);color:var(--invert-ink);
  transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease),color var(--t) var(--ease);
}
@media (hover:hover){.btn:hover{background:var(--invert-hi);box-shadow:var(--shadow-gold)}}
.btn:active{background:var(--invert-lo)}
.btn[disabled]{opacity:.35;pointer-events:none}

.btn--ghost{
  background:color-mix(in srgb,var(--silver) 8%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--stroke) 18%,transparent);
  color:var(--ink);
}
@media (hover:hover){
  .btn--ghost:hover{
    background:color-mix(in srgb,var(--silver) 16%,transparent);
    border-color:color-mix(in srgb,var(--stroke) 42%,transparent);
    box-shadow:none;
  }
}
.btn--block{width:100%}
.btn--lg{padding:1.1rem 2.4rem;font-size:.76rem}
.btn--sm{padding:.7rem 1.4rem;font-size:.66rem}

.magnetic{transition:transform .4s var(--ease),background-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}

/* Add-to-cart morph */
.btn--cart{position:relative;overflow:hidden}
.btn--cart.is-done{background:var(--ok);color:var(--invert-ink)}
.btn--cart .btn-label{transition:opacity .24s var(--ease),transform .24s var(--ease)}
.btn--cart.is-done .btn-label{opacity:0;transform:translateY(-8px)}
.btn--cart .btn-check{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transform:scale(.6);
  transition:opacity .26s var(--ease) .06s,transform .34s var(--ease) .06s;
}
.btn--cart.is-done .btn-check{opacity:1;transform:none}

/* ---------- 9. Header ----------
   Frosted glass lives on ::before so .hdr itself never becomes the
   containing block for its own position:fixed drawer. */
.hdr{
  position:fixed;inset:0 0 auto;z-index:62;height:var(--hdr);
  border-bottom:1px solid transparent;
  transition:height var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.hdr::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:color-mix(in srgb,var(--base) 78%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  opacity:0;transition:opacity var(--t) var(--ease);
}
.hdr.is-stuck::before{opacity:1}
.hdr.is-stuck{border-bottom-color:color-mix(in srgb,var(--stroke) 10%,transparent)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr__inner{
  position:relative;z-index:1;height:100%;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:1.75rem;
}

.logo{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.logo__mark{
  width:38px;height:38px;flex-shrink:0;border-radius:10px;
  object-fit:cover;background:var(--ink);
}
.logo__txt{
  font-size:1.06rem;font-weight:700;
  letter-spacing:-.005em;white-space:nowrap;line-height:1;
}
.logo__txt i{font-style:normal;color:var(--gold-deep)}

.nav{display:flex;align-items:center;gap:.15rem;margin-inline:auto}
.nav__link{
  position:relative;padding:.55rem .9rem;
  font-size:.82rem;color:var(--ink-soft);
  transition:color var(--t-fast) var(--ease);white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.25rem;height:1px;
  background:var(--gold-deep);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-fast) var(--ease);
}
.nav__link:hover,.nav__link[aria-current]{color:var(--ink)}
.nav__link:hover::after,.nav__link[aria-current]::after{transform:scaleX(1)}

.hdr__actions{display:flex;align-items:center;gap:.1rem;flex-shrink:0}
.iconbtn{
  position:relative;display:grid;place-items:center;width:42px;height:42px;
  border-radius:var(--r-pill);color:var(--ink-soft);
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
@media (hover:hover){.iconbtn:hover{color:var(--ink);background:color-mix(in srgb,var(--stroke) 10%,transparent)}}
.iconbtn svg{width:19px;height:19px;stroke-width:1.4}
.badge{
  position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;background:var(--invert);color:var(--invert-ink);
  font-size:.6rem;font-weight:600;border-radius:var(--r-pill);
  transform:scale(0);transition:transform var(--t-fast) var(--ease);
}
.badge.is-on{transform:scale(1)}
.burger{display:none}

/* ---------- 10. Drawer ----------
   Rebuilt as a real menu rather than a list of links: search at the top,
   live stock counts against every category, and a Fope prompt at the bottom.
   Rows stagger in behind the panel so opening it feels unhurried. */
.nav-scrim{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity var(--t) var(--ease),visibility var(--t);
}
.nav-scrim.is-on{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(90vw,25rem);
  background:var(--linen);
  border-left:1px solid color-mix(in srgb,var(--stroke) 10%,transparent);
  transform:translateX(100%);
  transition:transform 1.05s var(--ease),visibility 1.05s;
  display:flex;flex-direction:column;gap:.25rem;
  padding:1.15rem 1.35rem 1.6rem;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:var(--shadow-panel);
  visibility:hidden;
}
.drawer.is-on{transform:none;visibility:visible}

.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1.1rem}

/* Search */
.drawer__search{
  display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.85rem 1.1rem;margin-bottom:1.35rem;
  background:var(--canvas);
  border:1px solid color-mix(in srgb,var(--stroke) 11%,transparent);
  border-radius:var(--r-pill);
  font-size:.86rem;color:var(--ink-mute);text-align:left;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.drawer__search svg{width:16px;height:16px;stroke-width:1.5;flex-shrink:0}
.drawer__search:hover{border-color:color-mix(in srgb,var(--stroke) 30%,transparent);color:var(--ink);background:var(--veil)}

.drawer__nav{display:flex;flex-direction:column}
.drawer__label{
  font-size:.6rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-mute);margin:1.15rem 0 .35rem;
}
.drawer__label:first-child{margin-top:0}

.drawer__link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--stroke) 7%,transparent);
  font-size:1.05rem;font-weight:500;letter-spacing:-.018em;color:var(--ink);
  transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease);
}
.drawer__link:hover{color:var(--iron);padding-left:.35rem}
.drawer__link .drawer__n{
  font-size:.72rem;font-weight:400;color:var(--ink-mute);
  font-variant-numeric:tabular-nums;letter-spacing:0;
}
/* Chevron drawn in CSS so the drawer needs no extra icon markup per row. */
.drawer__arrow{
  width:7px;height:7px;flex-shrink:0;
  border-right:1.5px solid var(--fog);border-bottom:1.5px solid var(--fog);
  transform:rotate(-45deg);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.drawer__link:hover .drawer__arrow{border-color:var(--iron);transform:rotate(-45deg) translate3d(2px,2px,0)}

/* Fope prompt */
.drawer__fope{
  display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;
  margin-top:1.6rem;padding:1rem 1.1rem;
  background:var(--paper);color:var(--ink);
  border:1px solid color-mix(in srgb,var(--stroke) 14%,transparent);
  border-radius:var(--r-2xl);
  transition:background-color var(--t-fast) var(--ease);
}
.drawer__fope:hover{background:var(--iron)}
.drawer__fope-dot{
  position:relative;width:9px;height:9px;border-radius:50%;
  background:var(--accent);flex-shrink:0;
}
.drawer__fope-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--stroke) 45%,transparent);
  animation:pulse-ring 4.2s var(--ease) infinite;
}
.drawer__fope strong{display:block;font-size:.9rem;font-weight:600;letter-spacing:-.01em}
.drawer__fope em{display:block;font-style:normal;font-size:.74rem;color:var(--silver);margin-top:.1rem}

.drawer__foot{
  margin-top:auto;padding-top:1.4rem;
  display:flex;flex-direction:column;gap:.3rem;
  font-size:.78rem;color:var(--ink-mute);
}
.drawer__foot a{color:var(--ink-soft);transition:color var(--t-fast) var(--ease)}
.drawer__foot a:hover{color:var(--ink)}
.drawer__socials{display:flex;gap:.4rem;margin-top:.7rem}
.drawer__socials a{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid color-mix(in srgb,var(--stroke) 14%,transparent);border-radius:50%;
}
.drawer__socials a:hover{border-color:var(--iron)}
.drawer__socials svg{width:14px;height:14px}

/* Contents stagger in once the panel has travelled — set by JS as --i. */
.drawer__search,.drawer__label,.drawer__link,.drawer__fope,.drawer__foot{
  opacity:0;transform:translateX(18px);
}
.drawer.is-on .drawer__search,
.drawer.is-on .drawer__label,
.drawer.is-on .drawer__link,
.drawer.is-on .drawer__fope,
.drawer.is-on .drawer__foot{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease) calc(var(--i,0) * 45ms + .16s),
             transform .8s var(--ease) calc(var(--i,0) * 45ms + .16s);
}

/* ---------- 11. Preloader ---------- */
.preload{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  background:var(--pitch);
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.preload.is-gone{opacity:0;visibility:hidden}
.preload__logo{width:104px;height:104px;border-radius:22px;object-fit:cover;background:var(--ink);margin-inline:auto}
.preload__word{
  margin-top:1.35rem;text-align:center;
  font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-mute);
  opacity:0;animation:fade-up .7s var(--ease) .45s forwards;
}

/* ---------- 12. Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:var(--hdr);overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(21,21,21,.94) 0%,rgba(21,21,21,.78) 44%,rgba(21,21,21,.34) 100%);
}
/* Empty hero slot: a warm lit gradient rather than stock footage of somebody
   else's photographer. */
.hero__bg.is-empty{
  /* The reference: soft blurred grey light drifting over near-black. */
  background:
    radial-gradient(46% 42% at 72% 22%,color-mix(in srgb,var(--fog) 62%,transparent),transparent 66%),
    radial-gradient(52% 46% at 14% 74%,color-mix(in srgb,var(--silver) 40%,transparent),transparent 68%),
    radial-gradient(60% 55% at 88% 88%,color-mix(in srgb,var(--iron) 70%,transparent),transparent 70%),
    linear-gradient(162deg,var(--charcoal) 0%,var(--base) 46%,var(--pitch) 100%);
  filter:blur(0.5px);
}
.hero__bg.is-empty::after{background:none}
.hero__inner{position:relative;z-index:1;width:100%;padding-block:clamp(5rem,12vh,9rem)}
.hero h1{max-width:15ch;margin-block:1.1rem 1.5rem}
.hero .lede{max-width:44ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.hero__scroll{
  position:absolute;left:var(--gut);bottom:2rem;z-index:1;
  display:flex;align-items:center;gap:.75rem;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);
}
.hero__scroll::before{content:"";width:3.25rem;height:1px;background:linear-gradient(90deg,var(--gold-deep),transparent)}

/* ---------- 13. Trust bar ---------- */
.trust{background:var(--canvas-deep);border-block:1px solid color-mix(in srgb,var(--stroke) 9%,transparent)}
.trust__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.trust__cell{
  padding:1.75rem var(--gut);display:flex;gap:.9rem;align-items:flex-start;
  border-right:1px solid color-mix(in srgb,var(--stroke) 7%,transparent);
}
.trust__cell:last-child{border-right:0}
.trust__cell svg{width:20px;height:20px;color:var(--gold-deep);flex-shrink:0;margin-top:3px;stroke-width:1.3}
.trust__cell h3{font-family:var(--sans);font-size:.875rem;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.trust__cell p{font-size:.78rem;color:var(--ink-mute);margin-top:2px}

/* ---------- 14. Product cards ---------- */
.grid-products{
  display:grid;gap:clamp(.9rem,1.8vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,16.5rem),1fr));
}
.pcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--linen);
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  border-radius:var(--r-3xl);overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
@media (hover:hover){
  .pcard:hover{box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--stroke) 34%,transparent)}
}
/* The photograph and the Quick view button share this box, so Quick view
   anchors to the bottom of the PICTURE. Anchored to the card instead, it sat
   on top of the Add to cart row. */
.pcard__top{position:relative}
/* White, not the grey band colour. Every photograph is now re-framed onto a
   white square by tools/normalise_product_images.py, so a grey frame would
   put a visible white box inside a grey one. */
.pcard__media{position:relative;aspect-ratio:1;background:#FFFFFF;overflow:hidden;display:block}
.pcard__media img{
  width:100%;height:100%;object-fit:contain;
  /* The 11% padding that used to be here is now baked into the photographs
     themselves, and consistently — so a lens and a camera body occupy the
     same share of their frames instead of whatever margin their source
     happened to carry. Padding on top of that would shrink them twice. */
  padding:2%;
  transition:transform 1.6s var(--ease);
}
/* 79 products still carry a studio shot on a dark ground rather than a cut-out
   on white. Centred with a margin, those read as a small dark box inside a
   white frame, and a grid of them looks ragged. Filling the frame makes each
   one a deliberate tile — not the reference retailer's look, but a tidy one,
   and it holds until Camera Hub's own photographs replace them. */
.pcard__media--fill{background:var(--canvas-deep)}
.pcard__media--fill img{object-fit:cover;padding:0}
@media (hover:hover){.pcard:hover .pcard__media img{transform:scale(1.06)}}
.pcard__body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;flex:1;gap:.35rem}
.pcard__brand{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.pcard__name{
  font-family:var(--sans);font-size:.9rem;font-weight:400;line-height:1.45;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard__excerpt{display:none;font-size:.8rem;color:var(--ink-mute);line-height:1.6;margin-top:.25rem}
.pcard__foot{margin-top:auto;padding-top:.6rem;display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.pcard .price{font-size:.98rem;font-weight:600;letter-spacing:-.02em}
.pcard__cur{font-size:.64rem;color:var(--ink-mute);margin-right:.25rem}
/* Quick view sits in the TOP-RIGHT corner of the photograph, opposite the
   stock chip and matching its weight — a small round control, not a bar across
   the bottom of the picture. It used to be a full-width pill that covered the
   product; before that it covered the Add to cart button.

   An eye, with the words appearing on hover on a pointer device. On a phone
   there is no hover to reveal anything, so it is hidden there entirely and the
   whole card is already a link to the same page. */
.pcard__quick{
  position:absolute;top:.6rem;right:.6rem;z-index:3;
  display:inline-flex;align-items:center;gap:0;
  height:30px;padding:0 7px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--canvas) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,var(--stroke) 22%,transparent);
  color:var(--ink);
  font-size:.66rem;font-weight:600;line-height:1;white-space:nowrap;
  opacity:0;transform:translateY(-4px);
  transition:opacity .2s var(--ease-soft),transform .2s var(--ease-soft),
             gap .2s var(--ease-soft),padding .2s var(--ease-soft),
             background-color .2s var(--ease-soft),color .2s var(--ease-soft);
}
.pcard__quick svg{width:16px;height:16px;flex-shrink:0}
/* The label is collapsed to nothing until the control itself is hovered, so
   the resting state is a 30px circle and the grid stays quiet. */
.pcard__quick span{
  max-width:0;overflow:hidden;
  transition:max-width .22s var(--ease-soft);
}
@media (hover:hover){
  .pcard:hover .pcard__quick{opacity:1;transform:none}
  .pcard__quick:hover{
    background:var(--ink);color:var(--canvas);border-color:var(--ink);
    gap:5px;padding:0 10px 0 8px;
  }
  .pcard__quick:hover span{max-width:6rem}
}
/* Keyboard users get the same thing the mouse gets. */
.pcard__quick:focus-visible{opacity:1;transform:none;gap:5px;padding:0 10px 0 8px}
.pcard__quick:focus-visible span{max-width:6rem}
@media (hover:none){
  /* touch has no hover to reveal it, and left visible it covers the product */
  .pcard__quick{display:none}
  .grid-products.is-list .pcard__quick{display:inline-flex}
}

/* Photo-pending slot — never a stock photo standing in for real gear */
.pcard__ph{
  position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,var(--canvas-deep) 0 10px,var(--sand-soft) 10px 20px);
}
.pcard__ph::after{
  content:"PHOTO PENDING";
  font-size:.55rem;letter-spacing:.2em;color:var(--ink-mute);
}

/* ---------- 15. Tags ---------- */
.tags{position:absolute;top:.75rem;left:.75rem;z-index:2;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.tag{
  display:inline-flex;align-items:center;gap:.4rem;
  border-radius:var(--r-pill);padding:.34rem .8rem;
  font-size:.66rem;line-height:1.2;
  background:color-mix(in srgb,var(--stroke) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--stroke) 16%,transparent);
  color:var(--ink-soft);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
@media (hover:hover){.tag:hover{border-color:color-mix(in srgb,var(--stroke) 45%,transparent);color:var(--ink)}}
.tag--stock{
  background:color-mix(in srgb,var(--linen) 92%,transparent);
  color:var(--sage-deep);border-color:color-mix(in srgb,var(--stroke) 26%,transparent);
}
.tag--flat{
  background:color-mix(in srgb,var(--stroke) 11%,transparent);
  border-color:color-mix(in srgb,var(--stroke) 32%,transparent);color:var(--gold-deep);
}

/* ---------- 16. Category tiles ---------- */
.cats{display:grid;gap:clamp(.9rem,1.6vw,1.25rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.cat{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:20rem;padding:1.6rem;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  border-radius:var(--r-3xl);background:var(--linen);
  box-shadow:var(--shadow-soft);
  transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
@media (hover:hover){
  .cat:hover{box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--stroke) 36%,transparent)}
}
.cat__img{position:absolute;inset:0;z-index:0;background:var(--canvas-deep)}
.cat__img img{width:100%;height:100%;object-fit:contain;padding:14%;transition:transform 1.9s var(--ease)}
@media (hover:hover){.cat:hover .cat__img img{transform:scale(1.05)}}
.cat__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--linen) 18%,color-mix(in srgb,var(--linen) 60%,transparent) 48%,transparent 78%);
}
.cat__body{position:relative;z-index:1}
.cat h3{font-size:1.5rem;margin-bottom:.2rem}
.cat__count{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.cat__subs{
  margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.35rem;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height var(--t) var(--ease),opacity var(--t) var(--ease);
}
.cat:hover .cat__subs,.cat:focus-within .cat__subs{max-height:8rem;opacity:1}
.cat__sub{
  padding:.22rem .65rem;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--stroke) 20%,transparent);
  font-size:.68rem;color:var(--ink-soft);
}

/* ---------- 17. Shop ---------- */
.shop{display:grid;grid-template-columns:16.5rem 1fr;gap:clamp(1.5rem,3.4vw,3.25rem);align-items:start}
.filters{position:sticky;top:calc(var(--hdr) + 1.25rem);max-height:calc(100svh - var(--hdr) - 2.5rem);overflow-y:auto;padding-right:.5rem}
.fgroup{border-bottom:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);padding-block:1rem}
.fgroup:first-child{padding-top:0}
.fgroup__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
.fgroup__head svg{width:13px;height:13px;transition:transform var(--t-fast) var(--ease);color:var(--ink-mute)}
.fgroup.is-open .fgroup__head svg{transform:rotate(180deg)}
.fgroup__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t) var(--ease)}
.fgroup.is-open .fgroup__body{grid-template-rows:1fr}
.fgroup__inner{overflow:hidden}
.fgroup.is-open .fgroup__inner{padding-top:.8rem}
.check{display:flex;align-items:center;gap:.6rem;padding:.35rem 0;font-size:.83rem;color:var(--ink-soft);cursor:pointer;transition:color var(--t-fast) var(--ease)}
.check:hover{color:var(--ink)}
/* A consent line is a sentence, not a chip label — it wraps, and a wrapped
   sentence next to a centred box puts the box in the middle of the paragraph. */
.check--wrap{align-items:flex-start;line-height:1.45}
.check--wrap input{margin-top:.15rem;flex-shrink:0}
.check input{
  appearance:none;width:16px;height:16px;flex-shrink:0;
  border:1px solid color-mix(in srgb,var(--stroke) 24%,transparent);border-radius:5px;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.check input[type="radio"]{border-radius:50%}
.check input:checked{
  background:var(--veil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B2B2B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color:var(--invert);
}
.check input[type="radio"]:checked{background-image:none;box-shadow:inset 0 0 0 3.5px var(--linen)}
.check__n{margin-left:auto;font-size:.68rem;color:var(--ink-mute);font-variant-numeric:tabular-nums}

.shop__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.viewtoggle{display:flex;border:1px solid color-mix(in srgb,var(--stroke) 14%,transparent);border-radius:var(--r-pill);overflow:hidden}
.viewtoggle button{padding:.5rem .8rem;color:var(--ink-mute);transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.viewtoggle button[aria-pressed="true"]{background:var(--invert);color:var(--invert-ink)}
.viewtoggle svg{width:15px;height:15px;display:block}
.selectwrap{position:relative}
.selectwrap select{
  appearance:none;padding:.6rem 2.2rem .6rem 1rem;
  background:color-mix(in srgb,var(--silver) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--stroke) 14%,transparent);
  border-radius:var(--r-pill);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
}
.selectwrap::after{
  content:"";position:absolute;right:.9rem;top:50%;width:6px;height:6px;
  border-right:1.4px solid var(--ink-mute);border-bottom:1.4px solid var(--ink-mute);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}

.grid-products.is-list{grid-template-columns:1fr;gap:1rem}
.grid-products.is-list .pcard{flex-direction:row}
.grid-products.is-list .pcard__media{width:min(36%,17rem);aspect-ratio:4/3;flex-shrink:0}
.grid-products.is-list .pcard__body{padding:1.5rem 1.75rem}
.grid-products.is-list .pcard__name{-webkit-line-clamp:2;font-size:1.25rem;font-weight:600;letter-spacing:-.03em;line-height:1.25}
.grid-products.is-list .pcard__excerpt{display:block}
.grid-products.is-list .pcard__quick{position:static;opacity:1;transform:none;margin-top:1rem;width:max-content;padding:.7rem 1.5rem}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;padding:.34rem .8rem;
  background:color-mix(in srgb,var(--stroke) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--stroke) 30%,transparent);
  border-radius:var(--r-pill);font-size:.68rem;color:var(--gold-deep);
}
.chip button{display:grid;place-items:center;width:13px;height:13px;color:inherit;opacity:.7}
.chip button:hover{opacity:1}

/* ---------- 18. PDP ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.75rem,4vw,4rem);align-items:start}
.gallery{position:sticky;top:calc(var(--hdr) + 1.5rem)}
.gallery__main{
  position:relative;aspect-ratio:1;background:var(--canvas-deep);
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  border-radius:var(--r-3xl);overflow:hidden;cursor:zoom-in;
}
.gallery__main img{width:100%;height:100%;object-fit:contain;padding:7%;transition:transform .5s var(--ease),opacity .3s var(--ease)}
.gallery__main.is-zoom img{transform:scale(2.1);cursor:zoom-out;padding:0}
.gallery__thumbs{display:flex;gap:.5rem;margin-top:.7rem;overflow-x:auto;padding-bottom:.25rem}
.gthumb{
  flex:0 0 4.6rem;aspect-ratio:1;background:var(--canvas-deep);
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  border-radius:var(--r-xl);overflow:hidden;opacity:.55;
  transition:border-color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.gthumb img{width:100%;height:100%;object-fit:contain;padding:9%}
.gthumb:hover{opacity:1}
.gthumb[aria-current="true"]{border-color:var(--gold-deep);opacity:1}

.pdp__head h1{margin-block:.5rem 0}
.pdp__price{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-block:1.4rem}
.pdp__price .price{font-size:clamp(2rem,3.4vw,2.8rem);font-weight:700;letter-spacing:-.04em}
.pdp__sec{border-top:1px solid color-mix(in srgb,var(--stroke) 10%,transparent);padding-block:1.5rem}
.pdp__sec h2{
  font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.9rem;
}
.bestfor{display:flex;flex-wrap:wrap;gap:.45rem}
.bestfor span{
  padding:.42rem .9rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--stroke) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--stroke) 16%,transparent);
  font-size:.76rem;color:var(--ink-soft);
}

.specs{
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  border-radius:var(--r-2xl);overflow:hidden;background:var(--linen);
}
.specrow{display:flex;gap:1rem;padding:.8rem 1.1rem;border-bottom:1px solid color-mix(in srgb,var(--stroke) 7%,transparent);font-size:.84rem}
.specrow:last-child{border-bottom:0}
.specrow dt{flex:0 0 40%;color:var(--ink-mute)}
.specrow dd{margin:0;flex:1}

.acc{border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);border-radius:var(--r-2xl);overflow:hidden;background:var(--linen)}
.acc__item{border-bottom:1px solid color-mix(in srgb,var(--stroke) 7%,transparent)}
.acc__item:last-child{border-bottom:0}
.acc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.1rem;text-align:left;font-size:.9rem}
.acc__head svg{width:13px;height:13px;flex-shrink:0;color:var(--gold-deep);transition:transform var(--t-fast) var(--ease)}
.acc__item.is-open .acc__head svg{transform:rotate(180deg)}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t) var(--ease)}
.acc__item.is-open .acc__body{grid-template-rows:1fr}
.acc__inner{overflow:hidden}
.acc__item.is-open .acc__inner>*{padding:0 1.1rem 1.2rem}

.dna__legend{display:grid;gap:.65rem}
.dna__row{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;font-size:.82rem}
.dna__bar{grid-column:1/-1;height:3px;background:color-mix(in srgb,var(--stroke) 16%,transparent);border-radius:2px;overflow:hidden}
.dna__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-deep));transform:scaleX(0);transform-origin:left;transition:transform 2.1s var(--ease) var(--d,0s)}
.is-in .dna__bar i{transform:scaleX(var(--v,0))}

.stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:58;
  background:color-mix(in srgb,var(--linen) 92%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border-top:1px solid color-mix(in srgb,var(--stroke) 10%,transparent);
  transform:translateY(101%);transition:transform var(--t) var(--ease);
}
.stickybuy.is-on{transform:none}
.stickybuy__inner{max-width:var(--wrap);margin-inline:auto;padding:.7rem var(--gut);display:flex;align-items:center;gap:1.1rem}
.stickybuy__name{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stickybuy__price{font-weight:500;margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- 19. Fope (gear consultant) ---------- */
.orb{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:80;
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--invert);
  box-shadow:var(--shadow-panel);
  transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
@media (hover:hover){.orb:hover{background:var(--invert-hi);box-shadow:var(--shadow-gold)}}
.orb::before,.orb::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--stroke) 40%,transparent);
  animation:pulse-ring 5.2s var(--ease) infinite;
}
.orb::after{animation-delay:2.6s}
.orb.is-open::before,.orb.is-open::after{display:none}
.orb svg{width:25px;height:25px;color:var(--invert-ink);position:relative;z-index:1}
.orb img{width:100%;height:100%;border-radius:50%;object-fit:cover;position:relative;z-index:1}

.fope{
  position:fixed;right:1.5rem;bottom:6.2rem;z-index:81;
  width:min(calc(100vw - 3rem),25.5rem);height:min(74svh,40rem);
  display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--linen) 88%,transparent);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--silver) 12%,transparent);
  border-radius:var(--r-3xl);
  box-shadow:var(--shadow-panel);
  opacity:0;visibility:hidden;transform:translateY(16px);transform-origin:bottom right;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
  overflow:hidden;
}
.fope.is-on{opacity:1;visibility:visible;transform:none}
.fope__head{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem;border-bottom:1px solid color-mix(in srgb,var(--stroke) 10%,transparent);flex-shrink:0}
.fope__avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--ink);flex-shrink:0}
.fope__title{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.fope__sub{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.fope__log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.8rem}
.bub{max-width:88%;padding:.7rem .95rem;border-radius:var(--r-2xl);font-size:.85rem;line-height:1.6;animation:bub-in .75s var(--ease) both}
.bub--l{align-self:flex-start;background:var(--linen);border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);border-bottom-left-radius:.4rem}
.bub--u{align-self:flex-end;background:var(--invert);color:var(--invert-ink);border-bottom-right-radius:.4rem}
.bub strong{color:var(--accent);font-weight:700}
.bub--u strong{color:var(--invert-ink)}
.bub a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.bub--u a{color:var(--invert-ink)}
.typing{display:flex;gap:4px;align-self:flex-start;padding:.9rem}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-mute);animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}

.lcard{
  display:flex;gap:.7rem;padding:.55rem;background:var(--linen);
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  border-radius:var(--r-xl);transition:border-color var(--t-fast) var(--ease);
}
.lcard:hover{border-color:color-mix(in srgb,var(--stroke) 40%,transparent)}
.lcard img{width:48px;height:48px;object-fit:contain;background:var(--canvas-deep);border-radius:.5rem;flex-shrink:0}
.lcard__n{font-size:.78rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lcard__p{font-size:.75rem;color:var(--gold-deep);margin-top:.15rem;font-variant-numeric:tabular-nums}

.fope__chips{display:flex;gap:.35rem;padding:0 1.1rem .7rem;flex-wrap:wrap;flex-shrink:0}
.qchip{
  padding:.38rem .8rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--stroke) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--stroke) 18%,transparent);
  font-size:.72rem;color:var(--ink-soft);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.qchip:hover{border-color:color-mix(in srgb,var(--stroke) 45%,transparent);color:var(--ink)}
.fope__note{padding:0 1.1rem .7rem;font-size:.66rem;color:var(--ink-mute);line-height:1.5;flex-shrink:0}
.fope__form{display:flex;gap:.5rem;padding:.85rem 1.1rem;border-top:1px solid color-mix(in srgb,var(--stroke) 10%,transparent);flex-shrink:0}
.fope__form input{
  flex:1;min-width:0;padding:.7rem 1rem;
  background:color-mix(in srgb,var(--paper) 76%,transparent);
  border:1px solid color-mix(in srgb,var(--stroke) 14%,transparent);
  border-radius:var(--r-pill);font-size:.85rem;outline:none;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.fope__form input:focus{background:color-mix(in srgb,var(--paper) 92%,transparent);border-color:color-mix(in srgb,var(--stroke) 45%,transparent)}
.fope__send{
  width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;
  background:var(--invert);color:var(--invert-ink);border-radius:50%;
  transition:background-color var(--t-fast) var(--ease);
}
.fope__send:hover{background:var(--invert-hi)}
.fope__send svg{width:16px;height:16px}

/* ---------- 20. Wizard ---------- */
.wiz{max-width:48rem;margin-inline:auto}
.wiz__bar{display:flex;gap:.4rem;margin-bottom:2.4rem}
.wiz__seg{flex:1;height:2px;background:color-mix(in srgb,var(--stroke) 14%,transparent);overflow:hidden;border-radius:2px}
.wiz__seg i{display:block;height:100%;background:var(--gold-deep);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.wiz__seg.is-done i{transform:scaleX(1)}
.wiz__step{display:none}
.wiz__step.is-on{display:block;animation:step-in .85s var(--ease) both}
.wiz__opts{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));margin-top:1.6rem}
.wopt{
  padding:1.25rem;text-align:left;background:var(--linen);
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  border-radius:var(--r-2xl);box-shadow:var(--shadow-soft);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t) var(--ease);
}
@media (hover:hover){.wopt:hover{border-color:color-mix(in srgb,var(--stroke) 36%,transparent);box-shadow:var(--shadow-lift)}}
.wopt[aria-pressed="true"]{border-color:var(--gold-deep);background:color-mix(in srgb,var(--stroke) 9%,transparent)}
.wopt h3{font-family:var(--sans);font-size:.94rem;font-weight:700;letter-spacing:-.015em}
.wopt p{font-size:.78rem;color:var(--ink-mute);margin-top:.3rem}

.slider{width:100%;margin-block:1.6rem .5rem;appearance:none;height:2px;background:color-mix(in srgb,var(--stroke) 20%,transparent);border-radius:2px}
.slider::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:var(--invert);cursor:grab;box-shadow:0 0 0 6px color-mix(in srgb,var(--stroke) 16%,transparent)}
.slider::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--invert);cursor:grab}
.budgetval{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-.04em;text-align:center;font-variant-numeric:tabular-nums}

.kits{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));margin-top:1.8rem}
.kit{
  display:flex;flex-direction:column;background:var(--linen);
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  border-radius:var(--r-3xl);padding:1.5rem;box-shadow:var(--shadow-soft);
}
.kit--pro{border-color:var(--gold-deep);box-shadow:var(--shadow-lift)}
.kit__tier{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.kit__total{font-size:1.9rem;font-weight:700;letter-spacing:-.035em;margin-block:.4rem .1rem;font-variant-numeric:tabular-nums}
.kit__list{display:grid;gap:.7rem;margin-block:1.1rem;flex:1}
.kit__row{display:flex;gap:.7rem;align-items:center;font-size:.82rem}
.kit__row img{width:40px;height:40px;object-fit:contain;background:var(--canvas-deep);border-radius:.5rem;flex-shrink:0}

/* ---------- 21. Compare ---------- */
.cmp-scroll{overflow-x:auto;border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);border-radius:var(--r-3xl);background:var(--linen)}
.cmp{width:100%;border-collapse:collapse;min-width:44rem}
.cmp th,.cmp td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--stroke) 7%,transparent);font-size:.85rem;vertical-align:top}
.cmp thead th{position:sticky;top:0;background:var(--paper);z-index:1}
.cmp tbody th{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:500;width:11rem}
.cmp td.is-diff{background:color-mix(in srgb,var(--stroke) 10%,transparent);color:var(--gold-deep)}
.cmp .cmp-img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--canvas-deep);border-radius:var(--r-xl);margin-bottom:.6rem;padding:8%}

/* ---------- 22. Cart ---------- */
.cartgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1.5rem,3.4vw,3rem);align-items:start}
.citem{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid color-mix(in srgb,var(--stroke) 9%,transparent)}
.citem img{width:5.5rem;height:5.5rem;object-fit:contain;background:var(--canvas-deep);border-radius:var(--r-xl);flex-shrink:0;padding:.4rem}
.citem__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.qty{display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--stroke) 14%,transparent);border-radius:var(--r-pill);margin-top:auto;width:max-content}
.qty button{width:32px;height:32px;display:grid;place-items:center;color:var(--ink-soft);transition:color var(--t-fast) var(--ease)}
.qty button:hover{color:var(--ink)}
.qty span{min-width:2rem;text-align:center;font-size:.85rem;font-variant-numeric:tabular-nums}
.summary{position:sticky;top:calc(var(--hdr) + 1.25rem);background:var(--linen);border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);border-radius:var(--r-3xl);padding:1.5rem;box-shadow:var(--shadow-soft)}
.srow{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;font-size:.88rem}
.srow--total{border-top:1px solid color-mix(in srgb,var(--stroke) 10%,transparent);margin-top:.5rem;padding-top:1rem;font-size:1.4rem;font-weight:700;letter-spacing:-.03em}
.field{display:block;margin-bottom:1rem}
.field span{display:block;font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.4rem}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1.15rem;
  background:color-mix(in srgb,var(--silver) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--stroke) 14%,transparent);
  border-radius:var(--r-2xl);font-size:.875rem;outline:none;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field textarea{border-radius:var(--r-xl);resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  background:color-mix(in srgb,var(--linen) 92%,transparent);
  border-color:color-mix(in srgb,var(--stroke) 45%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--stroke) 12%,transparent);
}
.pay{display:grid;gap:.5rem}
.payopt{
  display:flex;gap:.8rem;align-items:flex-start;padding:1rem;
  background:color-mix(in srgb,var(--silver) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--stroke) 12%,transparent);
  border-radius:var(--r-2xl);cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.payopt:has(input:checked){border-color:var(--gold-deep);background:color-mix(in srgb,var(--stroke) 7%,transparent)}
.payopt input{margin-top:3px;accent-color:var(--invert);flex-shrink:0}

/* ---------- 23. Modals ---------- */
.modal{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--gut);
  background:rgba(0,0,0,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility var(--t);
}
.modal.is-on{opacity:1;visibility:visible}
.modal__box{
  position:relative;width:min(100%,58rem);max-height:86svh;overflow-y:auto;
  background:var(--linen);border:1px solid color-mix(in srgb,var(--silver) 12%,transparent);
  border-radius:var(--r-4xl);box-shadow:var(--shadow-panel);
  transform:translateY(18px);transition:transform var(--t) var(--ease);
}
.modal.is-on .modal__box{transform:none}
.modal__close{
  position:absolute;top:1.1rem;right:1.1rem;z-index:2;width:38px;height:38px;
  display:grid;place-items:center;background:var(--paper);
  border:1px solid color-mix(in srgb,var(--stroke) 12%,transparent);border-radius:50%;color:var(--ink-soft);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.modal__close:hover{color:var(--ink);border-color:var(--ink)}

.modal--search{place-items:start center;padding-top:12vh}
.searchbox{
  width:min(100%,40rem);background:var(--linen);
  border:1px solid color-mix(in srgb,var(--silver) 12%,transparent);
  border-radius:var(--r-3xl);overflow:hidden;box-shadow:var(--shadow-panel);
  transform:translateY(-14px);transition:transform var(--t) var(--ease);
}
.modal.is-on .searchbox{transform:none}
.searchbox input{width:100%;padding:1.2rem 1.5rem;background:none;border:0;font-size:1.02rem;outline:none}
.sresults{max-height:52svh;overflow-y:auto;border-top:1px solid color-mix(in srgb,var(--stroke) 9%,transparent)}
.sresult{display:flex;gap:.8rem;align-items:center;padding:.7rem 1.2rem;transition:background-color var(--t-fast) var(--ease)}
.sresult:hover,.sresult.is-sel{background:var(--canvas-deep)}
.sresult img{width:42px;height:42px;object-fit:contain;background:var(--canvas-deep);border-radius:.5rem;flex-shrink:0}
.sresult__n{font-size:.86rem;flex:1;min-width:0}
.sresult__p{font-size:.8rem;color:var(--gold-deep);white-space:nowrap;font-variant-numeric:tabular-nums}
.skbd{display:flex;gap:1rem;padding:.7rem 1.2rem;border-top:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);font-size:.62rem;letter-spacing:.1em;color:var(--ink-mute)}
kbd{padding:2px 6px;background:var(--canvas-deep);border:1px solid color-mix(in srgb,var(--stroke) 12%,transparent);border-radius:4px;font-size:.9em}

/* ---------- 24. Toasts ---------- */
.toasts{position:fixed;right:1.5rem;bottom:6.2rem;z-index:85;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:.7rem;padding:.85rem 1.15rem;
  background:color-mix(in srgb,var(--linen) 96%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid color-mix(in srgb,var(--stroke) 10%,transparent);
  border-radius:var(--r-pill);font-size:.83rem;
  box-shadow:var(--shadow-lift);
  animation:toast-in .7s var(--ease) both;
}
.toast.is-out{animation:toast-out .34s var(--ease) forwards}
.toast svg{width:16px;height:16px;color:var(--sage-deep);flex-shrink:0}

/* ---------- 25. Footer ---------- */
.ftr{background:var(--canvas-deep);border-top:1px solid color-mix(in srgb,var(--stroke) 7%,transparent);padding-block:clamp(3rem,6vw,5rem) 1.8rem}
.ftr__grid{display:grid;gap:2.2rem;grid-template-columns:1.5fr repeat(3,1fr);margin-bottom:2.5rem}
.ftr h4{font-family:var(--sans);font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.9rem}
.ftr li{margin-bottom:.5rem}
.ftr a{font-size:.85rem;color:var(--ink-soft);transition:color var(--t-fast) var(--ease)}
.ftr a:hover{color:var(--gold-deep)}
.ftr__bot{display:flex;justify-content:space-between;gap:1.1rem;flex-wrap:wrap;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);font-size:.75rem;color:var(--ink-mute)}
.socials{display:flex;gap:.5rem}
.socials a{
  display:grid;place-items:center;width:36px;height:36px;
  border:1px solid color-mix(in srgb,var(--stroke) 14%,transparent);border-radius:50%;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.socials a:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.socials svg{width:15px;height:15px}

/* ---------- 26. Utilities ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-60px;left:var(--gut);z-index:9999;padding:.8rem 1.4rem;background:var(--invert);color:var(--invert-ink);border-radius:var(--r-pill);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;transition:top var(--t-fast) var(--ease)}
.skip:focus{top:12px}
.empty{text-align:center;padding:4.5rem 1.25rem;color:var(--ink-mute)}
.empty svg{width:42px;height:42px;margin-inline:auto;margin-bottom:1.1rem;color:var(--sand)}
.provenance{
  margin-top:.9rem;padding:.85rem 1.1rem;
  background:color-mix(in srgb,var(--stroke) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--stroke) 22%,transparent);
  border-radius:var(--r-2xl);font-size:.76rem;color:var(--ink-soft);line-height:1.6;
}
.skel{background:var(--linen);border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);border-radius:var(--r-3xl);overflow:hidden}
.skel__media{aspect-ratio:1;background:linear-gradient(90deg,var(--canvas-deep) 25%,var(--sand-soft) 50%,var(--canvas-deep) 75%);background-size:200% 100%;animation:sweep 1.4s infinite linear}

/* ---------- 27. Breakpoints ---------- */
@media (max-width:1200px){
  .shop{grid-template-columns:14rem 1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  /* minmax(0,1fr), not 1fr. A `1fr` track still refuses to go below its
     contents' min-content width, and the thumbnail strip's min-content width
     is the whole strip laid end to end — it only scrolls once something has
     already decided how wide it is allowed to be. With eight and ten
     photographs per product the strip is ~890px, so on a 375px phone the
     single column was sized to 890 and the main image was cropped by the
     body's overflow clip. Nothing scrolled sideways, which is why it looked
     fine in a page-overflow check and wrong to the eye. */
  .pdp{grid-template-columns:minmax(0,1fr)}
  .gallery{position:static;min-width:0}
  .cartgrid{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:grid}
  .shop{grid-template-columns:1fr}
  .filters{
    position:fixed;inset:auto 0 0 0;z-index:75;max-height:82svh;
    background:var(--linen);border-top:1px solid color-mix(in srgb,var(--stroke) 10%,transparent);
    border-radius:var(--r-4xl) var(--r-4xl) 0 0;padding:1.4rem var(--gut) 2.2rem;
    box-shadow:var(--shadow-panel);
    transform:translateY(100%);transition:transform var(--t) var(--ease);
  }
  .filters.is-on{transform:none}
  .filters__mobclose{display:flex!important}
  .trust__grid{grid-template-columns:1fr}
  .trust__cell{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--stroke) 7%,transparent)}
  .trust__cell:last-child{border-bottom:0}
}
@media (min-width:901px){.filters__mobclose,.filters-open{display:none}}
@media (max-width:768px){
  :root{--hdr:66px}
  .hero{min-height:88svh}
  .hero__bg::after{background:linear-gradient(to bottom,rgba(21,21,21,.90),rgba(21,21,21,.74))}
  .hero__scroll{display:none}
  .ftr__grid{grid-template-columns:1fr;gap:1.75rem}
  .cmp tbody th{width:8rem}
  .orb{right:1rem;bottom:1rem;width:56px;height:56px}
  /* Fope on a phone: a card that leaves the page visible above it, not a sheet
     over 84% of the screen. It keeps inside what is visible when the keyboard
     is up (--vvh / --vvb are set from visualViewport by js/fope.js). */
  .fope{
    right:.6rem;left:.6rem;width:auto;
    bottom:calc(var(--vvb,0px) + .6rem);
    height:min(60svh,30rem);max-height:calc(var(--vvh,100svh) - 1.2rem);
    border-radius:12px;
    transform:translateY(24px);transform-origin:bottom center;
    box-shadow:0 18px 50px rgba(0,0,0,.28);
  }
  .fope__head{padding:.7rem .9rem}
  .fope__log{padding:.8rem .9rem;gap:.6rem}
  .fope__chips{padding:0 .9rem .5rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .fope__chips::-webkit-scrollbar{display:none}
  .qchip{flex-shrink:0}
  .fope__note{display:none}
  .fope__form{padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom))}
  .bub{font-size:.84rem;line-height:1.5}
  /* the orb sits under the open card, so it is hidden rather than peeking out */
  .orb.is-open{visibility:hidden}
  .fope.is-on{transform:none}
  .toasts{right:.75rem;left:.75rem;bottom:5.5rem;align-items:stretch}
  .stickybuy__name{display:none}
}

/* ---------- 28. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .mask>span{transform:none!important}
  .dna__bar i{transform:scaleX(var(--v,0))!important}
}

/* ---------- 29. Print ---------- */
@media print{
  .hdr,.orb,.fope,.stickybuy,.toasts,.ftr{display:none!important}
  body{background:#fff;color:#000}
}

/* ---------- 30. Photo-pending slots ----------
   Camera Hub's own product photography is not currently retrievable: the live
   site returns a database error for every URL including /wp-content/uploads,
   and the Internet Archive captured the HTML pages but none of the image
   assets. Rather than substitute stock photography or a manufacturer press
   shot for gear the shop actually holds, every image slot falls back to a
   labelled placeholder. Drop real files into photos/products/<slug>-<n>.jpg
   and they appear automatically — nothing else needs changing. */
.pcard__media,.cat__img,.gallery__main,.gthumb{position:relative}
/* Every listed product now has a photograph, so this is only ever seen while
   one is still downloading. It used to say PHOTO PENDING, which on a slow
   phone connection made a loading picture look like a missing one. Now it is
   the same light plate the photo sits on, with a soft sweep while it loads. */
.pcard__media::after,.cat__img::after,.gallery__main::after{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,#F4F4F4 30%,#EBEBEB 50%,#F4F4F4 70%) 0 0/300% 100%;
  animation:plate-load 1.4s linear infinite;
}
@keyframes plate-load{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.pcard__media::after,.cat__img::after,.gallery__main::after{animation:none}}
/* The category tile keeps its readability scrim on top of the placeholder. */
.cat__img::after{
  content:"";
  background:
    linear-gradient(to top,var(--linen) 18%,color-mix(in srgb,var(--linen) 60%,transparent) 48%,transparent 78%),
    repeating-linear-gradient(45deg,var(--hatch-a) 0 14px,var(--hatch-b) 14px 28px);
}
.pcard__media img,.cat__img img,.gallery__main img,.gthumb img{position:relative;z-index:1}
.pcard__quick,.tags{z-index:3}

/* ---------- 30. Panel stacking ----------
   The Fope orb is z-index 80 and the drawer 71, so the orb floated over the
   open menu. Rather than re-rank them (the orb must stay above page content
   everywhere else), it retires while any full-screen panel is open — the
   drawer carries its own "Ask Fope" row, so nothing is lost. */
body.is-locked .orb{
  opacity:0;visibility:hidden;transform:scale(.85);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
}
body.is-locked .toasts{display:none}
.orb{transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
                opacity var(--t) var(--ease),transform var(--t) var(--ease)}

/* ---------- 31. Pre-order ---------- */
.po-hint{
  display:block;margin-top:.5rem;font-size:.74rem;color:var(--ink-mute);
}
.po-hint.is-hit{color:var(--accent)}

/* ---------- 32. Fope thinking ----------
   The status line is what separates "thinking" from a loading spinner —
   it names what Fope is doing while you wait. */
.typing{align-items:center}
.typing__note{
  margin-left:.5rem;font-size:.73rem;color:var(--ink-mute);
  animation:fade-up .5s var(--ease) both;
}

/* ---------- 33. Theme toggle ----------
   One button, two glyphs: it shows the theme you would switch TO, which is the
   convention people already read correctly. Crossfades rather than swaps. */
.themebtn{position:relative}
.themebtn svg{
  position:absolute;width:19px;height:19px;stroke-width:1.4;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
}
/* Default (light): the button offers dark, so the MOON shows. */
.themebtn__sun{opacity:0;transform:rotate(-70deg) scale(.6)}
.themebtn__moon{opacity:1;transform:none}
:root[data-theme="dark"] .themebtn__sun{opacity:1;transform:none}
:root[data-theme="dark"] .themebtn__moon{opacity:0;transform:rotate(70deg) scale(.6)}
:root[data-theme="light"] .themebtn__moon{opacity:1;transform:none}
:root[data-theme="light"] .themebtn__sun{opacity:0;transform:rotate(-70deg) scale(.6)}

.drawer__theme{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  margin-top:.9rem;padding:.85rem 1.1rem;
  background:var(--canvas);
  border:1px solid color-mix(in srgb,var(--stroke) 10%,transparent);
  border-radius:var(--r-pill);
  transition:border-color var(--t-fast) var(--ease);
}
.drawer__theme:hover{border-color:color-mix(in srgb,var(--stroke) 28%,transparent)}
.drawer__theme-label{font-size:.86rem;color:var(--ink)}
.drawer__theme-val{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
}

/* ---------- 34. Scarcity ----------
   Shown only when a real per-item count exists (data/stock-levels.json). The
   catalogue total is never published. Deliberately quiet: a low-stock note is
   information, not a countdown timer — the urgent variant is a slightly warmer
   border, not a red flashing badge. */
.tag--left{
  background:color-mix(in srgb,var(--stroke) 12%,transparent);
  border-color:color-mix(in srgb,var(--stroke) 34%,transparent);
  color:var(--ink);
  font-weight:500;
}
.tag--left.is-urgent{
  border-color:color-mix(in srgb,var(--stroke) 55%,transparent);
  background:color-mix(in srgb,var(--stroke) 18%,transparent);
}
.lcard__left{color:var(--ink-mute)}

/* ---------- 35. Camera Hub's own photography ----------
   These come from the shop's own Instagram, where 640px on the long edge is
   the ceiling without a login. They are used at sizes that resolution can
   actually carry — a strip at ~260px, a portrait column at ~440px — and the
   hero treats its image as ATMOSPHERE (blurred, dimmed, behind the gradient)
   rather than as a detail shot it cannot support. */
.hero__photo{
  position:absolute;inset:0;width:100%;height:100%;
  /* Framed so the subject sits to the RIGHT of the headline rather than
     behind it — the scrim is darkest on the left, where the type lives. */
  object-fit:cover;object-position:78% 38%;
  opacity:.34;
  filter:blur(1.5px) saturate(.6);
  transform:scale(1.08);           /* hides the blur's soft edges */
}
:root[data-theme="light"] .hero__photo{opacity:.22;filter:blur(1.5px) saturate(.5)}
/* Light is the ground now, so this is the default treatment and dark is the
   exception, rather than the other way round. */
:root:not([data-theme="dark"]) .hero__photo{opacity:.22;filter:blur(1.5px) saturate(.5)}

/* Fixed columns rather than auto-fit — auto-fit left an orphan tile on the
   second row, which reads as a mistake rather than a grid. Eight shots go
   4x2 on desktop, 2x4 on a phone. */
.shopstrip{
  display:grid;gap:clamp(.6rem,1.4vw,1rem);
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1100px){.shopstrip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.shopstrip{grid-template-columns:repeat(2,1fr)}}
.shopshot{
  margin:0;overflow:hidden;border-radius:var(--r-3xl);
  background:var(--linen);
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  aspect-ratio:3/4;
}
.shopshot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease);
}
@media (hover:hover){.shopshot:hover img{transform:scale(1.05)}}

.aboutsplit{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(1.5rem,3.4vw,3.5rem);align-items:center;
}
.aboutshot{
  margin:0;overflow:hidden;border-radius:var(--r-3xl);
  background:var(--linen);
  border:1px solid color-mix(in srgb,var(--stroke) 9%,transparent);
  aspect-ratio:3/4;max-height:26rem;
}
.aboutshot img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){
  .aboutsplit{grid-template-columns:1fr}
  .aboutshot{max-height:20rem;aspect-ratio:16/10}
}

/* ---------- 36. Photo plate ----------
   Camera Hub's product photography is cut out on white. Against the dark
   theme that reads as a bright hole unless the surface behind it is light
   too, so a media box that has actually loaded a photo switches to a light
   plate. Boxes still on the PHOTO PENDING hatch are left alone. */
.pcard__media.has-photo,
.gallery__main.has-photo,
.gthumb.has-photo{
  background:#F4F4F4;
}
.pcard__media.has-photo::after,
.gallery__main.has-photo::after,
.cat__img.has-photo::after{content:none}
.cat__img.has-photo{background:#F4F4F4}
/* The category tile still needs its readability scrim over a light plate. */
.cat__img.has-photo{
  background-image:linear-gradient(to top,var(--linen) 16%,color-mix(in srgb,var(--linen) 55%,transparent) 46%,transparent 78%);
  background-color:#F4F4F4;
}

/* Tags sit ON the media box, so on a light photo plate they need to invert —
   otherwise a pale tag on a white plate is unreadable in the dark theme. */
.pcard__media.has-photo .tag{
  background:color-mix(in srgb,#2B2B2B 88%,transparent);
  border-color:color-mix(in srgb,#2B2B2B 30%,transparent);
  color:#F2F2F2;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.pcard__media.has-photo .tag--stock{color:#DFE9E1}
.pcard__media.has-photo .tag--flat{color:#EDE3CC}
.pcard__media.has-photo .tag--left{background:color-mix(in srgb,#2B2B2B 92%,transparent);color:#FFF}

/* ---------- 37. Image attribution ----------
   CC BY and CC BY-SA oblige us to credit the photographer wherever the image
   appears, so this sits under the gallery. It also tells the customer plainly
   that the shot is a stand-in rather than Camera Hub's own photograph of the
   unit they will receive. */
.imgcredit{
  margin-top:.6rem;font-size:.68rem;line-height:1.5;color:var(--ink-mute);
}
.imgcredit a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.imgcredit a:hover{color:var(--ink)}

/* Stand-in imagery for the presentation build. Quiet, but present — nobody
   should mistake it for a photograph of the actual unit. */
.imgcredit--demo{
  color:var(--ink-mute);
  border-left:2px solid color-mix(in srgb,var(--stroke) 24%,transparent);
  padding-left:.6rem;
}

/* ==========================================================================
   RETAIL HEADER — three tiers
   Replaces the floating translucent bar. A shop header must be solid and
   always present: the search field is the primary control on every page, so
   it never scrolls away and never sits on top of an image.
   ========================================================================== */
:root{ --hdr:148px; }
@media (max-width:900px){ :root{ --hdr:146px; } }   /* measured: mast wraps to two rows */
@media (max-width:640px){ :root{ --hdr:132px; } }   /* measured after the phone type pass */

.hdr{
  height:auto;
  background:var(--linen);
  border-bottom:1px solid var(--rule);
  transition:none;
}
.hdr::before{content:none}          /* the blur belonged to the old design */
.hdr.is-stuck{border-bottom-color:var(--rule)}
.hdr.is-hidden{transform:none}      /* search must not scroll out of reach */

/* ---- tier 1: utility ---------------------------------------------------- */
.util{background:var(--util);border-bottom:1px solid var(--rule)}
.util__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  height:34px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.util__claim{
  margin:0;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mute);white-space:nowrap;
}
.util__nav{display:flex;gap:1.35rem;overflow-x:auto;scrollbar-width:none}
.util__nav::-webkit-scrollbar{display:none}
.util__nav a{
  font-size:.75rem;color:var(--ink-soft);white-space:nowrap;
  transition:color .2s var(--ease-soft);
}
.util__nav a:hover{color:var(--ink)}

/* ---- tier 2: mast ------------------------------------------------------- */
.mast__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  height:72px;display:flex;align-items:center;gap:1.5rem;
}
.mast__in .logo{flex-shrink:0}
.experts{display:flex;align-items:center;gap:.5rem;flex-shrink:0;color:var(--ink-soft)}
.experts svg{width:20px;height:20px}
.experts span{display:flex;flex-direction:column;line-height:1.25}
.experts em{font-style:normal;font-size:.68rem;color:var(--ink-mute)}
.experts strong{font-size:.82rem;font-weight:600;color:var(--ink);
                font-variant-numeric:tabular-nums;white-space:nowrap}
.experts:hover strong{text-decoration:underline}

/* the search owns the middle — it is the widest thing in the header */
.hsearch{
  flex:1 1 auto;min-width:0;display:flex;align-items:stretch;height:44px;
  border:2px solid var(--ink);border-radius:3px;background:var(--linen);
  overflow:hidden;
}
.hsearch:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 16%,transparent)}
.hsearch__cat{
  flex-shrink:0;border:0;border-right:1px solid var(--rule);background:var(--paper);
  font:inherit;font-size:.78rem;color:var(--ink-soft);padding:0 .6rem;
  max-width:9.5rem;cursor:pointer;outline:none;
}
.hsearch__in{
  flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:.9rem;color:var(--ink);padding:0 .9rem;
}
.hsearch__in::placeholder{color:var(--ink-mute)}
.hsearch__in::-webkit-search-cancel-button{filter:grayscale(1) opacity(.5)}
.hsearch__go{
  flex-shrink:0;width:56px;display:grid;place-items:center;border:0;cursor:pointer;
  background:var(--invert);color:var(--invert-ink);
  transition:background-color .2s var(--ease-soft);
}
.hsearch__go svg{width:19px;height:19px}
.hsearch__go:hover{background:var(--invert-hi)}

.mast__actions{display:flex;align-items:center;gap:.35rem;flex-shrink:0}
.mact{
  position:relative;display:flex;align-items:center;gap:.45rem;
  padding:.35rem .55rem;border-radius:3px;color:var(--ink-soft);
  transition:background-color .2s var(--ease-soft),color .2s var(--ease-soft);
}
.mact:hover{background:var(--paper);color:var(--ink)}
.mact svg{width:22px;height:22px;flex-shrink:0}
/* `>span:not(.badge)` and never `span`: the cart count is a span inside the
   same link, and `.mact span{display:none}` on phones hid it with the labels —
   which is why the cart never showed a number after adding. */
.mact>span:not(.badge){display:flex;flex-direction:column;line-height:1.2}
.mact em{font-style:normal;font-size:.66rem;color:var(--ink-mute)}
.mact strong{font-size:.8rem;font-weight:600;color:var(--ink);white-space:nowrap}
.mact--deal svg{color:var(--brand)}
.mact--cart .badge{position:absolute;top:.05rem;left:1.15rem}
/* The cart count is the one number a shopper looks for after pressing Add —
   it gets the brand amber so it reads at a glance, and a bump when it changes. */
.mact--cart .badge{background:var(--brand);color:#1B1B1B;font-weight:700}
.badge.is-bump{animation:badge-bump .6s var(--ease)}
@keyframes badge-bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ---- tier 3: category bar ---------------------------------------------- */
.catbar{background:var(--bar)}
.catbar__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  height:42px;display:flex;align-items:stretch;gap:0;
  overflow-x:auto;scrollbar-width:none;
}
.catbar__in::-webkit-scrollbar{display:none}
.catbar__in a{
  display:flex;align-items:center;padding:0 .95rem;white-space:nowrap;
  font-size:.8rem;font-weight:500;color:var(--bar-ink);
  transition:background-color .2s var(--ease-soft);
}
.catbar__in a:hover,.catbar__in a[aria-current]{
  background:color-mix(in srgb,var(--bar-ink) 14%,transparent);
}
.catbar__hot{color:var(--brand)!important;font-weight:700}

@media (max-width:900px){
  /* Two rows: identity + actions, then the search across the full width.
     The height must be AUTO — a fixed height here made the rows overflow and
     sit on top of the category bar. --hdr is matched to the result below. */
  .util{display:none}
  .mast__in{
    height:auto;flex-wrap:wrap;align-items:center;
    gap:.45rem .55rem;padding:.5rem 1rem;
  }
  .experts{display:none}
  .mast__in .logo{margin-right:auto}
  .mast__in .logo__mark{width:32px;height:32px}
  .logo__txt{font-size:.95rem}
  .hsearch{order:3;flex-basis:100%;height:40px;border-width:1.5px}
  .hsearch__cat{display:none}
  .hsearch__go{width:48px}
  .mast__actions{gap:.1rem}
  .mact{padding:.3rem .35rem}
  .mact>span:not(.badge){display:none}
  .mact--cart .badge{left:auto;right:0;top:0}
  .catbar__in{height:38px;padding-inline:1rem}
  .catbar__in a{padding:0 .75rem;font-size:.78rem}
}

/* ==========================================================================
   FIND BAR — the homepage opener
   No photograph by design. The search field is the tallest, highest-contrast
   thing on the page, and the quick links under it are the routes the shop
   actually gets asked for.
   ========================================================================== */
.find{
  background:var(--canvas-deep);
  border-bottom:1px solid var(--rule);
  /* the fixed three-tier header sits above this — clear it here */
  padding:calc(var(--hdr) + clamp(2rem,4vw,3rem)) var(--gut) clamp(2.25rem,5vw,3.25rem);
}
.find__in{max-width:52rem;margin-inline:auto;text-align:center}
.find__h{
  margin:0 0 .5rem;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(1.75rem,4.2vw,2.75rem);color:var(--ink);text-wrap:balance;
}
.find__sub{
  margin:0 auto clamp(1.5rem,3vw,2rem);max-width:40rem;
  font-size:clamp(.875rem,1.6vw,1rem);line-height:1.6;color:var(--ink-soft);
}
.find__form{display:flex;height:58px;max-width:44rem;margin-inline:auto;
  border:2px solid var(--ink);border-radius:4px;background:var(--linen);overflow:hidden}
.find__form:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 15%,transparent)}
.find__in-field{
  flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:1rem;color:var(--ink);padding:0 1.1rem;
}
.find__in-field::placeholder{color:var(--ink-mute)}
.find__go{
  flex-shrink:0;display:flex;align-items:center;gap:.5rem;padding:0 1.5rem;border:0;
  cursor:pointer;background:var(--invert);color:var(--invert-ink);
  font:inherit;font-size:.875rem;font-weight:600;
  transition:background-color .2s var(--ease-soft);
}
.find__go svg{width:18px;height:18px}
.find__go:hover{background:var(--invert-hi)}
.find__quick{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem;margin:1.25rem 0 0;font-size:.8rem;
}
.find__quick span{color:var(--ink-mute);margin-right:.15rem}
.find__quick a{
  padding:.3rem .7rem;border:1px solid var(--rule);border-radius:var(--r-pill);
  color:var(--ink-soft);background:var(--linen);
  transition:border-color .2s var(--ease-soft),color .2s var(--ease-soft);
}
.find__quick a:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:640px){
  .find__form{height:50px}
  .find__go span{display:none}
  .find__go{padding:0 1.1rem}
}

/* ==========================================================================
   WEEKLY DEALS
   ========================================================================== */
.deals{padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid var(--rule)}
.deals__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;
}
.deals__h{margin:.2rem 0 0;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.35rem,3vw,1.9rem);color:var(--ink)}
.deals__timer{display:flex;align-items:center;gap:.55rem}
.deals__timer-label{font-size:.75rem;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.07em}
.deals__clock{
  font-size:.95rem;font-weight:700;color:var(--brand);
  font-variant-numeric:tabular-nums;
  padding:.3rem .6rem;border:1px solid var(--brand);border-radius:3px;
}
.deals__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(215px,1fr);
  gap:1rem;overflow-x:auto;padding-bottom:.6rem;
  scroll-snap-type:x proximity;scrollbar-width:thin;
}
.deals__rail>*{scroll-snap-align:start}
@media (max-width:900px){.deals__rail{grid-auto-columns:minmax(178px,1fr)}}

.dcard{
  display:flex;flex-direction:column;background:var(--linen);
  border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft);
}
.dcard:hover{border-color:var(--ink);box-shadow:var(--shadow-lift)}
.dcard__media{position:relative;display:block;aspect-ratio:1/1;background:#FFF;padding:.85rem}
.dcard__media img{width:100%;height:100%;object-fit:contain}
.dcard__off{
  position:absolute;top:.5rem;left:.5rem;z-index:1;
  background:var(--brand);color:#1B1B1B;font-size:.72rem;font-weight:700;
  padding:.2rem .45rem;border-radius:3px;font-variant-numeric:tabular-nums;
}
.dcard__body{padding:.7rem .8rem .9rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.dcard__brand{margin:0;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.dcard__name{
  margin:0;font-size:.82rem;font-weight:600;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dcard__name:hover{text-decoration:underline}
.dcard__price{display:flex;align-items:baseline;gap:.45rem;margin:.4rem 0 0;flex-wrap:wrap}
.dcard__now{font-size:.95rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dcard__was{font-size:.75rem;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.dcard__save{margin:.1rem 0 0;font-size:.72rem;font-weight:600;color:var(--brand)}
.deals__note{margin:1rem 0 0;font-size:.72rem;color:var(--ink-mute)}

/* deal price on the product page — the struck figure must never outweigh the
   one the customer actually pays */
.pdp__was{font-size:1rem;color:var(--ink-mute);font-variant-numeric:tabular-nums;margin-left:.55rem}
.pdp__off{
  display:inline-block;margin-left:.55rem;padding:.2rem .5rem;border-radius:3px;
  background:var(--brand);color:#1B1B1B;font-size:.72rem;font-weight:700;
}

/* struck catalogue price on a grid card carrying a weekly deal */
.pcard__was-sm{font-size:.75rem;color:var(--ink-mute);font-variant-numeric:tabular-nums}
/* a deal adds a second figure to the card foot — it must be allowed to drop
   to its own line on a narrow phone card rather than overflow the card */
.pcard__foot{flex-wrap:wrap;column-gap:.45rem;row-gap:.1rem}

/* ==========================================================================
   MEGA-MENU — the panel the category bar drops
   ========================================================================== */
.catbar{position:relative}
.catbar__in a.is-hot{background:color-mix(in srgb,var(--bar-ink) 18%,transparent)}
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:70;
  background:var(--linen);border-bottom:1px solid var(--rule);
  box-shadow:var(--shadow-lift);
}
.mega__in{
  max-width:var(--wrap);margin-inline:auto;padding:1.5rem var(--gut) 1.75rem;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:2.5rem;
}
.mega__label{
  margin:0 0 .85rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);
}
.mega__subs{
  list-style:none;margin:0;padding:0;
  columns:2;column-gap:1.5rem;
}
.mega__subs li{break-inside:avoid;margin-bottom:.4rem}
.mega__subs a{font-size:.83rem;color:var(--ink-soft);transition:color .15s var(--ease-soft)}
.mega__subs a:hover{color:var(--ink);text-decoration:underline}
.mega__all{
  display:inline-block;margin-top:1rem;font-size:.8rem;font-weight:600;color:var(--ink);
}
.mega__all:hover{text-decoration:underline}
.mega__ps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.mega__p{display:flex;flex-direction:column;gap:.45rem}
.mega__p-img{
  display:block;aspect-ratio:1/1;background:#FFF;border:1px solid var(--rule);
  border-radius:3px;padding:.5rem;
}
.mega__p-img img{width:100%;height:100%;object-fit:contain}
.mega__p-txt{display:flex;flex-direction:column;gap:.1rem;line-height:1.3}
.mega__p-txt em{font-style:normal;font-size:.65rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-mute)}
.mega__p-txt strong{
  font-size:.75rem;font-weight:500;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mega__p-txt b{font-size:.8rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:.1rem}
.mega__p:hover .mega__p-img{border-color:var(--ink)}
.mega__p:hover strong{color:var(--ink)}
@media (max-width:900px){.mega{display:none}}

/* ---- dense retail card: spec bullets, add-to-cart, compare -------------- */
.pcard__specs{
  list-style:none;margin:.45rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.15rem;
}
.pcard__specs li{
  position:relative;padding-left:.7rem;font-size:.75rem;line-height:1.45;color:var(--ink-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pcard__specs li::before{
  content:"";position:absolute;left:0;top:.55em;width:3px;height:3px;border-radius:50%;
  background:var(--ink-mute);
}
.pcard__act{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--rule);
}
.pcard__add{
  flex:1 1 auto;border:0;cursor:pointer;border-radius:3px;
  background:var(--invert);color:var(--invert-ink);
  font:inherit;font-size:.75rem;font-weight:600;padding:.55rem .75rem;
  transition:background-color .2s var(--ease-soft);
}
.pcard__add:hover{background:var(--invert-hi)}
.pcard__add.is-done{background:var(--ok)}
.pcard__cmp{
  display:flex;align-items:center;gap:.35rem;flex-shrink:0;cursor:pointer;
  font-size:.72rem;color:var(--ink-mute);user-select:none;
}
.pcard__cmp input{width:14px;height:14px;accent-color:var(--ink);cursor:pointer}
.pcard__cmp:hover{color:var(--ink)}

/* deal badge on a grid card, and the saving line */
.tag--deal{background:var(--brand);color:#1B1B1B;font-weight:700}
.pcard__save{margin:.35rem 0 0;font-size:.75rem;font-weight:600;color:var(--brand)}
.deals__more{margin:1rem 0 0;font-size:.82rem}
.deals__more a{font-weight:600;color:var(--ink)}
.deals__more a:hover{text-decoration:underline}
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:.8rem;
  color:var(--ink-soft);text-decoration:underline;
}
.linkbtn:hover{color:var(--ink)}
.dealhero{
  background:var(--canvas-deep);border-bottom:1px solid var(--rule);
  padding:calc(var(--hdr) + clamp(1.75rem,3vw,2.5rem)) 0 clamp(1.75rem,3vw,2.5rem);
}
.dealhero__in{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.dealhero__h{margin:.25rem 0 .4rem;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(1.75rem,4vw,2.6rem);color:var(--ink)}
.dealhero__sub{margin:0;max-width:34rem;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.dealhero__timer{display:flex;align-items:center;gap:.55rem}
.dealempty{padding:3rem 0;text-align:center;color:var(--ink-soft)}

/* ---- phone: the dense card needs different rules to stay readable -------
   Truncating each spec to one ellipsised line ("50MP Full-Frame S…") tells
   the reader nothing. On a narrow card let a spec wrap to two lines and drop
   the third bullet instead, and show only the stock tag so the second badge
   stops covering the product. */
@media (max-width:640px){
  .pcard__specs li{
    white-space:normal;text-overflow:clip;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .pcard__specs li:nth-child(3){display:none}
  .pcard .tags .tag--flat{display:none}
  .pcard__act{flex-wrap:wrap;row-gap:.5rem}
  .pcard__add{flex-basis:100%}
  .pcard__cmp{margin-inline:auto}
}
/* the weekly list is a destination in its own right in the phone menu */
.drawer__link--hot span{color:var(--brand);font-weight:600}

/* ==========================================================================
   PROMO BANNERS — the rotating offer the reference opens on
   ========================================================================== */
.promo{padding-top:var(--hdr);background:var(--canvas-deep);border-bottom:1px solid var(--rule)}
.promo__stage{
  position:relative;max-width:var(--wrap);margin-inline:auto;
  overflow:hidden;background:var(--linen);
}
.promo__track{display:flex;transition:transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){.promo__track{transition:none}}
.slide{
  flex:0 0 100%;min-width:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  gap:2rem;padding:clamp(1.75rem,4vw,3rem) clamp(1.5rem,5vw,4rem);
  min-height:clamp(260px,30vw,340px);
}
.slide--deal{background:var(--canvas-deep)}
.slide__eyebrow{
  margin:0 0 .5rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);font-weight:600;
}
.slide__h{
  margin:0 0 .6rem;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(1.6rem,3.6vw,2.6rem);color:var(--ink);text-wrap:balance;
}
.slide__sub{margin:0 0 1.4rem;max-width:32ch;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.slide__cta{
  display:inline-block;background:var(--invert);color:var(--invert-ink);
  padding:.7rem 1.5rem;border-radius:3px;font-size:.82rem;font-weight:600;
  transition:background-color .2s var(--ease-soft);
}
.slide__cta:hover{background:var(--invert-hi)}
.slide__img{display:grid;place-items:center;height:100%;max-height:280px}
.slide__img img{max-width:100%;max-height:280px;object-fit:contain}
.promo__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--rule);border-radius:50%;
  background:color-mix(in srgb,var(--linen) 88%,transparent);color:var(--ink);
  transition:background-color .2s var(--ease-soft);
}
.promo__nav:hover{background:var(--linen)}
.promo__nav svg{width:18px;height:18px}
.promo__nav--prev{left:.75rem}
.promo__nav--next{right:.75rem}
.promo__dots{
  position:absolute;left:0;right:0;bottom:.85rem;z-index:2;
  display:flex;justify-content:center;gap:.4rem;
}
.promo__dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 25%,transparent);
  transition:background-color .2s var(--ease-soft),width .2s var(--ease-soft);
}
.promo__dot.is-on{background:var(--ink);width:20px;border-radius:4px}
@media (max-width:760px){
  .slide{grid-template-columns:1fr;text-align:center;min-height:0;padding-bottom:2.5rem}
  .slide__sub{margin-inline:auto}
  .slide__img{order:-1;max-height:150px}
  .slide__img img{max-height:150px}
  /* Arrows stay on a phone — without them nothing says there is another
     offer. They move down beside the dots so they never sit on the product. */
  .promo__nav{
    top:auto;bottom:.55rem;transform:none;width:32px;height:32px;
    background:var(--linen);
  }
  .promo__nav svg{width:15px;height:15px}
  .promo__nav--prev{left:calc(50% - 4.6rem)}
  .promo__nav--next{right:calc(50% - 4.6rem)}
  .promo__dots{bottom:1.05rem}
}

/* ==========================================================================
   CATEGORY STRIP — shortcuts directly under the banner
   ========================================================================== */
.strip{padding:1.5rem 0;border-bottom:1px solid var(--rule);background:var(--linen)}
.strip__row{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr);
  gap:.75rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem;
}
.strip__row::-webkit-scrollbar{display:none}
.strip__cell{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.strip__img{
  display:grid;place-items:center;width:100%;aspect-ratio:1/1;
  background:#FFF;border:1px solid var(--rule);border-radius:3px;padding:.55rem;
  transition:border-color .2s var(--ease-soft);
}
.strip__img img{max-width:100%;max-height:100%;object-fit:contain}
.strip__name{font-size:.75rem;font-weight:500;color:var(--ink-soft);line-height:1.3}
.strip__cell:hover .strip__img{border-color:var(--ink)}
.strip__cell:hover .strip__name{color:var(--ink)}

/* ==========================================================================
   WHAT ARE YOU SHOOTING — discipline tiles
   ========================================================================== */
.shoot{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));
}
.shoot__cell{
  display:flex;flex-direction:column;gap:.6rem;
  background:var(--linen);border:1px solid var(--rule);border-radius:4px;
  padding:.85rem;transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft);
}
.shoot__cell:hover{border-color:var(--ink);box-shadow:var(--shadow-lift)}
.shoot__img{
  display:grid;place-items:center;aspect-ratio:4/3;background:#FFF;
  border-radius:3px;padding:.5rem;
}
.shoot__img img{max-width:100%;max-height:100%;object-fit:contain}
.shoot__name{font-size:.85rem;font-weight:600;color:var(--ink);line-height:1.35}

/* ==========================================================================
   ABOUT block on the homepage
   ========================================================================== */
.about{background:var(--canvas-deep);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:clamp(2.5rem,5vw,4rem) 0;margin-top:clamp(2rem,4vw,3rem)}
.about__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.about__acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
.about__facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.about__facts li{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule);
}
.about__facts li:last-child{border-bottom:0}
.about__facts em{font-style:normal;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-mute)}
.about__facts strong{font-size:.9rem;font-weight:500;color:var(--ink)}
@media (max-width:860px){.about__in{grid-template-columns:1fr}}

/* ==========================================================================
   MY CAMERA HUB
   ========================================================================== */
.acct-head{padding:calc(var(--hdr) + clamp(1.75rem,3vw,2.5rem)) 0 clamp(1.5rem,3vw,2rem);
  background:var(--canvas-deep);border-bottom:1px solid var(--rule)}
.acct-head .lede{max-width:46ch}
.acct{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1.25rem}
.acct__card{background:var(--linen);border:1px solid var(--rule);border-radius:4px;padding:1.35rem}
.acct__h{margin:0 0 .35rem;font-size:1rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.acct__note{margin:0 0 1.1rem;font-size:.78rem;line-height:1.55;color:var(--ink-mute)}
.acct__form{display:flex;flex-direction:column;gap:.85rem}
.acct__acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.35rem}
.acct__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.acct__row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--rule);
}
.acct__row:last-child{border-bottom:0}
.acct__row-h{margin:0;font-size:.85rem;font-weight:600;color:var(--ink)}
.acct__row-s{margin:.15rem 0 0;font-size:.75rem;line-height:1.5;color:var(--ink-mute)}
.acct__row-r{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;flex-shrink:0}
.acct__row-t{font-size:.85rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.acct__row-d{font-size:.72rem;color:var(--ink-mute);white-space:nowrap}
.acct__empty{margin:1rem 0 0;font-size:.82rem;color:var(--ink-mute)}
.acct__empty a{color:var(--ink);text-decoration:underline}
.mact--acct svg{color:var(--ink-soft)}
@media (max-width:1080px){.mact--acct span{display:none}}
/* keep every discipline tile the same shape whatever the label length */
.shoot__cell{justify-content:flex-start}
.shoot__name{margin-top:auto}
/* Phone mast: logo + four icons is one row too many at 375px, and the logo
   wrapped onto its own line — which pushed the header 37px past --hdr and
   slid the promo banner underneath it. Weekly Deals keeps its place in the
   category bar and the drawer, so it is the one to drop here. */
@media (max-width:640px){
  .mact--deal{display:none}
  .mast__actions{gap:0}
  .mact{padding:.3rem .3rem}
}

/* ---- coloured banner grounds -------------------------------------------
   The reference never runs a promo on plain white — each panel takes a deep,
   low-shout colour with the product cut out on top. These set every colour
   explicitly so they hold on either theme's ground. */
.slide--ember{background:var(--ban-ember)}
.slide--forest{background:var(--ban-forest)}
.slide--slate{background:var(--ban-slate)}
.slide--ember,.slide--forest,.slide--slate{color:var(--ban-ink)}
.slide--ember .slide__h,.slide--forest .slide__h,.slide--slate .slide__h{color:var(--ban-ink)}
.slide--ember .slide__sub,.slide--forest .slide__sub,.slide--slate .slide__sub{color:var(--ban-mute)}
.slide--ember .slide__eyebrow,.slide--forest .slide__eyebrow,.slide--slate .slide__eyebrow{color:var(--brand)}
.slide--ember .slide__cta,.slide--forest .slide__cta,.slide--slate .slide__cta{
  background:var(--brand);color:#1B1B1B;
}
.slide--ember .slide__cta:hover,.slide--forest .slide__cta:hover,.slide--slate .slide__cta:hover{
  background:#EC9C42;
}
/* The product is a transparent cut-out sitting directly on the colour, so all
   it needs is a shadow to lift it. It used to be a photograph on white inside
   a rounded frame, which is what the client meant by "a white picture in the
   middle". */
.slide--ember .slide__img img,.slide--forest .slide__img img,.slide--slate .slide__img img{
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
  background:none;padding:0;border-radius:0;box-shadow:none;
}
.promo__dot{background:color-mix(in srgb,var(--ink) 25%,transparent)}

/* ---- promo card row (the three tiles under the banner) ----------------- */
.cards{padding:clamp(1.5rem,3vw,2.25rem) 0;border-bottom:1px solid var(--rule)}
.cards__row{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
/* ==========================================================================
   PROMO TILES
   Rebuilt after the client's note: "it has a white picture in the middle and
   also halfway white, and up there is another colour brown — I want the brown
   to fill it all, and the word big."

   Two separate faults, both real. The tile was split in half: a coloured panel
   on top, a white body underneath. And the photograph was a cut-out on WHITE
   dropped onto the colour, so it showed as a white rectangle floating in the
   brown — the previous rules here actually leaned into that and gave the white
   a rounded frame, which only made it more deliberate-looking.

   Now: one continuous coloured ground, the headline the loudest thing on it,
   and the product a TRANSPARENT cut-out (tools/make_cutout_art.py) sitting on
   that colour, bled off the right edge like a poster rather than framed like a
   picture.
   ========================================================================== */
.pcard-promo{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:15.5rem;padding:1.4rem;border-radius:4px;overflow:hidden;
  border:1px solid transparent;
  background:var(--ban-slate);
  isolation:isolate;
  transition:box-shadow .25s var(--ease-soft),transform .25s var(--ease-soft);
}
@media (hover:hover){
  .pcard-promo:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
  .pcard-promo:hover .pcard-promo__art{transform:scale(1.04)}
}
.pcard-promo--ember{background:var(--ban-ember)}
.pcard-promo--forest{background:var(--ban-forest)}
.pcard-promo--slate{background:var(--ban-slate)}
.pcard-promo--teal{background:var(--ban-teal)}

/* Bled off the right-hand edge, behind the type. */
.pcard-promo__art{
  position:absolute;z-index:-1;right:-7%;bottom:-5%;
  width:60%;max-height:78%;object-fit:contain;object-position:bottom right;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
  transition:transform .5s var(--ease);
  pointer-events:none;
}
/* A diagonal scrim under the words only, so the copy stays legible whatever
   the cut-out turns out to be, without flattening the colour everywhere. */
.pcard-promo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,
    color-mix(in srgb,#000 55%,transparent) 0%,
    color-mix(in srgb,#000 26%,transparent) 48%,
    transparent 80%);
}

.pcard-promo__in{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;max-width:78%}
.pcard-promo__flag{
  align-self:flex-start;background:var(--brand);color:#1B1B1B;
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.24rem .55rem;border-radius:3px;margin-bottom:.15rem;
}
/* The loudest thing on the tile — which was the whole point of the note. */
.pcard-promo__h{
  margin:0;font-size:clamp(1.45rem,2.4vw,1.95rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.05;color:var(--ban-ink);
  text-wrap:balance;
}
.pcard-promo__p{
  margin:0;font-size:.82rem;line-height:1.5;color:var(--ban-mute);max-width:32ch;
}
.pcard-promo__cta{
  margin-top:.5rem;font-size:.78rem;font-weight:600;color:var(--ban-ink);
  border-bottom:1.5px solid var(--brand);padding-bottom:.12rem;
}

/* ==========================================================================
   SIGN IN / CREATE ACCOUNT
   ========================================================================== */
.auth{max-width:56rem;margin-inline:auto}
/* Said once, at the top of the panel, when there is no database behind it. */
.auth__off{
  margin:0 0 1.1rem;padding:.8rem 1rem;
  border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);
  border-radius:var(--r-3xl);
  background:color-mix(in srgb,var(--brand) 12%,transparent);
  font-size:.83rem;line-height:1.5;color:var(--ink);
}
/* Creating an account is the point of this screen, so it gets the weight. */
.auth__pane--first{
  border-color:color-mix(in srgb,var(--stroke) 30%,transparent);
  box-shadow:var(--shadow-lift);
}
.auth__panes{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.auth__pane{
  display:flex;flex-direction:column;gap:.85rem;
  background:var(--linen);border:1px solid var(--rule);border-radius:4px;padding:1.5rem;
}
.auth__pane .acct__h{margin-bottom:.25rem}
.auth__pane .acct__note{margin-bottom:.35rem}
.auth__msg{margin:0;min-height:1.2em;font-size:.78rem;line-height:1.5}
.auth__msg.is-ok{color:var(--ink-soft)}
.auth__msg.is-bad{color:var(--brand);font-weight:500}
.auth__foot{
  margin:1.25rem 0 0;text-align:center;font-size:.75rem;color:var(--ink-mute);
}
.acct__who{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:1rem;
  font-size:.8rem;color:var(--ink-soft);
}
.acct__who span{
  padding:.3rem .6rem;border:1px solid var(--rule);border-radius:var(--r-pill);
  background:var(--linen);
}

/* The `hidden` attribute only sets display:none through a UA rule, so ANY
   class that sets display beats it — which is how a "Sign out" strip ended up
   showing to signed-out visitors. Make the attribute authoritative. */
[hidden]{display:none !important}

/* ==========================================================================
   REVIEWS — verbatim from the Google listing
   ========================================================================== */
.revs{
  background:var(--canvas-deep);border-top:1px solid var(--rule);
  padding:clamp(2.25rem,4vw,3.25rem) 0;
}
.revs__head{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem;
}
.revs__score{display:flex;align-items:center;gap:.6rem}
.revs__num{
  font-size:clamp(1.75rem,3.5vw,2.35rem);font-weight:700;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
}
.revs__stars{display:inline-flex;gap:.12rem}
.revs__star{
  width:15px;height:15px;display:block;background:var(--silver);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;
}
.revs__star.is-full{background:var(--brand)}
.revs__star.is-half{background:linear-gradient(90deg,var(--brand) 50%,var(--silver) 50%)}
.revs__count{font-size:.8rem;color:var(--ink-mute)}
.revs__lede{margin:0;font-size:.875rem;color:var(--ink-soft)}
.revs__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);
  gap:1rem;overflow-x:auto;padding-bottom:.6rem;
  scroll-snap-type:x proximity;scrollbar-width:thin;
}
.revs__rail>*{scroll-snap-align:start}
.rev{
  display:flex;flex-direction:column;gap:.7rem;
  background:var(--linen);border:1px solid var(--rule);border-radius:4px;padding:1.1rem;
}
.rev__who{display:flex;align-items:center;gap:.6rem}
.rev__ava{
  width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;
  background:var(--invert);color:var(--invert-ink);font-size:.85rem;font-weight:700;
}
.rev__id{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.rev__id strong{font-size:.82rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev__id em{font-style:normal;font-size:.7rem;color:var(--ink-mute)}
.rev__txt{margin:0;font-size:.85rem;line-height:1.6;color:var(--ink-soft)}
.rev__likes{margin:0;font-size:.72rem;color:var(--ink-mute)}
@media (max-width:640px){.revs__rail{grid-auto-columns:minmax(240px,1fr)}}
/* At 375px the gutters leave 343px, and two 168px tiles plus the gap need 352
   — so auto-fill dropped to a single column and each tile became enormous.
   Pin it to two columns on a phone and shorten the art to suit. */
@media (max-width:640px){
  /* Two columns of square tiles ran to 1376px — 1.7 screens for one section.
     Three columns with shallower art halves it, and the label is clamped to
     two lines with a fixed height so every row still aligns. */
  .shoot{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .shoot__cell{padding:.4rem;gap:.35rem;border-radius:3px}
  .shoot__img{aspect-ratio:4/3;padding:.25rem}
  .shoot__name{
    font-size:.68rem;line-height:1.25;min-height:2.5em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
}

/* ==========================================================================
   RAIL ARROWS — shown only when a rail actually overflows
   ========================================================================== */
.rail{position:relative}
.rail__nav{
  position:absolute;top:calc(50% - 22px);transform:translateY(-50%);z-index:3;
  width:36px;height:36px;display:none;place-items:center;cursor:pointer;
  border:1px solid var(--rule);border-radius:50%;
  background:var(--linen);color:var(--ink);
  box-shadow:var(--shadow-lift);
  transition:opacity .2s var(--ease-soft),background-color .2s var(--ease-soft);
}
.rail.has-nav .rail__nav{display:grid}
.rail__nav svg{width:17px;height:17px}
.rail__nav:hover{background:var(--paper)}
.rail__nav[disabled]{opacity:.25;pointer-events:none}
.rail__nav--prev{left:-6px}
.rail__nav--next{right:-6px}
@media (max-width:640px){
  .rail__nav{width:32px;height:32px}
  .rail__nav--prev{left:-4px}
  .rail__nav--next{right:-4px}
}

/* A rail column of `minmax(N, 1fr)` stretches to the full width when there is
   only one card in it — a lone "Recently viewed" item filled an entire phone
   screen. Cap the upper bound so a card is the same size whether the rail
   holds one or twenty. */
.deals__rail{grid-auto-columns:minmax(215px,260px)}
.revs__rail{grid-auto-columns:minmax(272px,320px)}
@media (max-width:900px){
  .deals__rail{grid-auto-columns:minmax(178px,215px)}
}
@media (max-width:640px){
  .revs__rail{grid-auto-columns:minmax(240px,275px)}
}

/* ==========================================================================
   PHONE TYPE SCALE
   The desktop scale was being carried onto a 375px screen almost intact —
   section headings landed at 35px, which ate a third of the fold and pushed
   the page to nearly 11,000px. Everything below is one step down, and the
   section rhythm tightens with it. Body copy stays at 15px: shrinking what
   people actually read is where "compact" turns into "unreadable".
   ========================================================================== */
@media (max-width:640px){
  .d1{font-size:1.75rem;letter-spacing:-.035em}
  .d2{font-size:1.5rem;letter-spacing:-.03em;line-height:1.15}
  .d3{font-size:1.3rem;letter-spacing:-.025em}
  .d4{font-size:1.1rem}
  .lede{font-size:.85rem;line-height:1.55}
  .eyebrow{font-size:.62rem;letter-spacing:.11em}

  .slide__h{font-size:1.4rem}
  .slide__sub{font-size:.82rem}
  .slide__cta{padding:.6rem 1.2rem;font-size:.78rem}
  .slide{padding-block:1.5rem 2.25rem}

  .find__h{font-size:1.6rem}
  .find__sub{font-size:.82rem}

  .deals__h,.dealhero__h{font-size:1.25rem}
  .deals__clock{font-size:.82rem;padding:.25rem .5rem}
  .deals__timer-label,.revs__count{font-size:.68rem}
  .revs__num{font-size:1.6rem}
  .revs__lede{font-size:.8rem}

  .acct__h{font-size:.92rem}
  .pcard-promo{min-height:12.5rem;padding:1.1rem}
  .pcard-promo__in{max-width:88%}
  .pcard-promo__art{width:56%}
  .pcard-promo__h{font-size:1.3rem}
  .pcard-promo__p{font-size:.76rem}
  .about__facts strong{font-size:.82rem}

  /* the rhythm between blocks, not just the type */
  .section{padding-block:2rem}
  .deals,.revs,.cards{padding-block:1.75rem}
  .about{padding-block:2rem;margin-top:1.5rem}
  .section-head{margin-bottom:1rem}
}

/* ---- phone header: smaller words, shallower bar ------------------------
   The wordmark, the search field and the category links were all running at
   desktop sizes, which made the header 144px — nearly a fifth of the screen
   before any content. Smaller type also fits two more categories in the bar
   without scrolling. */
@media (max-width:640px){
  .mast__in .logo__mark{width:28px;height:28px}
  .logo__txt{font-size:.82rem;letter-spacing:-.01em}
  .mast__in{padding:.4rem 1rem;gap:.35rem .45rem}
  .hsearch{height:36px;border-width:1.5px}
  .hsearch__in{font-size:.8rem;padding:0 .7rem}
  .hsearch__go{width:42px}
  .hsearch__go svg{width:16px;height:16px}
  .mact svg{width:19px;height:19px}
  .catbar__in{height:34px;padding-inline:1rem}
  .catbar__in a{padding:0 .6rem;font-size:.72rem}
}

/* ---- phone product cards -------------------------------------------------
   The card kept desktop type on a 172px-wide column, so two cards filled the
   whole screen. One step down across the card lets a third row show above the
   fold without the specs becoming unreadable. */
@media (max-width:640px){
  .pcard__brand{font-size:.6rem;letter-spacing:.09em}
  .pcard__name{font-size:.76rem;line-height:1.3}
  .pcard__specs li{font-size:.66rem;line-height:1.35;padding-left:.6rem}
  .pcard__specs{margin-top:.35rem;gap:.1rem}
  .pcard__body{padding:.6rem .65rem .7rem}
  .price{font-size:.84rem}
  .pcard__cur{font-size:.6rem}
  .pcard__was-sm{font-size:.66rem}
  .pcard__act{margin-top:.55rem;padding-top:.5rem;row-gap:.4rem}
  .pcard__add{font-size:.7rem;padding:.45rem .6rem}
  .pcard__cmp{font-size:.66rem}
  .pcard__cmp input{width:13px;height:13px}
  .tag{font-size:.62rem;padding:.2rem .5rem}
  .dcard__name{font-size:.74rem}
  .dcard__now{font-size:.84rem}
  .dcard__was,.dcard__save{font-size:.66rem}
  .dcard__brand{font-size:.6rem}
  .rev__txt{font-size:.78rem;line-height:1.5}
  .rev__id strong{font-size:.76rem}
  .rev__id em{font-size:.64rem}
}


/* ==========================================================================
   LOCK THE PAGE HORIZONTALLY ON TOUCH
   The document is exactly the width of the viewport, so the sideways movement
   was not overflow — it was gesture chaining. Swipe a rail (the category bar,
   the deal cards, the reviews) past its end and the browser hands the rest of
   that gesture to the page, which then rubber-bands or drifts sideways. On
   iOS it can also trigger a back-navigation.

   Two rules fix it: the page only pans vertically, and each rail keeps its own
   horizontal gesture instead of passing it on. `pinch-zoom` is kept so people
   who need to zoom still can.
   ========================================================================== */
html{overscroll-behavior-x:none;overflow-x:clip}
body{
  overscroll-behavior-x:none;
  touch-action:pan-y pinch-zoom;
  width:100%;
}
/* Rails opt back in to horizontal panning, but contain it. */
.catbar__in,
.util__nav,
.strip__row,
.deals__rail,
.revs__rail,
.gallery__thumbs,
.cmp-scroll,
.promo__track,
.grid-products.is-list{
  touch-action:pan-x pan-y pinch-zoom;
  overscroll-behavior-x:contain;
}
/* The banner is swiped between slides, so it must not pass the gesture on. */
.promo__stage{overscroll-behavior-x:contain}

/* ==========================================================================
   SHOP ADMIN
   Deliberately plainer than the storefront: this is a work screen, and the
   person using it is scanning a list, not being sold to.
   ========================================================================== */
.adm__bar{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.adm__search{
  flex:1 1 18rem;min-width:0;height:42px;padding:0 .9rem;
  border:1px solid var(--rule);border-radius:3px;background:var(--linen);
  font:inherit;font-size:.875rem;color:var(--ink);outline:none;
}
.adm__search:focus{border-color:var(--ink)}
.adm__count{font-size:.8rem;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.adm__msg{margin:0 0 .75rem;min-height:1.2em;font-size:.8rem}
.adm__msg.is-ok{color:var(--ink-soft)}
.adm__msg.is-bad{color:var(--brand);font-weight:500}

.adm__list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.adm__item{
  display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;
  padding:.6rem .4rem;border:0;border-bottom:1px solid var(--rule);
  background:none;cursor:pointer;font:inherit;
}
.adm__item:hover{background:var(--paper)}
.adm__thumb{
  width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;
  background:#FFF;border:1px solid var(--rule);border-radius:3px;padding:.2rem;
}
.adm__thumb img{max-width:100%;max-height:100%;object-fit:contain}
.adm__info{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.adm__info strong{font-size:.82rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm__info em{font-style:normal;font-size:.7rem;color:var(--ink-mute)}
.adm__meta{display:flex;align-items:center;gap:.45rem;flex-shrink:0}
.adm__meta b{font-size:.8rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.adm__flag{
  font-style:normal;font-size:.66rem;font-weight:700;padding:.15rem .4rem;border-radius:3px;
  background:var(--brand);color:#1B1B1B;
}
.adm__flag--out{background:var(--rule);color:var(--ink-mute)}
.adm__hint{margin:.6rem 0 0;font-size:.72rem;color:var(--ink-mute)}
.adm__label{margin:0 0 .5rem;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-mute)}

/* ---- the editing panel ---- */
.adm__scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.45)}
.adm__edit{
  position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(94vw,32rem);
  background:var(--linen);border-left:1px solid var(--rule);
  box-shadow:var(--shadow-panel);overflow-y:auto;overscroll-behavior:contain;
  padding:1.25rem 1.35rem 2rem;
}
.adm__edit-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:1rem;
}
.adm__form{display:flex;flex-direction:column;gap:.85rem}
.adm__row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.adm__form textarea{
  border:1px solid var(--rule);border-radius:3px;background:var(--canvas);
  font:inherit;font-size:.85rem;color:var(--ink);padding:.6rem .7rem;resize:vertical;
}
.adm__form textarea:focus{outline:none;border-color:var(--ink)}
.adm__photos,.adm__deal{
  border-top:1px solid var(--rule);padding-top:1rem;margin-top:.35rem;
}
.adm__thumbs{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:.7rem}
.adm__ph{
  position:relative;width:96px;height:96px;display:grid;place-items:center;
  background:#FFF;border:1px solid var(--rule);border-radius:3px;padding:.25rem;
}
.adm__ph.is-lead{border-color:var(--ink)}
.adm__ph img{max-width:100%;max-height:100%;object-fit:contain}
.adm__ph em{
  position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:.6rem;
  text-align:center;background:var(--ink);color:var(--canvas);padding:.1rem;
}
.adm__ph-x{
  position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  border:0;cursor:pointer;background:var(--ink);color:var(--canvas);
  font-size:.8rem;line-height:1;
}
.adm__ph-lead{
  position:absolute;left:0;right:0;bottom:0;border:0;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 80%,transparent);color:var(--canvas);
  font:inherit;font-size:.58rem;padding:.15rem;
}
.adm__drop{
  display:grid;place-items:center;padding:1.1rem;cursor:pointer;
  border:1.5px dashed var(--rule);border-radius:4px;
  font-size:.8rem;color:var(--ink-mute);text-align:center;
  transition:border-color .2s var(--ease-soft),color .2s var(--ease-soft);
}
.adm__drop:hover,.adm__drop.is-over{border-color:var(--ink);color:var(--ink)}
.adm__acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
@media (max-width:640px){
  .adm__row{grid-template-columns:1fr}
  .adm__edit{width:100vw;padding:1rem 1rem 2rem}
}
/* Removing a product is permanent, so it lives away from Save and reads as a
   different kind of action — not a second button competing with it. */
.adm__danger{border-top:1px solid var(--rule);margin-top:1.25rem;padding-top:1rem}
.adm__danger-go{color:var(--ink-mute)}
.adm__danger-go:hover{color:var(--brand)}
.adm__danger-confirm{
  margin-top:.75rem;padding:.9rem 1rem;border-radius:4px;
  border:1px solid var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent);
}
.adm__danger-confirm p{margin:0 0 .8rem;font-size:.8rem;line-height:1.55;color:var(--ink)}
.adm__bar #admNew{flex-shrink:0}

/* ---- staff entry points ------------------------------------------------- */
.util__admin{color:var(--brand)!important;font-weight:600}
.drawer__link--staff span{color:var(--brand);font-weight:600}
.staffcard{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.15rem;border:1px solid var(--brand);border-radius:4px;
  background:color-mix(in srgb,var(--brand) 7%,transparent);
  transition:background-color .2s var(--ease-soft);
}
.staffcard:hover{background:color-mix(in srgb,var(--brand) 13%,transparent)}
.staffcard__icon{
  width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;
  background:var(--brand);color:#1B1B1B;
}
.staffcard__icon svg{width:19px;height:19px}
.staffcard__txt{display:flex;flex-direction:column;gap:.1rem;flex:1;min-width:0}
.staffcard__txt strong{font-size:.9rem;font-weight:700;color:var(--ink)}
.staffcard__txt em{font-style:normal;font-size:.78rem;line-height:1.5;color:var(--ink-soft)}
.staffcard__go{font-size:1.1rem;color:var(--ink);flex-shrink:0}


/* ==========================================================================
   MOTION, BELOW THE DESKTOP
   The client's report was "the website on the phone is not locked in place,
   when I swipe it moves". Measured: 62 elements on the homepage each carry
   [data-reveal], which slides them up 46px over 1.5 seconds as they enter the
   viewport. On a desktop, scrolled slowly with a wheel, that reads as polish.
   On a phone, where a flick crosses six of those at once, it reads as a page
   that will not settle.

   So on phones and tablets everything arrives already in place. The test is
   width OR the absence of a hover-capable pointer, because a 1194px iPad in
   landscape is a touch screen with the same problem as a 375px phone.

   The scroll-linked parallax goes too, for the same reason: an element whose
   position is a function of scroll offset is, by definition, not locked to
   the page.
   ========================================================================== */
@media (max-width:1023px), (hover:none){
  [data-reveal],
  [data-reveal].is-in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    will-change:auto;
  }
  .mask>span{
    transform:none !important;
    transition:none !important;
  }
  [data-parallax]{
    transform:none !important;
  }
  /* Smooth scrolling is a desktop affordance. On a touch screen the browser's
     own momentum is the thing the finger expects, and a scripted smooth jump
     on top of it is the second half of "it moves". */
  html{scroll-behavior:auto}
}


/* ==========================================================================
   TABLET
   The phone rules used to start at 768px, which is exactly an iPad in
   portrait. So a tablet was served 9.8rem product columns — phone-width
   cards — while the type inside them stayed at the desktop scale, because
   the type pass is scoped to 640px. Four cramped columns with "Add to cart"
   wrapping onto three lines was the result.

   Phones now keep the narrow grid on their own, and the band between them
   and the desktop gets a layout of its own: three comfortable columns, a
   two-column footer, and rails sized for the extra width.
   ========================================================================== */
@media (max-width:640px){
  .grid-products{grid-template-columns:repeat(auto-fill,minmax(min(100%,9.8rem),1fr));gap:.75rem}
  .grid-products.is-list .pcard{flex-direction:column}
  .grid-products.is-list .pcard__media{width:100%;aspect-ratio:1}
}

@media (min-width:641px) and (max-width:1024px){
  /* Three across, and explicitly repeat(3) rather than auto-fill: auto-fill
     at this width lands on four columns at 1024 and three at 800, which is
     how a grid changes shape halfway through a rotation. */
  .grid-products{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .grid-products.is-list{grid-template-columns:1fr}

  /* The card's own type, one step between the phone scale and the desktop. */
  .pcard__name{font-size:.92rem;line-height:1.35}
  .pcard__specs li{font-size:.74rem}
  .pcard__add{font-size:.78rem;padding:.55rem .75rem;white-space:nowrap}
  .price{font-size:1rem}

  .deals__rail{grid-auto-columns:minmax(200px,238px)}
  .strip__row{grid-auto-columns:minmax(108px,1fr)}
  .shoot{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:2rem}

  /* Two panes side by side is the point of a tablet; one wide column of
     prose is not. */
  .about__in{grid-template-columns:1.15fr 1fr;gap:2rem}
}


/* ---- admin: filter chips, photo ordering ------------------------------- */
.adm__chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem}
.adm__chip{
  height:32px;padding:0 .85rem;border:1px solid var(--rule);border-radius:var(--r-pill);
  background:var(--linen);color:var(--ink-soft);font-size:.78rem;font-weight:500;
  transition:border-color .15s var(--ease-soft),color .15s var(--ease-soft);
}
@media (hover:hover){.adm__chip:hover{border-color:var(--ink);color:var(--ink)}}
.adm__chip.is-on{background:var(--invert);border-color:var(--invert);color:var(--invert-ink)}

.adm__flag--thin{background:color-mix(in srgb,var(--brand) 18%,transparent);color:var(--ink)}
.adm__label-n{font-weight:400;color:var(--ink-mute);font-size:.76rem;margin-left:.4rem}

/* The reorder pair sits on the thumbnail itself, big enough for a thumb on a
   phone. Top-left, because the bottom strip is already the Main label and the
   top-right corner is the remove button. Arrows, not drag: a drag handle
   inside a scrolling panel on a touch screen competes with the scroll for the
   same gesture. */
.adm__ph-move{
  position:absolute;left:3px;top:3px;display:flex;gap:3px;
}
.adm__ph-move button{
  width:26px;height:26px;display:grid;place-items:center;
  border-radius:3px;font-size:.85rem;line-height:1;
  background:color-mix(in srgb,var(--canvas) 88%,transparent);
  border:1px solid var(--rule);color:var(--ink);
}
.adm__ph-move button[disabled]{opacity:.3;pointer-events:none}
@media (hover:hover){.adm__ph-move button:hover{background:var(--invert);color:var(--invert-ink);border-color:var(--invert)}}


/* ---- admin: the customer list ------------------------------------------ */
.adm__people-head{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:1.5rem;margin-top:2rem;margin-bottom:1rem;
}
.adm__people-head .acct__h{margin:0}
.adm__people-head .adm__hint{flex:1 1 12rem;margin:0}
.adm__people{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.adm__person{
  display:flex;align-items:center;gap:1rem;padding:.7rem .9rem;background:var(--linen);
}
.adm__person .adm__info{flex:1 1 0;min-width:0}
.adm__flag--ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ink)}
@media (max-width:640px){
  .adm__people-head{flex-direction:column;align-items:flex-start;gap:.6rem}
  .adm__person{flex-wrap:wrap;gap:.4rem}
}


/* ==========================================================================
   iPHONE ZOOM LOCK
   Safari on iPhone zooms the whole page in when you tap a text box whose type
   is smaller than 16px, and leaves it zoomed — the header cut off on the left,
   headings running off the right. Every field on the site was 12.5-14px, so
   tapping the search bar was enough. 16px on touch screens stops it without
   disabling pinch-zoom for people who need it.
   ========================================================================== */
@media (hover:none),(max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,textarea{font-size:16px!important}
}

/* ==========================================================================
   ADDED TO CART
   The confirmation the reference retailer shows after Add to cart: what went
   in, the cart count, View cart, and a short "goes well with it" row. A bottom
   sheet on a phone (the thumb is already there), a card under the header on
   a desktop. Colours come from the same tokens as every other surface.
   ========================================================================== */
.added{position:fixed;inset:0;z-index:95;pointer-events:none}
.added__scrim{
  position:absolute;inset:0;background:rgba(0,0,0,.42);
  opacity:0;transition:opacity .3s var(--ease-soft);
}
.added__panel{
  position:absolute;right:1.25rem;top:calc(var(--hdr) + .75rem);
  width:min(26rem,calc(100vw - 2.5rem));max-height:calc(100svh - var(--hdr) - 1.5rem);
  overflow:auto;overscroll-behavior:contain;
  background:var(--canvas);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r-3xl);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  padding:1.1rem 1.1rem 1.25rem;
  opacity:0;transform:translateY(-10px);
  transition:opacity .3s var(--ease-soft),transform .35s var(--ease);
}
.added.is-on{pointer-events:auto}
.added.is-on .added__scrim{opacity:1}
.added.is-on .added__panel{opacity:1;transform:none}
.added__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.added__title{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem}
.added__title svg{width:20px;height:20px;padding:3px;border-radius:50%;background:#2E8B57;color:#fff;flex-shrink:0}
.added__x{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--ink-soft)}
.added__x:hover{background:var(--paper)}
.added__x svg{width:18px;height:18px}
.added__item{display:grid;grid-template-columns:76px minmax(0,1fr);gap:.9rem;align-items:center;
  padding:.8rem;border:1px solid var(--rule);border-radius:var(--r-xl)}
.added__img{display:block;aspect-ratio:1;background:#F4F4F4;border-radius:3px;overflow:hidden}
.added__img img{width:100%;height:100%;object-fit:contain;padding:8%}
.added__name{font-size:.88rem;line-height:1.35;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.added__price{margin-top:.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.added__price span{font-weight:400;color:var(--ink-mute)}
.added__cta{display:grid;gap:.55rem;margin-top:.9rem}
.added__n{font-weight:400;opacity:.8}
.added__sub{margin:1.2rem 0 .6rem;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.added__rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(8.2rem,1fr);gap:.6rem;
  overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem}
.added__rail::-webkit-scrollbar{display:none}
.added__acc{display:flex;flex-direction:column;gap:.35rem;padding:.55rem;border:1px solid var(--rule);border-radius:var(--r-xl);min-width:0}
.added__acc img{width:100%;aspect-ratio:1;object-fit:contain;background:#F4F4F4;border-radius:3px;padding:6%}
.added__accn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.74rem;line-height:1.3;margin-top:.35rem}
.added__accp{font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:auto}
.added__accb{font-size:.74rem;font-weight:600;padding:.45rem .3rem;border:1px solid var(--ink);border-radius:3px;color:var(--ink)}
.added__accb:hover{background:var(--ink);color:var(--canvas)}
.added__accb:disabled{opacity:.55;border-color:var(--rule);background:transparent;color:var(--ink-mute)}
body.is-added{overflow:hidden}
body.is-added .orb,body.is-added .toasts{visibility:hidden}
@media (max-width:640px){
  .added__panel{
    left:0;right:0;top:auto;bottom:0;width:auto;max-height:86svh;
    border-radius:12px 12px 0 0;border-bottom:0;
    padding:1rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
    transform:translateY(100%);
  }
}
@media (prefers-reduced-motion:reduce){.added__panel,.added__scrim{transition:none}}

/* ==========================================================================
   COMPARE BAR
   Rises from the bottom once one item is picked to compare. Everything else
   that lives at the bottom edge — the Fope orb, the product page's sticky buy
   bar, toasts — steps up by the bar's height while it is showing.
   ========================================================================== */
:root{--cmpbar:0px}
body.has-cmpbar{--cmpbar:68px}
.cmpbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--canvas);border-top:1px solid var(--rule);
  box-shadow:0 -8px 28px rgba(0,0,0,.12);
  transform:translateY(105%);transition:transform .4s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.cmpbar.is-on{transform:none}
.cmpbar__in{max-width:var(--wrap);margin-inline:auto;height:68px;padding:0 var(--gut);
  display:flex;align-items:center;gap:.8rem}
.cmpbar__slots{display:flex;gap:.4rem;flex-shrink:0}
.cmpbar__slot{position:relative;width:46px;height:46px;border:1px solid var(--rule);border-radius:3px;background:#F4F4F4;
  display:grid;place-items:center}
.cmpbar__slot img{width:100%;height:100%;object-fit:contain;padding:4px}
.cmpbar__slot button{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  background:var(--ink);color:var(--canvas);font-size:.85rem;line-height:1;display:grid;place-items:center}
.cmpbar__slot--empty{border-style:dashed;background:transparent;color:var(--ink-mute);font-size:1.1rem}
.cmpbar__txt{display:flex;flex-direction:column;min-width:0;font-size:.82rem;line-height:1.25}
.cmpbar__txt span{color:var(--ink-mute);font-size:.74rem}
.cmpbar__clear{margin-left:auto;font-size:.78rem;color:var(--ink-mute);text-decoration:underline;text-underline-offset:3px;padding:.4rem}
.cmpbar__go{flex-shrink:0;padding:.75rem 1.1rem}
.cmpbar__go.is-off{opacity:.4;pointer-events:none}
body.has-cmpbar .orb{bottom:calc(var(--cmpbar) + 1rem)}
body.has-cmpbar .stickybuy{bottom:var(--cmpbar)}
body.has-cmpbar .toasts{bottom:calc(var(--cmpbar) + 6.2rem)}
body.has-cmpbar .ftr{padding-bottom:calc(var(--cmpbar) + 1rem)}
body.is-locked .cmpbar,body.is-added .cmpbar{visibility:hidden}
@media (max-width:640px){
  .cmpbar__in{gap:.55rem;padding:0 .75rem}
  .cmpbar__slot{width:40px;height:40px}
  .cmpbar__slots .cmpbar__slot--empty{display:none}
  .cmpbar__txt span{display:none}
  .cmpbar__go{padding:.7rem .8rem;font-size:.72rem}
}
@media print{.cmpbar{display:none!important}}

/* compare page — the in-page finder that puts a result straight into the table */
.cmpfind{margin-top:14px;border:1px solid var(--rule);border-radius:var(--r-3xl);padding:12px;background:var(--canvas)}
.cmpfind input{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--ink);border-radius:3px;
  background:var(--canvas);color:var(--ink);font:inherit;font-size:1rem}
.cmpfind__out{display:grid;gap:4px;margin-top:10px;max-height:360px;overflow:auto}
.cmpfind__hint{padding:10px 4px}
.cmpfind__row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"i n a" "i p a";
  column-gap:12px;align-items:center;text-align:left;padding:8px;border-radius:3px;width:100%}
.cmpfind__row:hover,.cmpfind__row:focus-visible{background:var(--paper)}
.cmpfind__row img{grid-area:i;width:44px;height:44px;object-fit:contain;background:#F4F4F4;border-radius:3px;padding:3px}
.cmpfind__n{grid-area:n;font-size:.86rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmpfind__p{grid-area:p;font-size:.78rem;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.cmpfind__add{grid-area:a;font-size:.78rem;font-weight:700;color:var(--ink);border:1px solid var(--ink);border-radius:3px;padding:.35rem .6rem}

/* ==========================================================================
   SEARCH SUGGESTIONS — under the header search while typing
   ========================================================================== */
.hsuggest{
  position:fixed;z-index:92;max-height:min(70svh,32rem);overflow:auto;overscroll-behavior:contain;
  background:var(--canvas);color:var(--ink);border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 16px 40px rgba(0,0,0,.18);padding:.35rem 0;
}
.hsuggest[hidden]{display:none}
.hsuggest__note{padding:.55rem .9rem;font-size:.78rem;color:var(--ink-mute);border-bottom:1px solid var(--rule)}
.hsuggest__note strong{color:var(--ink)}
.hsuggest__row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.45rem .9rem}
.hsuggest__row img{width:44px;height:44px;object-fit:contain;background:#F4F4F4;border-radius:3px;padding:3px}
.hsuggest__n{font-size:.86rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hsuggest__p{font-size:.8rem;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.hsuggest__row:hover,.hsuggest__row.is-sel,.hsuggest__all:hover,.hsuggest__all.is-sel{background:var(--paper)}
.hsuggest__all{display:block;padding:.7rem .9rem;margin-top:.25rem;border-top:1px solid var(--rule);font-size:.84rem;font-weight:600}
.hsuggest__none{padding:.9rem;display:grid;gap:.45rem;justify-items:start;font-size:.88rem}
.hsuggest__none .small{color:var(--ink-mute)}
.hsuggest__none .btn{margin-top:.3rem}
@media (max-width:640px){
  .hsuggest__p{grid-column:2;font-size:.76rem}
  .hsuggest__row{grid-template-columns:40px minmax(0,1fr);row-gap:.1rem}
  .hsuggest__row img{grid-row:span 2;width:40px;height:40px}
}
.searchnote{margin:0 0 14px;padding:.75rem 1rem;border:1px solid var(--rule);
  border-radius:3px;background:var(--canvas-deep);font-size:.88rem;line-height:1.5}
.searchnote a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.credits{padding-bottom:clamp(48px,7vw,96px)}
.credits ul{display:grid;gap:8px;margin-top:18px;font-size:.84rem;color:var(--ink-soft);max-width:80ch}
.credits a{text-decoration:underline;text-underline-offset:3px}

/* Compare on a phone: two products side by side with the row names pinned on
   the left, the third a swipe away. Before, each product column was wider
   than the screen, so you only ever saw one thing — not a comparison. */
@media (max-width:640px){
  .cmp{min-width:0;width:max-content;table-layout:fixed}
  .cmp th,.cmp td{padding:.7rem .55rem;font-size:.8rem}
  .cmp tbody th,.cmp thead th:first-child{
    position:sticky;left:0;z-index:2;background:var(--paper);
    width:5.4rem;min-width:5.4rem;max-width:5.4rem;font-size:.58rem;letter-spacing:.08em;
  }
  .cmp thead th:not(:first-child),.cmp td{
    --col:calc((100vw - 2rem - 2px - 5.4rem) / 2);
    width:var(--col);min-width:var(--col);max-width:var(--col);
  }
  .cmp thead th .btn{padding:.6rem .4rem;font-size:.66rem;letter-spacing:.06em}
}

/* ==========================================================================
   BUY COLOUR — Jay, 2026-09-28: "it doesn't have to be so black and white",
   pointing at the reference retailer, where everything that spends money is
   green and availability reads green. The same here: Add to cart, View cart,
   Send order, and "In stock". The amber stays the brand (cart count, deals).
   White on --buy is 5.6:1; --buy-ink on white is 5.9:1; on the dark ground
   the lighter ink is 7.8:1.
   ========================================================================== */
:root{
  --buy:#1F7A36;  --buy-hi:#17662B;  --buy-ink:#1B7431;  --buy-soft:#E9F5EC;
  --star:#E6A817;
}
:root[data-theme="dark"]{
  --buy:#23873D;  --buy-hi:#2B9A48;  --buy-ink:#62CF82;  --buy-soft:#1C2A20;
}
.pcard__add,.btn--cart,.added__cta .btn:not(.btn--ghost),#placeBtn,.cmpbar__go{
  background:var(--buy);color:#fff;
}
.pcard__add:hover,.added__cta .btn:not(.btn--ghost):hover,#placeBtn:hover,.cmpbar__go:hover{background:var(--buy-hi)}
@media (hover:hover){.btn--cart:hover{background:var(--buy-hi)}}
.pcard__add.is-done,.btn--cart.is-done{background:var(--buy-hi);color:#fff}
.added__accb{border-color:var(--buy);color:var(--buy-ink)}
.added__accb:hover{background:var(--buy);color:#fff}

/* availability */
.tag--stock{color:var(--buy-ink);border-color:color-mix(in srgb,var(--buy) 40%,transparent);background:var(--buy-soft)}
.tag--stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pcard__media.has-photo .tag--stock{background:var(--buy);border-color:var(--buy);color:#fff}
.added__title svg{background:var(--buy)}

/* the shop's real Google rating, shown with stars */
.shoprating{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--ink-soft);flex-wrap:wrap}
.shoprating a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.stars{position:relative;display:inline-block;font-size:.95rem;line-height:1;letter-spacing:1px;color:color-mix(in srgb,var(--ink) 18%,transparent)}
.stars::before{content:"★★★★★"}
.stars i{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;color:var(--star);font-style:normal}
.stars i::before{content:"★★★★★"}
.shoprating strong{color:var(--ink);font-weight:700}
.pdp__trust{display:grid;gap:.5rem;margin:-10px 0 22px;padding:.8rem .95rem;border:1px solid var(--rule);border-radius:3px;background:var(--canvas-deep);font-size:.82rem}
.pdp__trust p{display:flex;gap:.5rem;align-items:flex-start;color:var(--ink-soft)}
.pdp__trust svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--buy-ink)}
.pdp__trust strong{color:var(--buy-ink);font-weight:700}
.added__trust{margin-top:.8rem}

/* ==========================================================================
   PHONE LOCK — Jay, 2026-09-28: "lock the website so it doesn't move, lag".
   Measured causes, all fixed here or in js/app.js:
   - the three-row header slid out and back on each change of scroll
     direction (app.js now leaves it in place on touch screens)
   - ten frosted-glass blurs, one on every product card's stock tag, which a
     phone re-computes on every scrolled frame. On touch screens every blur
     becomes a plain solid surface — it looks the same at a glance and scrolls
     smoothly.
   - double-tap zoom and the elastic bounce at the page edges, both of which
     shift the page under the thumb
   ========================================================================== */
@media (hover:none),(max-width:900px){
  html,body{overscroll-behavior:none}
  html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hdr::before{background:var(--canvas)}
  .fope{background:var(--canvas)}
  .stickybuy{background:var(--canvas)}
  .glass{background:var(--paper)}
  .hdr.is-hidden{transform:none!important}
}
body.fope-open{overflow:hidden}
body.fope-open .cmpbar{visibility:hidden}
.pcard__add--out{background:var(--paper)!important;color:var(--ink)!important;border:1px solid var(--rule);text-align:center;display:block}
.adm__seed{display:grid;gap:12px;justify-items:start;margin:0 0 18px;padding:16px;border:1px solid var(--buy);border-radius:4px;background:var(--buy-soft);font-size:.9rem;line-height:1.55}
.adm__seed .btn{background:var(--buy);color:#fff}

/* home page heading (for search) and the plain-facts block at the foot */
.homeh{padding:.9rem 0 .2rem}
.homeh__h{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.homeh__h span{font-weight:400;color:var(--ink-soft)}
.seoabout{padding-top:0}
.seoabout__cols{display:grid;gap:1rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:1rem;
  font-size:.92rem;line-height:1.7;color:var(--ink-soft);max-width:1100px}
.seoabout a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.seoabout__links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.25rem;font-size:.88rem;font-weight:600}

/* currency switch (header) — two codes, the one in use filled */
.curbtn{display:inline-flex;align-items:center;gap:0;padding:2px;border:1px solid var(--rule);border-radius:999px;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;color:var(--ink-mute);margin-right:.2rem}
.curbtn span{padding:.28rem .45rem;border-radius:999px;line-height:1}
.curbtn span.is-on{background:var(--ink);color:var(--canvas)}
.curbtn:hover{border-color:var(--ink)}
.curnote{margin:-.2rem 0 1rem;font-size:.78rem;line-height:1.5;color:var(--ink-mute)}
.srow + .curnote,#summary .curnote{margin:.6rem 0 0}
@media (max-width:900px){.curbtn{font-size:.6rem}.curbtn span{padding:.26rem .36rem}}
/* phones: the light/dark switch lives in the menu (Appearance), which frees
   the header space the currency switch needs to stay on one row */
@media (max-width:900px){ .mast__actions .themebtn{display:none} }

/* ==========================================================================
   PRODUCT LABELS, RATINGS, SHIPPING — after the reference retailer
   New Release: solid green. Special Order / Coming Soon / Pre-order: amber
   with a "!" (it is not on the shelf today). In stock: green tick.
   ========================================================================== */
:root{--warn:#C25E00}
:root[data-theme="dark"]{--warn:#F0A04B}
.stag{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:999px;
  font-size:.68rem;font-weight:700;line-height:1.1;background:var(--canvas);border:1px solid var(--rule);color:var(--ink)}
.stag svg{width:13px;height:13px;flex-shrink:0}
.stag.is-stock{color:var(--buy-ink);background:var(--buy-soft);border-color:color-mix(in srgb,var(--buy) 40%,transparent)}
.stag.is-new{background:var(--buy);border-color:var(--buy);color:#fff;border-radius:3px}
.stag.is-special,.stag.is-coming,.stag.is-pre{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--canvas)}
.stag.is-out{color:var(--ink-mute);background:var(--paper)}
.pcard__media .stag{box-shadow:0 1px 3px rgba(0,0,0,.08)}
.stag--pdp{font-size:.74rem;padding:.35rem .7rem}

.prate{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:.45rem;font-size:.8rem;color:var(--ink-soft)}
.prate b{color:var(--ink)}
.prate__src{color:var(--ink-mute)}
.prate--sm{margin-top:.3rem;font-size:.72rem}
.prate--sm .stars{font-size:.8rem}

.pcard__save,.pdp__save{color:var(--buy-ink);font-weight:700;font-size:.78rem;margin-top:.2rem}
.pdp__save{font-size:.9rem;margin:-.4rem 0 .8rem}
.pcard__ship{margin-top:.45rem;font-size:.72rem;line-height:1.4;color:var(--warn);font-weight:600}

.pdp__ship{margin:0 0 1.1rem;padding:.75rem .9rem;border:1px solid var(--rule);border-radius:3px}
.pdp__ship-h{display:flex;align-items:center;gap:.45rem;font-weight:700;color:var(--buy-ink);font-size:.95rem}
.pdp__ship-h svg{width:20px;height:20px}
.pdp__ship-l{margin-top:.35rem;color:#1a5fb4;font-size:.86rem}
:root[data-theme="dark"] .pdp__ship-l{color:#79aef2}
.pdp__ship-a{margin-top:.2rem;color:var(--ink-mute);font-size:.84rem}

.citem__avail{font-size:.74rem;color:var(--ink-mute);margin-top:.2rem}

/* account: delivery countdown on an order */
.ship{margin-top:.6rem;max-width:30rem}
.ship__bar{height:6px;border-radius:999px;background:var(--paper);overflow:hidden;border:1px solid var(--rule)}
.ship__bar i{display:block;height:100%;background:var(--buy);border-radius:999px}
.ship__t{margin-top:.4rem;font-size:.82rem;color:var(--ink)}
.ship__t span{color:var(--ink-mute)}
.ship__n{font-size:.7rem;color:var(--ink-mute);margin-top:.15rem}
/* dollar cents, raised small — "$4,898⁰⁰" */
sup.cents{font-size:.55em;vertical-align:.55em;margin-left:.05em;font-weight:inherit;letter-spacing:0}
.pcard__ship{color:var(--ink-soft);font-weight:500}