/* ==========================================================================
   Legacy storefront base — extended by the Homex system below
   Design language derived from horological instrumentation:
   heat-blued steel hands, Didone dial lettering, chapter-ring indices.

   Ported from design-reference/styles.css. Everything above the
   "PORT ADDITIONS" band is the approved prototype, unchanged.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Ink family — cool graphite, never pure black */
  --graphite:#16191D;
  --slate:#3D444C;
  --mist:#8A9199;
  /* --mist fails AA as body text on light surfaces (2.69:1). This is the
     same hue family taken down to 4.75:1 on --dial, used for text only. */
  --mist-text:#616870;
  --whisper:#C3C8CC;

  /* Surfaces — cool dial white, deliberately NOT warm cream */
  --dial:#E9ECEE;
  --dial-pure:#FFFFFF;
  --rule:#D3D8DC;
  --rule-dark:#2A2F35;

  /* Accent — heat-blued steel, the colour a watchmaker gets at 290°C */
  --blued:#2F4E8F;
  --blued-lift:#4468AE;

  /* Reserved for the Haute Horlogerie tier only */
  --brass:#9A7B43;

  /* State */
  --stock:#3F6B54;
  --alert:#8C4A3F;
  /* --alert is 2.69:1 on graphite. The footer is the only place an error is
     spoken on a dark surface, so it needs a tone that clears AA there. */
  --alert-lift:#E39685;

  /* Type */
  --display:"Bodoni Moda",'Didot','Times New Roman',serif;
  --body:"Archivo",system-ui,-apple-system,sans-serif;
  --data:"Azeret Mono",ui-monospace,'SF Mono',monospace;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --fast:220ms;
  --mid:460ms;
  --slow:720ms;

  --radius:2px;
  --rail:56px;
  --maxw:1440px;
  --pad:48px;

  /* Minimum interactive target (WCAG 2.5.5) */
  --tap:44px;
}

/* ==========================================================================
   HOMEX — warm editorial furniture system
   The information rhythm is inspired by premium furniture retail, while all
   identity, artwork, copy, spacing, and components are original to Homex.
   ========================================================================== */

:root{
  --graphite:#24211d;
  --slate:#58524c;
  --mist:#8c847c;
  --mist-text:#6e675f;
  --whisper:#d4cec5;
  --dial:#f7f4ee;
  --dial-pure:#fffdf9;
  --rule:#ddd7ce;
  --rule-dark:#3c3631;
  --blued:#bd5b4e;
  --blued-lift:#da7b6b;
  --brass:#b08a52;
  --stock:#55705b;
  --alert:#a34237;
  --display:"Libre Caslon Display",Georgia,serif;
  --body:"DM Sans",system-ui,-apple-system,sans-serif;
  --data:"DM Sans",system-ui,sans-serif;
  --radius:18px;
  --rail:0px;
  --maxw:1540px;
  --pad:clamp(20px,3vw,54px);
}

body{background:var(--dial);font-family:var(--body);color:var(--graphite);}
.page,.homex-page{margin-left:0!important;padding-left:0!important;}
.rail{display:none!important;}
.sdbar{background:#3b312b;color:#f8f4ed;border:0;}
.sdbar__in{max-width:1540px;margin:auto;min-height:30px;padding-inline:var(--pad);}
.sdbar a,.sdbar__made{color:#f8f4ed;}
.theme-picker__trigger{color:#f8f4ed;}

.homex-header{background:rgba(255,253,249,.97);border-bottom:1px solid var(--rule);box-shadow:0 8px 30px rgba(45,36,30,.04);}
.homex-header .topbar{height:34px;background:#3b312b;color:#f8f4ed;letter-spacing:.08em;text-transform:none;font-size:11px;}
.homex-head-main{height:98px;display:grid;grid-template-columns:auto minmax(280px,1fr) auto;gap:clamp(26px,4vw,64px);align-items:center;}
.homex-header.is-stuck .homex-head-main{height:72px;}
.homex-header.is-stuck .topbar{height:0;}
.homex-logo{font-family:var(--body);font-size:clamp(31px,3vw,48px);font-weight:700;letter-spacing:-.065em;text-transform:lowercase;line-height:1;color:#171512;justify-content:flex-start;}
.homex-logo span{color:#e86872;margin-left:2px;}
.homex-header .header-search{position:relative;display:flex;width:100%;height:52px;border:1px solid #ddd8d1;border-radius:999px;background:#f5f3ef;align-items:center;justify-content:space-between;padding:0 0 0 24px;color:#918b84;font-size:15px;overflow:hidden;}
.homex-header .header-search svg{width:58px;height:52px;padding:15px 17px;border-left:1px solid #e2ded8;background:#ebe8e2;stroke:#2d2925;fill:none;stroke-width:1.7;flex:0 0 auto;}
.homex-header .hdr__tools{display:flex;align-items:center;justify-content:flex-end;}
.homex-header .hdr__act{display:flex;gap:22px;align-items:center;}
.homex-header .iconbtn{width:auto;min-width:44px;min-height:44px;display:flex;gap:9px;align-items:center;justify-content:center;color:#24211d;}
.homex-header .iconbtn svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;}
.homex-action-label{font-size:13px;font-weight:500;}
.homex-navrow{position:relative;border-top:1px solid #eee9e2;background:#fffdf9;}
.homex-navrow>.wrap{position:relative;display:flex;justify-content:center;}
.homex-navrow .nav{height:58px;gap:clamp(22px,3vw,46px);justify-content:center;}
.homex-navrow .nav a{font-size:14px;letter-spacing:0;text-transform:none;color:#292520;}
.homex-navrow .nav a::after{bottom:7px;background:var(--blued);}
.homex-navrow .mega{position:absolute;left:var(--pad);right:var(--pad);top:58px;z-index:20;display:none;background:#f7f3ed;border:1px solid var(--rule);box-shadow:0 28px 60px rgba(40,32,26,.14);padding:30px;}
.homex-navrow>.wrap:hover .mega,.homex-navrow>.wrap:focus-within .mega{display:block;}
.homex-navrow .mega__grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr)) minmax(190px,1.25fr);gap:24px;max-height:none;overflow:visible;}
.mega__group h3{font-family:var(--display);font-size:21px;font-weight:400;margin:0 0 10px;}
.mega__group a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;color:#4e4841;font-size:13px;}
.mega__group a:hover{color:var(--blued);}
.mega__group small{font-size:10px;color:#9a9289;}
.mega__feature{display:grid;grid-template-rows:150px auto;gap:10px;font-family:var(--display);font-size:20px;}
.mega__feature img{width:100%;height:150px;object-fit:cover;border-radius:12px;}

.campaign-hero{min-height:clamp(580px,72vh,760px);background:#d8c9b6;}
.campaign-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,20,16,.18),transparent 58%);pointer-events:none;}
.campaign-hero__image{object-fit:cover;object-position:center;width:100%;height:100%;}
.campaign-hero__inner{min-height:inherit;display:flex;align-items:center;position:relative;z-index:2;}
.campaign-hero__copy{width:min(520px,46vw);padding:clamp(30px,4vw,56px);background:rgba(250,247,241,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.55);border-radius:2px;color:#251f1a;}
.campaign-hero__copy .eyebrow{color:#7d594f;margin-bottom:16px;}
.campaign-hero__copy h1{font-family:var(--display);font-size:clamp(46px,5.8vw,84px);letter-spacing:-.035em;line-height:.98;}
.campaign-hero__copy p{color:#51473f;}
.campaign-hero__copy .btn--primary{background:#27231f;color:#fff;border-color:#27231f;}
.campaign-hero__copy .btn--light{background:transparent;border-color:#403a34;color:#2a2520;}
.campaign-hero__dots button{border-color:#fff;background:rgba(255,255,255,.45);}
.campaign-hero__dots button[aria-current="true"]{background:#fff;}

.benefit-bar{background:#ede9e2;border-color:#d8d1c7;}
.benefit-bar__grid>div{border-color:#d8d1c7;}
.benefit-bar b{font-family:var(--display);font-size:17px;font-weight:400;}
.benefit-bar span{color:#766f67;}
.section-heading h2,.newsletter-band h2,.home-reviews h2{font-family:var(--display);font-size:clamp(34px,4vw,57px);letter-spacing:-.025em;line-height:1.05;}
.eyebrow{letter-spacing:.14em;}
.eyebrow--blued{color:#9e4c41;}
.text-link{font-weight:600;border-bottom:1px solid currentColor;}

.category-section{background:#fbf9f5;}
.homex-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.homex-cat{height:390px;display:grid!important;grid-template-rows:69% 31%;background:#eeebe5;border:1px solid #e2ddd5;border-radius:16px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.homex-cat:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(43,34,28,.09);}
.homex-cat__art{height:100%!important;display:flex;align-items:center;justify-content:center;background:transparent!important;padding:14px;}
.homex-cat__art img{width:70%!important;height:70%!important;max-width:70%!important;max-height:70%!important;object-fit:contain!important;mix-blend-mode:multiply;}
.homex-cat__copy{padding:20px 24px!important;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:#fffdf9;}
.homex-cat__copy b{font-family:var(--display);font-size:clamp(22px,2vw,30px);font-weight:400;}
.homex-cat__copy small{color:#7b746c;white-space:nowrap;}

.promo-section{background:#f3efe8;}
.promo-grid{gap:16px;}
.promo-card{border-radius:16px;overflow:hidden;min-height:360px;}
.promo-card--wide{min-height:540px;}
.promo-card::after{background:linear-gradient(0deg,rgba(22,18,15,.62),transparent 66%);}
.promo-card img{object-fit:cover;}
.promo-card span{color:#fff;}
.promo-card small{letter-spacing:.13em;}
.promo-card b{font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,50px);line-height:1;}

.products-section{background:#fffdf9;}
.scroller{grid-auto-columns:minmax(250px,1fr);gap:16px;scrollbar-width:none;}
.pcard{position:relative;padding-bottom:16px;}
.pcard__art{height:auto;aspect-ratio:1/1.05;background:#f0f0f1;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:16px;}
.pcard__art img{width:80%;height:80%;object-fit:contain;transition:transform .35s var(--ease);}
.pcard:hover .pcard__art img{transform:scale(1.035);}
.pcard__badge{position:absolute;z-index:2;top:12px;left:12px;padding:6px 10px;border-radius:999px;background:#91ad9f;color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.pcard__name{font-size:15px;line-height:1.35;}
.pcard .eyebrow{font-size:9px;color:#777068;}
.pcard .price{font-weight:600;}

.guide-section{background:#eee9e1;}
.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.guide-card{border-radius:14px;overflow:hidden;background:#fffdf9;}
.guide-card img{aspect-ratio:16/10;object-fit:cover;}
.guide-card span{padding:22px;}
.guide-card b{font-family:var(--display);font-size:25px;font-weight:400;line-height:1.12;}

.home-reviews{background:#29241f;}
.home-review-card{background:#342e28;border-color:#554b43;border-radius:14px;}
.newsletter-band{background:#d9b15f;color:#231e19;}
.newsletter-band .eyebrow{color:#5f4d28;}
.sub input{border-radius:999px 0 0 999px;background:#fff;}
.sub button{border-radius:0 999px 999px 0;background:#26221e;color:#fff;}

.homex-footer{background:#e6e2dc!important;color:#292520!important;}
.homex-footer .lede,.homex-footer .cap,.homex-footer .ref{color:#655e56!important;}
.homex-footer h4{font-family:var(--display);font-size:22px;font-weight:400;}
.homex-footer a{color:#45403a;}
.homex-footer .ft__bar{border-color:#cbc4bb;color:#6d655d;}
.homex-footer .ft__socials svg{stroke:#292520;}
.homex-footer .ft__policy{display:flex;gap:16px;margin-top:18px;}

.shop-main,.product-main{background:#faf8f4;}
.shop{gap:clamp(28px,4vw,64px);}
.filters{background:#f1ede6;border-radius:14px;padding:22px;}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 16px;}
.listhd .h1{font-family:var(--display);font-size:clamp(40px,5vw,65px);}
.sort,.price-field b{background:#fffdf9;border-radius:999px;}

.product-main{padding-top:42px;}
.pdp{gap:clamp(32px,5vw,76px);align-items:start;}
.pdp__media,.pdp__main,.product-gallery{background:#f1efeb;border-radius:18px;}
.pdp__info h1,.product-info h1{font-family:var(--display);letter-spacing:-.03em;}
.pdp .btn--full,.buybar .btn{background:#d9b15f;color:#241f1a;border-color:#d9b15f;border-radius:999px;}
.acc{border-color:#d9d3cb;}
.reviews-section{background:#2a2520;}
.related-section{background:#f6f2ec;}

.prose h1,.prose h2,.pghead h1,.blog-hero h1{font-family:var(--display);}
.pghead{background:#2a2520;}
.prose{max-width:860px;}

@media (max-width:1180px){
  .homex-action-label{display:none;}
  .homex-head-main{gap:22px;}
  .homex-navrow .mega__grid{grid-template-columns:repeat(3,1fr);}
  .mega__feature{display:none;}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width:760px){
  :root{--pad:16px;}
  .sdbar__made{display:none;}
  .homex-header .topbar{height:30px;font-size:10px;}
  .homex-head-main,.homex-header.is-stuck .homex-head-main{height:auto;min-height:112px;padding-top:10px;padding-bottom:12px;display:grid;grid-template-columns:44px 1fr auto;grid-template-rows:44px 44px;gap:8px 10px;}
  .homex-head-main .burger{display:block;grid-column:1;grid-row:1;}
  .homex-head-main .homex-logo{grid-column:2;grid-row:1;justify-self:start;font-size:34px;}
  .homex-head-main>.header-search{grid-column:1/-1;grid-row:2;height:44px;padding-left:18px;font-size:13px;}
  .homex-head-main>.header-search svg{height:44px;width:50px;padding:12px 14px;}
  .homex-head-main .hdr__tools{grid-column:3;grid-row:1;}
  .homex-head-main .hdr__act{gap:2px;}
  .homex-navrow{display:none;}
  .campaign-hero{min-height:545px;}
  .campaign-hero__image{object-position:center;}
  .campaign-hero__inner{align-items:flex-end;padding-bottom:24px;}
  .campaign-hero__copy{width:100%;padding:25px;background:rgba(250,247,241,.91);}
  .campaign-hero__copy h1{font-size:43px;}
  .campaign-hero__copy p{font-size:14px;}
  .campaign-hero__actions{gap:8px;}
  .campaign-hero__actions .btn{flex:1;padding-inline:12px;}
  .benefit-bar__grid{grid-template-columns:1fr 1fr;}
  .benefit-bar__grid>div{min-height:112px;padding:18px 10px;}
  .homex-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .homex-cat{height:260px;border-radius:12px;}
  .homex-cat__copy{padding:12px!important;display:block;}
  .homex-cat__copy b{font-size:18px;display:block;line-height:1.1;}
  .homex-cat__copy small{font-size:10px;}
  .promo-grid{grid-template-columns:1fr 1fr;}
  .promo-card,.promo-card--wide{min-height:270px;}
  .promo-card--wide{grid-column:1/-1;min-height:380px;}
  .guide-grid{grid-template-columns:1fr;}
  .guide-card b{font-size:24px;}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px;}
  .pcard__art{padding:8px;border-radius:10px;}
  .pcard__art img{width:86%;height:86%;}
  .pcard__name{font-size:13px;}
  .pcard .price{font-size:13px;}
  .ft__cols{grid-template-columns:1fr 1fr;gap:34px 20px;}
  .homex-footer .ft__brand,.homex-footer .ft__col:last-child{grid-column:1/-1;}
  .newsletter-band__inner{gap:24px;}
}

@media (max-width:390px){
  .campaign-hero__copy h1{font-size:39px;}
  .homex-cat{height:242px;}
  .promo-grid{grid-template-columns:1fr;}
  .promo-card,.promo-card--wide{grid-column:1;min-height:320px;}
}

@media (max-width:1023px){ :root{ --pad:24px; --rail:0px; } }
@media (max-width:600px){ :root{ --pad:20px; } }

*,*::before,*::after{box-sizing:border-box;}
/* The UA rule for [hidden] is display:none at the lowest specificity, so any
   class that sets display (.steps, .thumbs, .fbar) silently defeats it. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--dial);color:var(--graphite);
  font-family:var(--body);font-size:16px;line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
/* Every <img> carries width/height attributes to reserve layout space. Those
   attributes are presentational hints for the CSS width/height properties, so
   without height:auto a rule that only sets width:auto leaves the height hint
   in force and the image renders stretched, then gets clipped. Components that
   want an explicit height still win on specificity. */
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,select{font:inherit;color:inherit;}

:focus-visible{outline:2px solid var(--blued);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}

/* ---------- Type scale ---------- */
.display{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.06;}
h1,h2,h3{margin:0;font-weight:400;}
.h-hero{font-family:var(--display);font-size:clamp(42px,7.4vw,92px);line-height:1.02;letter-spacing:-.02em;}
.h1{font-family:var(--display);font-size:clamp(32px,4.4vw,58px);line-height:1.08;}
.h2{font-family:var(--display);font-size:clamp(26px,3.2vw,42px);line-height:1.12;}
.h3{font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.005em;}

.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist-text);margin:0 0 18px;
}
.eyebrow--blued{color:var(--blued);}
.eyebrow--onink{color:var(--whisper);}

.lede{font-size:clamp(15px,1.3vw,18px);color:var(--slate);max-width:46ch;}
.cap{font-size:12.5px;letter-spacing:.03em;color:var(--mist-text);}
.ref{font-family:var(--data);font-size:11.5px;letter-spacing:.06em;color:var(--mist-text);}
.price{font-family:var(--data);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.01em;}
.price s{color:var(--mist-text);font-weight:400;margin-left:10px;text-decoration-thickness:1px;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.section{padding:clamp(64px,9vw,124px) 0;}
.section--tight{padding:clamp(48px,6vw,80px) 0;}
.ink{background:var(--graphite);color:var(--dial);}
.ink .lede{color:var(--whisper);}
.ink .cap,.ink .ref{color:var(--mist);}
.ink .eyebrow{color:var(--mist);}
.ink .price s{color:var(--mist);}
.ink .tier__range,.ink .rail__label,.ink .spectable th{color:var(--mist);}
/* The blued accent is too dark on graphite (2.19:1); the lift tone clears
   the 3:1 large-text threshold, and the footer wordmark is sized for it. */
.ink .logo span{color:var(--blued-lift);}
.ft .logo{font-size:26px;}

/* ---------- Signature: the index rail ----------
   A fixed chapter ring down the left edge that doubles as scroll progress. */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  border-right:1px solid var(--rule);background:var(--dial);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:20px 0;pointer-events:none;
}
.rail__ticks{
  flex:1;width:100%;margin:16px 0;
  background-image:
    repeating-linear-gradient(to bottom,var(--whisper) 0 1px,transparent 1px 60px),
    repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px 12px);
  background-size:14px 100%,8px 100%;
  background-repeat:repeat-y;background-position:center 0,center 0;
  position:relative;
}
.rail__marker{
  position:absolute;left:50%;transform:translateX(-50%);
  width:26px;height:2px;background:var(--blued);top:0;
  transition:top 120ms linear;
}
.rail__label{
  font-family:var(--data);font-size:10px;letter-spacing:.24em;color:var(--mist-text);
  writing-mode:vertical-rl;text-orientation:mixed;
}
@media (max-width:1023px){ .rail{display:none;} }
.page{margin-left:var(--rail);}
/* The rail is a hard vertical edge. --pad alone left content sitting right up
   against it, so add a dedicated gutter wherever the rail is showing. */
@media (min-width:1024px){ .page{padding-left:32px;} }

/* ---------- Header ---------- */
.topbar{
  background:var(--graphite);color:var(--whisper);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  height:38px;display:flex;align-items:center;justify-content:center;
  transition:height var(--mid) var(--ease),opacity var(--fast) var(--ease);
  overflow:hidden;white-space:nowrap;padding:0 12px;
}
/* The full sentence is 67 characters of letter-spaced uppercase; it cannot fit
   on one line under ~700px. A shorter form keeps the bar one line high. */
.topbar__short{display:none;}
@media (max-width:700px){
  .topbar__long{display:none;}
  .topbar__short{display:inline;}
  .topbar{letter-spacing:.14em;}
}
.hdr{
  position:sticky;top:0;z-index:50;background:var(--dial);
  border-bottom:1px solid var(--rule);
}
.hdr__in{
  height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  transition:height var(--mid) var(--ease);
}
.hdr.is-stuck .hdr__in{height:62px;}
.hdr.is-stuck .topbar{height:0;opacity:0;}

.logo{font-family:var(--display);font-size:23px;letter-spacing:.14em;text-transform:uppercase;text-align:center;
  display:flex;align-items:center;justify-content:center;min-height:var(--tap);}
.logo span{color:var(--blued);}

.nav{display:flex;gap:30px;align-items:center;}
.nav a{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);
  position:relative;transition:color var(--fast) var(--ease);
  /* 44px hit area; the underline is pulled back up so it still hugs the text */
  display:inline-flex;align-items:center;min-height:var(--tap);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:var(--blued);transform:scaleX(0);transform-origin:left;
  transition:transform var(--mid) var(--ease);
}
.nav a:hover{color:var(--graphite);}
.nav a:hover::after{transform:scaleX(1);}

.hdr__act{display:flex;gap:22px;justify-content:flex-end;align-items:center;}
.iconbtn{width:var(--tap);height:var(--tap);display:grid;place-items:center;position:relative;}
.iconbtn svg{width:19px;height:19px;stroke:var(--graphite);stroke-width:1.3;fill:none;}
.cartdot{
  position:absolute;top:4px;right:2px;min-width:16px;height:16px;padding:0 4px;
  background:var(--blued);color:#fff;border-radius:9px;
  font-family:var(--data);font-size:9.5px;display:grid;place-items:center;
}

/* Mega menu */
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--dial-pure);
  border-bottom:1px solid var(--rule);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),visibility var(--fast);
}
.hdr__nav:hover .mega,.mega:hover,.mega.is-open,.hdr__nav:focus-within .mega{opacity:1;visibility:visible;transform:none;}
.mega__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:36px var(--pad) 44px;max-width:var(--maxw);margin:0 auto;}
.mega__item{text-align:center;padding:18px 10px;transition:background var(--fast) var(--ease);}
.mega__item:hover{background:var(--dial);}
.mega__item img,.mega__item .ph{height:76px;width:auto;margin:0 auto 16px;object-fit:contain;}
.mega__item b{display:block;font-family:var(--display);font-size:16px;font-weight:400;margin-bottom:5px;}

.burger,.mobonly{display:none;}
@media (max-width:1023px){
  .hdr__in{grid-template-columns:1fr auto 1fr;height:62px;}
  /* .hdr__nav must go too, not just its children: it is a grid item, and
     leaving it in place gives the row four items across three columns, which
     pushes .hdr__act onto an implicit second row. */
  .nav,.mega,.hdr__nav{display:none;}
  .burger{display:grid;place-items:center;width:var(--tap);height:var(--tap);}
  .burger span{display:block;width:20px;height:1px;background:var(--graphite);position:relative;}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--graphite);}
  .burger span::before{top:-6px;}.burger span::after{top:6px;}
  .hdr__act{gap:2px;}
}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:80;background:var(--graphite);color:var(--dial);
  transform:translateX(100%);transition:transform var(--mid) var(--ease);
  display:flex;flex-direction:column;padding:18px 20px 22px;overflow:auto;
}
.drawer.is-open{transform:none;}
/* Scroll containment: locking body alone is not enough when the scrolling
   element is <html>, and a scroll gesture inside an open panel chains to the
   page behind it once the panel hits its own end. */
html.is-locked,html.is-locked body{overflow:hidden;height:100%;}
.drawer,.cart,.filters{overscroll-behavior:contain;}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.drawer nav{display:flex;flex-direction:column;gap:3px;}
.drawer nav a{min-height:58px;padding:6px 0;display:flex;flex-direction:column;justify-content:center;font-family:var(--body);font-size:18px;font-weight:500;line-height:1.15;letter-spacing:-.01em;}
.drawer nav a small{display:block;margin-top:3px;font-family:var(--data);font-size:9.5px;font-weight:500;line-height:1.35;letter-spacing:.02em;color:var(--mist);}
.xbtn{
  font-family:var(--data);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;justify-content:center;
}
/* .xbtn is declared after .mobonly and would otherwise win the cascade, leaving
   the filter drawer's Done button visible on desktop. */
.xbtn.mobonly{display:none;}
@media (max-width:1023px){ .xbtn.mobonly{display:inline-flex;} }

/* Cart drawer */
.cart{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:90;
  background:var(--dial-pure);border-left:1px solid var(--rule);
  transform:translateX(100%);transition:transform var(--mid) var(--ease);
  display:flex;flex-direction:column;
}
.cart.is-open{transform:none;}
.cart__hd{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--rule);}
.cart__body{flex:1;overflow:auto;padding:24px;}
.cart__row{display:grid;grid-template-columns:64px 1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule);}
.cart__row img,.cart__row .ph{width:64px;height:64px;object-fit:contain;background:var(--dial);}
.cart__ft{padding:24px;border-top:1px solid var(--rule);}
.scrim{position:fixed;inset:0;background:rgba(22,25,29,.5);opacity:0;visibility:hidden;transition:opacity var(--mid);z-index:70;}
.scrim.is-on{opacity:1;visibility:visible;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding:0 34px;border-radius:var(--radius);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  background:var(--graphite);color:var(--dial);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.btn:hover{background:var(--blued);}
.btn--full{width:100%;}
.btn--line{background:none;color:var(--graphite);border:1px solid var(--graphite);}
.btn--line:hover{background:var(--graphite);color:var(--dial);}
.ink .btn--line{color:var(--dial);border-color:var(--dial);}
.ink .btn--line:hover{background:var(--dial);color:var(--graphite);}
.btn--text{
  height:auto;padding:0;background:none;color:inherit;
  border-bottom:1px solid var(--blued);padding-bottom:4px;
  min-height:var(--tap);
}
.btn--text:hover{background:none;color:var(--blued);}

/* ---------- Placeholder artwork ----------
   Retained as a defensive fallback only. No product renders one: all 35
   references resolve through the central Selldone image helper. */
.ph{
  background:var(--dial-pure);display:grid;place-items:center;position:relative;
  aspect-ratio:1;
}
.ph::after{
  content:"";width:42%;aspect-ratio:1;border:1px solid var(--whisper);border-radius:50%;
  box-shadow:0 0 0 6px var(--dial-pure),0 0 0 7px var(--rule);
}
.ph::before{
  content:"";position:absolute;width:1px;height:14%;background:var(--whisper);
  top:31%;left:50%;transform-origin:bottom center;
}

/* ---------- Hero ---------- */
.hero{
  background:var(--graphite);color:var(--dial);position:relative;overflow:hidden;
  min-height:min(92vh,860px);display:flex;align-items:center;
}
/* .wrap supplies the horizontal padding; a `padding: 80px 0` shorthand here
   reset it to zero and pushed hero content flush against the rail. */
.hero__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  width:100%;padding-block:80px;
}
.hero__art{display:none;}


.hero h1{margin:0 0 26px;}
.hero__cta{display:flex;gap:26px;align-items:center;margin-top:40px;flex-wrap:wrap;}

/* Running seconds — the one moving thing on the page. */
.sweep{display:flex;align-items:center;gap:12px;margin-bottom:26px;}
.sweep__dial{width:26px;height:26px;border:1px solid var(--slate);border-radius:50%;position:relative;}
.sweep__hand{
  position:absolute;left:50%;bottom:50%;width:1px;height:10px;background:var(--blued-lift);
  transform-origin:bottom center;animation:sweep 60s steps(60) infinite;
}
@keyframes sweep{to{transform:rotate(360deg);}}
.sweep span{font-family:var(--data);font-size:10.5px;letter-spacing:.2em;color:var(--mist);text-transform:uppercase;}

@media (max-width:900px){
  .hero{min-height:auto;}
  .hero__grid{grid-template-columns:1fr;gap:36px;padding-block:56px 64px;text-align:center;}
  .hero__art{display:none;}
  
  /* Stacked, .hero__art spans the full width, so a halo at 118% of it balloons
     to ~1000px and washes over the headline below. Tie it to the image. */
  
  .hero .lede{margin-inline:auto;}
  .hero__cta,.sweep{justify-content:center;}
}

/* ---------- Assurance strip ---------- */
.assure{display:grid;grid-template-columns:repeat(4,1fr);}
.assure div{padding:26px 20px;border-right:1px solid var(--rule);}
.assure div:last-child{border-right:0;}
.assure b{display:block;font-size:13px;font-weight:500;margin-bottom:3px;}
@media (max-width:760px){
  .assure{grid-template-columns:repeat(2,1fr);}
  .assure div:nth-child(2n){border-right:0;}
  .assure div:nth-child(-n+2){border-bottom:1px solid var(--rule);}
}

/* ---------- Category grid ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.cat{
  background:var(--dial-pure);padding:44px 28px 34px;text-align:center;
  transition:background var(--mid) var(--ease),color var(--mid) var(--ease);
}
.cat img,.cat .ph{height:132px;width:100%;object-fit:contain;margin-bottom:24px;background:none;}
.cat .ph{aspect-ratio:auto;}
.cat b{display:block;font-family:var(--display);font-size:22px;font-weight:400;margin-bottom:8px;}
.cat .cap{transition:color var(--mid) var(--ease);}
.cat:hover{background:var(--graphite);color:var(--dial);}
.cat:hover .cap{color:var(--whisper);}
@media (max-width:1000px){.cats{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cats{grid-template-columns:1fr;} .cat img,.cat .ph{height:104px;}}

/* ---------- Tier rows ---------- */
.tier{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;border-bottom:1px solid var(--rule);}
/* max-height:78% did not resolve against an aspect-ratio-derived height, so the
   image filled the box and overflowed. Inset the container instead and let
   object-fit:contain do the fitting — same visual proportion, no clipping. */
.tier__art{aspect-ratio:4/3;background:var(--dial-pure);position:relative;overflow:hidden;}
/* Absolutely positioned: percentage width/height resolve against the containing
   block, which in-flow percentages cannot do against an aspect-ratio height. */
.tier__art img{position:absolute;left:11%;top:11%;width:78%;height:78%;object-fit:contain;transition:transform var(--slow) var(--ease);}
.tier:hover .tier__art img{transform:scale(1.03);}
.tier__txt{padding:clamp(32px,5vw,72px);}
.tier--flip .tier__art{order:2;}
.tier--dark{background:var(--graphite);color:var(--dial);border-bottom-color:var(--rule-dark);}
.tier--dark .tier__art{background:#1C2027;}
.tier--dark .lede{color:var(--whisper);}
.tier__range{font-family:var(--data);font-size:12px;letter-spacing:.08em;color:var(--mist-text);margin-top:22px;}
@media (max-width:860px){
  .tier{grid-template-columns:1fr;}
  .tier--flip .tier__art{order:0;}
}

/* ---------- Spotlight ---------- */
/* overflow:hidden contains the 110%-wide glow on .spot__art::before, which
   otherwise escapes the column and gives the page 11px of horizontal scroll
   once .spot collapses to one column under 1000px. */
.spot{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:40px;align-items:center;overflow:hidden;}
.spot__art{display:grid;place-items:center;position:relative;}
.spot__art::before{
  content:"";position:absolute;width:110%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(154,123,67,.22) 0%,rgba(154,123,67,0) 64%);
}
.spot__art img{position:relative;max-height:440px;width:auto;object-fit:contain;}
.specs{list-style:none;margin:0;padding:0;}
.specs li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule-dark);}
.specs dt,.specs .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);}
.specs .v{font-family:var(--data);font-size:13px;color:var(--dial);}
.spot--right{text-align:right;}
@media (max-width:1000px){
  .spot{grid-template-columns:1fr;gap:28px;text-align:left;}
  .spot--right{text-align:left;}
  .spot__art{order:-1;}
}

/* ---------- Product card ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.pcard{background:var(--dial-pure);padding:28px;display:block;}
/* Two compounding bugs. The <img> width/height attributes are presentational
   hints, so a rule setting only width:auto left the height hint (500px) live and
   the image rendered 264x500 in a 264x264 box, clipped by overflow:hidden. And
   percentage heights do not resolve against a height derived from aspect-ratio,
   so height:100% silently fell back to auto. Stretching the grid item sizes it
   from the grid area with no percentage involved; object-fit:contain then fits
   the whole watch inside, and the container padding gives it breathing room. */
.pcard__art{aspect-ratio:1;position:relative;overflow:hidden;margin-bottom:22px;}
.pcard__art img{position:absolute;left:8%;top:8%;width:84%;height:84%;object-fit:contain;transition:transform var(--slow) var(--ease);}
.pcard:hover .pcard__art img{transform:scale(1.03);}
.pcard__name{
  font-family:var(--display);font-size:19px;margin:6px 0 10px;
  display:inline-block;border-bottom:1px solid transparent;transition:border-color var(--mid) var(--ease);
}
.pcard:hover .pcard__name{border-bottom-color:var(--blued);}
.pcard .price{font-size:15px;}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr);} .pcard{padding:20px;}}
/* Brief specifies 3/2/1; the prototype stopped at two columns. */
@media (max-width:560px){.pgrid{grid-template-columns:1fr;} .pcard{padding:20px;} .pcard__name{font-size:18px;}}

/* Horizontal rail */
.scroller{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--rule);border:1px solid var(--rule);}
.scroller>*{flex:0 0 clamp(240px,30%,340px);scroll-snap-align:start;}
.scroller::-webkit-scrollbar{height:2px;}
.scroller::-webkit-scrollbar-thumb{background:var(--whisper);}

/* ---------- Editorial ---------- */
.edit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;}
.edit__art{aspect-ratio:4/5;background:var(--dial-pure);display:grid;place-items:center;}
.edit__art img{max-height:80%;width:auto;object-fit:contain;}
@media (max-width:800px){.edit{grid-template-columns:1fr;}}

/* ---------- Footer ---------- */
.ft{background:var(--graphite);color:var(--dial);padding:clamp(56px,8vw,96px) 0 0;}
.ft__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:56px;}
.ft h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin:0 0 20px;font-weight:600;}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.ft ul a{font-size:14px;color:var(--whisper);transition:color var(--fast);display:inline-flex;align-items:center;min-height:var(--tap);}
.ft ul a:hover{color:var(--dial);}
.sub{display:flex;gap:12px;border-bottom:1px solid var(--slate);padding-bottom:10px;margin-top:6px;}
.sub input{flex:1;background:none;border:0;color:var(--dial);font-size:14px;padding:4px 0;min-height:var(--tap);}
.sub input::placeholder{color:var(--mist);}
.sub button{font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--blued-lift);padding-bottom:2px;min-height:var(--tap);}
.ft__bar{display:flex;justify-content:space-between;gap:20px;padding:22px 0 30px;border-top:1px solid var(--rule-dark);font-size:12px;color:var(--mist);flex-wrap:wrap;}
@media (max-width:900px){
  .ft__cols{grid-template-columns:1fr;gap:0;}
  .ft__col{border-bottom:1px solid var(--rule-dark);padding:20px 0;}
  .ft__col--sub{border-bottom:0;padding-bottom:36px;}
  .ft__col h4{margin-bottom:14px;}
}

/* ---------- Shop page ---------- */
/* Brief specifies a 280px sidebar; the prototype CSS had 264px. */
.shop{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:start;}
.shop>*{min-width:0;}
.filters{position:sticky;top:120px;}
.fgroup{border-bottom:1px solid var(--rule);padding:22px 0;}
.fgroup:first-child{padding-top:0;}
.fgroup h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 16px;font-weight:600;color:var(--slate);}
.check{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:14px;cursor:pointer;min-height:var(--tap);}
.check input{width:16px;height:16px;accent-color:var(--blued);flex:0 0 auto;}
.check span.cap{margin-left:auto;}
.price-range-values{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px;font-family:var(--data);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--slate);}
.dual-range{position:relative;height:44px;margin-bottom:12px;touch-action:none;}
.dual-range__track{position:absolute;left:8px;right:8px;top:50%;height:5px;transform:translateY(-50%);border-radius:99px;background:#D9DEE8;box-shadow:inset 0 0 0 1px #B7BFCC;}
.dual-range__track i{position:absolute;top:0;bottom:0;left:var(--range-start);right:calc(100% - var(--range-end));border-radius:inherit;background:var(--blued);}
.dual-range__input{position:absolute;inset:0;width:100%;height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;pointer-events:none;}
.dual-range__input::-webkit-slider-runnable-track{height:5px;background:transparent;border:0;}
.dual-range__input::-moz-range-track{height:5px;background:transparent;border:0;}
.dual-range__input::-webkit-slider-thumb{width:24px;height:24px;margin-top:-9.5px;border:3px solid #fff;border-radius:50%;background:#687080;box-shadow:0 2px 8px rgba(16,24,40,.28);appearance:none;-webkit-appearance:none;pointer-events:auto;cursor:grab;}
.dual-range__input::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:#687080;box-shadow:0 2px 8px rgba(16,24,40,.28);pointer-events:auto;cursor:grab;}
.dual-range__input:active::-webkit-slider-thumb{cursor:grabbing;background:var(--blued);}
.dual-range__input:active::-moz-range-thumb{cursor:grabbing;background:var(--blued);}
.dual-range__input:focus-visible{outline:none;}
.dual-range__input:focus-visible::-webkit-slider-thumb{outline:3px solid color-mix(in srgb,var(--blued) 28%,transparent);outline-offset:2px;}
.dual-range__input:focus-visible::-moz-range-thumb{outline:3px solid color-mix(in srgb,var(--blued) 28%,transparent);outline-offset:2px;}
.price-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.price-field{min-width:0;padding:9px 11px;border:1px solid var(--rule);border-radius:8px;background:#fff;cursor:text;transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);}
.price-field:focus-within{border-color:var(--blued);box-shadow:0 0 0 3px color-mix(in srgb,var(--blued) 12%,transparent);}
.price-field.is-invalid{border-color:var(--alert);}
.price-field>span{display:block;margin-bottom:4px;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-text);}
.price-field b{display:flex;align-items:center;gap:4px;font-family:var(--data);font-size:12px;font-weight:500;color:var(--slate);}
.price-field b i{font-style:normal;}
.price-field input{width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;color:var(--graphite);font:500 12px/20px var(--data);font-variant-numeric:tabular-nums;}
.price-field input::-webkit-inner-spin-button,.price-field input::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none;}
.price-field input[type=number]{appearance:textfield;-moz-appearance:textfield;}
.listhd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap;}
.list-controls{display:flex;align-items:center;gap:10px;}
.sort{border:1px solid var(--rule);background:var(--dial-pure);height:var(--tap);padding:0 14px;border-radius:var(--radius);font-size:13px;}
.crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-text);margin-bottom:6px;}
.crumb a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);}
.crumb a:hover{color:var(--graphite);}
.fbar{display:none;}
.empty{padding:64px 20px;text-align:center;border:1px solid var(--rule);background:var(--dial-pure);}
@media (max-width:1023px){
  .shop{grid-template-columns:1fr;gap:0;}
  .filters{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:85;max-height:82vh;overflow:auto;
    background:var(--dial-pure);border-top:1px solid var(--rule);padding:24px;
    transform:translateY(100%);transition:transform var(--mid) var(--ease);
  }
  .filters.is-open{transform:none;}
  .fbar{
    display:flex;position:static;transform:none;z-index:auto;
    background:var(--graphite);color:var(--dial);height:var(--tap);padding:0 18px;align-items:center;justify-content:center;
    border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  }
}

/* ---------- Product page ---------- */
.pdp{display:grid;grid-template-columns:58fr 42fr;gap:clamp(28px,4vw,64px);align-items:start;}
/* Grid items default to min-width:auto. The gallery image carries an
   intrinsic width of 1000px, which pins the 58fr track open and squeezes
   the info column to 195px, overflowing the page. */
.pdp>*{min-width:0;}
.gal{display:grid;grid-template-columns:76px 1fr;gap:16px;min-width:0;}
.gal>*{min-width:0;}
.thumbs{display:flex;flex-direction:column;gap:10px;}
.thumb{aspect-ratio:1;background:var(--dial-pure);border:1px solid var(--rule);position:relative;}
.thumb.is-on{border-color:var(--blued);}
.thumb img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;}
.galmain{aspect-ratio:1;background:var(--dial-pure);position:relative;border:1px solid var(--rule);border-radius:12px;overflow:hidden;}
.galmain img{position:absolute;left:6%;top:6%;width:88%;height:88%;object-fit:contain;}
.pinfo{position:sticky;top:120px;}
.pinfo h1{margin:8px 0 10px;}
.pline{height:1px;background:var(--rule);margin:26px 0;}
.swatches{display:flex;gap:14px;flex-wrap:wrap;padding:5px 7px 8px 5px;overflow:visible;}
.sw{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--rule);position:relative;}
.sw.is-on{box-shadow:0 0 0 2px var(--dial),0 0 0 3px var(--blued);}
.swname{font-size:13px;color:var(--slate);margin-top:12px;}
.stock{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--slate);margin:22px 0 26px;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--stock);flex:0 0 auto;}
.acc{border-top:1px solid var(--rule);}
.acc__hd{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 0;text-align:left;font-size:13px;letter-spacing:.1em;text-transform:uppercase;min-height:var(--tap);}
.acc__ico{font-family:var(--data);color:var(--mist-text);}
.acc__bd{display:none;padding:0 0 24px;color:var(--slate);font-size:14.5px;}
.acc.is-open .acc__bd{display:block;}
.spectable{width:100%;border-collapse:collapse;}
.spectable th,.spectable td{text-align:left;padding:11px 0;border-bottom:1px solid var(--rule);font-weight:400;font-size:13.5px;}
.spectable th{color:var(--mist-text);font-size:11px;letter-spacing:.14em;text-transform:uppercase;width:44%;}
.spectable td{font-family:var(--data);}
.buybar{display:none;}
@media (max-width:900px){
  .pdp{grid-template-columns:1fr;}
  .pinfo{position:static;}
  .gal{grid-template-columns:1fr;}
  .thumbs{flex-direction:row;order:2;overflow-x:auto;}
  .thumb{flex:0 0 64px;}
  .buybar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--dial-pure);border-top:1px solid var(--rule);
    padding:12px var(--pad);align-items:center;justify-content:space-between;gap:16px;
    transform:translateY(100%);transition:transform var(--mid) var(--ease);
  }
  .buybar.is-on{transform:none;}
  .buybar .btn{height:46px;padding:0 24px;}
}

/* ---------- Checkout ---------- */
.cohdr{border-bottom:1px solid var(--rule);background:var(--dial);}
.cohdr__in{height:76px;display:flex;align-items:center;justify-content:space-between;}
.secure{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-text);}
.secure svg{width:14px;height:14px;stroke:var(--mist);fill:none;stroke-width:1.4;}
.co{display:grid;grid-template-columns:60fr 40fr;gap:clamp(32px,5vw,72px);align-items:start;}
.co>*{min-width:0;}
.steps{display:flex;align-items:center;gap:0;margin-bottom:40px;}
.step{display:flex;align-items:center;gap:10px;flex:1;}
.step:last-child{flex:0;}
.step i{width:9px;height:9px;border-radius:50%;background:var(--whisper);flex:0 0 auto;}
.step.is-done i{background:var(--blued);}
.step.is-now i{background:var(--graphite);transform:scale(1.35);}
.step em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-text);white-space:nowrap;}
.step.is-now em{color:var(--graphite);}
.step b{flex:1;height:1px;background:var(--rule);}
.fset{border:0;margin:0 0 36px;padding:0;}
.fset legend{font-family:var(--display);font-size:22px;margin-bottom:20px;padding:0;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fld{margin-bottom:16px;}
.fld label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-text);margin-bottom:7px;}
.fld input,.fld select{
  width:100%;height:50px;padding:0 14px;background:var(--dial-pure);
  border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color var(--fast) var(--ease);
}
.fld input:focus,.fld select:focus{border-color:var(--blued);}
.fld.has-err input{border-color:var(--alert);}
.err{display:none;color:var(--alert);font-size:12.5px;margin-top:6px;}
.fld.has-err .err{display:block;}
.opt{display:flex;align-items:center;gap:14px;border:1px solid var(--rule);background:var(--dial-pure);padding:16px;margin-bottom:10px;cursor:pointer;min-height:var(--tap);}
.opt input{accent-color:var(--blued);width:18px;height:18px;flex:0 0 auto;}
.opt b{font-weight:500;font-size:14px;}
.opt .price{margin-left:auto;font-size:14px;}
.sum{background:var(--dial-pure);border:1px solid var(--rule);padding:28px;position:sticky;top:110px;}
.sum__row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);}
.sum__row img,.sum__row .ph{width:64px;height:64px;object-fit:contain;background:var(--dial);}
.sum__line{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;color:var(--slate);}
.sum__tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;margin-top:8px;border-top:1px solid var(--rule);}
.sum__tot .price{font-family:var(--display);font-size:26px;}
.promo{width:100%;text-align:left;font-size:12.5px;color:var(--blued);padding:14px 0;border-bottom:1px solid var(--rule);min-height:var(--tap);}
@media (max-width:900px){
  .co{grid-template-columns:1fr;}
  .sum{position:static;order:-1;margin-bottom:28px;}
  .frow{grid-template-columns:1fr;}
  .steps{overflow-x:auto;}
  .step em{display:none;}
  .step.is-now em{display:block;}
}

/* ---------- Fixed-box image containment ----------
   Every image that sits inside a fixed box gets the same contract: never exceed
   the box, never distort, always letterbox. This exists because the same bug
   surfaced three separate times — product cards, tier art, and the product
   gallery — each time because an HTML width/height attribute or an unresolvable
   percentage silently won over the intended sizing. Boxes whose height comes
   from aspect-ratio position the image absolutely, since percentage heights do
   not resolve against an aspect-ratio height. Verified by imgsweep.mjs. */
.pcard__art img,
.galmain img,
.thumb img,
.cat img,
.mega__item img,
.cart__row img,
.sum__row img,
.tier__art img,
.spot__art img,
.edit__art img,


/* ---------- Utility ---------- */
.mt0{margin-top:0;}.mb0{margin-bottom:0;}
.stack>*+*{margin-top:18px;}
.center{text-align:center;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* Reveal-on-scroll must fail visible.
   Twelve sections use this. If it defaulted to opacity:0 then any JS failure
   before initReveal() — a module 404, a throw in an import — would leave most
   of the page loaded and blank, which is the worst outcome for a storefront.
   So content is opaque by default and the animation is opt-in: JS adds
   html.js-reveal only at the moment it is actually about to observe. */
.reveal{opacity:1;transform:none;}
html.js-reveal .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
}
html.js-reveal .reveal.is-in{opacity:1;transform:none;}

/* ==========================================================================
   Boutique scenes — engraved line illustrations standing in for photography
   ========================================================================== */
.boutique{background:var(--graphite);color:var(--dial);}
.scenes{display:grid;grid-template-columns:1.4fr 1fr;gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);margin-top:44px;}
.scene{background:#1A1E24;position:relative;overflow:hidden;}
.scene--wide{grid-row:span 2;}
.scene svg{width:100%;height:100%;display:block;}
.scene__cap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;
  background:linear-gradient(to top,rgba(22,25,29,.92),rgba(22,25,29,0));}
.scene__cap b{display:block;font-family:var(--display);font-size:19px;font-weight:400;margin-bottom:3px;}
.scene__cap span{font-size:12.5px;color:var(--whisper);}
@media (max-width:820px){
  .scenes{grid-template-columns:1fr;}
  .scene--wide{grid-row:span 1;}
}
/* Stroke system for the scenes */
.ln{fill:none;stroke:var(--whisper);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
.ln-2{fill:none;stroke:var(--mist);stroke-width:1;stroke-linecap:round;}
.ln-a{fill:none;stroke:var(--blued-lift);stroke-width:1.4;stroke-linecap:round;}
.fl{fill:#20252C;}
.fl-2{fill:#171B21;}
.glow{fill:url(#lampGlow);}

/* ---------- Skeleton loading shells ---------- */
@keyframes skeleton-shimmer{
  0%{background-position:100% 0;}
  100%{background-position:-100% 0;}
}
.skeleton-block{
  display:block;font-style:normal;border-radius:8px;
  background:linear-gradient(90deg,#E4E9F1 25%,#F4F7FB 38%,#E4E9F1 63%);
  background-size:400% 100%;animation:skeleton-shimmer 1.45s ease-in-out infinite;
}
.skeleton-line{width:100%;height:14px;border-radius:99px;}
.sk-line-title{height:42px;margin-top:14px;}
.sk-line-price{width:38%;height:27px;margin-top:26px;}
.sk-line-xs{width:26%;height:10px;}
.sk-line-sm{width:35%;height:12px;margin-top:14px;}
.sk-line-55{width:55%;}
.sk-line-70{width:70%;}
.sk-line-85{width:85%;}
.sk-product-gallery{display:grid;grid-template-columns:76px 1fr;gap:16px;min-width:0;}
.sk-thumb-stack{display:flex;flex-direction:column;gap:10px;}
.sk-thumb-stack .skeleton-block{aspect-ratio:1;border-radius:2px;}
.sk-product-image{aspect-ratio:1;border-radius:2px;}
.sk-product-info{padding:24px 26px;background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:0 4px 20px rgba(16,24,40,.045);}
.sk-product-info>.skeleton-line{margin-bottom:12px;}
.sk-rule{height:1px;border-radius:0;margin:24px 0;}
.sk-swatches{display:flex;gap:12px;margin:16px 0;}
.sk-swatches .skeleton-block{width:44px;height:44px;border-radius:50%;}
.sk-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;}
.sk-actions .skeleton-block{height:54px;}
.sk-product-card{min-width:0;padding:20px;display:flex;flex-direction:column;gap:13px;background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:0 3px 14px rgba(16,24,40,.035);}
.sk-card-image{width:100%;aspect-ratio:1;border-radius:9px;margin-bottom:5px;}
.sk-category-card{height:294px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;}
.sk-category-image{height:69%;margin-bottom:auto;}
.sk-post-card{display:flex;flex-direction:column;gap:13px;}
.sk-post-image{width:100%;aspect-ratio:16/9;margin-bottom:7px;}
.sk-article{display:flex;flex-direction:column;gap:14px;}
.sk-article-image{width:100%;aspect-ratio:16/8;margin:14px 0;}
@media (max-width:900px){
  .sk-product-gallery{grid-template-columns:1fr;}
  .sk-thumb-stack{flex-direction:row;order:2;overflow:hidden;}
  .sk-thumb-stack .skeleton-block{flex:0 0 64px;}
  .sk-product-image{order:1;}
}
@media (max-width:620px){
  .sk-product-info{padding:20px 18px;}
  .sk-line-title{height:30px;}
  .sk-category-card{height:235px;padding:12px;}
}
@media (prefers-reduced-motion:reduce){.skeleton-block{animation:none;background:#E4E9F1;}}
.varlist{display:flex;gap:10px;flex-wrap:wrap;}
.notfound{padding:80px 0;text-align:center;}

/* ==========================================================================
   PORT ADDITIONS
   Everything below is new, and exists only to satisfy decisions taken after
   the prototype was approved. Nothing above this band has been restyled.
   ========================================================================== */

/* --- Composite variant swatches -------------------------------------------
   13 of the 35 references carry a composite colour such as "#7B1FA2/#D32F2F".
   That is not a valid background-color, so composites are rendered as a hard
   135° split via background-image. Single colours keep background-color.
   Both are set from JS as inline style; these rules only guarantee that a
   swatch never collapses if a colour fails to parse.                        */
.sw{background-color:var(--dial-pure);background-repeat:no-repeat;background-size:100% 100%;}

/* Accessible labelling: colour is never the only indicator. Each swatch
   carries the literal hex in its aria-label and a visible ordinal below. */
.swpos{
  font-family:var(--data);font-variant-numeric:tabular-nums;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist-text);margin-top:6px;
}
.swhex{
  font-family:var(--data);font-size:12px;letter-spacing:.04em;color:var(--slate);
}

/* --- Brand filter ---------------------------------------------------------
   Fifth filter group on the shop page. Reuses .fgroup/.check wholesale;
   only the count badge needed a tabular figure so the column stays straight. */
.check span.cap{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:11.5px;}

/* --- Legacy live-rating components ----------------------------------------
   Kept for stores that later switch the sample-review block to live ratings. */
.rateempty{
  display:grid;place-items:center;text-align:center;
  border:1px solid var(--rule-dark);padding:36px 24px;
}
.rateempty .h3{color:var(--dial);margin-bottom:8px;}
.ratebar{display:flex;align-items:center;gap:12px;}
.ratebar__track{flex:1;height:2px;background:var(--rule-dark);position:relative;}
.ratebar__fill{position:absolute;inset:0 auto 0 0;background:var(--blued-lift);width:0;}
.ratebar .v{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:13px;color:var(--dial);min-width:2ch;text-align:right;}

/* --- Gallery lightbox -----------------------------------------------------
   Keyboard navigable, focus trapped, Esc to close.                          */
.lbox{
  position:fixed;inset:0;z-index:100;background:rgba(22,25,29,.94);
  display:none;place-items:center;padding:clamp(16px,4vw,64px);
}
.lbox.is-open{display:grid;}
.lbox__fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:grid;gap:16px;}
.lbox__fig img{max-height:78vh;width:auto;margin:0 auto;object-fit:contain;}
.lbox__cap{font-family:var(--data);font-size:11.5px;letter-spacing:.06em;color:var(--whisper);text-align:center;}
.lbox__x{
  position:absolute;top:20px;right:20px;color:var(--dial);
  min-height:var(--tap);min-width:var(--tap);display:grid;place-items:center;
  font-family:var(--data);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.lbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);color:var(--dial);
  min-height:var(--tap);min-width:var(--tap);display:grid;place-items:center;font-size:22px;
}
.lbox__nav--prev{left:12px;} .lbox__nav--next{right:12px;}
.galmain{cursor:zoom-in;}

/* --- Checkout success -----------------------------------------------------
   No confetti. A ruled receipt and a reference number.                       */
.done{max-width:620px;margin:0 auto;text-align:center;padding:clamp(48px,8vw,96px) 0;}
.done__ref{
  font-family:var(--data);font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;
  color:var(--slate);border:1px solid var(--rule);background:var(--dial-pure);
  padding:14px 20px;display:inline-block;margin:24px 0 32px;
}

/* --- Demo notice ----------------------------------------------------------
   This storefront never places a real order; say so where it matters.        */
.demonote{
  font-size:12px;letter-spacing:.04em;color:var(--mist);
  border-left:1px solid var(--rule);padding-left:12px;
}
.ink .demonote{border-left-color:var(--rule-dark);}

/* --- Skip link ------------------------------------------------------------ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--graphite);color:var(--dial);
  padding:14px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:0;}

/* --- Newsletter feedback --------------------------------------------------- */
.sub__say{margin:10px 0 0;}
.ink .sub__say.is-bad{color:var(--alert-lift);}
.sub__say.is-bad{color:var(--alert);}
.sub input:disabled,.sub button:disabled{opacity:.55;cursor:default;}

/* --- Footer tap targets --------------------------------------------------- */
/* .ft ul a already sets min-height:44px, which was enough while every label was
   a long word. The rebuilt Client care column added "Terms" — 39px wide, so
   44 tall but under the WCAG 2.5.5 minimum on the other axis. The anchor has no
   background or underline, so widening the hit area changes nothing visually. */
.ft ul a{min-width:var(--tap);}

/* --- Content pages (about-us, terms, privacy, contact-us) ----------------- */
/* Long-form policy copy. One measured column; the page head carries the title
   so the prose starts at h2 and the heading hierarchy stays honest. */
.pghead{background:var(--graphite);color:var(--dial);padding:74px 0 62px;}
.pghead .h1{margin-bottom:14px;}
.pghead__meta{
  font-family:var(--data);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--whisper);
}

/* One measure, one axis. The title block and the body share this column so the
   page reads as a composed page rather than as text that ran out. Left-aligned
   at 72ch it sat 660px wide with ~600px of dead space beside it at 1440, and
   the h1 ran the full 1256px — title and body on two different axes. */
.pgcol,.prose{max-width:700px;margin-inline:auto;}

/* 700px at the 16px UI size measures ~104 characters, well past the readable
   band. Long-form reading carries larger type than interface text, so the
   column holds its width and the type grows into it: ~79 characters at 700px. */
.prose{font-size:21px;}
.prose>*+*{margin-top:22px;}
.prose p{color:var(--slate);line-height:1.68;}
.prose strong{color:var(--graphite);font-weight:600;}

.prose h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(23px,2.5vw,30px);line-height:1.16;
  color:var(--graphite);margin-top:54px;padding-top:22px;
  border-top:1px solid var(--rule);
  /* Sticky header is 63px once condensed; keep anchored headings clear of it. */
  scroll-margin-top:96px;
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.prose h3{
  font-family:var(--body);font-weight:600;font-size:18px;
  letter-spacing:.01em;color:var(--graphite);margin-top:34px;
}

.prose a{color:var(--blued);text-decoration:underline;text-underline-offset:3px;}
.prose a:hover{color:var(--blued-lift);}

.prose ul{list-style:none;padding:0;margin-top:16px;}
.prose li{
  position:relative;padding-left:26px;margin-top:11px;
  color:var(--slate);line-height:1.62;
}
/* Minute marker rather than a bullet — the same mark the rail and rules use. */
.prose li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--blued);
}

.prose table{
  width:100%;border-collapse:collapse;margin-top:26px;
  font-size:17px;
}
.prose th,.prose td{
  text-align:left;padding:12px 16px 12px 0;
  border-bottom:1px solid var(--rule);vertical-align:top;
}
.prose th{
  font-family:var(--data);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist-text);font-weight:400;
  padding-bottom:9px;
}
.prose td:first-child{color:var(--graphite);padding-right:32px;}
.prose td:last-child,.prose th:last-child{padding-right:0;}
/* Two-column tables with no header row (contact response times) read as a
   definition list; drop the empty header instead of rendering a blank strip. */
.prose thead.is-empty{display:none;}

/* An unfilled token is deliberate — Homex has no verified contact details.
   Marked visibly so it can never be mistaken for a real address. */
.tok{
  font-family:var(--data);font-size:16px;
  background:var(--dial);border:1px dashed var(--rule);
  border-radius:var(--radius);padding:1px 7px;color:var(--mist-text);
  white-space:nowrap;
}

.prose .demobanner{
  border:1px solid #E0A800;background:#FFF8E1;border-radius:var(--radius);
  padding:16px 18px;margin-bottom:38px;line-height:1.6;
}
.prose .demobanner b{display:block;color:#6E4E00;font-size:15px;margin-bottom:5px;}
.prose .demobanner span{color:#4A3600;font-size:14px;}
.prose .demobanner strong{color:#4A3600;}

@media (max-width:700px){
  .pghead{padding:52px 0 44px;}
  /* The column is viewport-bound below 700px, so the type comes back down to
     keep the measure from collapsing to ~30 characters on a phone. */
  .prose{font-size:17px;}
  .prose table{font-size:15px;}
  .prose td:first-child{padding-right:18px;}
  .tok{font-size:14px;}
}

/* --- Search and account sheets -------------------------------------------- */
/* Same right-hand sheet as the bag, so there is one panel idiom on the site
   rather than three. .drawer stays the full-screen mobile nav. */
.sheet{
  position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:90;
  background:var(--dial-pure);border-left:1px solid var(--rule);
  transform:translateX(100%);transition:transform var(--mid) var(--ease);
  display:flex;flex-direction:column;
}
.sheet.is-open{transform:none;}
.sheet__hd{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px;border-bottom:1px solid var(--rule);
}
.sheet__pad{padding:24px 24px 20px;border-bottom:1px solid var(--rule);}
.sheet__body{flex:1;overflow:auto;overscroll-behavior:contain;padding:8px 24px 24px;}

.sheet input[type="search"]{
  width:100%;height:var(--tap);background:none;
  border:0;border-bottom:1px solid var(--rule);
  font-size:17px;padding:4px 0;
}
.sheet input[type="search"]:focus{border-bottom-color:var(--blued);outline:none;}

/* Result rows mirror .cart__row so a product reads the same in both sheets. */
.sres{
  display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--rule);min-height:var(--tap);
}
.sres__art{width:56px;height:56px;background:var(--dial);position:relative;overflow:hidden;}
.sres__art img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;}
.sres b{display:block;font-family:var(--display);font-size:16px;font-weight:400;}
.sres .cap{display:block;margin-top:2px;}
.sres:hover b{color:var(--blued);}

.sempty{padding:36px 0;text-align:center;}

/* Account */
.acct{padding:16px 0;}
.acct__id{display:flex;gap:14px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--rule);}
.acct__av{width:52px;height:52px;border-radius:50%;background:var(--dial);object-fit:cover;}
.acct__nm{font-family:var(--display);font-size:20px;}
.acct__row{
  display:flex;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--rule);font-size:14px;
}
.acct__row span:first-child{color:var(--mist-text);}

/* --- Reviews --------------------------------------------------------------- */
/* The label is not an apology. It reads as a deliberate statement of what this
   block is, the same way the demo banner does on the policy pages. */
.samplenote{
  display:inline-block;margin:0 0 34px;
  border-left:2px solid var(--blued);padding:6px 0 6px 14px;
  font-size:13px;letter-spacing:.02em;color:var(--slate);
}

/* A column here stood 212px tall against a 65px heading, so it loomed 148px
   above the words it belongs to. Laid out as a row it matches the heading. */
.revsum{display:flex;align-items:center;gap:26px;}
.revsum__score{text-align:right;}
.revsum__avg{
  font-family:var(--display);font-size:46px;line-height:1;margin:0;
  font-variant-numeric:tabular-nums;
}
.revsum__avg span{font-size:19px;color:var(--mist-text);margin-left:2px;}
.stars{letter-spacing:.12em;color:var(--blued);}

.revbars{display:flex;flex-direction:column;gap:5px;width:150px;}
.revbar{display:grid;grid-template-columns:12px 1fr 20px;gap:9px;align-items:center;}
.revbar__n,.revbar__c{
  font-family:var(--data);font-size:11px;color:var(--mist-text);
  font-variant-numeric:tabular-nums;
}
.revbar__c{text-align:right;}
.revbar__track{height:3px;background:var(--rule);position:relative;}
.revbar__fill{position:absolute;inset:0 auto 0 0;background:var(--blued);}

.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.revgrid>*{min-width:0;}
.rev{background:var(--dial-pure);margin:0;padding:30px 28px;display:flex;flex-direction:column;gap:14px;}
.rev__stars{margin:0;font-size:15px;}
.rev blockquote{margin:0;color:var(--slate);line-height:1.66;font-size:15px;}
.rev figcaption{margin-top:auto;}

@media (max-width:1023px){
  .revgrid{grid-template-columns:repeat(2,1fr);}
  .revsum{align-items:flex-start;}
}
@media (max-width:560px){
  .revsum{flex-direction:column;align-items:flex-start;gap:14px;}
  .revsum__score{text-align:left;}
}
@media (max-width:640px){
  .revgrid{grid-template-columns:1fr;}
  .revsum__avg{font-size:38px;}
}

/* --- Journal --------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  padding:0 18px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--dial-pure);font-size:13px;letter-spacing:.02em;
  transition:border-color var(--fast),color var(--fast);
}
.chip span{
  font-family:var(--data);font-size:11px;color:var(--mist-text);
  font-variant-numeric:tabular-nums;
}
.chip:hover{border-color:var(--blued);}
.chip.is-on{border-color:var(--blued);color:var(--blued);}
.chip.is-on span{color:var(--blued);}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;}
.posts>*{min-width:0;}
.post{display:flex;flex-direction:column;}
.post__art{
  aspect-ratio:16/9;position:relative;overflow:hidden;
  background:var(--dial-pure);border:1px solid var(--rule);margin-bottom:20px;
}
.post__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--slow) var(--ease);}
.post:hover .post__art img{transform:scale(1.03);}
.post__meta{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px;
  font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist-text);
}
.post__cat{color:var(--blued);}
.post__title{
  font-family:var(--display);font-size:22px;font-weight:400;line-height:1.2;
  margin:0 0 10px;
}
.post:hover .post__title{color:var(--blued);}
.post__ex{margin:0;font-size:14.5px;line-height:1.62;color:var(--slate);}

/* Article cover. 16:9 like the listing, contained by the same rules as every
   other image on the site. */
.artcover{
  aspect-ratio:16/9;position:relative;overflow:hidden;
  background:var(--dial-pure);border:1px solid var(--rule);
  max-width:900px;margin:0 auto 48px;
}
.artcover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* The category eyebrow is a link at 11px, so its box measured 111x12 — under
   WCAG 2.5.5 on both axes. Give the anchor a real target and pull the eyebrow's
   own margin in, so the header spacing stays where it was. */
[data-article-cat] a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;
  min-height:var(--tap);min-width:var(--tap);
}
[data-article-cat]:has(a){margin-bottom:0;}
.prose figure{margin:32px 0;}
.prose figure img{width:100%;height:auto;}

@media (max-width:1023px){ .posts{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .posts{grid-template-columns:1fr;gap:36px;} }


/* --- Hero: photograph ------------------------------------------------------
   The frame is black across its left ~40%, which is where the copy sits. There
   is deliberately NO gradient scrim: if the text ever needed one, the crop has
   drifted and the crop is what should be fixed.

   object-position is set so BOTH wrists stay in frame. The measured dials are
   at 65.4% and 80.7% across, so the right edge is the constraint — as the
   viewport narrows, cover crops the sides and the woman's wrist leaves first.
   Holding the crop right-of-centre keeps both until the layout switches. */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:72% 50%;
  /* the source is already near-black at the left; nothing is painted over it */
}
/* The copy layer spans the full hero, so left to itself it intercepts clicks
   destined for a marker. Only the copy column should take pointer events. */
.hero__grid{position:relative;z-index:2;width:100%;pointer-events:none;}
.hero__copy{pointer-events:auto;}
.hero__copy{max-width:34rem;}

/* Re-derived for the new photograph: the couple sits further LEFT in this file
   than in the previous one, so the old 60/68% crops ran the copy onto the man.
   Lower X shows more of the empty left band and pushes the subjects right.
   Bounded on the other side by the woman's wrist at 77.4% of the file, which
   must stay in frame — at 1024 those two constraints were 16px apart, which is
   why the copy narrows there too. */
@media (min-width:951px){  .hero__media img{object-position:44% 50%;} }
@media (min-width:1200px){ .hero__media img{object-position:26% 50%;} }
@media (min-width:1400px){ .hero__media img{object-position:46% 50%;} }

@media (max-width:1399px) and (min-width:951px){
  .hero .h-hero{font-size:clamp(38px,6.1vw,66px);}
  .hero .lede{max-width:34ch;}
  .hero__copy{max-width:28rem;}
}
/* Below 1200 the two constraints — copy clear of the man, woman's wrist still
   in frame — close to within a few pixels. The copy gives up the difference. */
@media (max-width:1199px) and (min-width:951px){
  .hero .h-hero{font-size:clamp(36px,5.6vw,58px);}
  .hero .lede{max-width:30ch;font-size:15px;}
  .hero__copy{max-width:23rem;}
}

/* --- Hero markers -----------------------------------------------------------
   Ported from the approved mockup. A 44px button whose visible part is an 11px
   dot, sitting on the bracelet BELOW each case so it never covers the product.
   The card opens on click, floats over the photograph, and flips below the dot
   when there is no room above it. */
.hero__spots{position:absolute;inset:0;z-index:4;pointer-events:none;}

.hspot{
  position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  width:var(--tap);height:var(--tap);display:grid;place-items:center;
  border:0;background:none;padding:0;
}
.hspot i{
  width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 0 0 3px rgba(255,255,255,.22),0 1px 4px rgba(0,0,0,.5);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.hspot:hover i,.hspot[aria-expanded="true"] i{
  transform:scale(1.25);
  box-shadow:0 0 0 6px rgba(255,255,255,.28),0 1px 6px rgba(0,0,0,.5);
}
.hspot:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%;}
.hspot i::after{
  content:"";position:absolute;width:var(--tap);height:var(--tap);border-radius:50%;
  border:1px solid rgba(255,255,255,.45);opacity:0;
  animation:hpulse 3.2s var(--ease) infinite;
}
@keyframes hpulse{0%{transform:scale(.5);opacity:.7}70%{transform:scale(1);opacity:0}100%{opacity:0}}

.hcard{
  position:absolute;z-index:5;width:300px;pointer-events:auto;
  /* .hero carries .ink, so without this the card inherits light text and
     renders nearly invisible on its own light ground. */
  color:var(--graphite);
  background:rgba(233,236,238,.97);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);box-shadow:0 18px 44px rgba(0,0,0,.45);
  padding:16px;display:none;transform:translateY(6px);opacity:0;
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.hcard.is-on{display:block;}
.hcard.is-in{opacity:1;transform:none;}
.hcard__row{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;}
.hcard__row img{width:76px;height:76px;object-fit:contain;background:#fff;border:1px solid var(--rule);}
.hcard__k{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-text);margin:0 0 4px;
}
.hcard b{font-family:var(--display);font-weight:400;font-size:18px;display:block;line-height:1.2;}
.hcard .price{font-size:14px;margin-top:6px;display:block;}
.hcard__go{
  display:flex;align-items:flex-end;min-height:var(--tap);
  margin-top:10px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);
}
.hcard__go:hover{color:var(--blued);}
.hcard__x{
  position:absolute;top:2px;right:2px;width:var(--tap);height:var(--tap);
  border:0;background:none;color:var(--mist-text);font-size:17px;line-height:1;
}
.hcard::before{
  content:"";position:absolute;width:10px;height:10px;
  background:rgba(233,236,238,.97);
  border-left:1px solid rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5);
  transform:rotate(45deg);
}
.hcard[data-side="below"]::before{top:-6px;left:var(--ax,34px);}
.hcard[data-side="above"]::before{bottom:-6px;left:var(--ax,34px);transform:rotate(225deg);}

@media (prefers-reduced-motion:reduce){
  .hspot i,.hcard{transition:none;}
  .hspot i::after{animation:none;}
  .hspot:hover i,.hspot[aria-expanded="true"] i{transform:none;}
}

/* auto-fit rather than a fixed max-width, so the row does not sit half empty */
.heromob{padding-top:clamp(40px,5vw,64px);}
.heromob .pgrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2vw,32px);}

/* --- Hero below 950 ---------------------------------------------------------
   Stack instead of overlay. At this width object-fit:cover zooms the 16:9 frame
   so hard that the empty left band is cropped away entirely and the copy lands
   on a face. The picture gets its own 4:5 box cropped to the RIGHT half, where
   both people are — a centred crop pushes the woman off the edge — and the copy
   sits on graphite beneath it. Hotspots are dropped; the cards carry the
   products.

   The mockup stacks at 900. Measured against THIS photograph the overlay stops
   working at about 950: below it, no object-position keeps the copy clear of the
   man and the woman's wrist inside the frame at the same time — at 901 the two
   constraints leave a single viable value, and under that none. So the switch
   happens where the geometry actually fails, not where the mockup guessed. */
@media (max-width:950px){
  .hero{min-height:0;display:flex;flex-direction:column;background:var(--graphite);}
  .hero__media{position:relative;inset:auto;aspect-ratio:4/5;}
  .hero__media img{width:100%;height:100%;object-position:78% 38%;}
  .hero__grid{position:static;padding-block:32px 8px;}
  .hero__copy{max-width:none;}
  .hero__spots{display:none;}
}

/* Inline text button that reads as a link but is a real <button>. */
.linkish{color:var(--blued);text-decoration:underline;text-underline-offset:3px;font:inherit;
  min-height:var(--tap);min-width:var(--tap);padding:0 2px;}
.linkish:hover{color:var(--blued-lift);}

/* Load more. A button, not infinite scroll — the footer carries seven real
   destinations and infinite scroll takes it away from people. */
.loadmore{display:flex;flex-direction:column;align-items:center;gap:14px;padding:52px 0 8px;}

/* --- Header nav at the narrow end of desktop --------------------------------
   Adding Journal made four items where three fitted. Below ~1200 "Haute
   Horlogerie" and "Client Care" wrapped to two lines and sat hard against the
   wordmark — no overflow, no contrast failure, so the audit passed while the
   header read as broken. Tighten the tracking and gap, and forbid wrapping so
   the failure would be visible rather than silent. */
.nav a{white-space:nowrap;}
@media (max-width:1340px){
  .nav{gap:20px;}
  .nav a{font-size:11px;letter-spacing:.08em;}
}
@media (max-width:1120px){
  .nav{gap:13px;}
  .nav a{font-size:10.5px;letter-spacing:.03em;}
  /* Client Care lives in the footer too; at this width the wordmark needs the
     room more than a fourth nav item does. */
  .nav a:last-child{display:none;}
}

/* "from" on a card whose variants carry different prices. Two references range
   $16,400 above their base, and a flat figure there is a price the customer
   will not be charged. */
.price__from{
  font-family:var(--body);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist-text);margin-right:4px;
}

/* --- Image swatches ---------------------------------------------------------
   15.2% of the catalogue carries a variant image, but those ten references are
   the ones customers land on from the hero — so a photograph is used wherever
   one exists and a colour circle carries the rest. A brown strap and a steel
   bracelet are different objects, not different colours, and a dot cannot say
   that; where the shop has not supplied a photograph the dot is still the
   honest fallback.

   The accessible label stays the hex. Selldone generates colour names at render
   time rather than storing them, so a name here would be invented. The visible
   "Finish 2 of 5" ordinal is what keeps colour from being the only indicator. */
.sw--img{
  width:52px;height:52px;border-radius:var(--radius);overflow:visible;
  background:var(--dial-pure);border:1px solid var(--rule);position:relative;padding:0;
}
.sw--img img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius);}
.sw--img.is-on{border-color:var(--blued);box-shadow:0 0 0 2px var(--blued);}
/* the colour still shows, as a corner dot, so the finish is readable at a glance */
.sw__dot{
  position:absolute;right:3px;bottom:3px;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--dial-pure);
}
.swsku{
  font-family:var(--data);font-size:11px;letter-spacing:.06em;color:var(--mist-text);
  margin-left:10px;
}

/* Sign-in setup guidance. Amber, matching the demo-content banner on the policy
   pages exactly (#E0A800 on #FFF8E1) rather than the mockup's slightly different
   tint — one amber across the site reads as one category of message. Full
   border with a heavier left edge, so it is unmistakably not shop chrome. */
.setupnote{
  margin-top:26px;background:#FFF8E1;border:1px solid #E0A800;
  border-left:3px solid #E0A800;border-radius:var(--radius);padding:16px 18px;
}
.setupnote__k{
  display:block;margin-bottom:8px;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#6E4E00;
}
.setupnote p{margin:0;font-size:13.5px;line-height:1.6;color:#4A3600;}
.setupnote p + p{margin-top:10px;font-weight:500;color:#3D2C00;}
.setupnote b{font-weight:600;color:#3D2C00;}

/* "Made with Selldone" — platform credit, not shop chrome. Light on purpose:
   the announcement bar below it is dark, and two dark bars stacked read as one
   heavy block. Deliberately outside the sticky header so it scrolls away and
   the stuck-header height (which .filters and .pinfo offset from) is unchanged. */
.sdbar{
  position:relative;z-index:80;background:#FFFAF0;border-bottom:1px solid var(--rule);
}
.sdbar__in{
  margin:0 auto;max-width:var(--maxw);padding:7px var(--pad);
  min-height:38px;position:relative;display:flex;align-items:center;justify-content:center;
  gap:6px;text-align:center;font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:12px;font-weight:500;letter-spacing:0;color:#101010;line-height:16px;
}
.sdbar__hx{width:13px;height:13px;display:block;flex:0 0 13px;fill:#E0102A;color:#E0102A;}
.sdbar__made{color:#101010;}
.sdbar a{
  color:#6B30C9;font-weight:700;text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px;padding:4px 0;margin:-4px 0;
}
.sdbar a:hover{color:#51239B;text-decoration:underline;text-underline-offset:2px;}
.theme-picker{
  position:absolute;top:50%;right:var(--pad);transform:translateY(-50%);
  display:block;letter-spacing:0;text-transform:none;color:var(--graphite);text-align:left;
}
.theme-picker__trigger{
  width:122px;height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;
  border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--graphite);
  font:600 12px/1 var(--body);
}
.theme-picker__trigger:hover{border-color:var(--mist);background:var(--theme-soft);}
.theme-picker__trigger:focus-visible,.theme-picker__item:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px;}
.theme-picker__trigger svg{width:16px;height:16px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .2s ease;}
.theme-picker__trigger[aria-expanded="true"] svg{transform:rotate(180deg);}
.theme-picker__swatch{
  width:17px;height:17px;flex:0 0 17px;border-radius:50%;background:var(--swatch);
  box-shadow:0 0 0 1px rgba(16,24,40,.12);
}
.theme-picker__menu{
  position:absolute;top:calc(100% + 9px);right:0;width:310px;padding:14px;
  border:1px solid var(--rule);border-radius:18px;background:#fff;
  box-shadow:0 22px 50px rgba(16,24,40,.18);
}
.theme-picker__menu[hidden]{display:none;}
.theme-picker__title{display:block;padding:4px 10px 9px;color:var(--mist-text);font:700 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;}
.theme-picker__item{
  width:100%;min-height:62px;display:grid;grid-template-columns:18px 1fr 18px;align-items:center;gap:12px;
  padding:9px 10px;border-radius:11px;background:transparent;text-align:left;color:var(--graphite);
}
.theme-picker__item:hover{background:var(--theme-soft);}
.theme-picker__item strong,.theme-picker__item small{display:block;}
.theme-picker__item strong{font:600 15px/1.25 var(--body);}
.theme-picker__item small{margin-top:4px;color:var(--mist-text);font:400 12px/1.35 var(--body);}
.theme-picker__check{color:var(--theme-primary);font:700 17px/1 var(--body);opacity:0;}
.theme-picker__item[aria-checked="true"] .theme-picker__check{opacity:1;}

/* Template banner. Above everything, including the platform credit: until the
   config names a real shop, "these are not your products" outranks every other
   message on the page. Same amber as the demo banner and the sign-in callout —
   one amber across the site, meaning one category of message. */
.tplbanner{
  background:#FFF8E1;border-bottom:2px solid #E0A800;
  /* Clears the fixed index rail, exactly as .page does. Without this the rail
     sits over the first ~56px and eats the start of every line. */
  margin-left:var(--rail);
}
@media (max-width:950px){ .tplbanner{margin-left:0;} }
.tplbanner__in{
  margin:0 auto;max-width:var(--maxw);padding:11px var(--pad);
  font-size:13.5px;line-height:1.5;color:#4A3600;
}
.tplbanner__in b{display:block;font-weight:600;color:#3D2C00;}
.tplbanner__in span{display:block;}

/* Collections grid adapts to how many categories the shop actually has, so a
   set of 3, 5, 7 or 10 never leaves one tile orphaned on its own row.
   Below 3 the section is hidden entirely by home.js. */
#catgrid[data-n="3"]{grid-template-columns:repeat(3,1fr);}
#catgrid[data-n="4"]{grid-template-columns:repeat(4,1fr);}
#catgrid[data-n="5"],
#catgrid[data-n="6"]{grid-template-columns:repeat(3,1fr);}
#catgrid[data-n="7"],
#catgrid[data-n="8"]{grid-template-columns:repeat(4,1fr);}
#catgrid[data-n="9"],
#catgrid[data-n="10"]{grid-template-columns:repeat(5,1fr);}
@media (max-width:1100px){
  #catgrid[data-n="7"],#catgrid[data-n="8"],
  #catgrid[data-n="9"],#catgrid[data-n="10"]{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){ #catgrid[data-n]{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ #catgrid[data-n]{grid-template-columns:1fr;} }

/* Hero in plate or slides mode: a product photograph, contained never cropped. */
.hero__plate{object-fit:contain !important;padding:4%;}

/* ==========================================================================
   Homex 2026 — high-clarity electronics retail system
   ========================================================================== */
:root{
  --graphite:#101828;
  --slate:#344054;
  --mist:#98A2B3;
  --mist-text:#667085;
  --whisper:#D0D5DD;
  --dial:#F4F7FB;
  --dial-pure:#FFFFFF;
  --rule:#E4E7EC;
  --rule-dark:#253047;
  --theme-primary:#005BD4;
  --theme-primary-hover:#0046A8;
  --theme-deep:#0B2A58;
  --theme-hero:#0D2342;
  --theme-accent:#F04438;
  --theme-soft:#EEF4FF;
  --theme-light:#93C5FD;
  --theme-footer:#07182F;
  --theme-hero-overlay:rgba(6,22,47,.9);
  --blued:var(--theme-primary);
  --blued-lift:#3B82F6;
  --brass:var(--theme-accent);
  --stock:#027A48;
  --alert:#B42318;
  --display:"Archivo",system-ui,sans-serif;
  --body:"Archivo",system-ui,-apple-system,sans-serif;
  --radius:12px;
  --rail:0px;
  --maxw:1480px;
}
html[data-theme="violet"]{
  --theme-primary:#6D28D9;--theme-primary-hover:#5B21B6;--theme-deep:#3B1768;
  --theme-hero:#2E124F;--theme-accent:#E11D74;--theme-soft:#F5F0FF;
  --theme-light:#D8B4FE;--theme-footer:#1F1035;--theme-hero-overlay:rgba(46,18,79,.92);
}
html[data-theme="emerald"]{
  --theme-primary:#047857;--theme-primary-hover:#065F46;--theme-deep:#064E3B;
  --theme-hero:#053D30;--theme-accent:#EA580C;--theme-soft:#ECFDF5;
  --theme-light:#A7F3D0;--theme-footer:#032D24;--theme-hero-overlay:rgba(5,61,48,.92);
}
html[data-theme="amber"]{
  --theme-primary:#B45309;--theme-primary-hover:#92400E;--theme-deep:#78350F;
  --theme-hero:#5A280B;--theme-accent:#2563EB;--theme-soft:#FFFBEB;
  --theme-light:#FDE68A;--theme-footer:#3B1B08;--theme-hero-overlay:rgba(90,40,11,.92);
}
html[data-theme="rose"]{
  --theme-primary:#BE123C;--theme-primary-hover:#9F1239;--theme-deep:#881337;
  --theme-hero:#5F102B;--theme-accent:#0F766E;--theme-soft:#FFF1F2;
  --theme-light:#FECDD3;--theme-footer:#3F0B20;--theme-hero-overlay:rgba(95,16,43,.92);
}

body{background:var(--dial);color:var(--graphite);font-size:15px;}
.page,.homex-page{margin-left:0;padding-left:0;}
.rail{display:none!important;}
.wrap{width:100%;}
h1,h2,h3,.h1,.h2,.h3,.h-hero{font-family:var(--display);font-weight:700;letter-spacing:-.035em;}
.section{padding:clamp(58px,7vw,96px) 0;}
.eyebrow{font-family:var(--data);font-size:10px;font-weight:600;letter-spacing:.16em;}
.btn{border-radius:8px;font-family:var(--body);font-weight:700;letter-spacing:0;}
.btn--primary,.btn--full{background:var(--blued);border-color:var(--blued);color:#fff;}
.btn--primary:hover,.btn--full:hover{background:var(--theme-primary-hover);border-color:var(--theme-primary-hover);}
.btn--light{background:#fff;border:1px solid #fff;color:var(--graphite);}
.text-link{min-height:44px;display:inline-flex;align-items:center;font-weight:700;color:var(--blued);}

.sdbar{background:#FFFAF0;}
.topbar{height:32px;background:var(--theme-deep);color:#fff;letter-spacing:.07em;text-transform:none;font-size:11px;}
.hdr{background:#fff;border-bottom:1px solid var(--rule);box-shadow:0 1px 8px rgba(16,24,40,.04);}
.hdr__in{height:68px;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;}
.hdr.is-stuck .hdr__in{height:60px;}
.homex-logo,.logo{font-family:var(--body);font-weight:800;font-size:28px;letter-spacing:-.06em;text-transform:uppercase;}
.homex-logo span,.logo span{color:var(--theme-accent);}
.header-nav{justify-self:center;justify-content:center;gap:clamp(12px,1.35vw,25px);min-width:0;white-space:nowrap;}
.header-nav a{font-size:clamp(10px,.72vw,12px);font-weight:600;letter-spacing:.07em;}
.hdr__tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.header-search{width:132px;height:44px;min-width:0;border:1px solid #C9D2E1;border-radius:8px;background:#F9FAFB;display:flex;align-items:center;gap:9px;padding:0 12px;color:var(--mist-text);text-align:left;}
.header-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.header-search:hover{border-color:var(--blued);background:#fff;}
.header-search svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;flex:0 0 auto;}
.hdr__act{gap:10px;}
.iconbtn{border-radius:8px;}
.iconbtn:hover{background:var(--theme-soft);}
.homex-navrow{display:none!important;}
.homex-navrow .nav{display:flex;align-items:center;justify-content:center;width:100%;gap:30px;height:44px;overflow:auto;white-space:nowrap;scrollbar-width:none;}
.homex-navrow .nav::-webkit-scrollbar{display:none;}
.homex-navrow .nav a{font-size:13px;font-weight:600;min-height:44px;display:flex;align-items:center;}
.homex-navrow .nav a:hover{color:var(--blued);}

.campaign-hero{min-height:clamp(520px,57vw,730px);height:auto;background:var(--theme-hero);color:#fff;display:flex;position:relative;overflow:hidden;align-items:center;}
.campaign-hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.campaign-hero__inner{position:relative;z-index:2;width:100%;display:flex;align-items:center;min-height:inherit;}
.campaign-hero__copy{width:min(520px,47vw);padding:42px;border-radius:16px;background:var(--theme-hero-overlay);box-shadow:0 24px 60px rgba(0,0,0,.24);}
.campaign-hero__copy .eyebrow{color:var(--theme-light);margin-bottom:14px;}
.campaign-hero__copy h1{font-size:clamp(36px,3vw,42px);line-height:1.04;margin:0 0 22px;}
.campaign-hero__copy h1 span{display:block;white-space:nowrap;}
.campaign-hero__copy>p:not(.eyebrow){font-size:18px;line-height:1.55;color:#D9E6F8;margin:0;max-width:43ch;}
.campaign-hero__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px;}
.campaign-hero__actions .btn{width:100%;min-width:0;justify-content:center;text-align:center;}
.campaign-hero__dots{position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:9px;padding:8px 10px;border-radius:99px;background:rgba(6,22,47,.72);}
.campaign-hero__dots button{position:relative;width:44px;height:44px;margin:-18px -7px;border-radius:99px;background:transparent;}
.campaign-hero__dots button::after{content:"";position:absolute;left:8px;right:8px;top:18px;height:8px;border-radius:99px;background:rgba(255,255,255,.45);}
.campaign-hero__dots button[aria-current="true"]::after{background:#fff;}

.benefit-bar{background:#fff;border-bottom:1px solid var(--rule);}
.benefit-bar__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.benefit-bar__grid>div{padding:22px 26px;border-right:1px solid var(--rule);}
.benefit-bar__grid>div:last-child{border-right:0;}
.benefit-bar b,.benefit-bar span{display:block;}
.benefit-bar b{font-size:14px;margin-bottom:3px;}
.benefit-bar span{font-size:12px;color:var(--mist-text);}

.section-heading{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px;}
.section-heading .eyebrow{margin:0 0 8px;color:var(--blued);}
.section-heading h2{font-size:clamp(30px,4vw,48px);line-height:1.06;}
.category-section{background:#F4F7FB;}
.homex-cats{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px!important;background:none!important;border:0!important;}
.homex-cat{height:294px!important;padding:0!important;display:flex!important;flex-direction:column;background:#fff!important;border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:0 3px 14px rgba(16,24,40,.045);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.homex-cat:hover{color:var(--graphite)!important;transform:translateY(-4px);border-color:#B2CCFF;box-shadow:0 14px 28px rgba(16,24,40,.1);}
.homex-cat__art{height:69%;display:flex;align-items:center;justify-content:center;padding:16px 22px;background:transparent;}
.homex-cat__art img{width:70%!important;height:70%!important;max-width:70%!important;max-height:70%!important;object-fit:contain!important;margin:auto!important;background:transparent!important;}
.homex-cat__copy{height:31%;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--rule);}
.homex-cat__copy b{font-family:var(--body);font-size:16px;font-weight:700;margin:0 0 4px;}
.homex-cat__copy small{color:var(--mist-text);font-size:12px;}

.promo-section{padding-top:0;}
.promo-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;}
.promo-card{position:relative;min-height:390px;border-radius:16px;overflow:hidden;color:#fff;background:var(--theme-deep);}
.promo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.promo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(4,16,38,.88));}
.promo-card:hover img{transform:scale(1.025);}
.promo-card span{position:absolute;z-index:2;left:28px;right:24px;bottom:27px;display:flex;flex-direction:column;align-items:flex-start;}
.promo-card small,.guide-card small{font-family:var(--data);font-size:10px;text-transform:uppercase;letter-spacing:.12em;}
.promo-card b{font-size:clamp(24px,2.4vw,38px);line-height:1.05;margin:7px 0 14px;}
.promo-card em,.guide-card em{font-style:normal;font-size:13px;font-weight:700;}

.products-section{background:var(--dial);}
.scroller{gap:14px;background:transparent;border:0;scrollbar-width:none;}
.scroller::-webkit-scrollbar{display:none;}
.pcard{border:1px solid var(--rule);border-radius:12px;padding:20px;box-shadow:0 3px 14px rgba(16,24,40,.035);transition:box-shadow .25s ease,transform .25s ease;}
.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(16,24,40,.09);}
.pcard__art{border-radius:9px;background:transparent;}
.pcard__name{font-size:15px;font-weight:700;line-height:1.4;}

.guide-section{background:var(--theme-deep);color:#fff;}
.guide-section .section-heading .eyebrow{color:var(--theme-light);}
.guide-section .text-link{color:#fff;}
.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.guide-card{background:#fff;color:var(--graphite);border-radius:13px;overflow:hidden;display:block;}
.guide-card img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.guide-card span{display:flex;min-height:156px;flex-direction:column;align-items:flex-start;padding:21px;}
.guide-card small{color:var(--blued);}
.guide-card b{font-size:18px;line-height:1.3;margin:8px 0 18px;}
.guide-card em{margin-top:auto;color:var(--blued);}

.newsletter-band{background:#fff;color:var(--graphite);padding:52px 0;border-top:1px solid var(--rule);}
.newsletter-band__inner{display:flex;align-items:center;justify-content:space-between;gap:36px;}
.newsletter-band .eyebrow{color:var(--theme-primary);margin-bottom:5px;}
.newsletter-band h2{font-size:clamp(26px,3.4vw,42px);}
.newsletter-band .sub{width:min(100%,480px);gap:8px;background:#F9FAFB;border:1px solid var(--rule);border-radius:9px;padding:5px;}
.newsletter-band .sub input{min-width:0;padding:4px 14px;color:var(--graphite);}
.newsletter-band .sub button{flex:0 0 auto;padding:0 22px;border:0;background:var(--theme-deep);color:#fff;border-radius:7px;white-space:nowrap;}

.ft{background:var(--theme-footer);padding:48px 0 0;}
.ft__cols{grid-template-columns:1.5fr repeat(3,1fr);gap:36px;padding-bottom:32px;}
.ft h4{margin-bottom:10px;}
.ft ul{gap:0;}
.ft ul a{min-height:38px;}
.ft .homex-logo{display:block;width:100%;color:#fff;text-align:left;margin:0 0 14px!important;justify-self:start;}
.ft .lede{font-size:14px;}
.ft__brand .demonote{margin-top:14px;}
.ft__socials{display:flex;align-items:center;gap:8px;margin-top:20px;}
.ft__socials>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:var(--whisper);}
.ft__socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ft__socials svg .fill{fill:currentColor;stroke:none;}
.ft__bar{padding:16px 0 20px;align-items:center;}
.ft__payments{display:flex;align-items:center;gap:7px;}
.ft__payment{height:27px;min-width:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:rgba(255,255,255,.08);color:#fff;font:800 11px/1 var(--body);letter-spacing:.02em;}
.ft__payment--visa{font-style:italic;color:#A8C7FF;}
.ft__payment--amex{color:#B9F3FF;}
.ft__payment--mastercard{position:relative;min-width:44px;padding:0;}
.ft__payment--mastercard i{width:16px;height:16px;border-radius:50%;background:#F04438;opacity:.9;}
.ft__payment--mastercard i+i{margin-left:-6px;background:#F6B51B;}

/* Shared shop, product, checkout, blog, article and content-page treatment. */
.shop,.pdp,.checkout,.prose,.posts{position:relative;}
.filters,.pinfo,.summary,.post,.article__body,.prose{border-radius:12px;}
.filters,.pinfo,.summary{background:#fff;border:1px solid var(--rule);box-shadow:0 4px 20px rgba(16,24,40,.045);}
.pinfo{padding:24px 26px;overflow:hidden;}
.pinfo .h1{font-size:clamp(30px,3.1vw,46px);line-height:1.05;overflow-wrap:anywhere;}
.pinfo .price{font-size:21px!important;margin-top:14px!important;}
.pinfo .pline{margin:18px 0;}
.pinfo .stock{margin:14px 0 18px;}
.pinfo .pinfo-accordions{margin-top:20px;}
.pinfo .acc__hd{padding:14px 0;}
.pinfo .acc__bd{padding-bottom:18px;}
.purchase-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.purchase-actions .btn{width:100%;min-width:0;justify-content:center;text-align:center;}
.btn--buy{background:var(--theme-accent);border-color:var(--theme-accent);color:#fff;}
.btn--buy:hover{filter:brightness(.9);}
.shop-main,.product-main{padding-top:10px!important;}
.shop .filters{padding:22px 24px;box-sizing:border-box;}
.shop .listhd .h1{font-size:clamp(34px,3.2vw,48px);line-height:1.02;}
.shop .listhd{margin-bottom:24px;}
.pgrid{gap:14px;}
.shop .pgrid{background:transparent;border:0;}
@media (min-width:1280px){.shop .pgrid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.shophead,.article__hero,.contenthero{background:var(--theme-deep);color:#fff;}
.finput,.fselect,input[type="search"],input[type="email"]{border-radius:8px;}
.sheet,.cart,.drawer{border-radius:16px 0 0 16px;}

.reviews-section{padding:clamp(48px,6vw,76px) 0;}
.reviews-summary{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px;}
.reviews-summary h2{font-size:clamp(30px,4vw,48px);color:#fff;}
.reviews-score{display:grid;grid-template-columns:auto auto;align-items:center;gap:3px 12px;text-align:right;}
.reviews-score strong{grid-row:1/3;font:700 44px/1 var(--display);color:#fff;}
.reviews-score small{color:var(--mist);font-size:11px;}
.review-stars{color:#F6B51B;letter-spacing:.12em;font-size:14px;white-space:nowrap;}
.reviews-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
.review-card{min-height:220px;padding:22px;display:flex;flex-direction:column;border:1px solid var(--rule-dark);border-radius:12px;background:rgba(255,255,255,.035);}
.review-card p{margin:18px 0 24px;color:var(--whisper);font-size:13.5px;line-height:1.6;}
.review-card footer{margin-top:auto;display:flex;flex-direction:column;gap:4px;}
.review-card footer b{color:#fff;font-size:13px;}
.review-card footer span{color:var(--mist);font-size:10px;line-height:1.4;}
.reviews-disclosure{margin:16px 0 0;color:var(--mist);font-size:11px;}

.home-reviews{position:relative;overflow:hidden;padding:clamp(64px,7vw,92px) 0;background:var(--theme-deep);color:#fff;}
.home-reviews .wrap{position:relative;z-index:1;}
.home-reviews__header{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:clamp(32px,6vw,88px);align-items:end;margin-bottom:34px;}
.home-reviews__intro h2{max-width:720px;margin:10px 0 16px;font-size:clamp(36px,4.5vw,60px);line-height:1.02;color:#fff;}
.home-reviews__intro>p:last-child{max-width:600px;margin:0;color:var(--whisper);font-size:16px;line-height:1.65;}
.home-review-overview{display:grid;grid-template-columns:auto minmax(180px,1fr);gap:26px;align-items:center;padding:24px 26px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.055);backdrop-filter:blur(12px);}
.home-review-score{display:flex;min-width:112px;flex-direction:column;align-items:flex-start;}
.home-review-score strong{font:700 54px/1 var(--display);color:#fff;}
.home-review-score .review-stars{margin:8px 0 4px;font-size:13px;}
.home-review-score small{color:var(--mist);font-size:10px;white-space:nowrap;}
.home-rating-breakdown{display:grid;gap:7px;}
.home-rating-row{display:grid;grid-template-columns:36px minmax(90px,1fr) 16px;gap:8px;align-items:center;color:var(--whisper);font-size:9px;}
.home-rating-row>span{white-space:nowrap;}
.home-rating-row i{height:4px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.13);}
.home-rating-row i b{display:block;height:100%;border-radius:inherit;background:#F6B51B;}
.home-rating-row em{font-style:normal;text-align:right;color:var(--mist);}
.home-reviews__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.home-review-card{min-height:280px;padding:26px;display:flex;flex-direction:column;border-radius:16px;background:#fff;color:var(--graphite);box-shadow:0 18px 45px rgba(0,0,0,.16);}
.home-review-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.home-review-quote{font:700 54px/.75 Georgia,serif;color:var(--theme-primary);}
.home-review-card p{margin:24px 0 28px;font-size:15px;line-height:1.65;color:var(--slate);}
.home-review-card footer{display:flex;align-items:center;gap:12px;margin-top:auto;}
.home-review-avatar{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:50%;background:var(--theme-soft);color:var(--theme-primary);font:700 12px/1 var(--body);}
.home-review-card footer>span:last-child{display:flex;min-width:0;flex-direction:column;gap:3px;}
.home-review-card footer b{font-size:13px;color:var(--graphite);}
.home-review-card footer small{font-size:9px;color:var(--mist-text);}
.home-reviews__disclosure{margin:16px 0 0;color:var(--mist);font-size:10px;}

@media (max-width:900px){
  .home-reviews__header{grid-template-columns:1fr;align-items:start;}
  .home-review-overview{max-width:560px;}
  .home-reviews__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-review-card:last-child{grid-column:1/-1;min-height:220px;}
}
@media (max-width:620px){
  .home-reviews{padding:54px 0;}
  .home-reviews__intro h2{font-size:36px;}
  .home-review-overview{grid-template-columns:1fr;padding:20px;}
  .home-review-score{min-width:0;}
  .home-reviews__grid{grid-template-columns:1fr;}
  .home-review-card,.home-review-card:last-child{grid-column:auto;min-height:0;padding:22px;}
  .newsletter-band .sub{gap:4px;}
  .newsletter-band .sub input{padding-inline:10px;}
  .newsletter-band .sub button{padding-inline:14px;letter-spacing:.11em;}
}

.related-section{background:var(--dial);}
.related-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px;}
.related-heading .h2{font-size:clamp(30px,3.4vw,46px);}
.related-controls{display:flex;gap:8px;}
.related-controls button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%;background:#fff;color:var(--graphite);font-size:20px;}
.related-controls button:hover{border-color:var(--theme-primary);color:var(--theme-primary);}
.related-controls button:disabled{opacity:.35;cursor:default;}
.related-viewport{overflow:hidden;scroll-behavior:smooth;}
.related-track{display:flex;gap:14px;}
.related-track .pcard{flex:0 0 calc((100% - 56px)/5);padding:14px;}
.related-track .pcard__art{margin-bottom:14px;}
.related-track .pcard__name{font-size:13.5px;}
.related-track .pcard .price{font-size:13px;}
.related-track .eyebrow{font-size:8.5px;}

/* The merchant brief requires transparent product subjects to occupy exactly
   70% of the available image stage. Keep this final so legacy responsive rules
   cannot enlarge the cutouts on cards or product pages. */
.pcard__art img{
  left:15%!important;
  top:15%!important;
  width:70%!important;
  height:70%!important;
  max-width:70%!important;
  max-height:70%!important;
  object-fit:contain!important;
}
.galmain img{
  left:15%!important;
  top:15%!important;
  width:70%!important;
  height:70%!important;
  max-width:70%!important;
  max-height:70%!important;
  object-fit:contain!important;
}

/* Acceptance pass: compact navigation still keeps a 44px activation area,
   and text colours clear WCAG AA against their actual section surfaces. */
.header-nav a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.ft ul a{min-width:44px;min-height:44px!important;display:inline-flex;align-items:center;}
.shop input[type="number"]{min-width:75px;min-height:44px;}
.header-search{color:#505862;}
.benefit-bar span{color:#59616b;}
.section-heading .eyebrow,.section-heading .text-link{color:#0047a8;}
.pcard__badge{background:#365f51;color:#fff;}
.guide-section .section-heading .eyebrow{color:#d9e6f8!important;}

@media (max-width:1120px){
  .homex-header .hdr__in{grid-template-columns:auto auto minmax(0,1fr);gap:12px;}
  .homex-header .header-nav{display:none;}
  .homex-header .burger{display:grid;place-items:center;width:var(--tap);height:var(--tap);}
  .homex-header .burger span{display:block;width:20px;height:1px;background:var(--graphite);position:relative;}
  .homex-header .burger span::before,.homex-header .burger span::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--graphite);}
  .homex-header .burger span::before{top:-6px;}
  .homex-header .burger span::after{top:6px;}
  .homex-header .hdr__tools{justify-self:end;}
  .homex-navrow .nav{gap:18px;}
  .homex-navrow .nav a{font-size:12px;}
  .homex-cats{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .promo-grid{grid-template-columns:1fr 1fr;}.promo-card--wide{grid-column:1/-1;}
  .guide-grid{grid-template-columns:repeat(2,1fr);}
  .reviews-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .related-track .pcard{flex-basis:calc((100% - 42px)/4);}
}
@media (max-width:820px){
  .hdr__in{height:62px;grid-template-columns:auto auto 1fr;gap:12px;}
  .header-search span{display:none;}
  .homex-navrow{display:none;}
  .campaign-hero{min-height:620px;display:block;padding-top:280px;}
  .campaign-hero__image{object-position:center top;height:280px;}
  .campaign-hero__copy{width:100%;padding:34px 0 68px;background:none;box-shadow:none;}
  .campaign-hero__inner{position:relative;min-height:340px;align-items:flex-end;background:var(--theme-hero);}
  .benefit-bar__grid{grid-template-columns:1fr 1fr;}.benefit-bar__grid>div:nth-child(2){border-right:0;}.benefit-bar__grid>div:nth-child(-n+2){border-bottom:1px solid var(--rule);}
  .homex-cats{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .newsletter-band__inner{align-items:flex-start;flex-direction:column;}.newsletter-band .sub{width:100%;}
  .reviews-grid{grid-template-columns:1fr 1fr;}
  .related-track .pcard{flex-basis:calc((100% - 14px)/2);}
}
@media (max-width:620px){
  :root{--pad:16px;}
  .sdbar__in{font-size:12px;}
  .theme-picker{right:4px;}
  .theme-picker__trigger{width:108px;padding:0 8px;}
  .theme-picker__menu{width:min(310px,calc(100vw - 16px));right:0;}
  .header-search{width:44px;padding:0;justify-content:center;}
  .homex-logo,.logo{font-size:23px;}
  .hdr__act{gap:2px;}
  .campaign-hero{min-height:620px;}
  .campaign-hero__copy h1{font-size:clamp(25px,7.4vw,34px);}
  .campaign-hero__copy>p:not(.eyebrow){font-size:15px;}
  .campaign-hero__actions{grid-template-columns:1fr;}
  .benefit-bar__grid{grid-template-columns:1fr;}.benefit-bar__grid>div{border-right:0;border-bottom:1px solid var(--rule);}
  .section-heading{align-items:flex-start;flex-direction:column;margin-bottom:24px;}.section-heading .text-link{margin-top:-12px;}
  .homex-cats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .homex-cat{height:235px!important;}.homex-cat__copy{padding:10px 12px;}.homex-cat__copy b{font-size:14px;}
  .promo-grid,.guide-grid{grid-template-columns:1fr;}.promo-card--wide{grid-column:auto;}.promo-card{min-height:330px;}
  .shop .listhd{gap:14px;margin-bottom:18px;}
  .shop .listhd>div:first-child{width:100%;}
  .shop .list-controls{width:100%;}
  .shop .list-controls>*{flex:1 1 0;min-width:0;}
  .shop .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .shop .pcard{padding:10px;display:flex;flex-direction:column;}
  .shop .pcard__art{margin-bottom:10px;}
  .shop .pcard .eyebrow{font-size:8px;line-height:1.35;}
  .shop .pcard__name{font-size:13px;line-height:1.3;margin:4px 0 8px;}
  .shop .pcard .price{font-size:13px;margin-top:auto;}
  .shop .sk-product-card{padding:10px;gap:9px;}
  .pinfo{padding:20px 18px;}
  .pinfo .h1{font-size:32px;}
  .reviews-summary{align-items:flex-start;flex-direction:column;}
  .reviews-grid{grid-template-columns:1fr;}
  .review-card{min-height:0;}
  .related-track .pcard{flex-basis:84%;}
  .ft__cols{grid-template-columns:1fr 1fr;}.ft__col:first-child{grid-column:1/-1;}
}