/* ==========================================================================
   wipe out worries — premium home care
   Design system + page styles
   ========================================================================== */

:root {
  /* palette — derived from the packaging: forest-green bottles, cream labels,
     travertine sets, amber / caramel / champagne fragrance tints */
  --forest-950: #0e1f19;
  --forest-900: #132b22;
  --forest-800: #1b3a2f;
  --forest-700: #234a3b;
  --forest-600: #2d5a48;
  --forest-500: #3d6e58;
  --sage-400: #7fa894;
  --sage-300: #a3c3b1;
  --sage-200: #c9dacf;
  --cream: #f5f1e6;
  --cream-050: #fbf9f3;
  --sand: #d9cfbf;
  --stone: #b9ae9c;
  --taupe: #8c7a6b;
  --amber: #7a3e2a;
  --caramel: #8b5a2b;
  --champagne: #b8a98c;
  --ink: #14201a;
  --ink-soft: #55635b;
  --white: #ffffff;

  /* every large dark surface (footer, menu, banners, checkout band, header):
     a soft white light in the top-left corner fading into our green, so big
     areas don't read as one flat slab of green */
  --grad-forest:
    radial-gradient(130% 95% at 0% 0%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .09) 38%, rgba(255, 255, 255, 0) 68%),
    linear-gradient(160deg, #2d5a48 0%, #1b3a2f 52%, #163226 100%);
  --grad-hero: var(--grad-forest);
  --grad-band: var(--grad-forest);
  --grad-footer: linear-gradient(180deg, #10241c 0%, #0c1c15 100%);

  --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;

  --container: 1400px;
  --container-narrow: 1180px;
  --gutter: clamp(20px, 5vw, 96px);
  --radius-xl: 32px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --header-h: 88px;

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --shadow-product: drop-shadow(0 36px 44px rgba(5, 15, 10, .42));
  --shadow-card: 0 30px 70px rgba(10, 25, 18, .16);

  /* per-fragrance pastel tints — same family as the swatch colour, lightened
     to near-cream, used as tile/panel backgrounds so cards & buy panels read
     as "poster" moments without adding more forest green to the page */
  --tint-orange-cedar: #dfe9e1;
  --tint-amber-oud: #ecdcd1;
  --tint-richesse: #f4ecdc;
  --tint-tobacco-vanilla: #eedec3;
  --tint-neutral: var(--cream-050);

  /* product-photography "studio" backdrop — warm stone-grey, distinct from
     the page's white/cream so product tiles read as photographed objects
     rather than UI chrome (reference: all-natural.framer.website product grid) */
  --tint-studio: #f0ebe0;
  --tint-tile: #eceae5;
  --paper: #fdfdfc;         /* shop pages' white: the exploded-spray video's own backdrop */     /* product card backdrop, = BG in tools/card_images.py */
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; } /* smooth scrolling is done via JS (window.scrollTo({behavior:'smooth'})); CSS scroll-behavior:smooth is left off because it's a documented cause of GSAP ScrollTrigger pin miscalculation */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cream);
  background: var(--forest-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* not hidden: hidden forces overflow-y to a scroll context too, which breaks position:sticky (used by the footer reveal) */
}
body.is-locked { overflow: hidden; }
html:has(body.is-locked) { overflow: hidden; overscroll-behavior: none; }
img, video, svg { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 300; letter-spacing: -.012em; }
::selection { background: var(--sage-300); color: var(--forest-900); }
:focus-visible { outline: 2px solid var(--sage-300); outline-offset: 3px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* typographic helpers */
.eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage-300);
}
.title-xl { font-size: clamp(44px, 5.4vw, 82px); line-height: 1.02; }
.title-lg { font-size: clamp(34px, 3.7vw, 56px); line-height: 1.06; }
.title-md { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; }
.title-lg em, .title-xl em, .title-md em { font-style: normal; font-weight: inherit; }
.lead { font-size: clamp(16px, 1.2vw, 18px); font-weight: 300; line-height: 1.6; }
.text-muted { color: rgba(245, 241, 230, .74); }
.on-light { color: var(--ink); }
.on-light .text-muted { color: var(--ink-soft); }
.on-light .eyebrow { color: var(--forest-500); }
.banner .eyebrow { color: var(--sage-300); } /* the banner is always dark, even inside .on-light sections */
.on-light .title-xl, .on-light .title-lg, .on-light .title-md { color: var(--forest-800); }
.on-light .title-xl em, .on-light .title-lg em, .on-light .title-md em { color: inherit; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .35s var(--ease-out); }
@media (hover: hover) { .btn:hover svg { transform: translateX(4px); } }
.btn--solid { background: var(--cream); color: var(--forest-900); border-color: var(--cream); }
@media (hover: hover) { .btn--solid:hover { background: var(--sage-300); border-color: var(--sage-300); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); } }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(245, 241, 230, .55); }
@media (hover: hover) { .btn--ghost:hover { background: var(--cream); color: var(--forest-900); border-color: var(--cream); transform: translateY(-2px); } }
.on-light .btn--ghost { color: var(--forest-800); border-color: rgba(20, 32, 26, .3); }
@media (hover: hover) { .on-light .btn--ghost:hover { background: var(--forest-800); color: var(--cream); border-color: var(--forest-800); } }
.btn--forest { background: var(--forest-800); color: var(--cream); border-color: var(--forest-800); }
@media (hover: hover) { .btn--forest:hover { background: var(--forest-600); border-color: var(--forest-600); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(27, 58, 47, .25); } }
.btn--outline-forest { background: transparent; color: var(--forest-800); border-color: rgba(27, 58, 47, .45); }
@media (hover: hover) { .btn--outline-forest:hover { background: var(--forest-800); color: var(--cream); border-color: var(--forest-800); transform: translateY(-2px); } }
.btn--sm { height: 42px; padding: 0 22px; font-size: 14px; }

.ibtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(245, 241, 230, .45);
  color: var(--cream);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s, transform .3s var(--ease-out), opacity .3s;
}
.ibtn svg { width: 16px; height: 16px; }
@media (hover: hover) { .ibtn:hover { background: var(--cream); color: var(--forest-900); border-color: var(--cream); } }
.ibtn:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .ibtn:disabled:hover { background: transparent; color: var(--cream); border-color: rgba(245, 241, 230, .45); } }
.on-light .ibtn { border-color: rgba(27, 58, 47, .35); color: var(--forest-800); }
@media (hover: hover) { .on-light .ibtn:hover { background: var(--forest-800); color: var(--cream); border-color: var(--forest-800); } }
@media (hover: hover) { .on-light .ibtn:disabled:hover { background: transparent; color: var(--forest-800); border-color: rgba(27, 58, 47, .35); } }


/* --------------------------------------------------------------------------
   Page transition overlay (also the page loader)
   The overlay ships with .is-active in the markup so the page loads covered;
   JS reveals the logo, holds briefly and fades it away. Clicking a link to
   another page plays the same thing in reverse before navigating.
   -------------------------------------------------------------------------- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--grad-hero);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .65s var(--ease-soft), visibility 0s linear .65s;
}
.page-transition.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .45s var(--ease-soft), visibility 0s; }
.page-transition__logo { width: clamp(96px, 10vw, 140px); opacity: 0; transform: scale(.94); transition: opacity .4s var(--ease-soft), transform .7s var(--ease-expo); }
.page-transition.show-logo .page-transition__logo { opacity: 1; transform: none; }
html:not(.js) .page-transition { display: none; }
/* safety net: if scripts are blocked or frozen, the loader still clears after 5 s */
.page-transition.is-active { animation: ptFallback .6s var(--ease-soft) 5s forwards; }
@keyframes ptFallback { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--header-h);
  transition: box-shadow .45s, opacity .6s var(--ease-soft), transform .4s var(--ease-soft);
}
.header.is-hidden { transform: translateY(-100%); }
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(19, 43, 34, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background-color .45s var(--ease-soft), backdrop-filter .45s, -webkit-backdrop-filter .45s;
  pointer-events: none;
}
.header.is-scrolled::before { background-color: rgba(19, 43, 34, .74); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.header.is-scrolled::before, .header--solid::before { background-image: linear-gradient(100deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 55%); }
.header.is-scrolled { box-shadow: 0 1px 0 rgba(245, 241, 230, .08); }
/* product pages open on a light (pastel) hero, not a dark video — the header needs
   its dark pill visible from the very first frame, not only after .is-scrolled */
.header--solid::before { background-color: rgba(19, 43, 34, .74); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.header--solid { box-shadow: 0 1px 0 rgba(245, 241, 230, .08); }
/* full-screen menu open: the header sits (z-index 200) above the menu
   (z-index 150), and its translucent blur backdrop let the menu's own
   scrolled text show/ghost through underneath it — go fully opaque, flush
   with the menu's own background, so scrolled links disappear cleanly
   behind the header instead of bleeding through it. */
/* menu open: the header turns into the menu's own light top, with the logo
   and buttons in our green */
body.is-menu-open .header::before { background: var(--cream-050); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.is-menu-open .header { box-shadow: 0 1px 0 rgba(27, 58, 47, .1); }
body.is-menu-open .header__logo-mark { color: var(--forest-800) !important; } /* the logo sets its colour inline */
body.is-menu-open .header .ibtn, body.is-menu-open .menu-btn { border-color: rgba(27, 58, 47, .3); color: var(--forest-800); }
@media (hover: hover) { body.is-menu-open .header .ibtn:hover { background: var(--forest-800); color: var(--cream); border-color: var(--forest-800); } }
body.is-menu-open .menu-btn.is-open { background: var(--forest-800); color: var(--cream); border-color: var(--forest-800); }
/* backdrop-filter forces the GPU to keep re-sampling everything scrolling
   behind this fixed header on every frame — on mid/low-end phones that's a
   frequent cause of scroll feeling laggy/sticky (see also the other
   backdrop-filter uses below, all toned down here for the same reason).
   The header is opaque enough without the blur that the difference is
   barely visible, so we just drop it below the breakpoint where it hurts. */
@media (max-width: 768px) {
  .header.is-scrolled::before, .header--solid::before { background-color: rgba(19, 43, 34, .92); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .inno-expand__badge { background: rgba(14, 31, 25, .78); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ncard__date { background: rgba(14, 31, 25, .78); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fcard__caption { background: rgba(251, 249, 243, .98); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.header__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 14px;
}
/* grid (not left:50%) on purpose: header__left (menu) and header__right
   (cart + lang) each have a real min-width, and the 1fr/auto/1fr split always
   reserves both before centring the logo in what's left — true centring could
   let the logo overlap one side if their widths ever drift apart (e.g. once
   the wordmark gets wide on mobile). Since both sides are close in width by
   design, the logo lands at, or very near, true-centre in practice. */
.header__logo { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; }
.header__logo img { height: 58px; width: auto; transition: height .45s var(--ease-soft); }
.header.is-scrolled .header__logo img { height: 40px; }
.header__logo-mark {
  display: block;
  --logo-w0: 228px;
  --logo-w1: 176px;
  width: calc(var(--logo-w0) - var(--logo-t, 0) * (var(--logo-w0) - var(--logo-w1)));
  color: var(--cream);
}
.header__right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; }
.header__right .header-nav { margin-right: 22px; }
.header__left { grid-column: 1; justify-self: start; display: flex; align-items: center; }
.lang { position: relative; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(245, 241, 230, .45);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--cream);
  transition: background-color .3s, color .3s, border-color .3s;
}
.lang__btn svg { width: 10px; height: 10px; }
.lang:hover .lang__btn, .lang:focus-within .lang__btn { background: var(--cream); color: var(--forest-900); border-color: var(--cream); }
.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 120px;
  padding: 8px 0;
  background: var(--cream-050);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(6, 18, 12, .3);
  opacity: 0; visibility: hidden;
  transition: opacity 0s linear .15s, visibility 0s linear .15s;
}
.lang::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.lang:hover .lang__menu, .lang:focus-within .lang__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lang__menu a { display: block; padding: 8px 18px; font-size: 13px; letter-spacing: .08em; color: var(--ink); }
.lang__menu a.is-active { color: var(--forest-600); }
.lang__menu a:hover { background: rgba(27, 58, 47, .06); }

/* Desktop inline nav (≥1024px) — replaces the hamburger + full-screen menu on
   wide screens, which otherwise felt like overkill for 5 links + a product
   list; the full-screen menu is kept as-is for mobile/tablet (see .menu-btn
   below, hidden here). "Produse" is a hover/focus dropdown mirroring the
   full-screen menu's 4 category groups, same pattern as .lang__menu. */
.header-nav { display: none; }
.header-nav__link { font-size: 14px; letter-spacing: .02em; color: var(--cream); opacity: .82; transition: opacity .3s var(--ease-out); white-space: nowrap; }
.header-nav__link:hover { opacity: 1; }
.header-nav__item { position: relative; }
.header-nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; letter-spacing: .02em; color: var(--cream); opacity: .82;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: opacity .3s var(--ease-out);
}
.header-nav__trigger svg { width: 10px; height: 10px; }
.header-nav__item:hover .header-nav__trigger, .header-nav__item:focus-within .header-nav__trigger { opacity: 1; }
.header-nav__item:hover .header-nav__trigger svg, .header-nav__item:focus-within .header-nav__trigger svg { transform: rotate(180deg); }
.header-nav__panel {
  position: absolute; left: 0; top: calc(100% + 20px);
  width: min(680px, 86vw);
  padding: 30px clamp(24px, 3vw, 34px);
  background: var(--cream-050);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(10, 25, 18, .3);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .4s var(--ease-expo), visibility 0s linear .3s;
}
.header-nav__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.header-nav__item:hover .header-nav__panel, .header-nav__item:focus-within .header-nav__panel { opacity: 1; visibility: visible; transition-delay: 0s; }
.header-nav__col-label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--forest-500); margin-bottom: 12px; }
.header-nav__col a { display: block; padding: 6px 0; font-size: 14px; line-height: 1.3; color: var(--ink); }
.header-nav__all { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 4px; padding-top: 18px; border-top: 1px solid rgba(20, 32, 26, .1); width: 100%; font-size: 14px; font-weight: 500; color: var(--forest-800); }
.header-nav__all svg { width: 14px; height: 14px; }
.header-nav__col a:hover { color: var(--forest-600); }
@media (min-width: 1024px) {
  .header-nav { display: flex; align-items: center; gap: 26px; }
  .header__left .menu-btn { display: none; }
}

/* Menu trigger: pill button, icon morphs to X and label swaps on open ------ */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(245, 241, 230, .45);
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.menu-btn.is-open { background: var(--cream); color: var(--forest-900); border-color: var(--cream); }
@media (hover: hover) { .menu-btn:hover { background: var(--cream); color: var(--forest-900); border-color: var(--cream); } }
.menu-btn__lines { position: relative; width: 18px; height: 12px; flex: 0 0 auto; }
.menu-btn__lines i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-expo), opacity .3s; }
.menu-btn__lines i:nth-child(1) { top: 0; }
.menu-btn__lines i:nth-child(2) { top: 5.5px; }
.menu-btn__lines i:nth-child(3) { top: 11px; }
.menu-btn.is-open .menu-btn__lines i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-btn.is-open .menu-btn__lines i:nth-child(2) { opacity: 0; }
.menu-btn.is-open .menu-btn__lines i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Site menu: full-screen, links left / image right, replaces the inline nav */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  background: var(--cream-050);
  visibility: hidden;
  /* the panel itself pops in instantly (solid, no cross-fade ghosting the
     page behind it) — the links alone do the slower, staggered reveal on
     top of it, once it's already opaque */
  transition: visibility 0s linear .01s;
}
.site-menu.is-open { visibility: visible; transition-delay: 0s; }
.site-menu__panel {
  position: relative;
  z-index: 2;
  padding: calc(var(--header-h) + 40px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}
.site-menu__links { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.site-menu__group { display: flex; flex-direction: column; }
.site-menu__label { display: block; margin-bottom: 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--forest-500); }
.site-menu__link { display: block; padding: 6px 0; font-size: clamp(26px, 3.4vw, 42px); font-weight: 300; line-height: 1.3; color: var(--forest-800); }
@media (hover: hover) { .site-menu__link:hover { color: var(--forest-500); } }
/* current-page state stays flush with the rest of the list — the hover
   indent, applied permanently, is what made "Acasă" read as misaligned
   against every other item in the menu. */
.site-menu__link.is-active { color: var(--forest-500); }
/* "Produse" is a tap-to-expand accordion, not a link — 12 product links laid
   flat (the old markup) made the menu feel overloaded on a phone screen; now
   only the category is visible until tapped. */
.site-menu__products-toggle { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; margin: 0; cursor: pointer; text-align: left; }
.site-menu__products-toggle svg { width: .5em; height: .5em; flex: 0 0 auto; opacity: .6; }
.site-menu__products-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-menu__products-panel { display: none; }
.site-menu__group--products.is-open .site-menu__products-panel { display: block; }
.site-menu__subgroup .site-menu__label { margin-top: 16px; }
.site-menu__subgroup:first-child .site-menu__label { margin-top: 14px; }
.site-menu__subgroup .site-menu__link { font-size: clamp(18px, 2.2vw, 24px); padding: 5px 0; }
/* phone menu: Produse opens onto the four categories (each its own page),
   not the full product list */
.site-menu__products-panel { padding-top: 10px; }
.site-menu__cat { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(27, 58, 47, .12); font-size: clamp(20px, 5.4vw, 26px); }
.site-menu__cat span { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-500); }
.site-menu__all { margin-top: 14px; font-size: clamp(16px, 4.4vw, 20px); }
.site-menu__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; font-size: 13px; color: var(--ink-soft); padding-top: 32px; }
.site-menu__media { position: relative; z-index: 2; overflow: hidden; background: var(--forest-950); }
.site-menu__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Gradient bands (hero + product line share one continuous gradient,
   like the reference; news + contact share another)
   -------------------------------------------------------------------------- */
.band { position: relative; background: var(--grad-hero); color: var(--cream); }
.band--b { background: var(--grad-band); }
.band--light { background: var(--cream-050); color: var(--ink); }
.band--cream { background: var(--cream); color: var(--ink); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 32px) 0 48px;
  overflow: hidden;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  width: 100%;
}
.hero__copy { position: relative; z-index: 2; }
.hero__title { color: var(--cream); max-width: 13ch; }
.hero__title em { color: inherit; }
.hero__lead { margin-top: 26px; max-width: 44ch; color: rgba(245, 241, 230, .82); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* Product pages: gallery (media + supporting tiles) | sticky buy panel —
   the .phero__* text keeps living inside .hero__copy/[data-hero=copy] so the
   existing stagger-in + parallax JS (startHero, keyed off data-hero attrs and
   the .hero__media class) doesn't need to change, only where these sit. */
.phero .hero__inner { grid-template-columns: 1.18fr .82fr; align-items: start; gap: clamp(28px, 3.4vw, 56px); }
.pgallery { display: flex; flex-direction: column; gap: 14px; }
.pgallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pgallery__tile { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.pgallery__tile img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 1.4s var(--ease-out); }
@media (hover: hover) { .pgallery__tile:hover img { transform: scale(1.07); } }
.buy-panel {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: clamp(30px, 3vw, 42px) clamp(26px, 2.6vw, 38px);
  box-shadow: var(--shadow-card);
}

.hero__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(70vh, 720px);
}
.phero .hero__media { min-height: min(52vh, 480px); }
.hero__glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .22) 42%, rgba(255, 255, 255, 0) 70%);
  filter: blur(10px);
  pointer-events: none;
}
.hero__ill {
  position: absolute;
  right: -14%;
  top: 6%;
  width: 118%;
  opacity: .11;
  pointer-events: none;
  will-change: transform;
}
.hero__product-wrap { position: relative; z-index: 2; will-change: transform; }
.hero__product {
  height: min(72vh, 700px);
  width: auto;
  filter: var(--shadow-product);
}
.hero__product--wide { height: min(60vh, 560px); }
.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245, 241, 230, .55);
}
.hero__scroll i { display: block; width: 1px; height: 46px; background: rgba(245, 241, 230, .35); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--cream); animation: scrollLine 2.2s var(--ease-soft) infinite; }
.phero .hero__scroll { color: rgba(20, 32, 26, .66); }
.phero .hero__scroll i { background: rgba(20, 32, 26, .22); }
.phero .hero__scroll i::after { background: var(--forest-800); }
@keyframes scrollLine { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* Video hero (homepage): full-bleed looping product film behind the copy,
   with a scrim gradient (dark left, where the text sits, fading out right,
   where the film reads clearly) instead of the static product/illustration. */
.hero__bg { position: absolute; inset: 0; z-index: 0; background: var(--forest-900); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(14, 31, 25, .96) 0%,
    rgba(14, 31, 25, .9) 22%,
    rgba(14, 31, 25, .62) 45%,
    rgba(14, 31, 25, .26) 66%,
    rgba(14, 31, 25, .08) 100%);
}
@media (max-width: 1023px) {
  /* the video hero has no copy over it, so the scrim only needs to keep the
     header legible at the top — the old .55→.96 ramp buried the video */
  .hero--video .hero__scrim { background: linear-gradient(180deg, rgba(14, 31, 25, .5) 0%, rgba(14, 31, 25, .06) 30%, rgba(14, 31, 25, .06) 72%, rgba(14, 31, 25, .3) 100%); }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { position: relative; padding: clamp(80px, 9vw, 136px) 0; }
.section--tight { padding: clamp(56px, 6vw, 96px) 0; }
.section__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head--left { align-items: flex-start; text-align: left; }
.section__head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; }
.section__head p { max-width: 54ch; }
.section__tools { display: flex; align-items: center; gap: 10px; }

/* Product line cards --------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pcard--compact { min-height: 500px; padding: 40px 28px 0; }
.pcard--compact .pcard__media { height: 260px; }
.pcard--compact .pcard__title { font-size: clamp(24px, 1.9vw, 28px); }
/* Product card: editorial/photography-led treatment (reference: all-natural.
   framer.website product grid) — the "card" is the photo tile itself, no
   boxed shell around it; name+price share a row, category sits underneath. */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: 0;
  background: none;
  border: 0;
  padding: 0;
  overflow: visible;
  transition: transform .6s var(--ease-expo);
}
.pcard__body {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title price" "cat cat" "swatches swatches" "actions actions";
  column-gap: 14px;
  row-gap: 8px;
  padding: 18px 2px 0;
}
.pcard__cat { grid-area: cat; margin: 0; color: var(--forest-500); }
.pcard__title { grid-area: title; margin: 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; color: var(--forest-800); }
.pcard__title em { font-style: normal; font-weight: inherit; color: inherit; }
.pcard__price { grid-area: price; align-self: start; margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--forest-800); white-space: nowrap; }
.pcard__swatches { grid-area: swatches; display: flex; gap: 9px; align-items: center; justify-content: flex-start; margin: 4px 0 0; }
.pcard__swatches button { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(20, 32, 26, .16); padding: 0; transition: transform .3s var(--ease-out), border-color .3s; }
.pcard__swatches button.is-active { border-color: var(--forest-700); transform: scale(1.15); }
.pcard__actions { grid-area: actions; display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; margin-top: 14px; }
.pcard__badge {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  background: var(--white);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--forest-700);
  box-shadow: 0 8px 20px rgba(20, 32, 26, .14);
}
.pcard__badge--sale { color: #b23b2f; }
.pcard__media {
  position: relative;
  height: 320px;
  padding-top: 28px;
  border-radius: var(--radius-lg);
  background: var(--tint-studio);
  border: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  transition: transform .5s var(--ease-out);
}
@media (hover: hover) { .pcard:hover .pcard__media { transform: translateY(-3px); } }
.pcard__media--jug { height: 300px; }
.pcard__media--jug .pcard__product { height: 97%; }
.pcard__product {
  position: relative;
  z-index: 3;
  height: 97%;
  width: auto;
  filter: drop-shadow(0 22px 28px rgba(20, 32, 26, .18));
  transform-origin: 50% 100%;
  transition: transform .7s var(--ease-expo);
}
@media (hover: hover) { .pcard:hover .pcard__product { transform: translateY(-6px) scale(1.02); } }
.pcard__ill {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -2%;
  width: 92%;
  max-width: 460px;
  transform: translateX(-50%);
  opacity: .3;
  pointer-events: none;
  transition: opacity .6s var(--ease-out), transform .9s var(--ease-expo);
}
@media (hover: hover) { .pcard:hover .pcard__ill { opacity: .44; transform: translateX(-50%) scale(1.05) rotate(-2deg); } }
.pcard__ripple { position: absolute; z-index: 2; left: 50%; bottom: 25%; width: 320px; height: 320px; transform: translate(-50%, 50%); pointer-events: none; }
.pcard__ripple i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(20, 32, 26, .16); opacity: 0; transform: scale(.3); }
@media (hover: hover) { .pcard:hover .pcard__ripple i { animation: ripple 2.8s linear infinite; } }
@media (hover: hover) { .pcard:hover .pcard__ripple i:nth-child(2) { animation-delay: .9s; } }
@media (hover: hover) { .pcard:hover .pcard__ripple i:nth-child(3) { animation-delay: 1.8s; } }
@keyframes ripple {
  0% { opacity: 0; transform: scale(.3); }
  15% { opacity: .55; }
  100% { opacity: 0; transform: scale(2.1); }
}

/* Care / about ----------------------------------------------------------- */
.care { overflow: hidden; }
.care--stack { position: relative; z-index: 2; background: transparent; padding: 0; }
.care__visible {
  padding: clamp(80px, 9vw, 136px) 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -40px 70px rgba(15, 30, 22, .16);
  background: var(--cream-050);
}
.care__inner { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.care__title { color: var(--forest-800); max-width: 16ch; }
.care__title em { color: inherit; }
.care__text { margin-top: 26px; display: grid; gap: 14px; max-width: 48ch; font-size: 15.5px; color: var(--ink-soft); }
.care__actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.family {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: calc(100% + var(--gutter));
  padding-bottom: 5%;
}
.family::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: 3%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(27, 58, 47, .22) 0%, rgba(27, 58, 47, 0) 70%);
  z-index: 0;
}
.family img {
  position: relative;
  z-index: 1;
  width: var(--w, 12%);
  height: auto;
  margin-left: var(--ml, -1.5%);
  filter: drop-shadow(0 26px 30px rgba(20, 32, 26, .28));
  will-change: transform;
}
.family img:first-child { margin-left: 0; }
.family__ill { position: absolute; left: -6%; top: -18%; width: 60%; opacity: .5; pointer-events: none; z-index: 0; }

/* Innovation card -------------------------------------------------------- */
/* Innovation video: starts as a small rounded box, grows edge-to-edge as you
   scroll (GSAP pin + scrub — see initMediaExpand() in main.js), then locks
   fullbleed once fully grown so it always finishes on a clean, full view. */
.inno-expand { position: relative; }
.inno-expand__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inno-expand__media {
  position: relative;
  width: 56%;
  height: 58%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--forest-900);
  box-shadow: var(--shadow-card);
}
.inno-expand__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inno-expand__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 31, 25, .18) 0%, rgba(14, 31, 25, 0) 35%, rgba(14, 31, 25, 0) 55%, rgba(14, 31, 25, .5) 100%); pointer-events: none; }
.inno-expand__title {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}
.inno-expand__title .eyebrow { color: var(--sage-300); text-shadow: 0 2px 14px rgba(5, 15, 10, .5); }
.inno-expand__title h2 { margin-top: 14px; max-width: 18ch; text-shadow: 0 6px 30px rgba(5, 15, 10, .55); }
.on-light .inno-expand__title .title-lg { color: var(--cream); }
.on-light .inno-expand__title .title-lg em { color: inherit; }
.inno-expand__badge {
  position: absolute; left: 28px; bottom: 28px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(14, 31, 25, .55); color: var(--cream);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
}
.inno-expand__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-300); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .5; } }

/* Marquee ---------------------------------------------------------------- */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 18px; width: max-content; animation: marquee var(--marquee-dur, 42s) linear infinite; will-change: transform; }
@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tile {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* min-width (not a fixed width) + real padding — a fixed width with no
     padding let long labels like "Cadouri corporate" run edge to edge
     (~1px of clearance each side), which is mathematically centered but
     reads as misaligned with no breathing room; now the tile grows to fit
     longer text instead of cramming it in. */
  min-width: 224px;
  height: 112px;
  padding: 0 24px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid rgba(27, 58, 47, .08);
  box-shadow: 0 10px 30px rgba(27, 58, 47, .07);
  color: var(--forest-800);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
@media (hover: hover) { .tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27, 58, 47, .14); } }
.tile strong { font-weight: 400; font-size: 21px; letter-spacing: -.005em; line-height: 1.1; }
.tile span { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--forest-500); }
.tile--dark { background: var(--forest-800); color: var(--cream); border-color: transparent; }
.tile--dark span { color: var(--sage-300); }
.tile--sand { background: var(--sand); color: var(--forest-900); }
.tile--sand span { color: var(--forest-600); }

/* Banner ----------------------------------------------------------------- */
.banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: clamp(36px, 4vw, 60px) clamp(28px, 4.5vw, 72px);
  border-radius: var(--radius-xl);
  background: var(--grad-forest);
  color: var(--cream);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.banner::before { content: ''; position: absolute; right: -10%; top: -40%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(163, 195, 177, .28), rgba(163, 195, 177, 0) 70%); pointer-events: none; }
/* dark card nested inside an .on-light section — re-flip ghost back to the
   dark-surface pairing, since .on-light alone would otherwise hand it the
   light-surface (forest-800-on-cream) styling meant for the page around it,
   not this card. */
.banner .btn--ghost { color: var(--cream); border-color: rgba(245, 241, 230, .55); }
@media (hover: hover) { .banner .btn--ghost:hover { background: var(--cream); color: var(--forest-900); border-color: var(--cream); } }
.banner__body { position: relative; z-index: 1; }
.banner__title { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; }
.banner__title em { font-style: normal; font-weight: inherit; color: inherit; }
.banner__text { margin-top: 12px; max-width: 54ch; font-size: 15px; color: rgba(245, 241, 230, .78); }
.banner__actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.banner__media { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; width: clamp(180px, 22vw, 300px); align-self: stretch; min-height: 220px; }
.banner__media img { position: absolute; bottom: -18%; height: 130%; max-width: none; width: auto; filter: drop-shadow(0 30px 34px rgba(5, 15, 10, .4)); transition: transform .8s var(--ease-expo); }
@media (hover: hover) { .banner:hover .banner__media img { transform: translateY(-8px) rotate(-2deg); } }
.banner__ill { position: absolute; right: -4%; bottom: -30%; width: 44%; opacity: .12; pointer-events: none; }

/* Slider (news / features) ------------------------------------------------ */
.slider { position: relative; }
.slider__track:focus-visible { outline: 2px solid var(--forest-500); outline-offset: 6px; }
.slider__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.slider__track > * { scroll-snap-align: start; flex: 0 0 auto; }
.ncard {
  width: clamp(280px, calc((100% - 48px) / 3), 440px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 16px 22px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid rgba(20, 32, 26, .08);
  transition: transform .6s var(--ease-expo), box-shadow .6s var(--ease-out), border-color .5s;
}
@media (hover: hover) { .ncard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: rgba(20, 32, 26, .12); } }
.ncard__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--tint-neutral); }
.ncard__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.1s var(--ease-expo); }
@media (hover: hover) { .ncard:hover .ncard__media img { transform: scale(1.08); } }
.ncard__date { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(14, 31, 25, .55); color: var(--cream); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.ncard__body { padding: 0 8px; display: flex; flex-direction: column; flex: 1; }
.ncard__title { font-size: 22px; line-height: 1.2; font-weight: 400; color: var(--forest-800); }
.ncard__text { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.ncard__foot { margin-top: auto; padding-top: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ncard .ibtn { width: 42px; height: 42px; }

/* Contact ---------------------------------------------------------------- */
.ccards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ccard {
  padding: 26px 24px 28px;
  min-height: 190px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid rgba(20, 32, 26, .08);
  transition: transform .6s var(--ease-expo), box-shadow .6s var(--ease-out), border-color .5s;
}
@media (hover: hover) { .ccard:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: rgba(20, 32, 26, .12); } }
.ccard__label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 12px; color: var(--forest-800); }
.ccard p, .ccard a { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.ccard a { display: block; transition: color .3s; }
@media (hover: hover) { .ccard a:hover { color: var(--forest-800); } }
.ccard__tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(20, 32, 26, .16); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.social { display: flex; gap: 10px; margin-top: 4px; }
.social a { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(245, 241, 230, .3); align-items: center; justify-content: center; transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out); }
.social a svg { width: 15px; height: 15px; }
@media (hover: hover) { .social a:hover { background: var(--cream); color: var(--forest-900); border-color: var(--cream); transform: translateY(-3px); } }

/* Page shell / footer reveal ---------------------------------------------
   the page ends in a rounded, shadowed "card" that visually lifts off as
   it scrolls past, revealing the footer sitting underneath it. Footer stays
   in completely normal flow (no sticky/fixed) so it's always fully reachable,
   on any viewport, regardless of how tall its content gets. */
main.page-shell {
  position: relative;
  z-index: 1;
  background: var(--forest-900);
  border-radius: 0 0 40px 40px;
  box-shadow: 0 40px 70px rgba(4, 12, 9, .4);
}
/* overflow:hidden only while the shrink-into-a-card effect above is actually
   active (toggled in initFooterReveal) — NOT a permanent, static rule: any
   overflow other than visible on an ancestor breaks position:sticky for
   everything inside it (that's what silently killed the #produse/#despre
   and footer__top page-stack effects — they never actually stuck, they just
   scrolled normally, which read as "no animation" even though the rounded
   corner + shadow, being plain static CSS, still rendered). */
main.page-shell.is-clipped { overflow: hidden; overflow: clip; }

/* Shop-first pages (homepage, despre) --------------------------------------
   Warm cream base; green only for buttons, active states and small accents —
   the product packaging carries the colour. */
main.page-shell--shop { background: var(--paper); color: var(--ink); }
.page-shell--shop .section { padding: clamp(64px, 7vw, 112px) 0; }

/* hero: just the product film, full-bleed under the header (the h1 is
   visually hidden, the grid right below says what the shop sells) */
.shop-hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--forest-900); }
.shop-hero__media { position: absolute; inset: 0; background: var(--forest-900) url("../assets/video/hero-loop-poster.webp") center / cover no-repeat; }
.shop-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }

.shop.section { padding-top: clamp(40px, 5vw, 72px); }
.shop__head { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: clamp(28px, 4vw, 48px); text-align: center; }
.shop__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* homepage: four products in one row, edge to edge, the title and the link
   to the full catalog aligned to the same edges */
.shop__wide { padding: 0 clamp(16px, 2.2vw, 40px); }
.shop__head--row { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; text-align: left; }
.shop--featured .shop__grid { gap: 40px clamp(10px, 1.1vw, 20px); }
.shop__all { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(27, 58, 47, .3); font-size: 15px; color: var(--forest-800); transition: border-color .3s var(--ease-out); }
.shop__all svg { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
@media (hover: hover) { .shop__all:hover { border-color: var(--forest-800); } }
@media (hover: hover) { .shop__all:hover svg { transform: translateX(3px); } }
/* produse.html: the catalog is the page, so it clears the fixed header */
.page-shell--shop .shop--page.section { padding-top: calc(var(--header-h) + clamp(32px, 5vw, 72px)); }
.chip {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(20, 32, 26, .16);
  background: transparent;
  font-size: 14px;
  color: var(--forest-800);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
@media (hover: hover) { .chip:hover { border-color: var(--forest-800); } }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--forest-800); border-color: var(--forest-800); color: var(--cream); }
a.chip { display: inline-flex; align-items: center; }
/* category pages: one plain line under the title */
.shop__lead { max-width: 46ch; margin: -6px auto 4px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }

/* product cards: a studio tile (every render shares the backdrop tone, height
   and floor line, see tools/card_images.py), then just name and price */
.shop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(44px, 5vw, 72px) clamp(16px, 2.4vw, 36px); }
.scard { display: flex; flex-direction: column; min-width: 0; }
.scard[hidden] { display: none; }
.scard__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tint-tile); }
.scard__img { position: absolute; inset: 0; display: block; }
.scard__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .2s; }
/* hover scene: the same product in its room, framed (tools/scene_tiles.py)
   so the bottle sits exactly where it does in the plain photo; only the
   scene's opacity changes, 400 ms ease both ways. Shown once loaded and
   decoded (.scene-ready) and only for the scent it shows (.scene-ok); see
   initScenes in main.js */
.scard__img .scard__scene { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
@media (hover: hover) { .scard__media.scene-ready.scene-ok:hover .scard__scene { opacity: 1; } }
.scard:has(.scard__name a:focus-visible) .scard__media.scene-ready.scene-ok .scard__scene,
.scard__media.scene-ready.scene-ok.scene-on .scard__scene { opacity: 1; }
/* touch screens: a small toggle instead of hover */
.scard__scene-btn { display: none; position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--ink); }
.scard__scene-btn svg { width: 16px; height: 16px; }
.scard__scene-btn[aria-pressed="true"] { background: var(--forest-800); color: var(--cream); }
@media (hover: none) { .scard__media.scene-ready.scene-ok .scard__scene-btn { display: grid; } }
@media (prefers-reduced-motion: reduce) { .scard__img .scard__scene { transition: none; } }
.scard__name { margin-top: 18px; font-size: 14px; font-weight: 400; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.scard__price { margin-top: 6px; font-size: 15px; color: var(--ink); }
.scard__price span { margin-left: 10px; font-size: 13px; color: var(--ink-soft); }
/* fragrance dots sit in the tile's empty top corner, so every card keeps
   the same two text lines */
.scard__swatches { position: absolute; top: 10px; left: 10px; display: flex; }
.scard__swatches button { position: relative; width: 26px; height: 26px; padding: 0; border: 0; background: none; }
.scard__swatches button::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px rgba(20, 32, 26, .1); transition: box-shadow .3s var(--ease-out); }
.scard__swatches button.is-active::before { box-shadow: 0 0 0 2px var(--tint-tile), 0 0 0 3px var(--ink); }
.scard__add {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.scard__add svg { width: 16px; height: 16px; }
.scard__add.is-added { background: var(--forest-800); color: var(--cream); }
@media (hover: hover) { .scard__add:hover { background: var(--forest-800); color: var(--cream); } }
.scard__add:active { transform: scale(.94); }
.btn.is-added { background: var(--forest-600); border-color: var(--forest-600); }

.shop__pro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 20px 24px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(20, 32, 26, .14);
  font-size: 15px;
  color: var(--forest-800);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.shop__pro strong { font-weight: 500; }
.shop__pro svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .3s var(--ease-out); }
@media (hover: hover) { .shop__pro:hover { background: var(--white); border-color: rgba(20, 32, 26, .24); } }
@media (hover: hover) { .shop__pro:hover svg { transform: translateX(4px); } }

/* homepage collection shot: the whole image, edge to edge. Title and line
   top-left, on a soft shade from the corner (the wood there has a bright
   sunlit stripe that would swallow white text) */
.collection { position: relative; overflow: hidden; background: var(--forest-900); }
.collection img { display: block; width: 100%; height: auto; }
/* a slow, slight zoom-out the first time the shot scrolls into view
   (.is-in comes from initCollection in main.js) */
html.js .collection img, html.js .collection-pair__item img { transform: scale(1.05); transform-origin: 40% 55%; transition: transform 2.2s cubic-bezier(.22, .61, .36, 1); }
html.js .collection.is-in img, html.js .collection-pair__item.is-in img { transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .collection img, html.js .collection-pair__item img { transform: none; transition: none; } }
/* the pair under it: half its width each, its height (6:5), butted
   straight against it and against each other */
.collection-pair { display: grid; grid-template-columns: 1fr 1fr; }
.collection-pair__item { aspect-ratio: 6 / 5; overflow: hidden; background: var(--tint-tile); }
.collection-pair__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collection-pair__item + .collection-pair__item img { transition-delay: .12s; }
/* each photo: its room, one line and a way in, on the dark cabinet at the bottom */
.collection-pair__item { position: relative; }
.collection-pair__item::after { content: ''; position: absolute; inset: 42% 0 0; background: linear-gradient(180deg, rgba(20, 14, 9, 0) 0%, rgba(20, 14, 9, .5) 100%); pointer-events: none; }
/* kept to the free space left of the bottles (they start about a third in) */
.collection-pair__text { position: absolute; z-index: 1; left: clamp(16px, 2.2vw, 40px); bottom: clamp(20px, 2.6vw, 44px); width: max(26%, 190px); color: #fff; }
.collection-pair__title { font-size: clamp(28px, 2.6vw, 46px); font-weight: 300; line-height: 1.04; letter-spacing: -.015em; color: #fff; }
.collection-pair__title, .collection-pair__sub { text-shadow: 0 1px 16px rgba(20, 14, 9, .45); }
.collection-pair__sub { max-width: 34ch; margin-top: 8px; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.5; color: rgba(255, 255, 255, .9); text-wrap: pretty; }
.collection-pair__cta { margin-top: clamp(14px, 1.4vw, 22px); }
.collection::after { content: ''; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(18, 16, 11, .62) 0%, rgba(18, 16, 11, .34) 22%, rgba(18, 16, 11, 0) 42%); pointer-events: none; }
.collection__text { position: absolute; z-index: 1; left: clamp(16px, 2.2vw, 40px); top: clamp(24px, 3.6vw, 64px); max-width: 40%; color: #fff; }
.collection__title { font-size: clamp(30px, 3.3vw, 62px); font-weight: 300; line-height: 1.04; letter-spacing: -.015em; color: #fff; }
.collection__sub { max-width: 30ch; margin-top: 14px; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
/* the spray, piece by piece: a tall track with a sticky full-screen stage;
   scrolling through the track plays the frame sequence on the canvas, then
   the notes fade in (initExplode in main.js). The stage takes the video's
   own white so the frames have no visible edge. */
.explode { position: relative; background: var(--paper); color: var(--forest-800); }
html.js .explode__track { height: 280vh; height: 280svh; }
.explode__stage { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2vw, 28px); min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 16px) 0 24px; overflow: hidden; }
.explode__head { text-align: center; padding: 0 var(--gutter); }
.explode__title { font-size: clamp(28px, 3vw, 48px); font-weight: 300; line-height: 1.1; letter-spacing: -.01em; color: var(--forest-800); }
.explode__hint { margin-top: 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); transition: opacity .4s ease; }
.explode.is-moving .explode__hint, .explode.is-done .explode__hint { opacity: 0; }
.explode__frame { position: relative; width: min(92vw, 1500px, calc((100svh - var(--header-h) - 170px) * 2)); aspect-ratio: 2 / 1; margin: 0 auto; }
.explode__poster, .explode__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.explode__poster { object-fit: contain; }
/* the poster is the finished state, for no-JS and reduced motion; with the
   canvas running it stays hidden so the first view isn't the final frame */
html.js .explode__poster { visibility: hidden; }
html.js .explode.is-static .explode__poster { visibility: visible; }
/* notes: a dot on the part, a vertical hairline, the note at its end */
.explode__dot { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--forest-800), 0 0 0 5px rgba(255, 255, 255, .6); font-size: 0; }
.explode__line { position: absolute; left: var(--x); top: var(--y1); height: calc(var(--y2) - var(--y1)); width: 1px; margin-left: -.5px; background: rgba(27, 58, 47, .4); }
.explode__notes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.explode__note { position: absolute; top: var(--y); width: min(17rem, 24%); }
.explode__note--l { left: var(--x); padding-left: 0; }
.explode__note--r { right: calc(100% - var(--x)); text-align: right; }
.explode__note--up { transform: translateY(-100%); padding-bottom: 10px; }
.explode__note--down { padding-top: 10px; }
.explode__note h3 { font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--forest-800); }
.explode__note p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.explode__list { display: none; }
/* hidden until the spray has come apart */
html.js .explode__dot, html.js .explode__line, html.js .explode__note { opacity: 0; transition: opacity .5s ease; }
html.js .explode.is-done .explode__dot, html.js .explode.is-done .explode__line, html.js .explode.is-done .explode__note { opacity: 1; }
/* reduced motion (or no frames): the finished state, no scroll track */
html.js .explode.is-static .explode__track { height: auto; }
.explode.is-static .explode__stage { position: relative; }
@media (prefers-reduced-motion: reduce) { html.js .explode__dot, html.js .explode__line, html.js .explode__note { transition: none; } }

.demo__title, .faq__title, .contact__title { text-align: center; color: var(--forest-800); margin-bottom: clamp(28px, 4vw, 48px); }
/* Bine de știut: editorial rows, photo one side and text the other
   (alternating), square photos like the product tiles, hairline lists */
.know__title { color: var(--forest-800); margin-bottom: clamp(32px, 4vw, 56px); }
.know__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.know__row + .know__row { margin-top: clamp(56px, 7vw, 112px); }
.know__row--flip .know__media { order: 2; }
.know__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint-tile); }
.know__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.know__text h3 { max-width: 16ch; font-size: clamp(26px, 2.4vw, 38px); font-weight: 300; line-height: 1.12; letter-spacing: -.01em; color: var(--forest-800); }
.know__text p { max-width: 42ch; margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.know__list { max-width: 30rem; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(27, 58, 47, .12); }
.know__list li { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(27, 58, 47, .12); }
.know__list strong { font-size: 16px; font-weight: 400; color: var(--forest-800); }
.know__list span { margin-left: auto; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-500); }
.know__list--scents li { align-items: center; }
.know__list i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px rgba(20, 32, 26, .1); }
.know__strip { margin-top: clamp(56px, 7vw, 112px); padding: 22px 0; border-top: 1px solid rgba(27, 58, 47, .12); border-bottom: 1px solid rgba(27, 58, 47, .12); font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.know__strip strong { font-weight: 400; color: var(--forest-800); }

.demo__player { position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--forest-900); }
.demo__player--portrait { max-width: 420px; aspect-ratio: 9 / 16; }
.demo__player video { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 249, 243, .94);
  color: var(--forest-800);
  box-shadow: 0 12px 32px rgba(10, 25, 18, .25);
  transition: transform .3s var(--ease-out), opacity .3s;
}
.demo__play svg { width: 24px; height: 24px; margin-left: 3px; }
@media (hover: hover) { .demo__play:hover { transform: scale(1.06); } }
.demo__player.is-playing .demo__play { opacity: 0; pointer-events: none; }

.faq__list { max-width: 760px; margin: 0 auto; border-top: 1px solid rgba(20, 32, 26, .12); }
.faq__item { border-bottom: 1px solid rgba(20, 32, 26, .12); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  list-style: none;
  font-size: 17px;
  color: var(--forest-800);
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .3s var(--ease-out); }
.faq__item[open] summary svg { transform: rotate(45deg); }
.faq__item p { max-width: 62ch; padding: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.faq__item a { color: var(--forest-700); text-decoration: underline; text-underline-offset: 3px; }

.about { padding-top: calc(var(--header-h) + clamp(32px, 5vw, 72px)) !important; }
.about__title { color: var(--forest-800); }
.ccards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
.ccards--2 .ccard { min-height: 0; }

/* Footer ----------------------------------------------------------------- */
.footer { background: var(--grad-forest); color: var(--cream); }
/* page-stack: .footer__top (logo + link columns) is pinned via sticky; the
   .footer__cover block (wordmark + copyright), sitting right after it in
   normal flow with its own opaque bg, naturally slides up and covers it —
   same technique as #produse/#despre, no GSAP needed. */
.footer__top { position: sticky; top: 0; z-index: 1; padding: clamp(56px, 6vw, 88px) 0 48px; }
.footer__cover {
  position: relative;
  z-index: 2;
  /* needs to be roughly a full viewport tall — the sticky effect on
     .footer__top only gets scroll "runway" for as long as this cover
     block is still sliding past, so a cover shorter than the viewport
     (this content is naturally only ~330px) barely gives sticky any
     distance to hold, and the whole thing reads as "no animation". */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--grad-forest);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -40px 70px rgba(0, 0, 0, .3);
  padding-bottom: 32px;
}
.footer__wordmark { overflow: hidden; text-align: center; padding: clamp(24px, 4vw, 48px) 0 0; }
.footer__wordmark span {
  display: block;
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: clamp(40px, 11vw, 190px);
  line-height: .92;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--cream);
  white-space: nowrap;
}
.footer__wordmark em { font-style: normal; font-weight: inherit; color: inherit; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer__brand img { height: 74px; width: auto; }
.footer__brand p { margin-top: 22px; max-width: 30ch; font-size: 14px; color: rgba(245, 241, 230, .6); }
.footer__col .footer__heading { font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0; margin: 0 0 18px; color: inherit; }
.footer__col li + li { margin-top: 10px; }
.footer__col a { font-size: 14px; color: rgba(245, 241, 230, .68); transition: color .3s, padding-left .3s var(--ease-out); }
@media (hover: hover) { .footer__col a:hover { color: var(--cream); padding-left: 6px; } }
.footer__bottom { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid rgba(245, 241, 230, .1); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: rgba(245, 241, 230, .5); }
.footer__bottom a { transition: color .3s; }
@media (hover: hover) { .footer__bottom a:hover { color: var(--cream); } }
.footer__bottom span + span { margin-left: 18px; }

/* --------------------------------------------------------------------------
   Product pages
   -------------------------------------------------------------------------- */
.phero {
  min-height: 92vh; min-height: 92svh; padding-bottom: 112px; /* keeps the copy clear of the scroll cue on short desktops */
  background: var(--cream-050);
}
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; font-size: 13px; letter-spacing: .02em; color: rgba(20, 32, 26, .66); }
.crumbs a { color: rgba(20, 32, 26, .78); transition: color .3s; }
@media (hover: hover) { .crumbs a:hover { color: var(--forest-800); } }
.crumbs span::before { content: '·'; margin-right: 8px; }
/* checkout opens on the dark band: light crumbs there (product pages keep
   theirs dark, their hero is light even though it sits in a .band) */
.band > .section .crumbs, .band > .section .crumbs a { color: rgba(245, 241, 230, .62); }
@media (hover: hover) { .band > .section .crumbs a:hover { color: var(--cream); } }
.phero__title { max-width: 14ch; color: var(--forest-800); }
/* the h1: the product's Romanian name, small above the slogan */
.phero__name { margin-bottom: 18px; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--forest-500); }
.phero__name span { color: rgba(20, 32, 26, .72); letter-spacing: .12em; }

/* render photos (tools/card_images.py) in place of the floating cutouts:
   hero and variants show the studio shot on its own backdrop.
   Doubled class selectors so they win over the cutout rules in the
   breakpoints further down. */
.phero .hero__media.hero__media--photo { display: block; min-height: 0; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-lg); background: var(--tint-tile); }
.hero__media--photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.variant .variant__media.variant__media--photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; margin-bottom: 18px; overflow: hidden; border-radius: var(--radius-md); background: var(--tint-tile); }
.variant .variant__media--photo img { width: 100%; height: 100%; object-fit: cover; filter: none; transform-origin: 50% 82%; }
@media (hover: hover) { .variant:hover .variant__media--photo img { transform: scale(1.03); } }
/* scents without their own render: the scent's illustration on its tint */
.variant .variant__media.variant__media--scent { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 3 / 4; margin-bottom: 18px; overflow: hidden; border-radius: var(--radius-md); background: var(--scent-tint); }
.variant .variant__media--scent img { width: 84%; height: auto; filter: none; }
@media (hover: hover) { .variant:hover .variant__media--scent img { transform: scale(1.04); } }
/* the scent dot sits inside the image's corner, above it (it used to sit on
   the card edge, half under the photo) */
.variant .variant__media .variant__swatch { top: 12px; right: 12px; z-index: 2; }
.slider__track > .scard--slide { width: clamp(220px, calc((100% - 72px) / 4), 340px); }
@media (max-width: 1023px) {
  .phero .hero__media.hero__media--photo { aspect-ratio: 4 / 5; }
}
@media (max-width: 768px) {
  .slider__track > .scard--slide { width: 62vw; }
}
.phero__title em { color: inherit; }
.phero__lead { margin-top: 22px; max-width: 40ch; font-size: 18px; font-weight: 400; color: var(--forest-800); }
.phero__text { margin-top: 14px; max-width: 46ch; font-size: 15px; color: var(--ink-soft); }
.phero__swatches { display: flex; gap: 10px; margin-top: 30px; align-items: center; }
.phero__swatches i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(20, 32, 26, .22); }
.phero__swatches small { margin-left: 8px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* "Design" section: the product as a labelled object. Desktop: the render
   on a wide studio stage, a dot on each part with a hairline out to its note
   left or right. Phone: numbered dots on the photo, the notes listed below.
   Dot positions come from the render geometry (tools/card_images.py). */
.anatomy { position: relative; }
.anatomy__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--tint-tile); }
.anatomy__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.anatomy__dot {
  position: absolute; left: var(--x); top: var(--y);
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--cream-050);
  box-shadow: 0 0 0 1.5px var(--forest-800), 0 0 0 7px rgba(251, 249, 243, .42);
  font-size: 0;
}
.anatomy__line { position: absolute; top: var(--y); left: var(--from); width: calc(var(--to) - var(--from)); height: 1px; background: rgba(27, 58, 47, .38); }
.anatomy__notes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.anatomy__note { position: absolute; top: var(--y); width: 23.5%; transform: translateY(-13px); pointer-events: auto; }
.anatomy__note--l { left: 4%; text-align: right; }
.anatomy__note--r { right: 4%; }
.anatomy__num { display: none; }
.anatomy__title { font-size: 17px; font-weight: 400; line-height: 26px; color: var(--forest-800); text-wrap: balance; }
.anatomy__text { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
/* below 1200px the side notes no longer fit beside the product */
@media (max-width: 1199px) {
  /* stacked: the portrait photo with numbered dots, the notes listed below */
  .anatomy__media { max-width: 560px; margin: 0 auto; }
  .anatomy__media img { aspect-ratio: 4 / 5; }
  .anatomy__dot {
    left: var(--mx); top: var(--my);
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
    display: grid; place-items: center;
    font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--forest-800);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 0 0 1px rgba(27, 58, 47, .14), 0 4px 14px rgba(20, 32, 26, .14);
  }
  .anatomy__line { display: none; }
  .anatomy__notes { position: static; display: grid; gap: 22px; max-width: 560px; margin: 28px auto 0; pointer-events: auto; }
  .anatomy__note { position: static; width: auto; transform: none; text-align: left; display: grid; grid-template-columns: 40px minmax(0, 1fr); }
  .anatomy__num {
    display: grid; place-items: center; grid-row: span 2; align-self: start;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(27, 58, 47, .28);
    font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--forest-800);
  }
  .anatomy__title { font-size: 16.5px; }
  .anatomy__text { font-size: 14.5px; }
}

.fcard { width: clamp(280px, calc((100% - 48px) / 3), 440px); display: flex; flex-direction: column; gap: 16px; }
.fcard__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--sand); }
.fcard__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-expo); }
@media (hover: hover) { .fcard:hover .fcard__media img { transform: scale(1.08); } }
.fcard__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 31, 25, .38) 0%, rgba(14, 31, 25, 0) 28%, rgba(14, 31, 25, 0) 55%, rgba(14, 31, 25, .45) 100%); }
.fcard__num { position: absolute; left: 18px; top: 16px; font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--cream); z-index: 1; text-shadow: 0 1px 2px rgba(14, 31, 25, .6), 0 0 14px rgba(14, 31, 25, .45); }
.fcard__title { font-size: 20px; font-weight: 400; color: var(--forest-800); }
.fcard__text { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; }
/* caption pill overlaid on the image, like the reference feature tiles */
.fcard__caption {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 2;
  padding: 14px 20px 15px;
  border-radius: 20px;
  background: rgba(251, 249, 243, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--forest-800);
  box-shadow: 0 14px 30px rgba(20, 32, 26, .18);
  transform: translateY(0);
  transition: transform .6s var(--ease-expo), box-shadow .6s var(--ease-out);
}
@media (hover: hover) { .fcard:hover .fcard__caption { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(20, 32, 26, .24); } }
.fcard__caption h3 { font-size: 16.5px; font-weight: 500; line-height: 1.25; color: var(--forest-800); }
.fcard__caption p { margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }

.variants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.variants--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.variants--2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
/* variants as a slidable row (arrows auto-disable when everything fits) */
.slider__track.variants { display: flex; gap: 24px; }
.slider__track.variants .variant { width: clamp(230px, calc((100% - 72px) / 4), 420px); }
.slider__track.variants--1 { justify-content: center; }
.slider__track.variants--1 .variant { width: min(100%, 420px); }
.slider__track.variants--2 { justify-content: center; }
.slider__track.variants--2 .variant { width: min(calc((100% - 24px) / 2), 420px); }
/* "other products" slider cards: two wide cards in view, like the reference */
.pcard--slide { width: clamp(300px, calc((100% - 24px) / 2), 680px); }
.band .banner { background: linear-gradient(112deg, #23503f 0%, #33634f 60%, #427761 100%); }
.variant { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 20px 26px; border-radius: var(--radius-lg); background: var(--cream); border: 1px solid rgba(27, 58, 47, .06); transition: transform .6s var(--ease-expo), box-shadow .6s var(--ease-out); overflow: hidden; }
@media (hover: hover) { .variant:hover { transform: translateY(-8px); box-shadow: var(--shadow-card); } }
.variant__ill { position: absolute; left: 50%; top: 8%; width: 110%; transform: translateX(-50%); opacity: .35; pointer-events: none; transition: transform .9s var(--ease-expo), opacity .5s; }
@media (hover: hover) { .variant:hover .variant__ill { opacity: .55; transform: translateX(-50%) scale(1.06); } }
.variant__media { position: relative; z-index: 1; height: 270px; display: flex; align-items: flex-end; }
.variant__media img { height: 100%; width: auto; filter: drop-shadow(0 24px 28px rgba(20, 32, 26, .3)); transition: transform .8s var(--ease-expo); transform-origin: 50% 100%; }
@media (hover: hover) { .variant:hover .variant__media img { transform: translateY(-8px) scale(1.04); } }
.variant__name { position: relative; z-index: 1; margin-top: 22px; font-family: var(--font-serif); font-size: 26px; font-weight: 500; color: var(--forest-800); }
.variant__cat { position: relative; z-index: 1; margin-top: 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--forest-500); }
.variant__swatch { position: absolute; z-index: 1; right: 18px; top: 18px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px rgba(27, 58, 47, .15); }
.variant__price { position: relative; z-index: 1; margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--forest-600); }
.variant__actions { position: relative; z-index: 1; margin-top: 16px; }

/* --------------------------------------------------------------------------
   Cart: header button, drawer, add-to-cart, fragrance swatches
   -------------------------------------------------------------------------- */
.cart-btn { position: relative; }
.cart-btn svg { width: 18px; height: 18px; }
.cart-btn__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--sage-300); color: var(--forest-900);
  font-size: 10.5px; font-weight: 600;
  opacity: 0; transform: scale(.6);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-expo);
  pointer-events: none;
}
.cart-btn__badge.is-visible { opacity: 1; transform: scale(1); }

.btn.is-added { background: var(--sage-300); border-color: var(--sage-300); color: var(--forest-900); }

.cart-drawer { position: fixed; inset: 0; z-index: 400; visibility: hidden; pointer-events: none; }
.cart-drawer.is-open { visibility: visible; pointer-events: auto; }
.cart-drawer__scrim { position: absolute; inset: 0; background: rgba(10, 20, 15, .5); opacity: 0; transition: opacity .5s var(--ease-soft); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.cart-drawer.is-open .cart-drawer__scrim { opacity: 1; }
.cart-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--cream-050);
  color: var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .55s var(--ease-expo);
  box-shadow: -30px 0 70px rgba(6, 18, 12, .3);
  overscroll-behavior: contain;
}
.cart-drawer.is-open .cart-drawer__panel { transform: none; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 26px clamp(20px, 4vw, 34px); border-bottom: 1px solid rgba(27, 58, 47, .1); }
.cart-drawer__head h2 { font-size: 21px; font-weight: 400; color: var(--forest-800); }
.cart-drawer__head .ibtn { border-color: rgba(27, 58, 47, .35); color: var(--forest-800); width: 40px; height: 40px; }
@media (hover: hover) { .cart-drawer__head .ibtn:hover { background: var(--forest-800); color: var(--cream); border-color: var(--forest-800); } }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 6px clamp(20px, 4vw, 34px) 20px; display: flex; flex-direction: column; overscroll-behavior: contain; }
.cart-drawer__empty { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 10px; color: var(--ink-soft); font-size: 14.5px; gap: 4px; }
.cart-drawer__empty .btn { margin-top: 16px; }

.cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid rgba(27, 58, 47, .08); }
.cart-item__media { width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--cream); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.cart-item__media img { height: 90%; width: auto; }
.cart-item__name { font-size: 14.5px; color: var(--forest-800); line-height: 1.35; }
.cart-item__name span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.cart-item__row { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cart-item__price { font-size: 13.5px; font-weight: 500; color: var(--forest-800); white-space: nowrap; }
.cart-item__remove { align-self: flex-start; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink-soft); transition: background-color .25s, color .25s; }
@media (hover: hover) { .cart-item__remove:hover { background: rgba(27, 58, 47, .08); color: var(--forest-800); } }
.cart-item__remove svg { width: 14px; height: 14px; }

.qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(27, 58, 47, .18); border-radius: 999px; padding: 3px; }
.qty button { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: var(--forest-800); transition: background-color .25s; }
@media (hover: hover) { .qty button:hover { background: rgba(27, 58, 47, .1); } }
.qty span { min-width: 22px; text-align: center; font-size: 13.5px; color: var(--forest-800); }

.cart-drawer__foot { flex: 0 0 auto; padding: 22px clamp(20px, 4vw, 34px) clamp(24px, 4vw, 34px); border-top: 1px solid rgba(27, 58, 47, .1); }
.cart-drawer__subtotal { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: var(--forest-800); margin-bottom: 16px; }
.cart-drawer__subtotal strong { font-size: 19px; font-weight: 500; }
.cart-drawer__checkout { width: 100%; }
.cart-drawer__checkout.is-disabled { pointer-events: none; opacity: .4; }
.cart-drawer__note { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); text-align: center; }
.cart-drawer__checkout.is-loading { pointer-events: none; opacity: .7; }
.cart-drawer__error { margin-top: 12px; font-size: 13px; line-height: 1.5; color: #9a2f22; text-align: center; }
.cart-drawer__error a { text-decoration: underline; text-underline-offset: 3px; }

/* price + swatch bits on hero and variant slider (pcard's own are defined with the component, above) */
.phero__swatches i, .phero__swatches button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(20, 32, 26, .22); padding: 0; transition: transform .3s var(--ease-out), border-color .3s; }
.phero__swatches button.is-active { border-color: var(--forest-800); transform: scale(1.15); }
.phero__price { display: block; margin-top: 16px; font-size: 15px; color: var(--forest-800); }
.phero__price strong { font-weight: 500; }

/* --------------------------------------------------------------------------
   Checkout page
   -------------------------------------------------------------------------- */
/* checkout: the same light page as the rest, title on the form's left edge */
.checkout-head { padding: calc(var(--header-h) + clamp(36px, 6vw, 88px)) 0 clamp(20px, 3vw, 40px); }
.checkout-head .crumbs { margin-bottom: 22px; }
.checkout-head__title { font-size: clamp(36px, 4.4vw, 64px); font-weight: 300; line-height: 1.04; letter-spacing: -.02em; color: var(--forest-800); }
.checkout-head__lead { max-width: 46ch; margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.checkout-body.section { padding-top: 0; }
.checkout { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.checkout__summary { position: sticky; top: calc(var(--header-h) + 24px); background: var(--cream); border-radius: var(--radius-xl); padding: clamp(26px, 3vw, 38px); box-shadow: var(--shadow-card); }
.checkout__summary h2 { font-size: 19px; font-weight: 400; color: var(--forest-800); margin-bottom: 6px; }
.checkout__line { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(27, 58, 47, .08); }
.checkout__line-media { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--cream-050); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.checkout__line-media img { height: 90%; width: auto; }
.checkout__line-name { font-size: 14px; color: var(--forest-800); }
.checkout__line-name span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.checkout__line-price { font-size: 13.5px; font-weight: 500; color: var(--forest-800); white-space: nowrap; }
.checkout__totals { margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(27, 58, 47, .14); display: flex; align-items: center; justify-content: space-between; }
.checkout__totals strong { font-size: 21px; font-weight: 500; color: var(--forest-800); }
.checkout__empty { text-align: center; padding: clamp(50px, 8vw, 90px) 20px; }
.checkout__empty .btn { margin-top: 18px; }

.checkout-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--forest-500); }
.field input, .field textarea, .field select {
  height: 52px; padding: 0 18px; border-radius: var(--radius-sm);
  border: 1px solid rgba(27, 58, 47, .18); background: var(--white);
  font: inherit; font-size: 16px; color: var(--ink);
  transition: border-color .3s, box-shadow .3s;
}
.field textarea { height: auto; min-height: 100px; padding: 14px 18px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231b3a2f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 18px center / 12px; cursor: pointer; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; border-color: var(--forest-500); box-shadow: 0 0 0 3px rgba(61, 110, 88, .18); }
.field--row { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 18px; }
.checkout-form__radios { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-card { flex: 1 1 200px; position: relative; }
.radio-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-card span { display: block; padding: 16px 20px; border-radius: var(--radius-sm); border: 1px solid rgba(27, 58, 47, .18); font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .3s, background-color .3s; }
.radio-card input:checked + span { border-color: var(--forest-600); background: rgba(61, 110, 88, .07); color: var(--forest-800); }
.radio-card input:focus-visible + span { outline: 2px solid var(--sage-400); outline-offset: 2px; }
.checkout-form__actions { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }
.checkout-form__actions .btn { width: 100%; }
.checkout-form__legal { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

.checkout-confirm { text-align: center; padding: clamp(50px, 8vw, 90px) 20px; }
.checkout-confirm i { display: flex; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: var(--forest-800); align-items: center; justify-content: center; }
.checkout-confirm i svg { width: 26px; height: 26px; stroke: var(--cream); }
.checkout-confirm h2 { font-size: clamp(24px, 2.4vw, 32px); color: var(--forest-800); }
.checkout-confirm p { margin-top: 12px; max-width: 46ch; margin-inline: auto; color: var(--ink-soft); }
.checkout-confirm .btn { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Reveal system (initial states only apply when JS + GSAP are available)
   -------------------------------------------------------------------------- */
html.js:not(.no-gsap) [data-reveal], html.js:not(.no-gsap) [data-reveal-group] > * { opacity: 0; }
html.js:not(.no-gsap) [data-reveal="up"], html.js:not(.no-gsap) [data-reveal-group="up"] > * { transform: translateY(32px); }
html.js:not(.no-gsap) [data-reveal-group="right"] > * { transform: translateX(120px); }
html.js:not(.no-gsap) [data-reveal="right"] { transform: translateX(80px); }
html.js:not(.no-gsap) [data-reveal="left"] { transform: translateX(-80px); }
html.js:not(.no-gsap) [data-reveal="scale"] { transform: scale(.94); }
html.js:not(.no-gsap) .hero [data-hero] { opacity: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .ccards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variants--1 { grid-template-columns: minmax(0, 420px); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
  .shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop--featured .shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcard__media { height: 270px; }
  .pcard__media--jug { height: 288px; }
  .grid-3 { gap: 16px; }
  .pcard--compact { padding: 36px 20px 0; }
}
@media (max-width: 1023px) {
  :root { --header-h: 76px; }
  .menu-btn__label { display: none; }
  .menu-btn { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .site-menu { grid-template-columns: 1fr; }
  .site-menu__media { display: none; }
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 48px); padding-bottom: 72px; }
  /* min-height:0 suits the product-page heroes (they have copy to size them),
     but the homepage video hero has none, so it collapsed to a ~200px strip */
  .hero--video { min-height: 72vh; min-height: 72svh; }
  .hero__inner, .phero .hero__inner { grid-template-columns: 1fr; gap: 12px; }
  .hero__media { order: -1; min-height: 0; margin: 0 auto; }
  .buy-panel { position: static; padding: 26px 22px 30px; }
  .pgallery { order: -1; }
  .pgallery__grid { gap: 10px; }
  .hero__product { height: min(52vh, 480px); }
  .hero__product--wide { height: min(44vh, 400px); }
  .hero__ill { width: 230%; max-width: none; left: -70%; right: auto; top: 2%; }
  .hero__title { max-width: 14ch; }
  .hero__scroll { display: none; }
  .care__inner { grid-template-columns: 1fr; }
  .family { width: 100%; margin-top: 28px; justify-content: center; }
  .inno-expand__media { width: 80%; height: 46%; }
  .banner__media { width: clamp(150px, 20vw, 220px); }
  .checkout { grid-template-columns: 1fr; }
  .checkout__summary { position: static; order: -1; }
}
@media (max-width: 768px) {
  /* section intro eyebrows ("Gama completă", "Despre noi", "Distribuție"…) —
     one more small line before the real heading, felt cluttered on a phone */
  .section__head .eyebrow { display: none; }
  /* Phones get plain stacked blocks: no sticky page-stacks, pins or
     scrubbed effects (those are desktop-only in main.js too), and tighter
     section spacing — 80px+ above and below every block made the page
     ~10,000px long. */
  .section { padding: 72px 0; }
  .section--tight { padding: 56px 0; }
  /* lighter reading on a phone: each section keeps its title and one
     action — subtitles, card category lines, excerpts and second buttons
     are desktop-only */
  #unde .section__head p,
  .banner__text,
  .ncard__text,
  .footer__brand p,
  .pcard__cat { display: none; }
  .care__actions .btn + .btn,
  .banner__actions .btn + .btn { display: none; }
  /* shop homepage */
  .page-shell--shop .section { padding: 56px 0; }
  /* a bit shorter than the screen, so the products heading peeks below */
  .shop-hero { height: 76vh; height: 76svh; }
  .shop-hero__media { background-image: url("../assets/video/hero-loop-poster-portrait.webp"); }
  .page-shell--shop .shop.section { padding-top: 24px; }
  .shop__filters { gap: 6px; }
  .chip { height: 34px; padding: 0 13px; font-size: 13px; }
  .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 10px; }
  .shop__wide { padding: 0 16px; }
  .shop--featured .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 10px; }
  .page-shell--shop .shop--page.section { padding-top: calc(var(--header-h) + 28px); }
  .scard__name { margin-top: 12px; font-size: 12.5px; letter-spacing: .05em; }
  .scard__price { margin-top: 4px; font-size: 14px; }
  .scard__price span { margin-left: 8px; font-size: 12px; }
  .scard__swatches { top: 4px; left: 4px; }
  .scard__scene-btn { top: 6px; right: 6px; width: 30px; height: 30px; }
  .scard__scene-btn svg { width: 14px; height: 14px; }
  .scard__add { right: 8px; bottom: 8px; width: 34px; height: 34px; }
  .scard__add svg { width: 14px; height: 14px; }
  .shop__pro { padding: 18px 20px; font-size: 14.5px; }
  /* Bine de știut: photo on top, text under it, every row */
  .know__row { grid-template-columns: 1fr; gap: 22px; }
  .know__row--flip .know__media { order: 0; }
  .know__text h3 { font-size: 26px; }
  .know__text p { font-size: 15px; }
  .know__list { margin-top: 20px; }
  .know__list li { padding: 12px 0; }
  .know__strip { font-size: 15px; }
  .demo__player { aspect-ratio: 4 / 5; }
  .demo__player--portrait { aspect-ratio: 9 / 16; }
  .faq__item summary { padding: 18px 0; font-size: 16px; }
  /* phone: the bottle stands up (frames rotated), numbered dots on the parts
     and the notes as a list under the scroll track */
  html.js .explode__track { height: 240vh; height: 240svh; }
  .explode__stage { gap: 10px; padding-bottom: 16px; }
  .explode__title { font-size: 28px; }
  .explode__hint { font-size: 11.5px; }
  .explode__frame { width: auto; height: calc(100svh - var(--header-h) - 120px); aspect-ratio: 600 / 1202; }
  .explode__dot { left: var(--mx); top: var(--my); width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; font-size: 11px; font-weight: 500; color: var(--forest-800); background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(27, 58, 47, .25), 0 3px 10px rgba(20, 32, 26, .12); }
  .explode__line, .explode__notes { display: none; }
  .explode__list { display: grid; gap: 18px; margin: 0; padding: 8px 20px 56px; list-style: none; }
  .explode__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); }
  .explode__list span { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(27, 58, 47, .3); font-size: 11px; font-weight: 500; color: var(--forest-800); }
  .explode__list h3 { font-size: 16px; font-weight: 400; color: var(--forest-800); }
  .explode__list p { margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
  .collection-pair { grid-template-columns: 1fr; }
  .collection-pair__item::after { inset: 50% 0 0; }
  .collection-pair__text { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 14px; left: 16px; right: 16px; bottom: 16px; width: auto; }
  .collection-pair__title { font-size: 26px; }
  .collection-pair__sub { grid-column: 1; margin-top: 4px; font-size: 13px; line-height: 1.4; }
  .collection-pair__cta { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; height: 40px; padding: 0 16px; font-size: 13.5px; }
  /* phone: the text gets its own band in the wall's green above the
     portrait crop, and the photo's top edge fades into it */
  .collection { padding-top: 132px; background: #565541; }
  .collection::after { display: none; }
  .collection img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%); mask-image: linear-gradient(180deg, transparent 0, #000 18%); }
  .collection__text { left: 16px; right: 16px; top: 28px; max-width: none; }
  .collection__title { font-size: 30px; }
  .collection__sub { margin-top: 10px; font-size: 14.5px; max-width: 34ch; }
  .ccards--2 { grid-template-columns: 1fr; }
  /* despre: centred intro like every other section */
  .care__inner > div:first-child { text-align: center; }
  .care__title { margin: 0 auto; }
  .care__text { margin-left: auto; margin-right: auto; }
  .care__actions { justify-content: center; }
  /* HoReCa card: the "Professional Care" label repeated its own title;
     footer: the small stacked logo repeated the big wordmark below */
  .banner .eyebrow { display: none; }
  .banner__title { margin-top: 0 !important; }
  .footer__brand { display: none; }
  .grid-3 { grid-template-columns: 1fr; gap: 18px; }
  .pcard--compact { min-height: 0; padding: 36px 24px 0; }
  .pcard__media { height: 240px; }
  .pcard__media--jug { height: 260px; }
  .section__head--row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccard { min-height: 0; padding: 22px 20px; }
  .banner { grid-template-columns: 1fr; padding: 32px 26px 0; }
  .banner__media { width: 100%; height: 220px; justify-content: flex-end; }
  .banner__media img { bottom: 0; height: 118%; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .ncard, .fcard { width: min(82vw, 360px); }
  .variants, .variants--2 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .variants--1 { grid-template-columns: 1fr; }
  .slider__track.variants { gap: 14px; }
  .slider__track.variants .variant, .slider__track.variants--2 .variant { width: min(72vw, 300px); }
  .slider__track.variants--1 .variant { width: min(100%, 360px); }
  .pcard--slide { width: min(84vw, 400px); }
  .variant { padding: 24px 12px 20px; }
  .variant__media { height: 200px; }
  .variant__name { font-size: 22px; }
  .tile { min-width: 180px; height: 96px; padding: 0 18px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .field--row { grid-template-columns: 1fr; }
  .checkout__summary { padding: clamp(22px, 5vw, 30px); }
  /* footer: a normal footer — no sticky top + full-screen cover reveal */
  .footer__top { position: relative; padding: 48px 0 28px; }
  /* stacked under the links on phones: no own gradient, so the footer's one
     runs through without a seam */
  .footer__cover { min-height: 0; justify-content: flex-start; border-radius: 0; box-shadow: none; padding-bottom: 28px; background: none; }
  .footer__wordmark { padding-top: 8px; }
  .footer__wordmark span { white-space: normal; font-size: clamp(56px, 17vw, 120px); line-height: .94; }
  .footer__bottom { margin-top: 28px; }
}
@media (max-width: 480px) {
  /* header__right (cart + lang + menu button) needs ~185px min-content on phones;
     the horizontal wordmark has to give way or it pushes the menu button off-screen */
  .header__logo-mark { --logo-w0: 118px; --logo-w1: 150px; }
  /* contact: one grouped panel with dividers (label | details) instead of
     four separate ~150px cards stacked */
  .ccards { grid-template-columns: 1fr; gap: 0; background: var(--white); border: 1px solid rgba(20, 32, 26, .08); border-radius: var(--radius-lg); overflow: hidden; }
  .ccard { display: grid; grid-template-columns: 84px 1fr; column-gap: 12px; align-items: baseline; min-height: 0; padding: 18px 20px; border: 0; border-radius: 0; background: none; }
  .ccard > :not(.ccard__label) { grid-column: 2; }
  .ccard + .ccard { border-top: 1px solid rgba(20, 32, 26, .08); }
  @media (hover: hover) { .ccard:hover { transform: none; box-shadow: none; } }
  .ccard__label { margin: 0; font-size: 14px; }
  .ccard__tag { justify-self: start; margin-top: 8px; }
  .hero__product { height: min(48vh, 400px); }
  .variants, .variants--2 { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  /* narrower still (iPhone SE/mini, small Android) — shrink the wordmark again */
  .header__logo-mark { --logo-w0: 104px; --logo-w1: 136px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .hero__scroll i::after { animation: none; }
  @media (hover: hover) { .pcard:hover .pcard__ripple i { animation: none; } }
  html.js [data-reveal], html.js [data-reveal-group] > *, html.js .hero [data-hero] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   First-order offer behind a steamed-up screen (js/wipe.js): a fog canvas
   over the whole viewport; wiping it uncovers the offer underneath
   -------------------------------------------------------------------------- */
.wipe { position: fixed; inset: 0; z-index: 600; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.wipe.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.wipe__reveal { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(253, 253, 252, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wipe__offer { max-width: 30rem; text-align: center; color: var(--forest-800); }
.wipe__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--forest-500); }
.wipe__title { margin-top: 14px; font-size: clamp(34px, 5vw, 56px); font-weight: 300; line-height: 1.05; letter-spacing: -.015em; }
.wipe__title span { display: block; font-size: clamp(88px, 14vw, 168px); font-weight: 300; line-height: .9; letter-spacing: -.04em; }
.wipe__text { margin-top: 14px; font-size: 16px; color: var(--ink-soft); }
.wipe__code { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px auto 0; max-width: 22rem; padding: 8px 8px 8px 22px; border: 1px dashed rgba(27, 58, 47, .45); }
.wipe__code-value { font-size: 20px; font-weight: 500; letter-spacing: .24em; color: var(--forest-800); }
.wipe__copy { height: 44px; padding: 0 18px; background: var(--forest-800); color: var(--cream); font-size: 14px; transition: background-color .3s ease; }
.wipe__copy.is-copied { background: var(--forest-600); }
@media (hover: hover) { .wipe__copy:hover { background: var(--forest-600); } }
.wipe__go { margin-top: 20px; padding-bottom: 3px; border-bottom: 1px solid rgba(27, 58, 47, .3); font-size: 14px; color: var(--forest-800); }
.wipe__fog { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity 1s ease; }
.wipe.is-wiping .wipe__fog { cursor: grabbing; }
.wipe.is-revealed .wipe__fog { opacity: 0; pointer-events: none; }
/* the offer's controls only take clicks once the steam is gone */
.wipe:not(.is-revealed) .wipe__offer { pointer-events: none; }
.wipe__close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(27, 58, 47, .3); background: rgba(255, 255, 255, .6); color: var(--forest-800); }
.wipe__close svg { width: 16px; height: 16px; }
@media (hover: hover) { .wipe__close:hover { background: var(--forest-800); color: var(--cream); border-color: var(--forest-800); } }
/* keyboard way in: hidden until tabbed to */
.wipe__keys { position: absolute; left: 50%; bottom: 28px; z-index: 2; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: var(--forest-800); color: var(--cream); font-size: 13px; opacity: 0; pointer-events: none; }
.wipe__keys:focus-visible { opacity: 1; pointer-events: auto; }
.wipe.is-revealed .wipe__keys { display: none; }
@media (prefers-reduced-motion: reduce) { .wipe, .wipe__fog { transition: none; } }
@media (max-width: 768px) {
  .wipe__reveal { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(253, 253, 252, .94); }
  .wipe__code { padding-left: 16px; }
  .wipe__code-value { font-size: 17px; letter-spacing: .18em; }
}

/* checkout: the discount line under the subtotal */
.checkout__discount { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 14px; color: var(--forest-600); }

/* --------------------------------------------------------------------------
   Despre noi. Story: the right half of the screen is a photo that stays put
   while the text scrolls on the left; each block brings its own scene (cross-
   fade with a slow settle, initStory). Then the name, then the film growing
   from a window to full height (initCinema), then where next.
   -------------------------------------------------------------------------- */
.story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story__media { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--tint-tile); }
.story__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s ease, transform 2.4s cubic-bezier(.22, .61, .36, 1); }
.story__scene.is-on { opacity: 1; transform: none; }
.story__text { grid-column: 1; grid-row: 1; padding: 0 clamp(32px, 6vw, 112px) 0 var(--gutter); }
.story__block { display: flex; flex-direction: column; justify-content: center; max-width: 34rem; }
.story__block--intro { min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 32px) 0 48px; }
.story__block--point { min-height: 80vh; min-height: 80svh; padding: 48px 0; border-top: 1px solid rgba(27, 58, 47, .16); }
.story__block--point:last-child { margin-bottom: 20vh; }
.story__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--forest-500); }
.story__title { max-width: 13ch; margin-top: 18px; font-size: clamp(40px, 4.6vw, 80px); font-weight: 300; line-height: 1.02; letter-spacing: -.025em; color: var(--forest-800); }
.story__lead { max-width: 30rem; margin-top: clamp(24px, 3vw, 40px); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--forest-800); }
.story__subtitle { max-width: 34rem; padding-bottom: 22px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--forest-500); }
.story__num { font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--forest-500); font-variant-numeric: tabular-nums; }
.story__block--point h3 { margin-top: 16px; font-size: clamp(28px, 2.8vw, 44px); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; color: var(--forest-800); }
.story__block--point p { max-width: 30rem; margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.story__inline { display: none; }
@media (min-width: 901px) {
  html.js .story__block--point { opacity: .32; transition: opacity .7s ease; }
  html.js .story__block--point.is-active { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .story__scene { transform: none; transition: opacity .3s ease; } }
.wow-name { padding: clamp(64px, 8vw, 144px) 0; text-align: center; }
.wow-name__logo { width: min(100%, 900px); margin: 28px auto 0; }
.wow-name__text { max-width: 34rem; margin: clamp(28px, 3vw, 44px) auto 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; color: var(--ink-soft); }
/* cinema: --s (frame scale), --r (corner radius), --bg (blurred light),
   --t (title) are set from the scroll position */
.cinema { position: relative; }
html.js .cinema__track { height: 260vh; height: 260svh; }
.cinema__stage { position: sticky; top: 0; display: grid; place-items: center; height: 100vh; height: 100svh; padding-top: var(--header-h); overflow: hidden; }
/* the light around the film: its poster at first, then (desktop) the film
   itself drawn small into a canvas a few times a second */
.cinema__bg, .cinema__glow { position: absolute; left: -80px; top: -80px; width: calc(100% + 160px); max-width: none; height: calc(100% + 160px); object-fit: cover; opacity: var(--bg, 0); will-change: opacity; }
.cinema__glow { filter: blur(52px) saturate(1.1); }
.cinema__glow { display: none; }
.cinema.has-glow .cinema__glow { display: block; }
.cinema__title { position: absolute; left: var(--gutter); top: 50%; z-index: 1; max-width: 24rem; transform: translateY(-50%) translateY(calc((1 - var(--t, 1)) * -24px)); opacity: var(--t, 1); }
.cinema__title p:last-child { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.film__title { max-width: 14ch; margin-top: 16px; font-size: clamp(28px, 3vw, 48px); font-weight: 300; line-height: 1.08; color: var(--forest-800); }
.cinema__frame { position: relative; z-index: 2; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); aspect-ratio: 9 / 16; max-width: 100vw; overflow: hidden; border-radius: var(--r, 20px); transform: translateX(var(--x, 0)) scale(var(--s, .56)); background: var(--forest-900); box-shadow: 0 30px 80px rgba(20, 32, 26, .2); will-change: transform; }
.cinema__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cinema__sound { position: absolute; right: 20px; bottom: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--forest-800); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
.cinema.is-full .cinema__sound, .cinema.is-static .cinema__sound { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.cinema.is-static .cinema__sound { display: none; }
.cinema__sound svg { width: 18px; height: 18px; }
.cinema__icon-on, .cinema__sound[aria-pressed="true"] .cinema__icon-off { display: none; }
.cinema__sound[aria-pressed="true"] .cinema__icon-on { display: block; }
/* reduced motion: no growing, the film full size under its title */
.cinema.is-static .cinema__track { height: auto; }
.cinema.is-static .cinema__stage { position: relative; height: auto; display: block; padding: 0 var(--gutter); }
.cinema.is-static .cinema__title { position: static; transform: none; opacity: 1; margin-bottom: 32px; }
.cinema.is-static .cinema__frame { height: auto; width: min(100%, 420px); transform: none; margin: 0 auto; }
.cinema.is-static .cinema__bg, .cinema.is-static .cinema__glow { display: none; }
/* 404 */
.notfound { padding: calc(var(--header-h) + clamp(56px, 9vw, 140px)) 0 clamp(64px, 8vw, 128px); }
.notfound__links { margin-top: clamp(40px, 5vw, 72px); }
.about-next { padding-bottom: clamp(64px, 7vw, 112px); }
.about-next__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(27, 58, 47, .2); }
.about-next__link { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; }
.about-next__link + .about-next__link { padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid rgba(27, 58, 47, .2); }
.about-next__link span { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--forest-500); }
.about-next__link strong { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(24px, 2.4vw, 36px); font-weight: 300; color: var(--forest-800); }
.about-next__link strong svg { width: .6em; height: .6em; transition: transform .3s var(--ease-out); }
@media (hover: hover) { .about-next__link:hover strong svg { transform: translateX(6px); } }

/* --------------------------------------------------------------------------
   Contact: the delivery box on the left half (stays put), the ways to reach
   us and a mailto form on the right
   -------------------------------------------------------------------------- */
.contact-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-page__media { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--tint-tile); }
.contact-page__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 16% 50%; } /* keep the logo on the box in frame */
.contact-page__body { padding: calc(var(--header-h) + clamp(40px, 6vw, 96px)) clamp(24px, 6vw, 112px) clamp(64px, 7vw, 112px); }
.contact-page__title { margin-top: 16px; font-size: clamp(52px, 6.4vw, 104px); font-weight: 300; line-height: .96; letter-spacing: -.03em; color: var(--forest-800); }
.contact-page__lead { margin-top: 18px; font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-soft); }
.contact-page__channels { max-width: 36rem; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(27, 58, 47, .14); }
.contact-page__channels li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(27, 58, 47, .14); }
.contact-page__channels span { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-500); }
.contact-page__channels a, .contact-page__channels p { font-size: 16px; line-height: 1.5; color: var(--forest-800); }
.contact-page__channels a { display: inline-flex; align-items: center; gap: 8px; justify-self: start; border-bottom: 1px solid rgba(27, 58, 47, .3); transition: border-color .3s; }
@media (hover: hover) { .contact-page__channels a:hover { border-color: var(--forest-800); } }
.contact-page__channels a svg { width: 14px; height: 14px; }
.contact-form { display: grid; gap: 18px; max-width: 36rem; margin-top: clamp(48px, 5vw, 72px); }
.contact-form__title { font-size: clamp(22px, 1.8vw, 28px); font-weight: 300; color: var(--forest-800); }
.contact-form .btn { justify-self: start; margin-top: 4px; }
.contact-form__note { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 900px) {
  /* story: no sticky half; each block shows its own scene above its text */
  .story { display: block; }
  .story__media { display: none; }
  .story__text { padding: 0 20px; }
  .story__block--intro, .story__block--point { min-height: 0; }
  .story__block--intro { padding: calc(var(--header-h) + 32px) 0 32px; }
  .story__block--point { padding: 28px 0 36px; }
  .story__block--point:last-child { margin-bottom: 0; }
  .story__inline { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin: 28px 0 0; }
  .story__block--point .story__inline { order: -1; margin: 0 0 24px; }
  .story__block--point h3 { font-size: 28px; }
  /* cinema: the frame grows up from the bottom, under the title */
  .cinema__stage { place-items: end center; }
  .cinema__frame { width: min(100vw, calc((100vh - var(--header-h)) * .5625)); width: min(100vw, calc((100svh - var(--header-h)) * .5625)); height: auto; transform-origin: 50% 100%; }
  .cinema__title { top: calc(var(--header-h) + 24px); transform: translateY(calc((1 - var(--t, 1)) * -24px)); right: var(--gutter); }
  .about-next__inner { grid-template-columns: 1fr; }
  .about-next__link + .about-next__link { padding-left: 0; border-left: 0; border-top: 1px solid rgba(27, 58, 47, .2); }
  .contact-page { grid-template-columns: 1fr; }
  .contact-page__media { position: relative; height: auto; aspect-ratio: 4 / 3; margin-top: var(--header-h); }
  .contact-page__body { padding: 36px 20px 64px; }
  .contact-page__channels li { grid-template-columns: 1fr; gap: 6px; }
}

/* --------------------------------------------------------------------------
   Phone comfort: every tap target around 40px or more (invisible hit areas
   where the visible dot or button stays smaller), labels at least 12px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .scard__swatches { top: 0; left: 0; }
  .scard__swatches button { width: 30px; height: 36px; }
  .scard__swatches button::before { inset: 12px 9px; }
  .scard__add::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
  .scard__scene-btn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
  .phero__swatches { gap: 16px; }
  .phero__swatches button { position: relative; }
  .phero__swatches button::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
  .chip { height: 40px; }
  /* room chips: one row that swipes sideways instead of a lone chip on a second line */
  .shop__filters { align-self: stretch; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(50% - 50vw); padding: 2px calc(50vw - 50%); scrollbar-width: none; overscroll-behavior-x: contain; }
  .shop__filters::-webkit-scrollbar { display: none; }
  .shop__filters .chip { flex: none; }
  /* centred while they fit, scrollable from the first chip when they don't */
  .shop__filters .chip:first-child { margin-left: auto; }
  .shop__filters .chip:last-child { margin-right: auto; }
  .footer__col li + li { margin-top: 2px; }
  .footer__col a { display: inline-block; padding: 9px 0; }
  .header__logo { padding: 12px 10px; margin: -12px -10px; }
  .shop__all { padding-top: 12px; }
  .crumbs a { position: relative; }
  .crumbs a::after { content: ''; position: absolute; inset: -12px -6px; }
  .qty button { position: relative; }
  .qty button::after { content: ''; position: absolute; inset: -9px -6px; }
  .cart-item__remove { position: relative; }
  .cart-item__remove::after { content: ''; position: absolute; inset: -6px; }
  .eyebrow, .explode__hint, .contact-page__channels span, .know__list span, .site-menu__label, .site-menu__cat span { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Touch: no grey/blue flash on tap; a short press-in on buttons instead
   -------------------------------------------------------------------------- */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .btn, .ibtn, .chip, .menu-btn, .scard__scene-btn, .qty button, .pgallery__dots button { transition-property: transform, background-color, color, border-color, opacity; }
  .btn:active, .ibtn:active, .chip:active, .menu-btn:active { transform: scale(.96); }
  .site-menu__link:active, .footer__col a:active, .shop__all:active, .crumbs a:active, .about-next__link:active, .faq__item summary:active { opacity: .6; }
  .scard__img:active img { opacity: .85; }
}

/* --------------------------------------------------------------------------
   Cart drawer: the unlocked code, the total after it, free-delivery progress
   -------------------------------------------------------------------------- */
.cart-drawer__extra { margin: -6px 0 16px; }
.cart-drawer__discount, .cart-drawer__total { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: var(--forest-800); }
.cart-drawer__discount { color: var(--forest-500); }
.cart-drawer__discount strong { font-weight: 500; }
.cart-drawer__total { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(27, 58, 47, .1); }
.cart-drawer__total strong { font-size: 19px; font-weight: 500; }
.cart-drawer__discount[hidden], .cart-drawer__total[hidden], .cart-drawer__ship[hidden] { display: none; }
.cart-drawer__ship { position: relative; margin-top: 12px; padding-bottom: 10px; font-size: 13.5px; color: var(--ink-soft); }
.cart-drawer__ship::before, .cart-drawer__ship::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 2px; }
.cart-drawer__ship::before { right: 0; background: rgba(27, 58, 47, .1); }
.cart-drawer__ship::after { width: calc(var(--ship, 0) * 100%); background: var(--forest-500); transition: width .5s var(--ease-out); }

/* --------------------------------------------------------------------------
   Product pages, phone/tablet: buy bar at the bottom once the main button
   has scrolled away
   -------------------------------------------------------------------------- */
.buybar { display: none; }
@media (max-width: 1023px) {
  .buybar {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 150;
    display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px;
    border-radius: 999px; background: rgba(253, 253, 252, .97); box-shadow: 0 10px 34px rgba(20, 32, 26, .18), 0 0 0 1px rgba(27, 58, 47, .08);
    transform: translateY(calc(100% + 24px)); transition: transform .45s var(--ease-out);
  }
  .buybar.is-on { transform: none; }
  body.is-locked .buybar { transform: translateY(calc(100% + 24px)); }
  .buybar__info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .buybar__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 500; color: var(--forest-800); }
  .buybar__meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--ink-soft); }
  .buybar__btn { flex: none; height: 46px; padding: 0 20px; font-size: 14px; }
  .buybar__btn.is-added { background: var(--forest-500); }
}

/* --------------------------------------------------------------------------
   Product gallery, phone/tablet: one photo at a time, swipe, dots
   -------------------------------------------------------------------------- */
.pgallery img.is-zoomable { cursor: zoom-in; }
.pgallery__dots { display: none; }
@media (max-width: 1023px) {
  .pgallery { flex-direction: row; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pgallery::-webkit-scrollbar { display: none; }
  .pgallery__grid { display: contents; }
  .pgallery > .hero__media, .pgallery__tile { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
  .pgallery__tile { aspect-ratio: 4 / 5; }
  .pgallery__dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
  .pgallery__dots button { position: relative; width: 26px; height: 26px; }
  .pgallery__dots button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(27, 58, 47, .22); transition: background-color .3s, transform .3s var(--ease-out); }
  .pgallery__dots button.is-active::before { background: var(--forest-800); transform: scale(1.25); }
}

/* full screen photos */
.lightbox { position: fixed; inset: 0; z-index: 650; background: var(--tint-tile); opacity: 0; transition: opacity .3s ease; }
.lightbox.is-open { opacity: 1; }
.lightbox__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__item { flex: 0 0 100%; height: 100%; margin: 0; display: grid; place-items: center; padding: 64px 0 48px; scroll-snap-align: center; }
.lightbox__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__close { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; background: rgba(253, 253, 252, .92); border-color: rgba(27, 58, 47, .25); color: var(--forest-800); }
.lightbox__count { position: absolute; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 13px; letter-spacing: .12em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* --------------------------------------------------------------------------
   Phone held sideways: a slimmer header; product photos side by side, each
   the height of the screen
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --header-h: 58px; }
  .menu-btn, .header .ibtn { transform: scale(.84); }
  .phero { padding-top: calc(var(--header-h) + 14px); }
  .pgallery > .hero__media, .pgallery__tile { flex: 0 0 auto; width: auto; height: calc(100svh - var(--header-h) - 30px); aspect-ratio: 4 / 5; }
  .phero .hero__media.hero__media--photo { width: auto; }
  .pgallery__dots { display: none; }
}

/* phone product page: scent, price and the button straight under the
   name and slogan; the description follows them */
@media (max-width: 768px) {
  .buy-panel .hero__copy { display: flex; flex-direction: column; }
  .buy-panel .phero__swatches, .buy-panel .phero__price, .buy-panel .hero__actions { order: 1; }
  .buy-panel .phero__lead, .buy-panel .phero__text { order: 2; }
  .buy-panel .phero__swatches { margin-top: 22px; }
  .buy-panel .hero__actions { margin-top: 20px; }
  .buy-panel .phero__lead { margin-top: 30px; }
}