/* ============================================================
   ONELUMES - custom Shopify theme
   Concept: "the lamp turns on" - warmth is the accent.
   ============================================================ */

:root{
  /* ground */
  --paper:        #F5F2EC;
  --paper-warm:   #EFE9DE;
  --paper-lit:    #FFFDF8;
  --ink:          #1A1815;
  --ink-soft:     #6B655C;
  --ink-faint:    #6D685F;
  --line:         #E2DACB;
  --line-strong:  #CDC2AC;

  /* the light itself */
  --ember:        #B2521F;
  --ember-deep:   #7A3612;
  --ember-lit:    #E89A4C;
  --glow: radial-gradient(closest-side, rgba(232,154,76,.42), rgba(232,154,76,.10) 55%, transparent 78%);

  /* type */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body:    "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --step--1: clamp(.8125rem, .78rem + .16vw, .875rem);
  --step-0:  clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --step-2:  clamp(1.5rem, 1.3rem + .9vw, 2.125rem);
  --step-3:  clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --step-4:  clamp(2.75rem, 1.6rem + 5vw, 6rem);

  /* rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --bleed:  clamp(1.25rem, 4vw, 4rem);
  --wide:   1560px;
  --mid:    1180px;
  --narrow: 720px;
  --band:   clamp(4.5rem, 9vw, 9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --z-header:   40;
  --z-cartbar:  45;
  --z-drawer:   60;
  --z-popup:    70;
  --z-lightbox: 80;
  --z-skip:     90;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:380;
  font-optical-sizing:auto;
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
h1,.h1{ font-size:var(--step-3); }
h2,.h2{ font-size:var(--step-2); }
h3,.h3{ font-size:var(--step-1); letter-spacing:-.01em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:var(--z-skip);
  background:var(--ink); color:var(--paper-lit); padding:.75rem 1.25rem; border-radius:0 0 .5rem 0;
}
.skip-link:focus{ left:0; }

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- layout primitives ---------- */
.wrap{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--bleed); }
.wrap--mid{ max-width:var(--mid); }
.wrap--narrow{ max-width:var(--narrow); }
.band{ padding-block:var(--band); }
.band--tight{ padding-block:calc(var(--band) * .55); }

/* ---------- section hierarchy ----------
   Every H2 rendering at one size is what makes a long page read flat.
   Editorial chapters get the large voice; merchandising rows get the small
   one, so the eye can tell a statement from a shelf. */
.band--feature :is(h2,.h2){ font-size:var(--step-3); letter-spacing:-.028em; }
.band--feature .lede{ font-size:var(--step-1); }
.band--row :is(h2,.h2){ font-size:clamp(1.25rem,1.08rem + .58vw,1.6875rem); letter-spacing:-.012em; }
.band--row .eyebrow{ margin-bottom:.5rem; }
.band--row .section-head{ margin-bottom:clamp(1.25rem,2vw,2rem); }

/* a chapter sitting on its own ground, so the page breaks into blocks
   instead of one uninterrupted column of cream */
.band--sand{ background:var(--paper-warm); }

/* Rows sharing the sand ground read as ONE chapter, not two stacked sections:
   collapse the doubled padding and separate them with a hairline instead.
   Sections are wrapped in .shopify-section, so adjacency is tested there. */
.shopify-section:has(> .band--sand) + .shopify-section:has(> .band--sand) > .band--sand{
  padding-top:0;
}
.shopify-section:has(> .band--sand) + .shopify-section:has(> .band--sand) > .band--sand > .wrap::before{
  content:""; display:block; height:1px; background:var(--line-strong);
  margin-bottom:calc(var(--band) * .55);
}

.eyebrow{
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1rem;
}
.lede{ font-size:var(--step-1); color:var(--ink-soft); line-height:1.5; max-width:46ch; }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:clamp(1.75rem,3vw,3rem); flex-wrap:wrap;
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--paper-lit); --btn-line:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.8125rem 1.75rem;
  border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-line);
  font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  /* all-caps labels have no descenders, so the inherited line-height parks the
     glyphs low in the box. Trim the leading and nudge by the descent share. */
  line-height:1;
  padding-block:calc(.8125rem + .5px) calc(.8125rem - .5px);
  cursor:pointer; position:relative; overflow:hidden;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(232,154,76,.55), transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{ background:var(--ember-deep); border-color:var(--ember-deep); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-line:var(--line-strong); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper-lit); border-color:var(--ink); }
.btn--light{ --btn-bg:var(--paper-lit); --btn-fg:var(--ink); --btn-line:var(--paper-lit); }
.btn--light:hover{ background:var(--ember-lit); border-color:var(--ember-lit); color:var(--ink); }
.btn--full{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn[disabled]::after{ display:none; }

.link-quiet{
  font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  border-bottom:1px solid var(--line-strong); padding-bottom:.3rem;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.link-quiet:hover{ color:var(--ember); border-color:var(--ember); }

/* ---------- announcement marquee ---------- */
.announce{
  background:var(--ink); color:var(--paper-lit);
  font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  overflow:hidden; padding-block:.6875rem;
  position:relative; z-index:0; isolation:isolate; contain:paint;
}
.marquee{ display:flex; width:max-content; will-change:transform; animation:slide var(--speed,34s) linear infinite; }
.marquee:hover{ animation-play-state:paused; }
.marquee__row{ display:flex; align-items:center; gap:3.5rem; padding-right:3.5rem; }
.marquee__dot{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; flex:none; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee{ animation:none; } }

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:var(--z-header);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.header.is-stuck{ border-bottom-color:var(--line); }
.header__bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; min-height:72px;
}
.header__lead{ display:flex; align-items:center; gap:.25rem; }
.header__logo{ font-family:var(--display); font-size:1.0625rem; letter-spacing:.24em; text-transform:uppercase; }
.header__logo img{ max-height:34px; width:auto; }
.header__nav{ display:none; justify-content:center; align-items:center; gap:2rem; }
/* the submenu wrapper must behave exactly like its plain <a> siblings, or the
   link inside stays inline and its vertical padding is ignored (3px drop). */
.header__has-sub{ display:flex; align-items:center; }
.header__has-sub > a{ display:flex; align-items:center; }
.header__nav a{
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  position:relative; padding-block:.25rem;
}
.header__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ember);
  transition:right .35s var(--ease);
}
.header__nav a:hover::after{ right:0; }
.header__utils{ display:flex; align-items:center; justify-content:flex-end; gap:.25rem; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.icon-btn:hover{ background:var(--paper-warm); color:var(--ember); }
.cart-count{
  font-size:.625rem; font-weight:700; min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ember); color:var(--paper-lit); border-radius:999px;
  margin-left:-.5rem; align-self:flex-start; margin-top:.5rem;
}
.cart-count[hidden]{ display:none; }
@media (min-width:1000px){
  .header__nav{ display:flex; }
  .header__burger{ display:none; }
}
.header__mobile{ border-top:1px solid var(--line); display:none; padding-block:1rem 1.5rem; }
.header__mobile.is-open{ display:block; }
.header__mobile a{ display:block; padding:.75rem 0; font-size:var(--step-1); font-family:var(--display); }

/* ---------- hero ---------- */
.hero{ position:relative; isolation:isolate; min-height:clamp(480px,78vh,860px); display:grid; }
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(255,214,160,.20), transparent 60%),
    linear-gradient(to bottom, rgba(20,18,15,.34), rgba(20,18,15,.10) 40%, rgba(20,18,15,.52));
}
.hero__inner{
  align-self:center; text-align:center; color:var(--paper-lit);
  display:grid; justify-items:center; gap:1.25rem; padding-block:clamp(4rem,12vh,8rem);
}
.hero__title{ font-size:var(--step-4); color:inherit; max-width:16ch; }
.hero__sub{ font-size:var(--step-1); max-width:38ch; color:rgba(255,253,248,.86); margin:0; }
.hero--left .hero__inner{ text-align:left; justify-items:start; }
.hero--left .hero__title{ max-width:20ch; }

/* staged entrance */
.rise{ opacity:0; transform:translateY(18px); }
.is-in .rise{ animation:rise .9s var(--ease) forwards; }
.is-in .rise:nth-child(2){ animation-delay:.09s; }
.is-in .rise:nth-child(3){ animation-delay:.18s; }
.is-in .rise:nth-child(4){ animation-delay:.27s; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1; transform:none; }
  .is-in .rise{ animation:none; }
}

/* ---------- text marquee band ---------- */
.ribbon{
  background:var(--paper-warm); border-block:1px solid var(--line);
  padding-block:clamp(1.25rem,2.5vw,2rem); overflow:hidden;
  position:relative; z-index:0; isolation:isolate; contain:paint;
}
.ribbon .marquee__row{ gap:2.5rem; padding-right:2.5rem; }
.ribbon__item{ font-family:var(--display); font-size:var(--step-2); color:var(--ink); white-space:nowrap; }
.ribbon__item em{ font-style:normal; color:var(--ember); }

/* ---------- product grid ---------- */
.grid{ display:grid; gap:clamp(1.5rem,2.6vw,2.75rem) clamp(1rem,2vw,2rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:760px){ .grid--4{ grid-template-columns:repeat(4,1fr); } }

.card{ position:relative; display:flex; flex-direction:column; }
/* the quick-add sits over the picture, not over the price */
.card__frame{ position:relative; display:block; }
.card__media{
  position:relative; display:block; overflow:hidden;
  border-radius:2px; background:var(--paper-warm);
  aspect-ratio:1/1;
}
/* the lamp turns on */
.card__media::before{
  content:""; position:absolute; inset:-18%; z-index:0;
  background:var(--glow); opacity:0; transform:scale(.7);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events:none;
}
.card:hover .card__media::before, .card:focus-within .card__media::before{ opacity:1; transform:scale(1); }
.card__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  transition:opacity .5s var(--ease), transform .8s var(--ease), filter .55s var(--ease);
}
.card__img--alt{ opacity:0; }
.card:hover .card__img--main{ opacity:0; }
.card:hover .card__img--alt{ opacity:1; }
.card:hover .card__img{ transform:scale(1.035); filter:saturate(1.06) brightness(1.04); }
.card--single:hover .card__img--main{ opacity:1; }

.card__flag{
  position:absolute; z-index:3; top:.75rem; left:.75rem;
  font-size:.625rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:var(--paper-lit); color:var(--ink); padding:.35rem .625rem; border-radius:999px;
}
.card__flag--out{ background:var(--ink); color:var(--paper-lit); }

.card__quick{
  position:absolute; z-index:3; left:.5rem; right:.5rem; bottom:.5rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card__quick, .card:focus-within .card__quick{ opacity:1; transform:none; }
@media (hover:none){ .card__quick{ opacity:1; transform:none; } }

.card__body{ padding-top:.9375rem; text-align:center; display:grid; gap:.3125rem; }
.card__name{ font-family:var(--display); font-size:1.0625rem; letter-spacing:-.005em; }
.card__name a::after{ content:""; position:absolute; inset:0; z-index:2; }
.price{ display:flex; gap:.5rem; justify-content:center; align-items:baseline; font-size:var(--step--1); }
.price__was{ color:var(--ink-faint); text-decoration:line-through; }
/* the saving stated as a number, not left for the shopper to subtract */
.price__save{
  font-size:.625rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ember-deep); background:rgba(178,82,31,.10);
  border-radius:999px; padding:.3rem .6rem; line-height:1; white-space:nowrap;
}
.price__now--sale{ color:var(--ember); font-weight:600; }

/* ---------- split image + text ---------- */
.split{ display:grid; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:1.15fr .85fr; }
  .split--flip .split__media{ order:2; }
}
.split__media{ position:relative; overflow:hidden; border-radius:2px; }
.split__media img{ width:100%; aspect-ratio:5/4; object-fit:cover; }
.split__body{ display:grid; gap:1.25rem; justify-items:start; }

/* ---------- press ---------- */
.press{ background:var(--paper-warm); border-block:1px solid var(--line); text-align:center; }
.press__quote{ font-family:var(--display); font-size:var(--step-2); max-width:22ch; margin-inline:auto; line-height:1.2; }
.press__logos{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,5vw,4rem); justify-content:center; align-items:center; margin-top:2.5rem; }
.press__logos img{ max-height:26px; width:auto; opacity:.5; filter:grayscale(1); transition:opacity .3s var(--ease); }
.press__logos img:hover{ opacity:.9; }
.press__logos span{
  font-family:var(--display); font-size:1.125rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- slideshow / lookbook ---------- */
.slides{ position:relative; }
.slides__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
}
.slides__track::-webkit-scrollbar{ display:none; }
.slide{ flex:0 0 100%; scroll-snap-align:start; position:relative; isolation:isolate; }
.slide img{ width:100%; height:clamp(420px,62vh,700px); object-fit:cover; }
.slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,18,15,.55), rgba(20,18,15,.05) 60%);
}
.slide__body{
  position:absolute; z-index:2; left:var(--bleed); bottom:clamp(2rem,6vw,4rem);
  max-width:30ch; color:var(--paper-lit); display:grid; gap:1rem; justify-items:start;
}
.slides__dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.5rem; }

/* ---------- quote / testimonials ---------- */
.pull{ text-align:center; }
.pull__mark{ font-family:var(--display); font-size:var(--step-3); color:var(--ember); line-height:1; }
.pull__text{ font-family:var(--display); font-size:var(--step-2); line-height:1.3; max-width:26ch; margin-inline:auto; }

.voices{ display:flex; gap:clamp(1rem,2vw,1.75rem); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; scrollbar-width:none; }
.voices::-webkit-scrollbar{ display:none; }
.voice{
  flex:0 0 min(88vw,380px); scroll-snap-align:center;
  background:var(--paper-lit); border:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2.25rem); border-radius:2px;
  display:grid; gap:1.125rem; align-content:start;
}
.voice__text{ font-size:var(--step-0); color:var(--ink); line-height:1.6; }
.voice__who{ display:flex; align-items:center; gap:.75rem; }
.voice__avatar{ width:38px; height:38px; border-radius:999px; object-fit:cover; background:var(--paper-warm); }
.voice__name{ font-weight:600; font-size:var(--step--1); }
.voice__role{ font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------- collection tiles ---------- */
.tiles{ display:grid; gap:2px; grid-template-columns:1fr; }
@media (min-width:760px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
.tile{ position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; min-height:clamp(260px,34vw,420px); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1s var(--ease); }
.tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(20,18,15,.34); transition:background-color .4s var(--ease); }
.tile:hover img{ transform:scale(1.06); }
.tile:hover::after{ background:rgba(122,54,18,.36); }
.tile__label{ color:var(--paper-lit); text-align:center; display:grid; gap:.375rem; }
.tile__name{ font-family:var(--display); font-size:var(--step-2); }
.tile__count{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }

/* ---------- assurances ---------- */
.assure{ display:grid; gap:clamp(1.75rem,3vw,2.5rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .assure{ grid-template-columns:repeat(4,1fr); } }
.assure__item{ display:grid; gap:.5rem; justify-items:start; }
.assure__item svg{ width:22px; height:22px; stroke:var(--ember); }
.assure__title{ font-weight:600; font-size:var(--step-0); }
.assure__text{ font-size:var(--step--1); color:var(--ink-soft); }

/* ---------- newsletter ---------- */
.signup{ background:var(--ink); color:var(--paper-lit); position:relative; overflow:hidden; }
.signup::before{
  content:""; position:absolute; width:70vw; height:70vw; left:50%; top:-30%;
  transform:translateX(-50%); background:var(--glow); opacity:.55; pointer-events:none;
}
.signup__inner{ position:relative; text-align:center; display:grid; gap:1.25rem; justify-items:center; }
.signup h2{ color:inherit; }
.signup p{ color:rgba(255,253,248,.7); max-width:44ch; }
.field{ display:flex; gap:.5rem; width:min(100%,440px); flex-wrap:wrap; }
.field input{
  flex:1 1 200px; min-height:46px; padding:.75rem 1.125rem;
  background:transparent; color:inherit;
  border:1px solid rgba(255,253,248,.28); border-radius:999px;
  font:inherit; font-size:var(--step--1);
}
.field input::placeholder{ color:rgba(255,253,248,.45); }
.field input:focus{ outline:2px solid var(--ember-lit); outline-offset:2px; }
.form__note{ font-size:var(--step--1); }
.form__note--error{ color:var(--ember-lit); }

/* ---------- footer ---------- */
.footer{ background:var(--paper-warm); border-top:1px solid var(--line); }
.footer__mark{
  font-family:var(--display); text-align:center;
  font-size:clamp(3rem,15vw,11rem); line-height:.9; letter-spacing:-.04em;
  color:var(--line-strong); padding-block:clamp(2rem,5vw,4rem);
  user-select:none;
}
.footer__cols{ display:grid; gap:2.5rem; grid-template-columns:repeat(2,1fr); padding-bottom:3rem; }
@media (min-width:860px){ .footer__cols{ grid-template-columns:repeat(4,1fr); } }
.footer__title{ font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.footer__cols a{ display:block; padding:.3125rem 0; font-size:var(--step--1); color:var(--ink-soft); transition:color .2s var(--ease); }
.footer__cols a:hover{ color:var(--ember); }
.footer__base{
  border-top:1px solid var(--line); padding-block:1.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.6875rem; letter-spacing:.06em; color:var(--ink-faint);
}

/* ---------- product page ---------- */
/* Photos run down the left edge of the viewport, edge to edge, in the
   portrait proportion they were shot in; the buy column sits sticky on the
   right and reads straight down. */
.pdp-page{ padding-block:0 var(--band); }
.pdp{ display:grid; gap:0; }
.pdp__gallery{ display:grid; gap:0; }
.pdp__gallery img{ width:100%; height:auto; display:block; background:var(--paper-warm); }  /* native proportion: no crop, no upscale of a crop */
.pdp__shot[hidden]{ display:none; }
@media (max-width:899px){
  .pdp__stage{ min-width:0; }
  .pdp__gallery{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
  .pdp__gallery::-webkit-scrollbar{ display:none; }
  .pdp__gallery .pdp__shot{ flex:0 0 100%; aspect-ratio:1; scroll-snap-align:start; scroll-snap-stop:always; }
  .pdp__gallery img{ height:100%; object-fit:contain; }
}
.pdp__info{
  display:grid; gap:1.125rem; align-content:start;
  padding:clamp(1.5rem,3vw,2.5rem) var(--bleed) 0;
}
.pdp__info .crumbs{ margin-bottom:.25rem; }
.pdp__info > .eyebrow{ margin:0; }
.pdp__title{ font-size:clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem); letter-spacing:-.02em; margin:-.25rem 0 0; }
.pdp__price{ font-size:var(--step-1); display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.pdp__info form{ display:grid; gap:1rem; }
.buy{ display:flex; gap:.625rem; align-items:stretch; }
.buy .qty{ flex:none; }
.buy__btn{ flex:1; min-width:0; }
@media (min-width:900px){
  .pdp{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start; }
  .pdp__info{
    position:sticky; top:96px;
    padding:clamp(1.5rem,2.5vw,2.5rem) var(--bleed) clamp(2rem,4vw,4rem) clamp(2.5rem,5vw,5.5rem);
    max-width:calc(34rem + var(--bleed) + clamp(2.5rem,5vw,5.5rem));
  }
}
.pdp__desc{ color:var(--ink-soft); }
/* the buy column reads straight down: name, price, stock, choices, button.
   Everything explanatory drops below into the tabs, so nothing competes. */
.pdp__promise{
  margin:-.5rem 0 0; font-size:var(--step--1); color:var(--ink-soft);
  display:flex; align-items:center; gap:.5rem;
}
.pdp__promise::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--ember); flex:none;
}
.pdp__desc a{ color:var(--ember); text-decoration:underline; }
.page__body{ color:var(--ink-soft); }
.page__body a{ color:var(--ember); text-decoration:underline; }
.opt{ display:grid; gap:.625rem; }
.opt__label{ font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.opt select{
  min-height:46px; padding:.6rem 1rem; font:inherit; font-size:var(--step--1);
  border:1px solid var(--line-strong); border-radius:999px; background:var(--paper-lit); color:var(--ink);
}
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; }
.qty button{ width:44px; height:44px; flex:none; display:grid; place-items:center; }
.qty button:hover{ color:var(--ember); }
/* the generic input[type="number"] rule below sets width:100%; the stepper
   field must win that specificity fight or it swallows the add-to-cart button */
.qty input[type="number"]{
  width:48px; min-width:0; min-height:0; flex:none; padding:0; text-align:center;
  border:0; border-radius:0; background:transparent; font:inherit;
  -moz-appearance:textfield; appearance:textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pdp__meta{ border-top:1px solid var(--line); padding-top:1.25rem; display:grid; gap:.75rem; }
.pdp__meta details summary{ cursor:pointer; font-weight:600; padding:.5rem 0; list-style:none; display:flex; justify-content:space-between; }
.pdp__meta details summary::-webkit-details-marker{ display:none; }
.pdp__meta details summary::after{ content:"+"; color:var(--ember); }
.pdp__meta details[open] summary::after{ content:"\2013"; }
.pdp__meta details p{ font-size:var(--step--1); color:var(--ink-soft); padding-bottom:.75rem; }

/* ---------- collection / list ---------- */
.page-head{ text-align:center; display:grid; gap:.75rem; justify-items:center; }
.pagination{ display:flex; gap:1rem; justify-content:center; margin-top:3rem; font-size:var(--step--1); }
.pagination a,.pagination span{ padding:.5rem .75rem; }
.pagination [aria-current]{ color:var(--ember); font-weight:700; }

/* ---------- cart ---------- */
.cart__row{ display:grid; grid-template-columns:88px 1fr auto; gap:1rem; padding-block:1.5rem; border-bottom:1px solid var(--line); align-items:center; }
.cart__row img{ width:88px; aspect-ratio:1/1; object-fit:cover; background:var(--paper-warm); }
.cart__foot{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; padding-top:1.5rem; }
.cart__total{ font-family:var(--display); font-size:var(--step-2); }
.empty{ text-align:center; display:grid; gap:1.5rem; justify-items:center; padding-block:var(--band); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* ==== v1.1 additions ==== */

/* ---------- rich text ---------- */
.rte{ color:var(--ink-soft); line-height:1.7; }
.rte h2,.rte h3{ color:var(--ink); margin:2rem 0 .75rem; }
.rte p{ margin:0 0 1em; }
.rte a{ color:var(--ember); text-decoration:underline; text-underline-offset:2px; }
.rte ul,.rte ol{ margin:0 0 1em 1.25rem; list-style:revert; }
.rte li{ margin-bottom:.35em; }
.rte img{ margin:1.5rem 0; border-radius:2px; }
.rte blockquote{
  margin:1.75rem 0; padding-left:1.25rem;
  border-left:2px solid var(--ember);
  font-family:var(--display); font-size:var(--step-1); color:var(--ink);
}
.rte--small{ font-size:var(--step--1); }

/* ---------- forms ---------- */
.auth{ display:grid; gap:1.125rem; }
.fieldset{ display:grid; gap:.5rem; }
.fieldset--split{ grid-template-columns:1fr; gap:1.125rem; }
@media (min-width:600px){ .fieldset--split{ grid-template-columns:1fr 1fr; } }
.fieldset--split > div{ display:grid; gap:.5rem; }

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"], textarea, select{
  width:100%; min-height:46px; padding:.7rem 1rem;
  font:inherit; font-size:var(--step--1); color:var(--ink);
  background:var(--paper-lit);
  border:1px solid var(--line-strong); border-radius:8px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea{ min-height:auto; resize:vertical; line-height:1.6; }
input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible){
  outline:none; border-color:var(--ember);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ember) 16%, transparent);
}
input::placeholder, textarea::placeholder{ color:var(--ink-faint); }

.checkbox{ display:flex; gap:.625rem; align-items:flex-start; cursor:pointer; font-size:var(--step--1); }
.checkbox input{ width:18px; height:18px; min-height:0; margin-top:.15rem; accent-color:var(--ember); flex:none; }

.auth__links{ display:flex; gap:1.25rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem; }
.auth__links .link-quiet{ background:none; border-bottom:1px solid var(--line-strong); cursor:pointer; }

.notice{
  padding:.875rem 1.125rem; border-radius:8px;
  background:var(--paper-warm); border:1px solid var(--line-strong);
  font-size:var(--step--1);
}
.notice--error{
  background:color-mix(in srgb, var(--ember) 8%, var(--paper-lit));
  border-color:color-mix(in srgb, var(--ember) 35%, var(--line));
  color:var(--ember-deep);
}
.notice ul{ margin:0; list-style:none; }

/* ---------- tables ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; font-size:var(--step--1); min-width:520px; }
.table th, .table td{ text-align:left; padding:.875rem 1rem; border-bottom:1px solid var(--line); }
.table th{
  font-size:.6875rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}
.table tfoot td{ border-bottom:0; }

/* ---------- account ---------- */
.account__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:1.5rem; flex-wrap:wrap;
}
.account__actions{ display:flex; gap:.625rem; flex-wrap:wrap; }
.order__addresses{
  display:grid; gap:2rem; grid-template-columns:1fr; margin:2.5rem 0;
  font-size:var(--step--1); color:var(--ink-soft);
}
@media (min-width:700px){ .order__addresses{ grid-template-columns:1fr 1fr; } }
.address-card{
  border:1px solid var(--line); border-radius:2px;
  padding:1.5rem; margin-bottom:1rem;
  font-size:var(--step--1); color:var(--ink-soft);
}
.address-card__actions{ display:flex; gap:1.25rem; align-items:center; margin-top:1rem; flex-wrap:wrap; }
.address-card__actions summary{ cursor:pointer; list-style:none; display:inline-block; }
.address-card__actions summary::-webkit-details-marker{ display:none; }
.address-card__actions form{ display:inline; }
.address-card__actions .link-quiet{ background:none; cursor:pointer; }

/* ---------- breadcrumbs ---------- */
.crumbs{ margin-bottom:1.5rem; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; color:var(--ink-faint); }
.crumbs li + li::before{ content:"/"; margin-right:.5rem; color:var(--line-strong); }
.crumbs a:hover{ color:var(--ember); }

/* ---------- toolbar / filters ---------- */
.toolbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap; padding-bottom:1.25rem;
  border-bottom:1px solid var(--line); margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.toolbar__left{ display:flex; align-items:center; gap:1rem; }
.toolbar__count{ font-size:var(--step--1); color:var(--ink-soft); }
.toolbar__sort{ display:flex; align-items:center; gap:.625rem; }
.toolbar__sort select{ width:auto; min-width:180px; border-radius:999px; }
.toolbar__sort .opt__label{ white-space:nowrap; }

.filters{
  flex-basis:100%; display:grid; align-items:start;
  gap:1.25rem clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  padding-top:1.5rem;
}
.filters__group summary{
  cursor:pointer; list-style:none; padding:0 0 .625rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid var(--line);
}
.filters__group summary::-webkit-details-marker{ display:none; }
.filters__group summary::after{ content:"+"; color:var(--ember); font-weight:400; line-height:1; }
.filters__group[open] summary::after{ content:"\2013"; }
.filters__list{ display:grid; gap:.5rem; padding:.875rem 0 0; }
.filters__count{ color:var(--ink-faint); }
.filters > [data-clear-filters]{ grid-column:1 / -1; justify-self:start; }

/* ---------- search / predictive ---------- */
.searchbar{ position:relative; display:flex; gap:.5rem; width:min(100%,560px); margin-inline:auto; }
.searchbar input[type="search"]{ border-radius:999px; }
.header__search{ padding-block:1rem 1.25rem; border-top:1px solid var(--line); }
.predictive{
  position:absolute; z-index:30; top:calc(100% + .5rem); left:0; right:0;
  background:var(--paper-lit); border:1px solid var(--line);
  border-radius:8px; box-shadow:0 18px 40px -24px rgba(26,24,21,.45);
  max-height:min(60vh,440px); overflow-y:auto; text-align:left;
}
.predictive__group{ padding:.75rem; border-bottom:1px solid var(--line-hairline, var(--line)); }
.predictive__group:last-child{ border-bottom:0; }
.predictive__label{
  font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 .5rem .5rem;
}
.predictive__item{
  display:flex; gap:.75rem; align-items:center;
  padding:.5rem; border-radius:6px;
  transition:background-color .15s var(--ease);
}
.predictive__item:hover, .predictive__item:focus-visible{ background:var(--paper-warm); }
.predictive__item img{ width:48px; height:48px; object-fit:cover; border-radius:2px; flex:none; }
.predictive__item > span{ display:grid; gap:.15rem; }
.predictive__title{ font-size:var(--step--1); color:var(--ink); }
.predictive__price{ font-size:.75rem; color:var(--ink-soft); }
.predictive__empty{ padding:1.25rem; font-size:var(--step--1); color:var(--ink-soft); text-align:center; }

/* ---------- header submenu ---------- */
.header__has-sub{ position:relative; }
.submenu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,6px);
  min-width:200px; padding:.75rem; margin-top:.75rem;
  background:var(--paper-lit); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 18px 40px -24px rgba(26,24,21,.45);
  opacity:0; visibility:hidden;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.header__has-sub:hover .submenu,
.header__has-sub:focus-within .submenu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.submenu a{ display:block; padding:.5rem .625rem; border-radius:6px; text-transform:none; letter-spacing:0; font-size:var(--step--1); }
.submenu a::after{ display:none; }
.submenu a:hover{ background:var(--paper-warm); color:var(--ember); }
.header__mobile-sub{ padding-left:1.25rem !important; font-size:var(--step-0) !important; font-family:var(--body) !important; color:var(--ink-soft); }

/* ---------- cart drawer ---------- */
.drawer{ position:fixed; inset:0; z-index:var(--z-drawer); }
.drawer[hidden]{ display:none; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(20,18,15,.45); animation:fade .3s var(--ease); }
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px,100%); display:flex; flex-direction:column;
  background:var(--paper); box-shadow:-24px 0 60px -30px rgba(26,24,21,.6);
  animation:slidein .35s var(--ease);
}
@keyframes fade{ from{ opacity:0; } }
@keyframes slidein{ from{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .drawer__scrim, .drawer__panel{ animation:none; }
}
.drawer__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.25rem var(--gutter, 1.5rem); border-bottom:1px solid var(--line);
}
.drawer__body{ flex:1; overflow-y:auto; padding:0 1.5rem; }
.drawer__items{ display:grid; }
.drawer__item{ display:flex; gap:1rem; padding-block:1.25rem; border-bottom:1px solid var(--line); }
.drawer__thumb{ flex:none; width:74px; }
.drawer__thumb img{ width:74px; aspect-ratio:1/1; object-fit:cover; background:var(--paper-warm); }
.drawer__meta{ flex:1; display:grid; gap:.375rem; align-content:start; }
.drawer__name{ font-family:var(--display); font-size:1rem; }
.drawer__row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.drawer__foot{ padding:1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:grid; gap:.875rem; background:var(--paper); }
.drawer__foot .link-quiet{ justify-self:center; }
.qty--sm button{ width:34px; height:34px; }
.qty--sm input{ width:36px; }

/* ---------- stock ---------- */
.stock{ display:flex; align-items:center; gap:.5rem; font-size:var(--step--1); color:var(--ink-soft); margin:0; }
.stock__dot{ width:7px; height:7px; border-radius:50%; background:#3F7D4E; flex:none; }
.stock__dot--low{ background:var(--ember-lit); }
.stock__dot--out{ background:var(--ink-faint); }

/* ---------- share / social ---------- */
.share{ display:flex; align-items:center; gap:.25rem; padding-top:1.25rem; border-top:1px solid var(--line); flex-wrap:wrap; }
.share .eyebrow{ margin-right:.5rem; }
.social{ display:flex; gap:.25rem; margin-left:-.5rem; flex-wrap:wrap; }

/* ---------- localization ---------- */
.locale__form{ display:flex; gap:.5rem; flex-wrap:wrap; }
.locale select{
  width:auto; min-height:38px; padding:.35rem .75rem;
  font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; background:transparent; border-color:var(--line-strong);
}
.header__mobile .locale{ margin-top:1.25rem; }

/* ---------- payment icons ---------- */
.paytypes{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.paytypes__icon{ height:22px; width:auto; opacity:.65; }

/* ---------- tags ---------- */
.tagbar{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-top:1rem; }
.tagbar__item{
  padding:.4rem .875rem; border-radius:999px;
  border:1px solid var(--line-strong);
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tagbar__item:hover{ border-color:var(--ember); color:var(--ember); }
.tagbar__item.is-active{ background:var(--ink); color:var(--paper-lit); border-color:var(--ink); }

/* ---------- article / blog cards ---------- */
.card__meta{ font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.card__excerpt{ font-size:var(--step--1); color:var(--ink-soft); line-height:1.6; margin:0; }
.comments{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); display:grid; gap:1.5rem; }
.comment{ padding-bottom:1.25rem; border-bottom:1px solid var(--line); display:grid; gap:.5rem; }

/* ---------- FAQ ---------- */
.faq{ display:grid; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  cursor:pointer; list-style:none; padding:1.25rem 0;
  font-family:var(--display); font-size:var(--step-1);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; color:var(--ember); font-family:var(--body); flex:none; }
.faq__item[open] summary::after{ content:"\2013"; }
.faq__item .rte{ padding-bottom:1.25rem; }

/* ---------- video ---------- */
.videobox{ position:relative; overflow:hidden; border-radius:2px; background:var(--paper-warm); }
.videobox video, .videobox iframe{ width:100%; aspect-ratio:16/9; height:auto; display:block; border:0; }

/* ---------- password gate ---------- */
.gate{
  min-height:100dvh; display:grid;
  background:var(--ink); color:var(--paper-lit);
  position:relative; overflow:hidden;
}
.gate::before{
  content:""; position:absolute; width:90vw; height:90vw; left:25%; top:-30%;
  transform:translateX(-50%); background:var(--glow); opacity:.45; pointer-events:none;
}
/* copy on the left, one big photograph on the right; on phones the photo goes first */
.gate__grid{ position:relative; display:grid; min-height:100dvh; }
.gate__copy{
  display:grid; gap:1.25rem; align-content:center; justify-items:start;
  padding:clamp(2rem,6vw,5rem) var(--bleed); max-width:38rem;
}
.gate__eyebrow{
  margin:0; font-size:.6875rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ember-lit); display:flex; align-items:center; gap:.6rem;
}
.gate__eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ember-lit); box-shadow:0 0 18px 4px rgba(232,154,76,.55); }
.gate__logo{
  font-family:var(--display); font-size:var(--step-1); font-weight:400;
  letter-spacing:.28em; text-transform:uppercase; color:inherit; margin:0;
}
.gate__headline{ font-family:var(--display); font-size:var(--step-4); line-height:.98; letter-spacing:-.02em; margin:0; max-width:12ch; }
.gate__lede{ color:rgba(255,253,248,.72); max-width:44ch; margin:0; }
.gate__series{ list-style:none; margin:.25rem 0 0; padding:0; display:grid; gap:.75rem; max-width:44ch; }
.gate__series li{ display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; align-items:baseline; font-size:var(--step--1); color:rgba(255,253,248,.72); }
.gate__series strong{ font-family:var(--display); font-size:var(--step-1); font-weight:400; color:var(--paper-lit); }
.gate__signup{ width:100%; max-width:30rem; margin-top:.5rem; }
.gate .field input{
  background:transparent; color:inherit;
  border-color:rgba(255,253,248,.28); border-radius:999px;
}
.gate .field input::placeholder{ color:rgba(255,253,248,.45); }
.gate__note{ grid-column:1 / -1; }
.gate__pw{ margin-top:1rem; font-size:var(--step--1); color:rgba(255,253,248,.55); max-width:30rem; width:100%; }
.gate__pw summary{ cursor:pointer; list-style:none; text-decoration:underline; text-underline-offset:3px; }
.gate__pw summary::-webkit-details-marker{ display:none; }
.gate__pw[open] summary{ margin-bottom:.75rem; }
.gate__enter{ color:var(--paper-lit); border-color:rgba(255,253,248,.35); }
.gate__admin{ font-size:.6875rem; letter-spacing:.06em; color:rgba(255,253,248,.4); text-decoration:underline; }
.gate__media{ position:relative; min-height:56vw; background:var(--ink); }
.gate__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% 45%; }
.gate__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--ink) 0%, rgba(26,24,21,0) 35%); pointer-events:none; }
@media (max-width:899px){
  .gate__grid{ grid-template-rows:auto 1fr; }
  .gate__media{ order:-1; min-height:0; aspect-ratio:4/5; max-height:62vh; }
  .gate__media::after{ background:linear-gradient(180deg, rgba(26,24,21,0) 55%, var(--ink) 100%); }
}
@media (min-width:900px){
  .gate__grid{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
  .gate__media{ min-height:100dvh; }
}

/* ---------- gift card ---------- */
.giftcard{ display:grid; gap:1.25rem; justify-items:center; text-align:center; }
.giftcard__amount{ font-family:var(--display); font-size:var(--step-4); line-height:1; margin:0; }
.giftcard__code code{
  display:inline-block; padding:.75rem 1.25rem;
  background:var(--paper-warm); border:1px dashed var(--line-strong); border-radius:8px;
  font-size:var(--step-1); letter-spacing:.18em;
}
.giftcard__qr{ display:grid; place-items:center; }
.giftcard__qr img, .giftcard__qr canvas{ background:var(--paper-lit); padding:12px; border-radius:8px; }
@media print{
  .giftcard .btn{ display:none; }
  body{ background:#fff; }
}

/* ---------- scroll lock ---------- */
body.is-locked{ overflow:hidden; }
/* ==== two series ==== */
.series{ padding-block:var(--band) 0; }
.series__intro{ text-align:center; display:grid; gap:1rem; justify-items:center;
  margin-bottom:clamp(2rem,4vw,3.25rem); }
.series__lede{ max-width:60ch; text-align:center; }

.series__pair{ display:grid; grid-template-columns:1fr; gap:2px; }
@media (min-width:860px){ .series__pair{ grid-template-columns:1fr 1fr; } }

.series__side{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; align-content:end; gap:0;
  min-height:clamp(420px,52vw,620px); padding:clamp(1.75rem,4vw,3rem);
}
.series__media{ position:absolute; inset:0; z-index:-2; }
.series__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease); }
.series__side:hover .series__media img{ transform:scale(1.05); }
.series__side::after{
  content:""; position:absolute; inset:0; z-index:-1;
  transition:background-color .5s var(--ease);
}
.series__side--warm::after{
  background:linear-gradient(to top, rgba(26,18,10,.72), rgba(26,18,10,.10) 62%);
}
.series__side--cool::after{
  background:linear-gradient(to top, rgba(14,18,22,.72), rgba(14,18,22,.10) 62%);
}
.series__side--warm:hover::after{
  background:linear-gradient(to top, rgba(122,54,18,.62), rgba(26,18,10,.10) 62%);
}
.series__side--cool:hover::after{
  background:linear-gradient(to top, rgba(38,54,72,.62), rgba(14,18,22,.10) 62%);
}

.series__body{ display:grid; gap:.625rem; justify-items:start; color:var(--paper-lit); max-width:34ch; }
.series__kicker{
  font-size:.625rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,253,248,.6);
}
.series__title{ font-family:var(--display); font-size:var(--step-3); line-height:1; }
.series__text{ font-size:var(--step-0); color:rgba(255,253,248,.82); line-height:1.5; }
.series__cta{ margin-top:.5rem; border-color:rgba(255,253,248,.4); color:inherit; }
.series__side:hover .series__cta{ border-color:var(--paper-lit); color:var(--paper-lit); }
/* ==== reference features ==== */

/* ---------- collections hover ---------- */
.chover{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:var(--chover-height,75vh); display:grid; align-items:center;
  color:var(--paper-lit);
}
.chover__stage{ position:absolute; inset:0; z-index:-2; background:var(--ink); }
.chover__plate{
  position:absolute; inset:0; opacity:0;
  transition:opacity .7s var(--ease), transform 1.4s var(--ease);
  transform:scale(1.06);
}
.chover__plate.is-active{ opacity:1; transform:scale(1); }
.chover__plate img{ width:100%; height:100%; object-fit:cover; }
.chover::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to right, rgba(20,18,15,.80), rgba(20,18,15,.34) 58%, rgba(20,18,15,.16));
}
.chover__inner{ position:relative; padding-block:clamp(3rem,7vw,5rem); }
.chover__eyebrow{
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,253,248,.62); margin:0 0 1.5rem;
}
.chover__list{ display:grid; gap:.25rem; }
.chover__link{
  display:inline-flex; align-items:flex-start; gap:.4rem;
  font-family:var(--display); font-size:clamp(2rem,6vw,4.25rem); line-height:1.08;
  color:rgba(255,253,248,.42);
  transition:color .35s var(--ease), transform .35s var(--ease);
}
.chover__link{ text-shadow:0 1px 24px rgba(20,18,15,.45); }
.chover__link:hover, .chover__link.is-selected{ color:var(--paper-lit); }
.chover__link:hover{ transform:translateX(.35rem); }
.chover__count{
  font-family:var(--body); font-size:.75rem; font-weight:700; letter-spacing:.06em;
  color:var(--ember-lit); top:-.2em;
}
@media (prefers-reduced-motion: reduce){
  .chover__plate{ transition:opacity .01s; transform:none; }
  .chover__link:hover{ transform:none; }
}

/* ---------- product thumbnails ---------- */
.pdp__stage{ display:grid; gap:.75rem; }
.pdp__thumbs{ display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding:0 var(--bleed) .25rem; }
@media (min-width:900px){ .pdp__thumbs{ display:none; } }  /* every photo is already on screen */
.pdp__thumbs::-webkit-scrollbar{ display:none; }
.pdp__thumb{
  flex:0 0 64px; width:64px; padding:0; border:1px solid transparent; border-radius:2px;
  overflow:hidden; background:var(--paper-warm); cursor:pointer;
  transition:border-color .25s var(--ease), opacity .25s var(--ease);
  opacity:.55;
}
.pdp__thumb img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.pdp__thumb.is-active{ border-color:var(--ink); opacity:1; }
.pdp__thumb:hover{ opacity:1; }
.pdp__thumb[hidden]{ display:none; }
.pdp__shot{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }

/* ---------- zoom lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:var(--z-lightbox); display:grid; place-items:center; padding:clamp(1rem,4vw,3rem); }
.lightbox[hidden]{ display:none; }
.lightbox__scrim{ position:absolute; inset:0; background:rgba(20,18,15,.88); animation:fade .25s var(--ease); }
@media (prefers-reduced-motion:reduce){ .lightbox__scrim{ animation:none; } }
.lightbox__img{ position:relative; max-width:min(1200px,92vw); max-height:88vh; object-fit:contain; border-radius:2px; }
.lightbox__close{
  position:absolute; top:1rem; right:1rem; z-index:2;
  width:44px; height:44px; display:grid; place-items:center; border-radius:999px;
  background:rgba(255,253,248,.12); color:var(--paper-lit);
}
.lightbox__close:hover{ background:rgba(255,253,248,.24); }

/* ---------- sticky cart bar ---------- */
.cartbar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-cartbar);
  background:color-mix(in srgb, var(--paper-lit) 94%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(100%); transition:transform .35s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.cartbar[hidden]{ display:none; }
.cartbar.is-up{ transform:none; }
.cartbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.75rem; }
.cartbar__id{ display:flex; align-items:center; gap:.875rem; min-width:0; }
.cartbar__id img{ width:44px; height:44px; object-fit:cover; border-radius:2px; flex:none; }
.cartbar__title{ font-family:var(--display); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cartbar__price{ font-size:var(--step--1); color:var(--ink-soft); }

/* ---------- grid as slider ---------- */
.section-head__side{ display:flex; align-items:center; gap:1rem; }
.slider-nav{ display:flex; gap:.25rem; }
.slider-nav button[disabled]{ opacity:.3; cursor:default; }
.grid--slider{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:.5rem;
}
.grid--slider::-webkit-scrollbar{ display:none; }
.grid--slider > *{ flex:0 0 clamp(220px, 42vw, 300px); scroll-snap-align:start; }
@media (min-width:760px){ .grid--slider > *{ flex-basis:clamp(240px, 23vw, 320px); } }

/* ---------- read more ---------- */
.ellipsis{ position:relative; }
.ellipsis.is-clamped{ max-height:9.5em; overflow:hidden; }
.ellipsis.is-clamped::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4em;
  background:linear-gradient(to bottom, transparent, var(--paper));
}
.ellipsis__toggle{
  margin-top:.5rem; font-size:.6875rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; border-bottom:1px solid var(--line-strong); padding-bottom:.25rem;
  cursor:pointer;
}
.ellipsis__toggle:hover{ color:var(--ember); border-color:var(--ember); }

/* ---------- mobile sliding submenu ---------- */
.header__mobile{ overflow:hidden; }
.msub{ display:grid; }
.msub__panel{ transition:transform .35s var(--ease); }
.msub__back{
  display:flex; align-items:center; gap:.5rem; padding:.75rem 0;
  font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft);
}
.msub__row{
  display:flex !important; align-items:center; justify-content:space-between; width:100%;
  background:none; text-align:left;
}
.msub__row svg{ flex:none; }
.msub__row > a{ flex:1; min-width:0; }
.msub__toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; }
.msub__toggle[aria-expanded="true"] svg{ transform:rotate(90deg); }

.card__quick .btn{
  padding-inline:.75rem; font-size:.625rem; letter-spacing:.1em; white-space:nowrap; min-height:38px;
}
/* ==== reference features round 2 ==== */

/* ---- ajax results ---- */
[data-collection-results]{ transition:opacity .2s var(--ease); }
[data-collection-results].is-loading{ opacity:.45; pointer-events:none; }
.loadmore{ display:flex; justify-content:center; margin-top:clamp(2rem,4vw,3rem); }

/* ---- popout select ---- */
.popout{ position:relative; display:flex; align-items:center; gap:.625rem; }
.popout__toggle{
  display:inline-flex; align-items:center; gap:.5rem; min-height:40px;
  padding:.4rem .9rem; border:1px solid var(--line-strong); border-radius:999px;
  font-size:var(--step--1); background:var(--paper-lit); cursor:pointer;
  transition:border-color .2s var(--ease);
}
.popout__toggle:hover{ border-color:var(--ink); }
.popout__list{
  position:absolute; z-index:30; top:calc(100% + .5rem); right:0; min-width:220px;
  background:var(--paper-lit); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 40px -24px rgba(26,24,21,.45); padding:.375rem;
}
.popout__list[hidden]{ display:none; }
.popout__list button{
  display:block; width:100%; text-align:left; padding:.5rem .75rem; border-radius:6px;
  font-size:var(--step--1); cursor:pointer;
}
.popout__list button:hover{ background:var(--paper-warm); }
.popout__list button[aria-selected="true"]{ color:var(--ember); font-weight:600; }

/* ---- price range slider ---- */
.range{
  position:relative; padding:1.25rem 0 .5rem;
  --range-pad:1.25rem; --range-track:3px; --range-thumb:18px;
}
.range__track{ position:relative; height:var(--range-track); background:var(--line-strong); border-radius:3px; }
.range__fill{ position:absolute; top:0; bottom:0; background:var(--ember); border-radius:3px; }
.range__handle{
  position:absolute; left:0; width:100%; margin:0;
  /* the thumb box sits centred on the track: padding + half track - half thumb */
  top:calc(var(--range-pad) + (var(--range-track) - var(--range-thumb)) / 2);
  height:var(--range-thumb);
  -webkit-appearance:none; appearance:none; background:none; pointer-events:none;
}
.range__handle::-webkit-slider-runnable-track{ height:var(--range-thumb); background:none; border:0; }
.range__handle::-moz-range-track{ height:var(--range-thumb); background:none; border:0; }
.range__handle::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; cursor:grab; box-sizing:border-box; margin-top:0;
  width:var(--range-thumb); height:var(--range-thumb); border-radius:50%;
  background:var(--paper-lit); border:2px solid var(--ink); box-shadow:0 1px 4px rgba(26,24,21,.25);
}
.range__handle::-moz-range-thumb{
  pointer-events:auto; cursor:grab; box-sizing:border-box;
  width:var(--range-thumb); height:var(--range-thumb); border-radius:50%;
  background:var(--paper-lit); border:2px solid var(--ink); box-shadow:0 1px 4px rgba(26,24,21,.25);
}
.range__nums{ display:flex; align-items:center; gap:.5rem; margin-top:1.125rem; }
.range__nums input{ min-height:40px; text-align:center; }
.range__dash{ color:var(--ink-faint); }

/* ---- tabs (accordion below 760px) ---- */
.tabs{ display:flex; gap:1.25rem; border-bottom:1px solid var(--line); margin-bottom:1rem; flex-wrap:wrap; }
.tabs__tab{
  padding:.625rem 0; cursor:pointer; position:relative;
  font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); transition:color .2s var(--ease);
}
.tabs__tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--ember); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.tabs__tab.is-active{ color:var(--ink); }
.tabs__tab.is-active::after{ transform:scaleX(1); }
.tabs__panel[hidden]{ display:none; }
.tabs__fallback{ display:none; }
@media (max-width:759px){
  .tabs, .tabs__panel{ display:none !important; }
  .tabs__fallback{ display:block; border-bottom:1px solid var(--line); }
  .tabs__fallback summary{
    cursor:pointer; font-weight:600; padding:.75rem 0; list-style:none;
    display:flex; justify-content:space-between;
  }
  .tabs__fallback summary::-webkit-details-marker{ display:none; }
  .tabs__fallback summary::after{ content:"+"; color:var(--ember); }
  .tabs__fallback[open] summary::after{ content:"\2013"; }
}

/* ---- draggable scrollbar under sliders ---- */
.scrollbar{
  position:relative; height:3px; border-radius:3px; background:var(--line);
  margin-top:1.25rem; max-width:var(--wide); margin-inline:auto;
}
.scrollbar[hidden]{ display:none; }
.scrollbar__thumb{
  position:absolute; top:-6px; height:15px; border-radius:8px;
  background:var(--ink); cursor:grab; touch-action:none;
}
.scrollbar__thumb:active{ cursor:grabbing; }

/* ---- newsletter popup ---- */
.popup{
  position:fixed; inset:0; z-index:var(--z-popup); display:grid; place-items:center;
  padding:clamp(1rem,4vw,2rem); background:rgba(20,18,15,.55);
  animation:fade .3s var(--ease);
}
.popup[hidden]{ display:none; }
.popup__card{
  position:relative; width:min(880px,100%); max-height:90vh; overflow:auto;
  background:var(--paper-lit); border-radius:2px;
  display:grid; grid-template-columns:1fr;
  box-shadow:0 40px 90px -50px rgba(26,24,21,.7);
}
@media (min-width:760px){ .popup__card{ grid-template-columns:1fr 1fr; } }
.popup__media img{ width:100%; height:100%; object-fit:cover; min-height:220px; }
.popup__body{ padding:clamp(1.75rem,4vw,2.75rem); display:grid; gap:1rem; align-content:center; justify-items:start; }
.popup__body .field{ width:100%; }
.popup__close{ position:absolute; top:.5rem; right:.5rem; z-index:2; background:var(--paper-lit); }
.popup__dismiss{ background:none; cursor:pointer; }
@media (prefers-reduced-motion:reduce){ .popup{ animation:none; } }

/* ---------- side arrows on horizontal scrollers ---------- */
.hscroll{ position:relative; min-width:0; max-width:100%; --hscroll-y:50%; }
.hscroll__arrow{
  position:absolute; top:var(--hscroll-y); transform:translateY(-50%);
  z-index:3; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--paper); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow:0 4px 18px rgba(20,18,15,.20);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hscroll__arrow--prev{ left:.625rem; }
.hscroll__arrow--next{ right:.625rem; }
.hscroll__arrow:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.hscroll__arrow:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.hscroll__arrow[disabled]{ opacity:0; pointer-events:none; }
.hscroll--idle .hscroll__arrow{ display:none; }
@media (min-width:760px){
  .hscroll--mobile .hscroll__arrow{ display:none; }
  /* let the rail be the grid item again so its order/sticky/column still apply */
  .hscroll--mobile{ display:contents; }
}
@media (prefers-reduced-motion:reduce){
  .hscroll__arrow{ transition:none; }
}

/* ---------- touch: keep every control at least 44px ---------- */
@media (max-width:759px){
  .hscroll__arrow{ width:44px; height:44px; }
  .hscroll__arrow--prev{ left:.5rem; }
  .hscroll__arrow--next{ right:.5rem; }
  .header__logo{ display:inline-flex; align-items:center; min-height:44px; }
  .footer__cols a{ padding-block:.6875rem; }
  .qty--sm button{ width:44px; height:44px; }
  .qty--sm input{ width:44px; }
  .ellipsis__toggle{ min-height:44px; }
  /* padding + matching negative margin: bigger target, identical layout */
  .card__name a,
  .chover__link{ display:inline-block; padding-block:.75rem; margin-block:-.75rem; }
  .card__quick .btn{ min-height:44px; }
  /* slideshow dots stay 2px thin but get a finger-sized hit area */
  .slides__dots button{ position:relative; }
  .slides__dots button::before{ content:""; position:absolute; inset:-21px -8px; }
  /* underlined links keep their rule where it is, so grow the hit area instead */
  .link-quiet{ position:relative; }
  .link-quiet::before{ content:""; position:absolute; inset:-11px -4px; }
}

/* Reference completion: shopping assistance and accessible controls */
.quick-shop{width:min(880px,calc(100% - 2rem));max-height:90dvh;margin:auto;padding:2rem;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);overflow:auto;}
.quick-shop::backdrop{background:rgba(26,24,21,.58);}
.quick-shop__close{position:absolute;right:.5rem;top:.5rem;z-index:2;background:var(--paper);border-radius:50%;}
.quick-shop__product{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}
.quick-shop__media{aspect-ratio:1;background:var(--paper-warm);}
.quick-shop__media img{width:100%;height:100%;object-fit:contain;}
.quick-shop__details{padding-top:1rem;}
.quick-shop__price{font-size:var(--step-1);margin:1rem 0;}
.quick-shop form{display:grid;gap:.7rem;margin:1.5rem 0;}
.quick-shop label{font-size:.8rem;font-weight:600;}
.quick-shop select,.quick-shop input{min-height:48px;width:100%;max-width:100%;padding:.75rem;border:1px solid var(--line-strong);background:var(--paper-lit);color:var(--ink);font:inherit;}
.quick-shop .btn{margin-top:.7rem;}
.form-message{font-size:.875rem;line-height:1.5;color:var(--ember-deep);padding:.6rem 0;}
.shipping-progress{padding:1.25rem 0;border-bottom:1px solid var(--line);font-size:.875rem;}
.shipping-progress p{margin-bottom:.5rem;}
.shipping-progress progress{display:block;width:100%;height:5px;margin:.8rem 0;accent-color:var(--ember);border:0;background:var(--line);border-radius:4px;overflow:hidden;}
.shipping-progress progress::-webkit-progress-bar{background:var(--line);}
.shipping-progress progress::-webkit-progress-value{background:var(--ember);}
.shipping-progress a{display:inline-block;text-decoration:underline;text-underline-offset:3px;min-height:32px;}
.cart-pairings{padding:1.5rem 0;border-top:1px solid var(--line);}
.cart-pairing{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:1rem;margin-top:1rem;font-size:.875rem;}
.cart-pairing img{width:64px;height:64px;object-fit:contain;background:var(--paper-warm);}
.cart-pairing strong,.cart-pairing span span{display:block;}
.cart-pairing strong{font-weight:500;}
.cart-pairing span span{color:var(--ink-soft);}
.footer__policies{display:flex;gap:.5rem 1.5rem;flex-wrap:wrap;border-top:1px solid var(--line);padding:1rem 0;font-size:.8125rem;}
.footer__policies a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;}
.slides__controls{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1rem;}
.slides__status{font-size:.8rem;font-variant-numeric:tabular-nums;min-width:3rem;text-align:center;}
.slides__pause{min-height:44px;padding:.5rem 1rem;border:1px solid var(--line-strong);border-radius:30px;font-size:.75rem;}
.slides__dots{margin-top:.25rem;}
.slides__dots button{height:44px;position:relative;background:transparent!important;}
.slides__dots button::after{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background:var(--line-strong);}
.slides__dots button[aria-current="true"]::after{background:var(--ember);}
.slides__dots button::before{display:none;}
.lighting-guide{background:var(--paper-warm);}
.lighting-guide__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}
.lighting-guide__card{padding-top:1.5rem;border-top:1px solid var(--line-strong);display:flex;flex-direction:column;align-items:flex-start;}
.lighting-guide__number{font-family:var(--display);font-size:2.5rem;color:var(--ember);margin-bottom:2rem;}
.lighting-guide__card h3{font-size:clamp(1.4rem,2vw,2rem);margin-bottom:1rem;}
.lighting-guide__card p{color:var(--ink-soft);max-width:40ch;margin-bottom:1.5rem;}
.lighting-guide__card a{margin-top:auto;min-height:44px;display:inline-flex;align-items:center;gap:1rem;}
@media(max-width:759px){
  .hero__media img{object-position:80% center;}
  .hero::after{background:linear-gradient(180deg,rgba(20,18,15,.12),rgba(20,18,15,.48) 38%,rgba(20,18,15,.8));}
  .quick-shop{padding:1.5rem;}
  .quick-shop__product{grid-template-columns:1fr;gap:1rem;}
  .quick-shop__media{height:25vh;aspect-ratio:auto;}
  .quick-shop__details{padding-top:0;}
  .quick-shop select,.quick-shop input{font-size:16px;}
  .lighting-guide__grid{grid-template-columns:1fr;gap:2rem;}
  .lighting-guide__number{margin-bottom:1rem;}
}

/* Keep hidden panels closed even when component styles set display. */
[hidden]{ display:none !important; }