/* ============ FLO — Premium Light Monochrome ============ */
:root {
  --bg: #ffffff;
  --bg-alt: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f2f2f0;
  --border: #e7e7e4;
  --border-dark: #d6d6d2;
  --text: #0a0a0a;
  --text-dim: #6d6d6d;
  --black: #0a0a0a;
  --white: #ffffff;
  --radius: 20px;
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.04), 0 4px 14px rgba(10,10,10,0.05);
  --shadow-md: 0 2px 6px rgba(10,10,10,0.05), 0 14px 34px rgba(10,10,10,0.08);
  --shadow-lg: 0 8px 24px rgba(10,10,10,0.08), 0 30px 70px rgba(10,10,10,0.12);
  --font-display: 'Space Grotesk', sans-serif;
  --font-serif: 'Instrument Serif', serif;
  --font-body: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* An explicit display on a component would otherwise beat the [hidden]
   attribute, leaving JS-hidden elements stubbornly visible. */
[hidden] { display: none !important; }

/* Available to assistive tech and search engines, invisible on screen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 84px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { width: min(1180px, 92%); margin: 0 auto; }
.container-narrow { width: min(820px, 92%); }

em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
}

::selection { background: #0a0a0a; color: #fff; }

/* ---------- Announcement ---------- */
.announce {
  background: var(--black);
  overflow: hidden;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  padding: 10px 0;
}
.announce-track { display: flex; gap: 34px; white-space: nowrap; animation: marquee 26s linear infinite; width: max-content; }
.announce-track i { font-style: normal; color: rgba(255,255,255,0.45); }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Hero slider ---------- */
/* Full-bleed slides above the lamp reveal. Slides are stacked and cross-faded
   rather than translated, so a slide can be added or removed without any
   measurement — and a single slide costs nothing. */
/* The hero fills whatever is left of the first screen. --hs-chrome is measured
   in JS from the announcement bar and the nav, so the fit stays exact whether
   the announcement is switched on or off in Settings. */
.hs {
  position: relative;
  height: calc(100vh - var(--hs-chrome, 0px));
  min-height: 420px;
  overflow: hidden;
  background: var(--black);
  touch-action: pan-y;
}
/* Dynamic viewport units keep mobile browser chrome from cropping the slide. */
@supports (height: 100dvh) {
  .hs { height: calc(100dvh - var(--hs-chrome, 0px)); }
}
.hs-track { position: absolute; inset: 0; }

.hs-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility .9s;
}
.hs-slide.is-active { opacity: 1; visibility: visible; }

.hs-slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* A slow drift keeps a still photo from reading as a frozen page. The
     inactive state rewinds while hidden, so every slide starts fresh. */
  transform: scale(1.07);
  transition: transform 8s ease-out;
}
.hs-slide.is-active img { transform: scale(1); }

/* The copy sits bottom-left over the photo, so it needs its own footing
   regardless of how bright that corner of the image happens to be. */
.hs-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 34%, transparent 62%),
    linear-gradient(to right, rgba(0,0,0,0.38) 0%, transparent 52%);
}

/* The copy is staggered against the photo cross-fade: the outgoing text clears
   quickly, the incoming text waits for it, so the two never read on top of
   each other mid-swap. */
.hs-copy {
  position: absolute; left: 0; right: 0; bottom: clamp(64px, 11vh, 104px);
  color: var(--white);
  display: grid; justify-items: start; gap: 0;
  text-shadow: 0 1px 24px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
}
.hs-slide.is-active .hs-copy {
  opacity: 1; transform: none;
  transition: opacity .55s ease .3s, transform .7s cubic-bezier(.22,1,.36,1) .3s;
}

.hs-eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.hs-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -0.02em;
}
.hs-sub {
  font-size: clamp(15px, 1.5vw, 20px); font-weight: 400;
  color: rgba(255,255,255,0.92);
  margin-top: 8px; max-width: 46ch;
}

.hs-btn {
  margin-top: 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 30px;
  border: 1px solid rgba(255,255,255,0.85); border-radius: 2px;
  color: var(--white); font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .25s, color .25s, border-color .25s;
}
.hs-btn:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.hs-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.hs-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: flex; justify-content: center; gap: 0;
}
/* The visible dot is 10px, but the button around it is a full 40px so it can
   actually be hit with a thumb. The padding is what makes up the difference. */
.hs-dot {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: none; border: none; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.hs-dot::before {
  content: ''; display: block;
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.42);
  transition: background .25s, transform .25s;
}
.hs-dot:hover::before { background: rgba(255,255,255,0.75); }
.hs-dot.is-active::before { background: var(--white); transform: scale(1.25); }
.hs-dot:focus-visible { outline: 2px solid var(--white); outline-offset: -6px; }

@media (max-width: 640px) {
  .hs { min-height: 400px; }
  .hs-copy { bottom: clamp(56px, 9vh, 76px); }
  .hs-sub { max-width: 34ch; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-slide { transition: opacity .01s; }
  .hs-slide img { transition: none; transform: none; }
  .hs-copy, .hs-slide.is-active .hs-copy { transition: none; transform: none; }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 90;
  padding: 16px 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow .3s, padding .3s;
}
.nav.scrolled {
  box-shadow: 0 1px 0 var(--border);
  padding: 11px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.brand { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: 0.04em; display: inline-flex; align-items: center; }
.brand-dot { color: var(--text-dim); }
.brand-logo { height: 40px; width: auto; display: block; }

.nav-links { display: flex; gap: 30px; font-size: 14.5px; font-weight: 500; color: var(--text-dim); }
.nav-links a { transition: color .2s; position: relative; }
.nav-links a:hover { color: var(--text); }

/* ---------- Shop dropdown ---------- */
/* The menu is always in the DOM and only fades in, so opening it costs no
   layout work and it can animate smoothly both ways. */
.nav-drop { position: relative; }

.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 0; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--text-dim); transition: color .2s;
}
.nav-drop-btn:hover, .nav-drop.is-open .nav-drop-btn { color: var(--text); }
.nav-drop-btn:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; border-radius: 4px; }

/* Sits slightly low against the cap height of the label, and is dimmer than
   the word so it reads as a hint rather than a second element. */
.nav-caret {
  margin-top: 1px; opacity: .55;
  transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.nav-drop-btn:hover .nav-caret { opacity: .8; }
.nav-drop.is-open .nav-caret { transform: rotate(180deg); opacity: 1; }

.nav-drop-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  min-width: 216px; padding: 7px;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0; visibility: hidden; pointer-events: none;
  background: var(--white);
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 14px;
  box-shadow:
    0 1px 1px rgba(10,10,10,0.03),
    0 14px 38px rgba(10,10,10,0.13);
  transition: opacity .2s ease, transform .2s cubic-bezier(.22,1,.36,1), visibility .2s;
  z-index: 5;
}
.nav-drop.is-open .nav-drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* An invisible bridge across the gap, so the menu does not close while the
   pointer travels from the button down to it. */
.nav-drop-menu::before {
  content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}

/* A small notch tying the panel to the Shop button it belongs to. */
.nav-drop-menu::after {
  content: ''; position: absolute; left: 50%; top: -5px;
  width: 9px; height: 9px; margin-left: -4.5px;
  background: var(--white);
  border-left: 1px solid rgba(10,10,10,0.08);
  border-top: 1px solid rgba(10,10,10,0.08);
  transform: rotate(45deg); border-radius: 2px 0 0 0;
}

/* .nav-links a (below) sets padding at the same specificity and comes later
   in the file, so it would silently win and flatten this back to 9px 0 — the
   extra .nav-links here isn't decorative, it's what makes this rule outrank
   that one regardless of source order. */
.nav-links .nav-drop-menu a {
  position: relative; display: block; text-align: left;
  padding: 12px 20px 14px 2ch; border-radius: 9px;
  font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: .005em;
  color: var(--text-dim); white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
/* Monochrome throughout: the row lifts on a near-white tint and the type
   deepens to black. No colour is needed to say "this is interactive". */
.nav-drop-menu a:hover { background: var(--surface-2); color: var(--text); }
.nav-drop-menu a:focus-visible {
  outline: none; background: var(--surface-2); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--black);
}

/* The page you are already on: full black, a heavier weight, and a short rule
   under the start of the label — every row shares the same left padding, so
   the rule lands under the same spot regardless of label length. */
.nav-drop-menu a.is-current { color: var(--text); font-weight: 600; }
.nav-drop-menu a.is-current::after {
  content: ''; position: absolute; left: 2ch; bottom: 8px;
  width: 16px; height: 1.5px;
  background: var(--black);
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

.cart-btn {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border-dark); color: var(--text);
  transition: all .2s;
}
.cart-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); transform: translateY(-1px); }
.cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--black); color: var(--white);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  border: 2px solid var(--white);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 100px; border: none;
  font-size: 15px; font-weight: 600; font-family: var(--font-body);
  transition: all .22s;
}
.btn:active { transform: scale(0.98); }
.btn-lg { padding: 16px 34px; font-size: 16px; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--black); color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,10,10,0.25); }
.btn-primary:disabled { opacity: 0.55; cursor: wait; transform: none; }

.btn-glass {
  background: var(--white); color: var(--text);
  border: 1px solid var(--border-dark);
}
.btn-glass:hover { border-color: var(--black); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--text-dim); padding: 10px 14px; font-size: 13.5px; }
.btn-ghost:hover { color: var(--text); }

.icon-btn {
  background: var(--white); border: 1px solid var(--border-dark); color: var(--text);
  width: 36px; height: 36px; border-radius: 50%; font-size: 14px;
  display: grid; place-items: center; transition: all .2s;
}
.icon-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* ---------- Hero (full-bleed video) ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(88vh, 860px);
  display: flex; align-items: center;
  padding: 90px 0;
  background: var(--black);
}

.hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}

.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.38) 45%, rgba(0,0,0,0.12) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 30%, transparent 65%, rgba(0,0,0,0.35) 100%);
}

.hero-content { position: relative; z-index: 1; }
.hero-copy { max-width: 620px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
  padding: 8px 18px; border-radius: 100px; margin-bottom: 28px;
}
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7.2vw, 92px);
  line-height: 1.0; font-weight: 700; letter-spacing: -0.03em;
  margin-bottom: 26px;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}
.hero-title em { font-weight: 400; }

.hero-sub { font-size: 18px; color: rgba(255,255,255,0.82); max-width: 480px; margin-bottom: 36px; text-shadow: 0 1px 16px rgba(0,0,0,0.3); }
.hero-sub strong { color: #fff; }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }

.btn-hero-primary {
  background: #fff; color: var(--black);
  box-shadow: 0 10px 32px rgba(0,0,0,0.35);
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0,0,0,0.45); }

.btn-hero-glass {
  background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
}
.btn-hero-glass:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

.hero-proof { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.78); }
.hero-proof strong { color: #fff; }
.stars-row { color: #fff; letter-spacing: 2px; font-size: 15px; }

/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 18px 0; overflow: hidden;
  background: var(--bg);
}
.marquee-track {
  display: flex; gap: 42px; width: max-content; white-space: nowrap;
  animation: marquee 30s linear infinite;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 0.24em; color: var(--text);
}
.marquee-track i { color: var(--border-dark); font-style: normal; }

/* ---------- Sections ---------- */
.section { padding: 110px 0; position: relative; }
.section-alt { background: var(--bg-alt); }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.section-tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 16px;
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.section-head h2 em { font-weight: 400; }
.section-head p { color: var(--text-dim); font-size: 16.5px; }

/* ---------- Bento ---------- */
.bento {
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
}
.bento-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .35s, transform .35s;
}
.bento-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.bento-lg { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 2; }
.bento-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.bento-card:hover img { transform: scale(1.05); }
.bento-overlay {
  position: absolute; inset: auto 0 0 0; padding: 26px;
  background: linear-gradient(transparent, rgba(0,0,0,0.78));
  color: #fff;
}
.bento-overlay h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 5px; }
.bento-lg .bento-overlay h3 { font-size: 26px; }
.bento-overlay p { color: rgba(255,255,255,0.75); font-size: 14px; }

/* ---------- Products ---------- */
.products-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 22px;
}
.products-loading { grid-column: 1/-1; text-align: center; color: var(--text-dim); padding: 60px 0; }

.product-card {
  border-radius: var(--radius); overflow: hidden;
  background: var(--white); border: 1px solid var(--border);
  transition: transform .3s, box-shadow .3s, border-color .3s;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-lg);
}

.product-media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s, opacity .4s; }
.product-media .img-hover { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .img-hover { opacity: 1; }
.product-media .img-lit { position: absolute; inset: 0; opacity: 0; }
.product-badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--black); color: var(--white);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 100px;
}
/* Corner ribbon rather than a pill in the price row — the row only ever holds
   two short numbers now, and the discount reads at a glance without fighting
   the price for space on narrow cards. */
.product-discount {
  position: absolute; top: 14px; right: 14px;
  background: var(--black); color: var(--white);
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  padding: 6px 12px; border-radius: 100px;
  box-shadow: var(--shadow-sm);
}

.product-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-cat { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.product-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.product-rating { font-size: 13px; color: var(--text-dim); }
.product-rating b { color: var(--black); letter-spacing: 1px; font-weight: 400; }

/* Colour swatches on a card, so the grid shows a lamp comes more than one way
   without the visitor having to open it. */
.product-colors { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
/* No overflow:hidden here — it would clip the tap pad below. The photo rounds
   itself instead. */
.product-color {
  position: relative; width: 20px; height: 20px; padding: 0; cursor: pointer;
  border: none; border-radius: 50%; background-color: var(--bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.32,.72,0,1), box-shadow .18s;
}
.product-color:hover { transform: scale(1.12); }
.product-color.is-on,
.product-color:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px #fff, 0 0 0 3px var(--text);
}
.product-color-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}
/* A swatch is a small target inside a card that is itself clickable, so it
   gets a comfortable tap area without growing the dot: 20px of circle inside a
   28px target. The pad is 4px rather than more because two pads either side of
   the 9px gap would otherwise overlap, and the later sibling would swallow a
   strip of its neighbour. */
.product-color::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
}

/* While a colour is being previewed the hover and lit overlays belong to the
   wrong photo, so they stay down. */
.product-card.shows-color .img-hover,
.product-card.shows-color .img-lit,
.lamps-on .product-card.shows-color.has-lit:hover .img-lit { opacity: 0 !important; }

.product-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 8px; }
.product-price { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.product-old { color: var(--text-dim); text-decoration: line-through; font-size: 14.5px; font-variant-numeric: tabular-nums; }

.product-add {
  margin: 0 20px 20px;
  background: var(--white); color: var(--text);
  border: 1px solid var(--border-dark); border-radius: 100px;
  padding: 12px; font-size: 14.5px; font-weight: 600;
  transition: all .25s;
}
.product-add:hover {
  background: var(--black); color: var(--white); border-color: var(--black);
  box-shadow: 0 8px 22px rgba(10,10,10,0.2);
}

/* ---------- Collection page ---------- */
.collection-section { padding-top: 54px; }

.collection-head { max-width: 640px; margin-bottom: 40px; }
.collection-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.025em;
  margin: 10px 0 12px;
}
.collection-head p { color: var(--text-dim); font-size: 16.5px; line-height: 1.65; }

.collection-count {
  display: inline-block; margin-top: 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .collection-section { padding-top: 34px; }
  .collection-head { margin-bottom: 28px; }
  .collection-head p { font-size: 15.5px; }
}

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split-video-frame {
  border-radius: 26px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); aspect-ratio: 4/5; max-width: 440px;
  background: var(--surface-2);
}
.split-video-frame video, .split-video-frame img { width: 100%; height: 100%; object-fit: cover; }

.split-copy .section-tag { margin-bottom: 14px; }
.split-copy h2 {
  font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 26px;
}
.split-copy h2 em { font-weight: 400; }

.check-list { list-style: none; margin-bottom: 34px; display: grid; gap: 15px; }
.check-list li { padding-left: 36px; position: relative; color: var(--text-dim); font-size: 15.5px; }
.check-list li strong { color: var(--text); }
.check-list li::before {
  content: '✓'; position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--black); color: var(--white);
  font-size: 12px; display: grid; place-items: center; font-weight: 700;
}

/* ---------- Compare ---------- */
.compare-wrap {
  max-width: 720px; margin: 0 auto; overflow-x: auto;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 16px 22px; text-align: center; border-bottom: 1px solid var(--border); }
.compare tr:last-child td { border-bottom: none; }
.compare td:first-child { text-align: left; color: var(--text-dim); font-weight: 500; }
.compare thead th { font-family: var(--font-display); font-size: 17px; padding: 20px 22px; }
.compare thead th span { color: var(--text-dim); }
.compare .compare-flo {
  background: var(--black); color: var(--white); font-weight: 600;
  border-bottom-color: rgba(255,255,255,0.12);
}
.compare thead .compare-flo { font-size: 18px; }
.compare thead .compare-flo span { color: rgba(255,255,255,0.5); }
.compare tbody td:last-child { color: var(--text-dim); }

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px;
  display: flex; flex-direction: column; gap: 13px;
  transition: transform .3s, box-shadow .3s;
  box-shadow: var(--shadow-sm);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review-stars { color: var(--black); letter-spacing: 2px; font-size: 14px; }
.review-comment { color: #3a3a3a; font-size: 14.5px; flex: 1; }
.review-meta { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--black); color: var(--white);
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
}
.review-meta strong { display: block; font-size: 14px; }
.review-meta small { color: var(--text-dim); font-size: 12.5px; }
.review-verified { margin-left: auto; font-size: 11.5px; color: var(--text); font-weight: 600; white-space: nowrap; border: 1px solid var(--border-dark); border-radius: 100px; padding: 3px 10px; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 13px; }
.faq-item {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq-item[open] { border-color: var(--black); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 20px 24px; font-weight: 600; font-size: 15.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--black);
  transition: transform .25s;
}
.faq-icon::before { width: 14px; height: 2px; top: 6px; }
.faq-icon::after { width: 2px; height: 14px; left: 6px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-item p { padding: 0 24px 22px; color: var(--text-dim); font-size: 14.5px; }

/* ---------- Terms of Service ---------- */
.terms-section { padding: 64px 0 110px; }
.terms-head { max-width: 640px; margin-bottom: 40px; }
.terms-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 48px); line-height: 1.08; letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.terms-updated { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }
.terms-intro { font-size: 16px; color: var(--text-dim); line-height: 1.6; margin-bottom: 48px; }

/* The number sits in its own column rather than inline with the heading, so
   a long section title still wraps flush left instead of hanging under the
   digit like a second line of the same sentence. */
.terms-body { display: grid; gap: 40px; }
.terms-item { display: grid; grid-template-columns: 44px 1fr; gap: 20px; scroll-margin-top: 96px; }
.terms-num { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--border-dark); }
.terms-item h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.terms-item p { color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.terms-item p + p { margin-top: 12px; }

@media (max-width: 640px) {
  .terms-item { grid-template-columns: 1fr; gap: 4px; }
  .terms-num { display: none; }
}

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative; text-align: center; padding: 120px 0; overflow: hidden;
  background: var(--black); color: var(--white);
}
.final-cta .orb { display: none; }
.final-cta h2 {
  font-family: var(--font-display); font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.03em; margin-bottom: 14px; position: relative;
}
.final-cta p { color: rgba(255,255,255,0.65); margin-bottom: 36px; font-size: 17px; position: relative; }
.final-cta .btn-primary {
  background: var(--white); color: var(--black);
}
.final-cta .btn-primary:hover { box-shadow: 0 12px 34px rgba(255,255,255,0.25); }
.cta-badges { margin-top: 32px; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,0.6); position: relative; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 60px 0 30px; background: var(--bg); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-brand p { color: var(--text-dim); font-size: 14px; margin-top: 12px; max-width: 280px; }
.footer-col h4 { font-family: var(--font-display); font-size: 15px; margin-bottom: 15px; }
.footer-col a { display: block; color: var(--text-dim); font-size: 14px; margin-bottom: 10px; transition: color .2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding: 22px 0 30px;
  color: var(--text-dim); font-size: 13px;
}
.footer-bottom a { transition: color .2s; }
.footer-bottom a:hover { color: var(--text); }

.credit-bar {
  background: #0d0d0d;
  padding: 15px 0;
}
.credit-bar-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  width: min(1180px, 92%); margin: 0 auto;
  font-size: 12.5px;
}
.credit-bar-copy { color: rgba(255,255,255,0.75); }
.credit-bar-link {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none; transition: opacity .2s; opacity: 0.85;
}
.credit-bar-link:hover { opacity: 1; }
.credit-bar-text {
  font-size: 9px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.45); font-family: var(--font-body);
}
.synx-mark { height: 15px; width: auto; display: block; }
.credit-bar-terms {
  color: rgba(255,255,255,0.75); transition: color .2s;
  cursor: pointer;
}
.credit-bar-terms:hover { color: #fff; }

/* ---------- Drawer / Cart ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(10,10,10,0.35);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 100;
}
.overlay.show { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 94vw);
  background: var(--white); border-left: 1px solid var(--border);
  z-index: 110; display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .38s cubic-bezier(.3,.8,.3,1);
  box-shadow: -20px 0 60px rgba(10,10,10,0.1);
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--border);
}
.drawer-head h3 { font-family: var(--font-display); font-size: 20px; }

.drawer-shipbar { padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.shipbar-label { font-size: 13px; color: var(--text-dim); margin-bottom: 9px; }
.shipbar-label strong { color: var(--text); }
.shipbar-track { height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.shipbar-fill {
  height: 100%; width: 0%;
  background: var(--black);
  border-radius: 4px; transition: width .5s cubic-bezier(.3,.8,.3,1);
}

.drawer-items { flex: 1; overflow-y: auto; padding: 18px 24px; display: grid; gap: 16px; align-content: start; }
.cart-empty { text-align: center; color: var(--text-dim); padding: 50px 0; font-size: 14.5px; }

.cart-item { display: flex; gap: 14px; align-items: center; }
.cart-item img { width: 68px; height: 68px; border-radius: 14px; object-fit: cover; border: 1px solid var(--border); }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.cart-item-info span { font-size: 13.5px; color: var(--text-dim); }
.qty-controls { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.qty-controls button {
  width: 25px; height: 25px; border-radius: 8px;
  background: var(--white); border: 1px solid var(--border-dark); color: var(--text);
  font-size: 13px; display: grid; place-items: center; transition: all .2s;
}
.qty-controls button:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.qty-controls b { font-size: 13.5px; min-width: 16px; text-align: center; }
.cart-item-remove { background: none; border: none; color: var(--text-dim); font-size: 15px; padding: 6px; }
.cart-item-remove:hover { color: var(--black); }

.drawer-foot { border-top: 1px solid var(--border); padding: 20px 24px; display: grid; gap: 9px; }
.drawer-row { display: flex; justify-content: space-between; font-size: 15px; }
.drawer-row-muted { color: var(--text-dim); font-size: 13.5px; margin-bottom: 6px; }

/* ---------- Modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 20px;
  background: rgba(10,10,10,0.4); backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.modal.show { opacity: 1; pointer-events: auto; }

.modal-card {
  position: relative;
  width: min(520px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 24px; padding: 34px;
  transform: translateY(16px) scale(.98); transition: transform .3s;
  box-shadow: var(--shadow-lg);
}
.modal.show .modal-card { transform: none; }
.modal-card h3 { font-family: var(--font-display); font-size: 24px; margin-bottom: 8px; }
.modal-sub { color: var(--text-dim); font-size: 14.5px; margin-bottom: 24px; }
.modal-close { position: absolute; top: 18px; right: 18px; }
.modal-card-center { text-align: center; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.form-full { grid-column: 1 / -1; }
.form-grid label { font-size: 13px; font-weight: 600; color: var(--text-dim); display: grid; gap: 7px; }
.form-grid input, .form-grid textarea {
  background: var(--white); border: 1px solid var(--border-dark);
  border-radius: 12px; padding: 12px 14px; color: var(--text);
  font-family: inherit; font-size: 14.5px; outline: none;
  transition: border-color .2s, box-shadow .2s;
  resize: vertical;
}
.form-grid input:focus, .form-grid textarea:focus {
  border-color: var(--black); box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
}

.checkout-summary {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 20px;
  display: grid; gap: 7px; font-size: 14px;
}
.checkout-summary .sum-row { display: flex; justify-content: space-between; color: var(--text-dim); }
.checkout-summary .sum-total { color: var(--text); font-weight: 700; font-size: 16px; border-top: 1px solid var(--border-dark); padding-top: 9px; margin-top: 3px; }

/* The lines being paid for, each with its photo. A long cart scrolls inside
   the summary rather than pushing the form fields off the screen. */
.sum-items {
  display: grid; gap: 12px;
  padding-bottom: 12px; margin-bottom: 3px;
  border-bottom: 1px solid var(--border-dark);
  max-height: 232px; overflow-y: auto;
}
.sum-item { display: flex; align-items: center; gap: 12px; }
.sum-thumb {
  width: 52px; height: 52px; flex: none; border-radius: 10px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.sum-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sum-info { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sum-name { font-weight: 600; color: var(--text); font-size: 14px; line-height: 1.3; }
.sum-qty { font-size: 12.5px; color: var(--text-dim); }
.sum-line { font-weight: 700; color: var(--text); white-space: nowrap; font-size: 14px; }

@media (max-width: 640px) {
  .sum-thumb { width: 46px; height: 46px; }
  .sum-items { max-height: 190px; }
}

.success-glow {
  width: 74px; height: 74px; margin: 4px auto 20px; border-radius: 50%;
  background: var(--black); color: var(--white);
  display: grid; place-items: center; font-size: 30px; font-weight: 700;
  box-shadow: var(--shadow-md);
}
.tracking-code {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--black);
  background: var(--bg-alt); border: 1px dashed var(--border-dark);
  border-radius: 14px; padding: 15px; margin-bottom: 24px; user-select: all;
}

.track-result { margin-top: 18px; font-size: 14.5px; }
.track-loading { color: var(--text-dim); font-size: 14px; }
.track-result .track-card {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; display: grid; gap: 16px;
  animation: trackIn .3s ease;
}
@keyframes trackIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.track-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.track-code {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: .04em;
}
.track-sub { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

.track-result .status-chip {
  display: inline-block; padding: 5px 13px; border-radius: 100px;
  font-size: 11.5px; font-weight: 700; text-transform: capitalize;
  background: var(--black); color: var(--white); white-space: nowrap; flex: none;
}
.track-result .status-chip.status-delivered { background: #1c7c3f; }
.track-result .status-chip.status-cancelled { background: #b91c1c; }

/* ---------- Tracking stepper ---------- */
.track-steps { list-style: none; display: grid; }
.track-step { position: relative; display: flex; gap: 13px; padding-bottom: 18px; }
.track-step:last-child { padding-bottom: 0; }

/* Rail linking the markers; it fills in once a step is reached. */
.track-step::before {
  content: ''; position: absolute; left: 10px; top: 21px; bottom: -1px;
  width: 2px; background: var(--border-dark);
}
.track-step:last-child::before { display: none; }
.track-step.is-done::before { background: var(--black); }
.track-step.is-cancelled::before,
.track-step.is-cancelled.is-done::before { background: #b91c1c; }

.ts-marker {
  position: relative; z-index: 1; flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); border: 2px solid var(--border-dark); color: var(--white);
  transition: background .25s, border-color .25s;
}
.track-step.is-done .ts-marker { background: var(--black); border-color: var(--black); }
.track-step.is-current .ts-marker { box-shadow: 0 0 0 4px rgba(10,10,10,.1); }
.track-step.is-cancelled .ts-marker { background: #b91c1c; border-color: #b91c1c; box-shadow: 0 0 0 4px rgba(185,28,28,.12); }

.ts-body { display: grid; gap: 1px; padding-top: 1px; min-width: 0; }
.ts-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ts-head strong { font-size: 14px; }
.ts-head time { font-size: 12px; color: var(--text-dim); }
.ts-body small { font-size: 12.5px; color: var(--text-dim); }
.track-step:not(.is-done) .ts-head strong,
.track-step:not(.is-done) .ts-body small { color: var(--text-dim); opacity: .75; }

.track-total {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border); padding-top: 13px; font-size: 13.5px;
}
.track-total span { color: var(--text-dim); }
.track-total strong { font-family: var(--font-display); font-size: 16px; }

.track-error { color: #b91c1c; }

/* ---------- Product detail page ---------- */
.pd-loading { text-align: center; color: var(--text-dim); padding: 120px 0; }
.pd-notfound { text-align: center; padding: 100px 0; }
.pd-notfound h2 { font-family: var(--font-display); font-size: 32px; margin-bottom: 10px; }
.pd-notfound p { color: var(--text-dim); margin-bottom: 26px; }

.pd-section { padding: 46px 0 90px; }

.pd-breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--text-dim); margin-bottom: 30px;
}
/* Inline-block plus vertical padding so the crumb is a real tap target on a
   phone without changing how the row looks. */
.pd-breadcrumb a {
  display: inline-block; padding: 6px 0;
  color: var(--text-dim); transition: color .2s;
}
.pd-breadcrumb a:hover { color: var(--text); }
.pd-breadcrumb b { color: var(--text); font-weight: 600; }

.pd-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }

.pd-gallery { position: sticky; top: 96px; }
.pd-main {
  position: relative;
  border-radius: var(--radius); overflow: hidden;
  border: none; box-shadow: none;
  background: #F1EDE6;
  aspect-ratio: 4 / 5;
  outline: none;
}
.pd-main:focus-visible { box-shadow: 0 0 0 3px rgba(10,10,10,.14); }

.pd-track {
  display: flex; height: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pd-track::-webkit-scrollbar { display: none; }
.pd-slide {
  position: relative; overflow: hidden;
  flex: 0 0 100%; height: 100%;
  display: grid; place-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* The photo is shown exactly as it was uploaded — no blur, tint or overlay
   behind or on top of it. A blurred over-scaled copy used to sit behind, to
   pad out a shot whose shape did not match the frame; it bled the photo's own
   colour around the edges and read as a glow the studio never put there. The
   frame measures itself to the photography instead (`shapeToPhotos`), so there
   is usually nothing to pad, and where a stray shape leaves a margin the plain
   frame colour behind it is the honest answer. */
.pd-shot {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
}

.pd-slide img { -webkit-user-drag: none; user-select: none; }

.pd-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.92); color: var(--text);
  border: 1px solid var(--border-dark); box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity .2s, background .2s, transform .2s;
}
.pd-prev { left: 12px; }
.pd-next { right: 12px; }
.pd-main:hover .pd-nav, .pd-main:focus-within .pd-nav { opacity: 1; }
.pd-nav:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.pd-nav:disabled { opacity: 0 !important; pointer-events: none; }

.pd-count {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 12px;
  font-size: 12px; font-weight: 500; color: var(--text-dim);
  backdrop-filter: blur(6px);
}
.pd-count b { color: var(--text); font-weight: 700; }

/* Touch devices have no hover, so the arrows would never appear — the swipe
   is the primary control there and the counter hints at more photos. */
@media (hover: none) {
  .pd-nav { display: none; }
}

.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumb {
  width: 62px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--border); background: #F1EDE6;
  padding: 0; cursor: pointer; transition: border-color .2s, transform .2s;
}
.pd-thumb:hover { transform: translateY(-2px); }
.pd-thumb.active { border-color: var(--black); }
/* Same 4:5 as the slide, so a thumbnail is a faithful preview of what opens. */
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pd-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pd-cat { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.pd-badge { position: static; }

.pd-name {
  font-family: var(--font-display); font-size: clamp(32px, 4vw, 46px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 12px;
}
.pd-rating { font-size: 14px; color: var(--text-dim); margin-bottom: 18px; }
.pd-rating b { color: var(--black); letter-spacing: 1px; font-weight: 400; }

.pd-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pd-price { font-family: var(--font-display); font-size: 32px; font-weight: 700; }
.pd-price-row .product-old { font-size: 18px; }
/* A pill this size next to a 32px price needs its own baseline lift, or it
   reads as sitting on the ground rather than beside the number. */
.pd-discount {
  align-self: center;
  background: var(--black); color: var(--white);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 12px; border-radius: 100px;
}
.pd-save-note { font-size: 13.5px; color: var(--text-dim); margin-bottom: 22px; }

.pd-story { color: #3a3a3a; font-size: 15.5px; margin-bottom: 22px; }

.pd-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pd-specs span {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-dark);
  border-radius: 100px; padding: 6px 14px;
}

.pd-note {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; color: var(--text);
  background: var(--bg-alt); border: 1px dashed var(--border-dark);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 24px;
}
.pd-note svg { flex: none; margin-top: 2px; color: var(--text-dim); }

/* Color variants */
.pd-colors { margin-bottom: 20px; }
/* Reads "Also available in" until a colour is picked, then "Color: Name" — the
   page opens on the product's own photography, so claiming a colour up front
   would be describing something the visitor is not looking at. */
.pd-color-label { font-size: 13.5px; color: var(--text-dim); margin-bottom: 10px; }
.pd-color-label b { color: var(--text); font-weight: 600; }
.pd-color-swatches { display: flex; flex-wrap: wrap; gap: 12px; }

/* One hairline around the swatch, and when it is chosen a second hairline set
   off by a ring of page colour. Two thin lines and a gap read as deliberate;
   the thick double halo this replaced read as a selection artefact. */
.pd-color-swatch {
  position: relative; width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer; overflow: hidden;
  background-color: var(--bg); background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.16);
  transition: transform .18s cubic-bezier(.32,.72,0,1), box-shadow .18s;
}
.pd-color-swatch:hover { transform: scale(1.08); }
.pd-color-swatch.active {
  box-shadow: 0 0 0 1px rgba(0,0,0,.16), 0 0 0 3px var(--bg), 0 0 0 4px var(--text);
}
.pd-color-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.16), 0 0 0 3px var(--bg), 0 0 0 4px var(--text);
}

/* The first swatch is the product itself rather than a flat colour, so it
   carries the product's own photo. */
.pd-swatch-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cart color swatch & label */
.cart-color-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; border: 1px solid rgba(0,0,0,.15); }
.cart-color-label { display: flex; align-items: center; font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.pd-buy { display: flex; gap: 12px; align-items: stretch; margin-bottom: 24px; flex-wrap: wrap; }
.qty-picker {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-dark); border-radius: 100px; padding: 4px;
}
.qty-picker button {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: none; color: var(--text);
  font-size: 17px; display: grid; place-items: center; transition: all .2s;
}
.qty-picker button:hover { background: var(--black); color: var(--white); }
.qty-picker b { min-width: 28px; text-align: center; font-size: 15px; }
.pd-add { flex: 1; min-width: 220px; }

.pd-meta { list-style: none; display: grid; gap: 8px; margin-bottom: 26px; }
.pd-meta li { font-size: 13.5px; color: var(--text-dim); padding-left: 24px; position: relative; }
.pd-meta li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--black); font-weight: 700; font-size: 12px;
}

.pd-acc { margin-bottom: 10px; }

@media (max-width: 900px) {
  .pd-grid { grid-template-columns: 1fr; gap: 34px; }
  .pd-gallery { position: static; }
  .pd-section { padding: 26px 0 70px; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 80px);
  background: var(--black); color: var(--white);
  font-size: 14.5px; font-weight: 500;
  padding: 13px 24px; border-radius: 100px; z-index: 130;
  box-shadow: 0 18px 50px rgba(10,10,10,0.3);
  opacity: 0; transition: transform .35s cubic-bezier(.3,.8,.3,1), opacity .35s;
  pointer-events: none;
  /* Wrapping instead of nowrap keeps long messages on-screen at 320px. */
  max-width: min(92vw, 440px); text-align: center;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay { transition-delay: .15s; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .hero { min-height: 76vh; padding: 70px 0; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split-video-frame { margin: 0 auto; }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .btn-track { display: none; }
  .section { padding: 72px 0; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .bento-lg, .bento-wide { grid-column: span 1; }
  .bento-lg { grid-row: span 1; }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .modal-card { padding: 26px 20px; }
}

/* ============ Customer review page ============ */
/* Sized to sit inside one viewport on a normal screen. Scrolling stays
   available as a safety valve — clipping the submit button on a short or
   landscape phone would make the form impossible to complete. */
.rv-body { background: var(--bg-alt); }
.rv-wrap {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; align-content: center;
  gap: 14px; padding: 20px;
}

.rv-card {
  width: min(470px, 100%); background: var(--surface);
  border: 1px solid var(--border); border-radius: 24px;
  padding: 30px 32px 26px; text-align: center;
  box-shadow: var(--shadow-lg);
  animation: rvIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes rvIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.rv-loading { display: grid; place-items: center; padding: 44px 0; }
.rv-spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--border-dark); border-top-color: var(--black);
  animation: rvSpin .7s linear infinite;
}
@keyframes rvSpin { to { transform: rotate(360deg); } }

.rv-logo { height: 26px; width: auto; margin: 0 auto 10px; }
.rv-eyebrow {
  display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim);
}

.rv-title {
  font-family: var(--font-display); font-size: 25px; line-height: 1.2;
  letter-spacing: -0.025em; font-weight: 700; margin-top: 16px;
}
.rv-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* What they bought, so the page feels personal rather than generic. */
.rv-products { display: grid; gap: 7px; margin: 18px 0; }
.rv-product {
  display: inline-flex; align-items: center; gap: 11px;
  justify-self: center; max-width: 100%;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 100px; padding: 6px 18px 6px 6px;
}
.rv-product img, .rv-product-blank {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: var(--surface-2); flex: none; display: block;
}
.rv-product span { font-size: 14px; font-weight: 600; }

.rv-stars { display: flex; justify-content: center; gap: 3px; margin-bottom: 18px; }
.rv-star {
  background: none; border: none; padding: 2px; line-height: 0;
  color: var(--border-dark); transition: color .15s, transform .15s;
}
.rv-star:hover { transform: translateY(-2px) scale(1.08); }
.rv-star.is-on { color: #e0a52f; }
.rv-star:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; border-radius: 6px; }

.rv-card textarea {
  width: 100%; background: var(--white); border: 1px solid var(--border-dark);
  border-radius: 16px; padding: 13px 16px; font-family: inherit; font-size: 14.5px;
  line-height: 1.55; color: var(--text); outline: none; resize: none; text-align: left;
  transition: border-color .2s, box-shadow .2s;
}
.rv-card textarea:focus { border-color: var(--black); box-shadow: 0 0 0 3px rgba(10,10,10,.07); }

.rv-submit {
  width: 100%; margin-top: 16px;
  background: var(--black); color: var(--white);
  border: none; border-radius: 100px; padding: 15px 24px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  box-shadow: var(--shadow-sm);
}
.rv-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,10,10,.24); }
.rv-submit:disabled { opacity: .55; cursor: wait; transform: none; }

.rv-as { font-size: 12px; color: var(--text-dim); margin-top: 13px; line-height: 1.5; }

.rv-error {
  color: #b91c1c; font-size: 13px; background: rgba(185,28,28,.06);
  border: 1px solid rgba(185,28,28,.25); border-radius: 12px;
  padding: 10px 14px; margin-top: 14px; text-align: left;
}

.rv-state { padding: 20px 0 14px; }
.rv-state-icon {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: var(--black); color: var(--white);
}
.rv-state h1 { font-family: var(--font-display); font-size: 23px; letter-spacing: -0.02em; margin-bottom: 9px; }
.rv-state p { color: var(--text-dim); font-size: 14px; line-height: 1.6; }

/* Padded to a thumb-sized target; the review page is opened on a phone. */
.rv-back {
  display: inline-block; padding: 9px 14px;
  font-size: 13px; color: var(--text-dim); transition: color .2s;
}
.rv-back:hover { color: var(--text); }

/* Short viewports: shed the decorative rows before allowing a scrollbar. */
@media (max-height: 680px) {
  .rv-card { padding: 22px 26px 20px; }
  .rv-title { font-size: 21px; margin-top: 12px; }
  .rv-products { margin: 13px 0; }
  .rv-stars { margin-bottom: 13px; }
  .rv-card textarea { padding: 11px 14px; }
  .rv-submit { margin-top: 12px; padding: 13px 22px; }
}

@media (max-width: 520px) {
  .rv-card { padding: 24px 20px 22px; border-radius: 20px; }
  .rv-title { font-size: 22px; }
  .rv-star svg { width: 32px; height: 32px; }
}

/* ============ Lamp toggle ============ */
/* The button only controls the product imagery — the page keeps its light
   theme. Lamps with a lit photo cross-fade to it; the rest dim and pick up a
   warm bloom so every card still reacts. */
.lamp-btn {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--white); border: 1px solid var(--border-dark); color: var(--text);
  transition: background .35s, border-color .35s, color .35s, transform .2s, box-shadow .35s;
}
.lamp-btn:hover { transform: translateY(-1px); border-color: var(--black); }
.lamp-btn:focus-visible { outline: 2px solid #e0a52f; outline-offset: 3px; }

.lamp-ico { position: relative; z-index: 1; overflow: visible; }
.lamp-bulb, .lamp-filament, .lamp-base { transition: fill .35s, stroke .35s; }
.lamp-bulb { fill: transparent; }
.lamp-filament { stroke-width: 1.5; opacity: .55; }

/* Rays sit tucked behind the bulb until the lamp is switched on. */
.lamp-rays {
  opacity: 0; transform: scale(.55); transform-origin: 16px 16px;
  transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}

/* Soft halo bleeding out of the button. */
.lamp-halo {
  position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(240,175,60,0.8) 0%, rgba(240,175,60,0) 70%);
  opacity: 0; transform: scale(.5); transition: opacity .45s, transform .45s;
}

.lamps-on .lamp-btn {
  background: #fff6e2; border-color: #eec27a; color: #a86a05;
  box-shadow: 0 0 0 4px rgba(238,194,122,0.28), 0 6px 20px rgba(216,150,30,0.32);
}
.lamps-on .lamp-halo { opacity: .55; transform: scale(1); }
.lamps-on .lamp-rays { opacity: 1; transform: scale(1); }
.lamps-on .lamp-bulb { fill: #ffd67a; stroke: #d9931a; }
.lamps-on .lamp-filament { stroke: #a05f00; opacity: 1; }
.lamps-on .lamp-base { stroke: #a86a05; }

/* ---------- What the toggle actually changes ---------- */
/* Lamps that ship with a lit photo simply cross-fade to it. */
.lamps-on .product-media .img-lit { opacity: 1; }
.lamps-on .product-card.has-lit .img-hover { opacity: 0; }
.lamps-on .product-card.has-lit:hover .img-lit { opacity: 1; }

/* Lamps without one are dimmed and lit from within instead. */
.product-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .45s;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,198,92,0.55) 0%, rgba(255,158,36,0.2) 40%, transparent 70%);
  mix-blend-mode: screen;
}
.lamps-on .product-card:not(.has-lit) .product-media::after { opacity: 1; }
.lamps-on .product-card:not(.has-lit) .product-media img { filter: brightness(.72) saturate(1.08); }

/* The toggle lives on the home page only, so the product detail page has no
   lamp styling of its own — photos there stay exactly as shot. */
.pd-main { position: relative; }

/* Elements that scroll instead of navigating still need a pointer. */
[data-scroll], .linkish { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .lamp-halo, .lamp-rays, .lamp-btn, .lamp-bulb,
  .product-media img, .product-media::after, .product-media .img-lit { transition: none; }
}

/* ============ Mobile navigation ============ */
/* Below 640px the inline nav links and Track Order button are hidden. Without
   this sheet there was no way to reach Shop, Reviews, FAQ or order tracking
   from a phone at all. */
.nav-toggle {
  display: none; place-items: center;
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--white); border: 1px solid var(--border-dark); color: var(--text);
  transition: background .2s, color .2s, border-color .2s;
}
.nav-toggle.is-open { background: var(--black); color: var(--white); border-color: var(--black); }
.nav-toggle svg { transition: transform .25s; }
.nav-toggle.is-open svg { transform: rotate(90deg); }

/* .nav-inner is a flex row, so the sheet has to claim a full-width line of its
   own — otherwise it renders as a narrow column beside the logo. */
.nav-sheet {
  display: grid; gap: 2px;
  flex: 0 0 100%; width: 100%; order: 99;
  padding: 10px 0 4px; margin-top: 4px;
  border-top: 1px solid var(--border);
  animation: sheetIn .22s ease;
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.nav-sheet a, .nav-sheet button {
  display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; width: 100%;
  padding: 13px 4px; font-family: inherit; font-size: 16px; font-weight: 500;
  color: var(--text); text-align: left; border-radius: 10px;
}
.nav-sheet a:active, .nav-sheet button:active { background: var(--surface-2); }
.nav-sheet span { color: var(--text-dim); font-size: 18px; line-height: 1; }

/* Shop expands in place inside the sheet instead of opening a second layer. */
.sheet-group-btn .nav-caret { transition: transform .25s ease; color: var(--text-dim); opacity: .6; }
.sheet-group-btn.is-open .nav-caret { transform: rotate(180deg); opacity: 1; }

.sheet-group {
  display: grid;
  padding-left: 15px; margin: 0 0 2px;
  border-left: 1.5px solid var(--border);
  animation: sheetIn .2s ease;
}
.sheet-group a {
  font-size: 15px; font-weight: 500; padding: 11px 4px;
  color: var(--text-dim); border-radius: 8px;
}
/* Matches the desktop menu — black and weight, no colour. The rule runs down
   the guide line the sheet already has rather than under the text. */
.sheet-group a.is-current {
  position: relative; color: var(--text); font-weight: 600;
}
.sheet-group a.is-current::before {
  content: ''; position: absolute; left: -16.5px; top: 7px; bottom: 7px;
  width: 1.5px; background: var(--black);
}

/* ============ Device coverage ============ */

/* Phones: the checkout and review fields must not trigger iOS Safari's
   auto-zoom, which fires whenever an input is under 16px. */
@media (max-width: 780px) {
  .form-grid input,
  .form-grid textarea,
  .rv-card textarea,
  .search, .select {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .nav-toggle { display: grid; }
  .hero { min-height: 82vh; min-height: 82svh; padding: 56px 0; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
  .pd-buy { gap: 10px; }
  .pd-add { min-width: 0; flex: 1 1 100%; }
  .toast { bottom: 16px; }
}

/* Small Androids and older iPhones (320–380px). */
@media (max-width: 400px) {
  .container { width: 94%; }
  .products-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(38px, 12vw, 52px); }
  .section-head h2 { font-size: clamp(28px, 8.5vw, 38px); }
  .drawer { width: 100vw; }
  .pd-thumb { width: 54px; }
  .modal-card { padding: 22px 16px; border-radius: 18px; }
}

/* Landscape phones and short windows: let tall blocks breathe rather than
   locking to viewport height. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 60px 0; }
  .drawer-items { padding: 12px 20px; }
  .modal-card { max-height: 94vh; }
}

/* Tablets in portrait. */
@media (min-width: 641px) and (max-width: 1020px) {
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .pd-thumbs { gap: 8px; }
}

/* Large desktops and TVs: the 1180px cap left most of a 4K panel empty. */
@media (min-width: 1600px) {
  .container { width: min(1440px, 92%); }
  .container-narrow { width: min(940px, 92%); }
  .hero { min-height: min(84vh, 940px); }
}

@media (min-width: 2200px) {
  .container { width: min(1800px, 88%); }
  .container-narrow { width: min(1100px, 88%); }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .hero-title { font-size: clamp(72px, 4.6vw, 116px); }
  .hero-sub { font-size: 21px; max-width: 580px; }
  .section { padding: 130px 0; }
}

/* 4K / living-room viewing distance. */
@media (min-width: 3000px) {
  .container { width: min(2400px, 86%); }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
  .hero-sub { font-size: 24px; max-width: 700px; }
  .product-name { font-size: 20px; }
  .product-price { font-size: 24px; }
}

/* Touch devices: hover-only affordances need a permanent visible state, and
   every tap target needs enough height for a fingertip (~44px). */
@media (hover: none) {
  .product-card:hover { transform: none; }
  .product-media .img-hover { display: none; }
  .lamp-btn:hover { transform: none; }

  .icon-btn { width: 44px; height: 44px; }
  .modal-close { top: 12px; right: 12px; }
  .qty-controls button { width: 34px; height: 34px; }
  .cart-item-remove { padding: 10px; }
}

/* Nav and footer links were only 22–23px tall. That is fine for a mouse but
   too small for a fingertip, and tablets up to 1024px are touch devices. */
.nav-links a { padding: 9px 0; }
.modal-close { width: 40px; height: 40px; }

@media (max-width: 1024px) {
  .footer-col a, .footer-col .linkish { padding: 10px 0; display: block; }
  .footer-col h4 { margin-bottom: 2px; }
}


/* ============ Landing: scroll-driven lamp reveal ============ */
/* Copy and lamp live in separate columns, so the headline can never sit on
   top of the exploded parts. */
.lr {
  position: relative;
  height: 340vh;
  background: #FDFBF7;
}
.lr-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; align-items: center;
}

/* ---------- Animated backdrop ---------- */
.lr-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lr-orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .55;
  will-change: transform;
}
.lr-orb-1 {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  left: -8%; top: -12%;
  background: radial-gradient(circle, #F6E3C8 0%, rgba(246,227,200,0) 70%);
  animation: lrDrift1 26s ease-in-out infinite;
}
.lr-orb-2 {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  right: -6%; bottom: -14%;
  background: radial-gradient(circle, #EFE2D0 0%, rgba(239,226,208,0) 70%);
  animation: lrDrift2 32s ease-in-out infinite;
}
.lr-orb-3 {
  width: 30vw; height: 30vw; min-width: 240px; min-height: 240px;
  left: 46%; top: 30%;
  background: radial-gradient(circle, #F3D9B4 0%, rgba(243,217,180,0) 68%);
  opacity: .38;
  animation: lrDrift3 21s ease-in-out infinite;
}
@keyframes lrDrift1 {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(7vw, 5vh, 0) scale(1.12); }
}
@keyframes lrDrift2 {
  0%, 100% { transform: translate3d(0,0,0) scale(1.05); }
  50%      { transform: translate3d(-6vw, -6vh, 0) scale(1); }
}
@keyframes lrDrift3 {
  0%, 100% { transform: translate3d(-50%, 0, 0) scale(1); }
  50%      { transform: translate3d(-50%, -7vh, 0) scale(1.18); }
}

/* ---------- Two-column layout ---------- */
/* About on the left, lamp on the right. Separate columns mean the story can
   never sit on top of the exploded parts. */
.lr-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: 56px;
  height: 100%;
}

/* ---------- About column ---------- */
.lr-about { max-width: 540px; }

.lr-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #B0654A; margin-bottom: 14px;
}
.lr-heading {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em;
  color: #1E1A14; margin-bottom: 22px;
}
.lr-heading em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  letter-spacing: 0;
}

.lr-lead, .lr-text {
  color: #6A6152; font-size: 15.5px; line-height: 1.72; margin-bottom: 16px;
}
.lr-lead { color: #4A4336; font-size: 16.5px; }

/* The brand's own definition of its name — set apart from the body copy. */
.lr-quote {
  padding-left: 18px; border-left: 2px solid rgba(193,84,58,0.35);
  font-family: var(--font-serif); font-size: 20px; line-height: 1.5;
  color: #2A2419;
}
/* The italic closing quote crowds the next word without a nudge. */
.lr-quote strong { font-weight: 400; font-style: italic; color: #B0654A; margin-right: .12em; }

/* ---------- Lamp column ---------- */
/* The grid centres the About column, but the lamp column has to fill the pane
   or the absolutely-positioned canvas collapses to its content height. */
.lr-viz { position: relative; align-self: stretch; min-width: 0; min-height: 0; }

/* The frames are keyed to transparency, so the lamp sits straight on the cream
   with no plate behind it. main.js sizes the backing store to the device pixel
   ratio and letterboxes the frame inside, so the lamp is sharp on a retina
   screen and never cropped or stretched.
   A canvas is a replaced element: given only top and bottom insets it keeps its
   intrinsic 300x150 instead of stretching between them, so the size is stated
   outright. The top offset clears the sticky nav — without it the exploded
   shade slides underneath the header. */
.lr-canvas {
  position: absolute; left: 0; top: 84px;
  width: 100%; height: calc(100% - 100px);
  display: block;
}

@media (max-width: 900px) {
  .lr-canvas { top: 8px; height: calc(100% - 20px); }
}

/* ---------- Scroll cue ---------- */
.lr-cue {
  position: absolute; left: 50%; bottom: 22px;
  transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #A2998A;
  transition: opacity .4s ease;
}
.lr-cue span {
  width: 1px; height: 24px; background: currentColor;
  animation: lrCue 1.8s ease-in-out infinite; transform-origin: top;
}
@keyframes lrCue {
  0%, 100% { transform: scaleY(0.3); opacity: .4; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* ---------- Devices ---------- */
@media (max-width: 900px) {
  /* Stack: the story on top, the lamp filling what is left. Still no overlap.
     The pinned pane starts at the very top of the viewport, so it has to clear
     the sticky nav itself or the heading is cut in half. */
  .lr { height: 300vh; }
  .lr-grid {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr;
    gap: 0; padding-top: 84px; padding-bottom: 10px;
  }
  .lr-about { max-width: none; margin: 0 auto; text-align: center; }
  .lr-quote {
    padding-left: 0; border-left: none;
    border-top: 1px solid rgba(193,84,58,0.28); padding-top: 13px;
  }
  .lr-tag { margin-bottom: 9px; }
  .lr-heading { font-size: clamp(24px, 6.4vw, 32px); margin-bottom: 12px; }
  .lr-lead, .lr-text { font-size: 14.5px; line-height: 1.62; margin-bottom: 11px; }
  .lr-lead { font-size: 15px; }
  .lr-quote { font-size: 17px; }
  .lr-viz { min-height: 0; }
}

@media (max-width: 640px) {
  .lr-cue { display: none; }
}

/* Genuinely short windows cannot hold three paragraphs and a lamp at once, so
   the supporting paragraph steps aside rather than squeezing the artwork into
   a thumbnail. Typical phones (800px+ tall) keep the full text. */
@media (max-height: 740px) and (max-width: 900px) {
  .lr-text { display: none; }
  .lr-grid { padding-top: 74px; }
  .lr-heading { font-size: clamp(22px, 6vw, 28px); margin-bottom: 9px; }
  .lr-lead { font-size: 14px; line-height: 1.55; margin-bottom: 9px; }
  .lr-quote { font-size: 15.5px; padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .lr { height: 100vh; }
  .lr-sticky { position: relative; }
  .lr-orb { animation: none; }
  .lr-cue { display: none; }
}

/* ============ Home gallery ============ */
/* Its own dark ground: an unmistakable break from the white section above and
   the grey reviews below, and interior photography reads far better on ink
   than on paper. */
#gallery {
  position: relative;
  background: #17140F;
  color: #F2EDE3;
  padding: 108px 0;
}
#gallery .section-tag { color: #A9997F; }
#gallery .section-head h2 { color: #FFFFFF; }
#gallery .section-head h2 em { color: #E7D9BF; }
#gallery .section-head p { color: rgba(242,237,227,0.66); }

.gal { max-width: 1000px; margin: 0 auto; }

.gal-stage {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background: #17140f;
  touch-action: pan-y; cursor: grab; outline: none;
}
.gal-stage:active { cursor: grabbing; }
.gal-stage:focus-visible { box-shadow: 0 0 0 3px rgba(10,10,10,.16); }

.gal-track {
  display: flex; height: 100%;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.gal-slide { flex: 0 0 100%; height: 100%; }
.gal-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-user-drag: none; user-select: none;
}

/* Credit sits over a gradient scrim so it stays readable on any photo. */
.gal-caption {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 26px 30px 46px;
  display: grid; gap: 5px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.gal-caption:empty { display: none; }
.gal-caption strong {
  font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #fff;
}
.gal-caption span { font-size: 14.5px; color: rgba(255,255,255,0.88); }

.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.14); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(6px);
  transition: background .2s, opacity .2s;
}
.gal-prev { left: 16px; }
.gal-next { right: 16px; }
.gal-nav:hover { background: rgba(255,255,255,0.28); }
.gal-nav:disabled { opacity: 0; pointer-events: none; }

/* Every frame stays on screen — the rail wraps onto more rows rather than
   hiding the extras behind a horizontal scroll. */
.gal-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding-top: 5px;
  justify-content: center;
}

/* A fixed 3:2 frame, matching the photographs. Stretching these to fill the
   strip cropped a 3:2 photo into a 2.6:1 letterbox and cut the subject out. */
.gal-thumb {
  flex: 0 0 auto;
  width: clamp(104px, 13.5%, 150px); aspect-ratio: 3 / 2; height: auto;
  border: none; padding: 0; border-radius: 8px; overflow: hidden;
  background: #241F18;
  position: relative; transition: opacity .25s, transform .25s;
  opacity: .42;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumb:hover { opacity: .75; }
.gal-thumb.active { opacity: 1; transform: translateY(-3px); }
.gal-thumb.active::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85);
}

/* ---------- Full-screen viewer ---------- */
.galv {
  position: fixed; inset: 0; z-index: 200;
  background: #fff;
  display: grid; place-items: center;
  animation: galvIn .25s ease;
}
@keyframes galvIn { from { opacity: 0; } to { opacity: 1; } }

.galv-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 60px;
  width: min(1280px, 92%); max-height: 88vh;
}
.galv-figure {
  display: grid; place-items: center;
  max-height: 88vh; min-width: 0;
}
.galv-figure img {
  max-width: 100%; max-height: 88vh;
  width: auto; height: auto; object-fit: contain;
}
.galv-meta { min-width: 0; }
.galv-meta h3 {
  font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px);
  font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin-bottom: 12px;
}
.galv-meta p { font-size: 16px; color: var(--text-dim); }

.galv-close {
  position: absolute; top: 22px; right: 28px;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: none; border: none; color: var(--text);
  transition: background .2s;
}
.galv-close:hover { background: var(--surface-2); }

.galv-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: none; border: none; color: var(--text);
  transition: background .2s, opacity .2s;
}
.galv-prev { left: 18px; }
.galv-next { right: 18px; }
.galv-nav:hover { background: var(--surface-2); }
.galv-nav:disabled { opacity: .2; pointer-events: none; }

@media (max-width: 860px) {
  .galv-inner {
    grid-template-columns: 1fr; gap: 22px;
    max-height: none; text-align: center;
    align-content: center;
  }
  .galv-figure img { max-height: 56vh; }
  .galv-meta h3 { font-size: 24px; }
  .galv-nav { top: auto; bottom: 20px; transform: none; width: 46px; height: 46px; }
  .galv-prev { left: 24%; }
  .galv-next { right: 24%; }
}

@media (max-width: 900px) {
  #gallery { padding: 76px 0; }
  .gal-stage { aspect-ratio: 4 / 3; }
  .gal-caption { padding: 18px 20px 38px; }
  .gal-caption strong { font-size: 16.5px; }
  .gal-caption span { font-size: 13.5px; }
  .gal-thumb { width: clamp(88px, 22%, 118px); }
}

@media (max-width: 560px) {
  .gal-stage { aspect-ratio: 1; }
  .gal-nav { display: none; }
  .gal-strip { gap: 6px; }
  /* Three per row, so every frame stays visible on a phone too. */
  .gal-thumb { width: calc(33.333% - 4px); }
}