/* ============================================================
   AYGENCE — Storefront Design System
   Adapted from Reference Design (fresh.com system) with the
   AYGENCE brand palette: #231f20 · #f5f3f0 · #ffffff
   ============================================================ */
:root {
  /* ---------- FONT ----------
     Manrope for Latin; Thai glyphs fall through to Noto Sans Thai
     (Manrope has no Thai range), so TH mode renders in Noto Sans Thai
     while brand/product names stay in Manrope. */
  --font-primary: Manrope, "Noto Sans Thai", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ---------- BRAND COLORS ---------- */
  --ink: #231f20;          /* AYGENCE black */
  --paper: #ffffff;        /* white */
  --bone: #f5f3f0;         /* AYGENCE off-white */

  --gray-1: #555555;       /* secondary text */
  --gray-2: #7f7f7f;       /* link hover */
  --gray-4: #d8d8d8;       /* form borders / dividers */
  --gray-8: #f7f7f7;
  --gray-10: #4f4a4b;      /* button hover (ink-tinted) */
  --gray-11: #443f40;      /* button active */
  --gray-13: #f5f6f7;
  --gray-15: #999999;
  --gray-17: #bcbcbc;
  --gray-18: #c2c2c2;      /* nav border */
  --gray-ada: #767676;

  --alert-informational: #3860be;
  --alert-error: #e20c0b;
  --alert-success: #3c7356;

  --opacity-inactive: .4;
  --opacity-overlay: .8;

  /* ---------- RADIUS (buttons are always pills) ---------- */
  --border-radius-16: 16px;
  --border-radius-20: 20px;
  --border-radius-24: 24px;

  /* ---------- BORDERS ---------- */
  --border-nav: 1px solid var(--gray-18);
  --border-form-input: 1px solid var(--gray-4);
  --border-form-outline: 1px solid var(--alert-informational);
  --border-accordion-toggle: 1px solid var(--gray-4);
  --border-accordion-selected: 1px solid var(--ink);

  /* ---------- SPACING ---------- */
  --spacing-xs: 4px;  --spacing-sm: 6px;  --spacing-md: 8px;   --spacing-lg: 12px;
  --spacing-xl: 16px; --spacing-2xl: 20px; --spacing-3xl: 24px; --spacing-4xl: 32px;
  --spacing-5xl: 40px; --spacing-6xl: 48px; --spacing-7xl: 64px; --spacing-8xl: 80px;
  --spacing-9xl: 96px; --spacing-10xl: 128px;

  /* ---------- GRID ---------- */
  --container-max-width: 1920px;
  --container-padding-mobile: 16px;
  --container-padding-tablet: 32px;
  --container-padding-desktop: 72px;

  /* ---------- HEADER ---------- */
  --header-promo-height: 2.5rem;
  --header-nav-height: 3.75rem;
  --page-padding-top: calc(var(--header-promo-height) + var(--header-nav-height));

  /* ---------- MOTION ---------- */
  --motion-easy-both: cubic-bezier(.31, 0, .13, 1);
  --motion-easy-both-reverse: cubic-bezier(.87, 0, .69, 1);
  --motion-duration-fast: 150ms;
  --motion-duration-base: 300ms;
  --motion-duration-slow: 400ms;
  --motion-duration-slower: 600ms;
  --motion-duration-overlay: 1000ms;
  --motion-duration-reveal: 1500ms;
}
@media (min-width: 992px) {
  :root {
    --header-promo-height: 3rem;
    --header-nav-height: 6.875rem;
  }
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Prevent 100vw full-bleed sections from causing a horizontal wiggle
   on platforms with layout scrollbars (Windows / Android) */
html, body { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .005em;
  font-weight: var(--font-weight-regular);
  color: var(--ink);
  background: var(--paper);
  padding-top: var(--page-padding-top);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--bone); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #efefef; }
::-webkit-scrollbar-thumb { background: var(--ink); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display-xl, .display-l, .display-m, .heading-xl, .heading-l, .heading-m {
  font-weight: var(--font-weight-light);
  margin: 0;
  text-transform: lowercase;
}
.display-xl { font-size: 34px; line-height: 1.2; }
.display-l  { font-size: 32px; line-height: 1.25; }
.display-m  { font-size: 32px; line-height: 1.25; }
.heading-xl { font-size: 28px; line-height: 1.2; }
.heading-l  { font-size: 20px; line-height: 1.4; }
.heading-m  { font-size: 20px; line-height: 1.4; }
@media (min-width: 992px) {
  .display-xl { font-size: 96px; line-height: 1.2; letter-spacing: -.02em; }
  .display-l  { font-size: 80px; line-height: 1.2; letter-spacing: -.01em; }
  .display-m  { font-size: 72px; line-height: 1.2; letter-spacing: -.015em; }
  .heading-xl { font-size: 40px; line-height: 1.2; }
  .heading-l  { font-size: 32px; line-height: 1.25; }
  .heading-m  { font-size: 28px; line-height: 1.2; }
}
.body-l { font-size: 16px; line-height: 1.5; }
.body-s { font-size: 14px; line-height: 1.4; letter-spacing: .005em; }
.caption { font-size: 12px; line-height: 1.6; letter-spacing: .005em; }
@media (min-width: 992px) { .body-l { font-size: 20px; line-height: 1.4; letter-spacing: normal; } }

.label {
  font-size: 12px; line-height: 1.4; font-weight: var(--font-weight-regular);
  letter-spacing: .12em; text-transform: uppercase;
}
@media (min-width: 992px) { .label { font-size: 14px; } }
.text-muted { color: var(--gray-1); }

/* ============================================================
   LAYOUT
   ============================================================ */
.r-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}
@media (min-width: 847px) { .r-container { padding-inline: var(--container-padding-tablet); } }
@media (min-width: 992px) { .r-container { padding-inline: var(--container-padding-desktop); } }

.r-section { padding-block: var(--spacing-7xl); }
@media (min-width: 992px) { .r-section { padding-block: var(--spacing-9xl); } }
.r-section--tight { padding-block: var(--spacing-5xl); }
@media (min-width: 992px) { .r-section--tight { padding-block: var(--spacing-7xl); } }

.r-section__title { margin-bottom: var(--spacing-4xl); }
@media (min-width: 992px) { .r-section__title { margin-bottom: var(--spacing-6xl); } }

.r-full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ============================================================
   BUTTON — pill, ink-on-light / light-on-ink
   ============================================================ */
.r-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .75rem;
  min-height: 2.5rem;
  padding: 8px 24px;
  border: none;
  border-radius: var(--border-radius-20);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  font-size: .875rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-duration-base) var(--motion-easy-both),
              color var(--motion-duration-base) var(--motion-easy-both),
              border-color var(--motion-duration-base) var(--motion-easy-both),
              opacity var(--motion-duration-base) var(--motion-easy-both);
}
.r-button:hover  { background: var(--gray-10); }
.r-button:active { background: var(--gray-11); }
.r-button:disabled { background: rgba(35,31,32,var(--opacity-inactive)); pointer-events: none; }
.r-button:focus-visible { outline: 3px solid var(--alert-informational); outline-offset: 2px; }

.r-button--large { min-height: 3rem; padding: 10px 28px; border-radius: var(--border-radius-24); font-size: 1rem; }
.r-button--small { min-height: 2rem; padding: 6px 16px; border-radius: var(--border-radius-16); font-size: .75rem; }
.r-button--block { width: 100%; }

.r-button--secondary {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink);
}
.r-button--secondary:hover  { background: var(--gray-13); color: var(--gray-10); border-color: var(--gray-10); }
.r-button--secondary:active { background: #f0f0f0; color: var(--gray-11); border-color: var(--gray-11); }

.r-button--primary-light { background: var(--paper); color: var(--ink); }
.r-button--primary-light:hover { background: var(--bone); color: var(--gray-1); }

.r-button--secondary-light {
  background: transparent; color: var(--paper);
  border: 1px solid var(--paper);
}
.r-button--secondary-light:hover { background: var(--paper); color: var(--ink); }

/* ============================================================
   LINK
   ============================================================ */
.r-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 30%;
  transition: color var(--motion-duration-base) var(--motion-easy-both);
}
.r-link:hover  { color: var(--gray-2); }
.r-link:active { color: var(--gray-1); }
.r-link--no-underline { text-decoration: none; }
.r-link--light { color: var(--paper); }
.r-link:focus-visible { outline: 2px solid var(--alert-informational); outline-offset: 4px; }

/* ============================================================
   FORM — underline only, no boxes
   ============================================================ */
.r-form-input {
  width: 100%; padding: var(--spacing-lg) 0;
  background: transparent; border: 0;
  border-bottom: var(--border-form-input); border-radius: 0;
  font-size: 16px; color: var(--ink);
  transition: border-color var(--motion-duration-base) var(--motion-easy-both);
}
.r-form-input::placeholder { color: var(--gray-1); }
.r-form-input:focus { outline: 0; border-bottom: var(--border-form-outline); }
.r-form-input--light { border-bottom: 1px solid var(--paper); color: var(--paper); }
.r-form-input--light::placeholder { color: rgba(255,255,255,.75); }

.r-form-row { display: flex; align-items: flex-end; gap: var(--spacing-lg); }
.r-form-row .r-form-input { flex: 1; }
.r-form-arrow {
  background: none; border: 0; cursor: pointer; padding: var(--spacing-lg) 0;
  font-size: 18px; line-height: 1;
  transition: transform var(--motion-duration-base) var(--motion-easy-both);
}
.r-form-arrow:hover { transform: translateX(4px); }
.r-form-note { font-size: 12px; color: var(--gray-ada); margin-top: var(--spacing-md); }
.r-form-note--light { color: rgba(255,255,255,.75); }

/* ============================================================
   HEADER
   ============================================================ */
.r-header { position: fixed; inset: 0 0 auto; z-index: 50; }
.r-header__promo {
  height: var(--header-promo-height);
  display: grid; place-items: center;
  background: var(--ink); color: var(--bone);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding-inline: var(--spacing-xl); text-align: center;
}
.r-header__nav {
  height: var(--header-nav-height);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: var(--container-max-width); margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  background: var(--paper); border-bottom: var(--border-nav);
}
@media (min-width: 847px) { .r-header__nav { padding-inline: var(--container-padding-tablet); } }
@media (min-width: 992px) { .r-header__nav { padding-inline: var(--container-padding-desktop); } }

.r-header__links { display: none; align-items: center; gap: var(--spacing-3xl); }
@media (min-width: 992px) { .r-header__links { display: flex; } }
.r-header__link {
  font-size: 14px; letter-spacing: .02em; text-decoration: none; color: var(--ink);
  padding-block: 4px; border-bottom: 1px solid transparent;
  transition: color var(--motion-duration-base) var(--motion-easy-both),
              border-color var(--motion-duration-base) var(--motion-easy-both);
}
.r-header__link:hover { color: var(--gray-2); border-bottom-color: var(--gray-2); }
.r-header__link.is-active { border-bottom-color: var(--ink); }

.r-header__logo { justify-self: center; display: block; }
.r-header__logo img { height: 17px; width: auto; }
@media (min-width: 992px) { .r-header__logo img { height: 22px; } }

.r-header__actions { justify-self: end; display: flex; align-items: center; gap: var(--spacing-md); }
.r-header__button {
  position: relative;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--ink);
  transition: color var(--motion-duration-base) var(--motion-easy-both);
}
.r-header__button:hover { color: var(--gray-2); }
.r-header__button svg { width: 20px; height: 20px; }
.r-header__burger { justify-self: start; }
@media (min-width: 992px) { .r-header__burger { display: none; } }

.r-cart-count {
  position: absolute; top: 3px; right: 1px;
  min-width: 15px; height: 15px; padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-size: 10px; font-weight: var(--font-weight-semibold); line-height: 1;
  border-radius: 999px;
}
.r-cart-count:empty { display: none; }

/* ---- Language switcher ---- */
.r-lang { display: none; align-items: center; }
@media (min-width: 992px) { .r-lang { display: inline-flex; margin-right: var(--spacing-md); } }
.r-lang__btn {
  background: none; border: 0; cursor: pointer;
  padding: 4px 6px; font-size: 11px; letter-spacing: .08em;
  color: var(--gray-ada);
  transition: color var(--motion-duration-base) var(--motion-easy-both);
}
.r-lang__btn:hover { color: var(--ink); }
.r-lang__btn.is-active {
  color: var(--ink); font-weight: var(--font-weight-semibold);
  text-decoration: underline; text-underline-offset: 30%;
}
.r-lang__sep { color: var(--gray-4); font-size: 11px; }
.r-lang--menu { display: inline-flex; margin-top: var(--spacing-3xl); }
.r-lang--menu .r-lang__btn { font-size: 14px; padding: 6px 10px; }

/* ---- Mobile menu drawer ---- */
.r-drawer {
  position: fixed; inset: 0; z-index: 90;
  visibility: hidden; pointer-events: none;
}
.r-drawer.is-open { visibility: visible; pointer-events: auto; }
.r-drawer__overlay {
  position: absolute; inset: 0;
  background: rgba(255,255,255,var(--opacity-overlay));
  opacity: 0;
  transition: opacity var(--motion-duration-overlay) var(--motion-easy-both);
}
.r-drawer.is-open .r-drawer__overlay { opacity: 1; }
.r-drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(420px, 88vw);
  background: var(--paper);
  padding: var(--spacing-6xl) var(--spacing-4xl);
  transform: translateX(-100%);
  transition: transform var(--motion-duration-slower) var(--motion-easy-both);
  overflow-y: auto;
}
.r-drawer.is-open .r-drawer__panel { transform: translateX(0); }
.r-drawer__close {
  position: absolute; top: var(--spacing-xl); right: var(--spacing-xl);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1;
}
.r-menu__panel { display: flex; flex-direction: column; }
.r-menu__logo { display: block; margin-top: var(--spacing-md); }
.r-menu__logo img { height: 18px; width: auto; }
.r-menu__contact { margin-top: var(--spacing-5xl); flex: none; }
.r-drawer__nav { display: grid; gap: var(--spacing-xl); margin-top: var(--spacing-5xl); flex: 1; align-content: start; }
.r-drawer__nav a {
  font-size: 32px; font-weight: var(--font-weight-light); text-transform: lowercase;
  text-decoration: none; color: var(--ink);
}
.r-drawer__nav a:hover { color: var(--gray-2); }

/* ---- Cart drawer (right side) ---- */
.r-cart__panel {
  left: auto; right: 0;
  transform: translateX(100%);
  display: flex; flex-direction: column;
  padding: var(--spacing-5xl) var(--spacing-4xl);
}
.r-drawer.is-open .r-cart__panel { transform: translateX(0); }
.r-cart__title { margin: 0 0 var(--spacing-4xl); }
.r-cart__items { flex: 1; overflow-y: auto; display: grid; gap: var(--spacing-3xl); align-content: start; }
.r-cart__empty { color: var(--gray-1); padding-block: var(--spacing-5xl); text-align: center; }
.r-cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--spacing-xl); align-items: center; }
.r-cart-item__img { width: 72px; aspect-ratio: 707/1000; object-fit: cover; background: var(--bone); }
.r-cart-item__name { font-size: 14px; margin: 0 0 2px; text-transform: lowercase; }
.r-cart-item__meta { font-size: 12px; color: var(--gray-1); margin: 0 0 var(--spacing-md); }
.r-cart-item__remove {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-size: 12px; color: var(--gray-ada); text-decoration: underline; text-underline-offset: 30%;
}
.r-cart-item__remove:hover { color: var(--ink); }
.r-cart-item__price { font-size: 14px; }
.r-cart__footer { border-top: 1px solid var(--ink); padding-top: var(--spacing-3xl); margin-top: var(--spacing-3xl); }
.r-cart__subtotal { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: var(--spacing-md); }
.r-cart__shipnote { font-size: 12px; color: var(--gray-ada); margin: 0 0 var(--spacing-xl); }

/* ---- Quantity stepper ---- */
.r-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--gray-4);
}
.r-qty__btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; font-size: 16px;
  transition: background-color var(--motion-duration-fast) var(--motion-easy-both);
}
.r-qty__btn:hover { background: var(--gray-8); }
.r-qty__value { min-width: 48px; text-align: center; font-size: 14px; }
.r-qty--small .r-qty__btn { width: 28px; height: 28px; font-size: 13px; }
.r-qty--small .r-qty__value { min-width: 32px; font-size: 13px; }

/* ============================================================
   HERO (split: image + product on bone)
   ============================================================ */
.r-hero { background: var(--bone); }
.r-hero__layout { display: grid; grid-template-columns: 1fr; }
@media (min-width: 847px) { .r-hero__layout { grid-template-columns: 7fr 5fr; min-height: 72vh; } }
.r-hero__image-wrap { overflow: hidden; }
.r-hero__image { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.r-hero__panel {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--spacing-xl);
  padding: var(--spacing-6xl) var(--container-padding-mobile) var(--spacing-7xl);
}
@media (min-width: 847px) { .r-hero__panel { padding: var(--spacing-7xl) var(--spacing-6xl); } }
@media (min-width: 1200px) { .r-hero__panel { padding-inline: var(--spacing-8xl); } }
.r-hero__product-img { width: min(62%, 380px); align-self: center; mix-blend-mode: multiply; }
.r-hero__title { max-width: 12ch; }
.r-hero__meta { display: flex; flex-direction: column; gap: var(--spacing-sm); }

/* ============================================================
   LANDING HERO — rosemary pattern background + product
   ============================================================ */
.r-hero-landing {
  position: relative;
  background: var(--paper) url("../img/hero-rosemary-pattern.jpg") right center / cover no-repeat;
  min-height: 82vh;
  display: flex; align-items: center;
}
.r-hero-landing::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.6) 42%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
@media (max-width: 846px) {
  .r-hero-landing::before {
    background: linear-gradient(180deg,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 32%,
      rgba(255,255,255,.35) 55%, rgba(255,255,255,0) 78%);
  }
}
.r-hero-landing__inner {
  position: relative; width: 100%;
  display: grid; gap: var(--spacing-5xl); align-items: center;
  padding-block: var(--spacing-7xl);
}
@media (min-width: 847px) { .r-hero-landing__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.r-hero-landing__copy { display: grid; gap: var(--spacing-xl); justify-items: start; }
.r-hero-landing__title { max-width: 12ch; }
.r-hero-landing__figure {
  display: grid; gap: var(--spacing-xl); justify-items: center;
}
.r-hero-landing__product {
  max-height: min(62vh, 620px); width: auto; max-width: 82%;
}

/* ============================================================
   LANDING PRODUCT SECTIONS (PDF pages 2–5)
   ============================================================ */
.r-lp-product {
  display: grid; gap: var(--spacing-5xl); align-items: center;
  padding-block: var(--spacing-7xl);
  border-top: 1px solid var(--gray-4);
}
.r-lp-product:first-of-type { border-top: 0; }
@media (min-width: 992px) {
  .r-lp-product { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--spacing-8xl); padding-block: var(--spacing-9xl); }
  .r-lp-product--flip .r-lp-product__media { order: 2; }
  .r-lp-product--flip .r-lp-product__info { order: 1; }
}
.r-lp-product__media { display: grid; gap: var(--spacing-lg); justify-items: center; }
.r-lp-product__main {
  position: relative; overflow: hidden; background: var(--bone);
  border: 0; padding: 0; cursor: pointer; display: block;
  width: 100%; max-width: 540px;
}
.r-lp-product__main img { width: 100%; aspect-ratio: 707 / 1000; object-fit: cover; }
.r-lp-product__thumbs { display: flex; gap: var(--spacing-md); width: 100%; max-width: 540px; }
.r-lp-product__thumb {
  flex: 1; padding: 0; cursor: pointer; background: var(--bone);
  border: 1.5px solid transparent;
  transition: border-color var(--motion-duration-base) var(--motion-easy-both);
}
.r-lp-product__thumb img { width: 100%; aspect-ratio: 707 / 1000; object-fit: cover; }
.r-lp-product__thumb.is-active { border-color: var(--ink); }
.r-lp-product__thumb:hover { border-color: var(--gray-ada); }
.r-lp-product__info { display: grid; gap: var(--spacing-xl); align-content: center; justify-items: start; }
.r-lp-product__title { text-transform: lowercase; }
.r-lp-product__desc { margin: 0; color: var(--gray-1); max-width: 52ch; }
.r-lp-product__price { font-size: 24px; font-weight: var(--font-weight-light); margin: 0; }
.r-lp-product__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-xl); align-items: center; }

/* ============================================================
   FLOATING CONTACT BUTTON (FAB)
   ============================================================ */
.r-fab { position: fixed; right: var(--spacing-3xl); bottom: var(--spacing-3xl); z-index: 80; }
.r-fab__btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--bone);
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--motion-duration-base) var(--motion-easy-both),
              background-color var(--motion-duration-base) var(--motion-easy-both);
}
.r-fab__btn:hover { transform: scale(1.07); background: var(--gray-10); }
.r-fab__btn svg { width: 24px; height: 24px; }
.r-fab__icon-close { display: none; font-size: 26px; font-weight: 300; line-height: 1; }
.r-fab.is-open .r-fab__icon-chat { display: none; }
.r-fab.is-open .r-fab__icon-close { display: block; }
.r-fab__menu {
  position: absolute; right: 0; bottom: 72px;
  display: grid; gap: var(--spacing-md); justify-items: end;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--motion-duration-base) var(--motion-easy-both),
              transform var(--motion-duration-base) var(--motion-easy-both),
              visibility var(--motion-duration-base);
}
.r-fab.is-open .r-fab__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.r-fab__item {
  display: inline-flex; align-items: center; gap: var(--spacing-lg);
  background: var(--ink); color: var(--bone);
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 10px 20px 10px 14px;
  font-size: 13px; letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--motion-duration-base) var(--motion-easy-both),
              color var(--motion-duration-base) var(--motion-easy-both);
}
.r-fab__item:hover { background: var(--paper); color: var(--ink); }
.r-fab__item svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 543px) { .r-fab { right: var(--spacing-xl); bottom: var(--spacing-xl); } }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.r-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-4xl) var(--spacing-xl); }
@media (min-width: 847px) { .r-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-6xl) var(--spacing-4xl); } }
@media (min-width: 992px) { .r-product-grid { grid-template-columns: repeat(4, 1fr); } }
.r-product-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 992px) { .r-product-grid--two { grid-template-columns: repeat(2, 1fr); } }

.r-product-card { text-align: center; background: transparent; }
.r-product-card__badge {
  display: block; margin-bottom: var(--spacing-lg);
  font-size: 12px; line-height: 1.4; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-1);
  min-height: 1.4em;
}
@media (min-width: 992px) { .r-product-card__badge { font-size: 14px; } }
.r-product-card__image-container { display: grid; overflow: hidden; background: var(--bone); }
.r-product-card__picture { grid-area: 1 / 1; position: relative; }
.r-product-card__picture img {
  width: 100%; aspect-ratio: 707 / 1000; object-fit: cover;
  transition: opacity var(--motion-duration-slow) ease, visibility var(--motion-duration-base) ease-in;
}
.r-product-card__picture:nth-of-type(2) { opacity: 0; visibility: hidden; transition: opacity var(--motion-duration-slow) ease, visibility var(--motion-duration-base) ease-in; }
.r-product-card:hover .r-product-card__picture:first-of-type  { opacity: 0; visibility: hidden; }
.r-product-card:hover .r-product-card__picture:nth-of-type(2) { opacity: 1; visibility: visible; }
.r-product-card__link { text-decoration: none; color: inherit; display: block; }
.r-product-card__title {
  margin: var(--spacing-2xl) 0 0;
  font-size: 16px; line-height: 1.4; font-weight: var(--font-weight-regular);
  text-transform: lowercase;
}
@media (min-width: 992px) { .r-product-card__title { font-size: 22px; margin-top: var(--spacing-3xl); } }
.r-product-card__description { margin: var(--spacing-xs) 0 0; font-size: 13px; line-height: 1.4; color: var(--gray-1); }
@media (min-width: 992px) { .r-product-card__description { font-size: 16px; } }
.r-product-card__price { margin: var(--spacing-md) 0 var(--spacing-xl); font-size: 15px; }
@media (min-width: 992px) { .r-product-card__price { font-size: 16px; } }

/* ============================================================
   JUMBO (split title + product feature, zigzag)
   ============================================================ */
.r-jumbo { display: grid; gap: var(--spacing-5xl); align-items: center; }
@media (min-width: 992px) {
  .r-jumbo { grid-template-columns: 1fr 1fr; gap: var(--spacing-8xl); }
  .r-jumbo--flip .r-jumbo__title-wrap { order: 2; text-align: right; }
  .r-jumbo--flip .r-jumbo__card { order: 1; }
}
.r-jumbo__title { max-width: 14ch; }
@media (min-width: 992px) { .r-jumbo--flip .r-jumbo__title { margin-left: auto; } }
.r-jumbo__card { max-width: 480px; margin-inline: auto; width: 100%; }

/* ============================================================
   CATEGORY / COLLECTION CAROUSEL
   ============================================================ */
.r-cat-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4xl) var(--spacing-xl);
}
@media (min-width: 992px) {
  .r-cat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-4xl); }
  .r-cat-row--wide { grid-template-columns: repeat(2, minmax(0, 520px)); justify-content: center; }
}
.r-cat-tile { text-decoration: none; color: inherit; display: block; }
.r-cat-row--center .r-cat-tile { text-align: center; }
.r-cat-tile--contain .r-cat-tile__image-wrap { background: var(--paper); }
.r-cat-tile--contain .r-cat-tile__image-wrap img { object-fit: contain; background: var(--paper); }
.r-cat-tile__image-wrap { overflow: hidden; background: var(--bone); }
.r-cat-tile__image-wrap img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%;
  transition: transform var(--motion-duration-reveal) var(--motion-easy-both);
}
.r-cat-tile:hover .r-cat-tile__image-wrap img { transform: scale(1.04); }
.r-cat-tile__label { display: block; margin-top: var(--spacing-xl); }

/* ============================================================
   PRODUCT STRIP (image + name only, centered)
   ============================================================ */
.r-product-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--spacing-5xl) var(--spacing-3xl);
}
.r-product-strip__tile {
  width: min(42vw, 250px);
  display: block; text-decoration: none; color: inherit; text-align: center;
}
.r-product-strip__image-wrap { overflow: hidden; background: var(--bone); }
.r-product-strip__image-wrap img {
  width: 100%; aspect-ratio: 707 / 1000; object-fit: cover;
  transition: transform var(--motion-duration-reveal) var(--motion-easy-both);
}
.r-product-strip__tile:hover .r-product-strip__image-wrap img { transform: scale(1.04); }
.r-product-strip__name {
  display: block; margin-top: var(--spacing-xl);
  font-size: 15px; text-transform: lowercase;
}
@media (min-width: 992px) { .r-product-strip__name { font-size: 18px; } }

/* ---- Centered section helper ---- */
.r-section--center { text-align: center; }
.r-section--center .r-section__title { margin-inline: auto; }

/* ============================================================
   STORY BLOCK (full-bleed dark)
   ============================================================ */
.r-story__image { width: 100%; max-height: 72vh; object-fit: cover; object-position: top center; }
.r-story__content {
  background: var(--ink); color: var(--bone);
  padding: var(--spacing-7xl) var(--container-padding-mobile);
}
@media (min-width: 992px) { .r-story__content { padding: var(--spacing-8xl) var(--container-padding-desktop); } }
.r-story__title { color: var(--bone); max-width: 20ch; }
.r-story__row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--spacing-xl); margin-top: var(--spacing-4xl);
}
.r-story__subtitle { margin: 0; color: rgba(245,243,240,.85); }

/* ============================================================
   PDP — product detail page
   ============================================================ */
.r-pdp { display: grid; gap: var(--spacing-6xl); }
@media (min-width: 992px) {
  .r-pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-8xl); align-items: start; }
}

.r-pdp__gallery { display: grid; gap: var(--spacing-xl); }
@media (min-width: 992px) { .r-pdp__gallery { grid-template-columns: 88px 1fr; align-items: start; } }
.r-pdp__thumbs { display: flex; gap: var(--spacing-md); order: 2; }
@media (min-width: 992px) { .r-pdp__thumbs { flex-direction: column; order: 0; } }
.r-pdp__thumb {
  width: 72px; padding: 0; cursor: pointer; background: var(--bone);
  border: 1.5px solid transparent;
  transition: border-color var(--motion-duration-base) var(--motion-easy-both);
}
@media (min-width: 992px) { .r-pdp__thumb { width: 88px; } }
.r-pdp__thumb img { width: 100%; aspect-ratio: 707/1000; object-fit: cover; }
.r-pdp__thumb.is-active { border-color: var(--ink); }
.r-pdp__thumb:hover { border-color: var(--gray-ada); }

.r-pdp__main {
  position: relative; overflow: hidden; background: var(--bone); cursor: pointer; border: 0; padding: 0;
}
.r-pdp__main img { width: 100%; aspect-ratio: 707/1000; object-fit: cover; }
.r-pdp__main-hint {
  position: absolute; bottom: var(--spacing-xl); right: var(--spacing-xl);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.85); color: var(--gray-1);
  padding: 6px 12px; border-radius: 999px; pointer-events: none;
}

.r-pdp__info { display: grid; gap: var(--spacing-xl); align-content: start; }
.r-pdp__collection { margin: 0; }
.r-pdp__title { margin: 0; }
.r-pdp__size { margin: 0; color: var(--gray-1); font-size: 14px; }
.r-pdp__price { font-size: 28px; font-weight: var(--font-weight-light); margin: 0; }
.r-pdp__desc { margin: 0; color: var(--gray-1); }
.r-pdp__buy { display: flex; flex-wrap: wrap; gap: var(--spacing-xl); align-items: center; margin-top: var(--spacing-md); }
.r-pdp__buy .r-button { flex: 1; min-width: 200px; }
.r-pdp__shipnote { font-size: 13px; color: var(--gray-ada); text-align: center; margin: 0; }

/* Sold-out / notify me */
.r-pdp__soldout { font-size: 13px; color: var(--alert-error); margin: 0; }

/* ---- Accordion ---- */
.r-accordion { border-top: var(--border-accordion-toggle); margin-top: var(--spacing-3xl); }
.r-accordion__item { border-bottom: var(--border-accordion-toggle); }
.r-accordion__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: var(--spacing-2xl) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  transition: color var(--motion-duration-base) var(--motion-easy-both);
}
.r-accordion__toggle:hover { color: var(--gray-2); }
.r-accordion__icon { font-size: 16px; font-weight: 300; transition: transform var(--motion-duration-slow) var(--motion-easy-both); }
.r-accordion__item.is-open .r-accordion__icon { transform: rotate(45deg); }
.r-accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-duration-slow) var(--motion-easy-both);
}
.r-accordion__item.is-open .r-accordion__panel { grid-template-rows: 1fr; }
.r-accordion__panel-inner { overflow: hidden; }
.r-accordion__content { padding: 0 0 var(--spacing-3xl); font-size: 14px; line-height: 1.7; color: var(--gray-1); }
.r-accordion__content ul { margin: 0; padding-left: 1.2em; }
.r-accordion__content li { margin-bottom: 2px; }

.r-ingredients-disclaimer {
  font-size: 12px; line-height: 1.6; color: var(--gray-ada);
  border-top: 1px solid var(--gray-4);
  padding-top: var(--spacing-lg); margin-top: var(--spacing-xl);
}

/* ---- Fragrance pyramid ---- */
.r-pyramid { display: grid; gap: var(--spacing-sm); }
.r-pyramid__row {
  display: grid; grid-template-columns: 84px 1fr; gap: var(--spacing-xl);
  background: var(--bone); padding: var(--spacing-lg) var(--spacing-xl);
  font-size: 13px;
}
.r-pyramid__stage { letter-spacing: .12em; text-transform: uppercase; color: var(--gray-ada); font-size: 11px; align-self: center; }

/* ---- TESTED + Reviews ---- */
.r-tested {
  border-top: 1px solid var(--gray-4);
  padding-top: var(--spacing-5xl);
  display: grid; gap: var(--spacing-5xl);
}
@media (min-width: 992px) { .r-tested { grid-template-columns: 1fr 1fr; } }

/* Reviews — score card, no stars (waiting for backend data) */
.r-reviews__score { display: flex; align-items: baseline; gap: var(--spacing-xl); margin-bottom: var(--spacing-4xl); }
.r-reviews__num { font-size: 56px; font-weight: var(--font-weight-light); line-height: 1; }
.r-reviews__of { color: var(--gray-1); font-size: 14px; }
.r-reviews__bars { display: grid; gap: var(--spacing-md); max-width: 480px; }
.r-review-bar { display: grid; grid-template-columns: 20px 1fr 32px; align-items: center; gap: var(--spacing-xl); font-size: 13px; color: var(--gray-1); }
.r-review-bar__track { height: 6px; background: #e8e5e0; }
.r-review-bar__fill { height: 100%; background: var(--ink); transition: width var(--motion-duration-slower) var(--motion-easy-both); }
.r-tested__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-lg); }
.r-tested__list li { display: flex; gap: var(--spacing-lg); align-items: baseline; font-size: 15px; }
.r-tested__check { color: var(--alert-success); }
.r-tested__pending { color: var(--gray-ada); }
.r-tested__note { font-size: 13px; color: var(--gray-ada); }

/* ============================================================
   PAGE HERO (small, for sub-pages)
   ============================================================ */
.r-page-hero { background: var(--bone); padding: var(--spacing-7xl) 0; }
@media (min-width: 992px) { .r-page-hero { padding: var(--spacing-8xl) 0; } }
.r-page-hero__eyebrow { margin-bottom: var(--spacing-xl); color: var(--gray-1); }

/* ---- Shop filters ---- */
.r-filter-row { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-bottom: var(--spacing-5xl); }
.r-filter {
  padding: 8px 20px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--gray-4);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  transition: all var(--motion-duration-base) var(--motion-easy-both);
}
.r-filter:hover { border-color: var(--ink); }
.r-filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   CONTACT
   ============================================================ */
.r-contact { display: grid; gap: var(--spacing-6xl); }
@media (min-width: 992px) { .r-contact { grid-template-columns: 1fr 1fr; gap: var(--spacing-8xl); align-items: center; } }
.r-contact__card {
  background: var(--bone); text-align: center;
  padding: var(--spacing-7xl) var(--spacing-4xl);
  display: grid; justify-items: center; gap: var(--spacing-xl);
}
.r-contact__card--full { width: 100%; padding: var(--spacing-8xl) var(--spacing-4xl); }
.r-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-xl); }
.r-contact__list a { text-decoration: none; }
.r-contact__list a:hover { text-decoration: underline; text-underline-offset: 30%; }
.r-contact__label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-ada); margin-bottom: 2px; }

/* Contact info — full-width row */
.r-contact-info {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--spacing-5xl);
  text-align: center;
}
@media (min-width: 847px) { .r-contact-info { grid-template-columns: repeat(3, 1fr); } }
.r-contact-info a { text-decoration: none; }
.r-contact-info a:hover { text-decoration: underline; text-underline-offset: 30%; }

/* ============================================================
   TRACKING
   ============================================================ */
.r-track { max-width: 640px; }
.r-track__form { display: grid; gap: var(--spacing-3xl); margin-block: var(--spacing-5xl); }
.r-timeline { list-style: none; margin: var(--spacing-6xl) 0 0; padding: 0; position: relative; }
.r-timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 1px; background: var(--gray-4);
}
.r-timeline__step { position: relative; padding: 0 0 var(--spacing-4xl) var(--spacing-5xl); }
.r-timeline__step:last-child { padding-bottom: 0; }
.r-timeline__dot {
  position: absolute; left: 0; top: 4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--gray-4);
}
.r-timeline__step.is-done .r-timeline__dot { background: var(--ink); border-color: var(--ink); }
.r-timeline__step.is-current .r-timeline__dot { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); background: var(--ink); }
.r-timeline__title { font-size: 15px; margin: 0; }
.r-timeline__meta { font-size: 13px; color: var(--gray-ada); margin: 2px 0 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.r-footer { background: var(--ink); color: var(--bone); margin-top: var(--spacing-9xl); }
.r-footer__inner {
  max-width: var(--container-max-width); margin-inline: auto;
  padding: var(--spacing-7xl) var(--container-padding-mobile) var(--spacing-4xl);
  display: grid; gap: var(--spacing-6xl);
}
@media (min-width: 847px) { .r-footer__inner { grid-template-columns: repeat(2, 1fr); padding-inline: var(--container-padding-tablet); } }
@media (min-width: 992px) { .r-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; padding-inline: var(--container-padding-desktop); } }
.r-footer__col-title {
  font-size: 12px; line-height: 1.6; font-weight: var(--font-weight-regular);
  letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 var(--spacing-3xl);
  padding-bottom: var(--spacing-md); border-bottom: 1px solid rgba(245,243,240,.3);
}
.r-footer__col a {
  display: block; margin-bottom: var(--spacing-md);
  font-size: 14px; line-height: 1.4; letter-spacing: .005em;
  color: var(--bone); text-decoration: none;
}
.r-footer__col a:hover { text-decoration: underline; text-underline-offset: 30%; }
.r-footer__newsletter-copy { font-size: 14px; color: rgba(245,243,240,.85); margin: 0 0 var(--spacing-3xl); max-width: 34ch; }
.r-footer__bottom {
  max-width: var(--container-max-width); margin-inline: auto;
  padding: 0 var(--container-padding-mobile) var(--spacing-4xl);
}
@media (min-width: 847px) { .r-footer__bottom { padding-inline: var(--container-padding-tablet); } }
@media (min-width: 992px) { .r-footer__bottom { padding-inline: var(--container-padding-desktop); } }
.r-footer__wordmark { width: 100%; margin-top: var(--spacing-5xl); opacity: .95; }
.r-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--spacing-xl); justify-content: space-between;
  font-size: 12px; color: rgba(245,243,240,.6);
  border-top: 1px solid rgba(245,243,240,.2);
  padding-top: var(--spacing-3xl); margin-top: var(--spacing-5xl);
}

/* ============================================================
   PLACEHOLDER IMAGE BLOCK
   ============================================================ */
.is-placeholder { position: relative; }
.is-placeholder::after {
  content: attr(data-ph-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--spacing-xl);
  background: var(--bone);
  color: var(--gray-ada);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  border: 1px dashed var(--gray-4);
}

/* ============================================================
   TOAST
   ============================================================ */
.r-toast {
  position: fixed; bottom: var(--spacing-4xl); left: 50%;
  transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bone);
  font-size: 13px; letter-spacing: .04em;
  padding: 12px 24px; border-radius: 999px;
  opacity: 0; pointer-events: none; z-index: 100;
  transition: opacity var(--motion-duration-slow) var(--motion-easy-both),
              transform var(--motion-duration-slow) var(--motion-easy-both);
}
.r-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   SCROLL REVEAL SYSTEM
   ============================================================ */
[data-animation-hidden] { opacity: 0; }
[data-animation-visible] {
  animation-duration: var(--motion-duration-reveal);
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: var(--motion-easy-both);
}
[data-animation-visible][data-animation-type="fade-in"]        { animation-name: fade; animation-timing-function: ease-in-out; }
[data-animation-visible][data-animation-type="fade-up-in"]     { animation-name: fade-up; }
[data-animation-visible][data-animation-type="fade-down-in"]   { animation-name: fade-down; }
[data-animation-visible][data-animation-type="fade-left-in"]   { animation-name: fade-left; }
[data-animation-visible][data-animation-type="fade-right-in"]  { animation-name: fade-right; }
[data-animation-visible][data-animation-type="reveal-up-in"]   { animation-name: reveal-up; }
[data-animation-visible][data-animation-type="reveal-down-in"] { animation-name: reveal-down; }
[data-animation-visible][data-animation-type="reveal-left-in"] { animation-name: reveal-left; }
[data-animation-visible][data-animation-type="reveal-right-in"]{ animation-name: reveal-right; }
[data-animation-visible][data-animation-type="scale-in"]       { animation-name: scale-in; }

@keyframes fade       { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up    { from { transform: translateY(12%);  opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fade-down  { from { transform: translateY(-12%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fade-left  { from { transform: translateX(8%);   opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fade-right { from { transform: translateX(-8%);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes reveal-up    { from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); opacity: 1; } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; } }
@keyframes reveal-down  { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 1; } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; } }
@keyframes reveal-right { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1; } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; } }
@keyframes reveal-left  { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); opacity: 1; } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; } }
@keyframes scale-in   { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animation-hidden] { opacity: 1; }
}