/* ==========================================================================
   KOI — Your Everyday Ritual
   Maroon and ivory throughout; the KOI™ logo keeps its antique gold
   ========================================================================== */

:root {
  /* Maroon + ivory throughout. Gold is reserved for the KOI™ mark and the opening screen. */
  --maroon: #6B1F2A;
  --maroon-deep: #4E1520;
  --maroon-ink: #3A0F17;
  --accent: #6B1F2A;          /* eyebrows, numerals, icons */
  --accent-line: #A3646B;     /* rules, underlines, dots */
  --accent-soft: #E6D2CF;
  --on-maroon: #FBF7EE;       /* text and highlights on maroon */
  --logo-gold: #C0943D;
  --logo-maroon: #5F282A;     /* "Your Everyday Ritual" in the KOI logo */

  --ivory: #FBF7EE;
  --ivory-alt: #F4ECDF;
  --sand: #EDE3D3;
  --line: #E7DCCB;
  --ink: #2B1C1B;
  --text: #463734;
  --muted: #6F5F59;

  --champagne: var(--maroon);
  --mandarin: var(--maroon);
  --berry: var(--maroon);
  --tint: #F3EADD;

  --foil: linear-gradient(105deg, #4E1520 0%, #6B1F2A 30%, #A3646B 50%, #6B1F2A 70%, #4E1520 100%);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --tagline-font: "EB Garamond", Garamond, Georgia, serif; /* the logo's tagline lettering */

  --vz: 1; /* every vw/vh below is multiplied by this: 1.25 while the page is zoomed to 80% (see the zoom rule) */
  --container: max(1240px, calc(86vw * var(--vz))); /* same proportions at any zoom level or screen width */
  --gutter: clamp(16px, calc(4vw * var(--vz)), 56px);
  --section: clamp(44px, calc(5vw * var(--vz)), 76px);
  --header-h: 64px;
  --announce-h: 40px; /* the offers bar above the header */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
/* Laptops with Windows display scaling (125%–175%): at 100% browser zoom show the site at the size it has at 80% zoom,
   i.e. as on a standard 1920px screen. Inside a zoomed page the browser also shrinks vw/vh, so --vz scales them back.
   Phones, tablets, Retina Macs and unscaled monitors are unchanged. */
@media (min-width: 1200px) and (min-resolution: 1.2dppx) and (max-resolution: 1.99dppx) and (hover: hover) and (pointer: fine) {
  :root { zoom: .8; --vz: 1.25; }
}
body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
[hidden] { display: none !important; }
::selection { background: var(--maroon); color: #FBF7EE; }
:focus-visible { outline: 1px solid var(--accent-line); outline-offset: 4px; }
body.is-locked { overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 400;
  background: var(--maroon); color: var(--ivory); padding: 10px 16px; font-size: 14px;
}
.skip-link:focus { top: 12px; }

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

/* ---------- Typography ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
    font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.eyebrow .rule { display: inline-block; width: 36px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow-center { justify-content: center; }

h1 {   font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, calc(3.6vw * var(--vz)), 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h2 {   font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, calc(2.8vw * var(--vz)), 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.005em;
}
h3 { font-family: var(--serif); font-weight: 500; font-size: 1.32rem; line-height: 1.25; }
h1 em, h2 em { font-style: italic; color: var(--maroon); font-weight: 500; }

.tm { font-size: .55em; line-height: 0; vertical-align: .62em; letter-spacing: 0; margin-left: .03em; }
.text-link { color: var(--maroon); border-bottom: 1px solid rgba(107, 31, 42, 0.36); transition: border-color .3s var(--ease); }
.text-link:hover { border-bottom-color: var(--maroon); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .8em;
  font-family: var(--sans);
    font-size: .7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 1px;
  white-space: nowrap;
  transition: color .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease);
}
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.btn svg { transition: transform .5s var(--ease); }
.btn:hover svg { transform: translateX(5px); }

.btn-primary { background: var(--maroon); color: #FBF7EE; }
.btn-primary::before { background: var(--maroon-ink); transform: translateX(-101%); transition: transform .6s var(--ease-io); }
.btn-primary::after {
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
  transform: translateX(-100%); transition: transform 1s var(--ease);
}
.btn-primary:hover::before { transform: none; }
.btn-primary:hover::after { transform: translateX(100%); }

.btn-outline { border-color: rgba(107, 31, 42, .55); color: var(--maroon); background: rgba(255, 255, 255, .25); }
.btn-outline::before { background: var(--maroon); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-io); }
.btn-outline:hover { color: #FBF7EE; border-color: var(--maroon); }
.btn-outline:hover::before { transform: none; }

.btn-light { background: var(--ivory); color: var(--maroon); }
.btn-light::before { background: #fff; transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-io); }
.btn-light:hover::before { transform: none; }


.btn-sm { padding: .8rem 1.5rem; font-size: .7rem; }
.btn-block { width: 100%; }
.btn.is-added { background: var(--accent); border-color: var(--accent); color: #fff; }

.link-arrow {
  position: relative;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--maroon);
  padding: 6px 0;
}
.link-arrow::before { content: "→"; order: 2; font-size: .9rem; letter-spacing: 0; transition: transform .4s var(--ease); }
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--accent-line);
  transform-origin: right; transition: transform .6s var(--ease-io);
}
.link-arrow:hover::before { transform: translateX(4px); }
.link-arrow:hover::after { transform: scaleX(0); }

.price { font-family: var(--serif); font-size: 1.247rem; font-weight: 500; color: var(--ink); }
.price-lg { font-size: 1.8rem; }
.price-was { font-family: var(--serif); font-size: 1.032rem; color: var(--muted); text-decoration: line-through; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-berry { background: var(--berry); }
.dot-mandarin { background: var(--mandarin); }
.dot-champagne { background: var(--maroon); }

.tint-champagne, .tint-mandarin, .tint-berry { background: radial-gradient(ellipse at 50% 60%, #FFFDF8, var(--tint) 72%); }

.ico { width: 34px; height: 34px; color: var(--accent); flex: none; }

/* ==========================================================================
   Preloader — gold lines, arch, KOI™ and lotus rule on ivory
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--ivory);
  transition: transform 1.8s var(--ease-io);
}
html:not(.js) .preloader, .intro-seen .preloader { display: none; }
.is-loaded .preloader { transform: translateY(-100%); }
.js:not(.is-loaded):not(.intro-seen) body { overflow: hidden; }

.pl-lines {
  position: absolute; top: 0; bottom: 0;
  width: clamp(44px, calc(11vw * var(--vz)), 150px);
  background:
    repeating-linear-gradient(90deg, var(--logo-gold) 0 2px, transparent 2px 10px);
  opacity: .85;
  transform: scaleY(0);
  animation: plGrow 2.1s var(--ease-io) .2s forwards;
}
.pl-lines-left { left: 0; transform-origin: top; }
.pl-lines-right { right: 0; transform-origin: bottom; }
.pl-arch {
  position: absolute; bottom: -3px;
  left: clamp(64px, calc(16vw * var(--vz)), 230px); right: clamp(64px, calc(16vw * var(--vz)), 230px);
  top: clamp(36px, calc(7vh * var(--vz)), 70px);
  border: 3px solid var(--logo-gold);
  border-bottom: 0;
  border-top-left-radius: 50% clamp(110px, calc(24vw * var(--vz)), 260px);
  border-top-right-radius: 50% clamp(110px, calc(24vw * var(--vz)), 260px);
  clip-path: inset(100% 0 0 0);
  animation: plArch 2.4s var(--ease-io) .5s forwards;
}
.preloader-inner { position: relative; text-align: center; padding-inline: 24px; }
/* translate: the "KOI" letters (not the letters + ™) sit centred above the tagline and lotus, as in the KOI logo */
.pl-mark { width: clamp(160px, calc(22vw * var(--vz)), 280px); margin: 0 auto; translate: 7.1% 0; opacity: 0; transform: translateY(18px); animation: plUp 1.6s var(--ease-out) 1.1s forwards; }
.pl-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 1.4rem; }
.pl-rule span { width: clamp(60px, calc(9vw * var(--vz)), 110px); height: 2px; background: var(--logo-gold); transform: scaleX(0); animation: plLine 1.4s var(--ease-io) 1.7s forwards; }
.pl-rule span:first-child { transform-origin: right; }
.pl-rule span:last-child { transform-origin: left; }
.pl-rule img { width: 38px; opacity: 0; animation: plFade 1.2s var(--ease) 2s forwards; }
/* "Your Everyday Ritual": the same font and colour everywhere, as in the KOI logo */
.pl-tagline, .howto-kicker, .tagline {
  font-family: var(--tagline-font); font-style: normal; font-weight: 600; letter-spacing: .02em;
  color: var(--logo-maroon);
}
/* Between the KOI™ mark and the lotus rule, as in the KOI logo */
.pl-tagline {
  margin: .7rem 0 -.3rem;
  font-size: clamp(1.05rem, calc(1.5vw * var(--vz)), 1.45rem);
  opacity: 0; transform: translateY(12px); animation: plUp 1.1s var(--ease-out) 1.6s forwards;
}
@keyframes plUp { to { opacity: 1; transform: none; } }
@keyframes plFade { to { opacity: 1; } }
@keyframes plLine { to { transform: scaleX(1); } }
@keyframes plGrow { to { transform: scaleY(1); } }
@keyframes plArch { to { clip-path: inset(0 0 0 0); } }

/* ==========================================================================
   Announcement + Header
   ========================================================================== */
.announce {
  position: relative; z-index: 60;
  background: var(--maroon);
  color: var(--on-maroon);
  text-align: center;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px var(--gutter);
}
.announce a:hover { color: #fff; }
.announce .sep { color: rgba(251, 247, 238, .6); margin: 0 .8em; }
/* Running ticker: the offers slide right to left in a continuous loop */
.announce { overflow: hidden; }
.announce-track { display: flex; width: max-content; margin-inline: auto; }
.announce-track li { display: flex; align-items: center; flex: none; white-space: nowrap; line-height: 1.8; }
.announce-track li::after { content: "✦"; margin: 0 2.4rem; color: rgba(251, 247, 238, .6); }
.announce-track.is-running { margin-inline: 0; animation: koi-ticker var(--ticker-duration, 30s) linear infinite; }
.announce-track.is-running:hover, .announce-track.is-running:focus-within { animation-play-state: paused; }
@keyframes koi-ticker { to { transform: translateX(-50%); } }
.announce-track:not(.is-running) { flex-wrap: wrap; justify-content: center; width: auto; row-gap: .2rem; } /* reduced motion: all offers shown, still */
.announce-track:not(.is-running) li:last-child::after { display: none; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ivory);
  border-bottom: 1px solid rgba(107, 31, 42, 0.15);
  transition: box-shadow .5s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -24px rgba(78, 21, 32, .4); }
.header-inner {
  position: relative;
  height: var(--header-h);
  display: flex; align-items: center; gap: clamp(6px, calc(1vw * var(--vz)), 14px);
}
.brand { display: flex; line-height: 0; }
.brand img { height: 34px; width: auto; }
/* Centred in the page, whatever the widths on either side */
.nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: clamp(1.6rem, calc(3vw * var(--vz)), 3rem); }
.nav a {
  position: relative;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 6px 0;
  white-space: nowrap; /* "Our Story" stays on one line */
}
/* Small laptops: seven menu items still fit between the logo and the icons */
@media (min-width: 901px) and (max-width: 1099px) {
  .nav { gap: 1.05rem; }
  .nav > a, .nav > .nav-drop > a { font-size: .74rem; letter-spacing: .02em; }
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent-line); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-io);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--maroon); }
/* Shop tab dropdown: opens on hover or keyboard focus */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop > a::before { content: ""; position: absolute; left: -1rem; right: -1rem; top: 100%; height: 22px; } /* hover bridge to the menu */
.nav-drop-menu {
  position: absolute; left: 50%; top: calc(100% + 14px); z-index: 60;
  min-width: 190px; padding: .4rem 0;
  background: var(--ivory); border: 1px solid var(--line); border-top: 2px solid var(--maroon);
  box-shadow: 0 24px 40px -24px rgba(58, 15, 23, .45);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .25s var(--ease), transform .3s var(--ease-out), visibility .3s;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav .nav-drop-menu a { display: block; padding: .6rem 1.2rem; font-size: .8rem; font-weight: 500; white-space: nowrap; color: var(--ink); }
.nav .nav-drop-menu a::after { display: none; }
.nav .nav-drop-menu a:hover, .nav .nav-drop-menu a:focus-visible { color: var(--maroon); background: var(--ivory-alt); }
.header-actions { display: flex; align-items: center; gap: .2rem; margin-left: auto; }

.icon-btn { display: grid; position: relative; width: 40px; height: 40px; place-items: center; color: var(--ink); transition: color .3s var(--ease); }
.icon-btn:hover { color: var(--maroon); }
.menu-toggle span {
  position: absolute; left: 9px; width: 22px; height: 1px; background: var(--ink);
  transition: transform .4s var(--ease), top .4s var(--ease), opacity .3s var(--ease);
}
.menu-toggle span:nth-child(1) { top: 13px; }
.menu-toggle span:nth-child(2) { top: 20px; }
.menu-toggle span:nth-child(3) { top: 27px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
.bag-icon .bag-count {
  position: absolute; top: 3px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--maroon); color: var(--ivory);
  font-size: .6rem; border-radius: 17px; line-height: 1;
}
.bag-count.bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.35); } }

/* Search */
.search-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 40px -30px rgba(78, 21, 32, .35);
  padding: 1.2rem 0 1.4rem;
}
.search-form { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--ink); }
.search-form input {
  flex: 1; min-width: 0;
  font: inherit; font-family: var(--serif); font-size: 1.29rem; color: var(--ink);
  background: transparent; border: 0; padding: .5rem 0;
}
.search-form input:focus { outline: none; }
.search-form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* we have our own close button */
.search-form input::placeholder { color: var(--muted); }
.search-results { margin-top: .8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .25rem 1.5rem; }
.search-results a { display: flex; flex-direction: column; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.search-results strong { font-family: var(--serif); font-weight: 500; font-size: 0.989rem; color: var(--ink); }
.search-results span { font-size: .78rem; color: var(--muted); }
.search-results a:hover strong { color: var(--maroon); }
.search-empty { font-size: .9rem; color: var(--muted); padding: .6rem 0; }

/* Menu: drops down under the menu button, one item below the other */
.mobile-nav {
  position: fixed; z-index: 45;
  top: var(--menu-top, 100px); left: var(--menu-left, 0px);
  width: min(320px, calc(100vw * var(--vz)));
  max-height: calc(calc(100vh * var(--vz)) - var(--menu-top, 100px));
  overflow-y: auto;
  padding: .3rem 1.4rem .6rem;
  background: var(--ivory);
  border: 1px solid var(--line); border-top: 2px solid var(--maroon);
  box-shadow: 0 30px 50px -30px rgba(58, 15, 23, .45), 0 0 0 100vmax rgba(58, 15, 23, .16);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease-out), visibility .45s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav a {   display: flex; align-items: baseline; gap: .9rem;
  padding: .72rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.08rem; font-weight: 500; color: var(--ink);
  transition: color .3s var(--ease), padding .4s var(--ease);
}
.mobile-nav nav a:last-child { border-bottom: 0; }
.mobile-nav nav a:hover { padding-left: 6px; }
.mobile-nav nav a:hover, .mobile-nav nav a[aria-current="page"] { color: var(--maroon); }
.mobile-nav nav a.sub { padding-left: 1.1rem; font-family: var(--sans); font-size: .82rem; font-weight: 500; color: var(--text); }
.mobile-nav nav a.sub::before { content: "–"; margin-right: .5rem; color: var(--accent-line); }

/* ==========================================================================
   Shared page structure
   ========================================================================== */
.section { padding: var(--section) 0; }
.section-top { padding-top: clamp(28px, calc(3vw * var(--vz)), 44px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: 1.3rem; font-size: .72rem; letter-spacing: .06em; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--accent-line); }
.crumbs a:hover { color: var(--maroon); }
.crumbs [aria-current] { color: var(--ink); }

.page-head, .section-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(24px, calc(3vw * var(--vz)), 40px); }
.page-sub, .section-sub { font-weight: 400; font-size: .95rem; max-width: 36rem; margin: 1rem auto 0; }
.page-head .btn { margin-top: 1.3rem; }
.center-cta { text-align: center; margin-top: clamp(40px, calc(5vw * var(--vz)), 60px); }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-img > :first-child { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease-io); }
.js .reveal-img.is-in > :first-child { clip-path: inset(0 0 0 0); }

/* Feature icon strip */
.features {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(107, 31, 42, 0.18);
}
.feature { display: flex; align-items: center; justify-content: center; gap: .7rem; padding: .8rem 1rem; text-align: left; }
.feature .ico { width: 24px; height: 24px; }
.feature + .feature { border-left: 1px solid rgba(107, 31, 42, 0.12); }
.feature span { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); line-height: 1.4; }

/* ==========================================================================
   Home hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  --stage: clamp(250px, calc(46vh * var(--vz)), 440px);
  padding-top: clamp(22px, calc(3.4vh * var(--vz)), 44px);
  background:
    radial-gradient(ellipse 55% 45% at 50% 62%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, var(--ivory) 0%, #F1E7D8 100%);
}
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-title .ln > span { display: inline-block; }
@media (min-width: 901px) { .hero-title .ln { display: inline-block; } }
.hero-title { font-size: clamp(2rem, calc(3.4vw * var(--vz)), 3.1rem); }
.hero-lead { font-weight: 500; font-size: .95rem; color: var(--text); max-width: 34rem; margin: .6rem auto 0; }
.hero-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: clamp(16px, calc(2.6vh * var(--vz)), 28px); }

/* The banner height follows the window height so the gels always sit on the first screen */
.hero-stage { display: flex; justify-content: center; margin: clamp(10px, calc(2vh * var(--vz)), 22px) auto 0; }
.hero-banner {
  position: relative; display: block; overflow: hidden;
  width: min(100%, calc(var(--stage) * 1.5)); aspect-ratio: 3 / 2;
  box-shadow: 0 50px 70px -50px rgba(78, 21, 32, .6);
}
/* Fine ivory line inside the photo, like the arched product frames (stays within the banner's own edges) */
.hero-banner::after {
  content: ""; position: absolute; inset: clamp(8px, calc(1vw * var(--vz)), 14px); z-index: 1;
  border: 1px solid rgba(251, 247, 238, .7); pointer-events: none;
}
.hero-banner img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.hero-banner:hover img { transform: scale(1.03); }
.hero .features { margin-top: clamp(18px, calc(3vh * var(--vz)), 32px); background: rgba(251, 247, 238, .55); }
/* The hero fills the first screen below the offers bar and header, so the next section starts below the fold */
.hero {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(calc(100svh * var(--vz)) - var(--announce-h) - var(--header-h) - 1px);
  padding-bottom: clamp(16px, calc(3svh * var(--vz)), 32px);
}
.hero-inner { width: 100%; }

/* Laptops and desktops: headline and buttons on the left, the banner on the right, the features strip below */
/* Phones, tablets and small laptops: the banner photo runs edge to edge through the middle of the hero and fades
   into its own wall (top, behind the headline) and table (bottom, behind the buttons and features strip) colours,
   so the whole first screen reads as the photograph */
@media (max-width: 1279px) {
  .hero { background: linear-gradient(180deg, #E2BAA2 0%, #E3BCA4 45%, #E9C6B1 100%); }
  .hero-stage { margin-inline: calc(-1 * var(--gutter)); }
  .hero-stage { justify-content: center; }
  .hero-banner {
    /* full width on phones; on tablets and small laptops no taller than leaves room for the headline, buttons
       and features strip on the first screen */
    width: min(100%, max(calc(100vw * var(--vz)) * .62, calc((calc(100svh * var(--vz)) - var(--announce-h) - var(--header-h) - 330px) * 1.5)));
    max-width: none; box-shadow: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
  }
}
@media (max-width: 600px) {
  .hero-banner { width: 100%; } /* phones: always edge to edge */
  .hero-banner::after { display: none; }
  .hero-banner:hover img { transform: none; }
  .hero-lead { color: var(--ink); }
  .hero .btn-outline { background: rgba(251, 247, 238, .35); }
  .hero .features { background: rgba(251, 247, 238, .82); }
}
@media (min-width: 1280px) {
  /* The banner photo is the backdrop of the whole hero: it fills the right of the section and fades into the
     photo's own wall colour on the left, where the headline and buttons sit; the features strip runs below it */
  .hero {
    --below-photo: calc(clamp(14px, calc(2.4svh * var(--vz)), 26px) + 52px + clamp(16px, calc(3svh * var(--vz)), 32px));
    text-align: left;
    padding-top: clamp(16px, calc(3svh * var(--vz)), 32px);
    background: linear-gradient(180deg, #E2BAA2 0%, #E9C6B1 100%); /* the photo's wall and table */
  }
  .hero-inner {
    flex: 1; /* not positioned: the photo below is placed against the whole hero */
    display: grid;
    grid-template-columns: minmax(30rem, .75fr) minmax(0, 1.25fr); /* the text column always fits both buttons */
    /* equal space above and below the headline + buttons: they sit at the vertical centre, on the left */
    grid-template-rows: 1fr auto auto 1fr auto;
    grid-template-areas: ". ." "copy ." "actions ." ". ." "features features";
    column-gap: clamp(24px, calc(4vw * var(--vz)), 72px);
    pointer-events: none; /* the photo link underneath stays clickable */
  }
  .hero-inner > * { pointer-events: auto; }
  .hero-inner > :not(.hero-stage) { position: relative; z-index: 1; } /* text, buttons and strip above the photo */
  .hero-copy { grid-area: copy; }
  /* headline and buttons sit a little further left than the page edge (more on wide screens, none at 1280px) */
  .hero-copy, .hero-actions { margin-left: calc(-1 * clamp(0px, calc(calc(100vw * var(--vz)) * .14 - 180px), 100px)); }
  .hero-stage {
    position: absolute; z-index: 0; top: 0; right: 0; bottom: var(--below-photo);
    width: 66%; margin: 0; display: block;
  }
  .hero-banner {
    width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(0deg, transparent 0%, #000 14%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(0deg, transparent 0%, #000 14%);
    mask-composite: intersect;
  }
  .hero-banner::after { display: none; }
  .hero-banner img { object-position: 55% 55%; }
  .hero-banner:hover img { transform: none; }
  .hero-actions { grid-area: actions; align-self: start; justify-content: flex-start; margin-top: clamp(22px, calc(3.6svh * var(--vz)), 36px); }
  .hero-actions .btn { padding-inline: 1.3rem; } /* both buttons fit on one line */
  .hero .btn-outline { background: rgba(251, 247, 238, .35); }
  .hero .features { grid-area: features; margin-top: clamp(14px, calc(2.4svh * var(--vz)), 26px); background: rgba(251, 247, 238, .82); }
  .hero-title { font-size: clamp(2.6rem, calc(3.9vw * var(--vz)), 4.4rem); line-height: 1.08; }
  .hero-title .ln { display: block; }
  .hero-lead { margin: 1.1rem 0 0; font-size: clamp(.95rem, calc(1.05vw * var(--vz)), 1.1rem); max-width: 26rem; color: var(--ink); }
}

.js .hero-title .ln > span { transform: translateY(105%); }
.js .hero-lead, .js .hero-actions, .js .hero-banner, .js .hero .features { opacity: 0; }
.is-loaded .hero-title .ln > span { animation: lineUp 1.8s var(--ease-out) both; }
.is-loaded .hero-title .ln:nth-child(1) > span { animation-delay: .5s; }
.is-loaded .hero-title .ln:nth-child(2) > span { animation-delay: .75s; }
.is-loaded .hero-lead { animation: fadeUp 1.5s var(--ease-out) 1s both; }
.is-loaded .hero-actions { animation: fadeUp 1.5s var(--ease-out) 1.7s both; }
.is-loaded .hero-banner { animation: riseImg 2.2s var(--ease-out) .7s both; }
@media (min-width: 1280px) { .is-loaded .hero-banner { animation: fadeIn 2s var(--ease) .4s both; } } /* the backdrop fades in */
.is-loaded .hero .features { animation: fadeIn 1.6s var(--ease) 2s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes riseImg { from { opacity: 0; translate: 0 70px; } to { opacity: 1; translate: none; } }

/* ==========================================================================
   Product cards (arched)
   ========================================================================== */
.p-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, calc(3vw * var(--vz)), 44px);
}
.complete .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-card { display: flex; flex-direction: column; text-align: center; }
.p-arch {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  max-height: max(400px, calc(64vh * var(--vz))); /* keep name, price and button on screen on wide displays */
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background-color: var(--ivory-alt);
  transition: box-shadow .7s var(--ease-out);
}
.p-arch::before {
  content: ""; position: absolute; inset: 12px 12px 0; z-index: 2;
  border: 1px solid rgba(107, 31, 42, 0.27);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  transition: border-color .6s var(--ease), inset .6s var(--ease);
  pointer-events: none;
}
.p-arch img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 9% 3% 3%;
  mix-blend-mode: multiply;
  filter: brightness(1.02);
  transition: transform 1.1s var(--ease-out);
}
.p-arch-photo { background: var(--maroon-deep); }
.p-arch-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; filter: none; }
.p-card:hover .p-arch { box-shadow: 0 46px 60px -46px rgba(78, 21, 32, .55); }
.p-card:hover .p-arch::before { border-color: rgba(107, 31, 42, 0.48); inset: 18px 18px 0; }
.p-card:hover .p-arch img { transform: translateY(-10px) scale(1.03); }
.p-card:hover .p-arch-photo img { transform: scale(1.05); }
.p-cta {
  position: absolute; z-index: 3; left: 50%; bottom: 22px;
  padding: .6rem 1.3rem;
  background: rgba(251, 247, 238, .94);
  border: 1px solid rgba(107, 31, 42, 0.3);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon);
  white-space: nowrap;
  opacity: 0; transform: translate(-50%, 14px);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
}
.p-card:hover .p-cta { opacity: 1; transform: translate(-50%, 0); }
.p-info { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding-top: 1.3rem; flex: 1; }
.p-info h3 { font-size: 1.42rem; font-weight: 500; }
.p-info h3 a:hover { color: var(--maroon); }
.p-desc { font-size: .8rem; letter-spacing: .04em; color: var(--muted); }
.p-price { font-size: .9rem; font-weight: 500; color: var(--ink); letter-spacing: .03em; }
.p-price span { color: var(--accent-line); margin: 0 .2em; }
.product-rating { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .2rem 0 .45rem; line-height: 1; }
.product-rating-stars { color: var(--logo-gold); font-size: .92rem; letter-spacing: .08em; white-space: nowrap; }
.product-rating-count { font-size: .72rem; color: var(--muted); }
.product-rating a:hover { color: var(--maroon); text-decoration: underline; text-underline-offset: 2px; }
.pd-info > .product-rating { justify-content: flex-start; margin-block: .6rem; }
.p-info .btn { margin-top: auto; }
.p-info .p-price + .btn { margin-top: .9rem; }

.collection { background: var(--ivory); }
/* Bottle and price always on one screen: arch heights follow the window height */
.collection, .complete {
  --arch-h: clamp(170px, calc(calc(100svh * var(--vz)) - var(--header-h) - 400px), 470px);
  padding-block: clamp(28px, calc(4svh * var(--vz)), 52px);
}
.collection.hampers .p-info .p-price { margin-bottom: .6rem; }
.collection.hampers .p-info .p-price + .btn { margin-top: auto; }
:is(.collection, .complete) .page-head { margin-bottom: clamp(14px, calc(2.4svh * var(--vz)), 28px); }
:is(.collection, .complete) .page-head .page-sub { margin-top: .4rem; }
:is(.collection, .complete) .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, calc(3vw * var(--vz)), 44px); }
:is(.collection, .complete) .p-grid > :last-child:nth-child(odd) { grid-column: auto; width: auto; }
/* Gift hampers and Complete the Ritual have two cards each: two centred columns */
.collection.hampers .p-grid, .complete .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-inline: auto; }
:is(.collection, .complete) .p-arch { height: var(--arch-h); max-height: none; aspect-ratio: auto; width: min(100%, calc(var(--arch-h) * .78)); margin-inline: auto; }
/* Gift hampers: the whole landscape photograph in a 3:2 frame (height still follows --arch-h so the buttons stay
   on the first screen) */
.collection.hampers .p-grid { max-width: 1180px; }
.collection .p-arch.p-wide { height: auto; aspect-ratio: 3 / 2; width: min(100%, calc(var(--arch-h) * 1.5)); border-radius: 0; }
.collection .p-arch.p-wide::before { inset: 12px; border-bottom: 1px solid rgba(107, 31, 42, 0.27); border-radius: 0; }
.p-card:hover .p-arch.p-wide::before { inset: 18px; }
:is(.collection, .complete, .shop-by) .p-info { padding-top: .9rem; gap: .15rem; }
:is(.collection, .complete, .shop-by) .p-info .p-price { margin-bottom: .6rem; }
:is(.collection, .complete, .shop-by) .p-info .p-price + .btn { margin-top: auto; }
.scent-grid { --arch-h: clamp(170px, calc(calc(100svh * var(--vz)) - var(--header-h) - 300px), 470px); }
.scent-media { width: min(100%, calc(var(--arch-h) * .78)); margin-inline: auto; }
.scent-media .p-arch { height: var(--arch-h); max-height: none; aspect-ratio: auto; }

/* ==========================================================================
   Bundles — Buy Any 2 / Buy All 3
   ========================================================================== */
.bundles { background: var(--ivory-alt); --media-h: clamp(108px, calc(calc(100svh * var(--vz)) - var(--header-h) - 440px), 300px); }
.bundle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, calc(3vw * var(--vz)), 40px); }
.bundle { display: flex; flex-direction: column; background: var(--ivory); border: 1px solid var(--line); }
.bundle-media {
  position: relative; overflow: hidden;
  height: var(--media-h);
  display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(ellipse at 50% 70%, #FFFDF8 0%, #F2E9DC 80%);
  border-bottom: 1px solid var(--line);
}
.duo-media { padding: 6% 6% 0; }
.duo-arch { position: relative; width: min(36%, calc(var(--media-h) * .72)); height: 100%; border-radius: 999px 999px 0 0; overflow: hidden; }
.duo-arch::before {
  content: ""; position: absolute; inset: 8px 8px 0; z-index: 1;
  border: 1px solid rgba(107, 31, 42, 0.27); border-bottom: 0; border-radius: 999px 999px 0 0;
}
.duo-arch img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 10% 0 2%; mix-blend-mode: multiply;
  transition: opacity .4s var(--ease);
}
.duo-plus { align-self: center; margin: 0 4%; font-family: var(--serif); font-size: 2.064rem; color: var(--accent); line-height: 1; }
/* Both bundle pictures sit on the same soft background, taken from the collection photo's own wall and table */
.bundles .bundle-media { background: linear-gradient(180deg, #E4BFA8 0%, #E8C6B2 55%, #ECCDBB 100%); }
/* Buy All 3: the collection banner photograph, shown whole */
.trio-media.is-banner { padding: 0; height: auto; aspect-ratio: 3 / 2; }
.trio-media.is-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.duo-arch.is-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.bundle-body { display: flex; flex-direction: column; gap: .5rem; padding: clamp(16px, calc(2.2vw * var(--vz)), 28px); flex: 1; }
.bundle-kicker { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.bundle-body h3 { font-size: 1.6rem; font-weight: 500; }
.bundle-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; }
.bundle-price .price { font-size: 1.62rem; }
.save {
  font-size: .7rem; font-weight: 600; letter-spacing: 0.128em; text-transform: uppercase;
  color: var(--maroon); background: rgba(107, 31, 42, .08); padding: .35rem .7rem;
}
.bundle-note { font-size: .8rem; color: var(--muted); letter-spacing: .04em; }
.duo-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: .2rem 0 .6rem; }
.bundle-list { margin: .2rem 0 .6rem; border-top: 1px solid var(--line); }
.bundle-list li {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.032rem; color: var(--ink);
}
.bundle-list a:hover { color: var(--maroon); }
.bundle-list em { margin-left: auto; font-family: var(--sans); font-style: normal; font-size: .72rem; letter-spacing: .04em; color: var(--muted); text-align: right; }
.bundle-body > .btn { margin-top: auto; }

/* Laptops and desktops: each bundle is one row, bottles on the left, choices and price on the right */
@media (min-width: 901px) {
  .bundle-grid { grid-template-columns: minmax(0, 1fr); max-width: 1120px; margin-inline: auto; gap: clamp(16px, calc(2.4vw * var(--vz)), 28px); }
  .bundle { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .bundle-media { height: auto; min-height: clamp(260px, calc(calc(100svh * var(--vz)) - var(--header-h) - 160px), 380px); border-bottom: 0; border-right: 1px solid var(--line); }
  /* Buy Any 2: the two arches centred, with the same space above and below */
  .duo-media { padding: 6% 5%; align-items: center; }
  .duo-arch { width: 38%; height: 100%; }
  /* Buy All 3: the panel fills the card's height like Buy Any 2; the photo stays whole in the middle and its top and
     bottom edges fade into the panel, so there are no bands */
  .bundles .bundle-media.trio-media.is-banner { min-height: 0; align-self: stretch; aspect-ratio: auto; align-items: center; }
  .bundles .trio-media.is-banner img {
    height: auto; aspect-ratio: 3 / 2; object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .bundle-body { justify-content: center; padding: clamp(20px, calc(2.6vw * var(--vz)), 34px) clamp(22px, calc(3vw * var(--vz)), 40px); }
  .bundle-body > .btn { margin-top: .4rem; }
}

.field { display: block; }
.field > span { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-bottom: .4rem; }
.field select {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%235F282A' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: .85rem 2.6rem .85rem 1rem;
  cursor: pointer;
  transition: border-color .3s var(--ease);
}
.field select:hover, .field select:focus { border-color: var(--accent-line); outline: none; }

/* ==========================================================================
   Gift hamper
   ========================================================================== */
.hamper { padding: var(--section) 0; background: var(--ivory); }
.hamper-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, calc(6vw * var(--vz)), 96px); align-items: center; }
.hamper-media { position: relative; max-width: 620px; }
/* The gift hamper photograph, shown whole */
.hm-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  box-shadow: 0 50px 70px -50px rgba(78, 21, 32, .6);
  outline: 1px solid rgba(107, 31, 42, .25); outline-offset: 10px;
}
.hamper-copy > p:not(.eyebrow):not(.price) { margin-top: 1.2rem; font-weight: 400; max-width: 26rem; }
.hamper-copy .price { display: block; margin-top: 1.4rem; }
.hamper-actions { margin-top: 1.6rem; }

.gifting-head { padding-bottom: 0; }
.gifting-head .page-head { margin-bottom: 0; }
.gifting-head + .hamper { padding-top: clamp(40px, calc(5vw * var(--vz)), 64px); }

/* ==========================================================================
   Shop: why you'll love KOI + sensorial banner
   ========================================================================== */
.love { padding: clamp(36px, calc(4vw * var(--vz)), 56px) 0; background: var(--ivory-alt); text-align: center; }
.love-title { margin-bottom: clamp(18px, calc(2.4vw * var(--vz)), 28px); }
.love .features { border-top: 0; }

.sensorial {
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 80% at 85% 50%, rgba(255, 255, 255, .07) 0%, transparent 70%),
    var(--maroon);
}
.sensorial-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, calc(5vw * var(--vz)), 80px); align-items: center;
  padding-block: clamp(40px, calc(5vw * var(--vz)), 68px);
}
.sensorial h2, .sensorial h2 em { color: var(--on-maroon); }
.sensorial-copy p { margin: 1.2rem 0 2rem; font-weight: 400; color: rgba(251, 247, 238, .85); max-width: 26rem; }
.sensorial-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sensorial-media img { width: 100%; aspect-ratio: 1; object-fit: cover; max-width: 340px; box-shadow: 0 40px 60px -40px rgba(78, 21, 32, .55); }
.sensorial-media img:last-child { margin-top: 18%; }
/* ==========================================================================
   Product detail
   ========================================================================== */
.pd { padding: clamp(14px, calc(2svh * var(--vz)), 28px) 0 var(--section); }
.pd-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, calc(5vw * var(--vz)), 80px); align-items: start; }
.pd-gallery { --pd-h: clamp(300px, calc(calc(100svh * var(--vz)) - var(--header-h) - 130px), 700px); position: sticky; top: calc(var(--header-h) + 24px); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; width: calc(72px + 16px + var(--pd-h) * .78); max-width: 620px; justify-self: center; }
.pd-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
.pd-main { grid-column: 2; grid-row: 1; }
.pd-thumb {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--ivory-alt);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.is-bottle img, .pd-thumb.is-wide img { object-fit: contain; padding: 8% 4%; mix-blend-mode: multiply; }
.pd-thumb:hover { border-color: var(--accent-soft); }
.pd-thumb[aria-pressed="true"] { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }

.pd-main {
  position: relative; overflow: hidden;
  height: var(--pd-h); width: min(100%, calc(var(--pd-h) * .78)); justify-self: center;
  border-radius: 999px 999px 0 0;
}
.pd-main::after {
  content: ""; position: absolute; inset: 14px 14px 0;
  border: 1px solid rgba(107, 31, 42, 0.3); border-bottom: 0;
  border-radius: 999px 999px 0 0; pointer-events: none;
}
.pd-main img { position: absolute; transition: opacity .25s var(--ease); }
.pd-main img.is-fading { opacity: 0; }
.pd-main img.is-bottle, .pd-main img.is-wide {
  inset: 0; width: 100%; height: 100%;
  object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.02);
}
.pd-main img.is-bottle { padding: 11% 2% 3%; }
/* Full-bleed studio photography (photo already has its own backdrop) */
.pd-main img.is-cover { inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The collection banner (landscape) shown whole inside the arch */
.pd-main img.is-banner { inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0 3%; }
/* Gallery images (square, with text to the edges) are shown whole; the frame drops its arch while one is shown */
/* Gallery images are prepared in the arch's 3:4 shape and fill it like the studio photo. A square image uploaded
   later from the admin panel (is-fit, set by main.js) is shown whole instead, over a blurred copy of itself */
.pd-main img.is-square { inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pd-main img.is-square.is-fit { object-fit: contain; padding: 15% 0 3%; }
.pd-main:has(img.is-square.is-fit)::before {
  content: ""; position: absolute; inset: -30px; z-index: 0;
  background: var(--gallery-bg) center / cover no-repeat; filter: blur(28px) saturate(1.1); opacity: .9;
}
.pd-main::after { z-index: 2; }
/* No thin inner line inside the product image frames (product cards, gift and bundle frames, product page) */
.p-arch::before, .p-card:hover .p-arch::before, .duo-arch::before, .pd-main::after { content: none; }
.pd-thumbs { max-height: var(--pd-h); overflow-y: auto; scrollbar-width: thin; }
.pd-thumb.is-square { flex: none; } /* same 3:4 thumbnail as the studio photo */
.pd-main img.is-wide { padding: 0 3%; }
.pd-main img.is-photo {
  left: 50%; top: 55%;
  width: min(72%, 320px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border-radius: 999px 999px 0 0;
  box-shadow: 0 40px 50px -36px rgba(78, 21, 32, .55);
}

.pd-info .eyebrow { margin-bottom: .9rem; }
.pd-info h1 { font-size: clamp(2.1rem, calc(3.2vw * var(--vz)), 3rem); }
.pd-desc { margin-top: .3rem; font-family: var(--serif); font-style: italic; font-size: 1.161rem; color: var(--accent, var(--maroon)); }
.pd-actives { margin-top: .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pd-tagline { margin-top: 1rem; font-family: var(--serif); font-size: 1.204rem; color: var(--ink); line-height: 1.3; }
.pd-copy p { margin-top: .6rem; font-weight: 400; line-height: 1.6; }
.pd-price-row { display: flex; align-items: baseline; gap: 1rem; margin-top: 1rem; }
.pd-size { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pd-buy { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; }
@media (min-width: 901px) and (max-height: 700px) {
  .crumbs ol { padding-top: .8rem; }
  .pd-info h1 { font-size: 2rem; }
  .pd-info .eyebrow { margin-bottom: .6rem; }
  .pd-tagline { margin-top: .7rem; font-size: 1.1rem; }
  .pd-copy p { margin-top: .45rem; font-size: .9rem; line-height: 1.55; }
  .pd-price-row { margin-top: .7rem; }
  .pd-buy { margin-top: .6rem; }
  .qty { height: 46px; }
}
.pd-buy .btn { flex: 1; min-width: 200px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); background: #fff; height: 52px; }
.qty button { width: 44px; height: 100%; font-size: 1.1rem; color: var(--ink); transition: color .3s; }
.qty button:hover { color: var(--accent); }
.qty span { min-width: 28px; text-align: center; font-size: .95rem; }

.pd-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pd-perks li { display: flex; align-items: center; gap: .7rem; padding: 1rem .6rem; font-size: .76rem; line-height: 1.4; color: var(--ink); }
.pd-perks li + li { border-left: 1px solid var(--line); }
.pd-perks .ico { width: 30px; height: 30px; }

/* Accordions */
.accordion { margin-top: 1.6rem; border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  font-size: .78rem; font-weight: 600; letter-spacing: 0.112em; text-transform: uppercase; color: var(--ink);
  transition: color .3s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; flex: none; font-size: 1.35rem; font-weight: 400; line-height: 1; color: var(--accent); transition: transform .4s var(--ease); }
.acc summary:hover { color: var(--maroon); }
.acc[open] summary::after { transform: rotate(45deg); }
.acc-body { padding: 0 0 1.6rem; font-weight: 400; font-size: .95rem; }
.acc-body p + p { margin-top: .8rem; }
.acc-lead { font-family: var(--serif); font-size: 1.118rem; font-weight: 500; color: var(--ink); line-height: 1.3; margin-bottom: .9rem; }
.acc-more { margin-top: 1.2rem; }

/* Fragrance pyramid */
.pyr-family { display: flex; flex-direction: column; margin-bottom: 1.2rem; font-family: var(--serif); font-size: 1.161rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.pyr-family span { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pyr { display: grid; grid-template-columns: minmax(80px, 34%) minmax(0, 1fr); gap: 8px clamp(14px, calc(3vw * var(--vz)), 26px); }
.pyr-tier { min-height: 96px; }
.pyr-tier.t1 { clip-path: polygon(50% 0, 66.67% 100%, 33.33% 100%); background: #E9D5D2; }
.pyr-tier.t2 { clip-path: polygon(33.33% 0, 66.67% 0, 83.33% 100%, 16.67% 100%); background: #A04E58; }
.pyr-tier.t3 { clip-path: polygon(16.67% 0, 83.33% 0, 100% 100%, 0 100%); background: var(--maroon); }
.pyr-note { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin: 0; border: 1px solid var(--line); background: #fff; }
.pyr-note dt {
  display: grid; place-items: center; text-align: center;
  padding: .6rem; font-size: .7rem; font-weight: 600; letter-spacing: 0.144em; text-transform: uppercase; line-height: 1.5;
}
.pyr-note.t1 dt { background: #E9D5D2; color: var(--maroon-ink); }
.pyr-note.t2 dt { background: #A04E58; color: #fff; }
.pyr-note.t3 dt { background: var(--maroon); color: #FBF7EE; }
.pyr-note dd { margin: 0; display: flex; flex-direction: column; justify-content: center; padding: .7rem 1rem; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); line-height: 1.55; }

/* Ingredient roles */
.ing-list { display: grid; gap: 1.1rem; }
.ing-list > li { position: relative; padding-left: 0; }
.ing-list h4 { font-family: var(--serif); font-size: 1.049rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.ing-list h4 span { font-style: italic; font-weight: 400; color: var(--muted); }
.ing-list ul { margin-top: .35rem; }
.ing-list ul li { position: relative; padding-left: 1rem; font-size: .92rem; font-weight: 400; }
.ing-list ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 1px; background: var(--accent-line); }

/* How to use */
.howto-title { font-size: 1.25rem; }
.howto-kicker { margin: .2rem 0 .8rem; font-size: 1.118rem; }
.howto-steps { display: grid; gap: .95rem; margin-top: 1.1rem; }
.howto-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .7rem; }
.howto-steps .n { font-family: var(--serif); font-size: 1.462rem; line-height: 1; color: var(--accent); }
.howto-steps strong { display: block; font-weight: 500; color: var(--ink); }

.complete { background: var(--ivory-alt); }
.complete.essentials { background: var(--ivory); } /* sits between Bundles and the Gift Hamper on the Shop page */
.complete-more { text-align: center; margin-top: clamp(32px, calc(4vw * var(--vz)), 48px); }

/* ==========================================================================
   Formula page
   ========================================================================== */
.formula-intro { padding-bottom: clamp(24px, calc(3vw * var(--vz)), 40px); }
.formula-intro .page-head { margin-bottom: 0; }
/* --subnav-h is this menu's real height (measured in main.js), so anchored sections land right under it */
html:has(.formula-nav) { --subnav-h: 54px; scroll-padding-top: calc(var(--header-h) + var(--subnav-h)); }
.formula-nav {
  position: sticky; top: var(--header-h); z-index: 20;
  background: var(--ivory);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.formula-nav .container { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(1.2rem, calc(4vw * var(--vz)), 3rem); padding-block: .25rem; }
.formula-nav a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-size: .7rem; font-weight: 600; letter-spacing: 0.144em; text-transform: uppercase; color: var(--ink); }
.formula-nav a:hover { color: var(--maroon); }
.formula-nav .dot { background: var(--accent-line); }
.formula { padding: clamp(40px, calc(5vw * var(--vz)), 72px) 0; }
.formula:nth-of-type(even) { background: var(--ivory-alt); }
.formula-head { text-align: center; }
.formula-sub { margin-top: .5rem; font-family: var(--serif); font-style: italic; font-size: 1.29rem; color: var(--accent); }
.formula-actives { margin-top: .6rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.formula-media { display: flex; justify-content: center; gap: clamp(10px, calc(1.6vw * var(--vz)), 18px); margin: clamp(20px, calc(2.6vw * var(--vz)), 32px) auto; }
.formula-media img { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover; flex: 1 1 0; min-width: 0; box-shadow: 0 40px 50px -40px rgba(78, 21, 32, .5); }
.formula-media.count-2 img { max-width: 250px; }
.formula-body { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, calc(5vw * var(--vz)), 80px); align-items: start; }
.formula-speciality h3 { font-size: clamp(1.462rem, calc(2.236vw * var(--vz)), 1.892rem); font-weight: 500; margin-bottom: 1rem; }
.formula-speciality p:not(.eyebrow) { font-weight: 400; margin-top: .9rem; }
.formula-speciality strong { font-weight: 500; color: var(--ink); }
.formula-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ==========================================================================
   Scents + quiz
   ========================================================================== */
.page-head:has(h1.one-line) { max-width: none; }
/* --fit: roughly how many ems wide the heading is, so it shrinks just enough to stay on one line */
.page-head h1.one-line { white-space: nowrap; font-size: min(clamp(2rem, calc(3.6vw * var(--vz)), 3.2rem), calc((calc(100vw * var(--vz)) - 2 * var(--gutter)) / var(--fit, 20))); }
.gifting-head h1.one-line { --fit: 17; }
.scents-hero .page-head .btn { margin-top: 2rem; }
.scent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, calc(3vw * var(--vz)), 44px); }
.scent-tile { text-align: center; }
.scent-media { position: relative; display: block; margin-bottom: 1.4rem; }
.scent-media .p-arch { display: block; }
.scent-note {
  position: absolute; z-index: 3; right: -2%; bottom: -5%;
  width: 36%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 6px solid var(--ivory);
  box-shadow: 0 20px 30px -20px rgba(78, 21, 32, .5);
  transition: transform .8s var(--ease-out);
}
.scent-tile:hover .scent-note { transform: rotate(-8deg) scale(1.05); }
/* Swapped: the fragrance-notes photo fills the arch and the bottle sits in the round inset (centred on the bottle) */
.scent-note.is-bottle { object-position: 50% 42%; background: #9A5A48; width: 30%; right: -7%; bottom: -9%; }
/* The fragrance-notes photos are square: shown whole in a square frame (height still fits the first screen) */
.scent-media:has(.p-arch.is-notes) { width: min(100%, var(--arch-h)); }
.scent-media .p-arch.is-notes { height: auto; aspect-ratio: 1; border-radius: 0; }
.scent-tile:hover .p-arch.is-notes img { transform: none; } /* no zoom, so the edges are never trimmed */
.scent-tile:hover .p-arch img { transform: translateY(-10px) scale(1.03); }
.scent-tile:hover .p-arch-photo img { transform: scale(1.05); }
.scent-tile h2 { font-size: 1.634rem; }
.scent-notes { margin: .5rem 0 .6rem; font-family: var(--serif); font-style: italic; font-size: 0.903rem; color: var(--accent); }

.quiz {
  padding: var(--section) 0;
  background: var(--ivory-alt);
}
.quiz-card { max-width: 620px; margin: 0 auto; display: grid; gap: 1.1rem; text-align: center; }
.quiz-card h2 { margin-bottom: .8rem; font-size: clamp(1.634rem, calc(2.58vw * var(--vz)), 2.15rem); }
.quiz-card .field { text-align: left; }
.quiz-card .field > span { text-transform: none; letter-spacing: .02em; font-size: .88rem; font-weight: 400; color: var(--ink); }
.quiz-card > .btn { justify-self: center; margin-top: .6rem; }
.quiz-card .form-note { min-height: 1.4em; font-size: .85rem; color: var(--muted); }
.quiz-card .form-note.is-error { color: var(--berry); }
.quiz-result {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1.5rem; align-items: center;
  text-align: left; background: var(--ivory); border: 1px solid var(--line); padding: 1.3rem;
  animation: fadeUp .8s var(--ease-out) both;
}
.qr-media { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; overflow: hidden; }
.qr-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10% 0 2%; mix-blend-mode: multiply; }
.qr-media.is-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.quiz-result .eyebrow { margin-bottom: .3rem; }
.quiz-result h3 { font-size: 1.6rem; font-weight: 500; }
.qr-tag { margin-top: .4rem; font-family: var(--serif); font-size: 0.946rem; color: var(--ink); }
.qr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1rem; }
.quiz-sub { margin: -.6rem auto .4rem; max-width: 30rem; font-weight: 400; font-size: .95rem; }
.qr-notes { margin-top: .3rem; font-size: .82rem; color: var(--text); }
.qr-notes span { margin-right: .5em; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* Fragrance notes pop-up (View details) */
.notes-dialog {
  width: min(620px, calc(100% - 32px)); max-height: calc(100% - 32px);
  padding: 0; border: 0; border-top: 3px solid var(--maroon);
  background: var(--ivory); color: var(--text);
  box-shadow: 0 40px 80px -30px rgba(58, 15, 23, .6);
}
.notes-dialog::backdrop { background: rgba(58, 15, 23, .55); }
.notes-dialog[open] { animation: fadeUp .5s var(--ease-out) both; }
.nd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.6rem 1.6rem 0; }
.nd-head .eyebrow { margin-bottom: .5rem; }
.nd-head h2 { font-size: clamp(1.634rem, calc(3.44vw * var(--vz)), 2.064rem); }
.nd-body { padding: 1.2rem 1.6rem 1.8rem; }
.nd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.6rem; }
html:has(dialog[open]) { overflow: hidden; }
/* ==========================================================================
   Ingredients
   ========================================================================== */
.ing-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, calc(2.4vw * var(--vz)), 32px); }
.ing-tile {
  display: flex; flex-direction: column;
  padding: 1.6rem 1.4rem 1.4rem;
  background: var(--ivory-alt); border: 1px solid var(--line);
  transition: border-color .4s var(--ease), transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.ing-tile:hover { border-color: rgba(107, 31, 42, .3); transform: translateY(-4px); box-shadow: 0 30px 40px -34px rgba(78, 21, 32, .45); }
.ing-media {
  display: block; overflow: hidden;
  aspect-ratio: 1; margin: -.4rem -.4rem 1.3rem;
  background: var(--ivory);
}
.ing-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.ing-tile:hover .ing-media img { transform: scale(1.04); }
.ing-tile h2 { font-size: 1.247rem; font-weight: 500; margin-bottom: .5rem; }
.ing-tile p { font-size: .92rem; font-weight: 400; }
.ing-tag { margin-top: auto; padding-top: 1rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

.ing-index-section { background: var(--ivory-alt); }
.table-wrap { position: relative; /* keeps the table's .sr-only labels inside the scroll box */ overflow-x: auto; max-width: 1000px; margin-inline: auto; background: var(--ivory); border: 1px solid var(--line); }
.ing-index { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9rem; }
.ing-index th, .ing-index td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.ing-index thead th { font-size: .7rem; font-weight: 600; letter-spacing: 0.144em; text-transform: uppercase; color: var(--accent); background: var(--ivory-alt); }
.ing-index thead th:nth-child(n+3), .ing-index td.has, .ing-index td.no { text-align: center; }
.ing-index tbody th { font-family: var(--serif); font-size: 0.963rem; font-weight: 500; color: var(--ink); }
.ing-index td { font-weight: 400; }
.ing-index td.has { color: var(--accent); }
.ing-index td.no { color: var(--line); }
.ing-index tbody tr:last-child > * { border-bottom: 0; }
.ing-index a:hover { color: var(--maroon); }
/* ==========================================================================
   Story
   ========================================================================== */
.story { background: var(--ivory); }
.story-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, calc(5vw * var(--vz)), 80px); align-items: center; }
.story-copy h1 { font-size: clamp(1.892rem, calc(3.268vw * var(--vz)), 2.924rem); line-height: 1.1; margin-bottom: 1.6rem; }
.story-copy h1 em { display: block; margin-top: .2em; }
.story-copy p:not(.eyebrow) { margin-top: 1.1rem; font-weight: 400; font-size: .95rem; max-width: 32rem; }
.story-rule { display: flex; align-items: center; gap: 14px; margin-top: 1.8rem; max-width: 32rem; }
.story-rule span { flex: 1; height: 1px; background: rgba(107, 31, 42, .3); }
.story-rule img { width: 34px; }
.story-copy p.story-sign { margin-top: 1.2rem; font-family: var(--serif); font-style: italic; font-size: 1.247rem; line-height: 1.35; color: var(--maroon); }
.story-copy .btn { margin-top: 2rem; }
/* The story photograph is shown whole, in its own landscape proportions */
.story-visual { width: 100%; margin-inline: auto; }
.story-visual-inner { overflow: hidden; box-shadow: 0 50px 70px -50px rgba(78, 21, 32, .6); outline: 1px solid rgba(107, 31, 42, .25); outline-offset: 10px; }
.story-visual-inner img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; }
/* Laptops and desktops: the story photograph is the backdrop of the whole section (it fills the first screen) and
   the text sits on it, over a soft ivory wash on the left so it reads clearly */
@media (min-width: 901px) {
  .story {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center;
    min-height: calc(calc(100svh * var(--vz)) - var(--announce-h) - var(--header-h) - 1px);
  }
  .story::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(251, 247, 238, .95) 0%, rgba(251, 247, 238, .88) 34%, rgba(251, 247, 238, .45) 50%, rgba(251, 247, 238, 0) 64%);
  }
  .story-grid { width: 100%; }
  .story-visual { position: absolute; inset: 0; z-index: -2; max-width: none; margin: 0; }
  .story-visual-inner { height: 100%; box-shadow: none; outline: none; }
  .story-visual-inner img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }
}

.promise { background: var(--ivory-alt); }
.promise-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, calc(2.4vw * var(--vz)), 32px); }
.promise-list li { text-align: center; padding: 2.2rem 1.4rem; background: var(--ivory); border: 1px solid var(--line); }
.promise-ico { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 1.3rem; border: 1px solid rgba(107, 31, 42, .35); border-radius: 50%; }
.promise-ico .ico { width: 36px; height: 36px; color: var(--maroon); }
.promise-list h3 { font-size: 1.29rem; margin-bottom: .5rem; }
.promise-list p { font-size: .92rem; font-weight: 400; }

.statement {
  position: relative;
  padding: clamp(56px, calc(7vw * var(--vz)), 96px) 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 40%, rgba(140, 50, 62, .55) 0%, transparent 70%),
    var(--maroon-deep);
  text-align: center;
  overflow: hidden;
}
.statement-inner { max-width: 1000px; }
.statement-rule { display: block; width: 90px; height: 1px; margin: 0 auto 2.6rem; background: rgba(251, 247, 238, .5); transform: scaleX(0); transition: transform 1.6s var(--ease-io); }
.statement-rule.is-in { transform: scaleX(1); }
.statement-text {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.548rem, calc(3.096vw * var(--vz)), 2.752rem); line-height: 1.24;
  color: var(--on-maroon);
  letter-spacing: -.01em;
}
.statement-text .w { opacity: .16; transition: opacity .5s var(--ease); }
.statement-text .w.on { opacity: 1; }
.statement-text .w.gold { font-family: var(--tagline-font); font-weight: 600; letter-spacing: .02em; color: var(--logo-gold); }
.statement-sign { margin-top: 2.2rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(251, 247, 238, .75); }
.statement-cta { margin-top: 2.4rem; }
/* ==========================================================================
   Journal
   ========================================================================== */
.j-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, calc(3vw * var(--vz)), 40px); max-width: 880px; margin-inline: auto; }
.j-card { display: flex; flex-direction: column; align-items: flex-start; }
.j-media { display: block; width: 100%; overflow: hidden; margin-bottom: 1.3rem; }
.j-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.j-card:hover .j-media img { transform: scale(1.04); }
.j-card h2 { font-size: 1.462rem; line-height: 1.2; }
.j-card h2 a:hover { color: var(--maroon); }
.j-card p { margin: .6rem 0 .9rem; font-weight: 400; font-size: .95rem; }
.article { border-top: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.article:nth-of-type(odd) { background: var(--ivory-alt); }
.article-inner { max-width: 760px; }
.article h2 { margin-bottom: 1.6rem; }
.article-body p { font-weight: 400; font-size: .95rem; margin-top: .9rem; }
.article-body h3 { margin-top: 1.8rem; font-size: 1.204rem; }

/* ==========================================================================
   Help
   ========================================================================== */
.faq { max-width: 820px; margin: 0 auto; scroll-margin-top: calc(var(--header-h) + 16px); }
.faq + .faq { margin-top: clamp(40px, calc(5vw * var(--vz)), 64px); }
.faq-title { font-size: clamp(1.4rem, calc(2vw * var(--vz)), 1.75rem); margin-bottom: .6rem; }
.faq .accordion { margin-top: 0; }
.faq .acc summary { text-transform: none; letter-spacing: .01em; font-size: 1rem; font-weight: 400; }
.contact { padding: 0 0 var(--section); }
.contact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; border: 1px solid var(--line); background: var(--ivory-alt); }
.contact-row li + li { border-left: 1px solid var(--line); }
.contact-row a { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.8rem 1rem; text-align: center; transition: background .3s var(--ease); }
.contact-row a:hover { background: var(--ivory); }
.contact-row .ico { margin-bottom: .4rem; }
.contact-row strong { font-family: var(--serif); font-size: 1.075rem; font-weight: 500; color: var(--ink); }
.contact-row span { font-size: .8rem; color: var(--muted); }
.contact-address { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin: 1.25rem auto 0; color: var(--muted); font-size: .85rem; font-style: normal; text-align: center; }
.contact-address strong { color: var(--ink); font-family: var(--serif); font-size: 1rem; font-weight: 500; }

/* ==========================================================================
   Policies
   ========================================================================== */
.policy-layout { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: clamp(28px, calc(5vw * var(--vz)), 72px); align-items: start; }
.policy-nav { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.policy-nav .eyebrow { margin: 0 0 .6rem 1.1rem; }
.policy-nav a { padding: .55rem 1.1rem; margin-left: -1px; border-left: 2px solid transparent; font-size: .9rem; font-weight: 500; color: var(--text); transition: color .3s var(--ease), border-color .3s var(--ease); }
.policy-nav a:hover { color: var(--maroon); }
.policy-nav a[aria-current="page"] { color: var(--maroon); font-weight: 600; border-left-color: var(--maroon); }
.policy-doc { max-width: 780px; }
.policy-head h1 { margin-bottom: 1rem; }
.policy-intro { font-size: 1rem; color: var(--text); }
.policy-intro + .policy-intro { margin-top: .8rem; }
.policy-toc { margin-top: 1.8rem; padding: 1.2rem 1.4rem; background: var(--ivory-alt); border: 1px solid var(--line); }
.policy-toc .eyebrow { margin-bottom: .6rem; }
.policy-toc ol { columns: 2; column-gap: 2rem; list-style: decimal; padding-left: 1.3rem; font-size: .88rem; }
.policy-toc li { padding: .18rem 0; break-inside: avoid; color: var(--accent); }
.policy-toc a { display: inline-block; padding: .2rem 0; color: var(--text); }
.policy-toc a:hover { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }
.policy-section { padding-top: 1.9rem; margin-top: 1.9rem; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.policy-section h2 { font-size: clamp(1.3rem, calc(2vw * var(--vz)), 1.6rem); margin-bottom: .7rem; }
.policy-section h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--ink); margin: 1.1rem 0 .3rem; }
.policy-section p { margin-top: .7rem; }
.policy-section ul { margin-top: .6rem; display: grid; gap: .35rem; }
.policy-section li { position: relative; padding-left: 1.2rem; }
.policy-section li::before { content: ""; position: absolute; left: 0; top: .78em; width: 7px; height: 1px; background: var(--maroon); }
.policy-section strong { color: var(--ink); font-weight: 600; }
.policy-section li a { display: inline-block; padding: .2rem 0; }
.footer-policies { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .6rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--maroon); color: rgba(251, 247, 238, .82); padding-top: clamp(40px, calc(5vw * var(--vz)), 60px); text-align: center; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding-bottom: clamp(28px, calc(3.5vw * var(--vz)), 44px); }
.footer-logo img { width: 112px; }
.footer-tag { margin-top: -.7rem; font-family: var(--serif); font-style: italic; font-size: 1.118rem; color: var(--on-maroon); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 2.2rem; max-width: 900px; margin-top: .6rem; }
.footer-nav a {
  position: relative; padding: .55rem 0;
  font-size: .7rem; font-weight: 600; letter-spacing: 0.144em; text-transform: uppercase; color: var(--on-maroon);
}
.footer-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .4s var(--ease-io); }
.footer-nav a:hover::after { transform: scaleX(1); }
.news-form { width: 100%; max-width: 440px; margin-top: .8rem; }
.news-label { display: block; margin-bottom: .6rem; font-size: .88rem; color: rgba(251, 247, 238, .82); }
.news-row { display: flex; border-bottom: 1px solid rgba(251, 247, 238, .45); }
.news-row input {
  flex: 1; min-width: 0;
  font: inherit; font-size: .92rem; color: var(--on-maroon);
  background: transparent; border: 0; padding: .7rem 0; border-radius: 0;
}
.news-row input::placeholder { color: rgba(251, 247, 238, .6); }
.news-row input:focus { outline: none; }
.news-row .btn { padding: .7rem 1.4rem; margin-bottom: 6px; }
.form-note { font-size: .8rem; margin-top: .6rem; min-height: 1.4em; color: rgba(251, 247, 238, .75); }
.form-note.is-error { color: #FFD4D4; }
.form-note.is-success { color: var(--on-maroon); }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; font-size: .88rem; }
.footer-contact a:hover { color: var(--on-maroon); }
.footer-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding-top: 1.4rem; padding-bottom: 1.6rem;
  border-top: 1px solid rgba(251, 247, 238, .18);
  font-size: .74rem; letter-spacing: .06em; color: rgba(251, 247, 238, .65);
}
.footer-base a:hover { color: var(--on-maroon); }
/* ==========================================================================
   Shower gel comparison
   ========================================================================== */
.compare { background: var(--ivory-alt); }
.compare-wrap { max-width: 1120px; margin-inline: auto; background: var(--ivory); border: 1px solid var(--line); }
.compare-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.compare-table th, .compare-table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table tr > :last-child { border-right: 0; }
.compare-table thead th { border-right-color: rgba(251, 247, 238, .2); }
.compare-hint { display: none; }
.compare-table thead th { background: var(--maroon); color: var(--on-maroon); font-family: var(--serif); font-size: 1.161rem; font-weight: 500; vertical-align: bottom; border-bottom: 0; }
.compare-table thead th:first-child { font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.compare-table thead a { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; color: inherit; }
.compare-table thead a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cmp-arch { position: relative; display: block; width: 52px; height: 70px; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--ivory); }
.cmp-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px 0 0; mix-blend-mode: multiply; }
.cmp-arch.is-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.compare-table tbody th { width: 22%; font-size: .7rem; font-weight: 600; letter-spacing: 0.112em; text-transform: uppercase; line-height: 1.6; color: var(--accent); }
.compare-table td { font-weight: 400; color: var(--text); }
.compare-table tbody tr:nth-child(even) > * { background: rgba(244, 236, 223, .45); }
.compare-table .cmp-signature td { font-family: var(--serif); font-size: 1.032rem; font-weight: 500; color: var(--ink); }
.compare-table .cmp-promise td { font-family: var(--serif); font-style: italic; font-size: 1.032rem; color: var(--maroon); }
.compare-table tbody tr:last-child > * { border-bottom: 0; }

/* ==========================================================================
   Complete the Ritual accessories
   ========================================================================== */

/* ==========================================================================
   Shop by Benefit / Ingredient
   ========================================================================== */
/* A section jumped to from the shop menu starts right under it; --fit-h is the space it has to fill */
.shop-nav { background: var(--ivory); }
.shop-by, .shop-nav ~ .bundles { --fit-h: calc(calc(100svh * var(--vz)) - var(--header-h) - var(--subnav-h)); }
.shop-by { background: var(--ivory); --arch-h: clamp(170px, calc(var(--fit-h) - 375px), 470px); }
.shop-by-ingredient { background: var(--ivory-alt); }
.shop-by .page-head { margin-bottom: clamp(14px, calc(2.4svh * var(--vz)), 28px); }
/* Same arched cards as the collection, sized to the window height but never wider than their column */
.shop-by .p-card { container-type: inline-size; }
.shop-by .p-arch { height: min(var(--arch-h), 128cqw); width: min(100%, calc(var(--arch-h) * .78)); max-height: none; aspect-ratio: auto; margin-inline: auto; }

.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, calc(3vw * var(--vz)), 44px); }
.benefit { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, calc(1.6svh * var(--vz)), 16px); }
.benefit .p-card { align-self: stretch; flex: 1; }
.benefit-head { display: flex; align-items: center; gap: .75rem; }
.benefit-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid rgba(107, 31, 42, .3); border-radius: 50%; }
.benefit-ico .ico { width: 22px; height: 22px; color: var(--maroon); }
.benefit-head h3 { font-size: .74rem; font-family: var(--sans); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--maroon); }
.benefit-head p { font-size: .8rem; line-height: 1.4; color: var(--muted); }

.ing-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.ing-chip {
  padding: .55rem 1rem; border: 1px solid rgba(107, 31, 42, .35); border-radius: 40px; background: var(--ivory);
  font-size: .8rem; font-weight: 500; color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.ing-chip:hover { border-color: var(--maroon); }
.ing-chip[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: var(--on-maroon); }
.ing-result { min-height: 1.6em; margin: 1.2rem auto 1.4rem; max-width: 46rem; text-align: center; font-size: .92rem; color: var(--text); }
.ing-cards { --ing-gap: clamp(12px, calc(3vw * var(--vz)), 44px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ing-gap); }
.ing-cards .p-card { flex: 0 1 calc((100% - 2 * var(--ing-gap)) / 3); }

/* Laptops and desktops: each section fills the screen under the menu, bottles and buttons included */
@media (min-width: 901px) {
  .shop-by, .shop-nav ~ .bundles { min-height: var(--fit-h); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(16px, calc(3svh * var(--vz)), 40px); }
  /* first screen of the shop also holds the announcement bar, breadcrumb and this menu */
  .shop-nav ~ .collection { --arch-h: clamp(170px, calc(calc(100svh * var(--vz)) - var(--header-h) - 445px), 470px); }
  .shop-nav ~ .compare { padding-top: clamp(16px, calc(3svh * var(--vz)), 40px); }
  .shop-nav ~ :is(.bundles, .compare) .section-head { margin-bottom: clamp(14px, calc(2.4svh * var(--vz)), 28px); }
  .shop-nav ~ .bundles .section-sub { max-width: none; margin-top: .4rem; }
  .shop-nav ~ .bundles .bundle-media { min-height: clamp(240px, calc(var(--fit-h) - 250px), 380px); }
}
/* Wide screens: ingredient chips sit beside the gels so the bottles stay large */
@media (min-width: 1101px) {
  .shop-by-ingredient { --arch-h: clamp(170px, calc(var(--fit-h) - 210px), 470px); }
  .ing-filter { display: grid; grid-template-columns: minmax(300px, 32%) minmax(0, 1fr); gap: clamp(32px, calc(4vw * var(--vz)), 72px); align-items: center; }
  .ing-panel .page-head { text-align: left; margin: 0 0 1.4rem; }
  .ing-panel .page-head h2 { font-size: clamp(1.7rem, calc(2.3vw * var(--vz)), 2.3rem); }
  .ing-panel .eyebrow { justify-content: flex-start; }
  .ing-panel .eyebrow .rule:last-child { display: none; }
  .ing-panel .ing-chips { justify-content: flex-start; }
  .ing-panel .ing-result { text-align: left; margin: 1.1rem 0 0; min-height: 4.8em; }
}
@media (max-width: 1100px) {
  .shop-by-ingredient { --arch-h: clamp(170px, calc(var(--fit-h) - 420px), 470px); }
}
/* Short laptop screens (high Windows display scaling): tighter type and spacing so the bottles keep their size */
@media (min-width: 901px) and (max-height: 760px) {
  .crumbs ol { padding-top: .7rem; }
  .shop-nav a { min-height: 38px; }
  .collection .page-head h1, .shop-by .page-head h2, .shop-nav ~ .bundles .section-head h2 { font-size: clamp(1.7rem, calc(5.4svh * var(--vz)), 2.6rem); }
  :is(.collection, .shop-by) .p-info h3 { font-size: 1.22rem; }
  :is(.collection, .shop-by) .p-info .p-price { margin-bottom: .4rem; }
  :is(.collection, .shop-by) .p-info .btn-sm { padding: .65rem 1.4rem; }
  .ing-chip { padding: .4rem .8rem; font-size: .74rem; }
  .ing-panel .page-head { margin-bottom: .9rem; }
  .ing-panel .ing-result { min-height: 3.2em; margin-top: .7rem; font-size: .85rem; }
  .shop-nav ~ .bundles .bundle-body { gap: .35rem; padding-block: 16px; }
  .shop-nav ~ .bundles .bundle-body h3 { font-size: 1.35rem; }
  .shop-nav ~ .bundles .field select { padding-block: .6rem; }
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews { background: var(--ivory); padding-block: clamp(28px, calc(4svh * var(--vz)), 52px); }
@media (min-width: 901px) {
  .reviews .container { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "head form" "empty form" "list list"; column-gap: clamp(32px, calc(5vw * var(--vz)), 80px); align-items: start; }
  .reviews .page-head { grid-area: head; text-align: left; margin: 0 0 1rem; align-self: end; }
  .reviews .page-head .eyebrow { justify-content: flex-start; }
  .reviews .page-head .eyebrow .rule:last-child { display: none; }
  .reviews .review-empty { grid-area: empty; text-align: left; margin: 0; }
  .reviews .review-list { grid-area: list; margin-top: clamp(20px, calc(3vw * var(--vz)), 32px); }
  .reviews .review-form { grid-area: form; max-width: none; margin: 0; }
}
.review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(14px, calc(2vw * var(--vz)), 24px); }
.review-list:empty { display: none; }
.review { padding: 1.4rem; background: var(--ivory-alt); border: 1px solid var(--line); }
.review-stars { color: var(--maroon); letter-spacing: .12em; }
.review blockquote { margin: .6rem 0 .9rem; font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.review-by { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.review-empty { text-align: center; color: var(--muted); margin-bottom: clamp(20px, calc(3vw * var(--vz)), 32px); }
.review-form { display: grid; gap: .8rem; max-width: 640px; margin-inline: auto; padding: clamp(18px, calc(2.4vw * var(--vz)), 28px); background: var(--ivory-alt); border: 1px solid var(--line); }
.review-form h3 { font-size: 1.35rem; }
.review-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.review-form input[type="text"], .review-form input[type="email"], .review-form textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 1px; padding: .8rem 1rem;
  transition: border-color .3s var(--ease);
}
.review-form textarea { resize: vertical; min-height: 84px; }
.review-form input[type="text"]:focus, .review-form input[type="email"]:focus, .review-form textarea:focus { outline: none; border-color: var(--accent-line); }
.review-form > .btn { justify-self: start; }
.review-form .form-note { color: var(--muted); }
.review-form .form-note.is-error { color: var(--maroon); }
.review-form .form-note.is-success { color: var(--maroon); }
/* Star rating: highest first in the markup, shown left to right */
.rating { border: 0; padding: 0; margin: 0; min-width: 0; }
.rating-stars { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.rating legend { padding: 0; margin-bottom: .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating label { display: grid; place-items: center; width: 36px; height: 36px; font-size: 1.6rem; line-height: 1; color: var(--line); cursor: pointer; transition: color .2s var(--ease); }
.rating label:hover, .rating label:hover ~ label, .rating input:checked ~ label { color: var(--maroon); }
.rating input:focus-visible + label { outline: 1px solid var(--maroon); outline-offset: 2px; }

/* ==========================================================================
   Bag drawer + toast
   ========================================================================== */
.overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(58, 15, 23, .45);
  opacity: 0; visibility: hidden;
  pointer-events: none; /* never block clicks while fading out */
  transition: opacity .5s var(--ease), visibility .5s;
}
.bag {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(450px, 100%);
  background: var(--ivory);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .7s var(--ease-io), visibility .7s;
}
body.bag-open .overlay { opacity: 1; visibility: visible; pointer-events: auto; }
/* Visible from the first frame when opening so focus can move into the drawer */
body.bag-open .bag { transform: none; visibility: visible; box-shadow: -30px 0 60px -30px rgba(58, 15, 23, .5); transition: transform .7s var(--ease-io), visibility 0s; }
.bag-head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--gutter); border-bottom: 1px solid var(--line); }
.bag-head h2 { font-size: 1.72rem; }
.bag-items { flex: 1; overflow-y: auto; padding: .5rem var(--gutter); }
.bag-empty { text-align: center; padding: 4rem 0; }
.bag-empty img { width: 40px; margin: 0 auto 1.25rem; }
.bag-empty p { font-family: var(--serif); font-size: 1.247rem; color: var(--ink); }
.bag-empty a { margin-top: 1.25rem; }
.bag-item {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 1rem; align-items: center;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
.bag-thumb { aspect-ratio: 4 / 5; background: var(--ivory-alt); position: relative; overflow: hidden; border-radius: 999px 999px 0 0; }
.bag-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10% 4% 4%; mix-blend-mode: multiply; }
.bag-thumb.is-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.bag-item h3 { font-size: 1.075rem; }
.bag-item .meta { font-size: .72rem; color: var(--muted); letter-spacing: .04em; line-height: 1.5; }
.bag-item .qty { height: 34px; margin-top: .5rem; }
.bag-item .qty button { width: 30px; font-size: .95rem; }
.bag-item .qty span { min-width: 22px; font-size: .85rem; }
.bag-item-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.bag-item-right .price { font-size: 1.2rem; }
.remove { font-size: .7rem; letter-spacing: 0.128em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.remove:hover { color: var(--maroon); }
.bag-foot { padding: 1.5rem var(--gutter) 1.75rem; border-top: 1px solid var(--line); background: var(--ivory-alt); }
.bag-total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); font-size: 1.29rem; color: var(--ink); }
.bag-note { font-size: .78rem; color: var(--muted); margin: .25rem 0 1.25rem; }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 120;
  transform: translate(-50%, 20px);
  background: var(--maroon-ink); color: #FBF7EE;
  border: 1px solid rgba(107, 31, 42, 0.24);
  font-size: .8rem; letter-spacing: .08em;
  padding: 1rem 1.6rem;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease-out);
  max-width: calc(100% - 32px);
  text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .ing-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .bundle-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  :root { --header-h: 56px; }
  .nav { display: none; }
  .brand img { height: 30px; }

  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:nth-child(3) { border-left: 0; }
  .feature:nth-child(n+3) { border-top: 1px solid rgba(107, 31, 42, 0.12); }

  .p-grid, .complete .p-grid, .scent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-grid > :last-child:nth-child(odd), .scent-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - clamp(10px, calc(1.5vw * var(--vz)), 22px)); margin-inline: auto; }
  .p-cta { display: none; }

  .hamper-grid, .sensorial-inner, .pd-grid, .formula-body, .story-grid { grid-template-columns: minmax(0, 1fr); }
  .hamper-media { margin-inline: auto; width: 100%; }
  .sensorial-copy { text-align: center; }
  .sensorial-copy p { margin-inline: auto; }

  .pd-gallery { position: static; grid-template-columns: minmax(0, 1fr); max-width: 520px; width: 100%; margin-inline: auto; }
  .pd-gallery { --pd-h: clamp(340px, calc(62svh * var(--vz)), 560px); }
  .pd-main { grid-column: 1; height: auto; aspect-ratio: 3 / 4; } /* the gallery images' own shape, so their sides are never trimmed */
  .pd-thumbs { grid-column: 1; grid-row: 2; flex-direction: row; justify-content: flex-start; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  .pd-thumb { width: 64px; flex: none; }

  .story-visual { max-width: 640px; }
  .policy-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .policy-nav { position: static; flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .policy-nav .eyebrow { display: none; }
  .policy-nav a { flex: none; margin: 0 0 -1px; padding: .7rem .9rem; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .policy-nav a[aria-current="page"] { border-bottom-color: var(--maroon); }
  .policy-toc a, .policy-section li a { padding: .4rem 0; }
  .promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  .btn { white-space: normal; text-align: center; line-height: 1.5; }
  .announce { font-size: .64rem; letter-spacing: .14em; }
  :root { --announce-h: 38px; } /* the smaller offers bar on phones */
  .header-inner { gap: 4px; }
  .brand img { height: 28px; }

  .hero-actions .btn { flex: 1 1 100%; padding: .85rem 1.2rem; }
  .mobile-nav { left: 0; width: 100%; border-inline: 0; }
  .hero { --stage: min(calc(58vw * var(--vz)), 300px); }
  .feature { padding: .7rem .5rem; gap: .5rem; }
  .feature span { font-size: .64rem; letter-spacing: .1em; }

  .p-grid, .complete .p-grid, .scent-grid { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .p-grid > :last-child:nth-child(odd), .scent-grid > :last-child:nth-child(odd) { width: 100%; }
  .p-card, .scent-tile { max-width: 380px; width: 100%; margin-inline: auto; }
  /* Phones: the three gels stay side by side */
  .collection { --arch-h: clamp(150px, calc(calc(100svh * var(--vz)) - var(--header-h) - 350px), 260px); }
  .collection .p-grid { gap: 10px; }
  .scent-grid { --arch-h: clamp(220px, calc(calc(100svh * var(--vz)) - var(--header-h) - 280px), 420px); }
  .collection .p-card { max-width: none; }
  .collection .p-arch::before { inset: 6px 6px 0; }
  .collection .p-info h3 { font-size: .98rem; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
  .collection .p-info h3 a { padding: .3rem 0; } /* comfortable tap target */
  .collection .p-desc { display: none; }
  .collection .p-price { font-size: .78rem; }
  .collection .p-info .btn-sm { width: 100%; padding: .65rem .3rem; font-size: .64rem; letter-spacing: .06em; }
  /* Hampers: one per row on phones, with their contents shown */
  .collection.hampers .p-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 520px; margin-inline: auto; }
  .collection.hampers .p-desc { display: block; font-size: .82rem; }
  .collection.hampers .p-info h3 { display: block; min-height: 0; font-size: 1.2rem; }
  .collection.hampers .p-price { font-size: .9rem; }
  .collection.hampers .p-info .btn-sm { width: auto; padding: .8rem 1.5rem; }
  /* Shop section menu: scrolls away with the page on small phones, one row that scrolls sideways */
  .shop-nav { position: static; }
  html:has(.shop-nav) { scroll-padding-top: calc(var(--header-h) + 16px); }
  .shop-nav .container { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 0 1.4rem; }
  .shop-nav a { flex: none; white-space: nowrap; }

  .shop-by, .shop-by-ingredient { --arch-h: clamp(200px, calc(var(--fit-h) - 430px), 360px); }
  .benefit-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ing-cards { gap: 44px; }
  .ing-cards .p-card { flex-basis: 100%; }
  .bundle-list em { display: none; }
  .duo-fields { grid-template-columns: minmax(0, 1fr); gap: .6rem; }

  .pd-buy .btn { min-width: 0; }
  .pd-perks { grid-template-columns: minmax(0, 1fr); }
  .pd-perks li + li { border-left: 0; border-top: 1px solid var(--line); }
  .pyr { grid-template-columns: 64px minmax(0, 1fr); }
  .pyr-tier { min-height: 0; }
  .pyr-note { grid-template-columns: minmax(0, 1fr); }
  .pyr-note dt { padding: .45rem; }

  .formula-actions .btn { flex: 1 1 100%; }

  .quiz-result { grid-template-columns: 90px minmax(0, 1fr); gap: 1rem; padding: 1rem; }

  .ing-tiles { gap: 28px 16px; }
  .ing-tile h2 { font-size: 1.118rem; }

  .j-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-row { grid-template-columns: minmax(0, 1fr); }
  .contact-row li + li { border-left: 0; border-top: 1px solid var(--line); }

  .promise-list { grid-template-columns: minmax(0, 1fr); }
  .review-fields { grid-template-columns: minmax(0, 1fr); }
  .review-form > .btn { justify-self: stretch; }
  .ing-chip { font-size: .76rem; padding: .5rem .85rem; }
  .policy-toc ol { columns: 1; }
  .footer-nav { gap: 0 1.4rem; }
  .footer-base { flex-direction: column; text-align: center; align-items: center; }
  .nd-head, .nd-body { padding-inline: 1.1rem; }
}

@media (max-width: 420px) {
  .ing-tiles { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .compare-hint { display: block; margin: -.4rem 0 .7rem; text-align: right; font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--accent); }
  .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .compare-wrap:focus-visible { outline-offset: 2px; }
  .compare-table { width: auto; min-width: 560px; font-size: .84rem; border-collapse: separate; border-spacing: 0; }
  .compare-table th, .compare-table td { padding: .75rem .8rem; }
  .compare-table thead th { font-size: 1rem; }
  .compare-table thead th:not(:first-child) { width: 160px; }
  .cmp-arch { display: none; }
  .compare-table tbody th { width: 104px; min-width: 104px; font-size: .64rem; letter-spacing: .08em; }
  /* Feature names stay in view while the gel columns scroll */
  .compare-table tr > :first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
  .compare-table tbody th { background: var(--ivory); }
  .compare-table tbody tr:nth-child(even) > th { background: #F8F2E8; }
  .compare-table thead th:first-child { background: var(--maroon); }
  .compare-table .cmp-signature td, .compare-table .cmp-promise td { font-size: .92rem; }
}

/* ==========================================================================
   Checkout & order confirmation
   ========================================================================== */
.checkout .page-head { margin-bottom: clamp(20px, calc(2.6vw * var(--vz)), 32px); }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(28px, calc(4vw * var(--vz)), 64px); align-items: start; }
.checkout-grid[hidden] { display: none; }
.checkout-form fieldset { border: 0; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 1rem; min-width: 0; }
.checkout-form legend { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); margin-bottom: 1rem; padding: 0; }
.checkout-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.checkout-row-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr); }
.checkout-form .field > span em, .auth-form .field > span em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.checkout-form input, .checkout-form textarea, .auth-form input:not([type="checkbox"]) {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 1px; padding: .85rem 1rem;
  transition: border-color .3s var(--ease);
}
.checkout-form textarea { resize: vertical; min-height: 64px; }
.checkout-form input:focus, .checkout-form textarea:focus, .auth-form input:focus { outline: none; border-color: var(--accent-line); }
.checkout-form [aria-invalid="true"], .auth-form .input-validation-error { border-color: var(--maroon); }
.field-error { display: block; min-height: 0; margin-top: .35rem; font-size: .78rem; color: var(--maroon); }
.field-error:empty { display: none; }
.field > .field-error { margin: .35rem 0 0; font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--maroon); } /* validation messages, not label text */
.checkout-message { min-height: 1.4em; margin: 0 0 .9rem; font-size: .88rem; color: var(--muted); }
.checkout-message.is-error { color: var(--maroon); font-weight: 500; }
.checkout-form .btn[disabled] { opacity: .55; cursor: not-allowed; }
.checkout-secure { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .9rem; font-size: .78rem; color: var(--muted); text-align: center; }

.checkout-summary { position: sticky; top: calc(var(--header-h) + 24px); padding: clamp(20px, calc(2.4vw * var(--vz)), 30px); background: var(--ivory-alt); border: 1px solid var(--line); }
.checkout-summary h2, .oc-card h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.checkout-lines { list-style: none; margin: 0; padding: 0; }
.checkout-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.checkout-line:first-child { padding-top: 0; }
.checkout-thumb { position: relative; width: 58px; height: 58px; background: #fff; border: 1px solid var(--line); }
.checkout-thumb img { width: 100%; height: 100%; object-fit: cover; }
.checkout-qty { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--maroon); color: var(--on-maroon); font-size: .68rem; font-weight: 600; line-height: 20px; text-align: center; }
.checkout-line-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.checkout-line-text strong { font-family: var(--serif); font-size: 1rem; font-weight: 500; color: var(--ink); }
.checkout-line-text small { font-size: .78rem; color: var(--muted); }
.checkout-line-price { font-weight: 600; color: var(--ink); white-space: nowrap; }
.checkout-loading { padding: .85rem 0; color: var(--muted); font-size: .9rem; }
.checkout-totals { margin: 1rem 0 0; }
.checkout-totals > div { display: flex; justify-content: space-between; padding: .35rem 0; font-size: .92rem; }
.checkout-totals dt { color: var(--text); }
.checkout-totals dd { margin: 0; font-weight: 600; color: var(--ink); }
.checkout-totals .is-total { margin-top: .5rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: 1.1rem; }
.checkout-totals .is-total dd { color: var(--maroon); }
.checkout-empty { display: grid; justify-items: center; gap: 1rem; padding: clamp(32px, calc(6vw * var(--vz)), 72px) 0; text-align: center; }
.checkout-empty[hidden] { display: none; }

.order-confirmation .page-head p { margin-top: .8rem; }
.oc-mark { margin: 0 auto 1rem; }
.oc-card { max-width: 760px; margin: 0 auto; padding: clamp(20px, calc(3vw * var(--vz)), 36px); background: var(--ivory-alt); border: 1px solid var(--line); }
.oc-card h2 { margin-top: 1.8rem; }
.oc-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.oc-meta dt { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.oc-meta dd { margin: .3rem 0 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.oc-address { font-style: normal; line-height: 1.7; color: var(--text); }
.oc-help { max-width: 760px; margin: 1.4rem auto 0; text-align: center; font-size: .9rem; }
.oc-actions { text-align: center; margin-top: 1.4rem; }
.checkout-account { margin: 0 0 1.4rem; padding: .85rem 1rem; background: var(--ivory-alt); border: 1px solid var(--line); font-size: .88rem; color: var(--text); }

/* Bag page (/cart) */
.cart-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cart-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; align-items: start; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.cart-thumb { display: block; width: 92px; height: 92px; background: #fff; border: 1px solid var(--line); }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-thumb.is-photo img { object-fit: cover; }
.cart-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cart-info strong { font-family: var(--serif); font-size: 1.08rem; font-weight: 500; color: var(--ink); }
.cart-info small { font-size: .8rem; color: var(--muted); }
.cart-info .cart-unavailable { color: var(--maroon); font-weight: 500; }
.cart-controls { display: flex; align-items: center; gap: 1.2rem; margin-top: .6rem; }
.cart-controls form { margin: 0; }
.cart-qty button[disabled] { opacity: .35; cursor: not-allowed; }
.cart-line-price { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cart-line.is-unavailable .cart-thumb { opacity: .5; }
.cart-continue { display: inline-flex; margin-top: 1.4rem; }
.cart-guest { margin-top: 1rem; font-size: .82rem; color: var(--text); text-align: center; }
.cart-blocked { margin-top: 1rem; font-size: .85rem; color: var(--maroon); font-weight: 500; }
.cart-checkout { margin-top: 1.2rem; }
.cart-notice { max-width: 760px; margin: 0 auto 1.4rem; }
.checkout-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.checkout-summary-head h2 { margin-bottom: 1rem; }
.checkout-summary-head .text-link { font-size: .85rem; }
.bag-view { display: flex; justify-content: center; margin-top: .9rem; }

/* Log in / register / my account */
.auth-card { max-width: 480px; margin: 0 auto; padding: clamp(22px, calc(3vw * var(--vz)), 38px); background: var(--ivory-alt); border: 1px solid var(--line); }
.auth-login-card { padding-top: 24px; padding-bottom: 24px; }
.auth-head { text-align: center; margin-bottom: 1.6rem; }
.auth-head p { margin-top: .6rem; font-size: .92rem; color: var(--text); }
.auth-form { display: grid; gap: 1rem; }
.auth-login-card .auth-head { margin-bottom: 1rem; }
.auth-login-card .auth-form { gap: .75rem; }
.auth-login-card .auth-mobile-login { margin-top: .9rem; }
.auth-login-card .auth-switch { margin-top: .75rem; }
.auth-register-card { padding-top: 20px; padding-bottom: 20px; }
.auth-register-card .auth-head { margin-bottom: .75rem; }
.auth-register-card .auth-form { gap: .6rem; }
.auth-register-card .auth-form .btn { margin-top: .15rem; }
.auth-register-card .auth-form .auth-register-row { gap: .6rem; }
.auth-register-card .auth-form input:not([type="checkbox"]) { padding: .6rem .8rem; }
.auth-register-card .auth-hint { margin-top: .15rem; }
.auth-register-card .auth-terms { margin: 0; }
.auth-register-card .auth-switch { margin-top: .65rem; }
.auth-register-card > .btn-outline { margin-top: .6rem; }
.auth-form .checkout-row { gap: 1rem; }
.auth-form .btn { margin-top: .4rem; }
.auth-check { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--text); cursor: pointer; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--maroon); }
.auth-hint { display: block; margin-top: .35rem; font-size: .76rem; color: var(--muted); }
.auth-alert { margin: 0 0 1.2rem; padding: .8rem 1rem; border: 1px solid var(--accent-line); background: #fff; color: var(--maroon); font-size: .88rem; font-weight: 500; }
.auth-notice { margin: 0 0 1.2rem; padding: .8rem 1rem; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: .88rem; }
.auth-mobile-login { margin-top: 1.25rem; }
.auth-mobile-toggle { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem; border: 1px solid var(--line); color: var(--maroon); font-size: .8rem; cursor: pointer; list-style: none; }
.auth-mobile-toggle::-webkit-details-marker { display: none; }
.auth-mobile-toggle::after { content: "+"; font-size: 1rem; line-height: 1; }
.auth-mobile-login[open] .auth-mobile-toggle::after { content: "−"; }
.auth-mobile-login > .auth-form { margin-top: 1rem; }
.auth-otp-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.auth-terms { font-size: .78rem; color: var(--muted); text-align: center; }
.auth-switch { margin-top: 1.4rem; text-align: center; font-size: .9rem; }
.account-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, calc(4vw * var(--vz)), 56px); align-items: start; }
.account-card { padding: clamp(20px, calc(2.4vw * var(--vz)), 30px); background: var(--ivory-alt); border: 1px solid var(--line); }
.account-card h2, .account-orders h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.account-details { grid-template-columns: minmax(0, 1fr); }
.account-logout { margin-top: 1.4rem; }
.account-empty { display: grid; justify-items: start; gap: 1rem; padding: 1.4rem; border: 1px solid var(--line); }
.account-order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.account-order { padding: 1.1rem 1.2rem; border: 1px solid var(--line); background: #fff; }
.account-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.account-order-head strong { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.account-order-head small { font-size: .78rem; color: var(--muted); }
.account-status { flex: none; padding: .25rem .6rem; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--maroon); background: var(--ivory-alt); border: 1px solid var(--line); }
.account-order-items { margin: .7rem 0; font-size: .88rem; color: var(--text); }
.account-shipment { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: 0 0 .7rem; padding: .55rem .8rem; background: var(--ivory-alt); font-size: .82rem; color: var(--text); }
.account-shipment span:first-child { font-weight: 600; color: var(--ink); }
.account-order-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 600; color: var(--ink); }
.order-timeline { display: grid; gap: .7rem; margin: .9rem 0 1rem; padding: 0 0 0 1rem; border-left: 1px solid var(--accent-line); list-style: none; }
.order-timeline li { display: grid; gap: .15rem; padding-left: .3rem; font-size: .82rem; color: var(--text); }
.order-timeline strong { color: var(--ink); }
.order-timeline small { color: var(--muted); font-size: .72rem; }

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .checkout-summary { position: static; order: -1; }
  .oc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-grid { grid-template-columns: minmax(0, 1fr); }
  .account-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .checkout-row, .checkout-row-3 { grid-template-columns: minmax(0, 1fr); }
  .account-details { grid-template-columns: minmax(0, 1fr); }
  .cart-line { grid-template-columns: auto minmax(0, 1fr); }
  .cart-thumb { width: 72px; height: 72px; }
  .cart-line-price { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .preloader { display: none; }
}

.mobile-nav-shop { border-bottom: 1px solid var(--line); }
.mobile-nav-shop summary { display: flex; align-items: center; justify-content: space-between; padding: .8rem 0; color: var(--ink); font-family: var(--serif); font-size: 1.15rem; cursor: pointer; list-style: none; }
.mobile-nav-shop summary::-webkit-details-marker { display: none; }
.mobile-nav-shop summary::after { content: "+"; color: var(--accent); font-family: var(--sans); font-size: 1rem; }
.mobile-nav-shop[open] summary::after { content: "−"; }
.mobile-nav-shop summary[aria-current="page"] { color: var(--maroon); }
.mobile-nav-shop .sub { display: flex; }

.home-offer-banner { padding-block: clamp(18px, calc(3vw * var(--vz)), 36px); background: var(--ivory); }
.home-offer-banner picture, .home-offer-banner img { display: block; width: 100%; }
.home-offer-banner img { max-height: 360px; object-fit: cover; }
.home-offer-banner a { display: block; }
.home-offer-banner a:focus-visible { outline: 2px solid var(--maroon); outline-offset: 4px; }

.hamper-details { width: 100%; margin: .35rem 0 .7rem; text-align: left; }
.hamper-details summary { color: var(--maroon); font-size: .78rem; font-weight: 600; cursor: pointer; }
.hamper-items { display: grid; gap: .35rem; margin: .55rem 0 0; padding: .7rem .8rem; list-style: none; background: var(--ivory-alt); text-align: left; font-size: .78rem; }
.hamper-items li { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.hamper-items a { flex: none; color: var(--maroon); text-decoration: underline; text-underline-offset: 2px; }

.checkout-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .6rem; margin-top: 1rem; }
.checkout-coupon .field { margin: 0; }
.checkout-coupon input { width: 100%; padding: .65rem .75rem; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; }
.checkout-coupon .btn { padding: .7rem 1rem; }
.coupon-message { grid-column: 1 / -1; min-height: 1em; margin: 0; font-size: .8rem; color: var(--muted); }
.coupon-message.is-error { color: var(--maroon); }
.coupon-message.is-success { color: #355b42; }
.checkout-totals [data-discount-row] dd { color: var(--maroon); }

.account-notice { margin: 0 0 1.2rem; padding: .8rem 1rem; background: var(--ivory-alt); border: 1px solid var(--line); font-size: .88rem; }
.account-notice.is-error { color: var(--maroon); }
.account-cancel { margin-top: .6rem; text-align: right; }
.account-cancel button { padding: 0; background: none; border: 0; cursor: pointer; font: inherit; }
.confirmation-shipment { margin: .5rem 0; }