/* ============================================================
   Robot Fragrances — shared stylesheet
   A classy, minimal design system for a fragrance decanting shop
   ============================================================ */

/* ---- Fonts (self-hosted) ---------------------------------- *
   Cormorant Garamond and Jost, both under the SIL Open Font
   Licence — full text in assets/fonts/OFL.txt.

   These are VARIABLE fonts: one file carries the whole weight
   range, so `font-weight: 400 600` below is a range, not a typo.
   That is why there are six files and not eighteen — Google Fonts
   serves the same variable file once per weight you ask for.

   Self-hosted on purpose. Loading them from Google meant a DNS
   lookup, a TLS handshake and a render-blocking stylesheet on
   another origin before a single glyph could be requested — and
   it handed Google every visitor's IP address, which we then had
   to disclose in the privacy policy. Now nothing leaves the site.

   Adding a weight or style means adding a file: Google's CSS API
   is the easiest source, and the unicode-range values below come
   straight from it. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Design tokens ---------------------------------------- */
:root {
  /* Palette: warm ivory + charcoal ink + a single brass accent */
  --bg:        #f6f4ef;
  --bg-card:   #fffefb;
  --ink:       #1b1b1b;
  --ink-soft:  #4a4a47;
  --muted:     #7c7a73;
  --accent:    #9a7b4f;   /* antique brass */
  --accent-2:  #b8975f;   /* lighter brass for hovers */
  --line:      rgba(27, 27, 27, 0.12);
  --line-soft: rgba(27, 27, 27, 0.07);
  --dark:      #161513;   /* deep charcoal for dark sections */
  --dark-ink:  #e9e6df;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --container: 1180px;
  --radius: 4px;
  --radius-card: 14px;   /* softer corners for fragrance displays */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; padding: 0; }

button,
input,
textarea,
select { font: inherit; color: inherit; }

/* ---- Typography ------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.h-display {
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); }

p { color: var(--ink-soft); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 54ch;
}

.serif-accent { font-family: var(--serif); font-style: italic; }

/* ---- Layout helpers --------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h2 + p { margin-top: 1rem; }

.divider { height: 1px; background: var(--line-soft); border: 0; }

/* ---- Buttons --------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95em 2em;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35em;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-arrow:hover { color: var(--accent); border-color: var(--accent); gap: 0.85em; }

/* ---- Header / Nav ---------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.brand .logo-mark { width: 30px; height: 30px; color: var(--accent); flex: none; }
.brand b { font-weight: 600; }
.brand span { color: var(--muted); font-weight: 400; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  margin-left: auto;
}
.nav-links a {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.5rem;
  transition: color 0.3s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-cta { white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span::before { transform: translate(-50%, -6px); }
.nav-toggle span::after  { transform: translate(-50%, 6px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translate(-50%, 0) rotate(45deg); background: var(--ink); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translate(-50%, 0) rotate(-45deg); background: var(--ink); }

/* ---- Hero ------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(4rem, 11vw, 9rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.hero h1 { margin-block: 1.25rem; }
.hero .lead { margin-bottom: 2.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.hero-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 30% 15%, #fffdf8 0%, #efeadf 55%, #e4ddcd 100%);
  border: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  box-shadow: 0 40px 80px -50px rgba(27,27,27,0.4);
}
.hero-figure .bottle { width: 56%; color: var(--ink); }
.hero-figure::after {
  content: "EST. 2026 · DECANTED WITH CARE";
  position: absolute;
  bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--muted);
  white-space: nowrap;
}

.hero-meta {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}
.hero-meta div { line-height: 1.3; }
.hero-meta .num { font-family: var(--serif); font-size: 1.9rem; color: var(--ink); }
.hero-meta .lbl { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---- Feature strip --------------------------------------- */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.feature .ico { width: 34px; height: 34px; color: var(--accent); margin-bottom: 0.4rem; }
.feature h3 { font-size: 1.3rem; }
.feature p { font-size: 0.95rem; }

/* ---- Product grid ---------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 96px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -40px rgba(27,27,27,0.45);
  border-color: var(--line);
}
/* Highlight a card arrived at via deep link (e.g. from the quiz) */
.product-card:target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 30px 60px -40px rgba(27,27,27,0.45);
}
.product-thumb {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 100% at 50% 0%, #fffdf8, #efeadf);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
.product-thumb.has-photo { padding: 0; }
.product-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb .bottle { width: 42%; color: var(--ink); transition: transform 0.5s var(--ease); }
.product-card:hover .product-thumb .bottle { transform: translateY(-4px) scale(1.03); }
.product-tag {
  position: absolute;
  top: 0.85rem; left: 0.85rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--line-soft);
  padding: 0.3em 0.7em;
  border-radius: 100px;
}
.product-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.product-house { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.product-name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; }
.product-notes { font-size: 0.88rem; color: var(--ink-soft); flex: 1; }
.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}
.product-price { font-family: var(--serif); font-size: 1.25rem; }
.product-price small { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; }
.product-add {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6em 1em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.product-add:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Size selector (within product card) ----------------- */
.size-options { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.size-opt {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.4em 0.75em;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.size-opt:hover { border-color: var(--ink); color: var(--ink); }
.size-opt.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Filter bar ------------------------------------------ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.filter-bar button {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.55em 1.15em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter-bar button:hover { border-color: var(--ink); color: var(--ink); }
.filter-bar button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Steps (how it works) -------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); counter-reset: step; }
.step { position: relative; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--accent);
  position: absolute;
  top: 1.25rem; left: 0;
}
.step h3 { margin-bottom: 0.6rem; }
.step p { font-size: 0.95rem; }

/* ---- Split / editorial blocks ---------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split--reverse .split-media { order: 2; }
.split-media {
  aspect-ratio: 5 / 6;
  border-radius: var(--radius);
  background: radial-gradient(120% 90% at 30% 20%, #fffdf8, #ece6da 70%, #e0d8c7);
  border: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
}
.split-media .bottle { width: 50%; color: var(--ink); }
.split-copy .eyebrow { margin-bottom: 1rem; }
.split-copy h2 { margin-bottom: 1.1rem; }
.split-copy p + p { margin-top: 1rem; }
.split-copy .btn,
.split-copy .link-arrow { margin-top: 1.75rem; }

.checklist { margin-top: 1.5rem; display: grid; gap: 0.8rem; }
.checklist li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-soft); font-size: 0.98rem; }
.checklist li::before { content: "—"; color: var(--accent); flex: none; }

/* ---- Dark band ------------------------------------------- */
.band-dark {
  background: var(--dark);
  color: var(--dark-ink);
}
.band-dark .eyebrow { color: var(--accent-2); }
.band-dark h2 { color: #fff; }
.band-dark p { color: #b7b2a8; }

/* ---- Quote ----------------------------------------------- */
.quote { text-align: center; max-width: 46ch; margin-inline: auto; }
.quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  line-height: 1.3;
  color: #fff;
}
.quote cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-2); }

/* ---- Stats ----------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stats .num { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.4rem); color: #fff; line-height: 1; }
.stats .lbl { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: #b7b2a8; margin-top: 0.6rem; }

/* ---- FAQ ------------------------------------------------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.4rem 0;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 22px; height: 22px; position: relative; transition: transform 0.3s var(--ease); }
.faq summary .plus::before,
.faq summary .plus::after { content: ""; position: absolute; background: var(--accent); }
.faq summary .plus::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq summary .plus::after  { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); transition: opacity 0.3s var(--ease); }
.faq details[open] summary .plus::after { opacity: 0; }
.faq details p { margin-top: 1rem; padding-right: 2rem; }

/* ---- Form ------------------------------------------------ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field input,
.field textarea,
.field select {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9em 1em;
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }

/* ---- Contact layout -------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
.contact-info dl { display: grid; gap: 1.6rem; margin-top: 0.5rem; }
.contact-info dt { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.contact-info dd { font-size: 1.05rem; color: var(--ink); margin-top: 0.25rem; }

/* ---- Newsletter / CTA card ------------------------------- */
.cta-card {
  background: var(--dark);
  color: var(--dark-ink);
  border-radius: var(--radius);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.cta-card h2 { color: #fff; }
.cta-card p { color: #b7b2a8; max-width: 48ch; margin: 1rem auto 2rem; }
.newsletter {
  display: flex;
  gap: 0.6rem;
  max-width: 480px;
  margin-inline: auto;
}
.newsletter input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  padding: 0.9em 1.1em;
  color: #fff;
}
.newsletter input::placeholder { color: #9a958b; }
.newsletter input:focus { outline: none; border-color: var(--accent-2); }

/* ---- Page hero (interior) -------------------------------- */
.page-hero { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem); }
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-hero h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); }
.page-hero p { margin-top: 1.25rem; }
.breadcrumb { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a:hover { color: var(--accent); }

/* ---- Footer ---------------------------------------------- */
.site-footer {
  background: var(--dark);
  color: var(--dark-ink);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .brand { color: #fff; margin-bottom: 1rem; }
.footer-brand .brand .logo-mark { color: var(--accent-2); }
.footer-brand p { color: #9a958b; font-size: 0.92rem; max-width: 32ch; }
.footer-col h4 { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 1.1rem; font-weight: 500; }
.footer-col li { margin-bottom: 0.7rem; }
.footer-col a { color: #b7b2a8; font-size: 0.92rem; transition: color 0.3s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 0.8rem;
  color: #8a857c;
}
.footer-bottom .socials { display: flex; gap: 1.25rem; }
.footer-bottom .socials a:hover { color: #fff; }

/* ---- Quiz / Scent Finder --------------------------------- */
.quiz { max-width: 760px; margin-inline: auto; }

.quiz-progress { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.quiz-progress .count { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.quiz-bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.quiz-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }

.quiz-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 40px 80px -60px rgba(27, 27, 27, 0.5);
}
.quiz-question { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.12; margin: 0.5rem 0 1.6rem; }

.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.quiz-option {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  cursor: pointer;
  font-family: var(--sans);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.quiz-option:hover { border-color: var(--ink); transform: translateY(-2px); }
.quiz-option.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.quiz-option .opt-label { font-size: 1rem; color: var(--ink); }
.quiz-option .opt-desc { font-size: 0.8rem; color: var(--muted); }

.quiz-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.6rem; min-height: 1.5rem; }
.quiz-back {
  background: transparent; border: 0; cursor: pointer;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  padding: 0.4rem 0; transition: color 0.25s var(--ease);
}
.quiz-back:hover { color: var(--ink); }
.quiz-back[hidden] { display: none; }
.quiz-hint { font-size: 0.74rem; letter-spacing: 0.05em; color: var(--muted); }

/* Result */
.quiz-result { animation: quizIn 0.6s var(--ease) both; }
@keyframes quizIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.result-eyebrow { text-align: center; margin-bottom: 1.25rem; }
.result-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 40px 80px -60px rgba(27, 27, 27, 0.5);
}
.result-media {
  display: grid; place-items: center;
  padding: 2rem;
  background: radial-gradient(120% 90% at 30% 15%, #fffdf8, #ece6da 70%, #e0d8c7);
  border-right: 1px solid var(--line-soft);
}
.result-media .bottle { width: 58%; color: var(--ink); }
.result-media.has-photo { padding: 0; place-items: stretch; min-height: 320px; overflow: hidden; }
.result-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-body { padding: clamp(1.75rem, 4vw, 2.75rem); }
.result-body .product-house { color: var(--muted); }
.result-name { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.05; margin: 0.3rem 0 0.6rem; }
.result-notes { color: var(--ink-soft); }
.result-price { font-family: var(--serif); font-size: 1.45rem; margin-top: 1.1rem; }
.result-price small { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; }
.result-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.result-alts { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line-soft); }
.result-alts h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 0.9rem; }
.alt-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.alt-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  border: 1px solid var(--line); border-radius: 100px;
  padding: 0.5em 1.05em; font-size: 0.86rem; color: var(--ink);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.alt-chip span { color: var(--muted); font-size: 0.85em; }
.alt-chip:hover { border-color: var(--accent); color: var(--accent); }
.alt-chip:hover span { color: var(--accent); }

@media (max-width: 620px) {
  .quiz-options { grid-template-columns: 1fr; }
  .result-card { grid-template-columns: 1fr; }
  .result-media { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 2.5rem; }
  .result-media .bottle { width: 40%; }
}

/* ---- Reveal animation ------------------------------------ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Responsive ------------------------------------------ */
/* Collapse the nav into a mobile menu (early, to leave room for the cart) */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .site-header.is-open .nav-links {
    display: flex;
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-left: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem;
  }
  .site-header.is-open .nav-links a { width: 100%; padding-block: 0.85rem; border-bottom: 1px solid var(--line-soft); }
  .site-header.is-open .nav-links a::after { display: none; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { max-width: 420px; order: -1; }
  .feature-strip { grid-template-columns: 1fr; gap: 2rem; }
  .steps { grid-template-columns: 1fr; }
  .split,
  .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: -1; }
  .split-media { max-width: 460px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .newsletter { flex-direction: column; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Cart, product detail & checkout
   ============================================================ */

/* ---- Linked product names -------------------------------- */
.product-name a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease); }
.product-name a:hover { color: var(--accent); }
a.product-thumb { cursor: pointer; }

/* ---- Header cart button ---------------------------------- */
.cart-btn {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.cart-btn:hover { border-color: var(--ink); }
.cart-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: -7px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 100px;
  background: var(--accent); color: #fff;
  font-size: 0.64rem; font-weight: 600;
  display: grid; place-items: center;
}
.cart-btn.bump { animation: cartBump 0.4s var(--ease); }
@keyframes cartBump { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---- Cart drawer ----------------------------------------- */
body.cart-open { overflow: hidden; }
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 19, 17, 0.5);
  z-index: 90;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
body.cart-open .cart-overlay { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0;
  height: 100%; width: min(420px, 92vw);
  background: var(--bg);
  z-index: 95;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  box-shadow: -30px 0 80px -40px rgba(0, 0, 0, 0.45);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.cart-head h2 { font-size: 1.4rem; }
.cart-close { background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--muted); }
.cart-close:hover { color: var(--ink); }
.cart-body { flex: 1; overflow-y: auto; padding: 0 1.5rem; }
.cart-foot { padding: 1.25rem 1.5rem; border-top: 1px solid var(--line-soft); }
.cart-drawer.is-empty .cart-foot { display: none; }
.cart-foot .btn { width: 100%; justify-content: center; margin-top: 0.6rem; }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); font-size: 1.3rem; }
.cart-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.4rem; }
.cart-empty { text-align: center; padding: 3.5rem 1rem; color: var(--muted); display: flex; flex-direction: column; gap: 1rem; align-items: center; }

/* Decant of the month upsell */
.cart-upsell {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr auto; gap: 0.75rem; align-items: center;
  margin: 0.9rem 1.5rem 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-card));
}
.cart-upsell[hidden] { display: none; }
.cart-upsell-tag {
  position: absolute; top: -9px; left: 12px;
  background: var(--accent); color: #fff;
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.2em 0.6em; border-radius: 100px;
}
.cart-upsell-media { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-soft); display: grid; place-items: center; background: radial-gradient(120% 100% at 50% 0%, #fffdf8, #efeadf); }
.cart-upsell-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-upsell-media .cart-svg { width: 55%; color: var(--ink); display: block; }
.cart-upsell-media .bottle { width: 100%; }
.cart-upsell-info { min-width: 0; }
.cart-upsell-name { font-family: var(--serif); font-size: 1.05rem; line-height: 1.1; color: var(--ink); text-decoration: none; display: block; }
.cart-upsell-name:hover { color: var(--accent); }
.cart-upsell-price { font-size: 0.76rem; color: var(--muted); }
.cart-upsell-add {
  white-space: nowrap;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: 100px; padding: 0.55em 0.85em; cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.cart-upsell-add:hover { background: var(--ink); color: #fff; }

.cart-item {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 0.9rem; padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
.cart-item-media {
  width: 60px; height: 60px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #fffdf8, #efeadf);
  border: 1px solid var(--line-soft);
  display: grid; place-items: center;
}
.cart-item-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-media .cart-svg { width: 55%; color: var(--ink); display: block; }
.cart-item-media .bottle { width: 100%; }
.cart-item-name { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.cart-item-name:hover { color: var(--accent); }
.cart-item-size { font-size: 0.8rem; color: var(--muted); margin: 0.15rem 0 0.55rem; }
.cart-item-controls { display: flex; align-items: center; gap: 0.9rem; }
.cart-item-price { font-family: var(--serif); font-size: 1.05rem; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 100px; }
.qty button { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; color: var(--ink); font-size: 1rem; line-height: 1; display: grid; place-items: center; }
.qty button:hover { color: var(--accent); }
.qty-val { min-width: 24px; text-align: center; font-size: 0.86rem; }
.cart-remove { background: none; border: 0; cursor: pointer; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cart-remove:hover { color: var(--ink); text-decoration: underline; }

/* ---- Product detail page --------------------------------- */
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pd-media {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: var(--radius-card); overflow: hidden;
  background: radial-gradient(120% 90% at 30% 15%, #fffdf8, #ece6da 70%, #e0d8c7);
  border: 1px solid var(--line-soft);
  display: grid; place-items: center;
  box-shadow: 0 40px 80px -55px rgba(27, 27, 27, 0.45);
}
.pd-media .bottle { width: 46%; color: var(--ink); }
.pd-media.has-photo { place-items: stretch; }
.pd-photo { width: 100%; height: 100%; object-fit: cover; }
.pd-info .product-house { color: var(--muted); }
.pd-name { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.04; margin: 0.4rem 0 0.6rem; }
.pd-notes { font-size: 1.02rem; color: var(--ink-soft); }
.pd-desc { margin-top: 1rem; color: var(--ink-soft); }
.pd-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin: 1.75rem 0; padding: 1.5rem 0; border-block: 1px solid var(--line-soft); }
.pd-spec dt { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pd-spec dd { font-size: 1rem; color: var(--ink); margin-top: 0.2rem; }
.pd-field { margin-bottom: 1.25rem; }
.pd-label { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.pd-sizes .size-opt { font-size: 0.8rem; padding: 0.6em 0.95em; }
.pd-sizes .size-opt span { color: var(--muted); margin-left: 0.35em; }
.pd-sizes .size-opt.is-active span { color: rgba(255, 255, 255, 0.7); }
.pd-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin: 1.25rem 0 1.5rem; }
.pd-qty button { width: 34px; height: 34px; }
.pd-price-wrap { text-align: right; }
.pd-price { font-family: var(--serif); font-size: 1.9rem; line-height: 1; }
.pd-add { width: 100%; justify-content: center; }
.pd-reassure { margin-top: 1.75rem; display: grid; gap: 0.7rem; }
.pd-reassure li { display: flex; gap: 0.7rem; font-size: 0.92rem; color: var(--ink-soft); }
.pd-reassure li::before { content: "✓"; color: var(--accent); }

/* ---- Checkout -------------------------------------------- */
.checkout-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.checkout-form fieldset { border: 0; padding: 0; margin: 0 0 2.25rem; }
.checkout-form legend { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 1rem; padding: 0; }
.checkout-form > .btn { width: 100%; justify-content: center; }

/* Payment panel — Stripe handoff (hosted) or mount point (embedded) */
.pay-panel {
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2rem);
}
.pay-panel h2 { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 0.5rem; }
.pay-panel > .btn { width: 100%; justify-content: center; margin-top: 1.25rem; }
.pay-panel > .btn[disabled] { opacity: 0.6; pointer-events: none; }
.pay-panel code {
  font-size: 0.85em; background: var(--bg-alt, #f3efe6);
  padding: 0.1em 0.4em; border-radius: 4px;
}
.pay-panel .pd-reassure { margin-bottom: 0; }
.field label .opt { text-transform: none; letter-spacing: 0; opacity: 0.75; }
.form-note--error { color: #a4342c; }

/* The embedded Stripe form sizes its own iframe; reserve height so
   the page doesn't jump while it loads. */
.pay-panel--embed { padding: clamp(1rem, 2vw, 1.25rem); }
#checkout-embed { min-height: 480px; }
.checkout-summary {
  background: var(--bg-card); border: 1px solid var(--line-soft);
  border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2rem);
  position: sticky; top: 96px;
}
.checkout-summary h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.sum-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 0.85rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); }
.sum-media { position: relative; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #fffdf8, #efeadf); border: 1px solid var(--line-soft); display: grid; place-items: center; }
.sum-media img { width: 100%; height: 100%; object-fit: cover; }
.sum-media .cart-svg { width: 55%; color: var(--ink); display: block; }
.sum-media .bottle { width: 100%; }
.sum-qty { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 100px; background: var(--ink); color: #fff; font-size: 0.64rem; display: grid; place-items: center; }
.sum-info { min-width: 0; }
.sum-name { font-size: 0.92rem; color: var(--ink); }
.sum-size { font-size: 0.78rem; color: var(--muted); }
.sum-price { font-family: var(--serif); font-size: 1rem; }
.sum-line { display: flex; justify-content: space-between; padding-top: 0.85rem; color: var(--ink-soft); font-size: 0.95rem; }
.sum-line--total { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); border-top: 1px solid var(--line); margin-top: 0.5rem; padding-top: 1rem; }

.confirm { text-align: center; }
.confirm-card { max-width: 560px; margin-inline: auto; }
.confirm-check { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.9rem; display: grid; place-items: center; margin: 0 auto 1.5rem; }
.confirm-card .eyebrow { margin-bottom: 0.5rem; }
.confirm-email { color: var(--ink-soft); font-size: 0.95rem; }

@media (max-width: 860px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-media { max-width: 440px; }
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; order: -1; }
}

@media (max-width: 480px) {
  .pd-specs { grid-template-columns: 1fr 1fr; }
  .pd-row { flex-wrap: wrap; gap: 1rem; }
}

/* ---- Discovery set builder --------------------------------- */
.ds-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(0.85rem, 2vw, 1.25rem);
}

/* Each tester is a toggle, so it's a <button> — reset the chrome. */
.ds-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.7rem;
  padding: 0.9rem;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.ds-card:hover { border-color: var(--line); transform: translateY(-2px); }
.ds-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-card.is-picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(154, 123, 79, 0.12);
}

.ds-tick {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.ds-card.is-picked .ds-tick { opacity: 1; transform: scale(1); }

.ds-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #fffdf8, #efeadf);
  border: 1px solid var(--line-soft);
}
.ds-media img { width: 100%; height: 100%; object-fit: cover; }
.ds-media .ds-svg { width: 50%; color: var(--ink); display: block; }
.ds-media .bottle { width: 100%; }

.ds-info { display: grid; gap: 0.15rem; min-width: 0; }
.ds-house {
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.ds-name { font-family: var(--serif); font-size: 1.12rem; line-height: 1.25; }
.ds-notes {
  font-size: 0.78rem; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-price { font-family: var(--serif); font-size: 1rem; color: var(--ink); }

/* ---- Summary rail ---------------------------------------- */
.ds-summary {
  position: sticky; top: 96px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 3vw, 1.6rem);
}
.ds-count { display: flex; align-items: baseline; gap: 0.5rem; }
.ds-count-num { font-family: var(--serif); font-size: 2.4rem; line-height: 1; }
.ds-count-lbl { font-size: 0.85rem; color: var(--muted); }

.ds-bar {
  height: 4px; border-radius: 100px; background: var(--line-soft);
  margin: 0.9rem 0 1rem; overflow: hidden;
}
.ds-bar span {
  display: block; height: 100%; background: var(--accent);
  transition: width 0.35s var(--ease);
}

.ds-status { font-size: 0.86rem; color: var(--muted); }
.ds-status.is-on { color: var(--accent); }

.ds-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.ds-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.5rem 0.28rem 0.6rem;
  font-size: 0.76rem;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 100px;
}
.ds-chip-x {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-size: 1rem; line-height: 1; color: var(--muted);
}
.ds-chip-x:hover { color: var(--ink); }

.ds-totals { margin-top: 1.25rem; border-top: 1px solid var(--line-soft); padding-top: 0.9rem; }
.ds-line {
  display: flex; justify-content: space-between;
  font-size: 0.9rem; color: var(--ink-soft); padding-top: 0.4rem;
}
.ds-line--save { color: var(--accent); }
.ds-line--total {
  font-family: var(--serif); font-size: 1.3rem; color: var(--ink);
  border-top: 1px solid var(--line); margin-top: 0.6rem; padding-top: 0.8rem;
}
/* Below the threshold there are no lines above the total, so its rule
   sat a gap beneath the block's own rule — two stacked dividers with
   nothing between them. The block's rule is enough on its own. */
.ds-line--total:first-child {
  border-top: 0; margin-top: 0; padding-top: 0;
}

.ds-add { width: 100%; justify-content: center; margin-top: 1.1rem; }
.ds-add[disabled] { opacity: 0.45; pointer-events: none; }
.ds-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.6rem; }
.ds-clear {
  display: block; width: 100%; margin-top: 0.6rem; padding: 0.4rem;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.8rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.ds-clear:hover { color: var(--ink); }

@media (max-width: 900px) {
  .ds-layout { grid-template-columns: 1fr; }
  /* Keep the running total reachable without scrolling back up. */
  .ds-summary { position: sticky; top: auto; bottom: 0; order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-card, .ds-tick, .ds-bar span { transition: none; }
  .ds-card:hover { transform: none; }
}

/* A full set dims the remaining cards — still clickable to show why. */
.ds-card.is-locked { opacity: 0.45; }
.ds-card.is-locked:hover { opacity: 0.7; transform: none; }
.ds-status.is-warn { color: #a4342c; }

/* Discounted lines in the cart drawer and checkout summary */
.cart-item-size s { opacity: 0.55; margin-right: 0.15em; }
.cart-item-tag,
.sum-tag {
  display: inline-block;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.05em 0.4em; border-radius: 100px;
  background: var(--accent); color: #fff; vertical-align: 0.1em;
}
.sum-line--save { color: var(--accent); }

/* ---- Promotional placements (config.js features.*) --------- */

/* Cart drawer: "N more testers" nudge */
.cart-nudge { padding: 0 clamp(1.25rem, 4vw, 1.75rem) 0.25rem; }
.cart-nudge-link {
  display: block;
  padding: 0.7rem 0.9rem;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 0.82rem;
  color: var(--ink);
  transition: background 0.3s var(--ease);
}
.cart-nudge-link:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cart-nudge-link strong { font-weight: 500; color: var(--accent); }

/* Homepage discovery band */
.discovery-band .db-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.75rem, 5vw, 3.25rem);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
}
.db-copy .eyebrow { margin-bottom: 0.75rem; }
.db-copy h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.db-copy p { margin: 0.9rem 0 1.6rem; max-width: 48ch; }
.db-visual {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(0.4rem, 1.5vw, 0.9rem);
  color: var(--accent);
}
.db-vial { width: clamp(26px, 4vw, 40px); height: auto; opacity: 0.75; }
.db-vial:nth-child(odd) { transform: translateY(-6px); }

/* Footer newsletter */
.footer-news-wrap { margin-top: 1.75rem; }
.footer-news-wrap h4 {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dark-ink); margin-bottom: 0.35rem;
}
.footer-news-wrap p { font-size: 0.84rem; margin-bottom: 0.75rem; }
.footer-news { display: flex; gap: 0.5rem; max-width: 340px; }
.footer-news input {
  flex: 1; min-width: 0;
  padding: 0.6em 0.8em;
  border: 1px solid rgba(233, 230, 223, 0.25);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--dark-ink);
  font-size: 0.85rem;
}
.footer-news input::placeholder { color: rgba(233, 230, 223, 0.45); }
.footer-news input:focus { outline: 1px solid var(--accent-2); border-color: var(--accent-2); }
.footer-news .btn { padding: 0.6em 1.1em; font-size: 0.7rem; white-space: nowrap; }

/* Post-order newsletter */
.confirm-news {
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
}
.confirm-news h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.confirm-news p { font-size: 0.9rem; margin-bottom: 1rem; }
.confirm-news .newsletter { display: flex; gap: 0.5rem; max-width: 400px; margin-inline: auto; }
.confirm-news .newsletter input {
  flex: 1; min-width: 0; padding: 0.7em 0.9em;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}

/* Product page set link */
.pd-set-link { margin-top: 1rem; }
.pd-set-link a { color: var(--accent); border-bottom: 1px solid currentColor; }

@media (max-width: 860px) {
  .discovery-band .db-inner { grid-template-columns: 1fr; }
  .db-visual { order: -1; }
}

/* ---- Quiz result additions (config.js features.quiz*) ------ */
.result-why {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0.6rem 0 0.2rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--accent);
}
.result-why em { font-style: normal; color: var(--ink-soft); }

.result-sizes { margin: 0.75rem 0 0.25rem; }

.result-actions--minor {
  gap: 1rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}
.quiz-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.8rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.quiz-link:hover { color: var(--ink); }
.quiz-share-note { font-size: 0.78rem; margin-top: 0.5rem; word-break: break-all; }
.result-set-link { margin-top: 0.9rem; }
.result-set-link a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* The question heading is focused programmatically on each step so a
   screen reader announces it. Chromium treats that as focus-visible
   and drew a brass box around every question — the heading isn't
   interactive, so no ring belongs on it either way. */
.quiz-question:focus,
.quiz-question:focus-visible { outline: none; }

/* ============================================================
   Phone: three-up browse grids
   ------------------------------------------------------------
   One card per row meant 18 products became a ~22,000px scroll,
   so almost nothing was visible at a glance. Three across fixes
   that, but a ~110px card can't hold the size pills and the add
   button without squashing them — so at this width the card
   becomes a browse card (photo, name, price) and tapping it goes
   to the product page, where the buying controls have room.

   Scoped to max-width 620px. Nothing above that changes.
   ============================================================ */
@media (max-width: 620px) {
  /* Reclaim gutter — at 375px every pixel counts across 3 columns. */
  .shop-grid-wrap .container,
  .product-grid,
  .ds-grid { --phone-gap: 0.5rem; }

  /* ---- Shop / related grids ---- */
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--phone-gap);
  }
  .product-card { border-radius: 10px; }
  .product-card:hover { transform: none; box-shadow: none; }

  .product-body {
    padding: 0.5rem 0.45rem 0.6rem;
    gap: 0.1rem;
  }
  /* Detail that doesn't survive at this size — it's all on the
     product page, one tap away. */
  .product-house,
  .product-notes,
  .product-card .size-options,
  .product-add { display: none; }

  .product-name {
    font-size: 0.82rem;
    line-height: 1.22;
    /* Keep rows aligned when names wrap to two lines. */
    min-height: 2.44em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-foot {
    margin-top: 0.15rem;
    padding-top: 0.3rem;
    border-top: 0;
  }
  .product-price { font-size: 0.86rem; }
  .product-price small { font-size: 0.6rem; letter-spacing: 0.04em; }

  /* With the pills and add button gone, only the photo and the name
     were tappable. Stretch the name's link over the whole card so the
     price area works too — small targets matter more at 3-up. */
  .product-card { position: relative; }
  .product-name a::after { content: ""; position: absolute; inset: 0; }
  .product-tag {
    top: 0.3rem; left: 0.3rem;
    font-size: 0.5rem; letter-spacing: 0.1em;
    padding: 0.2em 0.45em;
  }

  /* ---- Discovery set builder ---- */
  .ds-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--phone-gap);
  }
  .ds-card {
    padding: 0.4rem;
    gap: 0.35rem;
    border-radius: 10px;
  }
  .ds-card:hover { transform: none; }
  .ds-house, .ds-notes { display: none; }
  .ds-name {
    font-size: 0.8rem;
    line-height: 1.2;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ds-price { font-size: 0.82rem; }
  .ds-tick { top: 0.3rem; right: 0.3rem; width: 18px; height: 18px; font-size: 0.6rem; }
}

/* ---- Contact page: social handles -------------------------- */
.contact-handle { display: block; }
.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin-top: 0.35rem;
}
.contact-social a {
  font-size: 0.86rem;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.3s var(--ease);
}
.contact-social a:hover { color: var(--ink); }

/* ---- Legal: brand non-affiliation -------------------------- */
/* Every fragrance on the shelf is somebody else's trademark. The
   line sits in each footer and again on each product page, where
   the brand name is largest. */
.footer-legal {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
  line-height: 1.6;
  color: #7d786f;
  max-width: 78ch;
}
.pd-legal {
  margin-top: 1.5rem;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---- Pre-launch notice (config.js preLaunch) --------------- */
/* Three placements, one flag. Set preLaunch to false and none of
   these elements is rendered at all. */
.prelaunch-bar {
  background: var(--dark);
  color: var(--dark-ink);
  font-size: 0.82rem;
  line-height: 1.6;
  padding: 0.7rem 0;
  text-align: center;
}
.prelaunch-bar strong { font-weight: 500; color: #fff; }
.prelaunch-bar a {
  color: var(--accent-2);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.prelaunch-bar a:hover { color: #fff; }

.cart-prelaunch {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.pre-ack {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-soft);
  cursor: pointer;
}
.pre-ack input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.28rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.pre-ack strong { font-weight: 500; color: var(--ink); }
/* The disabled pay button is already dimmed and made inert by
   .pay-panel > .btn[disabled] further up this file. */

/* ---- Legal prose (privacy, terms) -------------------------- */
/* The base reset zeroes every margin and strips list markers, and
   body weight is 300 — so <strong> computes to 400 and all but
   disappears, headings sit flush against the paragraph above, and
   a list reads as one run-on block. Fine on the marketing pages,
   wrong for the two documents people read carefully. Scoped to
   those, so nothing else moves. */
.legal-prose h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.4rem;
}
.legal-prose strong { font-weight: 500; color: var(--ink); }
.legal-prose ul {
  list-style: disc;
  padding-left: 1.3rem;
  margin: 0.5rem 0 1.5rem;
}
.legal-prose li { margin-top: 0.6rem; padding-left: 0.3rem; }
.legal-prose li::marker { color: var(--accent); }
/* Outbound links matter here — each processor's own policy is linked
   from its bullet, and by default they render as plain body text. */
.legal-prose a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: border-color 0.3s var(--ease);
}
.legal-prose a:hover { border-bottom-color: var(--accent); }

/* ---- Newsletter opt-out ------------------------------------ */
/* A <small>, not a <p>, so the dark-card and footer paragraph rules
   don't claim it. Colour is inherited, which is what makes the same
   line work on the homepage card, in the footer, and on the light
   post-order panel without three variants. */
.news-optout {
  display: block;
  margin-top: 0.75rem;
  max-width: 46ch;
  font-size: 0.74rem;
  line-height: 1.6;
  opacity: 0.72;
}
.newsletter + [data-form-note] + .news-optout,
.cta-card .news-optout { margin-inline: auto; }
.news-optout a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }