/* ============================================================
   AERIE LOOM — Global Stylesheet  ·  v2 "Editorial Luxury"
   aerieloom.com
   Soft Spaces, Quiet Nights.
   ============================================================ */

/* Fonts are linked from each page's <head> (not @import here), so the
   browser fetches them alongside this file instead of after it. */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  transition: background .4s ease, color .4s ease;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
::selection { background: #3E2A18; color: #EAE5DD; }
::-moz-selection { background: #3E2A18; color: #EAE5DD; }
:focus { outline: none; }
:focus-visible { outline: 1px solid #3E2A18; outline-offset: 3px; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
a { text-decoration: none; color: inherit; }

/* ── Brand tokens ── */
:root {
  --bg:        #EAE5DD;
  --bg-warm:   #E4DCCF;
  --paper:     #F1ECE3;
  --text:      #3E2A18;
  --muted:     #76695B;   /* 4.53:1 on paper — was #8A7B6A at 3.48:1, under the AA floor */
  --muted-lt:  #786956;   /* 4.51:1 on paper — was #A99A87 at 2.33:1, well under */
  --rule:      #B8AA96;
  --rule-soft: rgba(184,170,150,.35);
  --dark:      #4A3422;
  --darker:    #3E2A18;
  --darkest:   #2A1A0C;
  --slate:     #556577;
  --gold:      #C5B795;
  --serif:     'Cormorant Garamond', Georgia, serif;
  --sans:      'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --shadow-soft: 0 4px 30px rgba(62,42,24,.07);
  --shadow-lift: 0 18px 50px rgba(62,42,24,.14);
  --maxw: 1440px;
}

/* ── Typography helpers ── */
.serif  { font-family: var(--serif); }
.sans   { font-family: var(--sans); }
.label  { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.small  { font-size: 11px; }
.muted  { color: var(--muted); }
.rule-c { color: var(--rule); }

/* ── Keyframes ── */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ticker   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ticker2  { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes scrollBob { 0%,100% { transform: translateY(0); opacity:.4;} 50% { transform: translateY(8px); opacity:1;} }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1.18); } }
@keyframes heroReveal { from { opacity:0; transform: scale(1.12);} to { opacity:1; transform: scale(1.08);} }
@keyframes softPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* Hero word reveal (load) */
.hw { display: block; opacity: 0; animation: fadeUp .9s var(--ease-out) forwards; will-change: transform, opacity; }
.w1 { animation-delay: .30s; } .w2 { animation-delay: .55s; }
.w3 { animation-delay: .80s; } .w4 { animation-delay: 1.05s; }
.w5 { animation-delay: 1.25s; }

/* ── Scroll-reveal system (driven by motion.js) ── */
.reveal        { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change: transform, opacity; }
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}.reveal.d4{transition-delay:.36s}.reveal.d5{transition-delay:.45s}
.reveal.vis    { opacity: 1; transform: translateY(0); }

/* Image clip-path reveal — the luxury signature */
.reveal-img    { clip-path: inset(0 0 100% 0); transform: scale(1.06); transition: clip-path 1.15s var(--ease-out), transform 1.5s var(--ease-out); will-change: clip-path, transform; }
.reveal-img.vis{ clip-path: inset(0 0 0 0); transform: scale(1); }

/* Line reveal */
.reveal-line   { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); }
.reveal-line.vis{ transform: scaleX(1); }

/* Char/word stagger fade */
.reveal-up     { opacity:0; transform: translateY(115%); display:inline-block; transition: transform 1s var(--ease-out), opacity 1s var(--ease-out); }
.reveal-up.vis { opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hw,.reveal { opacity:1 !important; transform:none !important; }
  .reveal-img { clip-path: inset(0) !important; transform:none !important; }
  .reveal-up  { opacity:1 !important; transform:none !important; }
}

/* ── Announcement bar ── */
.announce {
  background: var(--darkest);
  color: var(--rule);
  text-align: center;
  padding: 9px 20px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}
.announce a:hover { color: #EAE5DD; }

/* ── Navigation ── */
.nav-wrap {
  position: sticky; top: 0; z-index: 200;
  background: var(--bg);
  border-bottom: .5px solid var(--rule-soft);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.nav-wrap.scrolled {
  background: rgba(234,229,221,.82);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 1px 0 rgba(184,170,150,.3), 0 10px 34px rgba(62,42,24,.07);
}
/* Transparent nav sitting over a hero image */
.nav-wrap.over-hero {
  position: fixed; left:0; right:0;
  background: transparent;
  border-bottom-color: transparent;
}
.nav-wrap.over-hero .nav-wordmark,
.nav-wrap.over-hero .nav-location,
.nav-wrap.over-hero .nav-cat { color: #F1ECE3; }
.nav-wrap.over-hero .nav-icons svg { stroke: #F1ECE3; }
.nav-wrap.over-hero .btn-wa { border-color: rgba(241,236,227,.5); color:#F1ECE3; }
.nav-wrap.over-hero .btn-wa:hover { background:#F1ECE3; color: var(--darker); }
.nav-wrap.over-hero .nav-cat::after { background:#F1ECE3; }
.nav-wrap.over-hero.scrolled {
  background: rgba(234,229,221,.92);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-bottom-color: var(--rule-soft);
  box-shadow: 0 10px 34px rgba(62,42,24,.07);
}
/* fixed nav needs body offset only on inner scroll pages, hero pages are fine */
.nav-wrap.over-hero.scrolled .nav-wordmark,
.nav-wrap.over-hero.scrolled .nav-location,
.nav-wrap.over-hero.scrolled .nav-cat { color: var(--text); }
.nav-wrap.over-hero.scrolled .nav-icons svg { stroke: var(--text); }
.nav-wrap.over-hero.scrolled .btn-wa { border-color: var(--rule); color: var(--text); }
.nav-wrap.over-hero.scrolled .nav-cat::after { background: var(--text); }

.nav-utility { display: flex; align-items: center; justify-content: space-between; padding: 0 44px; height: 60px; }
.nav-wordmark { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: .11em; color: var(--text); transition: color .4s var(--ease); }
.nav-location { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; transition: color .4s var(--ease); flex:1; }
.nav-icons { display: flex; align-items: center; gap: 20px; flex:1; justify-content:flex-end; }
.nav-icons svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 1.5; cursor: pointer; transition: opacity .25s, transform .25s, stroke .4s var(--ease); }
.nav-icons svg:hover { opacity: .6; transform: translateY(-1px); }
.nav-wordmark { flex: 0 0 auto; text-align:center; }

.cart-btn { position: relative; display: flex; align-items: center; }
.cart-count {
  position: absolute; top: -7px; right: -9px;
  background: var(--darker); color: #EAE5DD;
  font-size: 9px; width: 16px; height: 16px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-weight:500;
}
.nav-wrap.over-hero .cart-count { background:#F1ECE3; color: var(--darker); }
.cart-count.has-items { display: flex; }

.btn-wa {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 17px; border: .5px solid var(--rule);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight:500;
  cursor: pointer; transition: background .3s, color .3s, border-color .4s; white-space: nowrap; color: var(--text);
}
.btn-wa svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; }
.btn-wa:hover { background: var(--text); color: #EAE5DD; }

.nav-cats {
  display: flex; align-items: center; justify-content: center; gap: 40px;
  padding: 0 44px; height: 46px;
  border-top: .5px solid var(--rule-soft);
  overflow-x: auto; scrollbar-width: none;
}
.nav-wrap.over-hero .nav-cats { border-top-color: rgba(241,236,227,.18); }
.nav-wrap.over-hero.scrolled .nav-cats { border-top-color: var(--rule-soft); }
.nav-cats::-webkit-scrollbar { display: none; }
/* On a phone only four or five categories fit. The strip fades out at the
   edge that has more, and a small chevron sits there, so it reads as
   "there is more this way" without a word of instruction. JS toggles
   .more-r / .more-l from the scroll position (js/main.js, navCatsCue). */
.nav-cats-more { display: none; }
@media (max-width: 900px) {
  .nav-cats.more-r { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent 100%); }
  .nav-cats.more-l { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 100%); }
  .nav-cats.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 64px), transparent 100%); }
  .nav-cats-more { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; bottom: 0; width: 40px; height: 46px;
    background: none; border: 0; padding: 0; color: var(--text); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); z-index: 2; }
  .nav-cats-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .nav-cats-more.show { opacity: .85; pointer-events: auto; animation: navNudge 2.4s var(--ease) 1.2s 2; }
  .nav-cats.gliding ~ .nav-cats-more { opacity: 0; }
  .nav-wrap.over-hero:not(.scrolled) .nav-cats-more { color: #F1ECE3; }
  @keyframes navNudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(4px); } 90% { transform: translateX(0); } }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .nav-cats-more.show { animation: none; } }
.nav-cat {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight:500;
  cursor: pointer; padding: 13px 0; position: relative; color: var(--text);
  transition: color .3s var(--ease); white-space: nowrap;
}
.nav-cat::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: .5px;
  background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav-cat:hover::after, .nav-cat.active::after { transform: scaleX(1); }

.badge-new { font-size: 8px; letter-spacing: .12em; background: var(--gold); color: var(--darkest); padding: 2px 6px; margin-left: 7px; vertical-align: middle; font-weight:600; }

/* ── Ticker ── */
.ticker-wrap { overflow: hidden; border-top: .5px solid var(--rule); border-bottom: .5px solid var(--rule); height: 46px; display: flex; align-items: center; background: var(--bg); }
.ticker-inner { display: flex; white-space: nowrap; animation: ticker 34s linear infinite; }
.ticker-inner.rev { animation: ticker2 36s linear infinite; }
.ticker-item { padding: 0 34px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); font-weight:500; }
.ticker-item.serif { font-family: var(--serif); font-size:19px; letter-spacing:.08em; text-transform:none; color: var(--dark); font-style:italic; }
.ticker-dot { padding: 0 4px; color: var(--gold); display:flex; align-items:center; }
.ticker-dot svg { width:9px; height:9px; }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px; padding: 15px 34px;
  background: var(--darker); color: #EAE5DD;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight:500;
  cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  border: none; font-family: var(--sans); position: relative; overflow: hidden;
}
.btn-primary::after { content:''; position:absolute; inset:0; background: var(--dark); transform: translateY(101%); transition: transform .4s var(--ease); z-index:0; }
.btn-primary:hover::after { transform: translateY(0); }
.btn-primary > * , .btn-primary { position: relative; }
.btn-primary span, .btn-primary svg { position: relative; z-index:1; }
.btn-primary:hover { box-shadow: var(--shadow-lift); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 9px; padding: 15px 34px;
  border: .5px solid var(--rule); background: transparent; color: var(--text);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight:500;
  cursor: pointer; transition: background .35s, color .35s, border-color .35s; font-family: var(--sans);
}
.btn-outline:hover { background: var(--text); color: #EAE5DD; border-color: var(--text); }
.btn-outline:active { transform: translateY(1px); }
.btn-outline.light { border-color: rgba(241,236,227,.45); color: #F1ECE3; }
.btn-outline.light:hover { background: #F1ECE3; color: var(--darker); }
.btn-outline svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; }

/* Ghost text link */
.link-underline { font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color: var(--muted); position:relative; padding-bottom:5px; }
.link-underline::after { content:''; position:absolute; left:0; bottom:0; width:100%; height:.5px; background: var(--rule); transform: scaleX(1); transform-origin:right; transition: transform .45s var(--ease); }
.link-underline:hover { color: var(--text); }
.link-underline:hover::after { transform: scaleX(0); }

/* ── Filter tabs (category pages) ── */
.filter-bar { padding: 0 44px; border-bottom: .5px solid var(--rule); display: flex; align-items: center; justify-content: space-between; background: var(--bg); }
.ftabs { display: flex; }
.ftab { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight:500; padding: 17px 0; margin-right: 26px; cursor: pointer; position: relative; color: var(--muted); transition: color .3s; border: none; background: transparent; font-family: var(--sans); }
.ftab::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: .5px; background: var(--text); transform: scaleX(0); transition: transform .4s var(--ease); }
.ftab.active { color: var(--text); }
.ftab.active::after { transform: scaleX(1); }
.pcount { font-size: 12px; color: var(--muted); }

/* ── WebP delivery ──
   Images are wrapped in <picture> so browsers can take the .webp (about 40%
   smaller) and fall back to the .jpg if they can't. display:contents makes
   the wrapper generate no box of its own, so the <img> keeps behaving as a
   direct child of its container and every existing layout rule below — the
   height:100% and object-fit ones especially — still applies unchanged. */
picture { display: contents; }

/* ── Product cards ── */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; padding: 44px; }
.pcard { cursor: pointer; }
.pcard-img-wrap { overflow: hidden; position: relative; aspect-ratio: 3/4; background:#D8D3CA; }
.pcard-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); background: #D8D3CA; display: flex; align-items: center; justify-content: center; will-change: transform; }
.pcard:hover .pcard-img { transform: scale(1.05); }
.pcard-ovr { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(26,17,9,.9); padding: 15px 17px; transform: translateY(100%); transition: transform .5s var(--ease-out); will-change: transform; }
.pcard:hover .pcard-ovr { transform: translateY(0); }
.pcard-ovr-text { display: flex; align-items: center; gap: 8px; color: #EAE5DD; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight:500; }
.pcard-ovr-text svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; }
.pcard-body { padding: 16px 2px 4px; }
.pcard-name { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: .01em; margin-bottom: 5px; line-height:1.2; }
.pcard-price { font-size: 12px; color: var(--muted); letter-spacing: .03em; margin-bottom: 4px; font-weight:500; }
.pcard-note { font-size: 11px; color: var(--muted-lt); line-height: 1.6; }

/* Tags */
.tag { position: absolute; top: 15px; left: 15px; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; padding: 4px 10px; color: #EAE5DD; font-weight:500; z-index:2; }
.tag-sold { background: var(--muted); }
.tag-soon { background: var(--slate); }
.tag-last { background: #6B5B48; }
.tag-new  { background: var(--gold); color: var(--darkest); }

/* ── Section titles ── */
.section-eyebrow { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight:600; }
.section-title { font-family: var(--serif); font-size: clamp(34px,4.6vw,58px); font-weight: 300; line-height: 1.02; margin-bottom: 24px; letter-spacing: -.01em; }
.section-title em { font-style: italic; }

/* ============================================================
   HERO — Editorial Split (real styled bedding + living motion)
   ============================================================ */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  min-height: calc(100vh - 106px);
  background: var(--paper);
}
.hero-split__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 96px);
  position: relative; z-index: 2;
}
.hero-split__eyebrow { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; color: var(--gold); margin-bottom: 26px; }
.hero-split__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(46px, 6vw, 96px); line-height: .98; letter-spacing: -.015em;
  margin-bottom: 26px; color: var(--text);
}
.hero-split__title em { font-style: italic; }
.hero-split__sub { max-width: 420px; font-size: 14px; line-height: 1.9; color: var(--muted); margin-bottom: 38px; }
.hero-split__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-split__meta { display: flex; gap: 28px; margin-top: 48px; flex-wrap: wrap; }
.hero-split__meta div { }
.hero-split__meta .k { font-family: var(--serif); font-size: 22px; line-height: 1; margin-bottom: 6px; }
.hero-split__meta .l { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-lt); font-weight: 500; }

.hero-split__media { position: relative; overflow: hidden; background: #D8D0C4; }
/* poster: static and frame-matched to the video's first frame for a seamless dissolve */
.hero-split__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center; transform: none; z-index: 0;
}
/* real breeze video sits above the poster, same framing, its own motion */
.hero-split__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center; z-index: 1; opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
.hero-split__media video.is-ready { opacity: 1; }
/* when the video is playing, ease the poster's own ken-burns off so there's no drift under the fade */
.hero-split__media.playing img { opacity: .001; }
@keyframes heroKen { from { transform: scale(1.06) translateY(0); } to { transform: scale(1.14) translateY(-1.5%); } }
.hero-split__media::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(241,236,227,.28) 0%, transparent 22%);
}
.hero-split__tag {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  background: rgba(26,17,9,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 10px 16px; color: #F1ECE3;
}
.hero-split__tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: softPulse 2.4s ease infinite; }
.hero-split__tag span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.hero-split__scroll { position: absolute; left: clamp(40px,6vw,96px); bottom: 30px; z-index: 2; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.hero-split__scroll i { width: 34px; height: .5px; background: var(--rule); display: block; position: relative; overflow: hidden; }
.hero-split__scroll i::after { content:''; position:absolute; left:0; top:0; width:12px; height:100%; background: var(--text); animation: scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine { 0%{ transform: translateX(-14px);} 60%,100%{ transform: translateX(40px);} }
.hero-split__scroll span { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__media { height: 56vh; min-height: 360px; order: -1; }
  .hero-split__copy { padding: 44px 24px 40px; }
  .hero-split__scroll { display: none; }
  .hero-split__meta { margin-top: 34px; }
}

/* ============================================================
   HERO — Cinematic full-bleed (legacy, kept for other pages)
   ============================================================ */
.hero-cinema { position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end; background: var(--darkest); }
.hero-cinema__media { position: absolute; inset: 0; z-index: 0; }
.hero-cinema__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: heroReveal 1.6s var(--ease-out) both, kenburns 22s ease-in-out 1.6s infinite alternate; will-change: transform; }
.hero-cinema__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(to top, rgba(26,17,9,.72) 0%, rgba(26,17,9,.18) 42%, rgba(26,17,9,.28) 100%); }
.hero-cinema__grain { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.hero-cinema__inner { position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 44px 8vh; color: #F1ECE3; }
.hero-cinema__eyebrow { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; color: rgba(241,236,227,.85); margin-bottom: 26px; }
.hero-cinema__title { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 8.5vw, 132px); line-height: .96; letter-spacing: -.015em; margin-bottom: 26px; }
.hero-cinema__title em { font-style: italic; }
.hero-cinema__sub { max-width: 460px; font-size: 14px; line-height: 1.85; color: rgba(241,236,227,.82); margin-bottom: 38px; font-weight: 300; }
.hero-cinema__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-cinema__scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-cinema__scroll span { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: rgba(241,236,227,.7); font-weight:500; }
.hero-cinema__scroll i { width: .5px; height: 30px; background: rgba(241,236,227,.6); animation: scrollBob 2.2s ease infinite; display:block; }

/* ============================================================
   FILM SECTION — "The city is her home"
   ============================================================ */
.film { position: relative; background: var(--darkest); color: #F1ECE3; overflow: hidden; padding: clamp(80px,12vh,160px) 0; }
.film__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.film__copy .section-eyebrow { color: var(--gold); }
.film__title { font-family: var(--serif); font-size: clamp(34px,4.4vw,64px); font-weight: 300; line-height: 1.04; letter-spacing: -.01em; margin-bottom: 26px; color:#F1ECE3; }
.film__title em { font-style: italic; color: var(--gold); }
.film__text { font-size: 14px; line-height: 1.95; color: rgba(241,236,227,.7); font-weight: 300; margin-bottom: 20px; max-width: 440px; }
.film__player { position: relative; aspect-ratio: 9/16; max-height: 78vh; margin: 0 auto; width: 100%; max-width: 400px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.5); background:#0d0906; }
.film__player video { width: 100%; height: 100%; object-fit: cover; display:block; }
.film__player-frame { position:absolute; inset:0; border:1px solid rgba(241,236,227,.12); pointer-events:none; z-index:2; }
.film__mute { position:absolute; bottom:16px; right:16px; z-index:3; width:38px; height:38px; border-radius:50%; background: rgba(26,17,9,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border:.5px solid rgba(241,236,227,.3); display:flex; align-items:center; justify-content:center; transition: background .3s; }
.film__mute:hover { background: rgba(26,17,9,.85); }
.film__mute svg { width:16px; height:16px; stroke:#F1ECE3; fill:none; stroke-width:1.6; }

/* ============================================================
   CATEGORY GRID — real imagery
   ============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.cat-grid .ccard { grid-column: span 4; }
.cat-grid .ccard:nth-child(n+4) { grid-column: span 3; }
.ccard { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 4/5; display:block; background:#D4CBBD; }
.ccard-inner { width: 100%; height: 100%; transition: transform 1.2s var(--ease-out); will-change: transform; }
.ccard-inner img { width:100%; height:100%; object-fit: cover; }
.ccard:hover .ccard-inner { transform: scale(1.05); }
.ccard-scrim { position:absolute; inset:0; background: linear-gradient(to top, rgba(26,17,9,.66) 0%, rgba(26,17,9,.05) 55%, transparent 100%); transition: opacity .5s var(--ease); }
.ccard:hover .ccard-scrim { opacity:.85; }
.ccard-ovr { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px; z-index:2; }
.ccard-num { font-size:10px; letter-spacing:.2em; color: rgba(241,236,227,.6); margin-bottom:8px; font-weight:500; }
.ccard-name { font-family: var(--serif); font-size: 26px; color: #F1ECE3; line-height:1.1; }
.ccard-cta { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(241,236,227,.78); margin-top: 8px; display:flex; align-items:center; gap:7px; transform: translateY(6px); opacity:0; transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); font-weight:500; }
.ccard:hover .ccard-cta { transform: translateY(0); opacity:1; }
.ccard-badge { position:absolute; top:18px; right:18px; z-index:3; background: var(--gold); color: var(--darkest); font-size:9px; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; font-weight:600; }

/* ============================================================
   EDITORIAL SPLIT
   ============================================================ */
.editorial { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 88vh; }
.editorial__media { position: relative; overflow: hidden; background:#D4CBBD; }
.editorial__media img { width:100%; height:100%; object-fit: cover; }
.editorial__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px,7vw,110px); background: var(--paper); }
.editorial__copy.dark { background: var(--darker); color:#F1ECE3; }
.editorial__title { font-family: var(--serif); font-size: clamp(34px,4vw,58px); font-weight: 300; line-height: 1.05; letter-spacing:-.01em; margin-bottom: 26px; }
.editorial__title em { font-style: italic; }
.editorial__rule { width: 44px; height: .5px; background: var(--rule); margin-bottom: 26px; }
.editorial__copy.dark .editorial__rule { background: rgba(241,236,227,.35); }
.editorial__text { font-size: 14px; line-height: 1.95; color: var(--muted); max-width: 420px; margin-bottom: 34px; }
.editorial__copy.dark .editorial__text { color: rgba(241,236,227,.68); }

/* ── Experience / trust strip ── */
.experience { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule-soft); border-top:.5px solid var(--rule-soft); border-bottom:.5px solid var(--rule-soft); }
.exp-item { background: var(--bg); padding: 54px 40px; text-align: center; }
.exp-item svg { width:26px; height:26px; stroke: var(--dark); fill:none; stroke-width:1.3; margin:0 auto 18px; }
.exp-item h4 { font-family: var(--serif); font-size: 21px; font-weight: 500; margin-bottom: 9px; }
.exp-item p { font-size: 12px; color: var(--muted); line-height: 1.75; max-width: 260px; margin: 0 auto; }

/* ── Category page header ── */
.cat-header { padding: 52px 44px 34px; border-bottom: .5px solid var(--rule); }
.breadcrumb { font-size: 11px; color: var(--muted); margin-bottom: 26px; letter-spacing:.03em; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.cat-title { font-family: var(--serif); font-size: clamp(40px,5.6vw,64px); font-weight: 300; line-height: 1.03; margin-bottom: 15px; letter-spacing:-.01em; }
.cat-sub { font-size: 14px; color: var(--muted); max-width: 500px; line-height: 1.85; }

/* ── Dark sections ── */
.section-dark { background: var(--darker); color: #EAE5DD; }
.section-dark .muted { color: rgba(241,236,227,.55); }
.section-dark .rule-c { color: rgba(184,170,150,.3); }

/* ── Brand story (kept, refined) ── */
.brand-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.brand-story-img { overflow:hidden; }
.brand-story-img img { width:100%; height:100%; object-fit:cover; }

/* ── Footer ── */
.footer { background: var(--darkest); padding: 84px 44px 28px; }
.footer-top { max-width: var(--maxw); margin: 0 auto; }
.footer-cta { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:56px; margin-bottom:52px; border-bottom:.5px solid rgba(184,170,150,.14); flex-wrap:wrap; }
.footer-cta h3 { font-family: var(--serif); font-size: clamp(30px,3.6vw,50px); font-weight:300; color:#F1ECE3; line-height:1.05; letter-spacing:-.01em; }
.footer-cta h3 em { font-style:italic; color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 44px; border-bottom: .5px solid rgba(184,170,150,.12); margin-bottom: 26px; max-width: var(--maxw); margin-left:auto; margin-right:auto; }
.footer-brand { font-family: var(--serif); font-size: 30px; color: #F1ECE3; margin-bottom: 16px; letter-spacing:.06em; }
.footer-text { font-size: 12px; color: #8A7B6A; line-height: 2; }
.footer-heading { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #6B5A4E; margin-bottom: 18px; font-weight:600; }
.footer-link { display: block; font-size: 12px; color: #A99A87; margin-bottom: 10px; cursor: pointer; transition: color .25s, padding-left .25s; }
.footer-link:hover { color: #F1ECE3; padding-left: 4px; }
.footer-copy { font-size: 11px; color: #4A3B2E; text-align: center; letter-spacing: .06em; max-width: var(--maxw); margin: 0 auto; }

/* ── Accordion ── */
.accordion-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 17px 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: transparent; border: none; border-bottom: .5px solid var(--rule); cursor: pointer; font-family: var(--sans); color: var(--text); font-weight:500; }
.accordion-icon { font-size: 18px; transition: transform .35s; line-height: 1; }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); font-size: 13px; line-height: 1.85; color: var(--muted); }
.accordion-body.open { max-height: 320px; }
.accordion-body-inner { padding: 16px 0; }

/* ── Cart sidebar ── */
.cart-sidebar { position: fixed; top: 0; right: 0; width: 440px; height: 100vh; background: var(--bg); z-index: 1000; transform: translateX(100%); transition: transform .5s var(--ease-out); display: flex; flex-direction: column; box-shadow: -8px 0 60px rgba(26,17,9,.2); }
.cart-sidebar.open { transform: translateX(0); }
.cart-overlay { position: fixed; inset: 0; background: rgba(26,17,9,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 999; opacity: 0; pointer-events: none; transition: opacity .45s; }
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: 26px 30px; border-bottom: .5px solid var(--rule); }
.cart-title { font-family: var(--serif); font-size: 24px; }
.cart-close { font-size: 22px; cursor: pointer; color: var(--muted); background: none; border: none; transition: transform .3s, color .2s; }
.cart-close:hover { transform: rotate(90deg); color: var(--text); }
.cart-items { flex: 1; overflow-y: auto; padding: 22px 30px; }
.cart-empty { text-align: center; padding: 64px 0; }
.cart-empty svg { margin:0 auto 12px; }
.cart-empty p { font-size: 13px; color: var(--muted); margin-top: 12px; }
.cart-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: .5px solid var(--rule-soft); }
.cart-item-img { width: 74px; height: 90px; background: #D4CBBD; flex-shrink: 0; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 9px; color: rgba(62,42,24,.3); }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item-info { flex: 1; }
.cart-item-name { font-family: var(--serif); font-size: 16px; margin-bottom: 4px; }
.cart-item-meta { font-size: 11px; color: var(--muted); margin-bottom: 9px; }
.cart-item-row { display: flex; align-items: center; justify-content: space-between; }
.qty-ctrl { display: flex; align-items: center; gap: 11px; }
.qty-btn { width: 25px; height: 25px; border: .5px solid var(--rule); background: transparent; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.qty-btn:hover { background: var(--rule); }
.qty-val { font-size: 13px; min-width: 20px; text-align: center; }
.cart-item-price { font-size: 13px; color: var(--text); }
.cart-remove { font-size: 10px; color: var(--muted); cursor: pointer; letter-spacing: .1em; text-transform: uppercase; background: none; border: none; margin-top: 7px; display: block; transition: color .2s; }
.cart-remove:hover { color: var(--text); }
.cart-footer { padding: 22px 30px; border-top: .5px solid var(--rule); }
.cart-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cart-subtotal-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cart-subtotal-val { font-family: var(--serif); font-size: 24px; }
.cart-checkout-btn { width: 100%; padding: 17px; background: var(--darker); color: #EAE5DD; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; border: none; font-family: var(--sans); transition: opacity .25s; font-weight:500; }
.cart-checkout-btn:hover { opacity: .85; }
.cart-wa-btn { width: 100%; padding: 15px; margin-top: 10px; border: .5px solid var(--rule); background: transparent; color: var(--text); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; font-family: var(--sans); transition: background .2s; font-weight:500; }
.cart-wa-btn:hover { background: var(--rule); }

/* ── Section layout helpers ── */
.section-pad   { padding: clamp(70px,10vh,120px) 44px 0; max-width: var(--maxw); margin: 0 auto; }
.section-pad-b { padding: clamp(70px,10vh,120px) 44px; max-width: var(--maxw); margin: 0 auto; }
.section-head  { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 52px; gap: 24px; }
.full-bleed { max-width: none; padding-left:0; padding-right:0; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .film__inner { gap: 48px; }
  .editorial { min-height: auto; }
}
@media (max-width: 900px) {
  .nav-utility { padding: 0 22px; height:56px; }
  .nav-cats { gap: 22px; padding: 0 22px; justify-content: flex-start; }
  .nav-location { display: none; }
  .nav-icons { gap:16px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); padding: 28px 22px; gap: 22px 16px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid .ccard, .cat-grid .ccard:nth-child(n+4) { grid-column: auto; }
  .film__inner { grid-template-columns: 1fr; gap: 40px; }
  .film__player { max-width: 320px; }
  .editorial { grid-template-columns: 1fr; }
  .editorial__media { aspect-ratio: 4/3; min-height:320px; }
  .experience { grid-template-columns: 1fr; }
  .filter-bar { padding: 0 22px; overflow-x: auto; }
  .cat-header { padding: 36px 22px 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .brand-story-grid { gap: 44px; }
  .section-pad, .section-pad-b { padding-left:22px; padding-right:22px; }
  .section-head { margin-bottom: 36px; }
}
@media (max-width: 600px) {
  .nav-utility { height: 52px; padding: 0 18px; }
  .nav-wordmark { font-size: 22px; }
  .btn-wa span { display: none; }
  .btn-wa { padding: 8px; }
  .product-grid { grid-template-columns: 1fr 1fr; padding: 16px; gap: 16px 12px; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-grid .ccard, .cat-grid .ccard:nth-child(n+4) { grid-column: auto; }
  .hero-cinema { min-height: 560px; height: 92vh; }
  .hero-cinema__inner { padding: 0 22px 12vh; }
  .footer { padding: 60px 22px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-cta { flex-direction:column; align-items:flex-start; gap:24px; }
  .cart-sidebar { width: 100%; }
  .section-pad, .section-pad-b { padding-top: 56px; }
  .section-pad-b { padding-bottom:56px; }
  .exp-item { padding: 40px 28px; }
  .editorial__copy { padding: 48px 26px; }
}

/* ============================================================
   AUTH & ACCOUNT (front-end UI · wired to Supabase later)
   ============================================================ */
.auth-wrap { max-width: 448px; margin: 0 auto; padding: clamp(48px,8vh,96px) 24px 96px; }
.auth-head { text-align: center; margin-bottom: 36px; }
.auth-head .ey { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 14px; }
.auth-head h1 { font-family: var(--serif); font-size: clamp(34px,5vw,48px); font-weight: 300; line-height: 1.04; letter-spacing: -.01em; }
.auth-head p { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.7; }
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.field label { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 8px; }
.field input { width: 100%; height: 52px; padding: 0 16px; border: .5px solid var(--rule); background: var(--paper); font-family: var(--sans); font-size: 14px; color: var(--text); transition: border-color .25s, box-shadow .25s; }
.field input::placeholder { color: var(--muted-lt); }
.field input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(85,101,119,.08); }
.auth-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.auth-row a { color: var(--muted); }
.auth-row a:hover { color: var(--text); }
.auth-btn { width: 100%; padding: 17px; background: var(--darker); color: #F1ECE3; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; border: none; cursor: pointer; transition: box-shadow .35s var(--ease), transform .35s var(--ease); margin-top: 4px; }
.auth-btn:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.auth-alt { text-align: center; font-size: 13px; color: var(--muted); margin-top: 24px; }
.auth-alt a { color: var(--text); border-bottom: .5px solid var(--rule); padding-bottom: 2px; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: var(--muted-lt); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: .5px; background: var(--rule-soft); }
.auth-note { margin-top: 28px; padding: 15px 18px; background: var(--bg-warm); border: .5px solid var(--rule-soft); font-size: 11px; color: var(--muted); line-height: 1.65; text-align: center; }

.account-wrap { max-width: 1040px; margin: 0 auto; padding: 48px 44px 96px; }
.account-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: .5px solid var(--rule); padding-bottom: 26px; margin-bottom: 44px; flex-wrap: wrap; gap: 16px; }
.account-head .ey { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 12px; }
.account-head h1 { font-family: var(--serif); font-size: clamp(32px,4vw,48px); font-weight: 300; line-height: 1.02; }
.account-grid { display: grid; grid-template-columns: 220px 1fr; gap: 52px; }
.account-nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav a { padding: 13px 16px; font-size: 12px; letter-spacing: .05em; color: var(--muted); border-left: 2px solid transparent; transition: color .2s, border-color .2s, background .2s; cursor: pointer; }
.account-nav a.active, .account-nav a:hover { color: var(--text); border-left-color: var(--gold); background: var(--paper); }
.account-panel h2 { font-family: var(--serif); font-size: 27px; font-weight: 400; margin-bottom: 22px; }
.account-panel { min-height: 300px; }
.acct-card { border: .5px solid var(--rule); background: var(--paper); padding: 26px 28px; margin-bottom: 16px; }
.acct-card .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 8px; }
.acct-card .v { font-size: 14px; color: var(--text); line-height: 1.7; }
.order-empty { text-align: center; padding: 60px 26px; border: .5px dashed var(--rule); background: var(--paper); }
.order-empty svg { margin: 0 auto 16px; }
.order-empty h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; margin-bottom: 10px; }
.order-empty p { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 22px; max-width: 340px; margin-left: auto; margin-right: auto; }
.nav-acct svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 1.5; }
.nav-wrap.dark .nav-acct svg { stroke: #B8AA96; }
@media (max-width: 900px) { .account-wrap { padding: 40px 22px 72px; } .account-grid { grid-template-columns: 1fr; gap: 30px; } .account-nav { flex-direction: row; overflow-x: auto; border-bottom: .5px solid var(--rule); padding-bottom: 4px; } .account-nav a { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; } .account-nav a.active { border-left: none; border-bottom-color: var(--gold); } }

/* ============================================================
   IMMERSION LAYER v3 — cursor, progress, tilt, fly-to-cart,
   page transitions, film scrub, grain. All JS-injected chrome.
   ============================================================ */

/* Scroll progress — hairline gold */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 500; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), #D8C9A2); transform-origin: left; transform: scaleX(0); }

/* Category tile wipe reveal (staggered by JS) */
.ccard.wipe { clip-path: inset(100% 0 0 0); transition: clip-path 1.05s var(--ease-out); }
.ccard.wipe.vis { clip-path: inset(0 0 0 0); }

/* Section title word masks (JS wraps words) */
.wmask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wmask > span { display: inline-block; transform: translateY(115%); transition: transform .9s var(--ease-out); }
.wmask.vis > span { transform: translateY(0); }

/* Primary button sheen — one light pass on hover */
.btn-primary { position: relative; }
.btn-primary::before { content:''; position:absolute; top:0; bottom:0; left:-70%; width:45%; z-index:1;
  background: linear-gradient(105deg, transparent, rgba(241,236,227,.28), transparent);
  transform: skewX(-18deg); transition: none; pointer-events:none; }
.btn-primary:hover::before { left: 125%; transition: left .7s var(--ease); }

/* Cart count pop when it changes */
.cart-count.pop { animation: countPop .45s var(--ease-out); }
@keyframes countPop { 0%{transform:scale(1)} 45%{transform:scale(1.55)} 100%{transform:scale(1)} }

/* Product images blur-up as they load */
img.pcard-img { filter: blur(14px) saturate(.9); transform: scale(1.03); transition: filter .8s var(--ease-out), transform 1s var(--ease-out); }
img.pcard-img.ld { filter: blur(0) saturate(1); transform: scale(1); }
.pcard:hover img.pcard-img.ld { transform: scale(1.05); }

/* Fly-to-cart dot */
.fly-dot { position: fixed; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 2px 10px rgba(62,42,24,.35); z-index: 3000; pointer-events: none; }
.cart-btn.bump svg { animation: cartBump .5s var(--ease-out); }
@keyframes cartBump { 0%{transform:scale(1)} 40%{transform:scale(1.25) rotate(-6deg)} 100%{transform:scale(1)} }

/* Cart items stagger in when drawer opens */
.cart-sidebar.open .cart-item { opacity: 0; animation: cartItemIn .5s var(--ease-out) forwards; }
.cart-sidebar.open .cart-item:nth-child(1){animation-delay:.08s}
.cart-sidebar.open .cart-item:nth-child(2){animation-delay:.16s}
.cart-sidebar.open .cart-item:nth-child(3){animation-delay:.24s}
.cart-sidebar.open .cart-item:nth-child(4){animation-delay:.32s}
.cart-sidebar.open .cart-item:nth-child(n+5){animation-delay:.4s}
@keyframes cartItemIn { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }

/* Page exit transition */
body { transition: opacity .26s ease, transform .26s ease; }
body.page-exit { opacity: 0; transform: translateY(-6px); }

/* Hero text: soft blur-in upgrade */
.hw { filter: blur(0); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* Ticker: pause on hover; skews with scroll velocity (JS) */
.ticker-wrap:hover .ticker-inner { animation-play-state: paused; }
.ticker-inner { will-change: transform; }

/* Nav hides on scroll down, returns on scroll up */
.nav-wrap { transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease-out); }
.nav-wrap.nav-hidden { transform: translateY(-101%); }

/* Hero words ease away as you scroll past (JS sets --heroleave). Only the
   words: the doors into each room stay fully clear, because on a phone they
   are exactly what you scroll down to reach. None of it on a phone. */
.hero-split__words { opacity: calc(1 - var(--heroleave,0) * .9); transform: translateY(calc(var(--heroleave,0) * -26px)); }
@media (max-width: 900px) { .hero-split__words { opacity: 1; transform: none; } }
/* The doors arrive without the blur the headline uses: sharp from the first frame. */
.hero-doors.hw { animation-name: doorsIn; animation-delay: .7s; }
@keyframes doorsIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 3D tilt on product cards (JS drives the vars) */
.pcard { perspective: 900px; }
.pcard .pcard-img-wrap { transform: rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(0); transition: transform .5s var(--ease-out); will-change: transform; }
.pcard:hover .pcard-img-wrap { transition: transform .12s linear; }

/* Product name gold underline slide */
.pcard-name { position: relative; display: inline-block; }
.pcard-name::after { content:''; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.pcard:hover .pcard-name::after { transform: scaleX(1); }

/* Film scroll scrub (JS sets --scrub 0..1) */
.film__player { transform: scale(calc(.94 + .06 * var(--scrub,1))); opacity: calc(.55 + .45 * var(--scrub,1)); transition: none; will-change: transform, opacity; }
.film__copy { transform: translateY(calc((1 - var(--scrub,1)) * 34px)); will-change: transform; }

/* Back to top */
.to-top { position: fixed; right: 26px; bottom: 26px; z-index: 400; width: 46px; height: 46px; border-radius: 50%; background: rgba(26,17,9,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: .5px solid rgba(241,236,227,.18); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease), background .25s; }
.to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--darker); }
.to-top svg { width: 16px; height: 16px; stroke: #F1ECE3; fill: none; stroke-width: 1.6; }

/* Section header hairline draw-in */
.section-head { position: relative; padding-bottom: 20px; }
.section-head::after { content:''; position:absolute; left:0; bottom:0; width:100%; height:.5px; background: var(--rule-soft); transform: scaleX(0); transform-origin:left; transition: transform 1.1s var(--ease-out) .15s; }
.section-head.vis::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .fly-dot,.scroll-progress { display:none !important; }
  body.page-exit { opacity:1; transform:none; }
  .pcard .pcard-img-wrap { transform:none !important; }
  .film__player,.film__copy { transform:none !important; opacity:1 !important; }
  .nav-wrap.nav-hidden { transform:none; }
  .hero-split__words { opacity:1 !important; transform:none !important; }
  .ccard.wipe { clip-path:none !important; }
  .wmask > span { transform:none !important; }
  img.pcard-img { filter:none !important; transform:none !important; }
}

/* ============================================================
   DARK MODE — "Chocolate Nights"
   Toggled by main.js adding class .dark to <html>. The palette
   variables flip here; a focused set of overrides fixes the
   hand-coded espresso surfaces (buttons, panels, inputs) so
   nothing sits dark-on-dark.
   ============================================================ */
html.dark {
  --bg:        #191009;
  --bg-warm:   #21160D;
  --paper:     #241810;
  --text:      #ECE3D5;
  --muted:     #AA9B83;
  --muted-lt:  #8B7C68;
  --rule:      #4A3927;
  --rule-soft: rgba(197,183,149,.13);
  --dark:      #3A2A1A;
  --darker:    #2E2114;
  --darkest:   #120B05;
  --slate:     #8395A7;
  --gold:      #CBB98F;
  --shadow-soft: 0 4px 30px rgba(0,0,0,.35);
  --shadow-lift: 0 18px 50px rgba(0,0,0,.5);
}
html.dark body { background: var(--bg); color: var(--text); }

/* Solid primary buttons: espresso-on-cream flips to tan-on-espresso. */
html.dark .btn-primary,
html.dark .add-btn,
html.dark .auth-btn,
html.dark .cart-checkout-btn,
html.dark .pay-btn,
html.dark .adm-btn,
html.dark .cart-sidebar .cart-checkout-btn {
  background: var(--gold) !important;
  color: #20160C !important;
}
html.dark .btn-primary::after { background: #DBCBA6; }
html.dark .btn-outline { border-color: var(--rule); color: var(--text); }
html.dark .btn-outline:hover { background: var(--gold); color: #20160C; border-color: var(--gold); }

/* Cards, panels and empty image tiles. */
html.dark .pcard-img-wrap,
html.dark .pcard-img,
html.dark .cart-item-img,
html.dark .summary-item-img,
html.dark .prow-img,
html.dark .gthumb,
html.dark .hero-split__media { background: #2A1E13; }
html.dark .order-summary,
html.dark .cart-sidebar,
html.dark .acct-card,
html.dark .prow,
html.dark .team-panel,
html.dark .adm-auth { background: var(--paper); border-color: var(--rule); }
html.dark .form-section { background: transparent; }

/* Inputs, selects, the delivery-zone picker. */
html.dark input,
html.dark select,
html.dark textarea,
html.dark .form-input,
html.dark .adm-input,
html.dark .adm-search,
html.dark .price-wrap,
html.dark .price-input,
html.dark .team-select,
html.dark .prow-name-input {
  background: var(--bg-warm) !important;
  color: var(--text) !important;
  border-color: var(--rule) !important;
}
html.dark .price-input,
html.dark .prow-name-input { background: transparent !important; }
html.dark .zone-opt input[type=radio] { background: var(--bg-warm) !important; border-color: var(--rule) !important; }
html.dark .zone-opt input[type=radio]:checked { border-color: var(--gold) !important; }
html.dark .zone-opt input[type=radio]:checked::after { background: var(--gold); }
html.dark .zone-opt:has(input:checked) { background: var(--bg-warm); }
html.dark #zonePicker { border-color: var(--rule) !important; }

/* Product-card hover overlay and selection highlight stay legible. */
html.dark ::selection { background: var(--gold); color: #20160C; }

/* The theme toggle button injected into the nav by main.js. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: none; cursor: pointer; color: inherit; padding: 0; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-toggle .moon { display: block; }
.theme-toggle .sun { display: none; }
html.dark .theme-toggle .moon { display: none; }
html.dark .theme-toggle .sun { display: block; }

/* Scrolled nav uses a translucent cream by default — swap to translucent dark. */
html.dark .nav-wrap.scrolled { background: rgba(25,16,9,.86) !important; box-shadow: 0 1px 0 rgba(74,57,39,.5), 0 10px 34px rgba(0,0,0,.4); }
html.dark .nav-wrap.over-hero.scrolled { background: rgba(25,16,9,.92) !important; }
html.dark .cart-count { background: var(--gold); color: #20160C; }

/* ── Homepage: tabbed shelves ── */
.shelf-tabs { display: flex; gap: 8px; margin: -6px 0 26px; flex-wrap: wrap; }
.shelf-tab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 18px; border: .5px solid var(--rule); background: transparent; color: var(--text); cursor: pointer; font-family: var(--sans); transition: background .25s, color .25s, border-color .25s; }
.shelf-tab.active, .shelf-tab:hover { background: var(--darker); color: #EAE5DD; border-color: var(--darker); }
html.dark .shelf-tab.active, html.dark .shelf-tab:hover { background: var(--gold); color: #20160C; border-color: var(--gold); }

/* ── Homepage: shop the room ── */
.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.room-card { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; }
.room-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.room-card:hover img { transform: scale(1.05); }
.room-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,16,8,.72) 0%, rgba(26,16,8,.12) 45%, transparent 70%); }
.room-ovr { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #F1ECE3; }
.room-ovr h3 { font-family: var(--serif); font-size: clamp(20px,2vw,27px); font-weight: 400; margin-bottom: 4px; }
.room-ovr p { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(241,236,227,.75); margin-bottom: 10px; }
.room-cta { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-bottom: .5px solid rgba(241,236,227,.5); padding-bottom: 2px; transition: border-color .25s; }
.room-card:hover .room-cta { border-color: #F1ECE3; }
@media (max-width: 760px) { .room-grid { grid-template-columns: 1fr; } .room-card { aspect-ratio: 16/10; } }

/* ── Subtle on-offer indicator (premium, not shouty) ── */
.pcard-img-wrap { position: relative; }
.pcard-offer {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--text); background: rgba(241,236,227,.92);
  padding: 4px 10px; border: .5px solid rgba(184,170,150,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
html.dark .pcard-offer { color: var(--gold); background: rgba(20,13,7,.7); border-color: rgba(203,185,143,.3); }
.pdp-offer {
  font-size: 11px; letter-spacing: .04em; color: var(--gold);
  margin: -12px 0 20px; display: inline-flex; align-items: center; gap: 7px;
}
.pdp-offer::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); display: inline-block; }

/* ── The World: shared pieces (10 Sep 2026) ── */
/* Film still: shown in the player until the in-world film is wired; sits over the empty video. */
.film__still img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block;
  transform: scale(1.02); animation: filmDrift 26s ease-in-out infinite alternate; }
@keyframes filmDrift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.08) translateY(-1.6%); } }
.film__player.has-film .film__still { display:none; }

/* Come-home band: the house seen from the water, before the footer. */
.homeband { position:relative; min-height: 78vh; display:flex; align-items:flex-end; overflow:hidden; background:#14100B; color:#F1ECE3; }
.homeband img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.homeband::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,11,.05) 30%, rgba(20,16,11,.72) 100%); }
.homeband__in { position:relative; z-index:2; padding: 80px 40px 72px; max-width: var(--maxw); margin: 0 auto; width:100%; }
.homeband h3 { font-family: var(--serif); font-size: clamp(38px,5.4vw,78px); font-weight:300; line-height:1.02; letter-spacing:-.01em; margin: 16px 0 30px; }
.homeband h3 em { font-style: italic; color: var(--gold); }
@media (max-width: 700px) { .homeband { min-height: 64vh; } .homeband__in { padding: 60px 22px 56px; } }

/* Category hero: the room this category furnishes, with the title set into it. */
.cat-hero { position:relative; min-height: clamp(300px, 44vh, 480px); display:flex; align-items:flex-end; overflow:hidden; background:#3E2A18; color:#F1ECE3; }
.cat-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.03); animation: catDrift 30s ease-in-out infinite alternate; }
@keyframes catDrift { to { transform: scale(1.09); } }
.cat-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,11,.08) 20%, rgba(20,16,11,.66) 100%); }
.cat-hero__in { position:relative; z-index:2; padding: 44px 44px 40px; width:100%; }
.cat-hero .breadcrumb { color: rgba(241,236,227,.7); margin-bottom: 18px; }
.cat-hero .breadcrumb a { color: inherit; }
.cat-hero .cat-title { color:#F1ECE3; margin-bottom: 12px; }
.cat-hero .cat-sub { color: rgba(241,236,227,.78); }
@media (max-width: 700px) { .cat-hero { min-height: 260px; } .cat-hero__in { padding: 30px 22px 28px; } }
@media (prefers-reduced-motion: reduce) { .cat-hero img, .film__still img { animation: none; } }

/* ============================================================
   DUSK — the house changing hour
   A veil is one night photograph laid exactly over its daytime
   twin while the two cross-fade. It is absolutely positioned
   inside the image's own container, never in flow, so it cannot
   move anything. js/dusk.js builds and removes them.
   ============================================================ */
.dusk-veil {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  will-change: opacity;
}

/* While the hour turns, the palette moves at the pace of the
   photographs, so the page reads as one room dimming rather than
   two separate things changing. Scoped to the surfaces that
   actually carry colour: a blanket transition would flatten the
   scroll reveals mid-flight. */
html.dusk-shifting body,
html.dusk-shifting .nav-wrap,
html.dusk-shifting .nav-inner,
html.dusk-shifting .announce,
html.dusk-shifting .ticker-wrap,
html.dusk-shifting .ticker-item,
html.dusk-shifting section,
html.dusk-shifting footer,
html.dusk-shifting .footer,
html.dusk-shifting .pcard,
html.dusk-shifting .pcard-img-wrap,
html.dusk-shifting .pcard-name,
html.dusk-shifting .pcard-price,
html.dusk-shifting .ccard,
html.dusk-shifting .cidx,
html.dusk-shifting .cidx__thumb,
html.dusk-shifting .editorial__copy,
html.dusk-shifting .homeband,
html.dusk-shifting .cat-hero,
html.dusk-shifting .btn-primary,
html.dusk-shifting .btn-outline,
html.dusk-shifting .cart-sidebar,
html.dusk-shifting .tabs,
html.dusk-shifting .tab,
html.dusk-shifting h1, html.dusk-shifting h2, html.dusk-shifting h3,
html.dusk-shifting p,  html.dusk-shifting a,  html.dusk-shifting span {
  transition: background-color 900ms cubic-bezier(.33,0,.2,1),
              color            900ms cubic-bezier(.33,0,.2,1),
              border-color     900ms cubic-bezier(.33,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .dusk-veil { display: none; }
  html.dusk-shifting * { transition: none !important; }
}

/* ── Colourway hint on product cards ──
   A quiet line under the name when a piece comes in more than one colour:
   small dots where the colours are known, plain words where they are not.
   Absent entirely on a single-colour card, so nothing shifts. */
.pcard-ways { display: flex; align-items: center; gap: 5px; margin-top: 4px; min-height: 0; }
.pcard-way { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(42,42,42,.15); display: inline-block; flex: none; }
.pcard-way.is-current { box-shadow: 0 0 0 1.5px #F5F2ED, 0 0 0 2.5px rgba(62,42,24,.55); }
.pcard-ways-more, .pcard-ways-text { font-size: 11px; letter-spacing: .04em; color: #74654F; }
.pcard-ways-more { margin-left: 2px; }
html.dark .pcard-way { border-color: rgba(241,236,227,.25); }
html.dark .pcard-ways-more, html.dark .pcard-ways-text { color: var(--muted); }

/* ── Size chips (bedding tab) ──
   A second, smaller row under the filter tabs, only on pages that ask for it. */
.fsizes { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 44px; border-bottom: .5px solid var(--rule); background: var(--bg); }
.fsize { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; padding: 6px 10px; cursor: pointer; color: var(--muted); border: .5px solid var(--rule); background: transparent; font-family: var(--sans); transition: color .3s, border-color .3s; }
.fsize:hover { color: var(--text); }
.fsize.active { color: var(--text); border-color: var(--text); }
@media (max-width: 900px) { .fsizes { padding: 10px 22px; } }

/* The announce bar keeps the shop hours on wide screens only, so the phone line and the address never wrap on a phone. */
.announce-short { display: none; }
@media (max-width: 1080px) { .announce-hours { display: none; } }
@media (max-width: 640px) { .announce-long { display: none; } .announce-short { display: inline; } .announce { letter-spacing: .14em; } }

/* Hero doors: eight small round doors under the headline, so the first screen
   already offers a way in and nobody has to scroll to find the shop. */
.hero-doors { margin-top: 40px; }
.hero-doors__k { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-lt); font-weight: 500; margin-bottom: 14px; }
.hero-doors__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; max-width: 560px; }
/* Each room is an arched doorway, the shape of the arches in the house,
   so the row reads as eight ways into one home rather than a row of
   round badges. */
.hero-doors__row a { display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; color: var(--text); min-width: 0; }
.hero-doors__row img { width: 100%; max-width: 60px; aspect-ratio: 4 / 5.2; height: auto; border-radius: 999px 999px 4px 4px; object-fit: cover; display: block;
  box-shadow: 0 4px 16px rgba(62,42,24,.12); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.hero-doors__row a:hover img { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(62,42,24,.2); }
.hero-doors__row span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; text-align: center; }
@media (max-width: 900px) {
  .hero-doors { margin-top: 26px; }
  /* Two rows of four on a phone: every label gets a quarter of the width,
     so FRAGRANCE can never run into CUSHIONS again. */
  .hero-doors__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; max-width: 360px; }
  .hero-doors__row img { max-width: 58px; }
  .hero-doors__row span { font-size: 9px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) { .hero-doors__row img, .hero-doors__row a:hover img { transition: none; transform: none; } }

/* Placeholder tiles while the full range loads on a first visit. */
.pcard--ghost { cursor: default; pointer-events: none; }
.pcard--ghost .pcard-img-wrap { background: linear-gradient(100deg, #E4DED4 30%, #EDE8E0 50%, #E4DED4 70%); background-size: 300% 100%; animation: ghostSheen 1.6s ease-in-out infinite; }
.pcard--ghost .ghost-line { display: block; height: 12px; margin: 4px 0 8px; width: 70%; background: #E4DED4; }
.pcard--ghost .ghost-line.short { width: 35%; }
@keyframes ghostSheen { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .pcard--ghost .pcard-img-wrap { animation: none; } }

/* ── 1 Oct: refills offered wherever a home diffuser is chosen ── */
.al-pair { margin: 18px 0 4px; padding: 16px 16px 14px; background: var(--paper); border: .5px solid var(--rule-soft); border-radius: 6px; }
.al-pair__k { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.al-pair__row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.al-pair__row + .al-pair__row { border-top: .5px solid var(--rule-soft); }
.al-pair__img { width: 46px; height: 56px; flex-shrink: 0; border-radius: 3px; overflow: hidden; background: #E4DED4; display: block; }
.al-pair__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-pair__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.al-pair__t b { font-family: var(--serif); font-weight: 400; font-size: 15px; line-height: 1.2; color: var(--text); }
.al-pair__t em { font-style: normal; font-size: 11px; line-height: 1.5; color: var(--muted); }
.al-pair__add, .pdp-pair__add { flex-shrink: 0; background: var(--darker); color: #F1ECE3; border: 0; font-family: inherit; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; padding: 11px 16px; min-height: 40px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background .25s; }
.al-pair__add:hover, .pdp-pair__add:hover { background: var(--slate); }

.pdp-pair { margin: 26px 0 6px; }
.pdp-pair__k { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.pdp-pair__card { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--paper); border: .5px solid var(--rule-soft); border-radius: 6px; }
.pdp-pair__img { width: 58px; height: 72px; flex-shrink: 0; border-radius: 3px; overflow: hidden; background: #E4DED4; display: block; }
.pdp-pair__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-pair__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pdp-pair__t b { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--text); }
.pdp-pair__t em { font-style: normal; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.pdp-pair__more { margin-top: 12px; font-size: 11.5px; line-height: 1.9; color: var(--muted); }
.pdp-pair__more a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 420px) { .pdp-pair__card { flex-wrap: wrap; } .pdp-pair__add { width: 100%; justify-content: center; } }

/* ── 1 Oct: checkout says what is missing, on screen, and goes there ── */
.fix-pop { position: fixed; left: 50%; bottom: calc(22px + var(--al-cookie-h, 0px)); z-index: 1200; display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: min(92vw, 520px); padding: 15px 20px; background: var(--darker); color: #F1ECE3; border-radius: 6px;
  font-size: 13px; line-height: 1.55; box-shadow: 0 16px 44px rgba(26,17,9,.28);
  opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.fix-pop.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fix-pop svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.form-input.nudge { animation: fieldNudge .6s var(--ease) 1; box-shadow: 0 0 0 3px rgba(192,57,43,.14); }
@keyframes fieldNudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { .fix-pop { transition: none; } .form-input.nudge { animation: none; } }

/* ── 1 Oct: the category strip on a phone reads as buttons, not a line of
   small words. Each room is its own soft chip, the page you are on is
   filled, and the arrow at the edge is a round button with a slow pulse. ── */
@media (max-width: 900px) {
  .nav-cats { gap: 8px; padding: 0 16px; }
  .nav-cat { padding: 7px 14px; border: .5px solid var(--rule); border-radius: 999px; font-size: 10.5px; letter-spacing: .1em;
    background: rgba(241,236,227,.55); line-height: 1.3; flex-shrink: 0; transition: background .25s, color .25s, border-color .25s; }
  .nav-cat::after { display: none; }
  .nav-cat.active { background: var(--darker); border-color: var(--darker); color: #F1ECE3; }
  .nav-wrap.over-hero:not(.scrolled) .nav-cat { border-color: rgba(241,236,227,.5); background: rgba(20,16,11,.18); }
  .nav-wrap.over-hero:not(.scrolled) .nav-cat.active { background: #F1ECE3; color: var(--darker); }
  .nav-cat .badge-new { margin-left: 5px; }
  .nav-cats-more { width: 30px; height: 30px; bottom: 8px; right: 8px; border-radius: 50%; background: var(--darker); color: #F1ECE3; box-shadow: 0 4px 14px rgba(26,17,9,.22); }
  .nav-cats-more.show { opacity: 1; animation: navNudge 2.4s var(--ease) 1.2s 3, navPulse 2.6s ease-out 1s 3; }
  .nav-wrap.over-hero:not(.scrolled) .nav-cats-more { background: #F1ECE3; color: var(--darker); }
  @keyframes navPulse { 0% { box-shadow: 0 4px 14px rgba(26,17,9,.22), 0 0 0 0 rgba(197,183,149,.55); } 70% { box-shadow: 0 4px 14px rgba(26,17,9,.22), 0 0 0 10px rgba(197,183,149,0); } 100% { box-shadow: 0 4px 14px rgba(26,17,9,.22), 0 0 0 0 rgba(197,183,149,0); } }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .nav-cats-more.show { animation: none; } }
/* The same pieces after dark. */
html.dark .al-pair__add, html.dark .pdp-pair__add { background: var(--gold); color: #20160C; }
html.dark .al-pair__img, html.dark .pdp-pair__img { background: #2A1E13; }
html.dark .fix-pop { background: #ECE3D5; color: #20160C; }
html.dark .fix-pop svg { stroke: #8A6A3E; }
@media (max-width: 900px) {
  html.dark .nav-cat { background: rgba(236,227,213,.06); border-color: var(--rule); }
  html.dark .nav-cat.active { background: var(--gold); border-color: var(--gold); color: #20160C; }
  html.dark .nav-cats-more { background: var(--gold); color: #20160C; }
}