/* Adapted from design/src/v4.html, the shop front as signed off.
 *
 * Kept as close to that source as possible so it can be re-copied when the
 * design changes. Two classes of edit have been made here, both marked with a
 * comment at the rule:
 *
 * 1. Scoping. The mockup was self-contained, so generic names like .cart were
 *    safe. Alongside WooCommerce they are not, because its cart TABLE also
 *    carries class="cart" and inherited the header basket button's orange
 *    background. Such rules are scoped to the element they were written for.
 *
 * 2. The mobile hero, inside @media (max-width:1000px). The signed-off source
 *    dropped the hero photograph back into the flow on small screens, where it
 *    landed above the header and cost the whole first screen. Changed with the
 *    client on 6 September 2026; desktop is untouched.
 */

/* ------------------------------------------------------------------
   Indie Vintage : full theme
   A deliberate single-look design: one warm daylight world, matching
   the supplied reference. No dark variant, so every colour below is
   painted explicitly rather than inherited from the host theme.
   ------------------------------------------------------------------ */
:root{
  --tan:#E7DAC1; --tint:#F7F3EA; --white:#FFFFFF;
  --ink:#131313; --ink-2:#242424;
  --muted:#63615C; --muted-2:#8B877F;
  --orange:#FF5A1E;
  --line:rgba(19,19,19,.10); --line-2:rgba(19,19,19,.16);
  --line-dark:rgba(255,255,255,.14);
  --r-card:22px; --r-tile:9px;
  --edge:clamp(7px,.75vw,14px);
  --pad:clamp(1.25rem,3vw,2.6rem);
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:var(--edge);background:#8E8677;color:var(--ink);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,dt,table{margin:0}
ul,ol{list-style:none;padding:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2.5px solid var(--orange);outline-offset:3px}

.bg{position:fixed;inset:0;z-index:0;background:#8E8677 center/cover no-repeat;
  filter:blur(9px) saturate(.9) brightness(.92);transform:scale(1.06)}
.bg::after{content:"";position:absolute;inset:0;background:rgba(60,52,40,.16)}

.shell{position:relative;z-index:1;max-width:1840px;margin:0 auto;
  border-radius:var(--r-card);overflow:hidden;background:var(--white);
  box-shadow:0 30px 70px rgba(28,22,14,.30),0 4px 14px rgba(28,22,14,.16)}

/* ---------- shared furniture ---------- */
.sec{padding:clamp(2.6rem,4.6vw,4.4rem) var(--pad)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.eyebrow{display:flex;align-items:center;gap:.5rem;color:var(--orange);
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem}
.eyebrow i{width:.5rem;height:.5rem;border-radius:50%;background:var(--orange);flex:none}
h2{font-size:clamp(1.7rem,3.1vw,2.7rem);font-weight:700;line-height:1.1;letter-spacing:-.022em;text-wrap:balance}
h3{font-size:1.05rem;font-weight:600;line-height:1.35}
.lede{max-width:32rem;font-size:clamp(.92rem,1.05vw,1rem);line-height:1.6;color:var(--muted);margin-top:.8rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  height:clamp(46px,3.6vw,54px);padding:0 clamp(1.5rem,2.4vw,2.3rem);border-radius:999px;
  background:var(--ink);color:var(--white);
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--ink-2);transform:translateY(-1px)}
.btn.on-dark{background:var(--white);color:var(--ink)}
.btn.on-dark:hover{background:#EDE7DB}
.btn.wide{width:100%}
.btn.orange{background:var(--orange)}
.btn.orange:hover{background:#FF6D37}
.btn[disabled]{background:#C9C4BA;cursor:not-allowed;transform:none}
.link-pill{display:inline-flex;align-items:center;gap:.55rem;height:42px;padding:0 1.15rem;
  border-radius:999px;border:1px solid var(--line);color:var(--ink);
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.link-pill:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.underlink{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.underlink:hover{text-decoration-color:var(--orange);color:var(--orange)}

/* ---------- header ---------- */
.top{position:relative;background:var(--tan);padding:0 var(--pad) clamp(1.75rem,3.4vw,2.6rem)}
.top.plain{padding-bottom:0}
.hdr{position:relative;z-index:3;display:flex;align-items:center;gap:1rem;
  padding:clamp(1.15rem,2.2vw,1.6rem) 0}
.logo{display:inline-flex;align-items:center;gap:.42rem;font-weight:700;
  font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:.005em;white-space:nowrap}
.logo .disc{width:.62em;height:.62em;border-radius:50%;background:var(--orange);
  box-shadow:inset 0 0 0 .14em var(--tan)}
.foot .logo .disc{box-shadow:inset 0 0 0 .14em var(--ink)}
.search{flex:1;max-width:470px;margin:0 auto;position:relative;display:flex;align-items:center}
.search input{width:100%;height:clamp(42px,3.4vw,50px);border-radius:999px;border:1px solid transparent;
  background:var(--white);color:var(--ink);font-size:.94rem;padding:0 3rem 0 1.35rem}
.search input::placeholder{color:#9A968E}
.search input:focus{outline:none;border-color:var(--ink)}
.search .go{position:absolute;right:.45rem;display:grid;place-items:center;
  width:2.25rem;height:2.25rem;border-radius:50%;color:var(--ink)}
.search .go:hover{background:rgba(19,19,19,.07)}
.actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.icon-btn{width:clamp(42px,3.4vw,50px);height:clamp(42px,3.4vw,50px);border-radius:50%;
  display:grid;place-items:center;transition:transform .18s ease,filter .18s ease}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn.cart{background:var(--orange);color:var(--white);position:relative}
.icon-btn.cart:hover{filter:brightness(1.07)}
.icon-btn.cart .count{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;border-radius:999px;
  background:var(--ink);color:var(--white);font-size:.6rem;font-weight:600;
  display:grid;place-items:center;padding:0 5px;border:2px solid var(--tan)}
.avatar{background:#D8C9AE;color:#6B5F49;box-shadow:inset 0 0 0 1px rgba(19,19,19,.08)}
.menu-btn{display:inline-flex;align-items:center;gap:.6rem;height:clamp(42px,3.4vw,50px);
  padding:0 clamp(1rem,1.5vw,1.35rem);border-radius:999px;background:var(--ink);color:var(--white);
  font-size:.92rem;font-weight:500;transition:background .18s ease}
.menu-btn:hover{background:var(--ink-2)}
.menu-panel{position:absolute;top:calc(100% - .35rem);right:0;z-index:20;
  background:var(--white);border-radius:16px;padding:.55rem;min-width:230px;
  box-shadow:0 22px 44px rgba(28,22,14,.22);display:none}
.menu-panel[data-open="true"]{display:block}
.menu-panel a{display:block;padding:.7rem .9rem;border-radius:10px;font-size:.94rem;font-weight:500}
.menu-panel a:hover{background:#F3EFE7}
.menu-panel hr{border:0;border-top:1px solid var(--line);margin:.45rem .9rem}
/* Declared here, before @media (max-width:720px), and not after it. Same
   specificity as the mobile rule, so source order decides: below the query it
   won everywhere and the close button never rendered on the one layout that
   needs it — a fullscreen panel covering the toggle that opened it. */
.menu-close{display:none}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  align-items:start;gap:2rem;padding:clamp(1rem,2.6vw,2.4rem) 0 clamp(2.5rem,5vw,4rem)}
.hero h1{font-size:clamp(2.1rem,4.9vw,4.05rem);font-weight:700;line-height:1.06;
  letter-spacing:-.025em;text-wrap:balance;margin-bottom:clamp(1rem,1.8vw,1.5rem)}
.hero p{max-width:27rem;font-size:clamp(.94rem,1.1vw,1.03rem);line-height:1.6;color:var(--muted)}
/* Multiply drops the shot's white studio ground out against the tan, so it
   reads as a cut-out without anyone masking the file by hand. It must be a
   direct child of .top: .hero sets a z-index and so opens a stacking context,
   and a blend mode only sees backdrop painted inside its own context. */
.hero-img{position:absolute;z-index:1;top:0;right:2.5%;
  height:clamp(270px,32vw,450px);width:auto;mix-blend-mode:multiply;pointer-events:none}

/* ---------- category tiles ---------- */
/* One row height for every tile, wide first column. Per-tile aspect-ratio
   would make the wide tile taller than its neighbours. */
.cats{position:relative;z-index:2;display:grid;
  grid-template-columns:1.62fr 1fr 1fr 1fr;gap:clamp(.6rem,1vw,.95rem);
  grid-auto-rows:clamp(185px,20.5vw,268px)}
.tile{position:relative;border-radius:var(--r-tile);overflow:hidden;height:100%;background:#D9CDB4;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.tile:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(28,22,14,.2)}
.tile:hover img{transform:scale(1.045)}
.pill{position:absolute;left:clamp(.7rem,1.1vw,1.1rem);bottom:clamp(.7rem,1.1vw,1.1rem);
  background:var(--white);color:var(--ink);border-radius:999px;
  padding:.72rem clamp(1.15rem,2vw,2rem);white-space:nowrap;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(28,22,14,.13)}

/* ---------- editorial band ---------- */
.band{background:var(--white);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.55fr);
  gap:clamp(1.5rem,3.5vw,3.25rem);align-items:center;
  padding:clamp(2.5rem,4.6vw,3.9rem) var(--pad) clamp(2.75rem,5vw,4.25rem)}
.band-media{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(.6rem,1vw,.95rem);grid-auto-rows:clamp(215px,24vw,305px)}
.band-media figure{position:relative;border-radius:var(--r-tile);overflow:hidden;height:100%;background:#E9E4DA}
.band-media img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:clamp(.9rem,1.6vw,1.5rem);top:50%;transform:translateY(-50%);
  width:clamp(42px,3.6vw,54px);height:clamp(42px,3.6vw,54px);border-radius:50%;
  background:var(--white);color:var(--ink);display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(28,22,14,.24);transition:transform .2s ease}
.play:hover{transform:translateY(-50%) scale(1.07)}

/* ---------- product cards ---------- */
.shop{background:var(--tint)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.85rem,1.4vw,1.35rem)}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(28,22,14,.14)}
.pshot{position:relative;aspect-ratio:4/4.6;overflow:hidden;background:#EDE8DE;display:block}
.pshot img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.pcard:hover .pshot img{transform:scale(1.05)}
.chip{position:absolute;top:.7rem;left:.7rem;background:var(--white);color:var(--ink);
  border-radius:999px;padding:.4rem .75rem;font-size:.6rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;box-shadow:0 3px 10px rgba(28,22,14,.14)}
.chip.gone{background:var(--ink);color:var(--white)}
/* Quick-add stays visible and reachable on touch, where there is no hover. */
.add{position:absolute;right:.7rem;bottom:.7rem;width:42px;height:42px;border-radius:50%;
  background:var(--orange);color:var(--white);display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(255,90,30,.4);
  opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease,filter .18s ease}
.pcard:hover .add,.add:focus-visible{opacity:1;transform:none}
.add:hover{filter:brightness(1.08)}
@media (hover:none){.add{opacity:1;transform:none}}
.pbody{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.32rem;flex:1}
.pcat{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.pname{font-size:.97rem;font-weight:600;line-height:1.35;letter-spacing:-.005em}
.pmeta{font-size:.76rem;line-height:1.5;color:var(--muted-2)}
.prow{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.6rem}
.price{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.qty{font-size:.63rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.pcard.sold .pshot img{filter:grayscale(.85) brightness(1.04)}
.pcard.sold .price{color:var(--muted-2);text-decoration:line-through}
.pcard.sold .add{display:none}

/* ---------- dark promo ---------- */
.promo{background:var(--ink);color:var(--white);display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
.promo-copy{padding:clamp(2.4rem,4.4vw,4.2rem) clamp(1.5rem,3.4vw,3.4rem);align-self:center}
.promo h2{color:var(--white)}
.promo .lede{color:rgba(255,255,255,.72);margin-bottom:clamp(1.4rem,2.4vw,2rem)}
.promo-media{position:relative;min-height:clamp(260px,32vw,440px)}
.promo-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo-stat{display:flex;gap:clamp(1.5rem,3vw,2.75rem);margin:0 0 clamp(1.5rem,2.6vw,2.1rem)}
.promo-stat div b{display:block;font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:700;letter-spacing:-.02em}
.promo-stat div span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ---------- re-homed ---------- */
.homes{background:var(--white)}
.homes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));
  gap:clamp(.85rem,1.4vw,1.35rem)}
.hcard{display:flex;align-items:center;gap:1rem;padding:.8rem;
  border:1px solid var(--line);border-radius:14px;background:var(--white)}
.hcard img{width:74px;height:74px;border-radius:10px;object-fit:cover;flex:none;filter:grayscale(.8)}
.hcard .hname{font-size:.9rem;font-weight:600;line-height:1.35;margin-bottom:.3rem}
.hcard .hdate{font-size:.62rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--orange)}

/* ---------- trust ---------- */
.trust{background:var(--tint);border-top:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:clamp(1.2rem,2.4vw,2.2rem)}
.trust-grid h3{font-size:.95rem;font-weight:600;margin:.85rem 0 .35rem}
.trust-grid p{font-size:.83rem;line-height:1.55;color:var(--muted)}
.tico{width:42px;height:42px;border-radius:50%;background:var(--white);color:var(--orange);
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(28,22,14,.09)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--white)}
.news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);
  align-items:center;padding:clamp(2.4rem,4.2vw,3.6rem) var(--pad);border-bottom:1px solid var(--line-dark)}
.news h2{color:var(--white)}
.news p{color:rgba(255,255,255,.66);font-size:.92rem;line-height:1.6;margin-top:.7rem;max-width:26rem}
.news form{display:flex;gap:.6rem;flex-wrap:wrap}
.news input{flex:1;min-width:200px;height:54px;border-radius:999px;border:1px solid var(--line-dark);
  background:rgba(255,255,255,.06);color:var(--white);font:inherit;font-size:.94rem;padding:0 1.4rem}
.news input::placeholder{color:rgba(255,255,255,.45)}
.news input:focus{outline:none;border-color:var(--orange)}
.news .said{font-size:.8rem;color:var(--orange);margin-top:.8rem;min-height:1.2em}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);padding:clamp(2.4rem,4vw,3.4rem) var(--pad)}
.foot-grid h4{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:1rem}
.foot-grid li{margin-bottom:.62rem}
.foot-grid a{font-size:.9rem;color:rgba(255,255,255,.82);transition:color .16s ease}
.foot-grid a:hover{color:var(--orange)}
.foot-blurb{font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.62);max-width:22rem;margin-top:1rem}
.foot-bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.3rem var(--pad);border-top:1px solid var(--line-dark);
  font-size:.78rem;color:rgba(255,255,255,.5)}

/* ================= inner pages ================= */
.page[hidden]{display:none}

/* page head sits on the tan panel under the header */
.phead{position:relative;z-index:2;padding:clamp(1.2rem,2.4vw,2rem) 0 clamp(1.8rem,3.4vw,2.8rem)}
.phead h1{font-size:clamp(1.9rem,3.9vw,3.2rem);font-weight:700;line-height:1.08;letter-spacing:-.024em;text-wrap:balance}
.phead .lede{color:rgba(19,19,19,.62)}
.crumbs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(19,19,19,.5);margin-bottom:1.1rem}
.crumbs a:hover{color:var(--orange)}
.crumbs span{opacity:.5}

/* listing */
.listing{background:var(--tint);display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:clamp(1.5rem,2.6vw,2.6rem);padding:clamp(2rem,3.6vw,3.2rem) var(--pad) clamp(2.6rem,4.6vw,4.4rem)}
.filters{align-self:start;position:sticky;top:1rem}
.fgroup{border-bottom:1px solid var(--line);padding:0 0 1.1rem;margin-bottom:1.1rem}
.fgroup:last-child{border-bottom:0}
.fgroup h4{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:.85rem}
.fopt{display:flex;align-items:center;gap:.65rem;padding:.32rem 0;cursor:pointer;font-size:.9rem}
.fopt input{position:absolute;opacity:0;width:0;height:0}
.fbox{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);flex:none;
  display:grid;place-items:center;color:var(--white);transition:background .16s ease,border-color .16s ease}
.fopt input:checked + .fbox{background:var(--ink);border-color:var(--ink)}
.fopt input:focus-visible + .fbox{outline:2.5px solid var(--orange);outline-offset:2px}
.fbox svg{opacity:0}
.fopt input:checked + .fbox svg{opacity:1}
.fcount{margin-left:auto;font-size:.75rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.listing-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.3rem}
.result-count{font-size:.86rem;color:var(--muted)}
.result-count b{color:var(--ink);font-weight:600}
.sortbox{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--muted)}
.sortbox select{font:inherit;font-size:.86rem;font-weight:500;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:.6rem 2.2rem .6rem 1.1rem;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%23131313' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center}
.listing .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.chiprow{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.fchip{display:inline-flex;align-items:center;gap:.5rem;height:34px;padding:0 .5rem 0 .85rem;
  border-radius:999px;background:var(--white);border:1px solid var(--line);
  font-size:.75rem;font-weight:500}
.fchip button{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(19,19,19,.07)}
.fchip button:hover{background:var(--orange);color:var(--white)}

/* empty state */
.empty{grid-column:1/-1;text-align:center;padding:clamp(3rem,7vw,5.5rem) 1rem;
  border:1px dashed var(--line-2);border-radius:16px;background:var(--white)}
.empty h3{font-size:1.25rem;margin-bottom:.5rem}
.empty p{font-size:.92rem;color:var(--muted);max-width:26rem;margin:0 auto 1.5rem}

/* product detail */
.pdp{background:var(--white);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);padding:clamp(2rem,3.6vw,3.2rem) var(--pad) clamp(2.6rem,4.6vw,4rem)}
.gallery{display:grid;grid-template-columns:84px minmax(0,1fr);gap:.85rem;align-items:start}
.thumbs{display:flex;flex-direction:column;gap:.65rem}
.thumb{border-radius:10px;overflow:hidden;border:2px solid transparent;background:#EDE8DE;
  aspect-ratio:1;transition:border-color .18s ease}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb[aria-current="true"]{border-color:var(--ink)}
.gmain{position:relative;border-radius:14px;overflow:hidden;background:#EDE8DE;aspect-ratio:4/4.5}
.gmain img{width:100%;height:100%;object-fit:cover}
.pdp-info .cat{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.pdp-info h1{font-size:clamp(1.7rem,3.1vw,2.5rem);font-weight:700;line-height:1.14;
  letter-spacing:-.02em;margin:.6rem 0 .5rem;text-wrap:balance}
.pdp-ref{font-size:.8rem;color:var(--muted-2);letter-spacing:.04em}
.pdp-price{display:flex;align-items:baseline;gap:.9rem;margin:1.3rem 0 .3rem}
.pdp-price b{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.02em}
.onlyone{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--orange)}
.pdp-story{font-size:.98rem;line-height:1.65;color:var(--muted);margin:1.2rem 0 1.6rem}
.spec{border-top:1px solid var(--line);margin:1.6rem 0}
.spec div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.88rem}
.spec dt{color:var(--muted-2);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-top:.15rem}
.spec dd{line-height:1.5}
.buybox{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.hold{font-size:.78rem;color:var(--muted);margin-top:.9rem;display:flex;align-items:center;gap:.5rem}
.acc{border-top:1px solid var(--line);margin-top:1.8rem}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0;cursor:pointer;font-size:.92rem;font-weight:600;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:11px;height:11px;flex:none;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
.acc details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.acc .accbody{padding:0 0 1.1rem;font-size:.88rem;line-height:1.65;color:var(--muted)}

/* basket */
.basket{background:var(--tint);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.72fr);
  gap:clamp(1.4rem,2.6vw,2.4rem);padding:clamp(2rem,3.6vw,3.2rem) var(--pad) clamp(2.6rem,4.6vw,4.4rem);
  align-items:start}
.blines{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.bline{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:1.1rem;
  padding:1.1rem;border-bottom:1px solid var(--line);align-items:center}
.bline:last-child{border-bottom:0}
.bline img{width:96px;height:96px;border-radius:10px;object-fit:cover}
.bline .bname{font-size:.98rem;font-weight:600;line-height:1.35;margin-bottom:.25rem}
.bline .bmeta{font-size:.78rem;color:var(--muted-2);line-height:1.5}
.bline .bright{text-align:right;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.remove{font-size:.72rem;font-weight:500;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px}
.remove:hover{color:var(--orange)}
.summary{background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:clamp(1.2rem,2vw,1.6rem);position:sticky;top:1rem}
.summary h3{margin-bottom:1.1rem}
.srow{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;font-size:.9rem;color:var(--muted)}
.srow.total{border-top:1px solid var(--line);margin-top:.6rem;padding-top:1rem;
  font-size:1.15rem;font-weight:700;color:var(--ink)}
.summary .btn{margin-top:1.1rem}
.stripe-note{display:flex;gap:.55rem;align-items:flex-start;font-size:.76rem;line-height:1.55;
  color:var(--muted-2);margin-top:.9rem}
.holdbar{display:flex;align-items:center;gap:.6rem;background:#FFF1EA;color:#8A3B12;
  border-radius:12px;padding:.75rem 1rem;font-size:.82rem;font-weight:500;margin-bottom:1rem}

/* confirmation */
.confirm{background:var(--white);padding:clamp(2.4rem,4.6vw,4.4rem) var(--pad);
  max-width:760px;margin:0 auto;text-align:center}
.tickring{width:74px;height:74px;border-radius:50%;background:#EAF6EC;color:#2F7D3E;
  display:grid;place-items:center;margin:0 auto 1.5rem}
.confirm h1{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.022em;margin-bottom:.7rem}
.confirm .ref{display:inline-block;background:var(--tint);border-radius:999px;
  padding:.55rem 1.2rem;font-size:.82rem;font-weight:600;letter-spacing:.06em;margin:.4rem 0 1.6rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:1.2rem;text-align:left;margin:2.2rem 0}
.step{border:1px solid var(--line);border-radius:14px;padding:1.1rem}
.step b{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin-bottom:.5rem}
.step p{font-size:.86rem;line-height:1.55;color:var(--muted)}

/* content pages */
.content{background:var(--white);display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);padding:clamp(2rem,3.6vw,3.2rem) var(--pad) clamp(2.6rem,4.6vw,4.4rem);
  align-items:start}
.sidenav{position:sticky;top:1rem}
.sidenav a{display:block;padding:.6rem .9rem;border-radius:10px;font-size:.9rem;
  color:var(--muted);transition:background .16s ease,color .16s ease}
.sidenav a:hover{background:var(--tint);color:var(--ink)}
.sidenav a[aria-current="page"]{background:var(--ink);color:var(--white);font-weight:500}
.prose{max-width:44rem}
.prose h2{font-size:clamp(1.3rem,2.2vw,1.75rem);margin:2.2rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose p{font-size:.98rem;line-height:1.75;color:var(--muted);margin-bottom:1rem}
.prose ul{margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.55rem}
.prose li{position:relative;padding-left:1.4rem;font-size:.98rem;line-height:1.65;color:var(--muted)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--orange)}
.prose .callout{background:var(--tint);border-radius:14px;padding:1.2rem 1.4rem;margin:1.4rem 0}
.prose .callout p{margin:0;color:var(--ink);font-size:.92rem}

/* 404 */
.nf{background:var(--white);text-align:center;padding:clamp(3.5rem,8vw,6.5rem) var(--pad)}
.nf .big{font-size:clamp(4rem,12vw,9rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--tan)}
.nf h1{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;margin:.5rem 0 .8rem;letter-spacing:-.02em}
.nf p{color:var(--muted);max-width:30rem;margin:0 auto 1.8rem;line-height:1.65}

/* ---------- account ---------- */
.account{background:var(--white);display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);padding:clamp(2rem,3.6vw,3.2rem) var(--pad) clamp(2.6rem,4.6vw,4.4rem);
  align-items:start}
.sidenav .signout{margin-top:.4rem;color:var(--muted-2)}
.account-panel{display:flex;flex-direction:column;gap:0}
.account-h{font-size:1.15rem;margin:2rem 0 .9rem}
.account-h:first-child{margin-top:0}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:clamp(.7rem,1.2vw,1.1rem)}
.stat{border:1px solid var(--line);border-radius:14px;padding:1.25rem}
.stat b{display:block;font-size:1.9rem;font-weight:700;letter-spacing:-.02em}
.stat span{font-size:.82rem;color:var(--muted)}
.panelcard{border:1px solid var(--line);border-radius:14px;padding:1.25rem 1.35rem}
.panelcard p{font-size:.9rem;line-height:1.6;color:var(--muted)}
.panelcard h4{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:.7rem}
.ordercard{display:flex;align-items:center;gap:1.1rem;border:1px solid var(--line);border-radius:14px;padding:1.1rem}
.ordercard:hover{border-color:var(--line-2)}
.ordercard img{width:76px;height:76px;border-radius:10px;object-fit:cover;flex:none}
.oref{font-size:.98rem;font-weight:600}
.ometa{font-size:.8rem;color:var(--muted-2);margin-top:.25rem}
.statuschip{margin-left:auto;flex:none;border-radius:999px;padding:.45rem .9rem;
  font-size:.63rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.statuschip.live{background:#EAF6EC;color:#2F7D3E}
.statuschip.done{background:#F2F0EA;color:var(--muted)}
.orderlist{display:flex;flex-direction:column;gap:.75rem}
.orderlist a{display:flex;align-items:center;gap:1.2rem;border:1px solid var(--line);border-radius:14px;padding:1.05rem 1.3rem}
.orderlist a:hover{border-color:var(--line-2)}
.ol-main{min-width:0;flex:1}
.oltotal{font-size:1.02rem;font-weight:700;flex:none}
.olview{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:500;color:var(--muted);flex:none}
.tracking{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:#EAF6EC;color:#2F7D3E;
  border-radius:12px;padding:.9rem 1.2rem;font-size:.88rem;font-weight:500;margin-bottom:1.4rem}
.tracking a{margin-left:auto;color:#2F7D3E}
.ordercols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:clamp(.7rem,1.2vw,1.1rem);margin-top:1.4rem}
.panelcard.form{margin-bottom:1.4rem}
.panelcard.form h3{margin-bottom:1.2rem}
.fieldgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1.1rem;margin-bottom:1.4rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field span{font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.field input{height:52px;border-radius:10px;border:1px solid var(--line-2);background:var(--white);
  font:inherit;font-size:.94rem;color:var(--ink);padding:0 1rem}
.field input:focus{outline:none;border-color:var(--ink)}
.alertbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.alertlist{display:flex;flex-direction:column;gap:.75rem}
.alertlist li{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:14px;padding:1.05rem 1.3rem}
.alertwhen{margin-left:auto;font-size:.82rem;color:var(--muted)}
.alertwhen.off{color:var(--muted-2);font-style:italic}
.signin{background:var(--tint);padding:clamp(2.5rem,5vw,4.5rem) var(--pad)}
.signin-card{max-width:440px;margin:0 auto;background:var(--white);border:1px solid var(--line);
  border-radius:18px;padding:clamp(1.6rem,3vw,2.5rem)}
.signin-card h2{font-size:1.9rem}
.signin-card .lede{margin:.6rem 0 1.6rem}
.signin-card form{display:flex;flex-direction:column;gap:1.1rem}
.signin-alt{margin-top:1.2rem;font-size:.88rem}
.signin-new{margin-top:.6rem;font-size:.82rem;color:var(--muted-2)}

/* ---------- mobile: sheet and drawer ---------- */
/* The desktop filter rail and dropdown are wrong shapes on a phone. Below
   820px the rail becomes a bottom sheet and the menu a full-screen drawer. */
.sheet-trigger{display:none}
.sheet-scrim{display:none}
/* Declared before @media (max-width:820px), not after it. Below the query it
   won at equal specificity and hid the filter form's submit at every width,
   so a tick could never be applied: the desktop design has no apply button
   because filters are meant to apply on change, and the mobile sheet has this
   one to apply and dismiss in a single tap. Both were dead. */
.sheet-done{display:none}
@media (max-width:820px){
  .sheet-trigger{display:inline-flex;align-items:center;gap:.5rem;height:44px;padding:0 1.1rem;
    border-radius:999px;background:var(--white);border:1px solid var(--line);
    font-size:.8rem;font-weight:600}
  .listing{grid-template-columns:1fr}
  .filters{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:82vh;overflow-y:auto;
    background:var(--white);border-radius:20px 20px 0 0;padding:1rem var(--pad) 1.6rem;
    box-shadow:0 -18px 44px rgba(28,22,14,.26);
    transform:translateY(101%);transition:transform .3s cubic-bezier(.22,1,.36,1);visibility:hidden}
  .filters::before{content:"";display:block;width:44px;height:4px;border-radius:999px;
    background:rgba(19,19,19,.2);margin:0 auto 1.2rem}
  body[data-sheet="open"] .filters{transform:none;visibility:visible}
  body[data-sheet="open"] .sheet-scrim{display:block;position:fixed;inset:0;z-index:65;
    background:rgba(19,19,19,.42)}
  .sheet-done{display:block;width:100%;margin-top:1.2rem}
  .account{grid-template-columns:1fr}
  .sidenav{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.3rem;-webkit-overflow-scrolling:touch}
  .sidenav a{flex:none;border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem;font-size:.82rem}
  .sidenav a[aria-current="page"]{border-color:var(--ink)}
  .orderlist a,.alertlist li{flex-wrap:wrap}
  .olview{width:100%;justify-content:flex-end}
}
@media (min-width:821px){ body[data-sheet="open"] .filters{transform:none;visibility:visible} }
@media (max-width:720px){
  .menu-panel{position:fixed;inset:0;top:0;border-radius:0;padding:1.1rem var(--pad) 2rem;
    min-width:0;box-shadow:none;background:var(--ink);overflow-y:auto}
  .menu-panel[data-open="true"]{display:flex;flex-direction:column}
  .menu-panel a{color:var(--white);font-size:1.35rem;font-weight:600;padding:1rem .2rem;
    border-radius:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .menu-panel a:hover{background:transparent;color:var(--orange)}
  /* Every link already carries a hairline, so a ruled hr put a second line
     right below the first. The separator becomes space instead: the group
     break reads from the gap, not from a doubled divider. */
  .menu-panel hr{border:0;margin:1.15rem .2rem .35rem}
  .menu-close{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
  .menu-close b{color:var(--white);font-size:1.05rem;font-weight:700}
  .menu-close button{width:42px;height:42px;border-radius:50%;background:#242424;color:var(--white);
    display:grid;place-items:center}
}

/* toast */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,140%);z-index:90;
  background:var(--ink);color:var(--white);border-radius:999px;padding:.85rem 1.5rem;
  font-size:.85rem;font-weight:500;box-shadow:0 14px 34px rgba(0,0,0,.34);
  transition:transform .32s cubic-bezier(.22,1,.36,1)}
.toast[data-show="true"]{transform:translate(-50%,0)}

/* ---------- responsive ---------- */
/* The filters sidebar drops out of sticky only in the tablet band. Below
   821px it is the bottom sheet — position:fixed, translated off and hidden —
   and must stay that way.

   This lived in the unbounded max-width:1100px block below, which also
   matches on a phone and sits later in the file than the sheet rules. At
   equal specificity source order won, so position:static applied on mobile:
   the entire filter form went back into the flow above the listing, still
   invisible, still reserving its full height. That reserved box was roughly a
   screen and a half of blank tint on every category page. */
@media (max-width:1100px) and (min-width:821px){
  .filters{position:static}
}

@media (max-width:1100px){
  .listing{grid-template-columns:1fr}
  .listing .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp,.basket,.content{grid-template-columns:1fr}
  .summary{position:static}
  .sidenav{position:static;display:flex;gap:.4rem;flex-wrap:wrap}
}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:0}
  /* Mobile hero: the photograph stays OUT of the flow, as it is on desktop.
     A deliberate change to the signed-off design, kept here rather than in an
     override file because it is the design that changed, not a plugin clash.

     It used to reset to position:static below 1000px. That put it first in the
     document, because it is printed on iv_top_open which fires before <header>:
     a phone opened on a 264px record, the shop's name did not appear until
     280px down and what the shop sells until 468px, on an 812px screen.

     Absolute costs nothing in flow height, so the header sits at the top where
     it belongs and all four category tiles clear the fold. .hdr is z-index:3
     and .hero z-index:2, so both paint over it; .shell already has
     overflow:hidden, so bleeding it off the right edge adds no page scroll.

     Opacity is measured, not eyeballed: multiplied over the tan, .34 leaves a
     backdrop of #98907F, which holds the ink headline at 5.87:1. The lede is
     --muted and cannot sit over it at any opacity — see the rule below. */
  .hero-img{
    top:clamp(150px,40vw,225px);
    right:clamp(-150px,-30vw,-72px);
    height:clamp(235px,64vw,340px);
    opacity:.34;
  }
  /* The lede must clear the disc, not sit over it. --muted on the tan is
     already 4.48:1, a hair off the 4.5 floor, so any backdrop the record
     darkens takes it under — measured at 1.95:1 before this cap. The headline
     is ink and holds 5.87:1 over the same disc, so it still overlaps on
     purpose. min() keeps the desktop 27rem cap wherever that is the tighter
     of the two. */
  .hero p{max-width:min(27rem,62%)}
  .cats{grid-template-columns:1fr 1fr}
  .band,.promo,.news{grid-template-columns:1fr}
  .promo-media{min-height:clamp(220px,46vw,320px);order:-1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .grid,.listing .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:1fr}
  .thumbs{flex-direction:row;order:2}
  .thumb{width:74px}
  .bline{grid-template-columns:74px minmax(0,1fr);row-gap:.7rem}
  .bline img{width:74px;height:74px}
  .bline .bright{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}
@media (max-width:720px){
  body{padding:0}
  .shell{border-radius:0}
  .bg{display:none}
  .hdr{flex-wrap:wrap;row-gap:.75rem}
  .search{order:3;flex-basis:100%;max-width:none;margin:0}
  .actions{margin-left:auto}
  .band-media{grid-template-columns:1fr;grid-auto-rows:clamp(190px,52vw,260px)}
  .foot-grid{grid-template-columns:1fr}
  .spec div{grid-template-columns:1fr;gap:.2rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}