/* ============================================================
   THE SH LUXE — Editorial luxury storefront
   Tokens → base → header → components → sections → product → pages
   ============================================================ */

/* ---------- Design tokens (single source of truth) ---------- */
@import url('tokens.css');

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* Touch responsiveness: taps on controls are never zoom gestures — fire the
   click immediately (kills any double-tap-to-zoom click delay on phones). */
a,button,input,select,textarea,label{touch-action:manipulation;}
/* Instant pressed feedback on touch screens — the tap visibly registers the
   moment the finger lands, even while the next page is still loading. */
@media(hover:none){
  a:active,button:active{opacity:.55;transition:opacity 0s;}
}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:var(--lh-body,1.65);
  color:var(--near-black);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.01em;}
p{margin:0;}

::selection{background:var(--espresso);color:var(--ivory);}
:focus-visible{outline:2px solid var(--near-black);outline-offset:3px;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
/* Section rhythm (reworked 2026-07-24 — owner: "one block to another block gap
   are so big… padding shouldn't be too big or too small").
   Two jobs, two values, nothing ad-hoc:
     · plain section  → --section-y. Neighbours STACK, so the visible gap is
       double: 120px on desktop, 72px on phones.
     · coloured band  → --band-y. That padding sits INSIDE the colour, so it
       needs to be generous on its own (it never stacks into a gap).
   After the full-bleed hero the first section also uses --band-y, so the page
   doesn't start abruptly.
   Every var() below carries its literal fallback on purpose: site.css and
   tokens.css are separate files, so a visitor can hold a CACHED tokens.css
   that has no --band-y yet — without the fallback that padding computes to
   ZERO and the page looks broken (seen live while building this). */
.section{padding-block:var(--section-y, clamp(36px, 4.2vw, 60px));}
.section.dark{padding-block:var(--band-y, clamp(56px, 6.5vw, 92px));}
.hero + .section{padding-top:var(--band-y, clamp(56px, 6.5vw, 92px));}
.rule{border:0;border-top:1px solid var(--border);margin:0;}
.measure{max-width:62ch;}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--sans);font-weight:500;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--warm-grey);
  display:inline-flex;gap:.7em;align-items:center;
}
.eyebrow .num{color:var(--gold-text,var(--gold));}
.display{font-size:var(--h1);letter-spacing:var(--track-head,normal);}
.h-section{font-size:var(--h2);letter-spacing:var(--track-head,normal);}
.h-sub{font-size:var(--h3);}
.serif-it{font-style:italic;}
.lead{font-size:1.08rem;color:var(--near-black);}
.muted{color:var(--warm-grey);}
.meta{font-size:.8rem;letter-spacing:.02em;color:var(--warm-grey);}

/* ---------- Link-arrow / buttons ---------- */
.arrow{
  font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em;
  color:var(--near-black);position:relative;padding-bottom:4px;
}
.arrow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .4s var(--ease);}
.arrow .a{transition:transform .35s var(--ease);}
.arrow:hover .a{transform:translateX(5px);}
.arrow--light{color:var(--ivory);}

.btn{
  font-family:var(--btn-font-family,var(--sans));font-weight:500;font-size:.8rem;letter-spacing:var(--btn-track,.08em);
  text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;
  gap:.6em;padding:15px 30px;border:var(--btn-border,1px) solid var(--near-black);background:transparent;
  color:var(--near-black);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:hover{background:var(--near-black);color:var(--ivory);}
.btn--fill{background:var(--near-black);color:var(--ivory);}
.btn--fill:hover{background:transparent;color:var(--near-black);}
.btn--ivory{border-color:var(--ivory);color:var(--ivory);}
.btn--ivory:hover{background:var(--ivory);color:var(--near-black);}
.btn--wa{border-color:var(--espresso);}
.btn--block{width:100%;}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--charcoal);color:var(--ivory);text-align:center;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;padding:9px 16px;font-weight:400;
}
.announce span{opacity:.85;}

/* ---------- Header ---------- */
.header-group{position:sticky;top:0;z-index:80;}

/* ---------- Mobile app (Capacitor) only ----------
   The app draws edge-to-edge, so the web layer owns the status-bar area:
   (1) a FIXED, always-opaque ivory strip permanently covers the notch/clock
       band — content can never show through behind the clock, on any page;
   (2) the header group is padded down by the same height so nothing hides;
   (3) the sticky offset is raised by the announce bar's height (set by
       site.js as --shl-ann-h) so on scroll the ANNOUNCEMENT slides up and
       disappears under the strip while the main header stays pinned below it;
   (4) the drawer opens below the strip.
   Needs viewport-fit=cover in the page meta (added to every storefront page —
   without it iOS reports env(safe-area-inset-top) as 0, which is exactly why
   the first version of this fix did nothing). Web/desktop never see any of
   this: .shl-native (native app) and .shl-standalone (installed PWA) are added
   by site.js — both share this app chrome so an installed shortcut looks the
   same as the App Store build; a plain browser tab gets none of it. */
html.shl-native body::before, html.shl-standalone body::before{
  content:'';position:fixed;top:0;left:0;right:0;z-index:130;
  height:env(safe-area-inset-top);background:var(--ivory);
}
html.shl-native .header-group, html.shl-standalone .header-group{
  padding-top:env(safe-area-inset-top);background:var(--ivory);
  top:calc(0px - var(--shl-ann-h,0px)); /* announce scrolls away, header stays */
}
html.shl-native .header-transparent .header-group,
html.shl-standalone .header-transparent .header-group{background:transparent;}
/* In the app the logo header must NEVER leave the screen — on the web the
   transparent hero header scrolls away briefly before re-appearing (absolute →
   .scrolled fixed), which reads as "the logo disappeared" in an app. Pin it
   permanently instead; the .scrolled class still swaps transparent → ivory. */
html.shl-native .header-transparent .header-group,
html.shl-standalone .header-transparent .header-group{
  position:fixed;left:0;right:0;top:calc(0px - var(--shl-ann-h,0px));
}
html.shl-native .drawer, html.shl-standalone .drawer{padding-top:calc(24px + env(safe-area-inset-top));}
.site-header{background:var(--ivory);
  border-bottom:1px solid var(--border);transition:background .4s var(--ease),border-color .4s var(--ease);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:20px;}
.logo{font-family:var(--serif);font-weight:500;font-size:var(--logo-size,1.5rem);letter-spacing:.18em;
  text-transform:uppercase;white-space:nowrap;}
.logo small{font-size:.55em;letter-spacing:.3em;display:block;line-height:1;color:var(--warm-grey);margin-top:2px;}
.nav{display:flex;gap:26px;align-items:center;}
.nav a{font-family:var(--nav-font,var(--sans));font-weight:500;font-size:.8rem;letter-spacing:.04em;position:relative;padding-block:6px;color:var(--near-black);}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .35s var(--ease);}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%;}
.utils{display:flex;gap:20px;align-items:center;}
.icon-btn{background:none;border:0;padding:4px;color:var(--near-black);display:inline-flex;position:relative;}
/* Touch hit-areas — the VISUAL design is untouched; an invisible pseudo-element
   grows each small control's tappable area to ~44px (WCAG/Apple guideline).
   Insets sized per control so neighbouring hit-areas never overlap. */
.icon-btn::after{content:"";position:absolute;inset:-8px;}
.burger::after,.m-icon::after{content:"";position:absolute;inset:-7px;}
.burger,.m-icon{position:relative;}
.pc-wish::after{content:"";position:absolute;inset:-5px;border-radius:50%;}
.chip{position:relative;}
.chip::after{content:"";position:absolute;inset:-5px -2px;}
.filter-opt{position:relative;}
.filter-opt::after{content:"";position:absolute;inset:-6px -2px;}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4;}
.wish-count{position:absolute;top:-4px;right:-6px;background:var(--near-black);color:var(--ivory);
  font-size:.58rem;font-weight:600;min-width:15px;height:15px;border-radius:50%;display:none;
  align-items:center;justify-content:center;padding:0 3px;}
.wish-count.on{display:inline-flex;}
.utils .btn{padding:11px 20px;font-size:.72rem;}
/* Currency switcher */
.header-currency{font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.06em;color:var(--near-black);background:transparent;border:1px solid var(--border);border-radius:2px;padding:7px 22px 7px 9px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%;background-size:4px 4px,4px 4px;background-repeat:no-repeat;}
.header-currency:hover{border-color:var(--near-black);}
/* The OPENED dropdown list: always dark text on white — on the transparent
   hero the select's own text is ivory, and the native option list inherited
   it (ivory-on-white = unreadable). Options are styled independently. */
.header-currency option{color:var(--near-black);background:#fff;}
.header-transparent .site-header .header-currency{color:var(--ivory);border-color:rgba(245,241,235,.45);}
.header-transparent .header-group.scrolled .site-header .header-currency{color:var(--near-black);border-color:var(--border);}
.drawer-cur{display:flex;align-items:center;gap:10px;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--warm-grey);padding:8px 0;}
.drawer-cur select{font-family:inherit;font-size:.95rem;padding:8px 10px;border:1px solid var(--border);background:transparent;border-radius:2px;color:var(--near-black);}
.burger,.m-icon{display:none;background:none;border:0;padding:4px;color:var(--near-black);}
.burger svg,.m-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4;}

/* Transparent-over-hero variant (homepage): header-group overlays the hero */
.header-transparent .header-group{position:absolute;top:0;left:0;right:0;}
.header-transparent .site-header{background:transparent;border-color:transparent;}
.header-transparent .site-header .logo,
.header-transparent .site-header .nav a,
.header-transparent .site-header .icon-btn,
.header-transparent .site-header .burger{color:var(--ivory);}
.header-transparent .site-header .logo small{color:rgba(245,241,235,.7);}
/* Dropdown links sit on the ivory panel, so they must stay dark even while the
   transparent header paints the top-level nav ivory (else: invisible text). */
.header-transparent .site-header .nav .nav-drop a{color:var(--near-black);}
.header-transparent .site-header .btn{border-color:var(--ivory);color:var(--ivory);}
.header-transparent .site-header .btn:hover{background:var(--ivory);color:var(--near-black);}
/* On scroll → pin solid */
.header-transparent .header-group.scrolled{position:fixed;}
.header-transparent .header-group.scrolled .announce{transform:translateY(-100%);position:absolute;width:100%;}
.header-transparent .header-group.scrolled .site-header{background:var(--ivory);border-color:var(--border);}
.header-transparent .header-group.scrolled .site-header .logo,
.header-transparent .header-group.scrolled .site-header .nav a,
.header-transparent .header-group.scrolled .site-header .icon-btn,
.header-transparent .header-group.scrolled .site-header .burger{color:var(--near-black);}
.header-transparent .header-group.scrolled .site-header .logo small{color:var(--warm-grey);}
.header-transparent .header-group.scrolled .site-header .btn{border-color:var(--near-black);color:var(--near-black);}
.header-transparent .header-group.scrolled .site-header .btn:hover{background:var(--near-black);color:var(--ivory);}

/* ---------- Mobile drawer ---------- */
.drawer{position:fixed;inset:0;z-index:120;background:var(--ivory);
  transform:translateX(-100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;padding:24px var(--pad);overflow-y:auto;}
.drawer.open{transform:none;}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;}
.drawer nav{display:flex;flex-direction:column;}
.drawer nav a{font-family:var(--serif);font-size:1.45rem;font-weight:500;padding:14px 0;border-bottom:1px solid var(--border);}
.drawer .drawer-utils{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:14px;}
.drawer .drawer-utils a{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--warm-grey);}
/* ── The footer folded into the ☰ menu (mobile + app, owner 2026-07-24) ──
   Sits below the utils; the big page footer is hidden at these widths. */
.drawer-foot{margin-top:28px;padding-top:22px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:14px;}
.drawer-news{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);padding-bottom:8px;}
.drawer-news input[type=email]{flex:1;min-width:0;border:0;background:transparent;font-family:var(--sans);
  font-size:.85rem;color:var(--near-black);padding:4px 0;}
.drawer-news input[type=email]:focus{outline:none;}
.drawer-news button{background:none;border:0;font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold,#7E6B49);cursor:pointer;flex:0 0 auto;}
.drawer-social.icons{display:flex;gap:16px;}
.drawer-social.icons a{display:inline-flex;}
.drawer-social.icons svg{width:20px;height:20px;}
.drawer-legal{display:flex;flex-wrap:wrap;gap:6px 4px;font-size:.78rem;color:var(--warm-grey);}
.drawer-legal a{color:var(--warm-grey);text-decoration:underline;}
.drawer-legal a:hover{color:var(--near-black);}
.drawer-disc{font-size:.68rem;line-height:1.5;color:var(--warm-grey);margin:0;}
.drawer-pay{font-size:.7rem;color:var(--warm-grey);margin:0;}
body.no-scroll{overflow:hidden;}

/* ---------- Product card ---------- */
/* min-width:0 lets a card shrink to its grid track — without it the one-line
   nowrap title forces the track wider than a phone screen and the 2-column
   grid blows out sideways (live mobile bug, fixed 2026-07-05). */
.product-card{display:block;position:relative;min-width:0;}
.pc-media{position:relative;overflow:hidden;background:var(--stone);aspect-ratio:4/5;}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1.4s var(--ease),filter .85s var(--ease);}
.pc-media .alt{position:absolute;inset:0;opacity:0;}
.pc-wish{position:absolute;top:14px;right:14px;z-index:2;background:rgba(245,241,235,.85);
  border:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s,background .3s;}
.pc-wish.active{opacity:1;transform:none;}
/* Hover reveals only on devices that HAVE hover (mouse). On touch screens a
   hover-reveal steals the first tap (tap 1 = "hover", tap 2 = click), so the
   wishlist heart is simply always visible there instead. */
@media(hover:hover){
  .product-card:hover .pc-media .alt{opacity:1;}
  .product-card:hover .pc-media img{transform:scale(var(--img-zoom,1.05));}
  .product-card:hover .pc-wish{opacity:1;transform:none;}
}
@media(hover:none){
  .pc-wish{opacity:1;transform:none;background:rgba(245,241,235,.92);}
}
.pc-wish svg{width:16px;height:16px;stroke:var(--near-black);fill:none;stroke-width:1.4;}
.pc-wish.active svg{fill:var(--near-black);}
.pc-body{padding-top:16px;}
.pc-brand{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--warm-grey);}
.pc-name{font-family:var(--serif);font-size:1.2rem;font-weight:500;margin-top:3px;line-height:1.2;}
/* "one line" title style — clamp to 2 lines (shows more of long titles) with a
   reserved height so every card caption, and therefore every card, is equal. */
.pc-name--line{font-size:1.05rem;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.6em;}
.pc-details{font-size:.78rem;color:var(--warm-grey);margin-top:5px;line-height:1.5;}
.pc-spec{font-size:.8rem;color:var(--warm-grey);margin-top:2px;}

/* ---------- Loading skeletons (product grids) ----------
   Shown while listings fetch; replaced by real cards on first render. Quiet
   ivory shimmer over stone — no spinners. Reduced-motion → static tiles. */
.pc-skel{pointer-events:none;}
.sk{position:relative;overflow:hidden;background:var(--stone);border-radius:2px;}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(245,241,235,.6),transparent);
  animation:sk-shimmer 1.5s var(--ease) infinite;}
.pc-skel .pc-media.sk{aspect-ratio:4/5;border-radius:0;}
.sk-line{height:.7rem;}
.sk-brand{width:38%;height:.6rem;margin-top:2px;}
.sk-title{width:82%;height:.95rem;margin-top:14px;}
.sk-price{width:30%;margin-top:14px;}
@keyframes sk-shimmer{100%{transform:translateX(100%);}}
@media(prefers-reduced-motion:reduce){.sk::after{animation:none;}}
.pc-ref{font-size:.72rem;color:var(--warm-grey);margin-top:2px;letter-spacing:.04em;}
.pc-price{font-size:.95rem;font-weight:500;letter-spacing:.02em;margin-top:10px;}
.pc-price.request{color:var(--warm-grey);font-weight:400;font-style:italic;font-family:var(--serif);font-size:1rem;}

/* Product grid layouts (columns are token-driven per breakpoint) */
.product-grid{display:grid;grid-template-columns:repeat(var(--cols-d,4),1fr);gap:40px 28px;}
.product-grid.cols-3{grid-template-columns:repeat(3,1fr);}

/* Horizontal carousel */
.carousel-wrap{position:relative;}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,320px);
  gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
  scrollbar-width:none;}
.carousel::-webkit-scrollbar{display:none;}
.carousel .product-card{scroll-snap-align:start;}
/* Prev/next arrows (desktop) */
.carousel-arrow{position:absolute;top:38%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:opacity .25s var(--ease),background .2s,border-color .2s;}
.carousel-arrow:hover{background:var(--near-black);border-color:var(--near-black);}
.carousel-arrow:hover svg{stroke:var(--ivory);}
.carousel-arrow svg{width:20px;height:20px;stroke:var(--near-black);fill:none;stroke-width:1.5;}
.carousel-arrow.prev{left:-14px;} .carousel-arrow.next{right:-14px;}
.carousel-arrow.disabled{opacity:0;pointer-events:none;}
.carousel-wrap.no-scroll .carousel-arrow{display:none;}
@media (max-width:760px){ .carousel-arrow{display:none;} }  /* swipe on mobile */

/* ---------- Section header row ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;}
.sec-head .h-section{max-width:16ch;}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:var(--ivory);overflow:hidden;}
.hero-media{position:absolute;inset:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
/* Owner-adjustable darkening (theme editor → Hero → Overlay opacity) — sits on
   top of the fixed gradient below so busy photos can be calmed for legibility. */
.hero-scrim{position:absolute;inset:0;}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,25,23,.28) 0%,rgba(27,25,23,0) 30%,rgba(27,25,23,.55) 100%);}
.hero-inner{position:relative;z-index:2;padding-bottom:clamp(48px,9vh,110px);max-width:720px;}
.hero .display{color:var(--ivory);}
.hero p{color:rgba(245,241,235,.9);margin-top:22px;max-width:46ch;font-size:1.1rem;}
/* Hero CTA = outlined ivory button on ALL widths (owner choice, 2026-07-05):
   the busy collage hero needs more presence than the underlined text link,
   which .arrow keeps everywhere else. Fills ivory on hover. */
.hero .arrow{margin-top:34px;border:1px solid rgba(245,241,235,.85);padding:14px 26px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.hero .arrow::after{display:none;}
.hero .arrow:hover{background:var(--ivory);color:var(--near-black);border-color:var(--ivory);}

/* ---------- Split image + text ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,90px);}
.split.reverse .split-media{order:2;}
.split-media img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.split-text{max-width:44ch;}
.split-text .eyebrow{margin-bottom:20px;}
.split-text .arrow{margin-top:30px;}

/* ---------- Shop by house (asymmetrical editorial grid) ---------- */
.houses{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr;gap:20px;}
.house{position:relative;overflow:hidden;display:block;background:var(--stone);}
.house img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.house:hover img{transform:scale(1.05);}
.house::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,25,23,0) 40%,rgba(27,25,23,.6));}
.house-label{position:absolute;left:26px;bottom:24px;z-index:2;color:var(--ivory);}
.house-label .h-sub{color:var(--ivory);font-size:1.7rem;}
.house-label .meta{color:rgba(245,241,235,.75);}
.house.a{grid-column:span 7;grid-row:span 2;}
.house.b{grid-column:span 5;}
.house.c{grid-column:span 5;}
.house.d{grid-column:span 4;grid-row:span 2;}
.house.e{grid-column:span 8;}
/* Tablet (audit 2026-07-23, Tier 4): between the 12-col editorial desktop grid
   and the phone's single column, a calm 2-col rhythm — the tall tiles simply
   span both columns. Applies to .tiles/.trust too (see below). */
@media (min-width:761px) and (max-width:1024px){
  .houses{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;}
  .house{aspect-ratio:4/3;}
  .house.a,.house.d,.house.e{grid-column:span 2;grid-row:auto;}
  .house.b,.house.c{grid-column:span 1;}
}

/* ---------- Collection tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.tile{position:relative;display:block;overflow:hidden;background:var(--stone);aspect-ratio:3/4;}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.tile:hover img{transform:scale(1.04);}
.tile-cap{position:absolute;inset:auto 0 0 0;padding:24px;color:var(--ivory);
  background:linear-gradient(180deg,transparent,rgba(27,25,23,.65));}
.tile-cap .h-sub{color:var(--ivory);}

/* ---------- Dark feature (private sourcing / dark sections) ---------- */
.dark{background:var(--espresso);color:var(--ivory);}
.dark--charcoal{background:var(--charcoal);}
.dark h1,.dark h2,.dark h3{color:var(--ivory);}
.dark .eyebrow{color:rgba(245,241,235,.6);}
.dark .muted{color:rgba(245,241,235,.65);}
.feature-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,90px);align-items:center;}
.feature-text{max-width:42ch;}
.feature-text p{margin-top:22px;color:rgba(245,241,235,.8);}
.feature-text .btn{margin-top:34px;}
.feature-media img{width:100%;aspect-ratio:4/5;object-fit:cover;}

/* ---------- Sell with us ---------- */
.sell-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;}
.sell-points{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--border);border:1px solid var(--border);}
.sell-points li{background:var(--ivory);padding:22px 24px;}
.sell-points b{font-family:var(--serif);font-weight:500;font-size:1.15rem;display:block;margin-bottom:4px;}
.sell-points span{font-size:.85rem;color:var(--warm-grey);}

/* ---------- Authenticity (3 columns) ---------- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border-block:1px solid var(--border);}
.trust > div{background:var(--ivory);padding:clamp(28px,4vw,48px) clamp(20px,3vw,40px);}
/* Tablet (Tier 4): a calm 2-col rhythm between desktop's 3 and the phone's 1.
   Placed AFTER the base rules so the override wins in source order. */
@media (min-width:761px) and (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,1fr);}
  .trust{grid-template-columns:repeat(2,1fr);}
  .trust>div:last-child:nth-child(odd){grid-column:span 2;}
}
.trust .num{font-family:var(--serif);font-size:1.1rem;color:var(--gold-text,var(--gold));}
.trust h3{font-size:1.7rem;margin:14px 0 12px;}
.trust p{color:var(--warm-grey);font-size:.95rem;}

/* ---------- Journal ---------- */
.journal-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px 28px;}
.article{display:block;}
.article-media{overflow:hidden;background:var(--stone);aspect-ratio:3/2;}
.article.lead .article-media{aspect-ratio:4/5;}
.article-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.article:hover .article-media img{transform:scale(1.04);}
.article-cat{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin-top:18px;}
.article h3{font-size:1.5rem;margin-top:8px;max-width:22ch;}
.article.lead h3{font-size:2.2rem;}
.article .meta{margin-top:10px;}

/* ---------- Newsletter ---------- */
.news{text-align:center;max-width:620px;margin-inline:auto;}
.news .h-section{margin-bottom:16px;}
.news form{display:flex;gap:0;border-bottom:1px solid var(--near-black);margin-top:34px;}
.news input{flex:1;border:0;background:transparent;padding:14px 4px;font-family:var(--sans);font-size:1rem;color:var(--near-black);}
/* Inputs: no ring for mouse clicks, but KEEP the keyboard focus ring —
   :focus-visible falls through to the global outline (line ~38). Removing it
   entirely (the old outline:none) left keyboard users blind in forms. */
.news input:focus:not(:focus-visible){outline:none;}
.news button{background:none;border:0;color:var(--near-black);font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:0 8px;}
.news .meta{margin-top:16px;}

/* ---------- Search page bar ----------
   A proper fielded bar (hairline border on parchment, espresso Search button,
   gold focus glow) that STAYS PINNED under the site header while the results
   scroll — so searching again never means scrolling back up. The sticky offset
   (--shl-stick-top) is the header's pinned height, measured by site.js, so it
   is correct on web (announce visible) AND in the app (announce slides away,
   status-bar strip added). */
.search-stick{position:sticky;top:var(--shl-stick-top,0px);z-index:40;background:var(--bg);padding:10px 0 14px;}
.search-bar{display:flex;align-items:center;max-width:640px;border-radius:999px;
  background:#F9F7F3;border:1px solid var(--border);padding:4px 4px 4px 18px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);}
.search-bar svg{width:19px;height:19px;stroke:var(--warm-grey);fill:none;stroke-width:1.5;flex:none;}
.search-bar input{flex:1;min-width:0;border:0;background:transparent;padding:13px 12px;
  font-family:var(--sans);font-size:1rem;color:var(--near-black);}
.search-bar input::placeholder{color:var(--warm-grey);}
/* The pill container's gold focus-within glow IS the focus indicator here —
   the input's own ring would draw a second box inside the pill. */
.search-bar input:focus{outline:none;}
.search-bar button{background:var(--near-black);color:var(--ivory);border:1px solid var(--near-black);
  border-radius:999px;font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;padding:12px 22px;cursor:pointer;flex:none;transition:background .3s var(--ease);}
.search-bar button:hover{background:var(--espresso);}
.search-bar:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(154,135,99,.14);}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal);color:var(--ivory);padding-block:clamp(56px,7vw,90px) 32px;border-top:1px solid rgba(245,241,235,.1);}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;
  border-bottom:1px solid rgba(245,241,235,.14);}
.footer-brand .logo{color:var(--ivory);}
.footer-brand p{color:rgba(245,241,235,.6);margin-top:18px;max-width:34ch;font-size:.9rem;}
.footer-col h4{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(245,241,235,.5);margin-bottom:18px;}
.footer-col a{display:block;color:rgba(245,241,235,.82);font-size:.9rem;padding:6px 0;}
.footer-col a:hover{color:var(--ivory);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;
  font-size:.78rem;color:rgba(245,241,235,.5);flex-wrap:wrap;}
/* Brand disclaimer (owner, 2026-07-24) — legal cover, not a message, so it is
   the quietest text on the page. It sits OUTSIDE .footer-bottom on purpose: as
   a flex child its 78ch cap let the copyright span share its line at wide
   widths (measured: own row at 837px, same row at 1440px). Its own block is
   the only way it always reads as a separate line. */
.footer-legal{margin:0;padding-top:24px;max-width:78ch;
  font-size:.68rem;line-height:1.65;color:rgba(245,241,235,.36);}
.footer-legal + .footer-bottom{padding-top:14px;}

/* ---------- Page hero (inner pages) ---------- */
.page-head{padding-block:clamp(20px,3vw,40px) clamp(24px,4vw,48px);}
.page-head .eyebrow{margin-bottom:18px;}
.page-head .display{font-size:clamp(2.4rem,5vw,4.2rem);}
.page-head p{margin-top:20px;color:var(--warm-grey);max-width:56ch;}

/* Compact header for product-listing pages — tidier, so more products show up */
.page-head--compact{padding-block:clamp(12px,1.8vw,22px) clamp(14px,2vw,24px);}
.page-head--compact .eyebrow{margin-bottom:8px;}
.page-head--compact .display{font-size:clamp(1.9rem,3.4vw,3rem);}
.page-head--compact > p{margin-top:10px;}
.page-head--compact .collection-count{font-size:.82rem;}
/* Title + piece-count share one baseline-aligned row (owner, 2026-07-24) —
   "16 pieces available" sits opposite the title instead of stacking under it. */
.page-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;}
.page-head-row .collection-count{margin:0;white-space:nowrap;}
.breadcrumb{font-size:.75rem;letter-spacing:.04em;color:var(--warm-grey);margin-bottom:14px;}
.breadcrumb a:hover{color:var(--near-black);}

/* ---------- Collection toolbar / filters ---------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-block:20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.filters{display:flex;gap:8px;flex-wrap:wrap;}
.chip{border:1px solid var(--border);background:transparent;padding:8px 16px;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--warm-grey);transition:.25s;}
.chip:hover{border-color:var(--near-black);color:var(--near-black);}
.chip.active{background:var(--near-black);border-color:var(--near-black);color:var(--ivory);}
.select{border:1px solid var(--border);background:transparent;padding:8px 14px;font-family:var(--sans);
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--near-black);}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.pdp{display:grid;grid-template-columns:minmax(0,680px) 1fr;gap:clamp(32px,5vw,58px);align-items:start;}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.gallery .g-item{background:var(--stone);overflow:hidden;}
.gallery .g-item img{width:100%;height:100%;object-fit:cover;}
.gallery .g-item.full{grid-column:1/-1;aspect-ratio:4/5;}
.gallery .g-item:not(.full){aspect-ratio:1/1;}
.pdp-info{position:sticky;top:132px;}
.pdp-brand{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;}
.pdp-title{font-size:clamp(1.8rem,3vw,2.6rem);margin:10px 0 14px;line-height:1.08;}
.pdp-attrs{font-size:.95rem;color:var(--warm-grey);line-height:1.7;}
.pdp-price{font-size:1.3rem;font-weight:500;margin:22px 0;padding-block:22px;
  border-block:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:14px;}
.pdp-price.request{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--espresso);}
/* Wishlist heart beside the price (replaces the old boxed button) */
.pdp-heart{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--border);border-radius:50%;
  background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .25s var(--ease);}
.pdp-heart:hover{border-color:var(--near-black);}
.pdp-heart svg{width:18px;height:18px;stroke:var(--near-black);fill:none;stroke-width:1.4;}
.pdp-heart.active svg{fill:var(--near-black);}
/* Share · follow-bell · heart trio beside the price (all reuse the circle look) */
.pdp-pactions{flex:0 0 auto;display:flex;align-items:center;gap:10px;}
.pdp-share svg{width:16px;height:16px;stroke-linecap:round;stroke-linejoin:round;}
/* Follow bell (owner 2026-07-24) — stroke-only, so "following" reads as gold
   rather than the heart's solid fill. Placed after .pdp-heart.active for order. */
.pdp-follow-ic svg{width:17px;height:17px;}
.pdp-follow-ic.active{border-color:var(--gold,#7E6B49);}
.pdp-follow-ic.active svg{stroke:var(--gold,#7E6B49);fill:none;}
.pdp-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.pdp-actions .row{display:flex;gap:12px;}
.pdp-actions .row .btn{flex:1;}
.wa-ico{width:17px;height:17px;fill:currentColor;}
/* The quiet contact line under the price on BUYABLE pieces — Buy Now is the
   only button, so this keeps a way to ask without competing with it. */
.pdp-askline{font-size:.82rem;color:var(--warm-grey);margin:10px 0 0;}
.pdp-askline a{color:var(--near-black);text-decoration:underline;text-underline-offset:2px;}
/* The list sits BETWEEN two hairlines (.services draws the one above, the
   Specifications block the one below). It had no padding, so the first line
   was glued to the rule while 34px sat under the last — centre it instead:
   this padding-top and .pdp-extra's margin-top are a PAIR, keep them equal. */
.pdp-reassure{font-size:.8rem;color:var(--warm-grey);display:flex;flex-direction:column;gap:8px;padding-top:22px;}
.pdp-reassure div{display:flex;gap:9px;align-items:flex-start;}
.pdp-reassure .tick{color:var(--gold-text);}

/* Specifications (always open) + Description (click to expand), moved up into
   the info column beside the photo. */
.pdp-extra{margin-top:22px;} /* pairs with .pdp-reassure's padding-top — equal air above and below the list */
.pdp-spec{padding-top:26px;border-top:1px solid var(--border);}
.pdp-block-h{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:0 0 10px;letter-spacing:.01em;}
.pdp-descblock .disc{border-top:1px solid var(--border);}

/* Disclosure blocks (light, not heavy accordions) */
.disclosures{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--border);}
.disc{border-bottom:1px solid var(--border);}
.disc > button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:0;padding:24px 0;text-align:left;font-family:var(--serif);font-size:1.35rem;
  font-weight:500;color:var(--near-black);}
.disc .plus{position:relative;width:15px;height:15px;flex:none;}
.disc .plus::before,.disc .plus::after{content:"";position:absolute;background:var(--near-black);}
.disc .plus::before{left:0;top:7px;width:15px;height:1px;}
.disc .plus::after{left:7px;top:0;width:1px;height:15px;transition:transform .3s var(--ease);}
.disc[open] .plus::after{transform:rotate(90deg);opacity:0;}
.disc-body{padding:0 0 28px;color:var(--warm-grey);max-width:64ch;font-size:.95rem;line-height:1.75;}
.disc-body ul{margin:0;padding-left:18px;}
.disc-body li{margin-bottom:6px;}
.spec-table{width:100%;border-collapse:collapse;}
.spec-table td{padding:10px 0;border-bottom:1px solid var(--border);font-size:.9rem;vertical-align:top;}
.spec-table td:first-child{color:var(--near-black);width:38%;}
.spec-table td:last-child{color:var(--warm-grey);}

/* Sticky mobile WhatsApp bar */
.wa-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));background:var(--ivory);
  border-top:1px solid var(--border);}
.wa-sticky .btn{flex:1;padding:15px;}

/* ---------- Push opt-in bell (below the footer) ---------- */
.push-optin{text-align:center;padding:22px var(--pad) calc(22px + env(safe-area-inset-bottom));background:var(--bg-2);}
.push-optin-btn{font-size:.8rem;letter-spacing:.08em;color:var(--near-black);
  background:transparent;border:1px solid var(--border);border-radius:100px;
  padding:11px 22px;cursor:pointer;transition:background .25s,color .25s;}
.push-optin-btn:hover{background:var(--near-black);color:var(--ivory);}
.push-optin-btn:disabled{opacity:.7;cursor:default;background:transparent;color:var(--warm-grey);}
.push-optin-hint{max-width:34rem;margin:0 auto;font-size:.8rem;line-height:1.55;color:var(--warm-grey);}
.push-optin-hint b{color:var(--near-black);font-weight:600;}
body.has-tabbar .push-optin{padding-bottom:calc(22px + 64px);} /* clear the mobile tab bar */

/* Floating "New arrivals" bell — a quiet pill, bottom-right, dismissible.
   Replaces the old below-the-footer placement (owner, 2026-07-17). It never
   overlaps the phone tab bar or the product page's WhatsApp bar, and it
   disappears once notifications are on (or dismissed, for 30 days). */
.push-fab{position:fixed;right:14px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:72;}
.push-fab-btn{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--near-black);
  background:var(--bg-2,#F9F7F3);border:1px solid var(--border);border-radius:100px;
  padding:11px 18px;cursor:pointer;box-shadow:0 10px 30px rgba(27,25,23,.18);}
.push-fab-btn:hover{background:var(--near-black);color:var(--ivory);}
.push-fab-btn:disabled{opacity:.85;cursor:default;}
.push-fab-x{position:absolute;top:-7px;right:-6px;width:20px;height:20px;border-radius:50%;
  font-size:10px;line-height:1;color:var(--warm-grey);background:var(--bg,#F5F1EB);
  border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.push-fab.push-fab-out{opacity:0;transition:opacity .35s ease;}
@media (prefers-reduced-motion:no-preference){
  .push-fab{animation:fabIn .4s .9s ease backwards;}
  @keyframes fabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media(max-width:768px){
  body.has-tabbar .push-fab{bottom:calc(82px + env(safe-area-inset-bottom,0px));} /* clear the tab bar */
  /* Mobile + app (owner 2026-07-24): the big page footer is hidden — its
     content lives in the ☰ menu (.drawer-foot). B2B keeps its own minimal
     footer (it has no storefront drawer to fold into). */
  body:not([data-b2b-page]) .site-footer{display:none;}
}
/* The drawer footer block only exists at menu widths — never on desktop. */
@media(min-width:769px){ .drawer-foot{display:none;} }
@media(max-width:760px){
  body:has(.wa-sticky) .push-fab{bottom:calc(96px + env(safe-area-inset-bottom,0px));} /* clear the PDP WhatsApp bar */
}

/* ---------- Mobile bottom tab bar (app-like nav, phones only) ---------- */
.tabbar{display:none;}
@media(max-width:768px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:75;display:flex;
    background:var(--ivory);border-top:1px solid var(--border);
    padding:6px 0 calc(6px + env(safe-area-inset-bottom));}
  .tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:4px 0;color:var(--warm-grey);text-decoration:none;
    font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;}
  .tabbar-item.on{color:var(--near-black);}
  .tabbar-ic{position:relative;display:flex;}
  .tabbar-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4;}
  .tabbar-wc{top:-6px;right:-8px;}
  body.has-tabbar{padding-bottom:64px;}
}

/* ---------- Toast — quiet espresso pill; floats clear of the tab bar ---------- */
.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,14px);z-index:200;
  background:var(--espresso);color:var(--ivory);padding:11px 22px;font-size:.8rem;letter-spacing:.04em;
  border-radius:999px;box-shadow:0 10px 30px rgba(30,26,22,.25);
  max-width:calc(100vw - 40px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease,ease),transform .3s var(--ease,ease);}
.toast.show{opacity:1;transform:translate(-50%,0);}
body.has-tabbar .toast{bottom:calc(82px + env(safe-area-inset-bottom,0px));} /* clear the mobile tab bar */
@media (prefers-reduced-motion:reduce){.toast{transform:translate(-50%,0);transition:opacity .3s;}}

/* ---------- Password show/hide (account pages) ---------- */
.pw-box{position:relative;display:block;}
.pw-box input{width:100%;padding-right:46px;box-sizing:border-box;}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;
  color:var(--warm-grey);padding:0;}
.pw-eye:hover{color:var(--near-black);}
.pw-eye svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(var(--reveal-shift,14px));transition:opacity calc(.8s * var(--anim,1)) var(--ease),transform calc(.8s * var(--anim,1)) var(--ease);}
.reveal.in{opacity:1;transform:none;}
html[data-anim="off"] .reveal{opacity:1;transform:none;transition:none;}
/* Hero (eager) images: invisible until loaded, then a clean fade — the big image
   never shows its loading/blur; it just appears. */
.shl-imgfade{opacity:0;transition:opacity calc(.55s * var(--anim,1)) var(--ease);}
.shl-imgfade.shl-in{opacity:1;}
html[data-anim="off"] .shl-imgfade,html[data-fade="off"] .shl-imgfade{opacity:1;transition:none;}
@media (prefers-reduced-motion:reduce){.shl-imgfade{opacity:1;transition:none;}}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding-block:clamp(48px,8vw,96px);}
.empty .h-sub{margin-bottom:12px;}
.empty p{color:var(--warm-grey);margin-bottom:24px;}

/* ---------- Forms (enquire / sell / account) ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey);}
.field input,.field textarea,.field select{
  border:0;border-bottom:1px solid var(--border);background:transparent;padding:12px 2px;
  font-family:var(--sans);font-size:1rem;color:var(--near-black);}
.field textarea{resize:vertical;min-height:110px;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--near-black);}
.field input:focus:not(:focus-visible),.field textarea:focus:not(:focus-visible),.field select:focus:not(:focus-visible){outline:none;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .product-grid{grid-template-columns:repeat(var(--cols-t,3),1fr);}
  .journal-grid{grid-template-columns:1fr 1fr;}
  .article.lead{grid-column:1/-1;}
  .article.lead .article-media{aspect-ratio:16/9;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
}

/* Header collapses to the burger menu EARLIER than the content breakpoint:
   the full desktop header (logo + nav + utilities + Enquire) needs ~1080px to
   fit, so below that we switch to the centred logo + burger layout. Otherwise
   the header overflows to the right (horizontal scrollbar, cut-off logo) at
   ~900–1080px widths — e.g. the theme-editor preview frame or a small laptop. */
@media (max-width:1080px){
  .nav{display:none;}
  .utils .u-desktop{display:none;}
  .burger,.m-icon{display:inline-flex;}
  .header-inner{display:grid;grid-template-columns:1fr auto 1fr;}
  .header-inner .logo{justify-self:center;text-align:center;grid-column:2;}
  .header-inner .burger{grid-column:1;justify-self:start;}
  .header-inner .utils{grid-column:3;justify-self:end;}
}

@media (max-width:900px){
  .pdp{grid-template-columns:1fr;gap:0;}
  .pdp-info{position:static;margin-top:32px;}
  .feature-split,.sell-grid{grid-template-columns:1fr;gap:36px;}
  .feature-media{order:-1;}
}

@media (max-width:760px){
  .product-grid,.product-grid.cols-3{grid-template-columns:repeat(var(--cols-m,2),1fr);gap:28px 16px;}
  .split{grid-template-columns:1fr;gap:28px;}
  .split.reverse .split-media{order:-1;}
  .houses{display:flex;flex-direction:column;}
  .house{aspect-ratio:3/2;}
  .house.a,.house.d{aspect-ratio:4/5;}
  .tiles{grid-template-columns:1fr;}
  .trust{grid-template-columns:1fr;}
  .journal-grid{grid-template-columns:1fr;}
  .sell-points{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr;}
  .gallery .g-item:not(.full){aspect-ratio:4/5;}
  .wa-sticky{display:flex;}
  /* The enquire / Buy Now bar must sit ABOVE the 5-tab bar, not under it: the
     tab bar is z-index 75 vs this bar's 70, so with bottom:0 the tabs draw
     straight over the button. 64px clears the tab bar's content (~52px) with
     room to spare, plus the phone's home-indicator inset. Paired with
     .tabbar's own height — change one, check the other. */
  body.has-tabbar .wa-sticky{bottom:calc(64px + env(safe-area-inset-bottom,0px));}
  body.has-wa-bar{padding-bottom:78px;}
  /* phones: the permanent bottom bar is the ONLY action home — every in-flow
     CTA block hides, sold/reserved included (owner, 2026-07-05: sold pieces
     follow the same design as enquire; their bar = Alternatives + Source Similar). */
  .pdp-actions{display:none;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}

@media (max-width:460px){
  .product-grid,.product-grid.cols-3{grid-template-columns:repeat(var(--cols-m,2),1fr);}
  .carousel{grid-auto-columns:82%;}
  .footer-top{grid-template-columns:1fr;}
}

/* ---------- Mobile hero & chrome polish (owner spec, 2026-07-05) ----------
   Phones only — the approved desktop design is untouched. */
@keyframes announce-ticker{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media (max-width:760px){
  /* 1. Announcement bar: one line, gently scrolling ticker (no wrap to 2 lines) */
  .announce{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 0;}
  .announce .announce-msg{display:inline-block;padding-left:100%;animation:announce-ticker 16s linear infinite;}
  /* 2+4. Transparent header kept; stronger top gradient for logo/icon legibility,
     and a deeper lower-third gradient behind the hero copy */
  .hero::after{background:linear-gradient(180deg,
    rgba(27,25,23,.55) 0%, rgba(27,25,23,0) 30%,
    rgba(27,25,23,0) 52%, rgba(27,25,23,.72) 100%);}
  /* 3. Logo higher + slightly smaller (80% of the editor's logo-size setting) */
  .header-inner{padding-block:12px;}
  .header-inner .logo{font-size:calc(var(--logo-size,1.5rem)*.8);}
  /* 5. Small eyebrow, heading ~48–58px */
  .hero .eyebrow{font-size:.6rem;letter-spacing:.26em;}
  .hero .display{font-size:clamp(44px,13vw,58px);line-height:1.06;}
  .hero p{font-size:.95rem;margin-top:16px;}
  /* 6. CTA button (outlined at all widths now) — just tighter spacing on phones */
  .hero .arrow{padding:14px 24px;margin-top:26px;}
}
@media (prefers-reduced-motion:reduce){
  .announce .announce-msg{animation:none;padding-left:0;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}

/* ============================================================
   EXTENDED SYSTEM — identity, SH Edit, filters, PDP, search,
   supporting pages, admin editor
   ============================================================ */

/* ---------- Logo system ---------- */
.logo--compact{font-size:1.15rem;letter-spacing:.16em;}
.logo--compact small{display:none;}
.monogram{font-family:var(--serif);font-weight:500;font-size:1.4rem;letter-spacing:.05em;
  width:44px;height:44px;border:1px solid currentColor;display:inline-flex;align-items:center;justify-content:center;}
.logo--light,.logo--light small{color:var(--ivory);}
.logo--dark,.logo--dark small{color:var(--near-black);}
.logo-specimen{display:flex;flex-wrap:wrap;gap:20px;}
.logo-swatch{border:1px solid var(--border);padding:26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-width:200px;}
.logo-swatch.on-dark{background:var(--charcoal);}
.logo-swatch .meta{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;}
.logo-swatch.on-dark .meta{color:rgba(245,241,235,.6);}
/* Product image watermark */
.watermark{position:absolute;right:14px;bottom:14px;z-index:2;font-family:var(--serif);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgb(245,241,235);
  opacity:var(--wm-opacity,.72);mix-blend-mode:overlay;pointer-events:none;}
html[data-wmpos="bottom-left"] .watermark{right:auto;left:14px;}
html[data-wmpos="center"] .watermark{right:auto;bottom:auto;left:50%;top:50%;transform:translate(-50%,-50%);}
/* Global → Animations switches (undefined = on, matching the pre-wired shop) */
html[data-imgswap="off"] .pc-media .alt{display:none;}
html[data-linku="off"] .arrow::after{display:none;}
html[data-fade="off"] .reveal{opacity:1;transform:none;transition:none;}

/* ---------- The SH Edit ---------- */
.edit-feature{position:relative;overflow:hidden;background:var(--charcoal);color:var(--ivory);}
.edit-feature-grid{display:grid;grid-template-columns:1fr 1fr;min-height:520px;}
.edit-feature-media{position:relative;overflow:hidden;}
.edit-feature-media img{width:100%;height:100%;object-fit:cover;}
.edit-feature-body{padding:clamp(40px,6vw,84px);display:flex;flex-direction:column;justify-content:center;}
.edit-feature-body .eyebrow{color:rgba(245,241,235,.6);}
.edit-num{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--gold-text);margin-bottom:14px;}
.edit-feature-body h2{color:var(--ivory);font-size:clamp(2rem,3.6vw,3rem);}
.edit-feature-body p{color:rgba(245,241,235,.75);margin-top:18px;max-width:42ch;}
.edit-feature-body .arrow{margin-top:30px;}
.edit-mini{display:grid;grid-auto-flow:column;grid-auto-columns:120px;gap:12px;margin-top:34px;overflow-x:auto;scrollbar-width:none;}
.edit-mini::-webkit-scrollbar{display:none;}
.edit-mini a{display:block;aspect-ratio:var(--ratio-product);overflow:hidden;background:var(--espresso);}
.edit-mini img{width:100%;height:100%;object-fit:cover;}

.edit-archive{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px);}
.edit-card{display:block;}
.edit-card-media{aspect-ratio:var(--ratio-landscape);overflow:hidden;background:var(--stone);position:relative;}
.edit-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.edit-card:hover .edit-card-media img{transform:scale(var(--img-zoom));}
.edit-card .edit-num{color:var(--gold-text);margin:20px 0 6px;}
.edit-card h3{font-size:clamp(1.6rem,2.6vw,2.2rem);}
.edit-card p{color:var(--warm-grey);margin-top:10px;max-width:48ch;}

/* Edition (single) header */
.edition-hero{position:relative;min-height:64vh;display:flex;align-items:flex-end;color:var(--ivory);overflow:hidden;}
.edition-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.edition-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,25,23,.15),rgba(27,25,23,.7));}
.edition-hero .inner{position:relative;z-index:2;padding-bottom:clamp(40px,7vh,80px);max-width:640px;}
.edition-hero h1{color:var(--ivory);font-size:clamp(2.4rem,5vw,4.4rem);}

/* ---------- Collection page upgrades ---------- */
.collection-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:end;}
.collection-hero .cover{aspect-ratio:var(--ratio-landscape);overflow:hidden;background:var(--stone);}
.collection-hero .cover img{width:100%;height:100%;object-fit:cover;}
.collection-count{font-size:.8rem;letter-spacing:.04em;color:var(--warm-grey);}
.toolbar .left{display:flex;align-items:center;gap:16px;}
.btn-filter{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border);
  background:none;padding:9px 18px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--near-black);}
.btn-filter svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4;flex:none;}

/* Filter drawer */
.filter-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:130;background:var(--bg);
  transform:translateX(100%);transition:transform .45s var(--ease);display:flex;flex-direction:column;
  border-left:1px solid var(--border);}
.filter-drawer.open{transform:none;}
.filter-overlay{position:fixed;inset:0;z-index:125;background:rgba(27,25,23,.35);opacity:0;pointer-events:none;transition:opacity .35s;}
.filter-overlay.open{opacity:1;pointer-events:auto;}
.filter-head{display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad);border-bottom:1px solid var(--border);}
.filter-head h3{font-size:1.4rem;}
.filter-body{overflow-y:auto;padding:8px var(--pad) 20px;flex:1;}
.filter-group{border-bottom:1px solid var(--border);padding:18px 0;}
.filter-group > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;}
.filter-group > summary::-webkit-details-marker{display:none;}
.filter-group[open] > summary .chev{transform:rotate(180deg);}
.filter-group .chev{transition:transform .3s;font-size:.7rem;color:var(--warm-grey);}
.filter-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.filter-opt{border:1px solid var(--border);background:none;padding:7px 14px;font-size:.75rem;color:var(--warm-grey);cursor:pointer;transition:.2s;}
.filter-opt:hover{border-color:var(--near-black);color:var(--near-black);}
.filter-opt.active{background:var(--near-black);border-color:var(--near-black);color:var(--ivory);}
.filter-foot{padding:18px var(--pad);border-top:1px solid var(--border);display:flex;gap:12px;}
.filter-foot .btn{flex:1;}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;padding-top:18px;}
.active-filters .pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);
  padding:6px 12px;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--near-black);}
.active-filters .pill button{background:none;border:0;font-size:1rem;line-height:1;color:var(--warm-grey);cursor:pointer;}
.active-filters .clear{background:none;border:0;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--warm-grey);text-decoration:underline;cursor:pointer;}

/* Sourcing CTA band + related editorial */
.sourcing-band{border-block:1px solid var(--border);text-align:center;}
.sourcing-band .h-sub{margin-bottom:12px;}
.sourcing-band p{color:var(--warm-grey);max-width:52ch;margin:0 auto 24px;}

/* ---------- Product page — storytelling & condition ---------- */
.pdp-story{margin-top:26px;display:flex;flex-direction:column;gap:20px;}
.story-block .lbl{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);margin-bottom:7px;}
.story-block p{font-family:var(--serif);font-size:1.2rem;line-height:1.5;color:var(--espresso);font-style:italic;}
.rarity{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey);margin-top:4px;}
.rarity .dots{display:inline-flex;gap:4px;}
.rarity .dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--espresso);}
.rarity .dot.on{background:var(--espresso);}

.condition-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.grade{display:inline-flex;align-items:center;gap:10px;}
.grade b{font-family:var(--serif);font-size:1.6rem;font-weight:500;}
.grade .tag{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);background:var(--espresso);padding:4px 10px;}
.condition-grid{width:100%;border-collapse:collapse;}
.condition-grid td{padding:12px 0;border-bottom:1px solid var(--border);font-size:.9rem;vertical-align:top;}
.condition-grid td:first-child{width:34%;color:var(--near-black);}
.condition-grid td:last-child{color:var(--warm-grey);}

/* Private client services */
.services{list-style:none;margin:0;padding:0;border-top:1px solid var(--border);}
.services li{border-bottom:1px solid var(--border);}
.services a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-size:.92rem;color:var(--near-black);}
.services a:hover{color:var(--espresso);}
.services .arr{color:var(--warm-grey);transition:transform .3s var(--ease);}
.services a:hover .arr{transform:translateX(5px);}

/* Sold banner + state */
.sold-banner{background:var(--espresso);color:var(--ivory);text-align:center;padding:14px 20px;
  font-family:var(--serif);font-style:italic;font-size:1.15rem;}
.sold-flag{position:absolute;top:14px;left:14px;z-index:2;background:var(--charcoal);color:var(--ivory);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;}
.product-card.is-sold .pc-media img{filter:grayscale(.25);}
.pc-price.sold{color:var(--warm-grey);font-style:italic;font-family:var(--serif);font-size:1rem;}

/* ---------- Full-screen gallery / lightbox ---------- */
.pdp .gallery .g-item{position:relative;cursor:zoom-in;}
.g-num{position:absolute;left:12px;top:12px;z-index:2;font-size:.68rem;letter-spacing:.1em;color:var(--ivory);
  background:rgba(27,25,23,.5);padding:3px 8px;}
.g-cap{position:absolute;left:12px;bottom:12px;z-index:2;font-size:.68rem;letter-spacing:.06em;color:var(--ivory);
  background:rgba(27,25,23,.5);padding:3px 8px;}
.wear-marker{position:absolute;z-index:3;width:26px;height:26px;border-radius:50%;border:1px solid var(--ivory);
  background:rgba(27,25,23,.55);color:var(--ivory);font-size:.7rem;display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);cursor:help;}
.wear-marker span{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--near-black);color:var(--ivory);font-size:.68rem;letter-spacing:.02em;padding:5px 9px;opacity:0;
  pointer-events:none;transition:opacity .25s;}
@media(hover:hover){.wear-marker:hover span{opacity:1;}}
/* Touch screens can't hover — condition labels stay visible. */
@media(hover:none){.wear-marker span{opacity:1;}}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,18,16,.96);display:none;flex-direction:column;}
.lightbox.open{display:flex;}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.lb-stage img{max-width:92vw;max-height:82vh;object-fit:contain;transition:transform .35s var(--ease);cursor:zoom-in;}
.lb-stage img.zoomed{cursor:zoom-out;transform:scale(2.2);}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;color:var(--ivory);}
.lb-top .count{font-size:.8rem;letter-spacing:.1em;}
.lb-close,.lb-nav{background:none;border:0;color:var(--ivory);cursor:pointer;padding:8px;}
.lb-close svg,.lb-nav svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.3;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;}
.lb-nav.prev{left:14px;} .lb-nav.next{right:14px;}
.lb-thumbs{display:flex;gap:8px;justify-content:center;padding:16px;overflow-x:auto;}
.lb-thumbs img{width:54px;height:64px;object-fit:cover;opacity:.5;cursor:pointer;transition:opacity .25s;}
.lb-thumbs img.active{opacity:1;outline:1px solid var(--ivory);}

/* ---------- Predictive search ---------- */
.search-pop{position:relative;}
.predict{position:absolute;top:calc(100% + 10px);right:0;width:min(440px,86vw);background:var(--bg);
  border:1px solid var(--border);z-index:90;max-height:70vh;overflow-y:auto;display:none;}
.predict.open{display:block;}
.predict .p-head{padding:12px 16px;border-bottom:1px solid var(--border);}
.predict .p-head input{width:100%;border:0;background:none;font-family:var(--sans);font-size:.95rem;color:var(--near-black);}
.predict .p-head input:focus:not(:focus-visible){outline:none;}
.predict-row{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);}
.predict-row:hover{background:var(--bg-3);}
.predict-row img{width:44px;height:54px;object-fit:cover;background:var(--stone);flex:none;}
.predict-row .pr-brand{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-grey);}
.predict-row .pr-name{font-family:var(--serif);font-size:1.05rem;line-height:1.2;}
.predict-row .pr-meta{font-size:.75rem;color:var(--warm-grey);margin-left:auto;text-align:right;white-space:nowrap;}
.predict .p-empty{padding:20px 16px;}
.predict .p-empty p{color:var(--warm-grey);font-size:.88rem;margin-bottom:12px;}
.predict-suggest{padding:12px 16px;}
.predict-suggest .lbl{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-grey);margin-bottom:8px;}
.predict-suggest a{display:inline-block;font-size:.8rem;border:1px solid var(--border);padding:5px 11px;margin:0 6px 6px 0;color:var(--near-black);}

/* ---------- Supporting pages: prose, faq, guide, contact ---------- */
.prose{max-width:var(--maxw-narrow);}
.prose h2{font-size:var(--h3);margin:40px 0 14px;}
.prose h3{font-size:var(--h4);margin:28px 0 10px;}
.prose p{color:var(--warm-grey);margin-bottom:16px;line-height:1.8;}
.prose ul{color:var(--warm-grey);padding-left:20px;margin-bottom:16px;}
.prose li{margin-bottom:8px;}
.prose a{text-decoration:underline;}
.prose ol{color:var(--warm-grey);padding-left:20px;margin-bottom:16px;}
.prose blockquote{margin:32px 0;padding:4px 0 4px 20px;border-left:2px solid var(--gold);font-family:var(--serif);font-size:1.3rem;line-height:1.55;color:var(--text);}
.prose blockquote p{margin-bottom:8px;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;}
.prose hr{border:none;border-top:1px solid var(--border);margin:40px 0;}
.prose img{max-width:100%;height:auto;display:block;margin:32px 0;}
/* Sized story photos (inline width:%) keep a readable size on phones —
   min-width wins over the inline width, so no !important needed. */
@media (max-width:640px){ .prose img{min-width:60%;} }
.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 0;font-family:var(--serif);font-size:1.3rem;
  display:flex;justify-content:space-between;gap:16px;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{position:relative;width:14px;height:14px;flex:none;}
.faq-item summary .plus::before,.faq-item summary .plus::after{content:"";position:absolute;background:var(--near-black);}
.faq-item summary .plus::before{top:6px;left:0;width:14px;height:1px;}
.faq-item summary .plus::after{left:6px;top:0;width:1px;height:14px;transition:transform .3s;}
.faq-item[open] summary .plus::after{transform:rotate(90deg);opacity:0;}
.faq-item .a{padding:0 0 24px;color:var(--warm-grey);max-width:62ch;line-height:1.75;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);}
.contact-methods{list-style:none;margin:0;padding:0;}
.contact-methods li{border-top:1px solid var(--border);padding:20px 0;}
.contact-methods li:last-child{border-bottom:1px solid var(--border);}
.contact-methods .lbl{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-grey);margin-bottom:6px;}
.contact-methods b{font-family:var(--serif);font-weight:500;font-size:1.3rem;}

/* Condition guide grade legend */
.grade-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);}
.grade-legend > div{background:var(--bg);padding:24px;}
.grade-legend b{font-family:var(--serif);font-size:1.5rem;font-weight:500;display:block;margin-bottom:6px;}
.grade-legend span{font-size:.85rem;color:var(--warm-grey);}

/* ---------- States: 404 / maintenance / loading / error ---------- */
.state-full{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;}
.state-full .inner{max-width:520px;}
.state-full .big{font-family:var(--serif);font-size:clamp(4rem,12vw,9rem);line-height:.9;color:var(--espresso);}
.state-full p{color:var(--warm-grey);margin:18px 0 28px;}
.skeleton{background:linear-gradient(100deg,var(--stone) 30%,var(--parchment) 50%,var(--stone) 70%);
  background-size:200% 100%;animation:sk 1.4s var(--ease) infinite;}
@keyframes sk{to{background-position:-200% 0;}}
.sk-card{margin-bottom:16px;}
.sk-card .sk-img{aspect-ratio:var(--ratio-product);}
.sk-line{height:12px;margin-top:12px;width:70%;}
.sk-line.short{width:40%;}
.error-note{border:1px solid var(--border);border-left:3px solid var(--espresso);background:var(--bg-3);
  padding:16px 20px;font-size:.9rem;color:var(--warm-grey);}
/* Collection description — moved below the pieces (owner, 2026-07-24):
   a quiet centered closing note between the grid and the sourcing band.
   Wide measure (owner "too short and many line", same day): ~4 lines on
   desktop instead of a narrow 9-line column. */
/* Bottom padding stays small — the section below already brings its own air. */
.collection-note{padding:8px 0 24px;}
.collection-note p{max-width:1040px;margin:0 auto;padding:0 clamp(20px,4vw,48px);
  text-align:center;color:var(--warm-grey);line-height:1.85;font-size:.95rem;}
@media (max-width:760px){ .collection-note{padding:0 0 20px;} }

/* Gallery video (Tier 2) — a real player slide + a dark play-tile thumb. */
.gv-slide--video video{width:100%;height:100%;object-fit:contain;background:#1B1917;display:block;}
.gv-thumb--video{display:flex;align-items:center;justify-content:center;background:#1B1917;color:var(--ivory,#F5F1EB);}
.gv-thumb--video svg{width:20px;height:20px;}

/* "In the app first" strip (Tier 2) — the 24h app head-start, said plainly. */
/* The bottom margin matters: on a BUYABLE piece inside its window there is no
   action block below (2026-07-24), so without it the notice butts straight
   into the reassurance list — the 28px used to come from .pdp-actions. */
.pdp-appfirst{border:1px solid var(--gold,#7E6B49);background:var(--parchment,#F9F7F3);
  padding:13px 16px;margin:14px 0 24px;font-size:.84rem;line-height:1.6;color:var(--warm-grey);}
.pdp-appfirst b{color:var(--near-black);font-weight:600;}

/* Visually hidden, screen-reader available. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Price range in the filter drawer (Tier 2). */
.price-range{display:flex;align-items:center;gap:10px;padding:4px 0 8px;color:var(--warm-grey);}
.price-range input{width:110px;border:1px solid var(--border);background:var(--parchment,#F9F7F3);
  padding:9px 10px;font:inherit;font-size:.85rem;color:var(--near-black);outline:none;}
.price-range input:focus{border-color:var(--near-black);}

/* Catalogue-failure strip (Tier 4) — sits inside <main>, clear of the header. */
.store-error-note{margin:24px clamp(20px,4vw,48px) 0;}
.store-error-retry{background:none;border:none;padding:0;font:inherit;color:var(--near-black);
  text-decoration:underline;cursor:pointer;}

/* ---------- Admin theme editor ---------- */
.admin{display:grid;grid-template-columns:340px 1fr;min-height:100vh;}
.admin-panel{border-right:1px solid var(--border);background:var(--bg-3);overflow-y:auto;height:100vh;position:sticky;top:0;}
.admin-panel .ap-head{padding:22px 24px;border-bottom:1px solid var(--border);}
.admin-panel .ap-head .logo{font-size:1.15rem;}
.admin-panel .ap-status{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;color:var(--gold-text);}
.ap-section{border-bottom:1px solid var(--border);padding:18px 24px;}
.ap-section h4{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey);margin-bottom:14px;}
.ap-field{margin-bottom:14px;}
.ap-field label{display:block;font-size:.75rem;color:var(--near-black);margin-bottom:6px;}
.ap-field input[type=color]{width:38px;height:26px;border:1px solid var(--border);padding:0;background:none;vertical-align:middle;}
.ap-field input[type=range]{width:100%;}
.ap-field input[type=text],.ap-field select{width:100%;border:1px solid var(--border);background:var(--bg);padding:8px 10px;font-family:var(--sans);font-size:.85rem;}
.ap-row{display:flex;gap:10px;align-items:center;justify-content:space-between;}
.admin-stage{display:flex;flex-direction:column;height:100vh;}
.admin-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--bg);}
.device-toggle{display:flex;gap:4px;border:1px solid var(--border);}
.device-toggle button{background:none;border:0;padding:8px 16px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--warm-grey);cursor:pointer;}
.device-toggle button.active{background:var(--near-black);color:var(--ivory);}
.admin-actions{display:flex;gap:10px;align-items:center;}
.admin-frame-wrap{flex:1;overflow:auto;background:var(--stone);display:flex;justify-content:center;padding:28px;}
.admin-frame{background:var(--bg);border:1px solid var(--border);width:100%;height:100%;transition:width .4s var(--ease),height .4s var(--ease);}
.admin-frame.tablet{width:768px;} .admin-frame.mobile{width:390px;}
.badge{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--border);color:var(--warm-grey);}
.badge.draft{background:var(--espresso);color:var(--ivory);border-color:var(--espresso);}
.badge.live{background:var(--gold);color:var(--charcoal);border-color:var(--gold);}
.revision-list{list-style:none;margin:0;padding:0;}
.revision-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.8rem;}
.revision-list button{background:none;border:0;color:var(--espresso);text-decoration:underline;font-size:.75rem;cursor:pointer;}

/* ---------- Extended responsive ---------- */
@media (max-width:1024px){
  .edit-feature-grid{grid-template-columns:1fr;}
  .edit-feature-media{aspect-ratio:16/9;}
  .edit-archive{grid-template-columns:1fr;}
  .collection-hero{grid-template-columns:1fr;}
  .collection-hero .cover{order:-1;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .admin{grid-template-columns:1fr;}
  .admin-panel{height:auto;position:static;max-height:none;}
  .admin-stage{height:auto;min-height:70vh;}
}

/* ============================================================
   CONFIG-DRIVEN STOREFRONT ADDITIONS (theme editor era)
   ============================================================ */
/* Button tokens (so colour/radius controls take effect) */
.btn{border-radius:var(--btn-radius,0);}
.btn--fill{background:var(--btn-bg,var(--near-black));color:var(--btn-text,var(--ivory));border-color:var(--btn-bg,var(--near-black));}
.btn--fill:hover{background:var(--btn-hover,transparent);color:var(--btn-text,var(--near-black));border-color:var(--btn-hover,var(--near-black));}
.product-card .pc-media,.tile,.house,.pc-media{border-radius:var(--radius,0);overflow:hidden;}

/* Header: nav dropdowns, currency, non-sticky */
.nav-item{position:relative;}
/* Plain inline — inline-flex blockified the link (padding counted into its
   height), making dropdown parents sit ~4px higher than their siblings. */
.nav-parent{display:inline;}
.nav-drop{position:absolute;top:100%;left:0;background:var(--bg);border:1px solid var(--border);
  min-width:190px;padding:8px 0;display:none;z-index:20;box-shadow:none;}
/* :focus-within as well as :hover — the dropdown was hover-ONLY, so a keyboard
   user could never open it (and the 2026-07-24 flyout inherited that). */
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{display:block;}
.nav-drop a{display:block;padding:9px 18px;font-size:.8rem;color:var(--near-black);}
.nav-drop a:hover{background:var(--bg-3);}
.nav-drop a::after{display:none;}
.nav-caret{font-size:.6em;margin-left:4px;opacity:.55;display:inline-block;transform:translateY(-1px);}
/* MEGA MENU — LEVEL BY LEVEL (owner 2026-07-24: "it should be level by level.
   it is missing bags now"). One column per depth: Bags → Birkin → Birkin 25.
   Pointing at an entry fills the column to its RIGHT; the parent stays on
   screen and highlighted, so you always know where you are. Earlier builds
   flattened the deeper levels into sibling columns, which dropped the parent
   name and forced a 420px-minimum panel that hung over the wordmark.
   NB: no `display` here — .nav-drop hides it until open and the OPEN rule
   below re-declares it; setting it here made the panel permanently visible. */
.nav-mega{padding:0;width:max-content;left:0;transform:none;
  /* min-width:0 overrides the 190px floor .nav-drop sets — otherwise, when a
     childless category (Shoes) collapses the panel to just the 158px rail, the
     190px floor left a ~32px empty strip beside it (owner, 2026-07-24: "one
     line box beside bags and shoes"). Now the panel is exactly its content. */
  min-width:0;
  max-width:min(880px,calc(100vw - 48px));}
.nav-item:hover .nav-mega,.nav-item:focus-within .nav-mega{display:flex;}
.nav-lvl-col{padding:12px 0;min-width:158px;border-right:1px solid var(--border);}
.nav-lvl-col:last-child,.nav-lvl-col.empty{border-right:0;}
/* Nothing to show at this depth (a category with no sub-items yet) — the column
   collapses rather than hanging open blank beside the one you're pointing at. */
.nav-lvl-col.empty{display:none;}
.nav-drop .nav-lvl-col a{display:block;padding:8px 20px;font-size:.8rem;color:var(--near-black);}
.nav-drop .nav-rail a{color:var(--warm-grey);letter-spacing:.06em;font-size:.78rem;}
/* The lit row IS the breadcrumb — it marks the parent of the column beside it. */
.nav-drop .nav-lvl-col a.on{background:var(--bg-3);color:var(--near-black);}
.nav-lvl{display:none;}
.nav-lvl.on{display:block;}
.nav-l2-arrow{float:right;opacity:.4;line-height:1;}
/* Single category: its name heads the column instead of being a one-entry rail. */
.nav-drop a.nav-mega-h{padding:2px 20px 9px;margin-bottom:6px;border-bottom:1px solid var(--border);
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--warm-grey);}
.nav-drop a.nav-mega-h:hover{background:none;color:var(--near-black);}
/* The panel hangs from its own menu item; the last two items flip it rightwards
   so a wide panel can't run off the edge of the screen. */
.nav-item:last-child .nav-mega,
.nav-item:nth-last-child(2) .nav-mega{left:auto;right:0;}
/* Mobile drawer: parents with sub-items are an accordion — the label link
   navigates, the ▾ arrow button expands/collapses the indented sub-list. */
.drawer nav .drawer-group{border-bottom:1px solid var(--border);}
.drawer nav .drawer-row{display:flex;align-items:center;}
.drawer nav .drawer-row a{flex:1;border-bottom:0;min-width:0;}
.drawer-caret{background:transparent;border:0;align-self:stretch;width:52px;margin-right:-8px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:1.05rem;color:var(--warm-grey);transition:transform .3s var(--ease);}
.drawer-caret.open{transform:rotate(180deg);}
.drawer nav a.drawer-sub{display:block;font-family:var(--sans);font-size:.95rem;font-weight:400;
  padding:10px 0 10px 22px;color:var(--warm-grey);border-bottom:1px solid var(--border);}
.drawer-subs{padding-bottom:4px;}
.drawer-subs .drawer-sub:last-child{border-bottom:0;}
/* Third level, phone: the nested group sits behind a hairline and indents once
   more — the reference design the owner chose (2026-07-24). */
.drawer nav .drawer-group--sub{border-bottom:1px solid var(--border);}
.drawer nav .drawer-group--sub:last-child{border-bottom:0;}
.drawer nav .drawer-row--sub a.drawer-sub{border-bottom:0;}
.drawer-subs--deep{margin:0 0 6px 22px;padding:2px 0 2px 14px;border-left:1px solid var(--border);}
.drawer nav a.drawer-sub--deep{padding:9px 0;font-size:.9rem;border-bottom:0;}
/* Fourth level: a small heading + its links, not another accordion. */
.drawer-deepgroup{padding:4px 0 8px;}
.drawer nav a.drawer-deep-h{display:block;padding:6px 0 2px;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--warm-grey);border-bottom:0;}
.drawer nav a.drawer-sub--leaf{padding:7px 0 7px 12px;font-size:.86rem;}
.drawer-subs:not([hidden]){animation:drawerSub .28s var(--ease);}
@keyframes drawerSub{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
html[data-anim="off"] .drawer-subs:not([hidden]){animation:none;}
@media(prefers-reduced-motion:reduce){.drawer-subs:not([hidden]){animation:none;}}
.header-currency{border:1px solid var(--border);background:transparent;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.06em;padding:6px 8px;color:inherit;}
.header-group.not-sticky{position:static;}

/* Announcement rotation / dismiss */
.announce{position:relative;transition:none;}
.announce-msg{transition:opacity .25s var(--ease);display:inline-block;}
.announce-x{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:inherit;font-size:1rem;line-height:1;cursor:pointer;opacity:.7;}

/* Footer newsletter / social / accordion */
.footer-news{display:flex;gap:0;border-bottom:1px solid rgba(245,241,235,.3);margin-top:20px;max-width:320px;}
.footer-news input{flex:1;background:none;border:0;color:inherit;padding:10px 2px;font-family:var(--sans);font-size:.85rem;}
.footer-news input::placeholder{color:rgba(245,241,235,.5);}
.footer-news input:focus:not(:focus-visible){outline:none;}
.footer-news button{background:none;border:0;color:inherit;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:0 6px;}
.footer-social{margin-top:18px;color:rgba(245,241,235,.6);}
.footer-social.icons{display:flex;gap:16px;align-items:center;}
.footer-social.icons .fsoc{display:inline-flex;color:rgba(245,241,235,.72);transition:color .2s,transform .2s;}
.footer-social.icons .fsoc:hover{color:var(--ivory);transform:translateY(-1px);}
.footer-social.icons .fsoc svg{width:22px;height:22px;display:block;}
/* The accordion toggle is a real <button> (keyboard + screen-reader
   reachable); it must look exactly like the plain <h4> it replaced. */
.footer-col.acc h4{margin:0;}
.footer-col.acc .facc-btn{all:unset;display:block;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;}
@media (max-width:760px){
  .footer-col.acc .facc-btn{cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    width:100%;min-height:44px;box-sizing:border-box;} /* 44px touch floor (was 12.66px) */
  .footer-col.acc .facc-btn::after{content:'+';}
  .footer-col.acc.open .facc-btn::after{content:'–';}
  .footer-col.acc .footer-col-links{display:none;}
  .footer-col.acc.open .footer-col-links{display:block;}
}

/* Split hero + image banner + hero video */
.split-hero-grid{display:grid;grid-template-columns:1fr 1fr;min-height:80vh;}
.split-hero-media img{width:100%;height:100%;object-fit:cover;}
.split-hero-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,6vw,90px);}
.wrap-pad{padding-inline:clamp(24px,5vw,80px);}
.image-banner{position:relative;min-height:52vh;display:flex;align-items:center;overflow:hidden;}
.image-banner .ib-media{position:absolute;inset:0;}
.image-banner .ib-media img{width:100%;height:100%;object-fit:cover;}
.image-banner .ib-overlay{position:absolute;inset:0;}
.image-banner .ib-inner{position:relative;z-index:2;width:100%;}
@media (max-width:760px){ .split-hero-grid{grid-template-columns:1fr;} .split-hero-media{aspect-ratio:4/5;} }

/* Frozen breadcrumb bar (PDP) — pins just below the sticky header.
   Uses --shl-stick-top (the header's PINNED height, measured by site.js —
   correct on web AND in the app where the announce slides away); the older
   --crumb-top page measurement stays as a fallback. Without this the app
   showed a see-through gap between the header and the toolbar. */
.crumb-bar{position:sticky;top:var(--shl-stick-top,var(--crumb-top,64px));z-index:60;background:var(--bg);
  border-bottom:1px solid var(--border);}
.crumb-bar .breadcrumb{margin:0;padding-block:13px;}

/* Sticky listing toolbar (collection pages): brand chips + search + filter + sort */
.listing-tools{position:sticky;top:var(--shl-stick-top,var(--crumb-top,64px));z-index:60;background:var(--bg);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-block:12px;}
.lt-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;}
.lt-chips::-webkit-scrollbar{display:none;}
.lt-chips .chip{white-space:nowrap;flex:0 0 auto;}
.lt-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.lt-search{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:9px;border:1px solid var(--border);
  border-radius:999px;padding:10px 16px;background:var(--bg-3);transition:border-color .2s;}
.lt-search:focus-within{border-color:var(--near-black);}
.lt-search svg{width:16px;height:16px;stroke:var(--warm-grey);fill:none;stroke-width:1.5;flex:none;}
.lt-search input{border:0;background:none;flex:1;min-width:0;font-family:var(--sans);font-size:.85rem;color:var(--near-black);}
.lt-search input:focus:not(:focus-visible){outline:none;}
/* Rounded controls (as requested) */
.chip{border-radius:999px;}
.btn-filter{border-radius:999px;}
.select{border-radius:999px;cursor:pointer;}
@media (max-width:560px){
  .lt-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .lt-search{grid-column:1 / -1;}
  .lt-controls .btn-filter{justify-content:center;}
  .lt-controls .select{width:100%;}
}
/* COMPACT phone + app view (owner, 2026-07-24: "too big… font is big").
   The collection head + toolbar ate ~490px before the first bag. Trim the
   title (it was floored at 30px on a phone), tighten the vertical rhythm, and
   slim the chips/search/controls — WITHOUT dropping the search + sort text
   below 16px, which would re-trigger the iOS focus-zoom. Phone-only; desktop
   and the app share this CSS, so both get the tidier view. */
@media (max-width:560px){
  .page-head--compact{padding-block:10px 8px;}
  .page-head--compact .display{font-size:1.4rem;line-height:1.05;}
  .page-head--compact .collection-count{font-size:.72rem;}
  .page-head-row{gap:6px 12px;}
  .listing-tools{padding-block:9px;}
  .lt-chips{padding-bottom:8px;gap:6px;}
  .lt-controls{gap:8px;}
  .lt-chips .chip{padding:6px 13px;font-size:.68rem;}
  .lt-search{padding:8px 14px;}
  /* Filter + the sort select sit side by side, so they read as one matched
     pair (owner, 2026-07-24: "feature filter font is big" — the sort was 16px
     next to a 11px Filter). Both ~13px. The select's !important overrides the
     iOS zoom-guard's 16px below — safe here because a <select> opens a picker,
     it never triggers focus-zoom the way a text input does. */
  .btn-filter{padding:8px 12px;font-size:.82rem;}
  .select{padding:8px 12px;}
  .lt-controls .select{font-size:.82rem !important;}
}

/* Swipeable product gallery (PDP) — big swipe image + thumbnail strip.
   min-width:0 everywhere so the horizontal scroller can shrink to the
   viewport instead of forcing page-wide overflow. */
.gallery-v2{display:flex;flex-direction:column;gap:10px;min-width:0;
  max-width:min(560px,62vh);margin-inline:auto;width:100%;}
.gv-stage{position:relative;min-width:0;}
.gv-main{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;min-width:0;
  aspect-ratio:var(--ratio-product,4 / 5);background:var(--stone);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.gv-main::-webkit-scrollbar{display:none;}
.gv-slide{position:relative;flex:0 0 100%;min-width:0;scroll-snap-align:start;overflow:hidden;cursor:zoom-in;}
.gv-slide img{width:100%;height:100%;object-fit:cover;}
.gv-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;
  background:rgba(245,241,235,.88);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .25s;}
@media(hover:hover){.gv-stage:hover .gv-arrow{opacity:1;}}
/* Touch screens: arrows always visible — a hover-reveal would eat the first tap. */
@media(hover:none){.gv-arrow{opacity:1;}}
.gv-arrow svg{width:20px;height:20px;stroke:var(--near-black);fill:none;stroke-width:1.5;}
.gv-arrow.prev{left:14px;} .gv-arrow.next{right:14px;}
.gv-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;min-width:0;}
.gv-thumbs::-webkit-scrollbar{display:none;}
.gv-thumb{flex:0 0 auto;width:66px;aspect-ratio:1 / 1;padding:0;border:1px solid var(--border);background:var(--stone);
  cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s;}
.gv-thumb.active{opacity:1;border-color:var(--near-black);}
.gv-thumb img{width:100%;height:100%;object-fit:cover;}
@media (max-width:760px){
  .gv-arrow{display:none;}
  .gv-thumb{width:56px;}
  /* fit the main image on screen: cap height, don't let 4:5 dominate */
  .gv-main{aspect-ratio:auto;height:56vh;max-height:none;}
}

/* Preview: selectable section outline */
[data-section-id]{position:relative;}
.sec-selected{outline:2px solid var(--gold);outline-offset:-2px;}
[data-section-id]:hover{outline:1px dashed rgba(154,135,99,.6);outline-offset:-1px;}


/* ---------- Shop Instagram (shop-instagram.html) ---------- */
.igshop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 20px;}
.igshop-tile{display:block;position:relative;}
.igshop-media{display:block;position:relative;overflow:hidden;background:var(--stone);aspect-ratio:1/1;}
.igshop-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
/* Hover veil only where hover exists — on touch it would eat the first tap */
.igshop-view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(27,25,23,.32);color:var(--ivory);font-family:var(--sans);font-size:.7rem;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .4s var(--ease);}
@media(hover:hover){
  .igshop-tile:hover .igshop-media img{transform:scale(1.04);}
  .igshop-tile:hover .igshop-view{opacity:1;}
}
.igshop-price{position:absolute;left:12px;bottom:12px;padding:7px 14px;
  background:rgba(245,241,235,.94);color:var(--near-black);border:1px solid var(--border);
  font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.08em;}
/* Loading shimmer while the feed is fetched */
.igshop-skel{aspect-ratio:1/1;background:linear-gradient(100deg,var(--stone) 40%,rgba(249,247,243,.6) 50%,var(--stone) 60%);
  background-size:200% 100%;animation:igshimmer 1.5s linear infinite;}
@keyframes igshimmer{to{background-position:-200% 0;}}
html[data-anim="off"] .igshop-skel{animation:none;}
@media(prefers-reduced-motion:reduce){.igshop-skel{animation:none;}}
/* Follow-us panel (shows until Instagram is connected) — charcoal for rhythm */
.igshop-fallback{max-width:680px;margin:8px auto 12px;text-align:center;background:var(--charcoal);
  color:var(--ivory);padding:clamp(48px,7vw,72px) clamp(24px,5vw,64px);}
.igshop-glyph{width:28px;height:28px;color:var(--ivory);opacity:.6;}
.igshop-eyebrow{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-text);margin:20px 0 12px;}
.igshop-fallback h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.25;margin:0 0 14px;}
.igshop-fallback p{font-size:.92rem;line-height:1.8;opacity:.78;margin:0 auto 30px;max-width:46ch;}
.igshop-more{text-align:center;margin-top:44px;}
@media (max-width:720px){
  .igshop-grid{grid-template-columns:repeat(2,1fr);gap:18px 10px;}
  .igshop-price{left:8px;bottom:8px;padding:5px 10px;font-size:.66rem;letter-spacing:.06em;}
  .igshop-more{margin-top:32px;}
}

/* ============================================================
   MOTION PACK (owner-approved, 2026-07-05) — quiet-luxury motion.
   Every duration scales with --anim (theme intensity presets) and
   everything dies under prefers-reduced-motion / data-anim="off".
   ============================================================ */

/* 01 · Blur-up photo loading — JS (initBlurUp in site.js) puts .bu on images
   still loading and .bu-in once loaded; both classes are removed after the
   photo settles so no other transition is ever overridden long-term. */
img.bu{opacity:0;filter:blur(12px);}
img.bu-in{opacity:1;filter:blur(0);
  transition:opacity calc(.55s * var(--anim,1)) var(--ease),
             filter calc(.85s * var(--anim,1)) var(--ease),
             transform 1.4s var(--ease);}

/* 05 · Staggered reveals — cards deal in one after another. The grid container
   stays put (no block fade) so the stagger reads clearly. */
.product-grid.reveal,.journal-grid.reveal,.carousel-wrap.reveal{opacity:1;transform:none;}
.product-grid.reveal>.product-card,.journal-grid.reveal>.article,.carousel-wrap.reveal .carousel>*{
  opacity:0;transform:translateY(calc(12px * var(--anim,1)));
  transition:opacity calc(.7s * var(--anim,1)) var(--ease),transform calc(.7s * var(--anim,1)) var(--ease);}
.product-grid.reveal.in>.product-card,.journal-grid.reveal.in>.article,.carousel-wrap.reveal.in .carousel>*{
  opacity:1;transform:none;}
.product-grid.reveal.in>*:nth-child(2),.journal-grid.reveal.in>*:nth-child(2),.carousel-wrap.reveal.in .carousel>*:nth-child(2){transition-delay:.07s;}
.product-grid.reveal.in>*:nth-child(3),.journal-grid.reveal.in>*:nth-child(3),.carousel-wrap.reveal.in .carousel>*:nth-child(3){transition-delay:.14s;}
.product-grid.reveal.in>*:nth-child(4),.journal-grid.reveal.in>*:nth-child(4),.carousel-wrap.reveal.in .carousel>*:nth-child(4){transition-delay:.21s;}
.product-grid.reveal.in>*:nth-child(5),.journal-grid.reveal.in>*:nth-child(5),.carousel-wrap.reveal.in .carousel>*:nth-child(5){transition-delay:.28s;}
.product-grid.reveal.in>*:nth-child(6),.journal-grid.reveal.in>*:nth-child(6),.carousel-wrap.reveal.in .carousel>*:nth-child(6){transition-delay:.35s;}
.product-grid.reveal.in>*:nth-child(7),.journal-grid.reveal.in>*:nth-child(7),.carousel-wrap.reveal.in .carousel>*:nth-child(7){transition-delay:.42s;}
.product-grid.reveal.in>*:nth-child(n+8),.journal-grid.reveal.in>*:nth-child(n+8),.carousel-wrap.reveal.in .carousel>*:nth-child(n+8){transition-delay:.48s;}

/* (06 · gold hairline draw-in was here — removed 2026-07-05 at the owner's
   request after seeing it live; don't re-add without asking.) */

/* 04 · Lightbox photo crossfade (the main gallery already glides via scroll-snap). */
#lb-img{transition:opacity .3s var(--ease);}

/* Guards: with animation off or reduced motion, everything is simply visible. */
html[data-anim="off"] .product-grid.reveal>.product-card,
html[data-anim="off"] .journal-grid.reveal>.article,
html[data-anim="off"] .carousel-wrap.reveal .carousel>*{opacity:1;transform:none;transition:none;}
@media (prefers-reduced-motion:reduce){
  .product-grid.reveal>.product-card,.journal-grid.reveal>.article,.carousel-wrap.reveal .carousel>*{opacity:1;transform:none;}
  img.bu{opacity:1;filter:none;}
}

/* ---------- Compact newsletter band + Instagram strip (2026-07-05) ---------- */
/* Owner: "The Private List is too tall" — a compact band, smaller serif. It is a
   .dark band, so --band-y would apply; this keeps it deliberately tighter, and
   as ONE value rather than the old .5× multiplier (which drifted whenever the
   base rhythm changed — 2026-07-24). */
.section--news.section.dark{padding-block:var(--section-y, clamp(36px, 4.2vw, 60px));}
.news .h-section{font-size:clamp(1.55rem,2.6vw,2.2rem);}
.news form{margin-top:24px;}

/* Instagram strip — Shopify-style small square tiles (reuses .igshop-* looks) */
.section--igs{padding-block:var(--section-y, clamp(36px, 4.2vw, 60px));}
.igs-head{text-align:center;margin-bottom:26px;}
.igs-sub{color:var(--warm-grey);margin-top:8px;font-size:.92rem;}
.igs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.igs-follow{text-align:center;margin-top:26px;}
@media (max-width:760px){
  .igs-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
}

/* ============================================================
   CUSTOMER ACCOUNT PORTAL (/account + /account-order)
   ============================================================ */
.acct-tabs{display:flex;gap:2px;border:1px solid var(--border);margin-bottom:22px;}
.acct-tab{flex:1;background:none;border:0;padding:12px 8px;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--warm-grey);cursor:pointer;}
.acct-tab.active{background:var(--near-black);color:var(--ivory);}
.acct-err{color:#9d2f2f;font-size:.85rem;min-height:1.2em;margin:0 0 6px;}
.acct-okmsg{color:#3c6e47;font-size:.85rem;min-height:1.2em;margin:0 0 6px;}
.acct-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:30px;}
.acct-signout{background:none;border:1px solid var(--border);padding:8px 16px;font-family:var(--sans);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-grey);cursor:pointer;position:relative;}
.acct-signout::after{content:"";position:absolute;inset:-6px;}
.acct-signout:hover{border-color:var(--near-black);color:var(--near-black);}
.acct-grid{display:grid;gap:40px;}
.acct-addr-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* inputs must be able to shrink inside the 2-col row on phones (min-width:auto would force ~380px) */
.acct-addr-row .field{min-width:0;}
#f-profile .field input{width:100%;min-width:0;}
.acct-suggest-wrap{position:relative;}
.acct-suggest{position:absolute;left:0;right:0;top:100%;z-index:40;margin:0;padding:0;list-style:none;background:#fff;border:1px solid var(--border);box-shadow:0 8px 24px rgba(27,25,23,.12);max-height:230px;overflow-y:auto;}
.acct-suggest li{padding:11px 13px;font-size:.85rem;cursor:pointer;border-bottom:1px solid var(--border);}
.acct-suggest li:last-child{border-bottom:0;}
.acct-suggest li:hover{background:var(--parchment);}
#f-profile textarea{width:100%;font-family:var(--sans);font-size:var(--text-sm);color:var(--text);background:var(--bg-3);border:var(--border-w) solid var(--border);padding:11px 12px;resize:vertical;}
@media (min-width:900px){ .acct-grid{grid-template-columns:1.3fr 1fr;gap:60px;} }
.acct-order{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--border);color:var(--near-black);}
.acct-order:first-child{border-top:1px solid var(--border);}
.acct-order:hover{background:var(--parchment);}
.ao-ref{flex:1 1 40%;font-weight:500;font-size:.92rem;display:flex;flex-direction:column;}
.ao-ref small{color:var(--warm-grey);font-weight:400;margin-top:2px;}
.ao-stat{flex:1 1 34%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
/* Condition dots (Style B, owner picked 2026-07-23) — the Specifications row
   and the Condition panel show the grade filled up to its level. Grades live
   in Data Settings → Conditions (Dot grade column). */
.cond-dots{display:inline-flex;align-items:center;gap:5px;margin-left:12px;vertical-align:middle;}
.cond-dots i{width:6px;height:6px;border-radius:50%;background:#D9D2C6;}
.cond-dots i.on{background:var(--espresso,#382E28);}

/* Order status pills — shared by the account order list + the order page's
   status table. Quiet-luxury chips: hairline pill + a small state dot;
   Cancelled = soft red tint; Delivered = filled ink with a gold dot. */
.ord-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);
  background:var(--parchment);border-radius:999px;padding:4px 11px 4px 9px;
  font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--near-black);white-space:nowrap;line-height:1.4;}
.ord-chip::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--warm-grey);}
.ord-chip.is-ok::before{background:#3c6e47;}
.ord-chip.is-wait::before{background:#B08A3C;}
.ord-chip.is-gold::before{background:#7E6B49;}
.ord-chip.is-bad{color:#9d2f2f;border-color:#E4C9C4;background:#FAF3F1;}
.ord-chip.is-bad::before{background:#9d2f2f;}
.ord-chip.is-done{background:var(--near-black);border-color:var(--near-black);color:#F5F1EB;}
.ord-chip.is-done::before{background:#C9B27E;}
.ao-amt{font-size:.92rem;white-space:nowrap;}
.ao-go{color:var(--warm-grey);}
.acct-note{background:var(--parchment);border-left:2px solid var(--gold);padding:16px 18px;
  font-size:.92rem;line-height:1.65;margin-bottom:34px;white-space:pre-line;}
.acct-terms{border:1px solid var(--border);background:var(--parchment);padding:18px 20px;
  font-size:.88rem;line-height:1.7;max-height:280px;overflow-y:auto;white-space:pre-line;}
.acct-check{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;cursor:pointer;}
.acct-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--near-black);}
.acct-pay{border:1px solid var(--gold);background:var(--parchment);padding:18px 20px;
  font-size:.95rem;line-height:1.8;white-space:pre-line;}
@media (max-width:560px){
  .acct-order{flex-wrap:wrap;}
  .ao-ref{flex-basis:60%;}
  .ao-amt{margin-left:auto;}
  .ao-stat{flex-basis:100%;order:3;}
  .ao-go{display:none;}
}

/* ---------- Pull-to-refresh ring (native APP only — injected by site.js) ---------- */
.shl-ptr{ position:fixed; top:calc(env(safe-area-inset-top,0px) + 58px); left:50%; transform:translateX(-50%); z-index:210;
  width:34px; height:34px; border-radius:50%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; }
.shl-ptr-ring{ width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--near-black); border-radius:50%; }
.shl-ptr.spin{ opacity:1; }
.shl-ptr.spin .shl-ptr-ring{ animation:shlptrspin .7s linear infinite; }
@keyframes shlptrspin{ to{ transform:rotate(360deg); } }

/* ---------- First Look chip (app early access — cards inside the 24h window) ---------- */
.fl-flag{position:absolute;top:14px;left:14px;z-index:2;background:var(--gold,#B49B57);color:var(--ivory);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;}

/* ---------- App tab bar (frosted five-tab variant, native app only) ---------- */
@media(max-width:768px){
  .tabbar--app{background:rgba(249,247,243,.86);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-top:.5px solid var(--border);}
  .tabbar--app .tabbar-item{font-size:.56rem;letter-spacing:.08em;}
}

/* ---------- First-launch welcome (native app only, shown once) ---------- */
.appwelcome{position:fixed;inset:0;z-index:400;background:var(--espresso,#382E28);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + 40px) 30px calc(env(safe-area-inset-bottom,0px) + 34px);
  opacity:1;transition:opacity .45s ease;}
.appwelcome.aw-out{opacity:0;pointer-events:none;}
.aw-inner{max-width:340px;width:100%;}
.aw-mark{width:64px;height:auto;display:block;margin:0 auto 26px;}
.aw-title{font-family:var(--serif);font-weight:500;font-size:1.45rem;color:var(--ivory);margin:0 0 12px;}
.aw-text{font-size:.85rem;line-height:1.65;color:#C9BFAE;margin:0 0 26px;min-height:4.2em;}
.aw-dots{margin:0 0 24px;}
.aw-dot{display:inline-block;width:6px;height:6px;border-radius:3px;background:#6B5F52;margin:0 4px;
  transition:background .3s ease;}
.aw-dot.on{background:var(--gold,#B49B57);}
.appwelcome button{display:block;width:100%;cursor:pointer;font-family:var(--sans);}
/* display:block above would override the hidden attribute (UA display:none
   loses to author styles) — without this, the push button showed on EVERY
   slide instead of only the last one. */
.appwelcome [hidden]{display:none !important;}
.aw-next{background:var(--ivory);color:var(--espresso,#382E28);border:0;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:14px 0;}
.aw-push{background:transparent;color:var(--ivory);border:1px solid var(--gold,#B49B57);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:13px 0;margin-top:12px;}
.aw-skip{background:transparent;border:0;color:#8B7F6E;font-size:.72rem;letter-spacing:.08em;
  padding:12px 0 0;margin-top:8px;}
@media(prefers-reduced-motion:reduce){ .appwelcome{transition:none;} }

/* ---------- App-CHROME iOS patterns — shared by the native app (.shl-native)
   AND an installed PWA (.shl-standalone), so both feel the same ---------- */
/* Filter drawer becomes an iOS bottom sheet with a grabber handle */
.shl-native .filter-drawer, .shl-standalone .filter-drawer{ top:auto; left:0; right:0; bottom:0; width:100%;
  max-height:min(78vh,640px); transform:translateY(100%);
  border-left:0; border-top:.5px solid var(--border); border-radius:16px 16px 0 0;
  padding-bottom:env(safe-area-inset-bottom,0px); }
.shl-native .filter-drawer::before, .shl-standalone .filter-drawer::before{ content:""; flex:0 0 auto; width:36px; height:4px;
  border-radius:2px; background:var(--border); align-self:center; margin:10px 0 2px; }
.shl-native .filter-drawer.open, .shl-standalone .filter-drawer.open{ transform:none; }
/* Buy Now ship-to chooser: centered modal on the web, bottom sheet installed
   (its styles are inline, hence the !important overrides). */
.shl-native #ship-sheet [role="dialog"], .shl-standalone #ship-sheet [role="dialog"]{ top:auto !important; bottom:0 !important; left:0 !important;
  transform:none !important; width:100% !important; max-width:none !important;
  border:0 !important; border-top:.5px solid rgba(0,0,0,.08) !important;
  border-radius:16px 16px 0 0;
  padding-bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important; }
.shl-native #ship-sheet [role="dialog"]::before, .shl-standalone #ship-sheet [role="dialog"]::before{ content:""; display:block; width:36px; height:4px;
  border-radius:2px; background:rgba(0,0,0,.15); margin:-12px auto 14px; }
/* Large-title pages: bigger serif title that shrinks/fades a touch on scroll
   (scroll-linked vars set by initAppLargeTitle; no transition on purpose). */
/* Toned down from clamp(2.7rem,9vw,4.2rem) — 43px was nearly double the mobile-
   web title, so the app/PWA looked inconsistent (owner, 2026-07-24: "the font
   above menu are so big"). ~28px on phones: a clear heading, not a billboard. */
.shl-native .page-head .display, .shl-standalone .page-head .display{ font-size:clamp(1.75rem,7vw,2.2rem); }
.shl-lgtitle .page-head .display{ transform:scale(var(--lt,1)); opacity:var(--lo,1);
  transform-origin:center top; will-change:transform,opacity; }
/* (Page transitions are deliberately web-only — see the wantVT note in
   site.js: in the app a view transition freezes the old page with no
   progress indicator, so taps feel dead on slow connections.) */

/* ---------- Customer-portal biometric sign-in (native app only) ---------- */
.acct-bio{ margin-bottom:16px; }
.acct-bio-btn{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  background:var(--near-black); color:var(--ivory); border:1px solid var(--near-black);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:13px 18px; cursor:pointer; }
.acct-bio-btn[disabled]{ opacity:.5; cursor:default; }
.acct-bio-or{ display:flex; align-items:center; gap:12px; margin-top:14px; color:var(--warm-grey); }
.acct-bio-or::before,.acct-bio-or::after{ content:""; flex:1; border-top:1px solid var(--border); }
.acct-bio-or span{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- Customer-portal Face ID setting + account deletion ---------- */
.acct-bio-set{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.acct-bio-off,.acct-bio-cancel{ background:transparent; border:1px solid var(--border);
  color:var(--near-black); font-family:var(--sans); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; padding:10px 16px; cursor:pointer; }
.acct-bio-cancel{ border:0; color:var(--warm-grey); text-decoration:underline; }
.acct-danger{ margin-top:34px; padding-top:22px; border-top:1px solid var(--border); }
.acct-del-btn{ background:transparent; border:1px solid #7a2e2e; color:#7a2e2e;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:11px 18px; cursor:pointer; transition:background .2s ease,color .2s ease; }
.acct-del-btn:hover{ background:#7a2e2e; color:var(--ivory); }
.acct-del-btn[disabled]{ opacity:.5; cursor:default; }

/* ---------- Order page v2: timeline · piece cards · address · tracking ---------- */
.ord-tl{ display:flex; align-items:center; margin:6px 2px 6px; }
.ord-tl-dot{ width:16px; height:16px; border-radius:8px; flex:0 0 auto; display:flex;
  align-items:center; justify-content:center; font-size:9px; color:var(--ivory);
  background:#DDD5C7; }
.ord-tl-dot.done{ background:var(--near-black); }
.ord-tl-dot.now{ background:var(--gold,#B49B57); }
.ord-tl-bar{ flex:1; height:2px; background:#DDD5C7; }
.ord-tl-bar.on{ background:var(--near-black); }
.ord-tl-labels{ display:flex; justify-content:space-between; font-size:.66rem;
  letter-spacing:.04em; color:var(--warm-grey); margin:0 0 26px; }
.ord-tl-labels .on{ color:#7E6B49; font-weight:600; }
.ord-tl-labels .done{ color:var(--near-black); }
.ord-cancelled{ background:var(--bg-3,#F9F7F3); border:1px solid var(--border);
  padding:14px 16px; font-size:.85rem; color:var(--warm-grey); margin:0 0 26px; }
.ord-cancelled a{ text-decoration:underline; color:inherit; }
.ord-item{ display:flex; gap:14px; background:#fff; border:1px solid var(--border);
  border-radius:10px; padding:12px; margin-bottom:10px; color:inherit; text-decoration:none; }
.ord-item-media{ width:64px; height:80px; flex:0 0 auto; background:var(--stone,#E7E0D2);
  border-radius:3px; overflow:hidden; display:block; }
.ord-item-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ord-item-noimg{ display:block; width:100%; height:100%; }
.ord-item-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ord-item-name{ font-family:var(--serif); font-size:1.02rem; color:var(--near-black); }
.ord-item-sub{ font-size:.74rem; color:var(--warm-grey); }
.ord-item-price{ font-size:.85rem; color:var(--near-black); margin-top:auto; }
.ord-addr{ background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; margin-bottom:12px; }
.ord-addr-eyebrow{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--warm-grey); margin:0 0 6px; }
.ord-addr p:last-child{ margin:0; font-size:.85rem; line-height:1.6; color:var(--near-black); }
.ord-track{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--espresso,#382E28); border-radius:10px; padding:12px 14px; }
.ord-track-info{ font-size:.82rem; color:var(--ivory); min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ord-track-go{ flex:0 0 auto; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold,#B49B57); text-decoration:none; border:1px solid var(--gold,#B49B57);
  padding:6px 14px; }
.ord-help{ text-align:center; font-size:.8rem; color:var(--warm-grey); margin-top:26px; }
.ord-help a{ color:var(--near-black); text-decoration:underline; }

/* ---------- Account v2: grouped rows, sub-screens ---------- */
.acct-view{ max-width:560px; }
.acct-group{ background:#fff; border:1px solid var(--border); border-radius:12px;
  overflow:hidden; margin-bottom:14px; }
.acct-row{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  width:100%; min-height:50px; padding:13px 16px; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.85rem; color:var(--near-black); text-align:left;
  text-decoration:none; border-bottom:1px solid var(--border); }
.acct-group .acct-row:last-child{ border-bottom:0; }
.acct-row:hover{ background:var(--bg-3,#F9F7F3); }
.acct-row-l{ min-width:0; }
.acct-row-r{ display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--warm-grey); flex:0 0 auto; }
.acct-row-r.is-on{ color:#1D6B4F; }
.acct-chev{ color:#C9C1B2; font-size:1rem; line-height:1; }
.acct-row--cur select{ border:0; background:none; font:inherit; font-size:.8rem;
  color:var(--warm-grey); text-align:right; cursor:pointer; padding:6px 0; }
.acct-back{ display:inline-block; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.06em; color:var(--warm-grey);
  padding:4px 0; margin-bottom:14px; }
.acct-back:hover{ color:var(--near-black); }
#row-notif-v.is-on,#row-bio-v.is-on{ color:#1D6B4F; }

/* ---------- Portal loading skeletons (account + order pages) ---------- */
.acct-skel{ max-width:560px; display:flex; flex-direction:column; gap:14px; }
.sk{ display:block; border-radius:10px; background:linear-gradient(100deg,#EDE7DA 40%,#F5F1EB 50%,#EDE7DA 60%);
  background-size:200% 100%; animation:skshine 1.3s ease-in-out infinite; }
.sk-line{ height:14px; border-radius:5px; }
.sk-card{ height:52px; }
@keyframes skshine{ to{ background-position:-100% 0; } }
@media(prefers-reduced-motion:reduce){ .sk{ animation:none; } }

/* ---------- Recently viewed rail (native app home only) ---------- */
.rv-rail-sec{ padding:26px 0 10px; }
.rv-title{ font-family:var(--serif); font-weight:500; font-size:1.25rem; color:var(--near-black);
  margin:0 0 12px; }
.rv-rail{ display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:0 var(--pad,20px) 10px; scrollbar-width:none; }
.rv-rail::-webkit-scrollbar{ display:none; }
.rv-rail .product-card{ flex:0 0 150px; }
.rv-rail .pc-name{ font-size:.9rem; }

/* ---------- Sign-in screen polish (customer portal) ---------- */
#acct-auth{ background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:28px 22px 22px; margin-inline:auto; }
.acct-auth-logo{ width:46px; height:auto; display:block; margin:0 auto 10px; }
.acct-auth-welcome{ text-align:center; font-family:var(--serif); font-size:1.2rem;
  color:var(--near-black); margin:0 0 18px; }

/* ---------- Account DASHBOARD (desktop ≥900px): menu left · content right ---------- */
@media(min-width:900px){
  #acct-portal{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:8px 30px; align-items:start; }
  #acct-portal .acct-bar{ grid-column:1/-1; }
  #av-home{ grid-column:1; grid-row:2; }
  #av-orders,#av-profile,#av-faceid{ grid-column:2; grid-row:2; max-width:640px; }
  .acct-back{ display:none; }               /* the menu is always in view */
  .acct-row.active{ background:var(--near-black); color:var(--ivory); }
  .acct-row.active:hover{ background:var(--near-black); }
  .acct-row.active .acct-row-r,.acct-row.active .acct-chev{ color:#C9BFAE; }
}

/* ---------- Dashboard panels v2: wishlist + in-page order detail ---------- */
@media(min-width:900px){
  #av-wishlist,#av-order{ grid-column:2; grid-row:2; }
  #av-wishlist{ max-width:760px; }
  #av-order{ max-width:860px; }
  #av-wishlist .product-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 16px; }
}
#av-order .acct-grid{ margin-top:4px; }

/* ---------- Compact account header (owner: "header too big, not tidy") ----------
   Applies to /account and /account-order on every surface (web · app · PWA):
   smaller serif title, tighter spacing — content starts near the top. */
body[data-acct-page] .page-head{ padding-block:10px 6px; }
body[data-acct-page] .page-head .display{ font-size:clamp(1.45rem,2.6vw,1.9rem); }
body[data-acct-page] .page-head .eyebrow{ margin-bottom:6px; }
body[data-acct-page] .page-head p:not(.eyebrow){ margin-top:6px; font-size:.85rem; }
body[data-acct-page] .acct-bar{ margin-top:4px; }

/* ── Account order panel: inline direct-payment section (full width, two
      columns on desktop — details left, upload right; phones stacked) ── */
.ordpay-cols{display:grid;gap:16px;}
@media (min-width:900px){ .ordpay-cols{grid-template-columns:1fr 1fr;align-items:stretch;} }

/* ---------- Arrival alerts (account panel) ---------- */
.al-box{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 12px; max-width:520px; }
.al-tokens{ display:flex; flex-wrap:wrap; gap:6px; }
.al-tokens:not(:empty){ margin-bottom:7px; }
.al-tok{ display:inline-flex; align-items:center; gap:5px; background:var(--stone,#EFE9DC); color:var(--near-black);
  font-size:.78rem; padding:4px 9px; border-radius:999px; }
.al-tok button{ background:none; border:0; color:var(--warm-grey); cursor:pointer; font-size:.95rem; line-height:1; padding:0; }
.al-box input{ width:100%; border:0; outline:none; background:transparent; font-family:var(--sans);
  font-size:.9rem; color:var(--near-black); padding:3px 0; min-height:24px; }
.al-sugs{ max-width:520px; margin-top:6px; }
.al-sug{ display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left;
  background:#fff; border:1px solid var(--border); border-radius:8px; padding:9px 12px; margin-bottom:5px;
  font-family:var(--sans); font-size:.85rem; color:var(--near-black); cursor:pointer; }
.al-sug:hover{ border-color:var(--near-black); }
.al-sug small{ font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--warm-grey); }
.al-match{ font-size:.78rem; color:#7E6B49; margin:8px 0 0; min-height:1.2em; max-width:520px; }
.al-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:520px;
  background:#fff; border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:6px;
  font-size:.88rem; color:var(--near-black); }
.al-off{ background:none; border:0; color:var(--warm-grey); font-family:var(--sans); font-size:.75rem;
  text-decoration:underline; cursor:pointer; flex:0 0 auto; }
.al-off:hover{ color:var(--near-black); }
/* Arrival alerts — breathing room + the CREATE ALERT / YOUR ALERTS line fix
   (owner 2026-07-24: "the field are too close to each other"). .eyebrow is
   display:inline-flex site-wide, so the heading was flowing beside the
   button; here it must be its own block. */
.al-box{ padding:14px 14px; }
.al-box input{ font-size:1rem; padding:6px 0; min-height:30px; }
.al-sugs{ margin-top:10px; }
.al-match{ margin:10px 0 0; }
.al-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:18px; }
.al-err{ display:block; margin:0; }
.al-head{ display:flex; margin:38px 0 12px; }
.al-row{ padding:13px 14px; margin-bottom:8px; }
@media(min-width:900px){ #av-alerts{ grid-column:2; grid-row:2; } }

/* ============================================================
   iOS ZOOM GUARD — owner bug, 2026-07-24 (app: "when i type on text
   box it become zoom in… then i can't zoom out and the screen moves
   around"). iOS Safari / WKWebView FORCE-ZOOMS into any focused field
   whose font-size is under 16px, and inside the app shell the page then
   stays zoomed and pans. Our fields are deliberately smaller for the
   editorial look, so on touch-sized screens every text-entry control is
   lifted to exactly 16px. Desktop keeps its designed scale, and we never
   use maximum-scale/user-scalable=no (that would break pinch-zoom for
   people who need it). Applies to every storefront + portal page, which
   all share this stylesheet.
   ============================================================ */
@media (max-width:860px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea,
  select { font-size: 16px !important; }
}