/*
 * LIVENZA theme stylesheet.
 *
 * The template's base.css followed by every page stylesheet from
 * _template/assets/css/pages, merged into one file so the storefront and the
 * CMS page-builder canvas load the same rules. Order matters where two pages
 * style the same component (cart.css before product.css, checkout.css before
 * payment.css). Store integration rules (markup rendered by the shared
 * scripts, CMS output) live in store.css, loaded after this file.
 */


/* ==========================================================================
   base.css
   ========================================================================== */

/*
 * LIVENZA base styles: tokens, type, shared components, header, footer,
 * dialogs. Loaded on every page after Bootstrap. Page-specific rules live in
 * assets/css/pages/<page>.css and only ever use the tokens defined here.
 *
 * One theme. No dark mode, no prefers-color-scheme variants (house rule).
 * Every text colour pairing here was measured against WCAG 2.1 AA; the
 * numbers are in the comments. Where the Figma value failed, the token moved
 * and the original is noted.
 */

:root {
  /* ink */
  --lv-ink: #161616;          /* headings, 18.1:1 on white */
  --lv-ink-2: #252824;        /* buttons, dark surfaces */
  --lv-ink-3: #2f332e;        /* card titles, CTA band */
  --lv-text: #545b52;         /* body copy, 7.01:1 on white, 6.33:1 on cream */
  --lv-text-2: #3e433c;       /* secondary headings */
  --lv-muted: #666e63;        /* small print. Figma #70796d fails on #f2f3f2 (4.06); this is 4.75 there, 5.28 on white */
  --lv-mist: #abb2a9;         /* text on dark only: 6.87:1 on ink-2. Never on light surfaces (2.17:1) */
  --lv-on-dark: #f6f3ec;
  --lv-on-dark-muted: #9a9c99; /* Figma rgba(255,255,255,.45) is 4.23:1 on ink-2; this is 5.39 */

  /* surfaces */
  --lv-white: #ffffff;
  --lv-cream: #f6f3ec;        /* header */
  --lv-sage: #e7e9e1;         /* top bar */
  --lv-surface: #f2f3f2;      /* product card media, FAQ band */
  --lv-chip: #e2e4e1;         /* round add button, quiet chips */
  --lv-line: #dcdcd2;
  --lv-line-2: #e2e4e1;
  --lv-line-strong: #abb2a9;  /* outline buttons (3:1 is the UI floor; 2.17 on white is decorative only, see .lv-btn-outline) */
  --lv-star: #f79009;
  --lv-danger: #b42318;       /* 6.6:1 on white */
  --lv-success: #2f6b3a;

  /* type */
  --lv-font: 'Livenza Sans', 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lv-font-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lv-font-form: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* layout */
  --lv-gutter: 16px;          /* side gutter at 375px, and the inset of every rounded panel */
  --lv-shell: 1200px;         /* content width inside 120px page padding at 1440 */
  --lv-shell-wide: 1280px;    /* header content width, 80px padding at 1440 */
  --lv-radius: 8px;
  --lv-radius-lg: 16px;
  --lv-pill: 100px;
  --lv-tap: 44px;
  --lv-ease: cubic-bezier(.2, .7, .2, 1);

  /* Bootstrap hooks */
  --bs-body-font-family: var(--lv-font-ui);
  --bs-body-color: var(--lv-text);
  --bs-body-bg: var(--lv-white);
  --bs-link-color: var(--lv-ink-2);
  --bs-link-color-rgb: 37, 40, 36;
  --bs-link-hover-color: var(--lv-ink);
  --bs-link-hover-color-rgb: 22, 22, 22;
  --bs-border-color: var(--lv-line);
  --bs-focus-ring-color: rgba(37, 40, 36, .35);
}

/* ------------------------------------------------------------------ base */

html, body { overflow-x: clip; } /* backstop only; the layout test names real offenders */
html { scroll-padding-top: 100px; }

body {
  font-family: var(--lv-font-ui);
  font-size: 16px;
  line-height: 1.4;
  color: var(--lv-text);
  background: var(--lv-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lv-font-ui);
  color: var(--lv-ink);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

p { margin: 0; }
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
main:focus { outline: none; }

.lv-min0 { min-width: 0; }
.lv-icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.lv-icon-16 { width: 16px; height: 16px; }
.lv-icon-24 { width: 24px; height: 24px; }

/* Focus: always visible for keyboard users, never for mouse clicks. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--lv-ink-2);
  outline-offset: 3px;
  border-radius: 4px;
}
.lv-on-dark :focus-visible,
.lv-footer :focus-visible { outline-color: var(--lv-on-dark); }

.lv-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  padding: 12px 18px;
  min-height: var(--lv-tap);
  background: var(--lv-ink-2);
  color: var(--lv-white);
  border-radius: var(--lv-pill);
  font-weight: 500;
  text-decoration: none;
}
.lv-skip:focus { top: 12px; }

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

/* ------------------------------------------------------------------ layout */

.lv-shell {
  width: 100%;
  max-width: calc(var(--lv-shell) + 2 * var(--lv-gutter));
  margin-inline: auto;
  padding-inline: var(--lv-gutter);
}
.lv-shell--wide { max-width: calc(var(--lv-shell-wide) + 2 * var(--lv-gutter)); }

/* A full-bleed block inset 16px from the viewport with 8px corners: the hero,
   the CTA band and the footer all sit in one of these in the design. */
.lv-panel {
  margin-inline: var(--lv-gutter);
  border-radius: var(--lv-radius);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.lv-section { padding-block: 64px; }
@media (min-width: 992px) { .lv-section { padding-block: 120px; } }

/* ------------------------------------------------------------------ type */

.lv-eyebrow {
  font-family: var(--lv-font-ui);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lv-ink);
  margin: 0;
}

.lv-display {           /* hero h1: 72 / 1.2 / -2px at desktop */
  font-size: clamp(40px, 5vw + 12px, 72px);
  line-height: 1.2;
  letter-spacing: -0.028em;
  color: var(--lv-ink);
}
.lv-h2 {                /* 60 / 1.2 at desktop */
  font-size: clamp(34px, 3.4vw + 12px, 60px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--lv-ink);
}
.lv-h2--sm {            /* 48 / 1.2 at desktop */
  font-size: clamp(30px, 2.6vw + 12px, 48px);
}
.lv-h3 { font-size: clamp(20px, 1vw + 14px, 24px); line-height: 1.2; }
.lv-lead { font-size: clamp(16px, .4vw + 14px, 18px); line-height: 1.4; color: var(--lv-text); }
.lv-body { font-size: 16px; line-height: 1.4; color: var(--lv-text); }
.lv-small { font-size: 14px; line-height: 1.4; color: var(--lv-text); }
.lv-tiny { font-size: 12px; line-height: 1.4; color: var(--lv-muted); }
.lv-soft { color: var(--lv-text); }           /* the grey second line of a two-tone heading */

/* ------------------------------------------------------------------ buttons */

.lv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--lv-tap);
  padding: 10px 24px;
  border-radius: var(--lv-pill);
  border: 1px solid transparent;
  font-family: var(--lv-font-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .1px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--lv-ease), color .2s var(--lv-ease), border-color .2s var(--lv-ease), transform .2s var(--lv-ease);
}
.lv-btn:active { transform: translateY(1px); }
.lv-btn[disabled], .lv-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.lv-btn-dark { background: var(--lv-ink-2); color: var(--lv-white); }
.lv-btn-dark:hover { background: var(--lv-ink); color: var(--lv-white); }

.lv-btn-light { background: var(--lv-white); color: var(--lv-ink-2); }
.lv-btn-light:hover { background: var(--lv-cream); color: var(--lv-ink); }

/* Outline pill ("View all"). Figma draws the border in #abb2a9, which is
   2.17:1 on white; the label carries the contrast, the border is decoration. */
.lv-btn-outline { background: transparent; color: var(--lv-ink-2); border-color: var(--lv-line-strong); }
.lv-btn-outline:hover { border-color: var(--lv-ink-2); color: var(--lv-ink); }

.lv-btn-lg { min-height: 54px; padding: 14px 24px; font-size: 16px; line-height: 24px; letter-spacing: .15px; }
.lv-btn-block { width: 100%; }

/* Round icon button, 40px in Figma, 44px here (tap floor). */
.lv-icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--lv-tap);
  height: var(--lv-tap);
  flex: none;
  border-radius: 50%;
  border: 0;
  background: var(--lv-chip);
  color: var(--lv-ink-2);
  cursor: pointer;
  transition: background-color .2s var(--lv-ease), color .2s var(--lv-ease);
}
.lv-icon-btn:hover { background: var(--lv-ink-2); color: var(--lv-white); }
.lv-icon-btn--dark { background: var(--lv-ink-2); color: var(--lv-white); }
.lv-icon-btn--dark:hover { background: var(--lv-ink); }

/* Text link with an arrow, used for "Explore", "Read more" style links. */
.lv-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--lv-tap);
  color: var(--lv-ink-2);
  font-weight: 500;
  text-decoration: none;
}
.lv-link:hover { text-decoration: underline; }

/* Pill badge ("Daily essential", "BLOOD") */
.lv-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 99px;
  background: var(--lv-white);
  color: var(--lv-ink-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ forms */

.lv-field { display: grid; gap: 6px; min-width: 0; }
.lv-label { font-family: var(--lv-font-form); font-size: 13px; line-height: 19.5px; color: var(--lv-text-2); font-weight: 500; }
.lv-input, .lv-select, .lv-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--lv-font-form);
  font-size: 15px;
  line-height: 1.4;
  color: var(--lv-ink);
  background: var(--lv-white);
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  transition: border-color .15s var(--lv-ease), box-shadow .15s var(--lv-ease);
}
.lv-textarea { min-height: 140px; resize: vertical; }
.lv-select { appearance: none; padding-right: 44px; background: var(--lv-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e433c' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; }
.lv-input::placeholder, .lv-textarea::placeholder { color: var(--lv-muted); opacity: 1; }
.lv-input:hover, .lv-select:hover, .lv-textarea:hover { border-color: var(--lv-line-strong); }
.lv-input:focus, .lv-select:focus, .lv-textarea:focus { outline: none; border-color: var(--lv-ink-2); box-shadow: 0 0 0 3px rgba(37, 40, 36, .15); }
.lv-input[aria-invalid="true"], .lv-select[aria-invalid="true"], .lv-textarea[aria-invalid="true"] { border-color: var(--lv-danger); }
.lv-error { font-family: var(--lv-font-form); font-size: 13px; color: var(--lv-danger); }
.lv-error:empty { display: none; }

/* Pill email field with a round submit button inside (CTA band, newsletter). */
.lv-pill-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 414px;
  min-height: 54px;
  padding: 1px 1px 1px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .05);
}
.lv-pill-field input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  color: var(--lv-white);
  font-family: var(--lv-font-form);
  font-size: 15px;
}
.lv-pill-field input::placeholder { color: rgba(255, 255, 255, .7); }
.lv-pill-field input:focus { outline: none; }
.lv-pill-field:focus-within { border-color: rgba(255, 255, 255, .7); }
.lv-pill-field button {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  min-height: 50px;
  border-radius: 100px;
  border: 0;
  background: var(--lv-ink-2);
  color: var(--lv-white);
  cursor: pointer;
}
.lv-pill-field button:hover { background: var(--lv-ink); }

/* ------------------------------------------------------------------ top bar + header */

.lv-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 30px;
  padding: 0 var(--lv-gutter);
  background: var(--lv-sage);
  color: var(--lv-ink-2);
  font-family: var(--lv-font);
  font-size: 11px;
  letter-spacing: 1.21px;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  z-index: 1001; /* the link hit area overlaps the sticky header by 7px */
}
.lv-topbar p { margin: 0; }
.lv-topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--lv-tap); margin-block: -7px; } /* 44px hit area inside the 30px bar */
.lv-topbar a:hover { text-decoration: underline; }
.lv-topbar-dot { width: 3px; height: 3px; border-radius: 3px; background: currentColor; flex: none; }
@media (max-width: 575.98px) {
  .lv-topbar p, .lv-topbar-dot { display: none; }
}

.lv-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(246, 243, 236, .9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.lv-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: calc(var(--lv-shell-wide) + 2 * var(--lv-gutter));
  min-height: 72px;
  margin-inline: auto;
  padding-inline: var(--lv-gutter);
}
@media (min-width: 992px) { .lv-header-bar { min-height: 85px; } }

.lv-logo { display: inline-flex; align-items: center; min-height: var(--lv-tap); color: var(--lv-ink); flex: none; }
.lv-logo-svg { width: 160px; height: auto; display: block; }
@media (min-width: 992px) { .lv-logo-svg { width: 207px; } }

.lv-nav { display: none; }
@media (min-width: 992px) {
  .lv-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .lv-header-bar { position: relative; }
}
.lv-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--lv-tap);
  font-family: var(--lv-font);
  font-size: 14px;
  letter-spacing: -.24px;
  color: var(--lv-ink-2);
  text-decoration: none;
}
.lv-nav a:hover { color: var(--lv-ink); text-decoration: underline; }
.lv-nav a[aria-current="page"] { color: var(--lv-ink); font-weight: 700; }

.lv-header-actions { display: flex; align-items: center; gap: 8px; }

.lv-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--lv-tap);
  padding: 10px 12px 10px 16px;
  border-radius: var(--lv-pill);
  background: var(--lv-ink-2);
  color: var(--lv-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .1px;
  text-decoration: none;
  transition: background-color .2s var(--lv-ease);
}
.lv-cart-btn:hover { background: var(--lv-ink); color: var(--lv-white); }
.lv-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding-inline: 6px;
  border-radius: 10px;
  background: var(--lv-cream);
  color: var(--lv-ink-2);
  font-family: var(--lv-font);
  font-size: 11px;
  font-weight: 500;
}
@media (max-width: 399.98px) { .lv-cart-label { display: none; } }

.lv-burger {
  display: inline-grid;
  place-items: center;
  width: var(--lv-tap);
  height: var(--lv-tap);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lv-ink);
  cursor: pointer;
}
.lv-burger:hover { background: var(--lv-sage); }
@media (min-width: 992px) { .lv-burger { display: none; } }

/* Mobile menu: a native modal dialog, full height on the right. */
.lv-mobile-nav {
  margin: 0 0 0 auto;
  width: min(360px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 16px 20px 32px;
  border: 0;
  background: var(--lv-cream);
  color: var(--lv-ink);
}
.lv-mobile-nav::backdrop { background: rgba(22, 22, 22, .45); }
.lv-mobile-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.lv-mobile-nav nav { display: grid; }
.lv-mobile-nav nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--lv-line);
  font-size: 22px;
  letter-spacing: -.4px;
  color: var(--lv-ink);
  text-decoration: none;
}
.lv-mobile-nav nav a[aria-current="page"] { font-weight: 600; }
.lv-mobile-nav[open] { animation: lv-slide-in .28s var(--lv-ease); }
@keyframes lv-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ product card */

.lv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 12px;
}
@media (min-width: 768px) { .lv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1200px) { .lv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lv-card { min-width: 0; display: flex; flex-direction: column; }
.lv-card[hidden] { display: none; }
.lv-card-media {
  position: relative;
  aspect-ratio: 282 / 307;
  border-radius: var(--lv-radius);
  background: var(--lv-surface);
  overflow: hidden;
}
.lv-card-link { position: absolute; inset: 0; display: grid; place-items: start center; }
.lv-card-link img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  transition: transform .5s var(--lv-ease);
}
.lv-card:hover .lv-card-link img { transform: scale(1.04); }
.lv-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  border-radius: 99px;
  background: var(--lv-white);
  color: var(--lv-ink-3);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
@media (min-width: 768px) { .lv-card-badge { top: 18px; left: 18px; padding: 8px; font-size: 12px; } }
.lv-card-add {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--lv-tap);
  height: var(--lv-tap);
  border: 0;
  border-radius: 50%;
  background: var(--lv-chip);
  color: var(--lv-ink-2);
  cursor: pointer;
  transition: background-color .2s var(--lv-ease), color .2s var(--lv-ease);
}
@media (min-width: 768px) { .lv-card-add { right: 16px; bottom: 16px; } }
.lv-card-add:hover, .lv-card-add[data-added] { background: var(--lv-ink-2); color: var(--lv-white); }

.lv-card-body { padding-top: 16px; min-width: 0; }
.lv-card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lv-card-title { font-size: 16px; line-height: 1.4; color: var(--lv-ink-3); min-width: 0; }
.lv-card-title a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  min-height: var(--lv-tap);
  margin-block: -10px;        /* 44px hit area without moving the row */
  align-items: center;
}
.lv-card-title a:hover { text-decoration: underline; }
.lv-card-price { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--lv-ink-3); white-space: nowrap; }
.lv-card-meta { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--lv-text); }
.lv-card-size { color: var(--lv-muted); }
/* Two cards per row on phones leave no room for a price range beside the
   name, so the price drops under it. */
@media (max-width: 767px) {
  .lv-card-row { flex-direction: column; gap: 2px; }
}
@media (min-width: 768px) {
  .lv-card-title, .lv-card-price { font-size: 18px; }
  .lv-card-meta { font-size: 14px; }
}

/* ------------------------------------------------------------------ accordion (FAQ) */

.lv-accordion { border-top: 1px solid var(--lv-line); }
.lv-accordion-item { border-bottom: 1px solid var(--lv-line); }
.lv-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 20px 0;
  border: 0;
  background: transparent;
  color: var(--lv-ink-2);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 992px) { .lv-accordion-trigger { font-size: 18px; min-height: 84px; } }
.lv-accordion-trigger .lv-plus { flex: none; width: 20px; height: 20px; transition: transform .25s var(--lv-ease); }
.lv-accordion-trigger[aria-expanded="true"] .lv-plus { transform: rotate(45deg); }
.lv-accordion-panel { padding: 0 40px 24px 0; font-size: 14px; line-height: 1.4; color: var(--lv-text); }
.lv-accordion-panel[hidden] { display: none; }

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

.lv-footer-wrap { padding: 12px var(--lv-gutter); }
.lv-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--lv-radius);
  background: var(--lv-ink-2);
  color: var(--lv-white);
}
.lv-footer-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .1;
  mix-blend-mode: multiply; /* the prototype's streaks only ever darken #252824 */
}
.lv-footer-inner {
  display: grid;
  gap: 32px;
  max-width: calc(var(--lv-shell) + 2 * 24px);
  margin-inline: auto;
  padding: 32px 24px 24px;
}
@media (min-width: 1200px) { .lv-footer-inner { max-width: 1168px; padding-inline: 0; } }

.lv-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.lv-footer-logo { display: inline-block; color: var(--lv-white); }
.lv-logo-stacked { width: 150px; height: auto; display: block; }
@media (min-width: 768px) { .lv-logo-stacked { width: 176px; } }
.lv-footer-tag { margin-top: 16px; font-size: 20px; line-height: 1.4; color: var(--lv-mist); }

.lv-socials { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lv-socials a {
  display: grid;
  place-items: center;
  width: var(--lv-tap);
  height: var(--lv-tap);
  border-radius: 50%;
  color: var(--lv-on-dark-muted);
  transition: color .2s var(--lv-ease), background-color .2s var(--lv-ease);
}
.lv-socials a:hover { color: var(--lv-white); background: rgba(255, 255, 255, .08); }
.lv-socials .lv-icon { width: 24px; height: 24px; }

.lv-footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.lv-footer-nav a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--lv-tap);
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--lv-white);
  text-decoration: none;
}
.lv-footer-nav a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .lv-footer-nav { display: flex; align-items: center; gap: 16px; }
  .lv-footer-nav li { flex: 1 1 0; display: flex; align-items: center; gap: 16px; min-width: 0; }
  .lv-footer-nav li + li::before { content: ""; flex: none; width: 1px; height: 16px; background: rgba(255, 255, 255, .2); }
  .lv-footer-nav a { flex: 1 1 auto; justify-content: center; padding: 8px 16px; }
}

.lv-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
  color: var(--lv-on-dark-muted);
}
.lv-footer-bottom p { margin: 0; }
.lv-legal-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.lv-legal-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--lv-tap);   /* "Terms" alone is only 38px wide */
  min-height: var(--lv-tap);
  font-family: var(--lv-font-form);
  font-size: 13px;
  color: var(--lv-on-dark-muted);
  text-decoration: none;
}
.lv-legal-links a:hover { color: var(--lv-white); text-decoration: underline; }
.lv-footer-disclaimer { max-width: 80ch; font-size: 12px; line-height: 1.5; color: var(--lv-on-dark-muted); }

/* ------------------------------------------------------------------ dialogs */

.lv-modal {
  width: min(760px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(86dvh, 900px);
  padding: 0;
  border: 0;
  border-radius: var(--lv-radius-lg);
  background: var(--lv-white);
  color: var(--lv-text);
  box-shadow: 0 30px 80px rgba(16, 23, 11, .25);
  overflow: hidden;
}
.lv-modal[open] { display: flex; flex-direction: column; animation: lv-pop .22s var(--lv-ease); }
.lv-modal::backdrop { background: rgba(22, 22, 22, .5); }
@keyframes lv-pop { from { transform: translateY(8px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
.lv-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 16px 24px;
  border-bottom: 1px solid var(--lv-line);
}
.lv-modal-head h2 { font-size: 22px; letter-spacing: -.4px; }
.lv-modal-body { overflow-y: auto; padding: 24px; overscroll-behavior: contain; }

/* Legal copy, shared by the modals and the standalone pages. */
.lv-legal { font-size: 15px; line-height: 1.6; color: var(--lv-text); }
.lv-legal h2 { font-size: 22px; margin: 32px 0 12px; color: var(--lv-ink); }
.lv-legal h3 { font-size: 18px; margin: 24px 0 8px; color: var(--lv-ink); }
.lv-legal p, .lv-legal ul, .lv-legal ol { margin: 0 0 14px; }
.lv-legal ul, .lv-legal ol { padding-left: 1.25em; }
.lv-legal li + li { margin-top: 6px; }
.lv-legal a { color: var(--lv-ink-2); text-decoration: underline; }
.lv-legal strong { color: var(--lv-ink); }
.lv-legal .lv-caps { text-transform: uppercase; font-weight: 600; color: var(--lv-ink); }
.lv-legal table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lv-legal th, .lv-legal td { padding: 8px 10px; border: 1px solid var(--lv-line); text-align: left; vertical-align: top; }
.lv-table-scroll { overflow-x: auto; margin-bottom: 14px; }

/* ------------------------------------------------------------------ toast */

.lv-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1100;
  transform: translate(-50%, 16px);
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: var(--lv-pill);
  background: var(--lv-ink-2);
  color: var(--lv-white);
  font-size: 14px;
  box-shadow: 0 12px 30px rgba(16, 23, 11, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--lv-ease), transform .2s var(--lv-ease);
}
.lv-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.lv-toast:empty { display: none; }

/* ------------------------------------------------------------------ simple page (legal, 404, faq) */

.lv-page-head { padding: 48px 0 24px; }
@media (min-width: 992px) { .lv-page-head { padding: 96px 0 40px; } }
.lv-prose { max-width: 760px; }

/* ==========================================================================
   pages/home-sections.css
   ========================================================================== */

/* Home page: "Why choose LIVENZA" bento, "How it works" and "Everyday
   perspectives". Imported by home.css (kept separate so neither file runs
   past ~500 lines). Design: 1280 content at x=80, so these sections sit in
   .lv-shell.lv-shell--wide. */

@media (min-width: 992px) {
  .lv-focus,
  .lv-best,
  .lv-why,
  .lv-how,
  .lv-voices { padding-block: 105px; }
}

/* ------------------------------------------------------------------ shared split head */

.lv-split-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .lv-split-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: 40px;
  }
}
.lv-split-eyebrow { color: var(--lv-ink-3); margin-bottom: 16px; }
.lv-split-eyebrow--text { color: var(--lv-text); }
.lv-split-heading { color: var(--lv-ink-3); margin: 0; }
.lv-split-note {
  flex: none;
  max-width: 360px;
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--lv-ink-3);
}

/* ------------------------------------------------------------------ why choose: bento */

.lv-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 992px) {
  .lv-bento { grid-template-columns: minmax(0, 667fr) minmax(0, 595fr); }
}
.lv-bento-stack { display: grid; gap: 16px; min-width: 0; }

.lv-bento-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  border-radius: var(--lv-radius);
}
.lv-bento-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lv-bento-label {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lv-text);
}
.lv-bento-title {
  margin: 0;
  font-size: clamp(32px, 2.4vw + 14px, 48px);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--lv-ink-3);
}
.lv-bento-title--sm { font-size: clamp(24px, 1vw + 16px, 30px); line-height: 1.4; }
.lv-bento-title--md { font-size: clamp(28px, 1.25vw + 18px, 36px); }
.lv-bento-sub { margin: 0; font-size: 16px; line-height: 1.4; color: var(--lv-text); }

.lv-mark { display: block; width: 15px; height: 16px; flex: none; }

/* 01: know your essentials. Mobile: the photo sits in flow under the head.
   768+: the photo fills the card and the copy floats over its plain left side. */
.lv-bento-essentials {
  display: flex;
  flex-direction: column;
  padding: 32px 24px 24px;
  background: var(--lv-white);
  border: 1px solid var(--lv-line);
}
.lv-bento-essentials-head { order: 1; display: flex; flex-direction: column; gap: 16px; }
.lv-bento-essentials-head .lv-bento-title { margin-top: 4px; }
.lv-bento-essentials-img {
  order: 2;
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  height: auto;
  margin: 8px -24px 0;
}
.lv-bento-chips {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lv-bento-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--lv-pill);
  background: var(--lv-chip);
  font-size: 12px;
  line-height: 1.4;
  color: var(--lv-text);
}
.lv-bento-product { order: 4; margin-top: 28px; }
.lv-bento-product-name {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--lv-text);
}
.lv-bento-product-size { margin: 0; font-size: 12px; line-height: 1.4; color: var(--lv-muted); }

.lv-bento-bar {
  order: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-top: 16px;
}
.lv-bento-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 32px;
  background: var(--lv-line);
}
.lv-bento-toggle-btn {
  min-height: var(--lv-tap);
  padding: 8px 16px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  color: var(--lv-ink-3);
  cursor: pointer;
  transition: background-color .2s var(--lv-ease);
}
.lv-bento-toggle-btn:hover { background: rgba(255, 255, 255, .5); }
.lv-bento-toggle-btn[aria-pressed="true"] {
  background: var(--lv-white);
  box-shadow: 0 2px 8px rgba(70, 86, 53, .07);
}
.lv-bento-explore {
  padding: 10px 16px;
  background: var(--lv-chip);
  color: var(--lv-text-2);
  font-size: 14px;
  font-weight: 500;
}
.lv-bento-explore:hover { background: var(--lv-line); color: var(--lv-ink); }
.lv-bento-explore .lv-icon { width: 20px; height: 20px; }

@media (min-width: 768px) {
  .lv-bento-essentials { min-height: 600px; padding: 35px 35px 25px; background: var(--lv-surface); }
  .lv-bento-essentials-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 65% center;
  }
  .lv-bento-essentials-head { max-width: 400px; }
  .lv-bento-chips { flex-direction: column; align-items: flex-start; margin-top: 72px; }
  .lv-bento-bar { margin-top: 25px; }
  .lv-bento-product { margin-top: auto; padding-top: 32px; }
}
@media (min-width: 992px) {
  .lv-bento-essentials { min-height: 663px; }
  .lv-bento-chips { margin-top: 109px; }   /* design: chips start 109px under the head copy */
}

/* 02: find your focus. The design lays #f7f7ee text straight over a pale
   geometric photo (about 1.3:1). A token-coloured scrim keeps the texture
   visible and holds every line of text at AA: worst case (scrim over pure
   white) is about #54584f, which still puts --lv-on-dark at 6.6:1. */
.lv-bento-focus {
  display: flex;
  flex-direction: column;
  min-height: 315px;
  padding: 32px 24px;
  background: var(--lv-ink-3);
  color: var(--lv-on-dark);
}
.lv-bento-focus::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(47, 51, 46, .9);
}
.lv-bento-focus-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lv-mark--light { width: 29px; height: 32px; filter: invert(1); opacity: .9; }
.lv-bento-focus .lv-bento-label,
.lv-bento-focus .lv-bento-title,
.lv-bento-focus .lv-bento-sub { color: var(--lv-on-dark); }
.lv-bento-focus .lv-bento-sub { font-size: 14px; margin-top: 4px; }

.lv-bento-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 18px;
}
@media (min-width: 480px) {
  .lv-bento-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lv-bento-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--lv-tap);
  padding: 12px;
  border: 1px solid rgba(117, 130, 106, .46);   /* design stroke */
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--lv-on-dark);
  text-decoration: none;
  transition: background-color .2s var(--lv-ease), border-color .2s var(--lv-ease);
}
.lv-bento-link:hover { background: rgba(246, 243, 236, .1); border-color: rgba(246, 243, 236, .6); color: var(--lv-on-dark); }
.lv-bento-focus :focus-visible { outline-color: var(--lv-on-dark); }

@media (min-width: 768px) {
  .lv-bento-focus { padding: 32px; }
}

/* 03: make it yours. The design's own gradient, deepened at both ends so
   the white label and heading stay legible wherever the photo is bright. */
.lv-bento-yours {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 120px;
  min-height: 329px;
  padding: 32px 24px;
  background: var(--lv-ink-3);
  color: var(--lv-white);
}
.lv-bento-yours::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Measured, not guessed: the lightest 2% of the photo behind the label and
     title must still give white text AA (4.5:1 small, 3:1 large). */
  background: linear-gradient(180deg, rgba(32, 41, 26, .8) 0%, rgba(32, 41, 26, .5) 22%, rgba(32, 41, 26, .3) 40%, rgba(32, 41, 26, .72) 58%, rgba(32, 41, 26, .9) 100%);
}
.lv-bento-yours .lv-bento-label,
.lv-bento-yours .lv-bento-title,
.lv-bento-yours .lv-bento-sub { color: var(--lv-white); }
.lv-bento-yours .lv-bento-sub { font-size: 14px; margin-top: 12px; }
.lv-bento-yours-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.lv-bento-arrow .lv-icon { width: 20px; height: 20px; }
.lv-bento-yours :focus-visible { outline-color: var(--lv-white); }

@media (min-width: 768px) {
  .lv-bento-yours { padding: 32px; }
}

/* ------------------------------------------------------------------ how it works */

.lv-how { background: var(--lv-surface); }
.lv-how-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.lv-how-head .lv-split-eyebrow { margin-bottom: 20px; }
.lv-how-head .lv-split-heading { margin-bottom: 12px; }
.lv-how-sub { margin: 0; font-size: 16px; line-height: 1.4; color: var(--lv-text); }
@media (min-width: 992px) {
  .lv-how-head { margin-bottom: 64px; }
  .lv-how-head .lv-split-heading { margin-bottom: 6px; }   /* design: the sub line sits 6px under the 2-line heading */
}

.lv-how-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .lv-how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .lv-how-step { padding-bottom: 8px; }
}
@media (min-width: 1200px) {
  .lv-how-steps { gap: 40px; }
}
.lv-how-step { min-width: 0; padding-top: 24px; border-top: 1px solid var(--lv-line-strong); }
.lv-how-step-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lv-how-num {
  font-size: clamp(36px, 1.2vw + 30px, 48px);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--lv-text);
}
.lv-how-mark {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  flex: none;
  border: 1px solid var(--lv-line-strong);
  border-radius: 50%;
}
.lv-how-mark .lv-mark { width: 22px; height: 24px; }
.lv-how-title {
  margin: 24px 0 0;
  font-size: clamp(20px, 1vw + 14px, 24px);
  line-height: 1.2;
  color: var(--lv-ink-3);
}
.lv-how-copy { max-width: 310px; margin: 16px 0 0; font-size: 14px; line-height: 1.4; color: var(--lv-text); }
@media (min-width: 992px) { .lv-how-title { margin-top: 32px; } }

/* ------------------------------------------------------------------ everyday perspectives */

.lv-voices { background: var(--lv-surface); }
/* Design: the note is 15px in a 320px box, in body-copy grey. */
.lv-voices .lv-split-note { max-width: 190px;   /* design wraps this to two lines */ font-size: 15px; line-height: 1.65; color: var(--lv-text); }
.lv-voices .lv-split-eyebrow { margin-bottom: 20px; }   /* design: 20px eyebrow gap here, 16px in the why head */
.lv-voices-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 992px) {
  .lv-voices-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.lv-voice {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 28px 24px;
  border-radius: 4px;
  background: var(--lv-chip);
}
@media (min-width: 768px) { .lv-voice { padding: 32px; } }
@media (min-width: 992px) { .lv-voice { min-height: 308px; } }
.lv-voice-mark {
  display: block;
  height: 40px;
  margin-top: 16px;
  font-size: 48px;
  line-height: 1.2;
  color: var(--lv-text);
}
.lv-voice-quote { margin: 16px 0 32px; }
.lv-voice-quote p {
  margin: 0;
  font-size: clamp(20px, .8vw + 14px, 24px);
  line-height: 1.2;
  color: var(--lv-ink-3);
}
.lv-voice-by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.lv-voice-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--lv-chip);   /* design: same fill as the card, so only the initial reads */
  font-size: 12px;
  color: var(--lv-text);
}
.lv-voice-name,
.lv-voice-meta { display: block; font-size: 12px; line-height: 1.4; }
.lv-voice-name { margin-bottom: 4px; color: var(--lv-ink-3); }
.lv-voice-meta { color: var(--lv-text); }
.lv-voices-note { max-width: 640px; margin: 24px 0 0; font-size: 14px; line-height: 1.4; color: var(--lv-muted); }

/* ==========================================================================
   pages/home.css
   ========================================================================== */

/* Home page: hero, marquee, collection focus cards, best sellers head.
   FAQ section and CTA band rules live here too since both partials are
   shared with faq.html, which imports this file (see pages/faq.css).
   The why-choose bento, how-it-works and perspectives sections live in
   home-sections.css. */

/* ------------------------------------------------------------------ hero */

/* The bottles must never sit under any text, at any width. With the photo as
   an object-fit: cover background, the bottles scaled with the viewport while
   the type did not, so something always collided somewhere. Instead the layout
   reserves a stage box shaped exactly like the bottles' footprint in the photo
   (image px 550-1235 x 305-750 of 1774x939, bottles plus a 15px margin) and
   pins the photo to that box. Copy, notes and CTA are laid out AROUND the
   stage in normal grid flow, so they cannot overlap it.
   tests/hero-bottles.spec.mjs holds this at every width. */
.lv-hero {
  /* Sampled from the photo's own top and bottom edges so the faded photo
     melts into the panel wherever it does not reach. */
  --lv-hero-haze-top: rgb(225 228 224);
  --lv-hero-haze-bottom: rgb(218 220 216);
  --lv-hero-stage: min(100%, 440px);
  position: relative;
  isolation: isolate;
  background: linear-gradient(var(--lv-hero-haze-top), var(--lv-hero-haze-bottom));
  text-align: center;
}
.lv-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "stage" "notes" "cta";
  justify-items: center;
  row-gap: 24px;
  padding: 48px 20px 40px;
}
.lv-hero-copy { grid-area: copy; display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 640px; }
.lv-hero-copy .lv-display { margin: 0; }
.lv-hero-sub { max-width: 300px; padding-top: 8px; margin: 0; }   /* design: 8px above the sub line, none between eyebrow and h1 */
@media (min-width: 576px) { .lv-hero-sub { max-width: none; } }

/* The stage IS the bottles' box. The photo inside is scaled so its bottle
   region (685px wide in the source) fills the stage width exactly, then
   offset by the region's top-left corner. It sits at z-index -1 in the
   hero's stacking context, behind all text, and is clipped by the panel. */
.lv-hero-stage {
  grid-area: stage;
  position: relative;
  width: var(--lv-hero-stage);
  aspect-ratio: 685 / 445;
}
.lv-hero-bg {
  position: absolute;
  z-index: -1;
  max-width: none;
  width: calc(100% * 1774 / 685);
  height: auto;
  left: calc(100% * -550 / 685);
  top: calc(100% * -305 / 445);
  /* Soft top and bottom edges so the photo fades into the panel haze. */
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  pointer-events: none;
}

.lv-hero-notes {
  grid-area: notes;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
}
.lv-hero-note { display: flex; flex-direction: column; max-width: 300px; text-align: center; }
.lv-hero-note-label { font-size: 14px; line-height: 1.4; text-transform: uppercase; color: var(--lv-ink); margin: 0; }
/* Design: 40px rule inside a 13px-padded row, sage stroke. --lv-line-strong
   is the closest token; the design's #77816a is a decorative hairline. */
.lv-hero-note-rule { display: block; width: 40px; height: 1px; background: var(--lv-line-strong); margin: 13px auto; }
.lv-hero-note-q { font-size: 14px; line-height: 1.4; color: var(--lv-ink); margin: 0; }
.lv-hero-note-a { font-size: 16px; line-height: 1.4; color: var(--lv-ink); margin: 0; padding-top: 7px; }


@media (min-width: 768px) {
  .lv-hero { --lv-hero-stage: min(100%, 600px); }
  .lv-hero-inner { padding: 56px 40px 48px; row-gap: 32px; }
  /* Tablet: the two notes sit side by side under the bottles. */
  .lv-hero-notes { flex-direction: row; justify-content: center; align-items: flex-start; gap: 48px; }
  .lv-hero-note { flex: 1 1 0; }
}

@media (min-width: 1200px) {
  /* Desktop, as designed: notes flank the bottles in the photo's quiet side
     margins. They live in their own grid columns, so they can only ever be
     beside the stage, never on it. */
  .lv-hero { --lv-hero-stage: max(560px, 42vw);   /* 42vw x 1774/685 = 109vw, so the photo always spans the panel */ }
  .lv-hero-inner {
    grid-template-columns: minmax(0, 1fr) var(--lv-hero-stage) minmax(0, 1fr);
    grid-template-areas: "copy copy copy" "note-l stage note-r" "cta cta cta";
    column-gap: 24px;
    row-gap: 16px;
    padding: 53px 32px 40px;
  }
  .lv-hero-notes { display: contents; }
  .lv-hero-note {
    align-self: end;
    margin-bottom: calc(var(--lv-hero-stage) * .07);   /* design: notes sit in the lower half, level with the labels */
    max-width: 100%;
    text-align: left;
  }
  .lv-hero-note:first-child { grid-area: note-l; justify-self: start; margin-left: 19%; }   /* design at 1440: 99px in from the panel edge */
  .lv-hero-note--right { grid-area: note-r; justify-self: end; margin-right: 4%; }         /* design at 1440: 45px in */
  .lv-hero-note-label { width: 138px; }
  .lv-hero-note--right .lv-hero-note-label { width: 155px; }
  .lv-hero-note-rule { margin: 13px 0; }
}

.lv-hero-cta { grid-area: cta; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lv-hero-tag { margin: 0; }

/* ------------------------------------------------------------------ ticker (static, four even cells) */

.lv-ticker { border-bottom: 1px solid var(--lv-line); background: var(--lv-white); }
.lv-ticker-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  max-width: calc(var(--lv-shell-wide) + 2 * var(--lv-gutter));
  margin: 0 auto;
  padding: 24px var(--lv-gutter);
  list-style: none;
}
.lv-ticker-item {
  min-width: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .96px;
  text-transform: uppercase;
  color: var(--lv-muted);
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .lv-ticker-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 29px var(--lv-gutter); }
  .lv-ticker-item { font-size: 12px; }
}

/* ------------------------------------------------------------------ find your focus */

.lv-focus-head { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.lv-focus-eyebrow { color: var(--lv-ink-2); margin-bottom: 20px; }
.lv-focus-heading { color: var(--lv-ink-2); margin-bottom: 20px; letter-spacing: -.045em; }  /* design: 58px, -2.61px */
/* Design: 15px / 24.75px paragraph in a 500px box. */
.lv-focus-sub { max-width: 500px; margin: 0 auto; font-size: 15px; line-height: 22px; color: var(--lv-muted); }

@media (min-width: 992px) { .lv-focus-head { margin-bottom: 43px; } }

.lv-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 576px) {
  .lv-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .lv-focus-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

.lv-focus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  aspect-ratio: 309.5 / 375;
  border-radius: 5px;
  overflow: hidden;
  background: var(--lv-ink-2);
  color: var(--lv-white);
  text-decoration: none;
}
.lv-focus-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 27, 17, .106) 15%, rgba(16, 27, 17, 0) 40%, rgba(16, 23, 11, 0) 40%, rgba(16, 23, 11, .85) 100%);
}
.lv-focus-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--lv-ease);
}
.lv-focus-card:hover .lv-focus-img,
.lv-focus-card:focus-visible .lv-focus-img { transform: scale(1.04); }

.lv-focus-badge {
  position: absolute;
  top: 23px;
  left: 23px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 99px;
  background: rgba(12, 18, 10, .4);
  border: 1px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--lv-white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.21px;
  text-transform: uppercase;
}

.lv-focus-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 23px;
}
.lv-focus-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lv-focus-title {
  font-size: clamp(24px, 1.2vw + 13px, 30px);
  line-height: 1.12;
  letter-spacing: -.04em;
  color: var(--lv-white);
}
.lv-focus-explore {
  font-size: 12px;
  line-height: 1.5;
  color: var(--lv-on-dark);
}
.lv-focus-arrow { width: 40px; height: 40px; background: var(--lv-chip); }
.lv-focus-arrow .lv-icon { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ best sellers */

.lv-best-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.lv-best-eyebrow { color: var(--lv-ink-3); margin-bottom: 16px; }
.lv-best-heading { color: var(--lv-ink-3); margin: 0; }
.lv-best-link { flex: none; }

@media (min-width: 992px) { .lv-best-head { margin-bottom: 42px; } }
/* Design: 302 x 307 product image at the 4-up width (base is 282 x 307). */
@media (min-width: 1200px) { .lv-best .lv-card-media { aspect-ratio: 302 / 307; } }

/* ------------------------------------------------------------------ faq section (shared: home.html + faq.html) */

.lv-faq-section { padding-block: 64px; background: var(--lv-surface); }
@media (min-width: 992px) { .lv-faq-section { padding-block: 105px; } }

.lv-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 992px) {
  .lv-faq-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; }
}
@media (min-width: 1200px) {
  .lv-faq-grid { grid-template-columns: minmax(0, 503px) minmax(0, 1fr); gap: 96px; }
}
/* On home every section sits on the 1280 design grid (x=80). faq.html keeps
   the 1200 shell its page head uses. */
[data-page="home"] .lv-faq-section .lv-shell { max-width: calc(var(--lv-shell-wide) + 2 * var(--lv-gutter)); }

.lv-faq-intro { min-width: 0; }
.lv-faq-eyebrow { color: var(--lv-ink-2); margin-bottom: 24px; }
.lv-faq-heading { color: var(--lv-ink-2); margin-bottom: 24px; }
.lv-faq-sub { max-width: 270px; font-size: 16px; line-height: 1.4; }

.lv-accordion-item-head { margin: 0; }

/* Design: 60px headings carry no tracking (base .lv-h2 has -0.02em), and FAQ
   questions are 16px, not the 18px base accordion size. */
.lv-best-heading, .lv-split-heading, .lv-faq-heading { letter-spacing: 0; }
[data-page="home"] .lv-accordion-trigger,
[data-page="faq"] .lv-accordion-trigger { font-size: 16px; line-height: 1.4; }

/* ------------------------------------------------------------------ cta band (shared: home.html + faq.html) */

.lv-cta-band {
  position: relative;
  isolation: isolate;
  background: var(--lv-ink-2);
  color: var(--lv-white);
}
.lv-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .95;
}
/* A crop-proof scrim behind the text column only: object-fit: cover puts a
   different part of the photo (sometimes the bright sky) under the copy at
   different viewport widths, which can wash out --lv-on-dark/--lv-mist
   below AA. This gradient sits ABOVE the <img> (z-index 1 > 0: a same-value
   z-index would lose to the image on paint order since the image comes
   later in the DOM) and is tuned to stay dark only under the text column,
   then fall off quickly so the photo reads at near-full vibrancy past it,
   matching the reference design instead of flattening the whole band. */
.lv-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Pure left-to-right (90deg, not a tilted angle) with fixed px stops, so
     the dark zone tracks the text column's actual horizontal extent (right
     edge shifts between ~644px and ~740px as the band's padding grows
     across breakpoints) with no vertical skew throwing off elements near
     the top of the column (a tilted angle put the eyebrow line, being near
     the top, further along the fade than its x-position alone implied). */
  background: linear-gradient(90deg, rgba(37, 40, 36, .97) 0px, rgba(37, 40, 36, .95) 500px, rgba(37, 40, 36, .87) 680px, rgba(37, 40, 36, .55) 760px, rgba(37, 40, 36, .2) 860px, rgba(37, 40, 36, 0) 960px);
}
/* At desktop widths the text column sits inside the first ~35% of the band,
   so the prototype's own gradient (#2F332E at .9 / .784 / .3) lets the whole
   photo show through, as the design intends. Its first two stops are nudged
   (.93 to 34%, .84 at 50%) because the design values leave the mist copy at
   3.6:1 over the brightest sky; tools/proto/contrast.mjs guards this. */
@media (min-width: 1200px) {
  .lv-cta-band::before {
    background: linear-gradient(90deg, rgba(47, 51, 46, .93) 34%, rgba(47, 51, 46, .84) 50%, rgba(47, 51, 46, .3) 100%);
  }
}
@media (max-width: 767.98px) {
  .lv-cta-band::before {
    background: linear-gradient(180deg, rgba(37, 40, 36, .95) 0%, rgba(37, 40, 36, .92) 60%, rgba(37, 40, 36, .88) 70%, rgba(37, 40, 36, .5) 78%, rgba(37, 40, 36, .15) 90%, rgba(37, 40, 36, 0) 100%);
  }
}
.lv-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) { .lv-cta-inner { padding: 80px 48px; } }
/* Design: copy starts 186px into the 1408px band (13.2%) with 80px above and below. */
@media (min-width: 1200px) { .lv-cta-inner { padding: 80px 0 80px 13.2%; max-width: calc(13.2% + 440px); } }

.lv-cta-eyebrow { color: var(--lv-mist); }
.lv-cta-heading { color: var(--lv-white); margin-bottom: 8px; }
.lv-cta-copy { color: var(--lv-mist); font-size: 14px; line-height: 1.4; max-width: 345px; margin-bottom: 8px; }

.lv-cta-form { display: flex; flex-direction: column; gap: 8px; }
/* .lv-error defaults to --lv-danger, which fails AA on this dark ink-2
   background (about 1.9:1). Errors here still read via text + role="alert";
   colour is reinforced with weight, not relied on alone. */
.lv-cta-form .lv-error { color: var(--lv-on-dark); font-weight: 600; }
.lv-cta-success { color: var(--lv-on-dark); font-size: 15px; line-height: 1.4; max-width: 380px; }

/* ==========================================================================
   pages/about.css
   ========================================================================== */

/* About page - page-scoped tokens for decorative surfaces not covered by base.css */
.av-values,
.av-pace {
  --av-panel: #e5e8df;
  --av-surface: #eceee5;
}

.av-closer {
  --av-closer-eyebrow: #b0bf9c; /* design sage, dark closer only */
  --av-closer-copy: #bec7b1;
}

/* ---- Hero ---- */
/* Prototype: 715px band, media 615x590 starting 54px below the header. */
.av-hero {
  padding: 40px 0 56px;
}

@media (min-width: 992px) {
  .av-hero {
    padding: 54px 0 71px;
  }
}

.av-hero .lv-eyebrow,
.av-philosophy .lv-eyebrow,
.av-values .lv-eyebrow,
.av-pace .lv-eyebrow {
  color: var(--lv-ink-3);
}

.av-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 992px) {
  .av-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}

.av-hero-text {
  min-width: 0;
}

.av-hero-h1 {
  margin-top: 24px;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.av-hero-copy {
  margin-top: 24px;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--lv-muted);
}

.av-hero-cta {
  margin-top: 32px;
}

.av-hero-media {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 615 / 590;
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .av-hero-media {
    max-width: none;
  }
}

.av-hero-media-frame {
  position: absolute;
  overflow: hidden;
  background: var(--lv-sage);
}

.av-hero-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.av-hero-media-frame--main {
  left: 17.02%;
  top: 0;
  width: 82.98%;
  height: 84.75%;
  border-radius: 4px;
}

.av-hero-media-frame--small {
  left: 0;
  top: 48.31%;
  width: 42.99%;
  height: 51.69%;
  border-radius: var(--lv-radius);
  background: var(--lv-cream);
  padding: 7px;
  box-shadow: 0 8px 24px rgba(37, 40, 36, 0.14);
}

.av-hero-media-frame--small img {
  border-radius: calc(var(--lv-radius) - 3px);
}

/* ---- Philosophy ---- */
.av-philosophy {
  border-top: 1px solid var(--lv-line);
}

@media (min-width: 992px) {
  .av-philosophy { padding-block: 80px; }
}

.av-philosophy-h2 {
  margin-top: 24px;
  letter-spacing: -0.045em;
}

.av-philosophy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 992px) {
  .av-philosophy-grid {
    grid-template-columns: minmax(0, 564fr) minmax(0, 631fr);
    gap: 80px;
  }
}

.av-philosophy-head {
  min-width: 0;
}

.av-philosophy-copy {
  min-width: 0;
}

.av-lede {
  font-family: var(--lv-font);
  font-weight: 400;
  font-size: clamp(20px, 1.6vw + 12px, 27px);
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--lv-ink-2);
  margin: 0 0 24px;
}

@media (min-width: 992px) {
  .av-lede { line-height: 42px; }
}

.av-philosophy-p {
  font-size: 16px;
  line-height: 22.4px;
  color: var(--lv-muted);
}

.av-philosophy-p + .av-philosophy-p {
  margin-top: 16px;
}

@media (min-width: 992px) {
  .av-philosophy-p + .av-philosophy-p { margin-top: 20px; }
  .av-lede { max-width: 580px; }
}

/* ---- What matters to us ---- */
/* Prototype: no top padding (the 80px under the philosophy band is the gap),
   24px under the heading, then the cards and 120px before the closer panel. */
.av-values {
  padding-top: 0;
}

@media (min-width: 992px) {
  .av-values { padding-bottom: 96px; }
}

.av-values-head {
  margin-bottom: 24px;
}

.av-values-head .lv-h2 {
  margin-top: 24px;
}

.av-values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .av-values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .av-value-card { min-height: 275px; }
}

.av-value-card {
  min-width: 0;
  background: var(--av-panel);
  border-radius: 4px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.av-value-card .lv-small {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--lv-text);
}

.av-value-index {
  font-family: var(--lv-font);
  font-size: 12px;
  line-height: 25px;
  color: var(--lv-text);
  letter-spacing: 0.11em;
}

.av-value-title {
  font-family: var(--lv-font);
  font-weight: 400;
  font-size: clamp(22px, 1.2vw + 14px, 30px);
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: var(--lv-ink);
  margin: 40px 0 0;
}

/* ---- Clarity is in the details (dark closer) ---- */
/* Prototype: the panel sits flush against the bands above and below. */
.av-closer {
  padding: 0;
}

.av-closer-panel {
  position: relative;
  background: var(--lv-ink-2);
  overflow: hidden;
  padding: 56px 0;
}

@media (min-width: 992px) {
  .av-closer-panel {
    padding: 64px 0 62px;
    min-height: 596px;
  }
}

.av-closer-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.av-closer-overlay {
  position: absolute;
  inset: 0;
  /* Mobile stacks the copy over the photo, so the scrim runs top to bottom
     and stays dark until the copy ends. */
  background: linear-gradient(180deg, rgba(37, 40, 36, .92) 0%, rgba(37, 40, 36, .88) 70%, rgba(37, 40, 36, .55) 100%);
}

/* Desktop: the design's 270deg fade. Figma paints it over the photo without
   fully hiding it (the prototype shows foliage through the left column), so
   the dark end is .88 rather than solid ink; tools/proto/contrast.mjs keeps
   the copy at AA over the brightest pixels. */
@media (min-width: 992px) {
  .av-closer-overlay {
    background: linear-gradient(270deg, rgba(37, 40, 36, .1) 28%, rgba(37, 40, 36, .88) 66%);
  }
}

/* Below 1200 the 430px copy column reaches further across the band, so the
   dark end starts sooner. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .av-closer-overlay {
    background: linear-gradient(270deg, rgba(37, 40, 36, .1) 20%, rgba(37, 40, 36, .88) 50%);
  }
}

.av-closer-content {
  position: relative;
  z-index: 1;
}

.av-closer-content > * {
  max-width: 605px;
}

.av-closer-eyebrow {
  font-family: var(--lv-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--av-closer-eyebrow);
  margin: 0;
}

.av-closer-h2 {
  font-family: var(--lv-font);
  font-weight: 400;
  font-size: clamp(38px, 3.6vw + 12px, 66px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--lv-on-dark);
  margin: 24px 0;
}

.av-closer-content > .av-closer-copy {
  font-family: var(--lv-font);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.24px;
  color: var(--av-closer-copy);
  margin: 0 0 24px;
  max-width: 430px;
}

.av-closer-btn {
  margin-top: 16px;   /* design: pill sits ~27px under the copy's last line */
  min-height: 52px;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 20px;
  background: var(--lv-cream);
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.av-closer-btn:hover {
  background: var(--lv-white);
}

/* ---- Your pace. Your perspective. ---- */
.av-pace {
  background: var(--av-surface);
}

.av-pace-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .av-pace-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
}

@media (min-width: 992px) {
  .av-pace { padding-block: 80px; }
}

.av-pace-left {
  min-width: 0;
}

.av-pace-h2 {
  margin-top: 24px;
}

.av-pace-copy {
  margin: 24px 0 30px;
  max-width: 40ch;
  font-size: 15px;
  line-height: 22px;
  color: var(--lv-muted);
}

.av-faq-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--lv-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--lv-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--lv-muted);
  padding-bottom: 4px;
}

.av-faq-link:hover {
  color: var(--lv-ink-2);
}

.av-pace-list {
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.av-pace-item {
  border-top: 1px solid #cdd3c2; /* design hairline on the sage band */
  padding: 24px 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 0;
}

.av-pace-item > :not(.av-pace-index) {
  grid-column: 2;
}

.av-pace-index {
  grid-column: 1;
  grid-row: 1;
  padding-top: 4px;
  font-family: var(--lv-font);
  font-size: 11px;
  color: var(--lv-muted);
  letter-spacing: 0.04em;
  margin-bottom: 0;
}

.av-pace-item-title {
  font-family: var(--lv-font);
  font-weight: 400;
  font-size: clamp(18px, 0.6vw + 14px, 22px);
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--lv-ink);
  margin: 0 0 16px;
}

.av-pace-item .lv-small {
  font-size: 14px;
  line-height: 20px;
  color: var(--lv-text);
  margin: 0;
}

/* ---- Final CTA ---- */
.av-final-inner {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.av-final-mark {
  width: 38px;
  height: auto;
  opacity: 0.7;
  margin-bottom: 0;
}

.av-final-eyebrow {
  font-family: var(--lv-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lv-muted);
  margin: 16px 0 24px;
}

.av-final-h2 {
  font-family: var(--lv-font);
  font-weight: 400;
  font-size: clamp(36px, 4vw + 14px, 64px);
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: var(--lv-ink);
  margin: 0 0 24px;
}

@media (min-width: 992px) {
  .av-final-h2 { line-height: 72px; }
  .av-final { padding-block: 80px; }
}

.av-final-copy {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--lv-muted);
}

/* Prototype: the philosophy row is 347.8px tall, leaving air under the copy. */
@media (min-width: 992px) {
  .av-philosophy-grid { min-height: 348px; }
}

/* ==========================================================================
   pages/contact.css
   ========================================================================== */

/* Contact page */
.cv-contact {
  /* Prototype: 100px above the columns, 120px below (64px on small screens). */
  padding-block: 48px 64px;
}
@media (min-width: 992px) {
  .cv-contact { padding-block: 100px 120px; }
}

.cv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .cv-grid {
    grid-template-columns: minmax(0, 519fr) minmax(0, 617fr);
    gap: 64px;
    align-items: start;
  }
}

.cv-info {
  min-width: 0;
}

.cv-h1 {
  margin-top: 16px;
  font-family: var(--lv-font);
  font-weight: 400;
  font-size: clamp(32px, 2vw + 20px, 48px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lv-ink);
}

.cv-intro {
  margin-top: 16px;
  max-width: none;
  font-size: 16px;
  line-height: 1.4;
  color: var(--lv-text-2);
}

.cv-cards {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cv-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.cv-card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lv-chip);
  color: var(--lv-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cv-card-body {
  min-width: 0;
}

.cv-card-title {
  font-family: var(--lv-font);
  font-weight: 600;
  font-size: 16px;
  color: var(--lv-ink);
  margin: 0 0 6px;
  line-height: 1.4;
}

.cv-card-line {
  font-size: 16px;
  color: var(--lv-text-2);
  line-height: 1.4;
  margin: 0;
  word-break: break-word;
}

.cv-card-line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cv-card-sub {
  font-size: 14px;
  line-height: 1.4;
  color: var(--lv-muted);
  margin: 6px 0 0;
}

.cv-hours {
  margin-top: 40px;
  background: var(--lv-sage);
  border-radius: var(--lv-radius);
  padding: 24px;
}



/* ---- Form panel ---- */
.cv-panel {
  min-width: 0;
  background: var(--lv-white);
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  padding: 28px 20px;
}

@media (min-width: 768px) {
  .cv-panel {
    padding: 48px;
  }
}

.cv-panel-title {
  font-family: var(--lv-font);
  font-weight: 400;
  font-size: clamp(26px, 1vw + 20px, 32px);
  line-height: 1.3;
  color: var(--lv-ink);
  margin: 0 0 32px;
}

.cv-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cv-form .lv-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

.cv-form .lv-field { gap: 8px; }

.cv-form .lv-input,
.cv-form .lv-textarea {
  min-height: 52px;
  padding: 16px;
  font-size: 14px;
  border-color: var(--lv-line-strong);
}

.cv-form .lv-textarea {
  min-height: 120px;
  resize: vertical;
}

.cv-success {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: var(--lv-radius);
  background: var(--lv-sage);
  color: var(--lv-ink-2);
  font-family: var(--lv-font);
  font-size: 14px;
  line-height: 1.5;
}

.cv-success:focus {
  outline: 2px solid var(--lv-ink);
  outline-offset: 2px;
}

/* --lv-muted is 4.4:1 on the sage hours card; use the body text tone there. */
.cv-hours .cv-card-sub {
  color: var(--lv-text);
}

/* ==========================================================================
   pages/faq.css
   ========================================================================== */

/* FAQ page. faq-section.html and cta-band.html are shared partials whose
   component styles live in home.css (the page that owns them first); this
   file imports that stylesheet so the two partials render identically here,
   then adds the standalone-page-only rules below. */

.lv-faq-page-eyebrow { color: var(--lv-muted); margin-bottom: 16px; }
[data-page="faq"] .lv-page-head .lv-display { margin-bottom: 16px; }   /* the lead sat 8px under the 72px title */

.lv-faq-more { padding-block: 64px; }
@media (min-width: 992px) { .lv-faq-more { padding-block: 96px; } }

.lv-faq-more-head { max-width: 640px; margin-bottom: 32px; }
.lv-faq-more-eyebrow { color: var(--lv-ink-2); margin-bottom: 12px; }
.lv-faq-more-heading { color: var(--lv-ink-2); margin: 0; }

.lv-faq-more-accordion { max-width: 800px; }

/* ==========================================================================
   pages/products.css
   ========================================================================== */

/*
 * Products listing page: hero intro, collection filter chips, sort, grid,
 * pagination. Reuses base.css tokens and .lv-grid / .lv-card from base.css.
 */

/* ------------------------------------------------------------------ hero */

.lv-products-hero {
  padding-top: 48px;
  padding-bottom: 24px;
}
@media (min-width: 992px) {
  .lv-products-hero { padding-top: 64px; padding-bottom: 40px; }
}
.lv-products-title {
  margin-top: 8px;
  font-weight: 700;
  color: var(--lv-text);
  letter-spacing: 0;
}
.lv-products-intro {
  margin-top: 16px;
  max-width: 680px;
  font-size: clamp(16px, .4vw + 14px, 18px);
  color: var(--lv-muted);
}
.lv-products-intro sup { font-size: .75em; }
.lv-products-disclaimer {
  margin-top: 8px;
  max-width: 640px;
}
.lv-products-disclaimer sup { font-size: 1em; }

/* ------------------------------------------------------------------ controls row */

.lv-products-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px 24px;
}

.lv-products-chipbar {
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lv-products-chipbar::-webkit-scrollbar { display: none; }

.lv-products-chips {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: max-content;
  border-bottom: 1px solid var(--lv-line-2);
}
@media (min-width: 768px) { .lv-products-chips { gap: 32px; } }

.lv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--lv-tap);   /* short labels ("All", "CBD") still get a 44px-wide target */
  min-height: var(--lv-tap);
  padding: 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--lv-muted);
  font-family: var(--lv-font-ui);
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}
@media (min-width: 768px) { .lv-chip { font-size: 18px; } }
.lv-chip:hover { color: var(--lv-text-2); }
.lv-chip[aria-pressed="true"] {
  color: var(--lv-text);
  font-weight: 700;
  border-bottom-color: var(--lv-text);
}

.lv-products-sort { flex: none; }
.lv-products-sort-select {
  width: auto;
  min-width: 194px;
  min-height: var(--lv-tap);
  padding: 10px 44px 10px 16px;
  border-radius: var(--lv-pill);
  border-color: var(--lv-line-strong);
  font-family: var(--lv-font-form);
  font-size: 14px;
  color: var(--lv-text-2);
  font-weight: 500;
}
.lv-products-sort-select:hover { border-color: var(--lv-ink-2); }

/* ------------------------------------------------------------------ grid + empty state */

.lv-products-results { padding-bottom: 16px; }
.lv-products-grid { margin: 0; }
.lv-products-grid[hidden] { display: none; } /* .lv-grid sets display:grid; author rules beat the UA [hidden] rule */

.lv-products-empty {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 64px 16px;
  text-align: center;
  color: var(--lv-text);
  font-size: 16px;
}
.lv-products-empty[hidden] { display: none; }

/* ------------------------------------------------------------------ footer row: count + pagination */

.lv-products-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px 64px;
}

.lv-products-count {
  margin: 0;
  font-family: var(--lv-font-form);
  font-size: 13px;
  color: var(--lv-muted);
}

.lv-products-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lv-products-pagination[hidden] { display: none; }

.lv-products-pagenums { display: flex; align-items: center; gap: 8px; }

.lv-page-btn {
  display: inline-grid;
  place-items: center;
  min-width: var(--lv-tap);
  min-height: var(--lv-tap);
  padding: 0 12px;
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-radius);
  background: var(--lv-white);
  color: var(--lv-ink);
  font-family: var(--lv-font-form);
  font-size: 13px;
  cursor: pointer;
  transition: background-color .2s var(--lv-ease), color .2s var(--lv-ease), border-color .2s var(--lv-ease);
}
.lv-page-btn:hover { border-color: var(--lv-ink-2); }
.lv-page-btn[aria-current="page"] {
  background: var(--lv-ink-2);
  border-color: var(--lv-ink-2);
  color: var(--lv-white);
}
.lv-page-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
.lv-page-btn[disabled]:hover { border-color: var(--lv-line-strong); }

/* ==========================================================================
   pages/cart.css
   ========================================================================== */

/* ---------------------------------------------------------------- cart head */

.lv-cart-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
}

/* Section between the page head and the related grid renders tighter than
   the default .lv-section rhythm, since the head already carries top space. */
.lv-section--tight { padding-block: 16px 64px; }
@media (min-width: 992px) { .lv-section--tight { padding-block: 16px 80px; } }

/* ---------------------------------------------------------------- layout */

.lv-cart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 992px) {
  .lv-cart-grid { grid-template-columns: minmax(0, 780px) minmax(320px, 380px); gap: 40px; }
}

.lv-cart-main { min-width: 0; }

/* ---------------------------------------------------------------- item rows */

.lv-cart-list { list-style: none; margin: 0 0 16px; padding: 0; }

.lv-cart-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--lv-line-2);
}
.lv-cart-item:first-child { padding-top: 0; }

.lv-cart-item-info {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1 1 260px;
}

.lv-cart-item-thumb {
  width: 80px;
  height: 80px;
  flex: none;
  border-radius: var(--lv-radius);
  border: 1px solid var(--lv-line-2);
  object-fit: cover;
  background: var(--lv-surface);
}

.lv-cart-item-text { min-width: 0; display: grid; gap: 4px; }
.lv-cart-item-name { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--lv-ink-3); }
.lv-cart-item-meta { font-size: 12px; line-height: 1.4; color: var(--lv-muted); }

.lv-cart-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 10px 0;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--lv-ink-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.lv-cart-remove:hover { color: var(--lv-danger); }
.lv-cart-remove svg { width: 14px; height: 14px; flex: none; }

.lv-cart-item-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1 1 320px;
  justify-content: flex-end;
}
@media (max-width: 480px) {
  .lv-cart-item-actions { justify-content: space-between; gap: 16px; flex-basis: 100%; }
}

.lv-cart-item-price,
.lv-cart-item-total {
  display: grid;
  gap: 2px;
  text-align: right;
  min-width: 64px;
}
.lv-cart-item-price-label,
.lv-cart-item-total-label { font-size: 13px; color: var(--lv-muted); }
.lv-cart-item-price-value { font-size: 16px; font-weight: 600; color: var(--lv-ink-3); }
.lv-cart-item-total-value { font-size: 18px; font-weight: 700; color: var(--lv-ink-3); }

.lv-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-radius);
  padding: 2px;
}
.lv-qty-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: calc(var(--lv-radius) - 2px);
  background: transparent;
  color: var(--lv-ink-3);
  cursor: pointer;
  transition: background-color .15s var(--lv-ease);
}
.lv-qty-btn:hover:not(:disabled) { background: var(--lv-chip); }
.lv-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.lv-qty-btn svg { width: 16px; height: 16px; }
.lv-qty-value {
  min-width: 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--lv-ink-3);
}

/* ---------------------------------------------------------------- promo row */

.lv-promo {
  display: flex;
  gap: 12px;
  padding-top: 16px;
}
.lv-promo .lv-input { flex: 1 1 auto; }

/* ---------------------------------------------------------------- empty state */

.lv-cart-empty {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: 48px 0;
  max-width: 460px;
}

/* ---------------------------------------------------------------- summary */

.lv-cart-summary {
  display: grid;
  gap: 20px;
  padding: 24px;
  background: var(--lv-white);
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-radius);
}

.lv-summary-lines { display: grid; gap: 12px; margin: 0; }
.lv-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lv-summary-row dt { color: var(--lv-text-2); }
.lv-summary-strong { font-weight: 600; color: var(--lv-ink-3); }

.lv-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--lv-line-strong);
}
.lv-summary-total-amount { font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--lv-ink-3); }

.lv-summary-trust {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lv-summary-trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--lv-muted);
}
.lv-summary-trust svg { flex: none; color: var(--lv-muted); }

/* ---------------------------------------------------------------- related */

.lv-related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}

/* ---------------------------------------------------------------- design type
   The cart frame uses heavier type than the editorial pages: a 48px semibold
   title with a plain muted count beside it, a bold 14px eyebrow, and a
   compact summary card (18px bold title, 14px lines, 16px total label). */

.lv-page-head.lv-cart-head { padding: 32px 0 16px; }
@media (min-width: 992px) { .lv-page-head.lv-cart-head { padding: 40px 0 16px; } }

.lv-cart-head .lv-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--lv-muted); }
.lv-cart-head h1,
.lv-cart-related-title { font-weight: 600; color: var(--lv-ink-3); }
.lv-cart-related-title { color: var(--lv-text); }
.lv-cart-related .lv-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--lv-muted); }

/* Plain text, not a pill: the header badge owns .lv-cart-count. */
.lv-cart-title-count { font-size: 18px; line-height: 1.4; color: var(--lv-muted); }

.lv-cart-summary > .lv-h3 { font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--lv-ink-3); }
.lv-cart-summary .lv-summary-row > * { font-size: 14px; }
.lv-summary-row dt { font-weight: 400; }           /* Bootstrap reboot bolds dt */
.lv-summary-row dd { margin: 0; }
.lv-summary-total .lv-h3 { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--lv-ink-3); }

/* ==========================================================================
   pages/product.css
   ========================================================================== */

/*
 * Product detail page (src/pages/product.html, one page per catalog product).
 * Figma: 1440 frame, 120px side padding, gallery 580 + details 560 with an
 * 80px gap. Stacks to one column below 768px. Uses base.css tokens only.
 */

/* ------------------------------------------------------------------ breadcrumb */

.lv-pd-crumbs { padding-top: 8px; padding-bottom: 0; }
.lv-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--lv-font-form);
  font-size: 12px;
  line-height: 1.4;
}
.lv-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.lv-crumbs li + li::before { content: "/"; padding: 0 8px; color: var(--lv-muted); }
.lv-crumbs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--lv-tap);
  min-height: var(--lv-tap);
  color: var(--lv-muted);
  text-decoration: none;
}
.lv-crumbs a:hover { color: var(--lv-ink); text-decoration: underline; }
.lv-crumbs [aria-current="page"] { font-weight: 400; color: var(--lv-text); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ main layout */

.lv-pd {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-top: 16px;
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .lv-pd {
    grid-template-columns: minmax(0, 580fr) minmax(0, 560fr);
    gap: clamp(32px, 5.5vw, 80px);
    align-items: start;
    padding-top: 32px;
    padding-bottom: 64px;
  }
  .lv-pd-gallery { position: sticky; top: 24px; }
}

/* ------------------------------------------------------------------ gallery */

.lv-pd-main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--lv-line-2);
  border-radius: var(--lv-radius);
  background: var(--lv-white);
}
.lv-pd-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .35s var(--lv-ease), opacity .2s var(--lv-ease);
}
.lv-pd-main[data-view="lifestyle"] img { object-fit: cover; }
.lv-pd-main-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--lv-pill);
  background: var(--lv-white);
  color: var(--lv-ink-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* Label close-up: the same render, scaled onto the label. Origins measured on
   each render format. */
.lv-pd-gallery { --zoom-origin: 50% 62%; --zoom-scale: 1.8; }
.lv-pd-gallery[data-format="gummies"] { --zoom-origin: 50% 62%; --zoom-scale: 1.8; }
.lv-pd-gallery[data-format="oil"] { --zoom-origin: 50% 66%; --zoom-scale: 2.3; }
.lv-pd-gallery[data-format="cream"] { --zoom-origin: 50% 58%; --zoom-scale: 1.9; }
.lv-pd-main[data-view="label"] img,
.lv-pd-thumb-label img {
  transform-origin: var(--zoom-origin);
  transform: scale(var(--zoom-scale));
}

.lv-pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 136px));
  gap: 12px;
  margin-top: 16px;
}
.lv-pd-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: var(--lv-tap);
  min-height: var(--lv-tap);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--lv-line-strong);
  border-radius: 12px;
  background: var(--lv-white);
  cursor: pointer;
  transition: border-color .2s var(--lv-ease), box-shadow .2s var(--lv-ease);
}
.lv-pd-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lv-pd-thumb-lifestyle img { object-fit: cover; }
.lv-pd-thumb:hover { border-color: var(--lv-text); }
/* 2px ring drawn inside so the thumb doesn't shift when it becomes active. */
.lv-pd-thumb[aria-pressed="true"] { border-color: var(--lv-text); box-shadow: inset 0 0 0 1px var(--lv-text); }

/* ------------------------------------------------------------------ details */

.lv-pd-info { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .lv-pd-info { gap: 24px; } }
/* pill, title and meta line read as one header block (8px apart in Figma) */
.lv-pd-title, .lv-pd-sub { margin-top: -8px; }
@media (min-width: 768px) { .lv-pd-title, .lv-pd-sub { margin-top: -16px; } }

.lv-pd-pill {
  align-self: flex-start;
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--lv-pill);
  background: var(--lv-surface);
  color: var(--lv-ink-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.lv-pd-title {
  font-size: clamp(32px, 2.2vw + 16px, 48px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--lv-text);
  overflow-wrap: anywhere;
}
.lv-pd-sub { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--lv-muted); }

.lv-pd-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.lv-pd-price { font-size: clamp(28px, 1vw + 22px, 36px); font-weight: 700; line-height: 1.2; color: var(--lv-ink-2); }
.lv-pd-price-note { font-size: 14px; color: var(--lv-muted); }

.lv-pd-lede { margin: 0; font-size: 15px; line-height: 22px; color: var(--lv-text-2); }

/* ------------------------------------------------------------------ purchase options */

.lv-pd-buy { display: flex; flex-direction: column; gap: 16px; }
.lv-pd-plans { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }

.lv-plan {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 19px 16px;
  border: 1px solid var(--lv-line-strong);
  border-radius: 12px;
  background: var(--lv-white);
  cursor: pointer;
  transition: border-color .2s var(--lv-ease), box-shadow .2s var(--lv-ease);
}
.lv-plan:hover { border-color: var(--lv-text); }
/* The radio stays in the accessibility tree and takes focus; the drawn dot
   and card border show its state. */
.lv-plan-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.lv-plan-dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--lv-text);
  border-radius: 50%;
}
.lv-plan-dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lv-ink-2);
  transform: scale(0);
  transition: transform .2s var(--lv-ease);
}
.lv-plan:has(.lv-plan-input:checked),
.lv-plan.is-checked { border-color: var(--lv-ink-2); box-shadow: inset 0 0 0 1px var(--lv-ink-2); }
.lv-plan-input:checked + .lv-plan-dot { border-color: var(--lv-ink-2); }
.lv-plan-input:checked + .lv-plan-dot::after { transform: scale(1); }
.lv-plan:has(.lv-plan-input:focus-visible) { outline: 2px solid var(--lv-ink-2); outline-offset: 3px; }

.lv-plan-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.lv-plan-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lv-ink-2);
}
.lv-plan-badge {
  padding: 2px 8px;
  border-radius: var(--lv-pill);
  background: var(--lv-ink-2);
  color: var(--lv-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.lv-plan-note { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--lv-muted); }
.lv-plan-price { flex: none; font-size: 14px; font-weight: 700; color: var(--lv-ink-2); }

/* ------------------------------------------------------------------ quantity + CTAs */

.lv-pd-actions { display: flex; gap: 12px; }
.lv-pd-add { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.lv-pd-now { text-transform: uppercase; }

.lv-qty {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 54px;
  padding: 0 4px;
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-pill);
  background: var(--lv-white);
}
.lv-qty:focus-within { border-color: var(--lv-ink-2); }
.lv-qty-btn {
  display: grid;
  place-items: center;
  width: var(--lv-tap);
  height: var(--lv-tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lv-ink-2);
  cursor: pointer;
}
.lv-qty-btn:hover { background: var(--lv-surface); }
.lv-qty-btn[aria-disabled="true"] { color: var(--lv-line-strong); cursor: not-allowed; }
.lv-qty-btn[aria-disabled="true"]:hover { background: transparent; }
.lv-qty-input {
  width: var(--lv-tap);
  height: var(--lv-tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lv-ink-2);
  font: 600 16px/1 var(--lv-font-ui);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.lv-qty-input::-webkit-outer-spin-button,
.lv-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lv-qty-input:focus { outline: none; }
.lv-qty-input:focus-visible { outline: 2px solid var(--lv-ink-2); outline-offset: 2px; border-radius: 4px; }
.lv-pd-qty-hint { margin: -4px 0 0; font-size: 13px; color: var(--lv-text-2); }

/* ------------------------------------------------------------------ trust + notes */

.lv-pd-trust { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lv-pd-trust li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--lv-text); }
.lv-pd-trust .lv-icon,
.lv-pd-benefits .lv-icon { flex: none; margin-top: 1px; color: var(--lv-ink-3); }

.lv-pd-cbd-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--lv-radius);
  background: var(--lv-surface);
  font-size: 13px;
  line-height: 1.5;
  color: var(--lv-text-2);
}
.lv-pd-cbd-note strong { color: var(--lv-ink-2); }
.lv-pd-disclaimer { margin: 0; font-size: 12px; line-height: 1.5; color: var(--lv-muted); }

/* ------------------------------------------------------------------ tabs */

.lv-pd-tabs { padding-top: 24px; padding-bottom: 56px; }
@media (min-width: 768px) { .lv-pd-tabs { padding-top: 48px; padding-bottom: 80px; } }

.lv-tablist {
  display: flex;
  gap: clamp(16px, 4vw, 32px);
  overflow-x: auto;
  border-bottom: 1px solid var(--lv-line-2);
  scrollbar-width: none;
}
.lv-tablist::-webkit-scrollbar { display: none; }
.lv-tab {
  position: relative;
  flex: none;
  min-height: var(--lv-tap);
  padding: 8px 4px 16px;
  border: 0;
  background: transparent;
  color: var(--lv-muted);
  font-family: var(--lv-font-ui);
  font-size: clamp(16px, .4vw + 14px, 18px);
  line-height: 1.4;
  cursor: pointer;
}
.lv-tab:hover { color: var(--lv-ink-2); }
.lv-tab[aria-selected="true"] { color: var(--lv-text); font-weight: 700; }
.lv-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--lv-text);
}
.lv-tab:focus-visible { outline-offset: -2px; }

.lv-tabpanel { padding: 32px 0 0; }
.lv-tabpanel:focus-visible { outline-offset: 8px; border-radius: 4px; }

.lv-pd-h2 { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--lv-text); margin-bottom: 16px; }
.lv-pd-h3 { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--lv-text); margin: 24px 0 8px; }
.lv-pd-prose { max-width: 1200px; }
.lv-pd-prose p, .lv-pd-text { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--lv-text-2); }
.lv-pd-benefits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lv-pd-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--lv-text-2); }
.lv-pd-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; }
@media (min-width: 768px) { .lv-pd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lv-pd-warnings { margin: 0; padding-left: 18px; }
.lv-pd-warnings li { margin-bottom: 8px; font-size: 14px; line-height: 1.5; color: var(--lv-text-2); }
.lv-tabpanel > .lv-pd-disclaimer { margin-top: 24px; max-width: 820px; }

/* ------------------------------------------------------------------ facts panel */

.lv-facts-title { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--lv-text); }
.lv-facts-sub { margin: 6px 0 20px; font-size: 14px; line-height: 1.5; color: var(--lv-muted); }
.lv-facts-box {
  padding: 16px;
  border: 2px solid var(--lv-line-strong);
  border-radius: 12px;
  background: var(--lv-surface);
}
@media (min-width: 768px) { .lv-facts-box { padding: 24px; } }
.lv-facts-box .lv-table-scroll { margin-bottom: 0; }
.lv-facts-table { width: 100%; min-width: 300px; border-collapse: collapse; font-size: 14px; line-height: 1.4; color: var(--lv-ink-2); }
.lv-facts-table thead th {
  padding: 0 0 12px;
  border-bottom: 3px solid var(--lv-line-strong);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  vertical-align: bottom;
  white-space: nowrap;
}
.lv-facts-table thead th:first-child { font-size: 18px; text-align: left; }
.lv-facts-table tbody th,
.lv-facts-table tbody td { padding: 10px 0; border-bottom: 1px solid var(--lv-line-2); vertical-align: top; }
.lv-facts-table tbody th { font-weight: 700; text-align: left; padding-right: 16px; }
.lv-facts-table tbody td { text-align: right; padding-left: 16px; }
.lv-facts-table .lv-dv { width: 64px; font-weight: 700; }
.lv-facts-table .lv-indent th { padding-left: 16px; font-weight: 400; }
.lv-facts-table .lv-indent-2 th { padding-left: 32px; font-weight: 400; }
.lv-facts-foot { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--lv-muted); }
.lv-facts-foot:empty { display: none; }
.lv-facts-other { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--lv-text-2); }
.lv-facts-other strong { display: block; margin-bottom: 4px; color: var(--lv-ink-2); }
.lv-pd-label-note { margin: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--lv-text-2); }

/* ------------------------------------------------------------------ stars */

.lv-stars {
  --star: 20px;
  position: relative;
  display: inline-block;
  flex: none;
  width: calc(var(--star) * 5);
  height: var(--star);
  vertical-align: middle;
  background: var(--lv-line-strong);
  -webkit-mask: url("../img/icons/star-solid.svg") 0 0 / var(--star) var(--star) repeat-x;
  mask: url("../img/icons/star-solid.svg") 0 0 / var(--star) var(--star) repeat-x;
}
.lv-stars-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--lv-star); }
.lv-stars-sm { --star: 16px; }
.lv-stars-md { --star: 20px; }
.lv-stars-lg { --star: 24px; }
@media (forced-colors: active) {
  .lv-stars { forced-color-adjust: none; background: GrayText; }
  .lv-stars-fill { background: CanvasText; }
}

/* ------------------------------------------------------------------ reviews */

.lv-pd-sample-note {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--lv-line-strong);
  background: var(--lv-surface);
  font-size: 14px;
  line-height: 1.5;
  color: var(--lv-text-2);
}
.lv-rv-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  border-radius: var(--lv-radius-lg);
  background: var(--lv-surface);
}
@media (min-width: 992px) {
  .lv-rv-summary { grid-template-columns: 220px minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 32px; }
}
.lv-rv-score { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.lv-rv-avg { margin: 0; font-size: 56px; font-weight: 700; line-height: 1; color: var(--lv-text); }
.lv-rv-total { margin: 0; font-size: 14px; color: var(--lv-muted); }

.lv-dist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-width: 420px; }
.lv-dist-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) 44px; align-items: center; gap: 12px; font-size: 14px; color: var(--lv-text); }
.lv-dist-track { position: relative; height: 8px; border-radius: 4px; background: var(--lv-line-2); overflow: hidden; }
.lv-dist-bar { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; background: var(--lv-text); }
.lv-dist-pct { text-align: right; }

.lv-rv-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lv-rv-cta-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--lv-ink-2); }

.lv-rv-list { display: grid; gap: 16px; margin-top: 32px; }
.lv-review {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--lv-line-2);
  border-radius: var(--lv-radius-lg);
  background: var(--lv-surface);
}
@media (min-width: 768px) { .lv-review { padding: 24px; } }
.lv-review[hidden] { display: none; }
.lv-review:focus-visible { outline-offset: 2px; }
.lv-review-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.lv-review-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--lv-ink-2); }
.lv-review-tag { margin: 0; font-size: 12px; color: var(--lv-muted); }
.lv-review-title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--lv-ink-2); }
.lv-review-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--lv-text-2); }
.lv-rv-more { display: flex; justify-content: center; margin-top: 32px; }
.lv-rv-more [hidden] { display: none; }

/* ------------------------------------------------------------------ related */

.lv-pd-related { padding-top: 48px; padding-bottom: 64px; }
@media (min-width: 768px) { .lv-pd-related { padding-top: 80px; padding-bottom: 80px; } }
.lv-pd-related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 32px;
}
@media (min-width: 768px) { .lv-pd-related-head { margin-bottom: 40px; } }
.lv-pd-related .lv-eyebrow { font-size: 14px; font-weight: 700; color: var(--lv-muted); margin-bottom: 8px; }
.lv-pd-related-title {
  font-size: clamp(30px, 2.6vw + 12px, 48px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--lv-text);
}

@media (prefers-reduced-motion: reduce) {
  .lv-pd-main img, .lv-plan, .lv-plan-dot::after, .lv-pd-thumb { transition: none; }
}

/* ------------------------------------------------------------------ fill widths
   Star overlays and distribution bars use a width class in 2% steps instead
   of inline styles, generated by the product-details renderer. */
.lv-fill-0 { width: 0%; }
.lv-fill-2 { width: 2%; }
.lv-fill-4 { width: 4%; }
.lv-fill-6 { width: 6%; }
.lv-fill-8 { width: 8%; }
.lv-fill-10 { width: 10%; }
.lv-fill-12 { width: 12%; }
.lv-fill-14 { width: 14%; }
.lv-fill-16 { width: 16%; }
.lv-fill-18 { width: 18%; }
.lv-fill-20 { width: 20%; }
.lv-fill-22 { width: 22%; }
.lv-fill-24 { width: 24%; }
.lv-fill-26 { width: 26%; }
.lv-fill-28 { width: 28%; }
.lv-fill-30 { width: 30%; }
.lv-fill-32 { width: 32%; }
.lv-fill-34 { width: 34%; }
.lv-fill-36 { width: 36%; }
.lv-fill-38 { width: 38%; }
.lv-fill-40 { width: 40%; }
.lv-fill-42 { width: 42%; }
.lv-fill-44 { width: 44%; }
.lv-fill-46 { width: 46%; }
.lv-fill-48 { width: 48%; }
.lv-fill-50 { width: 50%; }
.lv-fill-52 { width: 52%; }
.lv-fill-54 { width: 54%; }
.lv-fill-56 { width: 56%; }
.lv-fill-58 { width: 58%; }
.lv-fill-60 { width: 60%; }
.lv-fill-62 { width: 62%; }
.lv-fill-64 { width: 64%; }
.lv-fill-66 { width: 66%; }
.lv-fill-68 { width: 68%; }
.lv-fill-70 { width: 70%; }
.lv-fill-72 { width: 72%; }
.lv-fill-74 { width: 74%; }
.lv-fill-76 { width: 76%; }
.lv-fill-78 { width: 78%; }
.lv-fill-80 { width: 80%; }
.lv-fill-82 { width: 82%; }
.lv-fill-84 { width: 84%; }
.lv-fill-86 { width: 86%; }
.lv-fill-88 { width: 88%; }
.lv-fill-90 { width: 90%; }
.lv-fill-92 { width: 92%; }
.lv-fill-94 { width: 94%; }
.lv-fill-96 { width: 96%; }
.lv-fill-98 { width: 98%; }
.lv-fill-100 { width: 100%; }

/* ==========================================================================
   pages/checkout.css
   ========================================================================== */

/* ---------------------------------------------------------------- steps */

/* White progress strip with a hairline under it (design: 75px band, 20px padding). */
.lv-checkout-steps-wrap { padding: 20px 0; background: var(--lv-white); border-bottom: 1px solid var(--lv-chip); }

.lv-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 560px;
}

.lv-step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.lv-step-connector {
  flex: 0 1 70px;   /* design: 70px rule between steps, shrinks on narrow screens */
  height: 1px;
  background: var(--lv-line-strong);
  min-width: 24px;
}

.lv-step-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lv-ink-3);
  color: var(--lv-white);
  font-size: 14px;
  font-weight: 600;
}
.lv-step-badge--muted { background: var(--lv-chip); color: var(--lv-muted); }

.lv-step-text { display: grid; gap: 2px; min-width: 0; }
.lv-step-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--lv-muted); white-space: nowrap; }
.lv-step-label { font-size: 14px; font-weight: 600; color: var(--lv-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-step:not(.is-current) .lv-step-label { color: var(--lv-muted); }

/* Below ~480px there isn't room for two full step labels side by side.
   Keep every badge (so progress is still visible) but only show the
   text block for the step that's actually active right now. */
@media (max-width: 480px) {
  .lv-steps { flex-wrap: nowrap; max-width: 100%; }
  .lv-step-connector { min-width: 16px; }
  .lv-step:not(.is-current) .lv-step-text { display: none; }
  .lv-step.is-current .lv-step-text { min-width: 0; max-width: 55vw; }
}

/* ---------------------------------------------------------------- section */

.lv-section--checkout { padding-block: 32px 64px; }
@media (min-width: 992px) { .lv-section--checkout { padding-block: 48px 80px; } }

/* ---------------------------------------------------------------- empty */

.lv-checkout-empty {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: 64px 0;
  max-width: 460px;
}

/* ---------------------------------------------------------------- grid */

.lv-checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 992px) {
  .lv-checkout-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 48px; }
}

.lv-checkout-form { min-width: 0; display: grid; gap: 28px; }
.lv-checkout-intro { display: grid; gap: 4px; }
.lv-eyebrow--quiet { color: var(--lv-text); }
.lv-checkout-title { margin: 0; font-family: var(--lv-font-ui); font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--lv-ink-3); }

/* Field labels are semi-bold in the prototype; "(Optional)" drops back to regular. */
.lv-checkout-form .lv-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--lv-text); }
.lv-optional { font-weight: 400; color: var(--lv-muted); }

/* "Contact & Address": small uppercase eyebrow with a hairline under it. */
.lv-section-label {
  justify-self: start;
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--lv-line-strong);
  font-family: var(--lv-font-ui);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lv-muted);
}

/* ---------------------------------------------------------------- delivery */

.lv-delivery { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.lv-delivery legend { float: none; width: auto; padding: 0; margin-bottom: 4px; }

.lv-delivery-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lv-delivery-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--lv-radius);
  border: 1px solid var(--lv-line-strong);
  background: var(--lv-white);
  color: var(--lv-ink-3);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s var(--lv-ease), color .15s var(--lv-ease), border-color .15s var(--lv-ease);
}
.lv-delivery-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.lv-delivery-chip:has(input:checked) {
  background: var(--lv-ink-3);
  border-color: var(--lv-ink-3);
  color: var(--lv-white);
}
.lv-delivery-chip:has(input:focus-visible) {
  outline: 2px solid var(--lv-ink-3);
  outline-offset: 2px;
}

.lv-delivery-estimate {
  justify-self: start;
  max-width: 100%;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-radius);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--lv-ink);
}

/* ---------------------------------------------------------------- form */

.lv-form-section { display: grid; gap: 16px; }

.lv-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lv-form-row--three { grid-template-columns: 1.2fr 1fr 1fr; }
@media (max-width: 560px) {
  .lv-form-row,
  .lv-form-row--three { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- checkbox / radio */

.lv-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
  color: var(--lv-text-2);
}
.lv-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--lv-line-strong);
  border-radius: 5px;
  background-color: var(--lv-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  cursor: pointer;
  transition: background-color .15s var(--lv-ease), border-color .15s var(--lv-ease);
}
.lv-checkbox input:checked {
  background-color: var(--lv-ink-3);
  border-color: var(--lv-ink-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.3 6.4 11l6.1-6.4' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lv-checkbox input:focus-visible { outline: 2px solid var(--lv-ink-3); outline-offset: 2px; }
.lv-checkbox-label { min-width: 0; }

/* ---------------------------------------------------------------- summary sidebar */

.lv-checkout-summary { min-width: 0; }

.lv-summary-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--lv-white);
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-radius);
}

.lv-summary-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lv-summary-items { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lv-summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lv-summary-item-thumb {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--lv-radius);
  border: 1px solid var(--lv-line-2);
  object-fit: cover;
  background: var(--lv-surface);
}
.lv-summary-item-text { min-width: 0; display: grid; gap: 2px; flex: 1 1 auto; }
.lv-summary-item-name { font-size: 14px; font-weight: 600; color: var(--lv-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-summary-item-meta { font-size: 12px; color: var(--lv-muted); }
.lv-summary-item-price { flex: none; font-size: 14px; font-weight: 600; color: var(--lv-ink-3); }

.lv-summary-divider { height: 1px; background: var(--lv-line-2); }

.lv-promo-box { display: grid; gap: 10px; }
.lv-promo-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--lv-text-2);
}
.lv-promo-label svg { flex: none; color: var(--lv-muted); }
.lv-promo-row { display: flex; gap: 8px; }
.lv-promo-row .lv-input { flex: 1 1 auto; min-width: 0; }

.lv-summary-lines { display: grid; gap: 10px; margin: 0; }
.lv-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lv-summary-row dt { font-weight: 400; color: var(--lv-text-2); } /* Bootstrap reboot bolds dt */
.lv-summary-strong { font-weight: 600; color: var(--lv-ink-3); }

.lv-summary-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lv-summary-total-amount { font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--lv-ink-3); }

/* ---------------------------------------------------------------- page band */

/* Design: the shipping step sits on a surface-grey body under the white
   progress strip, so the white inputs and summary card read as panels. */
[data-page="checkout"] .lv-section--checkout { background: var(--lv-surface); }

/* Summary card type matches the cart summary: 18px bold title, 16px
   semibold total label (the 24px light h3 read as a second page heading). */
.lv-summary-card-head .lv-h3 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--lv-ink-3); }
.lv-summary-total .lv-h3 { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--lv-ink-3); }

/* Item count chip: outlined 8px rectangle, sentence case (not the uppercase .lv-pill). */
.lv-count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-radius);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--lv-text-2);
  white-space: nowrap;
}

.lv-promo-label { color: var(--lv-ink-3); font-weight: 600; }
.lv-promo-row .lv-btn { min-height: 44px; }
.lv-summary-row dt { color: var(--lv-muted); }
.lv-summary-strong { text-transform: none; }
.lv-summary-total-amount { font-size: 24px; font-weight: 700; }

/* ==========================================================================
   pages/payment.css
   ========================================================================== */

/* ---------------------------------------------------------------- steps (shared shape with checkout.css, duplicated per self-contained page CSS) */

/* Stepper: no strip, no rule. A 24px badge, a semi-bold label and an 80px connector, as in the prototype. */
.lv-checkout-steps-wrap { padding: 32px 0 0; background: var(--lv-white); }
@media (min-width: 992px) { .lv-checkout-steps-wrap { padding-top: 48px; } }

.lv-steps {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 16px 0;
  max-width: 100%;
}

.lv-step { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lv-step-connector { flex: 0 1 80px; height: 1px; background: var(--lv-line-strong); min-width: 16px; }

.lv-step-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lv-ink-3);
  color: var(--lv-white);
  font-size: 13px;
  font-weight: 500;
}
.lv-step-badge--done svg { width: 14px; height: 14px; }

.lv-step-text { min-width: 0; }
.lv-step-label { display: block; font-size: 14px; font-weight: 600; color: var(--lv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* On narrow phones drop the finished step's label, keep its check badge. */
@media (max-width: 400px) {
  .lv-steps { gap: 12px; }
  .lv-step.is-done .lv-step-text { display: none; }
  .lv-step-connector { flex-basis: 40px; }
}

/* ---------------------------------------------------------------- section / grid */

.lv-section--checkout { padding-block: 16px 64px; }
@media (min-width: 992px) { .lv-section--checkout { padding-block: 16px 80px; } }

.lv-checkout-empty {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: 64px 0;
  max-width: 460px;
}

.lv-checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 992px) {
  .lv-checkout-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 48px; }
}

.lv-checkout-form { min-width: 0; display: grid; gap: 40px; }
.lv-checkout-title { margin: 0; font-family: var(--lv-font-ui); font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--lv-text); }
.lv-billing-title { margin: 0; font-family: var(--lv-font-ui); font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--lv-ink); }

/* ---------------------------------------------------------------- demo notice */

.lv-demo-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lv-muted);
}
.lv-demo-notice svg { flex: none; margin-top: 2px; color: var(--lv-muted); }

/* ---------------------------------------------------------------- payment methods */

.lv-payment-methods { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; }

.lv-payment-option {
  border: 1px solid var(--lv-line-2);
  border-radius: var(--lv-radius);
  background: var(--lv-white);
  padding: 14px 24px;
  display: grid;
  gap: 20px;
}
/* The picked card gets the dark outline and the roomier padding, as in the prototype. */
.lv-payment-option.is-active { border-color: var(--lv-text); padding-block: 24px; }

.lv-payment-option-head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  cursor: pointer;
}

.lv-payment-option-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--lv-ink);
}
.lv-payment-option-title svg { flex: none; color: var(--lv-ink-3); }

.lv-payment-option-body { display: grid; gap: 20px; }
.lv-payment-option-body[hidden] { display: none; }

/* Custom radio: native input kept for a11y/keyboard, visually replaced with a ring + filled dot. */
.lv-radio-input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--lv-line-strong);
  border-radius: 50%;
  background: var(--lv-white);
  cursor: pointer;
  position: relative;
  transition: border-color .15s var(--lv-ease);
}
.lv-radio-input:checked { border-color: var(--lv-text); }
.lv-radio-input:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--lv-ink-3);
}
.lv-radio-input:focus-visible { outline: 2px solid var(--lv-ink-3); outline-offset: 2px; }

/* ---------------------------------------------------------------- billing / checkbox (duplicated pattern from checkout.css) */

.lv-form-section { display: grid; gap: 16px; }

.lv-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lv-form-row--three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
  .lv-form-row,
  .lv-form-row--three { grid-template-columns: 1fr; }
}

.lv-billing-fields { display: grid; gap: 16px; }

.lv-label--upper { font-size: 12px; line-height: 1.4; font-weight: 600; text-transform: uppercase; letter-spacing: 0; color: var(--lv-text); }
.lv-payment-option-body .lv-field { gap: 8px; }
.lv-payment-option-body .lv-form-row { gap: 20px; }

.lv-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
  color: var(--lv-ink);
}
.lv-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--lv-line-strong);
  border-radius: 5px;
  background-color: var(--lv-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  cursor: pointer;
  transition: background-color .15s var(--lv-ease), border-color .15s var(--lv-ease);
}
.lv-checkbox input:checked {
  background-color: var(--lv-ink-3);
  border-color: var(--lv-ink-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.3 6.4 11l6.1-6.4' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lv-checkbox input:focus-visible { outline: 2px solid var(--lv-ink-3); outline-offset: 2px; }
.lv-checkbox input[aria-invalid="true"] { border-color: var(--lv-danger); }
.lv-checkbox-label { min-width: 0; }
.lv-checkbox-label .lv-link { text-decoration: underline; }

/* ---------------------------------------------------------------- summary sidebar (duplicated shape from checkout.css) */

.lv-checkout-summary { min-width: 0; }

.lv-summary-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--lv-white);
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-radius);
}

.lv-summary-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.lv-summary-items { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lv-summary-item { display: flex; align-items: center; gap: 12px; }
.lv-summary-item-thumb {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--lv-radius);
  border: 1px solid var(--lv-line-2);
  object-fit: cover;
  background: var(--lv-surface);
}
.lv-summary-item-text { min-width: 0; display: grid; gap: 2px; flex: 1 1 auto; }
.lv-summary-item-name { font-size: 14px; font-weight: 600; color: var(--lv-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-summary-item-meta { font-size: 12px; color: var(--lv-muted); }
.lv-summary-item-price { flex: none; font-size: 14px; font-weight: 600; color: var(--lv-ink-3); }

.lv-summary-divider { height: 1px; background: var(--lv-line-2); }

.lv-shipto { margin: 0; font-size: 13px; color: var(--lv-text-2); }
.lv-shipto strong { color: var(--lv-ink-3); }

.lv-summary-lines { display: grid; gap: 10px; margin: 0; }
.lv-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lv-summary-row dt { font-weight: 400; color: var(--lv-text-2); } /* Bootstrap reboot bolds dt */
.lv-summary-strong { font-weight: 600; color: var(--lv-ink-3); }

.lv-summary-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lv-summary-total-amount { font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--lv-ink-3); }

/* Summary card type matches the cart summary: 18px bold title, 16px
   semibold total label (the 24px light h3 read as a second page heading). */
.lv-summary-card-head .lv-h3 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--lv-ink-3); }
.lv-summary-total .lv-h3 { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--lv-ink-3); }

.lv-count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-radius);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--lv-text-2);
  white-space: nowrap;
}

.lv-promo-box { display: grid; gap: 10px; }
.lv-promo-label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--lv-ink-3); }
.lv-promo-label svg { flex: none; }
.lv-promo-row { display: flex; gap: 8px; }
.lv-promo-row .lv-input { flex: 1 1 auto; min-width: 0; }
.lv-promo-row .lv-btn { min-height: 44px; }
.lv-summary-row dt { color: var(--lv-muted); }
.lv-summary-total-amount { font-size: 24px; font-weight: 700; }

/* ==========================================================================
   pages/confirmation.css
   ========================================================================== */

.lv-confirmation-empty-section { padding-block: 96px; }

.lv-checkout-empty {
  display: grid;
  gap: 16px;
  justify-items: start;
  max-width: 460px;
  margin-inline: auto;
  text-align: left;
}

.lv-confirmation { padding-block: 48px 80px; }

.lv-confirmation-shell {
  display: grid;
  gap: 40px;
  max-width: 1000px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------- header */

.lv-confirmation-header {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.lv-confirmation-check {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--lv-surface);
}
.lv-confirmation-check .lv-icon { width: 40px; height: 40px; color: var(--lv-ink-3); }

.lv-h1--confirm {
  font-family: var(--lv-font-ui);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--lv-ink-3);
  margin: 0;
}

/* ---------------------------------------------------------------- notice */

.lv-confirmation-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--lv-surface);
  border: 1px solid var(--lv-line-2);
  border-radius: var(--lv-radius);
  max-width: 640px;
  margin-inline: auto;
  width: 100%;
}

.lv-confirmation-notice-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lv-white);
  border: 1px solid var(--lv-line-2);
}
.lv-confirmation-notice-icon .lv-icon { width: 24px; height: 24px; color: var(--lv-ink-3); }

.lv-confirmation-notice-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--lv-ink-3); }
.lv-confirmation-notice-body { margin: 0; font-size: 14px; color: var(--lv-muted); word-break: break-word; }

/* ---------------------------------------------------------------- grid */

.lv-confirmation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 860px) {
  .lv-confirmation-grid { grid-template-columns: 1fr 1fr; }
}

.lv-confirmation-card {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 24px;
  background: var(--lv-white);
  border: 1px solid var(--lv-line-2);
  border-radius: var(--lv-radius);
}
.lv-confirmation-card--muted { background: var(--lv-surface); }

.lv-confirmation-card-head { display: flex; align-items: center; gap: 12px; }
.lv-confirmation-card-head .lv-icon { flex: none; color: var(--lv-ink-3); }

.lv-confirmation-divider { height: 1px; background: var(--lv-line-2); }

.lv-shipping-details { display: grid; gap: 8px; margin: 0; }
.lv-shipping-details dt { font-size: 14px; font-weight: 600; color: var(--lv-ink-3); margin-top: 8px; }
.lv-shipping-details dt:first-child { margin-top: 0; }
.lv-shipping-details dd { margin: 0; font-size: 14px; color: var(--lv-muted); }

.lv-delivery-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--lv-surface);
  border-radius: var(--lv-radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--lv-ink-3);
}
.lv-delivery-alert .lv-icon { flex: none; }

.lv-confirmation-items { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.lv-confirmation-item { display: flex; align-items: center; gap: 12px; }
.lv-confirmation-item-thumb {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: calc(var(--lv-radius) - 2px);
  border: 1px solid var(--lv-line-2);
  object-fit: cover;
  background: var(--lv-white);
}
.lv-confirmation-item-text { min-width: 0; display: grid; gap: 2px; flex: 1 1 auto; }
.lv-confirmation-item-name { font-size: 14px; font-weight: 600; color: var(--lv-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-confirmation-item-meta { font-size: 12px; color: var(--lv-muted); }
.lv-confirmation-item-price { flex: none; font-size: 14px; font-weight: 700; color: var(--lv-ink-3); }

.lv-summary-lines { display: grid; gap: 10px; margin: 0; }
.lv-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lv-summary-row dt { font-weight: 400; color: var(--lv-muted); } /* Bootstrap reboot bolds dt */
.lv-summary-row dd { margin: 0; color: var(--lv-ink-3); }
.lv-summary-row--paid { align-items: center; }
.lv-summary-strong { font-weight: 700; font-size: 16px; color: var(--lv-ink-3); }

/* ---------------------------------------------------------------- actions */

.lv-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ---------------------------------------------------------------- design fit
   Design: two 413px cards with a 24px gap (850px), centred under the 640px
   notice, each titled in 18px bold rather than the editorial h3. */
.lv-confirmation-grid { width: 100%; max-width: 850px; margin-inline: auto; align-items: start; }
.lv-delivery-alert strong { font-weight: 700; }
.lv-confirmation-card-head .lv-h3 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--lv-ink-2); }

/* ==========================================================================
   pages/legal-page.css
   ========================================================================== */

/* Shared by the standalone Terms, Privacy and Accessibility pages.
   Imported from terms.css, privacy.css and accessibility.css. */
.lv-legal-page { padding-bottom: 64px; }
@media (min-width: 992px) { .lv-legal-page { padding-bottom: 120px; } }
.lv-legal-updated { margin-top: 12px; color: var(--lv-muted); }
.lv-legal-glance {
  margin: 0 0 8px;
  padding: 24px;
  border-radius: var(--lv-radius-lg);
  background: var(--lv-surface);
}
.lv-legal-glance h2 { margin-top: 0; }
.lv-legal-glance ul { margin-bottom: 12px; }
.lv-legal-glance .lv-small { margin: 0; color: var(--lv-text); }
.lv-legal-back { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--lv-line); }
.lv-legal-page .lv-legal .lv-legal-back a { text-decoration: none; }
.lv-legal-page .lv-legal .lv-legal-back a:hover { text-decoration: underline; }

/* ==========================================================================
   pages/404.css
   ========================================================================== */

.lv-404-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lv-404-best { padding-bottom: 64px; }
@media (min-width: 992px) { .lv-404-best { padding-bottom: 120px; } }
.lv-404-best h2 { margin-bottom: 24px; }