/* ==========================================================================
   SOLIN — design system
   Warm, editorial, premium skincare. Mobile-first.
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
  /* Palette — creamy ivory to warm charcoal */
  --bg:        #F6F1E8;   /* creamy ivory, base */
  --bg-soft:   #F1EADC;   /* warm alt section */
  --bg-deep:   #E8DDCC;   /* soft beige, tiles */
  --paper:     #FBF8F2;   /* warm off-white, cards */
  --ink:       #3A2D22;   /* warm charcoal-brown — typography + UI */
  --ink-2:     #6E5F50;   /* muted taupe — secondary text */
  --accent:    #96775A;   /* dusty bronze — links, small details */
  --accent-light: #C4A882; /* lighter bronze for subtle highlights */
  --line:      rgba(58, 45, 34, 0.14);
  --line-soft: rgba(58, 45, 34, 0.09);
  --footer-bg: #33281E;   /* restrained dark brown */

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Space & misc */
  --container: 1240px;
  --gutter: clamp(20px, 4.5vw, 48px);
  --radius: 2px;
  --radius-wide: 4px;
  --shadow-soft: 0 18px 50px -24px rgba(58, 45, 34, 0.35);
  --shadow-editorial: 0 4px 24px -8px rgba(58, 45, 34, 0.15);
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --ease-slow: cubic-bezier(0.22, 0.61, 0.21, 1.2);
}

/* ---------- Reset ---------- */

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

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

html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, p, figure { margin: 0; }

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

::selection { background: var(--bg-deep); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Typography ---------- */

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 340;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.7rem, 7vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.15rem; font-weight: 500; }

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--ink-2);
  max-width: 34em;
}

.italic-accent { font-style: italic; font-weight: 320; }

/* ---------- Layout helpers ---------- */

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

.section { padding-block: clamp(64px, 9vw, 120px); }
.section-tight { padding-block: clamp(48px, 6vw, 80px); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section-head h2 { max-width: 14em; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
  text-align: center;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.btn-primary:hover { background: #4C3C2D; border-color: #4C3C2D; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }

.btn-block { width: 100%; }

.btn[disabled] { opacity: 0.5; cursor: default; }

/* ---------- Space for content that arrives late ----------

   The catalogue and the CMS copy are fetched after the document is already
   on screen. When those blocks are filled in they push everything below them
   down, which is the jump the homepage used to give on first open. The grids
   below therefore hold their final size from the start, so content lands in
   space that was already there instead of shoving the page around.

   These numbers are the measured heights of the blocks as currently
   published. If the owner adds or removes a ritual step or an ingredient,
   re-check them — growing beyond the reservation is harmless (the page just
   extends), but shrinking leaves a gap. */

.ritual-steps,
#ritual-steps { min-height: 1900px; }
#ingredients-grid { min-height: 550px; }

/* These have to switch where the grids do — .ingredients-grid goes to four
   columns at 640px and .ritual-steps to three at 760px. Reserving at 768px
   left an 8px band (640-767px) where the content had already collapsed into
   one short row but the full mobile reservation was still applied. */
@media (min-width: 640px) {
  #ingredients-grid { min-height: 390px; }
}

@media (min-width: 760px) {
  /* Side by side from here up, so the stack is far shorter. */
  #ritual-steps { min-height: 700px; }
}

/* Reduced motion and no-JS readers get the reserved gap collapsed, since
   without the animation there is nothing to smooth out anyway. */
@media (prefers-reduced-motion: reduce) {
  #ritual-steps, #ingredients-grid { min-height: 0; }
}

/* ---------- Entrance transition ----------

   This runs once, on load, from CSS alone. It used to be an
   IntersectionObserver that held these elements at opacity 0 until they were
   scrolled into view, which made the homepage fill in behind the reader and
   feel broken. Nothing here waits for a scroll event, and because the
   animation starts from the stylesheet there is no state in which content
   stays invisible if the script is slow, blocked or fails. */

.reveal {
  animation: reveal-in .38s var(--ease) both;
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.reveal.d1 { animation-delay: .05s; }
.reveal.d2 { animation-delay: .1s; }
.reveal.d3 { animation-delay: .15s; }
.reveal.d4 { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger .reveal, .section-reveal { animation: none; opacity: 1; transform: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 241, 232, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line-soft); }

.announce {
  background: var(--ink);
  color: rgba(251, 248, 242, 0.92);
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px var(--gutter);
}

.header-main { border-bottom: 1px solid var(--line-soft); }
.site-header.scrolled .header-main { border-bottom-color: transparent; }

.header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 62px;
  gap: 12px;
}

.header-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* optically center the tracked wordmark */
  text-align: center;
  white-space: nowrap;
  }

/* When the owner uploads a logo, branding.js swaps the wordmark for it. The
   tracking and text-indent that centre the wordmark would distort an image, so
   the image resets them and is constrained by height instead. */
.brand-logo-img {
  display: block;
  max-height: 34px;
  width: auto;
  letter-spacing: normal;
  text-indent: 0;
}
.footer-logo .brand-logo-img { max-height: 26px; }

/* Shown when the owner puts the shop into maintenance mode. It informs rather
   than blocks: the storefront still renders, so the owner and any cached
   crawler still sees something real. */
.maintenance-bar {
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  padding: 10px 16px;
  font-size: 0.85rem;
}
.maintenance-bar[hidden] { display: none; }

.header-nav { display: none; align-items: center; gap: 28px; }
.header-nav > a,
.nav-drop > a {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  transition: color 0.25s var(--ease);
  padding: 6px 0;
}
.header-nav > a:hover, .header-nav > a.is-active,
.nav-drop > a:hover { color: var(--ink); }
.header-nav > a.is-active { color: var(--ink); border-bottom: 1px solid var(--ink); }

.nav-drop { position: relative; }
.nav-drop-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
  padding: 14px 0;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-panel a {
  display: block;
  padding: 8px 22px;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.nav-drop-panel a:hover { color: var(--ink); background: var(--bg-soft); }

.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: relative;
  color: var(--ink);
  transition: background 0.25s var(--ease);
}
.icon-btn:hover { background: rgba(58, 45, 34, 0.07); }
.icon-btn svg { width: 21px; height: 21px; }

.cart-count {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* Mobile menu */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) 40px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.mobile-menu.open { transform: none; opacity: 1; visibility: visible; }

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  margin-bottom: 8vh;
}
.mobile-menu-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.3em;
}
.mobile-menu-nav { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.mobile-menu-nav > a {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.7rem, 7vw, 2.2rem);
  line-height: 1.35;
  color: var(--ink);
}
.mobile-menu-label {
  margin-top: 26px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.mobile-menu-nav > a[href^="shop.html?"] {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-2);
  padding-block: 5px;
}
.mobile-menu-foot {
  margin-top: auto;
  font-size: 0.8125rem;
  color: var(--ink-2);
  font-style: italic;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { overflow: visible; }

.hero-grid {
  display: grid;
  gap: clamp(36px, 6vw, 64px);
  padding-top: clamp(40px, 6vw, 72px);
}

.hero-copy { max-width: 560px; }
.hero-copy .eyebrow { display: block; margin-bottom: 20px; }
.hero-copy h1 { margin-bottom: 22px; }
.hero-copy .lede { margin-bottom: 34px; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.hero-media { position: relative; }

.hero-img {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px var(--radius) var(--radius); /* arch — beauty editorial */
  background: var(--bg-deep);
}
.hero-img img {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
}

.hero-chip {
  position: absolute;
  right: clamp(-10px, -2vw, -28px);
  bottom: clamp(20px, 4vw, 44px);
  width: clamp(130px, 22vw, 210px);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
  padding: 10px 10px 12px;
  transition: transform 0.4s var(--ease);
}
.hero-chip:hover { transform: translateY(-4px); }
.hero-chip img {
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  border-radius: calc(var(--radius) - 1px);
}
.hero-chip-name {
  font-size: 0.75rem;
  font-weight: 500;
  margin: 10px 2px 2px;
}
.hero-chip-price { font-size: 0.75rem; color: var(--ink-2); margin-left: 2px; }

.hero-note {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.hero-note::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
}

/* ---------- Values strip ---------- */

.values-strip {
  border-block: 1px solid var(--line-soft);
  background: var(--bg-soft);
}
.values-strip .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  padding-block: 22px;
}
.values-strip p {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.values-strip p::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ==========================================================================
   Product cards & grids
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3.5vw, 40px) clamp(16px, 2.5vw, 28px);
}

.product-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-deep);
}
.product-card-media img {
  width: 100%;
  aspect-ratio: 4 / 4.8;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.product-card:hover .product-card-media img { transform: scale(1.045); }

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(251, 248, 242, 0.92);
  color: var(--ink);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}

.product-quick {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: rgba(58, 45, 34, 0.94);
  color: var(--paper);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 12px;
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.25s;
}
.product-card:hover .product-quick,
.product-card:focus-within .product-quick {
  opacity: 1;
  transform: none;
}
.product-quick:hover { background: var(--ink); }

/* Always-visible quick add on touch devices */
@media (hover: none) {
  .product-quick { opacity: 1; transform: none; background: rgba(58, 45, 34, 0.85); padding: 9px; font-size: 0.72rem; }
}

.product-card-info { padding-top: 16px; }
.product-cat {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.product-name { font-size: 1.06rem; font-weight: 500; line-height: 1.3; }
.product-name a { transition: color 0.25s var(--ease); }
.product-name a:hover { color: var(--accent); }
.product-tagline {
  font-size: 0.84rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-price { margin-top: 9px; font-size: 0.92rem; font-weight: 500; }

/* ==========================================================================
   Collections tiles
   ========================================================================== */

.collections-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 64vw);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.collections-scroll::-webkit-scrollbar { display: none; }

.collection-tile { scroll-snap-align: start; display: block; }
.collection-media {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px var(--radius) var(--radius);
  background: var(--bg-deep);
}
.collection-media img {
  width: 100%;
  aspect-ratio: 3 / 3.6;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.collection-tile:hover .collection-media img { transform: scale(1.05); }
.collection-name {
  position: absolute;
  left: 18px;
  bottom: 16px;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 380;
  font-size: 1.35rem;
  text-shadow: 0 1px 14px rgba(40, 28, 16, 0.45);
}
.collection-blurb {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.45;
}

/* ==========================================================================
   Editorial section
   ========================================================================== */

.editorial {
  background: var(--bg-soft);
  overflow: clip;
}

.editorial-grid {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}

.editorial-copy .eyebrow { display: block; margin-bottom: 18px; }
.editorial-copy h2 { margin-bottom: 22px; }
.editorial-copy .lede { margin-bottom: 34px; }

.pillars { display: grid; gap: 0; margin-bottom: 36px; }
.pillar {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  margin-bottom: 4px;
}
.pillar p { font-size: 0.88rem; color: var(--ink-2); }

.editorial-media { position: relative; }
.editorial-img-main {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-deep);
}
.editorial-img-main img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
}
.editorial-img-small {
  position: absolute;
  left: clamp(-8px, -1vw, -24px);
  bottom: clamp(-16px, -2vw, -30px);
  width: clamp(110px, 18vw, 190px);
  border: 6px solid var(--bg-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-deep);
}
.editorial-img-small img { aspect-ratio: 1 / 1.15; object-fit: cover; }

/* ==========================================================================
   Ritual (routine) section
   ========================================================================== */

.ritual-steps {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  counter-reset: step;
}
.ritual-step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.ritual-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.ritual-step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: 1.6rem;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}
.ritual-step h3 { margin-bottom: 6px; font-size: 1.05rem; }
.ritual-step p { font-size: 0.88rem; color: var(--ink-2); margin-bottom: 16px; }
.ritual-step-img {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-deep);
}
.ritual-step-img img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.ritual-step:hover .ritual-step-img img { transform: scale(1.04); }

/* ==========================================================================
   Ingredient index strip
   ========================================================================== */

.ingredients {
  background: var(--ink);
  color: var(--bg);
}
.ingredients .eyebrow { color: rgba(246, 241, 232, 0.55); }
.ingredients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 28px;
}
.ingredient h3 {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: 1.3rem;
  color: var(--bg);
  margin-bottom: 4px;
}
.ingredient p { font-size: 0.85rem; color: rgba(246, 241, 232, 0.72); }
.ingredients-note {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: rgba(246, 241, 232, 0.55);
  border-top: 1px solid rgba(246, 241, 232, 0.16);
  padding-top: 18px;
  max-width: 44em;
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band { text-align: center; }
.cta-band h2 { max-width: 15em; margin-inline: auto; margin-bottom: 14px; }
.cta-band .lede { margin-inline: auto; margin-bottom: 30px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--footer-bg);
  color: rgba(246, 241, 232, 0.82);
  margin-top: clamp(64px, 9vw, 120px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-block: clamp(48px, 6vw, 72px) 40px;
}

.footer-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  color: var(--bg);
  margin-bottom: 12px;
}
.footer-blurb { font-size: 0.875rem; max-width: 30em; margin-bottom: 26px; }

.newsletter-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 241, 232, 0.55);
  margin-bottom: 10px;
}
.newsletter {
  display: flex;
  max-width: 340px;
}
.newsletter input {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(246, 241, 232, 0.25);
  border-right: 0;
  color: var(--bg);
  padding: 12px 14px;
  border-radius: var(--radius) 0 0 var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
}
.newsletter input::placeholder { color: rgba(246, 241, 232, 0.4); }
.newsletter button {
  background: var(--accent);
  color: var(--paper);
  padding: 0 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: background 0.3s var(--ease);
}
.newsletter button:hover { background: var(--accent-light); }
.newsletter-row { display: flex; max-width: 340px; }
.newsletter-row input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid rgba(246, 241, 232, 0.25);
  border-right: 0;
  color: var(--bg);
  padding: 12px 14px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.newsletter-row input::placeholder { color: rgba(246, 241, 232, 0.4); }
.newsletter-row button {
  background: var(--bg);
  color: var(--ink);
  padding: 0 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: background 0.3s var(--ease);
}
.newsletter-row button:hover { background: var(--bg-deep); }
.newsletter-row button svg { width: 18px; height: 18px; }

.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-head {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 241, 232, 0.5);
  margin-bottom: 6px;
}
.footer-col a {
  font-size: 0.875rem;
  color: rgba(246, 241, 232, 0.82);
  transition: color 0.25s var(--ease);
  width: fit-content;
}
.footer-col a:hover { color: var(--bg); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid rgba(246, 241, 232, 0.14);
  padding-block: 22px;
  font-size: 0.75rem;
  color: rgba(246, 241, 232, 0.5);
}

/* ==========================================================================
   Cart drawer / backdrop / toast
   ========================================================================== */

.page-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40, 30, 20, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
  z-index: 130;
}

#cart-backdrop.show { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--paper);
  z-index: 150;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  box-shadow: -30px 0 60px -30px rgba(40, 30, 20, 0.4);
}
.cart-drawer.open { transform: none; }

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.cart-drawer-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
}

.cart-drawer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

.drawer-empty {
  margin: auto;
  text-align: center;
  padding: 40px 30px;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.drawer-empty-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; }
.drawer-empty-sub { font-size: 0.875rem; color: var(--ink-2); margin-bottom: 18px; }

.drawer-lines { flex: 1; overflow-y: auto; padding: 6px 22px; }

.drawer-line {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.drawer-line-img img {
  width: 74px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-deep);
}
.drawer-line-name { font-size: 0.9rem; font-weight: 500; display: block; }
.drawer-line-name:hover { color: var(--accent); }
.drawer-line-var { font-size: 0.78rem; color: var(--ink-2); margin-top: 2px; }
.drawer-line-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.drawer-line-price { font-size: 0.9rem; font-weight: 500; }
.drawer-line-remove {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  align-self: start;
  margin-top: 2px;
}
.drawer-line-remove:hover { color: var(--ink); }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.qty-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  color: var(--ink-2);
  transition: color 0.2s;
}
.qty-btn:hover { color: var(--ink); }
.qty-num { min-width: 26px; text-align: center; font-size: 0.85rem; }

.drawer-foot {
  border-top: 1px solid var(--line-soft);
  padding: 18px 22px 22px;
  display: grid;
  gap: 10px;
  background: var(--paper);
}
.drawer-ship { font-size: 0.78rem; color: var(--ink-2); }
.drawer-ship.is-free { color: var(--accent); }
.drawer-subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 1rem;
  padding-bottom: 4px;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(16px);
  background: var(--ink);
  color: var(--bg);
  font-size: 0.85rem;
  padding: 12px 22px;
  border-radius: 999px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  z-index: 180;
  max-width: calc(100vw - 40px);
  text-align: center;
}
.toast.show { opacity: 1; visibility: visible; transform: translateX(-50%); }

/* ==========================================================================
   Search panel
   ========================================================================== */

.search-panel {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(246, 241, 232, 0.98);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
  overflow-y: auto;
}
.search-panel.open { opacity: 1; visibility: visible; }

.search-inner { padding-top: clamp(40px, 8vh, 90px); }
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  max-width: 640px;
}
.search-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
}
.search-bar input:focus { outline: none; }
.search-bar input::placeholder { color: var(--ink-2); opacity: 0.6; }

.search-results { max-width: 640px; margin-top: 18px; }
.search-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas: "img name price" "img cat price";
  column-gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.2s;
}
.search-row:hover { background: rgba(232, 221, 204, 0.4); }
.search-row img { grid-area: img; width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius); }
.search-row-name { grid-area: name; font-size: 0.92rem; font-weight: 500; }
.search-row-cat { grid-area: cat; font-size: 0.75rem; color: var(--ink-2); }
.search-row-price { grid-area: price; font-size: 0.88rem; }
.search-empty { padding: 20px 0; color: var(--ink-2); font-size: 0.9rem; }
.search-all {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}

/* ==========================================================================
   Shop page
   ========================================================================== */

.page-head { padding-top: clamp(36px, 6vw, 64px); }
.page-head h1 { margin-top: 14px; }
.page-head .lede { margin-top: 14px; }

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(28px, 4vw, 44px) 0 clamp(24px, 3.5vw, 40px);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.shop-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.shop-sort select {
  border: 1px solid var(--line);
  background: transparent;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--ink);
}

.shop-count { font-size: 0.8rem; color: var(--ink-2); margin-bottom: 18px; }

.shop-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--ink-2);
}
.shop-empty .display { font-size: 1.5rem; color: var(--ink); margin-bottom: 8px; }

/* ==========================================================================
   Product detail page
   ========================================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--ink-2);
  padding-top: 26px;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span[aria-hidden] { color: var(--accent); }

.pdp-grid {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  padding-block: clamp(24px, 4vw, 44px) clamp(48px, 7vw, 90px);
}

.pdp-gallery { display: grid; gap: 12px; }
.pdp-main {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-deep);
}
.pdp-main img {
  width: 100%;
  aspect-ratio: 4 / 4.5;
  object-fit: cover;
}
.pdp-thumbs { display: flex; gap: 12px; }
.pdp-thumb {
  width: 72px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid transparent;
  opacity: 0.75;
  transition: opacity 0.25s, border-color 0.25s;
  background: var(--bg-deep);
}
.pdp-thumb img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.pdp-thumb.is-active, .pdp-thumb:hover { opacity: 1; border-color: var(--ink); }

.pdp-info .product-cat { margin-bottom: 10px; }
.pdp-info h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 12px; }
.pdp-price { font-size: 1.2rem; font-weight: 500; margin-bottom: 6px; }
.pdp-tagline { color: var(--ink-2); margin-bottom: 26px; max-width: 32em; }

.pdp-option-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.pdp-variants { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pdp-variant {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.84rem;
  transition: all 0.25s var(--ease);
}
.pdp-variant:hover { border-color: var(--ink); }
.pdp-variant.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.pdp-buy { display: flex; gap: 12px; align-items: stretch; margin-bottom: 30px; }
.pdp-buy .qty { flex-shrink: 0; }
.pdp-buy .qty-btn { width: 42px; height: auto; }
.pdp-buy .btn { flex: 1; }

.pdp-accordions { border-top: 1px solid var(--line); }
.accordion { border-bottom: 1px solid var(--line); }
.accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 2px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
}
.accordion-head::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.3rem;
  color: var(--accent);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}
.accordion.open .accordion-head::after { transform: rotate(45deg); }
.accordion-body {
  display: none;
  padding: 0 2px 20px;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.7;
}
.accordion.open .accordion-body { display: block; }
.accordion-body ul { display: grid; gap: 4px; }

.related { padding-bottom: 0; }

/* ==========================================================================
   Cart page
   ========================================================================== */

.cart-page-grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
  padding-bottom: clamp(48px, 7vw, 80px);
}

.cart-lines { border-top: 1px solid var(--line); }
.cart-line {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line-img img {
  width: 92px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-deep);
}
.cart-line-name { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.cart-line-name:hover { color: var(--accent); }
.cart-line-var { font-size: 0.8rem; color: var(--ink-2); margin-top: 2px; }
.cart-line-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.cart-line-price { font-weight: 500; }

.cart-summary {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px;
  display: grid;
  gap: 12px;
}
.cart-summary h2 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.summary-row.total {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
}
.summary-note { font-size: 0.78rem; color: var(--ink-2); }

.cart-page-grid .drawer-empty { grid-column: 1 / -1; }

/* ==========================================================================
   Checkout
   ========================================================================== */

.checkout-grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  padding-bottom: clamp(48px, 7vw, 80px);
}

.form-grid { display: grid; gap: 16px; }
.form-row-2 { display: grid; gap: 16px; }
.form-field { display: grid; gap: 6px; }
.form-field label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.03em; }
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 13px 14px;
  width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form-legend {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 14px 0 2px;
}
.form-hint { font-size: 0.78rem; color: var(--ink-2); }

.checkout-summary {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px;
}
.checkout-summary h2 { font-size: 1.25rem; margin-bottom: 16px; }
.checkout-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.88rem;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.checkout-line span:first-child { color: var(--ink-2); }
.checkout-line .co-qty { color: var(--accent); }

.order-success {
  text-align: center;
  padding: clamp(40px, 8vw, 90px) 0;
  display: grid;
  justify-items: center;
  gap: 12px;
}
.order-success h2 { margin-bottom: 4px; }
.order-success p { color: var(--ink-2); max-width: 34em; }
.order-success .order-num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-hero-img {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-deep);
  margin-top: clamp(32px, 5vw, 56px);
}
.about-hero-img img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; }

.prose { max-width: 620px; }
.prose p { margin-bottom: 1.2em; color: var(--ink-2); }
.prose p:first-child { color: var(--ink); font-size: 1.1rem; }

.about-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: end;
}
.about-imgs figure { overflow: hidden; border-radius: var(--radius); background: var(--bg-deep); }
.about-imgs img { width: 100%; object-fit: cover; }
.about-imgs figure:first-child img { aspect-ratio: 3 / 3.8; }
.about-imgs figure:last-child img { aspect-ratio: 3 / 4.4; }

/* Ingredient glossary */
.glossary { display: grid; gap: 0; max-width: 760px; }
.glossary-item {
  display: grid;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.glossary-item h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; }
.glossary-item p { font-size: 0.88rem; color: var(--ink-2); }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  padding-bottom: clamp(48px, 7vw, 80px);
}
.contact-details { display: grid; gap: 22px; }
.contact-detail h3 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.contact-detail p { font-size: 0.95rem; color: var(--ink-2); }
.contact-detail a { border-bottom: 1px solid var(--line); }
.contact-detail a:hover { border-color: var(--ink); color: var(--ink); }

.info-section { max-width: 720px; }
.info-section h2 { margin-bottom: 18px; }
.info-section h3 {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 26px 0 8px;
}
.info-section p { color: var(--ink-2); font-size: 0.92rem; margin-bottom: 10px; }

/* FAQ accordions reuse .accordion */

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 640px) {
  .values-strip .container { grid-template-columns: repeat(4, 1fr); }
  .form-row-2 { grid-template-columns: 1fr 1fr; }
  .ingredients-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 760px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .collections-scroll {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-columns: unset;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .editorial-grid { grid-template-columns: 1fr 1fr; }
  .ritual-steps { grid-template-columns: repeat(3, 1fr); }
  .pdp-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .cart-page-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .checkout-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
}

@media (min-width: 900px) {
  .header-nav { display: flex; }
  .header-burger { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: center; }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .glossary-item { grid-template-columns: 220px 1fr; gap: 24px; }
}

@media (max-width: 899.5px) {
  .header-nav { display: none; }
}

/* Wide screens */
@media (min-width: 1400px) {
  :root { --container: 1320px; }
}

/* ==========================================================================
   Editorial enhancements
   ========================================================================== */

/* ---------- Display type scale ---------- */

.display-lg {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(2.7rem, 7vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.display-md {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.display-sm {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* ---------- Editorial hero composition ---------- */

.hero-editorial {
  position: relative;
  overflow: hidden;
}
.hero-editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(241, 234, 220, 0.6) 0%, transparent 70%);
  pointer-events: none;
}
.hero-editorial .hero-grid {
  min-height: 80vh;
  align-items: center;
}
.hero-editorial .hero-copy {
  max-width: 580px;
  position: relative;
  z-index: 1;
}
.hero-editorial .hero-img {
  border-radius: 0;
  max-height: 85vh;
  object-fit: cover;
}
.hero-editorial .hero-img img {
  aspect-ratio: 3 / 4;
  border-radius: 0;
}

/* Decorative rule above hero title */
.hero-rule {
  width: 48px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 24px;
}

/* ---------- Editorial section divider ---------- */

.section-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  margin: 0;
}

/* ---------- Editorial image treatment ---------- */

.img-arch {
  border-radius: 999px 999px var(--radius) var(--radius);
  overflow: hidden;
}
.img-soft {
  border-radius: var(--radius);
  overflow: hidden;
}
.img-float {
  position: relative;
}
.img-float::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  pointer-events: none;
}

/* ---------- Editorial lead text ---------- */

.lede-editorial {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 36em;
}

/* ---------- Editorial pillar cards ---------- */

.pillar-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-editorial);
}
.pillar-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: var(--ink);
}
.pillar-card p {
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---------- Editorial collection tiles ---------- */

.collection-tile-editorial {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  background: var(--bg-deep);
}
.collection-tile-editorial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-slow);
}
.collection-tile-editorial:hover img {
  transform: scale(1.06);
}
.collection-tile-editorial .collection-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(58, 45, 34, 0.5) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}
.collection-tile-editorial .collection-name {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: 1.5rem;
  color: var(--paper);
  text-shadow: none;
  margin-bottom: 4px;
}
.collection-tile-editorial .collection-blurb {
  font-size: 0.8rem;
  color: rgba(251, 248, 242, 0.8);
}

/* ---------- Editorial ritual steps ---------- */

.ritual-step-editorial {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
}
.ritual-step-editorial .ritual-step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
  opacity: 0.5;
}
.ritual-step-editorial h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  margin-bottom: 10px;
}
.ritual-step-editorial p {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: 16px;
}
.ritual-step-editorial .ritual-step-img {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-deep);
}
.ritual-step-editorial .ritual-step-img img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.ritual-step-editorial:hover .ritual-step-img img {
  transform: scale(1.03);
}

/* ---------- Editorial ingredient cards ---------- */

.ingredient-card {
  text-align: center;
  padding: 28px 20px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ingredient-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-editorial);
}
.ingredient-card h3 {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.ingredient-card p {
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------- Editorial CTA band ---------- */

.cta-band-editorial {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: clamp(64px, 10vw, 120px) var(--gutter);
  position: relative;
  overflow: hidden;
}
.cta-band-editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(150, 119, 90, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.cta-band-editorial h2 {
  color: var(--paper);
  position: relative;
}
.cta-band-editorial .lede {
  color: rgba(251, 248, 242, 0.7);
  position: relative;
}
.cta-band-editorial .btn-primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  position: relative;
}
.cta-band-editorial .btn-primary:hover {
  background: var(--bg-deep);
  border-color: var(--bg-deep);
}

/* ---------- Editorial footer ---------- */

.site-footer {
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(150, 119, 90, 0.3), transparent);
}
.footer-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  color: var(--bg);
  margin-bottom: 16px;
  text-indent: 0.3em;
}
.footer-blurb {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(246, 241, 232, 0.65);
  max-width: 32em;
  margin-bottom: 28px;
}
.footer-col a {
  font-size: 0.875rem;
  color: rgba(246, 241, 232, 0.65);
  transition: color 0.25s var(--ease);
}
.footer-col a:hover {
  color: var(--accent-light);
}

/* ---------- Section reveal stagger ---------- */

.reveal-stagger .reveal {
  animation: reveal-in .38s var(--ease) both;
}
.reveal-stagger .reveal.d1 { animation-delay: .05s; }
.reveal-stagger .reveal.d2 { animation-delay: .1s; }
.reveal-stagger .reveal.d3 { animation-delay: .15s; }
.reveal-stagger .reveal.d4 { animation-delay: .2s; }
.reveal-stagger .reveal.d5 { animation-delay: .25s; }

/* ---------- Editorial quote block ---------- */

.quote-block {
  border-left: 2px solid var(--accent);
  padding-left: 28px;
  margin: 32px 0;
}
.quote-block p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---------- Badge enhancement ---------- */

.badge-editorial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
}
.badge-editorial::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-light);
}

/* ---------- Smooth scroll reveal for sections ----------

   This was the third copy of the reveal treatment and it was left behind when
   the other two moved to the load-time animation: it still hid itself at
   opacity 0 and waited for a `.in` class that no longer exists, which left
   the hero and six other homepage sections invisible. It is the same entrance
   as .reveal now, and like .reveal the stylesheet alone guarantees visibility
   — there is no state in which a slow or blocked script can hide a section. */

.section-reveal {
  animation: reveal-in .5s var(--ease) both;
}

/* ---------- Editorial product grid ---------- */

.product-grid-editorial {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
@media (min-width: 760px) {
  .product-grid-editorial {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 900px) {
  .product-grid-editorial {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Editorial navigation link ---------- */

.nav-editorial {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.25s var(--ease);
  position: relative;
  padding-bottom: 4px;
}
.nav-editorial::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
.nav-editorial:hover {
  color: var(--ink);
}
.nav-editorial:hover::after {
  width: 100%;
}
.nav-editorial.is-active {
  color: var(--ink);
}
.nav-editorial.is-active::after {
  width: 100%;
  background: var(--accent);
}

/* ---------- Decorative element ---------- */

.deco-line {
  width: 60px;
  height: 1px;
  background: var(--accent);
  margin: 0 0 20px;
}
.deco-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* ---------- Editorial section header ---------- */

.section-head-editorial {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-head-editorial .eyebrow {
  display: block;
  margin-bottom: 16px;
}
.section-head-editorial h2 {
  max-width: 18em;
  margin-inline: auto;
}
.section-head-editorial .lede {
  margin-inline: auto;
  margin-top: 16px;
  max-width: 40em;
}

/* ---------- Image caption ---------- */

.img-caption {
  font-size: 0.75rem;
  color: var(--ink-2);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* ---------- Editorial overlay card ---------- */

.overlay-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.overlay-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.overlay-card:hover img {
  transform: scale(1.05);
}
.overlay-card .overlay-content {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(58, 45, 34, 0.7) 0%, transparent 50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}
.overlay-card .overlay-content h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--paper);
  margin-bottom: 6px;
}
.overlay-card .overlay-content p {
  font-size: 0.85rem;
  color: rgba(251, 248, 242, 0.8);
}

/* ---------- Editorial spacing utilities ---------- */

.space-sm { padding-block: clamp(32px, 4vw, 56px); }
.space-md { padding-block: clamp(48px, 6vw, 80px); }
.space-lg { padding-block: clamp(64px, 9vw, 120px); }

/* ---------- Editorial grid layouts ---------- */

.grid-2 {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}
.grid-2 > * {
  min-width: 0;
}
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}
.grid-3 {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}
@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.grid-4 {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}
@media (min-width: 640px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Cookie consent ----------

   Sits at the bottom and never covers the shop: every choice keeps the bag,
   sign-in and checkout working, because essential storage is not gated. */

.consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(0,0,0,.10);
  padding: 18px 0;
  /* Capped so the "Manage choices" panel can never grow taller than the
     viewport on a short screen — the failure mode before this was that the
     checkboxes and the Save button at the bottom were cut off and unreachable,
     because the banner is fixed and so the page could not be scrolled to reach
     them. */
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.consent-banner[hidden] { display: none; }
.consent-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
}
.consent-text { flex: 1 1 340px; min-width: 0; }
.consent-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 4px;
  color: var(--ink);
}
.consent-body { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-panel {
  max-width: 1240px;
  margin: 14px auto 0;
  padding: 16px 20px 0;
  border-top: 1px solid var(--line);
  /* The same height cap, applied to the panel so its longest category text can
     scroll into view instead of vanishing below the viewport. */
  max-height: calc(85vh - 90px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
@media (max-width: 600px) {
  /* Side-by-side, the two action buttons stack; let the text take the room. */
  .consent-actions { justify-content: flex-start; }
  .consent-panel { max-height: calc(85vh - 70px); }
}
.consent-panel-note { margin: 0 0 12px; font-size: .82rem; color: var(--ink-2); }
.consent-cats { display: grid; gap: 10px; margin-bottom: 16px; }
.consent-cat {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; min-height: 44px;
}
.consent-cat input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.consent-cat strong { display: block; font-size: .88rem; }
.consent-cat em { font-style: normal; font-size: .8rem; color: var(--ink-2); line-height: 1.5; }
.consent-cat input:disabled + span strong { color: var(--ink-2); }

.footer-meta-links { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.footer-link-btn {
  appearance: none; background: none; border: 0; padding: 4px 0;
  font: inherit; color: inherit; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; min-height: 32px;
}
.footer-link-btn:hover { opacity: .8; }

@media (prefers-reduced-motion: no-preference) {
  .consent-banner:not([hidden]) { animation: consent-rise .28s ease-out both; }
  @keyframes consent-rise {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
}

/* ---------------------------------------------------------- in-app campaigns
   Sits inside <main>, above the page content, so it is read as part of the
   page. It must never cover what the visitor came for, hence no fixed
   positioning and no overlay.

   Visually it follows the same language as the rest of the store: the warm
   off-white card surface (var(--paper)), the soft divider (var(--line)), the
   store's 2px radius and the same ease curve the product cards use, so a
   campaign reads as part of the page instead of a widget pasted on top. */

.inapp-campaigns { margin: 0 0 28px; }
.inapp-campaigns[hidden] { display: none; }

.inapp-campaign {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 0;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(58, 45, 34, .04);
}
.inapp-campaign-img {
  width: 100%;
  height: 100%;
  min-height: 120px;
  max-height: 320px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
}
.inapp-campaign-body { padding: 22px 26px; min-width: 0; }
.inapp-campaign-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.inapp-campaign-text { margin: 0 0 16px; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.inapp-campaign-cta { display: inline-block; }

/* Dismissal is a small, quiet target in the corner — present, labelled for
   screen readers, and out of the way of the call to action. */
.inapp-campaign-dismiss {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 248, 242, .85);
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.inapp-campaign-dismiss:hover { background: rgba(58, 45, 34, .08); color: var(--ink); }
.inapp-campaign-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.inapp-campaign-pos {
  position: absolute;
  left: 12px; bottom: 12px;
  margin: 0;
  font-size: .72rem;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .inapp-campaign { grid-template-columns: 1fr; }
  .inapp-campaign-img { max-height: 220px; }
  .inapp-campaign-body { padding: 18px 16px 20px; }
  /* The dismiss target keeps a comfortable tap size on a phone. */
  .inapp-campaign-dismiss { width: 42px; height: 42px; top: 8px; right: 8px; }
}

/* ---------------------------------------------------------------- PWA bar
   The install prompt and the "new version ready" notice. Deliberately not a
   modal: it must never cover the product the visitor came for, and it is
   dismissible for good, so it cannot become a nag. */
.pwa-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--panel, #fff);
  color: var(--ink, #2a2118);
  border: 1px solid var(--line, #e2dbd0);
  border-radius: var(--radius, 10px);
  box-shadow: 0 12px 32px rgba(58, 45, 34, .16);
  max-width: 560px;
  margin: 0 auto;
}
.pwa-bar[hidden] { display: none; }

.pwa-copy { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.pwa-copy strong { font-size: .92rem; }
.pwa-copy span { font-size: .82rem; color: var(--ink-2, #6b5d4f); }

.pwa-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }

.pwa-btn {
  font: inherit;
  font-size: .85rem;
  padding: 9px 15px;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--ink, #2a2118);
  background: var(--ink, #2a2118);
  color: var(--panel, #fff);
  cursor: pointer;
  min-height: 40px;
}
.pwa-btn:hover { opacity: .9; }
.pwa-btn:disabled { opacity: .5; cursor: default; }
.pwa-btn-quiet {
  background: transparent;
  color: var(--ink, #2a2118);
  border-color: var(--line, #e2dbd0);
}
.pwa-btn:focus-visible { outline: 2px solid var(--brand-primary, #3A2D22); outline-offset: 2px; }

/* On a phone the two buttons go full width under the copy, because a 40px
   target sitting next to a 220px minimum copy column overflows a 360px screen. */
@media (max-width: 480px) {
  .pwa-bar { left: 10px; right: 10px; bottom: 10px; padding: 12px 13px; }
  .pwa-actions { width: 100%; }
  .pwa-actions .pwa-btn { flex: 1 1 0; }
}