/* VitaDry — design tokens & global styles */

:root {
  /* Color tokens */
  --bg: #FBF6EC;           /* warm cream */
  --bg-elev: #FFFFFF;
  --bg-soft: #F4ECDB;
  --ink: #1B2A1E;          /* deep forest near-black */
  --ink-soft: #3F4E40;
  --ink-mute: #5C6A5D;   /* darkened for WCAG AA 4.5:1 contrast on cream bg (was #6D7B6E ≈ 4.0:1) */
  --line: #E4DDC9;
  --line-soft: #EFE8D6;

  --brand: #6FAE5C;        /* apple green from favicon */
  --brand-deep: #4F8E3F;
  --brand-soft: #DDEFD3;
  --brand-cream: #EFF8E7;

  /* Fruit accent palette */
  --berry: #D63B5C;
  --berry-soft: #FFE4EA;
  --citrus: #FF6B3D;
  --citrus-soft: #FFE2D4;
  --sun: #F4A623;
  --sun-soft: #FFF0D2;
  --plum: #5B3A8F;
  --plum-soft: #E2D7F0;

  /* Spacing */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-full: 999px;

  /* Type */
  --ff-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ff-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-mono: 'DM Mono', ui-monospace, monospace;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(27,42,30,0.06), 0 1px 3px rgba(27,42,30,0.04);
  --shadow-md: 0 6px 18px rgba(27,42,30,0.08), 0 2px 6px rgba(27,42,30,0.04);
  --shadow-lg: 0 24px 60px rgba(27,42,30,0.16), 0 6px 16px rgba(27,42,30,0.08);

  --max-w: 1320px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on, "cv11" on;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

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

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 720px) {
  .container { padding: 0 16px; }
}

/* === BUTTONS — premium 2026 style === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 180ms ease,
              color 180ms ease,
              box-shadow 220ms ease,
              border-color 180ms ease;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 4px 14px rgba(27,42,30,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-primary:hover {
  background: #0E1A11;
  box-shadow: 0 10px 24px rgba(27,42,30,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
  transform: translateY(-2px);
}

/* === BRAND CTA — the main "buy" button === */
.btn-brand {
  background: linear-gradient(180deg, #6FAE5C 0%, #5BAA48 100%);
  color: #FFF;
  box-shadow:
    0 6px 16px rgba(63,117,48,0.30),
    0 2px 4px rgba(63,117,48,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
  font-weight: 800;
}
.btn-brand:hover {
  background: linear-gradient(180deg, #7BBF65 0%, #5BAA48 100%);
  box-shadow:
    0 14px 32px rgba(63,117,48,0.42),
    0 4px 8px rgba(63,117,48,0.20),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transform: translateY(-2px);
}
.btn-brand:active {
  transform: translateY(0);
  box-shadow:
    0 4px 10px rgba(63,117,48,0.30),
    inset 0 2px 4px rgba(0,0,0,0.10);
}

.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
  background: rgba(255,255,255,0.40);
  backdrop-filter: blur(4px);
  font-weight: 700;
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  box-shadow: 0 8px 20px rgba(27,42,30,0.22);
  transform: translateY(-2px);
}

.btn-ghost {
  color: var(--ink);
}
.btn-ghost:hover {
  background: rgba(27,42,30,0.06);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 18px 34px;
  font-size: 17px;
  border-radius: 16px;
  font-weight: 800;
}
.btn-sm {
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 10px;
}

/* Subtle "shine" effect on brand hover — a quick light sweep */
.btn-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
  opacity: 0;
  transition: opacity 320ms ease, transform 480ms ease;
  transform: translateX(-100%);
  pointer-events: none;
}
.btn-brand:hover::before {
  opacity: 1;
  transform: translateX(100%);
}

/* === FORM === */
.input, .select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--bg-elev);
  font-size: 15px;
  transition: border-color 140ms;
}
.input:focus, .select:focus { outline: none; border-color: var(--brand); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

/* === MISC === */
.eyebrow {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: var(--brand-cream);
  color: var(--brand-deep);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.divider {
  height: 1px;
  background: var(--line);
}

/* Scrolling promo */
@keyframes scroll-x {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.promo-bar {
  background: var(--ink);
  color: var(--bg);
  overflow: hidden;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.promo-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: scroll-x 38s linear infinite;
  white-space: nowrap;
}
.promo-track span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.promo-track .dot {
  width: 4px; height: 4px;
  background: var(--brand);
  border-radius: 50%;
  display: inline-block;
}

/* Cart drawer */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(27,42,30,0.45);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(460px, 100vw);
  height: 100vh;
  background: var(--bg);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.drawer.open { transform: translateX(0); }

/* Bounce-add chip animation */
@keyframes fly-to-cart {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--dx, 200px), var(--dy, -200px)) scale(0.2); opacity: 0; }
}
.fly-chip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  animation: fly-to-cart 700ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

/* Stick illustration helpers */
.stick {
  position: relative;
  border-radius: 10px 10px 4px 4px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.stick::before {
  /* paper tear / notch */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14%;
  background:
    radial-gradient(circle at 6% 100%, transparent 3px, currentColor 3.5px) 0 0/12px 100% no-repeat;
  background-color: currentColor;
  filter: brightness(0.85);
}
.stick::after {
  /* texture stripes */
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.0) 0,
      rgba(255,255,255,0.0) 12px,
      rgba(255,255,255,0.08) 12px,
      rgba(255,255,255,0.08) 24px);
  pointer-events: none;
}

/* badge pill */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--r-full);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* utility */
.spin { animation: spin 600ms ease; }
@keyframes spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* checkbox-card */
.opt-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  border: 1.5px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  padding: 18px 14px;
  cursor: pointer;
  position: relative;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}
.opt-card:hover { border-color: var(--ink-soft); }
.opt-card.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-cream);
}

.opt-card .opt-label {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

/* number stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  overflow: hidden;
}
.stepper button {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: var(--ink);
  transition: background 140ms;
}
.stepper button:hover:not(:disabled) { background: var(--bg-soft); }
.stepper button:disabled { color: var(--ink-mute); cursor: not-allowed; }
.stepper .count {
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
}

/* page-transition fade */
.page-fade {
  animation: page-fade-in 260ms ease;
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* lang switcher */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: var(--r-full);
  background: transparent;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lang-pill:hover { background: rgba(27,42,30,0.06); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px;
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.lang-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}
.lang-menu button:hover { background: var(--bg-soft); }
.lang-menu button.active { color: var(--brand-deep); font-weight: 700; }

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--ink);
  flex-shrink: 0;
  min-width: 0;
}
.logo-mark {
  width: 52px; height: 52px;
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
}

/* Section spacing */
section { padding: 80px 0; }
@media (max-width: 720px) {
  section { padding: 56px 0; }
}

/* hero */
.hero {
  padding: 32px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.h-display {
  font-size: clamp(40px, 6vw, 78px);
  line-height: 0.97;
  letter-spacing: -0.035em;
  white-space: pre-line;
  font-weight: 600;
}
.h-section {
  font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.h-card {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* hero visual */
.hero-visual {
  position: relative;
  aspect-ratio: 1.05/1;
  background: linear-gradient(135deg, #F2E5C8 0%, #E8D7A8 100%);
  border-radius: var(--r-xl);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
}
.hero-visual::after {
  /* faint texture */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.5) 0, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(214,59,92,0.15) 0, transparent 50%);
  pointer-events: none;
}

/* sticky cart count badge */
.cart-count {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--berry);
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cart-count.bump { transform: scale(1.4); }

/* === HEADER === */
header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms, background 240ms;
}
header.site.scrolled {
  border-color: var(--line);
  background: rgba(251, 246, 236, 0.85);
  backdrop-filter: blur(10px);
}
body.vd-dark header.site.scrolled {
  background: rgba(15, 24, 18, 0.88);
  border-color: var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  gap: 24px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 18px;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 16px;
  transition: background 140ms;
}
.nav-link:hover { background: rgba(27,42,30,0.06); }
.nav-link.active { background: var(--brand-cream); color: var(--brand-deep); }
.nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
@media (max-width: 820px) {
  .nav-links .nav-link span.hide-sm { display: none; }
  .nav-links { gap: 0; }
}

/* footer */
footer.site {
  background: var(--ink);
  color: var(--bg);
  padding: 80px 0 32px;
  margin-top: 80px;
}
footer.site h4 {
  font-family: var(--ff-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 16px;
  color: rgba(251, 246, 236, 0.6);
}
footer.site a { display: block; padding: 4px 0; opacity: 0.85; font-size: 14px; }
footer.site a:hover { opacity: 1; color: var(--brand); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
}
@media (max-width: 820px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
.newsletter {
  display: flex;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.08);
  padding: 4px;
  margin-top: 12px;
  max-width: 360px;
}
.newsletter input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 16px;
  color: var(--bg);
}
.newsletter input::placeholder { color: rgba(251,246,236,0.5); }
.newsletter input:focus { outline: none; }
.newsletter button {
  background: var(--brand);
  color: white;
  padding: 10px 18px;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 14px;
}

/* product card grid */
.flavor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1080px) { .flavor-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .flavor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .flavor-grid { grid-template-columns: 1fr; } }

.flavor-card {
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  transition: transform 200ms ease;
  border: 1px solid var(--line-soft);
}
.flavor-card:hover { transform: translateY(-3px); }
.flavor-card .top {
  aspect-ratio: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.flavor-card .body { padding: 16px 18px 18px; }

/* step */
.step-card {
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  border: 1px solid var(--line-soft);
}
.step-num {
  font-family: var(--ff-display);
  font-size: 56px;
  line-height: 1;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.04em;
}

/* generic */
.muted { color: var(--ink-mute); }
.hide-mobile { display: initial; }
@media (max-width: 720px) { .hide-mobile { display: none; } }

/* review card */
.review-card {
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  padding: 28px;
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--sun);
}

/* checkout layout */
.checkout-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 920px) {
  .checkout-grid { grid-template-columns: 1fr; }
  /* On mobile the summary stacks below the form — disable sticky (no place to stick to) */
  .checkout-summary {
    position: static !important;
    max-height: none !important;
  }
}

.steps-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
}
.step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--ink-mute);
}
.step-pill.active { background: var(--ink); color: var(--bg); }
.step-pill.done { background: var(--brand-cream); color: var(--brand-deep); }
.step-pill .dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.step-pill.active .dot { background: rgba(255,255,255,0.18); }
.step-pill.done .dot { background: var(--brand); color: white; }
.step-pill .arrow { color: var(--ink-mute); }

/* progress */
.progress {
  height: 6px;
  background: var(--line-soft);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress > div {
  height: 100%;
  background: var(--brand);
  border-radius: var(--r-full);
  transition: width 240ms ease;
}

/* table-ish list */
.line-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.line-item:last-child { border-bottom: none; }
.line-thumb {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* sticker chip — for flavor selector cards */
.flavor-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--r-md);
  transition: border-color 140ms, transform 100ms;
  cursor: pointer;
}
.flavor-chip:hover { border-color: var(--ink-soft); }
.flavor-chip.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-cream); }
.flavor-chip .swatch {
  width: 44px; height: 56px;
  border-radius: 8px 8px 3px 3px;
  flex-shrink: 0;
}

/* ============ DARK MODE ============ */
body.vd-dark {
  --bg:           #0F1812;   /* deep forest dark */
  --bg-elev:      #1A2620;
  --bg-soft:      #131C16;
  --ink:          #F0F4EF;   /* near-white for max readability */
  --ink-soft:     #C8D2C7;   /* brighter mid-tone */
  --ink-mute:     #9AA89A;   /* brighter muted (was #7E8C7F) */
  --line:         #2B3A30;
  --line-soft:    #1F2C25;

  --brand:        #8FD175;   /* brighter green for dark bg */
  --brand-deep:   #7BBF65;
  --brand-soft:   #2A3D27;
  --brand-cream:  #1F2D1B;
  /* In light mode --sun-soft is a pale cream used in "brand-cream → sun-soft"
     gradient backgrounds. Without a dark override it stayed light, so half of
     every such gradient (comparison-table header, big CTA, cart, etc.) was a
     light band with light text on it = invisible. Force a dark warm tone so the
     whole gradient is dark and the light text stays readable. */
  --sun-soft:     #2A2616;
}
body.vd-dark {
  background: var(--bg);
  color: var(--ink);
}
/* Smooth transition when toggling */
body, body.vd-dark {
  transition: background-color 280ms ease, color 280ms ease;
}

body.vd-dark .review-card {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.vd-dark .flavor-card,
body.vd-dark .step-card {
  background: var(--bg-elev);
  border-color: var(--line);
}
body.vd-dark footer.site {
  background: #050C08;
  color: #E8EDE7;          /* light text on dark footer */
}
body.vd-dark footer.site h4 {
  color: rgba(232, 237, 231, 0.55);
}
body.vd-dark footer.site a {
  color: #E8EDE7;
  opacity: 0.92;
}
body.vd-dark footer.site a:hover {
  color: var(--brand);
  opacity: 1;
}
body.vd-dark footer.site .eyebrow,
body.vd-dark footer.site .muted,
body.vd-dark footer.site span {
  color: rgba(232, 237, 231, 0.75) !important;
}
body.vd-dark .opt-card,
body.vd-dark .flavor-chip,
body.vd-dark .input,
body.vd-dark .select {
  background: var(--bg-elev);
  border-color: var(--line);
  color: var(--ink);
}
body.vd-dark .promo-bar {
  background: var(--bg-elev);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
body.vd-dark .hero-visual,
body.vd-dark [style*="background: rgba(255,255,255"] {
  /* leave as-is — handled per element */
}
body.vd-dark .btn-primary {
  background: var(--brand);
  color: #0A1208;
}
body.vd-dark .btn-outline {
  border-color: var(--ink-soft);
}

/* ============ DARK MODE — CONTRAST FIXES v116 ============ */

/* Generic muted text overrides — many inline styles use these classes */
body.vd-dark .muted,
body.vd-dark .eyebrow {
  color: var(--ink-soft) !important;
}

/* Comparison table — make rows readable */
body.vd-dark table {
  color: var(--ink);
}
body.vd-dark table th,
body.vd-dark table td {
  border-color: var(--line) !important;
}

/* Pack selector / opt-card selected — keep the active green background but force readable text */
body.vd-dark .opt-card.selected,
body.vd-dark [data-selected="true"] {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  color: var(--ink) !important;
}

/* FAQ accordion items */
body.vd-dark details,
body.vd-dark .faq-item {
  background: var(--bg-elev);
  border-color: var(--line);
  color: var(--ink);
}
body.vd-dark details summary {
  color: var(--ink);
}

/* Inputs and selects — ensure placeholder is visible */
body.vd-dark input::placeholder,
body.vd-dark textarea::placeholder {
  color: var(--ink-mute);
  opacity: 1;
}

/* Cards using cream backgrounds via inline styles — adapt their text color */
body.vd-dark [style*="#FBF6EC"],
body.vd-dark [style*="rgb(251, 246, 236)"],
body.vd-dark [style*="var(--brand-cream)"] {
  color: var(--ink);
}

/* Section backgrounds using brand-soft / brand-cream — adjust contrast on inner text */
body.vd-dark section[style*="brand-cream"],
body.vd-dark section[style*="bg-soft"] {
  color: var(--ink);
}

/* Stars and rating numbers — keep gold but ensure surrounding text readable */
body.vd-dark .vd-greviews-summary,
body.vd-dark .vd-greviews-summary * {
  color: var(--ink);
}
body.vd-dark .vd-greviews-summary [style*="ink-mute"],
body.vd-dark .vd-greviews-summary [style*="ink-soft"] {
  color: var(--ink-soft) !important;
}

/* Comparison badges (Belge, Lyophilisation, etc.) on dark */
body.vd-dark .pill,
body.vd-dark .chip,
body.vd-dark .badge {
  background: var(--bg-elev);
  color: var(--ink);
  border-color: var(--line);
}

/* Trust badges row */
body.vd-dark .trust-badges,
body.vd-dark .trust-badges * {
  color: var(--ink-soft);
}

/* ===== DARK MODE — hardcoded WHITE backgrounds (v=177) =====
   Several blocks use an inline white / rgba(255,255,255,…) background that does
   NOT adapt in dark mode, while their text uses --ink (which becomes near-white).
   Result: white text on white = invisible. Force a dark surface so the light
   text becomes readable. */

/* Hero meta badges (Sans sucres ajoutés / 100% naturel / Made in EU / Vegan) */
body.vd-dark .vd-hero-meta > div {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* Subscription chooser — the two option cards (Achat unique / M'abonner) */
body.vd-dark .subscription-chooser .sub-grid > button {
  background: rgba(255,255,255,0.06) !important;
}

/* Story page pull-quote ("Entre deux services…") */
body.vd-dark blockquote {
  background: var(--bg-elev) !important;
  color: var(--ink) !important;
}

/* Modal backgrounds and dialog cards */
body.vd-dark .modal,
body.vd-dark dialog,
body.vd-dark [role="dialog"] {
  background: var(--bg-elev);
  color: var(--ink);
  border-color: var(--line);
}

/* Catch-all: anything still rendering hardcoded dark text on dark bg */
body.vd-dark [style*="color: #1B2A1E"],
body.vd-dark [style*="color:'#1B2A1E'"],
body.vd-dark [style*="color: #2A3D27"],
body.vd-dark [style*="color:'#2A3D27'"],
body.vd-dark [style*="color: #1b2a1e"] {
  color: var(--ink) !important;
}

/* Subscription panel cream background — keep card white but improve contrast on prices/labels */
body.vd-dark .subscription-panel,
body.vd-dark .sub-panel {
  background: var(--bg-elev);
  border-color: var(--line);
}

/* ============================================================
   FRUIT ANIMATIONS — joy effects
   ============================================================ */

/* gentle floating in place */
@keyframes vd-float {
  0%   { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(0); }
  50%  { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(-14px); }
  100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(0); }
}

/* burst outward from a center */
@keyframes vd-burst {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--bdx), var(--bdy)) rotate(var(--brot)) scale(1); opacity: 0; }
}

/* falling like confetti */
@keyframes vd-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.95; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.85; }
}

/* horizontal sway during fall */
@keyframes vd-sway {
  0%, 100% { margin-left: 0; }
  50%      { margin-left: 40px; }
}

/* slow rotation */
@keyframes vd-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@keyframes vd-counter-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(-360deg); }
}

/* wiggle on hover */
@keyframes vd-wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.vd-wiggle-trigger:hover .vd-wiggle-target {
  animation: vd-wiggle 0.5s ease-in-out 2;
}

/* === HOW IT WORKS — animated step illustrations ===
   Each step has its own subtle motion that loops continuously.
   Animations are reduced via prefers-reduced-motion below. */

/* Step 1: stick "pouring" tilt */
@keyframes vd-step-pour {
  0%, 100% { transform: translate(80px, 70px) rotate(-12deg); }
  50%      { transform: translate(80px, 70px) rotate(-20deg); }
}
.step-anim-1 .step-stick-pour {
  transform-origin: 80px 70px;
  animation: vd-step-pour 3.2s ease-in-out infinite;
}

/* Step 1: tear strip "detaching" pulse */
@keyframes vd-step-tear {
  0%, 80%, 100% { transform: translateY(0); opacity: 1; }
  90%           { transform: translateY(-4px); opacity: 0.8; }
}
.step-anim-1 .step-tear-strip {
  animation: vd-step-tear 3.2s ease-in-out infinite;
}

/* Step 1: powder particles falling */
@keyframes vd-step-particles {
  0%   { opacity: 0; transform: translateY(-10px); }
  30%  { opacity: 1; }
  70%  { opacity: 1; transform: translateY(8px); }
  100% { opacity: 0; transform: translateY(20px); }
}
.step-anim-1 .step-pour-particles circle {
  animation: vd-step-particles 2.4s ease-in infinite;
  transform-origin: center;
}
.step-anim-1 .step-pour-particles circle:nth-child(1) { animation-delay: 0s; }
.step-anim-1 .step-pour-particles circle:nth-child(2) { animation-delay: 0.4s; }
.step-anim-1 .step-pour-particles circle:nth-child(3) { animation-delay: 0.8s; }
.step-anim-1 .step-pour-particles circle:nth-child(4) { animation-delay: 1.2s; }

/* Step 2: shaker rotation shake */
@keyframes vd-step-shake {
  0%, 100% { transform: translate(80px, 70px) rotate(0deg); }
  15%      { transform: translate(80px, 70px) rotate(-8deg); }
  30%      { transform: translate(80px, 70px) rotate(8deg); }
  45%      { transform: translate(80px, 70px) rotate(-6deg); }
  60%      { transform: translate(80px, 70px) rotate(6deg); }
  75%      { transform: translate(80px, 70px) rotate(-3deg); }
}
.step-anim-2 .step-shake {
  transform-origin: 80px 70px;
  animation: vd-step-shake 1.8s ease-in-out infinite;
}

/* Step 2: motion lines fade in/out */
@keyframes vd-step-shake-lines {
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}
.step-anim-2 .step-shake-lines {
  animation: vd-step-shake-lines 1.8s ease-in-out infinite;
}

/* Step 3: smoothie glass gentle pulse */
@keyframes vd-step-pulse {
  0%, 100% { transform: translate(80px, 70px) scale(1); }
  50%      { transform: translate(80px, 70px) scale(1.04); }
}
.step-anim-3 .step-glass-pulse {
  transform-origin: 80px 70px;
  animation: vd-step-pulse 2.8s ease-in-out infinite;
}

/* Step 3: sparkles twinkle */
@keyframes vd-step-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  50%      { opacity: 1;   transform: scale(1.2); }
}
.step-anim-3 .step-glass-sparkles circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: vd-step-twinkle 2s ease-in-out infinite;
}
.step-anim-3 .step-glass-sparkles circle:nth-child(1) { animation-delay: 0s; }
.step-anim-3 .step-glass-sparkles circle:nth-child(2) { animation-delay: 0.5s; }
.step-anim-3 .step-glass-sparkles circle:nth-child(3) { animation-delay: 1s; }
.step-anim-3 .step-glass-sparkles circle:nth-child(4) { animation-delay: 1.5s; }

/* Accessibility: respect reduce-motion preference */
@media (prefers-reduced-motion: reduce) {
  .step-anim-1 .step-stick-pour,
  .step-anim-1 .step-tear-strip,
  .step-anim-1 .step-pour-particles circle,
  .step-anim-2 .step-shake,
  .step-anim-2 .step-shake-lines,
  .step-anim-3 .step-glass-pulse,
  .step-anim-3 .step-glass-sparkles circle {
    animation: none !important;
  }
}

/* gentle bobbing for one-off elements */
@keyframes vd-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.vd-bob { animation: vd-bob 3.5s ease-in-out infinite; }
.vd-bob-slow { animation: vd-bob 5s ease-in-out infinite; }

/* pop in (used on first-render of cards) */
@keyframes vd-pop {
  0%   { transform: scale(0.92) translateY(8px); opacity: 0; }
  60%  { transform: scale(1.02) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}

/* === REVEAL ON SCROLL === */
.vd-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.vd-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === FLAVOR CARD JOY === */
.flavor-card {
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 260ms ease,
              border-color 260ms ease;
}
.flavor-card:hover {
  transform: translateY(-6px) rotate(-0.4deg);
  box-shadow: 0 24px 48px rgba(27,42,30,0.16);
  border-color: var(--brand-soft);
}
.flavor-card .top svg {
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.flavor-card:hover .top svg {
  transform: scale(1.06) rotate(2deg);
}

/* === BUTTON JOY — additional brand hover scale (works with main .btn-brand styles above) === */
.btn-brand:hover, .btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
}

/* === HERO ENTRANCE === */
.hero h1, .hero p, .hero .kicker {
  opacity: 0;
  animation: vd-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero .kicker { animation-delay: 80ms; }
.hero h1     { animation-delay: 180ms; }
.hero p      { animation-delay: 320ms; }
.hero > .container > div > div { animation-delay: 460ms; } /* btns */
@keyframes vd-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === FLOATING FRUITS LAYER === */
.floating-fruits > div {
  filter: drop-shadow(0 6px 12px rgba(27,42,30,0.08));
}
/* Floating fruits container has pointer-events: none, but each fruit re-enables them */
.floating-fruits > div > div {
  pointer-events: auto;
}

/* === FRUIT SQUISH === */
@keyframes vd-squish {
  0%   { transform: scale(1, 1); }
  18%  { transform: scale(1.35, 0.65); }
  38%  { transform: scale(0.85, 1.20); }
  55%  { transform: scale(1.08, 0.94); }
  72%  { transform: scale(0.97, 1.04); }
  100% { transform: scale(1, 1); }
}
.vd-fruit-squish {
  animation: vd-squish 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === JUICE DROP === */
@keyframes vd-juice {
  0%   { transform: translate(0, 0) rotate(-45deg) scale(0.4); opacity: 0; }
  20%  { opacity: 0.95; transform: translate(calc(var(--jdx) * 0.2), calc(var(--jdy) * 0.2)) rotate(-45deg) scale(1.1); }
  100% { transform: translate(var(--jdx), var(--jdy)) rotate(-45deg) scale(0.6); opacity: 0; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vd-bob, .vd-bob-slow, .floating-fruits > div,
  .vd-orbit-ring, .vd-orbit-ring > div { animation: none !important; }
  .vd-reveal { opacity: 1 !important; transform: none !important; }
  .hero h1, .hero p, .hero .kicker { opacity: 1; animation: none; }
}

/* ============================================================
   SHIPPING METHOD GRID — 3 options responsive
   ============================================================ */
.cfg-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .cfg-grid-3 { grid-template-columns: 1fr !important; gap: 8px !important; }
}

/* ============================================================
   MONDIAL RELAY WIDGET — isolate from our CSS reset
   ============================================================ */

/* Reset our own box-sizing inside the Mondial Relay widget so its
   layout is not crushed by our global * { box-sizing: border-box }.
   Mondial Relay's CSS expects content-box dimensions. */
.mr-widget-shell, .mr-widget-shell * {
  box-sizing: content-box;
}

.mr-widget-shell {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.mr-widget-shell input,
.mr-widget-shell select,
.mr-widget-shell button {
  font-family: inherit;
  font-size: 14px;
  border-radius: 4px;
}

.mr-widget-shell #MR_ParcelShopPicker_Map,
.mr-widget-shell .leaflet-container,
.mr-widget-shell .gmap {
  min-height: 280px !important;
  border-radius: 4px;
}

/* Hide leaflet/google maps watermark conflicts and ensure proper rendering */
.mr-widget-shell img {
  max-width: none;          /* override our img { max-width:100% } that breaks the map tiles */
}

.mr-widget-shell a {
  color: #006a9b;
  text-decoration: none;
}
.mr-widget-shell a:hover { text-decoration: underline; }

/* The list of parcel-shop results */
.mr-widget-shell .MRW-Results {
  max-height: 480px;
  overflow-y: auto;
}

/* Ensure the widget can grow as needed on mobile */
@media (max-width: 720px) {
  .mr-widget-shell { min-height: 600px; }
  .mr-widget-shell #MR_ParcelShopPicker_Map,
  .mr-widget-shell .leaflet-container,
  .mr-widget-shell .gmap {
    min-height: 220px !important;
  }
}

/* ============================================================
   MOBILE — comprehensive responsive pass
   ============================================================ */

/* HARD overflow prevention — uses `clip` (modern) so position:sticky still works.
   `overflow-x: hidden` would create a new scroll container and break sticky positioning. */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}
header.site, footer.site, main, section {
  max-width: 100vw;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; }
/* Promo bar overflow guard */
.promo-bar { max-width: 100vw; overflow: hidden; }

/* Tablet & smaller — ≤ 920px */
@media (max-width: 920px) {
  section { padding: 48px 0; }
  .hero { padding: 24px 0 56px; }
  .nav { padding: 16px 0; gap: 10px; }
  .logo { font-size: 22px; gap: 10px; }
  .logo-mark { width: 44px; height: 44px; }
  .nav-link { padding: 10px 14px; font-size: 15px; }
  .nav-actions { gap: 2px; }
}

/* Phone — ≤ 720px */
@media (max-width: 720px) {
  /* base body sizing */
  body { font-size: 15px; }

  /* container has 16px from earlier */
  section { padding: 40px 0; }
  .hero { padding: 16px 0 40px; }

  /* HEADER — 2 lignes : (logo + actions) puis (nav-links scroll horizontal) */
  .nav {
    padding: 10px 0 6px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .logo { font-size: 17px; gap: 8px; }
  .logo-mark { width: 38px; height: 38px; }
  .nav-links {
    display: flex !important;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    gap: 4px;
    padding: 4px 0 2px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link {
    padding: 8px 12px;
    font-size: 13px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .nav-links .nav-link span,
  .nav-links .nav-link span.hide-sm { display: inline !important; }
  .lang-pill { padding: 6px 8px; font-size: 12px; }
  .lang-pill svg:last-child { display: none; }

  /* PROMO BAR */
  .promo-bar { font-size: 12px; padding: 7px 0; }
  .promo-track { gap: 32px; }

  /* TYPOGRAPHY */
  .h-display { font-size: clamp(34px, 9vw, 52px); line-height: 1; }
  .h-section { font-size: clamp(26px, 7vw, 38px); }
  .h-card { font-size: clamp(18px, 4.5vw, 24px); }

  /* HERO */
  .hero-visual { padding: 24px; border-radius: var(--r-lg); }
  .hero-grid { gap: 28px; }

  /* CARDS / SECTIONS */
  .step-card { padding: 24px 20px; }
  .step-num { font-size: 44px; }
  .review-card { padding: 22px; }

  /* BUTTONS — keep tap target ≥ 44px */
  .btn { padding: 12px 18px; font-size: 14px; min-height: 44px; }
  .btn-lg { padding: 14px 22px; font-size: 15px; min-height: 48px; }
  .btn-sm { padding: 9px 14px; font-size: 13px; min-height: 36px; }

  /* CART DRAWER — full width on mobile */
  .drawer { width: 100vw; }

  /* FLAVOR GRID — make cards big enough */
  .flavor-grid { gap: 14px; }

  /* PRODUCTS GRID — already 1 col below 600px */

  /* CHECKOUT */
  .steps-row {
    gap: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin: 0 -16px 28px;
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }
  .steps-row::-webkit-scrollbar { display: none; }
  .step-pill { font-size: 12px; padding: 6px 10px; white-space: nowrap; flex-shrink: 0; }
  .checkout-grid { gap: 28px; }
  /* Make summary appear first on mobile if it makes more sense, but keep current order. */

  /* LINE ITEMS */
  .line-item { grid-template-columns: 44px 1fr auto; gap: 10px; }
  .line-thumb { width: 44px; height: 44px; }

  /* FOOTER — force 1 colonne pour éviter les coupures texte */
  footer.site { padding: 56px 0 24px; margin-top: 56px; max-width: 100vw; overflow: hidden; }
  .foot-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 28px !important;
    width: 100% !important;
  }
  .foot-grid > div { min-width: 0; width: 100%; }
  .newsletter { max-width: 100%; }
  footer.site h4, footer.site a { word-break: keep-all; overflow-wrap: normal; white-space: normal; }

  /* PRODUCT PAGE configurator */
  .opt-card { padding: 14px 10px; min-height: 88px; }
  .opt-card .opt-label { font-size: 9px; padding: 2px 8px; top: -8px; }
  .flavor-chip { padding: 10px; }
  .flavor-chip .swatch { width: 36px; height: 46px; }
  .flavor-chip > div:nth-child(2) > div:first-child { font-size: 13px; }
  .flavor-chip > div:nth-child(2) > div:last-child { font-size: 10px; }

  .stepper button { width: 32px; height: 32px; }
  .stepper .count { min-width: 22px; font-size: 13px; }

  /* INPUT — bigger touch */
  .input, .select { padding: 13px 14px; font-size: 16px; /* prevents iOS zoom */ }

  /* DRAWER body */
  .drawer h3 { font-size: 20px; }

  /* SCROLL — modal */
  .flavor-modal-header { padding: 28px 20px !important; }
}

/* Small phones — ≤ 480px */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  section { padding: 36px 0; }
  .hero { padding: 12px 0 32px; }

  /* HEADER — toujours logo image + "VitaDry" + nav-links sur 2e ligne */
  .logo { font-size: 16px; gap: 6px; }
  .logo span { display: inline-block; }
  .logo-mark { width: 36px; height: 36px; }
  .nav { padding: 8px 0 4px; gap: 4px; }
  .nav-actions .nav-link { padding: 8px; }
  .nav-actions .nav-link svg { width: 18px; height: 18px; }
  .nav-link { padding: 7px 10px; font-size: 12.5px; }

  /* H1 / H2 */
  .h-display { font-size: clamp(30px, 11vw, 42px); }
  .h-section { font-size: clamp(24px, 8vw, 32px); }

  /* HERO */
  .hero-grid { gap: 20px; }
  .hero-visual { aspect-ratio: 1.1 / 1; }

  /* TRUST STRIP — wrap nicely */

  /* CTA boxes */
  .container > div[style*="border-radius: var(--r-xl)"] {
    padding: 32px 20px !important;
  }

  /* PROMO */
  .promo-bar { font-size: 11px; padding: 6px 0; }
  .promo-track { gap: 24px; }

  /* CARDS */
  .flavor-card .body { padding: 12px 14px 14px; }

  /* CHECKOUT card preview */
  /* keep aspect ratio */

  /* FOOTER newsletter */
  .newsletter { flex-wrap: wrap; }
  .newsletter input { min-width: 0; flex: 1 1 100%; padding: 11px 14px; }
  .newsletter button { width: 100%; margin-top: 4px; border-radius: var(--r-full); padding: 12px; }
}

/* Very small phones — ≤ 360px : last-resort compactness */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .logo { font-size: 14px; gap: 4px; }
  .logo-mark { width: 32px; height: 32px; }
  .nav-actions .nav-link { padding: 6px; }
  .nav-actions .nav-link svg { width: 17px; height: 17px; }
  .lang-pill { padding: 5px 6px; font-size: 11px; }
}

/* If logo.png fails to load, the alt text "VitaDry" still shows in a styled way */
.logo-mark {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-deep);
  background: var(--brand-cream);
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
}

/* Ensure touchable surfaces are easy to tap everywhere */
@media (hover: none) {
  .nav-link, .btn, .opt-card, .flavor-chip, .stepper button {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Prevent iOS from zooming into inputs */
@media (max-width: 720px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ============================================================
   ★ UX POLISH PACK — couche de finition premium (2026-05-28)
   S'applique sur TOUT le site. Subtil, sans changer l'identité.
   ============================================================ */

/* 1) Scroll fluide + offset pour le header sticky sur les ancres */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 100px; }

/* 2) Sélection de texte aux couleurs de la marque */
::selection { background: var(--brand-soft); color: var(--ink); }

/* 3) Focus élégant au clavier (anneau vert) — pas de contour bleu moche.
   :focus-visible ne s'active qu'au clavier, pas au clic souris. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 4) Feedback tactile au clic sur les boutons (léger enfoncement) */
.btn:active,
button:not(:disabled):active {
  transform: translateY(1px) scale(0.985);
}
.btn { transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease; }

/* 5) Hover premium sur les cartes : se soulèvent + ombre qui s'approfondit.
   Cible les conteneurs "carte" courants sans toucher aux boutons internes. */
.flavor-card,
.step-card,
.opt-card,
.review-card,
.mag-card,
.vd-card {
  transition: transform 220ms cubic-bezier(0.34,1.2,0.64,1),
              box-shadow 220ms ease,
              border-color 200ms ease;
  will-change: transform;
}
.flavor-card:hover,
.step-card:hover,
.review-card:hover,
.mag-card:hover,
.vd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(27,42,30,0.12);
}
body.vd-dark .flavor-card:hover,
body.vd-dark .step-card:hover,
body.vd-dark .review-card:hover,
body.vd-dark .mag-card:hover,
body.vd-dark .vd-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}

/* 6) Images en fondu au chargement (plus de "pop" brutal).
   .loaded est ajouté par le script global dès que l'image est prête. */
img.vd-fade-img {
  opacity: 0;
  transition: opacity 500ms ease;
}
img.vd-fade-img.loaded { opacity: 1; }

/* 7) Reveal au scroll GLOBAL — sections qui montent en fondu.
   Classe distincte (.vd-ux-reveal) pour ne pas entrer en conflit avec
   le composant RevealOnScroll existant (.vd-reveal). Le script ajoute
   .vd-ux-reveal aux sections, puis .in quand elles entrent à l'écran.
   Fallback : si JS absent, les sections restent visibles (pas de .vd-ux-reveal). */
.vd-ux-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1);
}
.vd-ux-reveal.in {
  opacity: 1;
  transform: none;
}

/* 8) Liens du footer/nav : soulignement animé au survol */
footer.site a,
.nav-link {
  transition: color 180ms ease, opacity 180ms ease;
}

/* 9) Respect total de "reduced motion" — désactive toute la couche UX */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flavor-card, .step-card, .opt-card, .review-card, .mag-card, .vd-card,
  .btn, button { transition: none !important; transform: none !important; }
  .vd-ux-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  img.vd-fade-img { opacity: 1 !important; transition: none !important; }
}

/* ============================================================
   ★ DARK MODE — fix des "bandeaux sombres" qui s'inversent
   ------------------------------------------------------------
   Certaines sections/encarts sont codés `background: var(--ink); color: var(--bg)`
   pour créer un bandeau sombre à texte clair. En dark mode, --ink devient
   quasi-blanc (la variable s'inverse) → le bandeau passe en CLAIR, et le texte
   crème codé en dur (rgba(251,246,236,…) / 'white') devient ILLISIBLE.
   Solution : on force ces bandeaux à RESTER sombres en dark mode, avec une
   couleur fixe qui ne s'inverse jamais. Cible uniquement `background: var(--ink)`
   (pas `color: var(--ink)`, qui est du texte sombre légitime).
   ============================================================ */
body.vd-dark [style*="background: var(--ink)"],
body.vd-dark [style*="background:var(--ink)"] {
  background-color: #16231A !important;   /* vert forêt fixe, ne s'inverse pas */
  color: #F0F4EF !important;
}
/* Descendants qui utilisaient var(--bg) (sombre en dark) → forcer texte clair */
body.vd-dark [style*="background: var(--ink)"] [style*="var(--bg)"],
body.vd-dark [style*="background:var(--ink)"] [style*="var(--bg)"] {
  color: #F0F4EF !important;
}