/** Shopify CDN: Minification failed

Line 116:0 Unexpected "}"

**/
/* ============================================================
   NOAIRE V — Shopify theme
   Design system ported from the editorial landing page.
   Palette: cream/ivory paper, warm gold, warm near-black.
   Fonts: Cormorant Garamond (display) + Inter (body).
   ============================================================ */

:root {
  --ink: #1C1710;
  --ink-soft: #2A2318;
  --ink-mute: #6B6152;
  --paper: #FBF9F3;
  --bg: #FAFAF8;
  --bg-warm: #F3F1ED;
  --bg-card: #F7F6F3;
  --line: rgba(28,23,16,0.12);
  --line-soft: rgba(28,23,16,0.07);
  --gold: #B8956A;        /* marks, rules, lines. NOT small text on cream (2.7:1). */
  --gold-deep: #9A7A52;
  --gold-text: #7A5C36;   /* accessible gold for small text on cream (4.6:1) */
  --white: #FFFFFF;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px;
  --maxw: 1200px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea { font-family: inherit; font-size: inherit; }
::selection { background: var(--gold); color: var(--white); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.sec { padding: 120px 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Type helpers --- */
.eyebrow { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; color: var(--gold-text); }
.display-xl { font-family: var(--serif); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); }
.display-l { font-family: var(--serif); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); font-size: clamp(2rem, 3.6vw, 3rem); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--s8); }
.section-head .eyebrow { display: block; margin-bottom: var(--s2); }
.section-head h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; }
.section-head p { margin-top: var(--s2); color: var(--ink-mute); font-size: 0.98rem; }

/* --- Buttons --- */
.btn {
  display: inline-block; padding: 15px 34px; border-radius: 999px;
  background: var(--ink); color: #F4EEE2;
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover { background: var(--gold-deep); color: #fff; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
.btn-outline:hover { background: var(--ink); color: #F4EEE2; }
.btn-block { display: block; width: 100%; }

/* ============================================================
   ANNOUNCEMENT MARQUEE
   ============================================================ */
/* Static, centred, one line. Confident brands do not scroll text at people. */
.announcement-bar { padding: 12px 22px; background: var(--ink); text-align: center; }
.announcement-bar .ann-item { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: rgba(246,241,231,0.78); }
/* Continuous marquee. Both messages are always on the bar, moving right to
   left. Two identical groups, each at least a full viewport wide, and the track
   travels exactly -50%: group two lands where group one started, so the loop
   has no visible seam and no empty gap on wide screens. Duration steps up with
   width to keep the scroll speed roughly constant. */
.ann-marquee { overflow: hidden; }
.ann-track { display: flex; width: max-content; animation: annScroll 18s linear infinite; }
.ann-group {
  display: flex; align-items: center; justify-content: space-around;
  min-width: 100vw; flex-shrink: 0;
}
.ann-track .ann-item { white-space: nowrap; }
.ann-sep {
  flex-shrink: 0; width: 4px; height: 4px; margin: 0 22px;
  border-radius: 50%; background: var(--gold);
}
.announcement-bar:hover .ann-track { animation-play-state: paused; }
@keyframes annScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (min-width: 700px)  { .ann-track { animation-duration: 32s; } }
@media (min-width: 1200px) { .ann-track { animation-duration: 44s; } }
@media (prefers-reduced-motion: reduce) {
  .ann-track { animation: none; }
  .ann-track > [data-ann-dupe] { display: none; }
}
}
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(250,250,248,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(28,23,16,0.06); }
.masthead { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 32px; }
.masthead .wordmark { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: 0.36em; text-indent: 0.36em; color: var(--ink); line-height: 1; white-space: nowrap; }
.header-right { display: flex; align-items: center; gap: 34px; }
.header-nav { display: flex; gap: 26px; }
.header-nav a { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--ink-mute); transition: color 0.3s var(--ease); }
.header-nav a:hover { color: var(--ink); }
.cart-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 12px; margin: -12px; color: var(--ink-soft); transition: color 0.3s var(--ease); }
.cart-toggle:hover { color: var(--gold); }
.cart-toggle svg { display: block; }
.cart-count { position: absolute; top: 5px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 0.56rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
.cart-count[data-count="0"] { display: none; }
.menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 14px 11px; margin: -14px -11px; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: all 0.4s var(--ease); }

/* Mobile nav overlay */
.mobile-nav { position: fixed; inset: 0; z-index: 130; background: var(--bg); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); }
.mobile-nav.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 26px; text-align: center; }
.mobile-nav a { font-family: var(--serif); font-size: 2rem; color: var(--ink); }
.mobile-nav .close { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 1.6rem; color: var(--ink); }

/* ============================================================
   HERO (split)
   ============================================================ */
.hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 84vh; background: var(--bg-warm); }
.hero-copy { display: flex; align-items: center; padding: 120px 6vw; background: radial-gradient(ellipse 96% 72% at 12% 100%, rgba(184,149,106,0.09) 0%, transparent 60%), linear-gradient(180deg, #F8F4EE 0%, #F1EADE 60%, #ECE2D0 100%); }
.hero-copy-inner { width: 100%; max-width: 468px; text-align: left; }
.hero-copy-inner .eyebrow { display: block; margin: 0 0 var(--s3); }
.hero-title { font-size: clamp(2.6rem, 4.6vw, 4.2rem); margin: 0 0 var(--s3); }
.hero-title em { font-style: italic; }
.hero-desc { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 400px; margin: 0 0 var(--s5); }
.hero-photo { position: relative; overflow: hidden; background: #E7DEC7; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-photo::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 70px; z-index: 1; background: linear-gradient(90deg, rgba(28,23,16,0.07), transparent); pointer-events: none; }

/* ============================================================
   ETHOS
   ============================================================ */
/* The brand's argument. The one dark moment on an otherwise cream page. */
.ethos-sec { background: var(--ink); }
.ethos { max-width: 960px; margin: 0 auto; }
.ethos-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: baseline; padding: 46px 0; }
.ethos-row + .ethos-row { border-top: 1px solid rgba(246,241,231,0.14); }
.ethos-statement { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 3.1vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; color: #F6F1E7; }
.ethos-statement .num { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 14px; font-weight: 500; }
.ethos-support { font-size: 0.98rem; line-height: 1.8; color: rgba(246,241,231,0.86); align-self: center; }

/* ============================================================
   PHOTO BAND
   ============================================================ */
.photo-band { position: relative; width: 100%; aspect-ratio: 1068 / 843; max-height: 1200px; overflow: hidden; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ============================================================
   PRODUCT GRID + CARDS (Shop + featured)
   ============================================================ */
.collection-intro { text-align: center; max-width: 620px; margin: 0 auto var(--s8); }
.collection-intro .eyebrow { display: block; margin-bottom: var(--s2); }
.collection-intro h1, .collection-intro h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); color: var(--ink); line-height: 1.1; }
.collection-intro p { margin-top: var(--s2); color: var(--ink-mute); }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }
.product-card { text-align: center; position: relative; display: flex; flex-direction: column; }
/* Product photos are shot on pure white. `mix-blend-mode: multiply` makes that
   white dissolve into the cream behind it, keeping the bottle and its shadow.
   `isolation: isolate` stops the blend leaking onto the page background. */
.product-card .card-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--bg-card); border-radius: 14px; overflow: hidden; isolation: isolate; transition: transform 0.5s var(--ease); }
.product-card:hover .card-media { transform: translateY(-4px); }
.product-card .card-media img, .product-card .card-media svg { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
/* Midnight / Daylight. A quiet label, not a badge. */
.product-card .card-mood { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--ink-mute); margin-top: 16px; }
.product-card .card-name { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--ink); margin-top: 18px; letter-spacing: 0.01em; }
.product-card .card-mood + .card-name { margin-top: 3px; }
.product-card .card-note { font-family: var(--serif); font-size: 0.92rem; font-style: italic; letter-spacing: 0.01em; color: var(--ink-mute); margin-top: 5px; }
.product-card .card-price { font-size: 0.9rem; color: var(--ink-soft); margin-top: 10px; font-variant-numeric: tabular-nums; }
.product-card .quick-add { margin-top: auto; padding-top: 16px; opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.product-card:hover .quick-add, .product-card:focus-within .quick-add { opacity: 1; transform: translateY(0); }
@media (hover: none) { .product-card .quick-add { opacity: 1; transform: none; } }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.product-gallery {
  position: sticky; top: 100px;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; max-height: 74vh;
  overflow: hidden; isolation: isolate;
  background: var(--bg-card); border-radius: 18px;
}
.product-gallery img, .product-gallery svg { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.product-detail { padding-top: 12px; }
.product-detail .eyebrow { display: block; margin-bottom: var(--s2); }
.product-detail .product-mood { margin-bottom: 10px; }
.product-detail h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--ink); line-height: 1.06; }
.product-detail .inspired { margin-top: 10px; font-size: 0.86rem; color: var(--ink-mute); font-style: italic; }
.product-detail .price-row { margin-top: var(--s3); display: flex; align-items: baseline; gap: 10px; }
.product-detail .price { font-size: 1.3rem; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Size sits on the price line, joined by the same gold dot the announcement bar
   uses. Deliberately the same face and figure style as the price: the brand
   serif sets old-style figures, so "50" came out at two different heights next
   to the price's lining numerals and read as "5oml". */
.product-size { font-size: 1rem; color: var(--ink-mute); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.01em; }
.size-dot { align-self: center; flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.product-detail .price-row { gap: 9px; }

/* Cards are tighter, so the dot would crowd: keep it on its own line. */
.card-price .size-dot { display: none; }
.card-price .product-size { display: block; margin-top: 3px; font-size: 0.8rem; }
.product-detail .description { margin-top: var(--s3); color: var(--ink-soft); line-height: 1.8; font-size: 0.95rem; }
.product-detail .description p { margin-bottom: 1em; }

.variant-picker { margin-top: var(--s4); }
.variant-picker .variant-label { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-mute); margin-bottom: 12px; }
.variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-options input { position: absolute; opacity: 0; pointer-events: none; }
.variant-options label { display: inline-block; padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.82rem; color: var(--ink-soft); cursor: pointer; transition: all 0.25s var(--ease); }
.variant-options input:checked + label { border-color: var(--ink); background: var(--ink); color: #F4EEE2; }
.variant-options input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }

.product-detail .add-to-cart { margin-top: var(--s5); }
.product-trust { margin-top: var(--s5); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--line); padding-top: var(--s4); }
.product-trust .trust-item { font-size: 0.74rem; color: var(--ink-mute); letter-spacing: 0.02em; }
.product-trust .trust-item strong { display: block; color: var(--ink); font-size: 0.82rem; margin-bottom: 3px; }

/* Scent notes as chips */
.scent-notes { margin-top: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s4); }
.notes-label { display: block; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--gold-text); margin-bottom: 16px; }
/* Notes set as typography, not UI pills. */
/* Pills rather than a separated run of words. The old `li + li::before`
   separator sat inside each note, so on wrap it dropped to the next line on its
   own ("· Musk"). Pills carry no separator, so wrapping cannot break them, and
   two-word notes like "Exotic Fruits" stay together. */
.note-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.note-list li {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 400; color: var(--ink);
  letter-spacing: 0.01em; line-height: 1;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
}

/* Merchant copy is often pasted from Word and carries inline fonts/sizes.
   Never let it override the brand typography. */
.rte [style], .description [style], .rte font, .description font {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  background: none !important;
}

/* Sticky mobile add-to-cart */
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(250,250,248,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }

/* ============================================================
   BUNDLE OFFER
   ============================================================ */
.bundle-badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(28,23,16,0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  color: #F6F1E7; white-space: nowrap; pointer-events: none;
}

.bundle-strip {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 9px 12px;
  border: 1px solid var(--gold); border-radius: 12px;
  background: rgba(184,149,106,0.10);
}
.bundle-strip[hidden] { display: none; }
/* Exactly one copy shows. The sticky one rides inside .sticky-atc, which is
   already mobile-only; the inline one takes over from 901px up. */
.bundle-strip--inline { display: none; margin: 0 0 var(--s2); }
@media (min-width: 901px) {
  .bundle-strip--inline { display: flex; }
}
.bundle-strip-text {
  flex: 1; min-width: 0;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  color: var(--gold-text); line-height: 1.4;
}
.bundle-strip-text b { font-weight: 600; color: var(--ink); }
.bundle-strip-cta {
  flex-shrink: 0; padding: 7px 14px; border-radius: 999px;
  background: var(--ink); color: #F6F1E7; text-decoration: none;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}
.bundle-strip-cta[hidden] { display: none; }
.bundle-strip.is-unlocked { border-color: var(--gold-deep); background: rgba(184,149,106,0.18); }
.bundle-strip-close {
  flex-shrink: 0; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-mute); font-size: 17px; line-height: 1; cursor: pointer;
}
.bundle-strip-close:hover { color: var(--ink); }

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-overlay { position: fixed; inset: 0; z-index: 140; background: rgba(28,23,16,0.4); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); }
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 150; width: min(420px, 92vw); background: var(--paper); transform: translateX(100%); transition: transform 0.45s var(--ease); display: flex; flex-direction: column; box-shadow: -20px 0 50px -20px rgba(28,23,16,0.3); }
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-bottom: 1px solid var(--line); }
.cart-drawer .drawer-head h2 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--ink); }
.cart-drawer .drawer-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -10px; font-size: 1.4rem; color: var(--ink-mute); }
.cart-items { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
.cart-line img { width: 64px; height: 80px; object-fit: contain; background: var(--bg-card); border-radius: 8px; }
.cart-line .cl-name { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.cart-line .cl-variant { font-size: 0.72rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.cart-line .cl-qty { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; font-size: 0.82rem; }
.cart-line .cl-qty button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; font-size: 1rem; color: var(--ink-mute); line-height: 1; }
.cart-line .cl-price { font-size: 0.88rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-line .cl-remove { display: inline-block; padding: 8px 0; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
.cart-line .cl-remove:hover { color: #B0442F; }
.cart-empty { text-align: center; color: var(--ink-mute); padding: 60px 24px; font-size: 0.95rem; }
.cart-foot { padding: 20px 24px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.cart-foot .subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cart-foot .subtotal .s-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.cart-foot .subtotal .s-val { font-size: 1.2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-foot .tax-note { font-size: 0.72rem; color: var(--ink-mute); margin-bottom: var(--s3); }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-container { max-width: 720px; margin: 0 auto; }
.faq-group + .faq-group { margin-top: var(--s8); }
.faq-group h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--ink); margin-bottom: var(--s2); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: 0.95rem; font-weight: 500; text-align: left; color: var(--ink); transition: color 0.3s; }
.faq-question:hover { color: var(--ink); }
.faq-icon { font-size: 1.2rem; font-weight: 300; color: var(--ink-mute); transition: transform 0.4s var(--ease); flex-shrink: 0; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); color: var(--gold); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.faq-answer-inner { padding-bottom: 22px; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.85; }
.faq-answer-inner a { color: var(--gold-deep); border-bottom: 1px solid var(--gold); }

/* ============================================================
   PAGE / EDITORIAL / CONTACT
   ============================================================ */
.page-hero { padding: 100px 0 64px; text-align: center; background: var(--bg-warm); }
.page-hero .eyebrow { display: block; margin-bottom: var(--s2); }
.page-hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--ink); letter-spacing: -0.01em; }
.page-hero p { max-width: 460px; margin: var(--s2) auto 0; color: var(--ink-mute); }
.rte { max-width: 680px; margin: 0 auto; }
.rte p { color: var(--ink-soft); line-height: 1.95; margin-bottom: 1.2em; font-size: 0.98rem; }
.rte h2 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; color: var(--ink); margin: 1.4em 0 0.5em; }
.rte a { color: var(--gold-deep); border-bottom: 1px solid var(--gold); }

/* --- Story page --- */
.story-block { padding: 26px 0; }
.story-block .rte p { font-size: 1.02rem; line-height: 1.95; }
.rte--lede p { font-size: 1.22rem; line-height: 1.75; color: var(--ink); font-weight: 300; }
.story-quote { background: var(--ink); padding: 92px 32px; margin: 64px 0; text-align: center; }
.story-quote .q-rule { display: block; width: 38px; height: 1px; background: var(--gold); margin: 0 auto 30px; }
.story-quote p { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.4; letter-spacing: -0.01em; color: #F4EEE2; max-width: 780px; margin: 0 auto; }
.photo-band--wide { aspect-ratio: 1656 / 591; max-height: 620px; }
@media (max-width: 900px) { .photo-band--wide { aspect-ratio: 4 / 3; height: auto; min-height: 0; } }
.story-closing { text-align: center; }
.story-closing h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); color: var(--ink); letter-spacing: -0.01em; margin-bottom: var(--s5); }

.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; max-width: 900px; margin: 0 auto; }
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-detail h4 { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; color: var(--ink-mute); }
.contact-detail p, .contact-detail a { color: var(--ink-soft); font-size: 0.92rem; }
.contact-detail a:hover { color: var(--gold); }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-field label { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink-mute); }
.form-field input, .form-field textarea { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-size: 0.9rem; outline: none; color: var(--ink); transition: border-color 0.3s; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--gold); }

/* ============================================================
   EMAIL SIGNUP BAND
   ============================================================ */
.signup-band { background: var(--bg-warm); text-align: center; }
.signup-inner { max-width: 520px; margin: 0 auto; }
.signup-inner .eyebrow { display: block; margin-bottom: var(--s2); }
.signup-inner h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--ink); margin-bottom: var(--s3); }
.signup-form { display: flex; gap: 8px; max-width: 420px; margin: var(--s4) auto 0; }
.signup-form input { flex: 1; padding: 15px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 0.9rem; outline: none; }
.signup-form input:focus { border-color: var(--gold); }
/* The base rule centres itself with `auto` side margins, which suits the
   centred email-signup section. On the left-aligned password hero that pushed
   the form off the heading, so this variant pins it to the text edge. */
.signup-form--start { margin-left: 0; margin-right: 0; margin-top: 0; }
/* Aligning the input's *box* to the text margin leaves its placeholder 21px
   adrift, because the pill carries 20px of padding plus a 1px border. Pull the
   form back by exactly that so the typed text lines up with the copy above it.
   Desktop only: below 900px the hero copy is centred, where this would skew it. */
@media (min-width: 901px) {
  .signup-form--start { margin-left: calc(-1 * (20px + 1px)); }
}

/* PASSWORD PAGE
   The gate has one job, so it has to fit on one screen. The copy column used to
   carry its own min-height:100vh inline, which on a phone sat under a 48vh photo
   and pushed the password field a full screen below the fold. The section owns
   the full-height rule now and the photo takes a smaller slice on mobile. */
.password-mast {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; padding: 22px 22px 0;
}
.password-mast .wordmark {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: 0.36em; text-indent: 0.36em; color: var(--ink); line-height: 1; white-space: nowrap;
}
@media (min-width: 901px) {
  /* Over the cream copy column, so it can sit left with the rest of the text. */
  .password-mast { justify-content: flex-start; padding: 32px 0 0 6vw; }
}
@media (max-width: 900px) {
  /* On phones the photo is at the top and the bottle sits dead-centre, so an
     overlaid wordmark collides with it at some viewport heights (Instagram's
     in-app browser). The H1 right below already says the name; drop the overlay. */
  .password-mast { display: none; }
}
.hero-split.password-hero { min-height: 100vh; min-height: 100dvh; }
body.password-page { background: #ECE2D0; }
.signup-note { margin: 12px 0 0; font-size: 0.78rem; color: var(--ink-mute); }
.signup-success { margin: 0; color: var(--gold-deep); font-size: 0.95rem; line-height: 1.6; }
.signup-error { margin: 0 0 12px; color: #B0442F; font-size: 0.85rem; }
/* Staff entrance. Collapsed by default so the signup is the only obvious action,
   and built on <details> so it opens without JS. */
.pw-reveal { margin-top: 28px; }
.pw-reveal > summary {
  cursor: pointer; display: inline-block; list-style: none;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.pw-reveal > summary::-webkit-details-marker { display: none; }
.pw-reveal > summary:hover { color: var(--ink); border-bottom-color: var(--gold); }
.pw-reveal[open] > summary { margin-bottom: 14px; }
.password-hero .hero-copy { min-height: 0; }
@media (max-width: 900px) {
  .password-hero .hero-photo { height: 34vh; min-height: 200px; }
  .password-hero .hero-copy { padding: 36px 22px 44px; }
}

/* ============================================================
   BLOG / JOURNAL
   ============================================================ */
.article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; max-width: 960px; margin: 0 auto; }
.article-card .art-media { aspect-ratio: 3/2; overflow: hidden; border-radius: 12px; background: var(--bg-card); margin-bottom: 20px; }
.article-card .art-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.article-card:hover .art-media img { transform: scale(1.04); }
.article-card .art-meta { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.article-card h2 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--ink); margin: 8px 0; line-height: 1.2; }
.article-card p { font-size: 0.9rem; color: var(--ink-mute); line-height: 1.7; }
.article-body { max-width: 680px; margin: 0 auto; }
.article-body img { border-radius: 12px; margin: 1.5em 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: #F4EEE2; padding: 72px 32px 44px; }
.footer-top { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand .foot-mark { font-family: var(--serif); font-size: 1.3rem; letter-spacing: 0.3em; text-indent: 0.3em; color: #F4EEE2; margin-bottom: 14px; }
.footer-brand p { font-size: 0.8rem; color: rgba(255,255,255,0.4); max-width: 280px; line-height: 1.7; }
.footer-links { display: flex; gap: 56px; }
.footer-col h4 { font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; color: rgba(246,241,231,0.5); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.8rem; color: rgba(255,255,255,0.5); transition: color 0.3s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { max-width: var(--maxw); margin: 24px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.footer-bottom p { font-size: 0.65rem; color: rgba(255,255,255,0.3); letter-spacing: 0.06em; }
.footer-bottom .socials { display: inline-flex; gap: 14px; }
.footer-bottom .socials a { color: rgba(255,255,255,0.5); }
.footer-bottom .socials a:hover { color: var(--gold); }

/* --- toast --- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 200; background: var(--ink); color: #F4EEE2; padding: 14px 22px; border-radius: 999px; font-size: 0.8rem; letter-spacing: 0.02em; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); }
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .hero-copy { padding: 96px 48px; }
  .product-layout { gap: 48px; }
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; min-height: auto; }
  .hero-photo { order: 1; height: 48vh; min-height: 300px; }
  .hero-photo::before { display: none; }
  .hero-copy { order: 2; padding: 64px 32px 72px; }
  .hero-copy-inner { max-width: 460px; margin: 0 auto; text-align: center; }
  .hero-copy-inner .eyebrow { justify-content: center; }
  .hero-copy-inner .hero-desc { margin-left: auto; margin-right: auto; }
  .ethos-row { grid-template-columns: 1fr; gap: 14px; padding: 40px 0; text-align: center; }
  .ethos-support { max-width: 420px; margin: 0 auto; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .product-layout { grid-template-columns: 1fr; gap: 32px; }
  .product-gallery { position: relative; top: auto; }
  .header-nav { display: none; }
  .menu-toggle { display: flex; }
  .sticky-atc { display: block; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .article-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-top { flex-direction: column; gap: 36px; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 22px; }
  .sec { padding: 64px 0; }
  .masthead { padding: 15px 22px; }
  .masthead .wordmark { font-size: 1.35rem; letter-spacing: 0.32em; text-indent: 0.32em; }
  .hero-copy { padding: 44px 22px 56px; }
  .hero-title { font-size: clamp(2.4rem, 9.5vw, 3.2rem); }
  .product-grid { gap: 26px 14px; }
  .product-card .card-name { font-size: 1.2rem; }
  .signup-form { flex-direction: column; }
  .signup-form input, .signup-form .btn { width: 100%; }
  .product-trust { grid-template-columns: 1fr; gap: 12px; }
  /* Full-height dark blocks feel oppressive on a phone. */
  .story-quote { padding: 56px 22px; margin: 40px 0; }
  .story-block { padding: 18px 0; }
  .ethos-row { padding: 34px 0; }
  .note-list li { font-size: 0.96rem; padding: 8px 13px; }
  .cart-drawer .drawer-head { padding: 18px 20px; }
  /* Stop the sticky buy bar covering the last of the page. */
  .template-product .site-footer { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* cache-bump 1785594001 */