/* ============================================================
   LUBYLAB — Page-specific styling
   ============================================================ */

/* ===== HERO ===== */
.hero {
  padding: var(--space-xl) 0 var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  min-height: 70vh;
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.hero__tagline em { font-style: italic; font-weight: 400; }
.hero__sub {
  color: var(--muted);
  margin-top: var(--space-sm);
  font-size: 15px;
  font-weight: 300;
}
.hero__right { text-align: right; }
.hero__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 380px;
  margin-left: auto;
  margin-bottom: var(--space-lg);
}

/* ===== COUNTDOWN ===== */
.countdown {
  display: flex;
  gap: var(--space-lg);
  justify-content: flex-end;
  margin-bottom: var(--space-lg);
}
.countdown__unit { text-align: center; }
.countdown__num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ===== CALENDAR / EVENT LIST ===== */
.calendar { padding: var(--space-xl) 0 var(--space-2xl); }
.calendar__item {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-md);
}
.calendar__idx { font-size: 12px; color: var(--muted); padding-top: 4px; }
.calendar__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 4px;
}
.calendar__title em { font-style: italic; font-weight: 400; }
.calendar__meta { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.8; }
.calendar__badge {
  display: inline-block;
  border: 1px solid var(--fg);
  padding: 6px 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: var(--space-sm);
}
.calendar__badge--past { border-color: var(--border); color: var(--muted); }

/* ===== SCIENCE PAGE ===== */
.science-hero { padding: var(--space-xl) 0; }
.science-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.science-hero__title em { font-style: italic; font-weight: 400; }
.science-hero__desc {
  max-width: 560px;
  color: var(--muted);
  margin-top: var(--space-sm);
  font-size: 15px;
  line-height: 1.7;
}
.science-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}
.science-grid__item { padding: var(--space-lg); border-bottom: 1px solid var(--border); }
.science-grid__item:nth-child(odd) { border-right: 1px solid var(--border); }
.science-grid__label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-xs);
}
.science-grid__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-xs);
}
.science-grid__title em { font-style: italic; font-weight: 400; }
.science-grid__desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}
.science-grid__meta { font-size: 12px; color: var(--muted); }

/* ===== STUDY STATS ===== */
.studies { padding: var(--space-xl) 0; }
.study-card { padding: var(--space-lg) 0; border-top: 1px solid var(--border); }
.study-card__title { font-size: 14px; color: var(--muted); margin-bottom: var(--space-md); }
.study-card__stats { display: flex; gap: var(--space-xl); margin-bottom: var(--space-sm); }
.study-card__num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.study-card__n {
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ===== INGREDIENTS ===== */
.ingredients {
  padding: var(--space-xl) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.ingredient-card { background: var(--surface); padding: var(--space-lg); }
.ingredient-card__name {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-xs);
}
.ingredient-card__name em { font-style: italic; font-weight: 400; }
.ingredient-card__desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.ingredient-card__meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: var(--space-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== SHOP / PRODUCT LINES ===== */
.shop-hero { padding: var(--space-xl) 0; }
.shop-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.shop-hero__title em { font-style: italic; font-weight: 400; }
.product-line { padding: var(--space-xl) 0; }
.product-line__header { margin-bottom: var(--space-lg); }
.product-line__name {
  font-family: var(--font-body);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xs);
}
.product-line__desc { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 560px; }
.product-line__meta { font-size: 12px; color: var(--muted); margin-top: var(--space-xs); }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.product-card { display: flex; flex-direction: column; }
.product-card__img {
  aspect-ratio: 1/1;
  background: #ffffff;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: var(--space-sm);
  transition: border-color 220ms ease;
}
.product-card__name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.product-card__sub { font-size: 12px; color: var(--muted); }

/* ===== SHOP — group selector landing ===== */
.shop-hero__sub {
  margin-top: var(--space-sm);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.shop-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.shop-group-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1),
              box-shadow 320ms cubic-bezier(.22,.61,.36,1),
              border-color 200ms ease;
}
.shop-group-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.08);
  border-color: var(--hover);
}
.shop-group-card__img {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.shop-group-card__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.92;
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.shop-group-card:hover .shop-group-card__img img { transform: scale(1.04); }
.shop-group-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-group-card__name {
  font-family: var(--font-body);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.shop-group-card__tagline {
  font-size: 14px;
  color: var(--fg);
  font-style: italic;
}
.shop-group-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.shop-group-card__cta {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
}
.shop-group-card__cta svg { transition: transform 320ms cubic-bezier(.22,.61,.36,1); }
.shop-group-card:hover .shop-group-card__cta svg { transform: translateX(4px); }

/* ===== SHOP — group detail ===== */
.shop-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 160ms ease, transform 160ms ease;
}
.shop-back:hover { color: var(--hover); transform: translateX(-2px); }

.shop-hero--group { padding-bottom: var(--space-md); }

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-md);
}
.shop-toolbar__count {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Active category filter — a dismissible chip next to the product count. */
.shop-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 12px;
  background: var(--fg);
  border: 1px solid var(--fg);
  border-radius: 999px;
  color: #ffffff;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.shop-cat-chip:hover { background: var(--hover); border-color: var(--hover); }
.shop-cat-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 13px;
  line-height: 1;
}
.shop-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.shop-density {
  display: flex;
  border: 1px solid var(--border);
}
.shop-density__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.shop-density__btn:last-child { border-right: 0; }
.shop-density__btn:hover { color: var(--hover); }
.shop-density__btn.is-active {
  background: var(--hover);
  color: #ffffff;
}

/* Celimax-style "Sort by:" label + native <select> with custom chevron.
   Native select is invisible-ish (transparent bg, no native arrow) so the
   chevron SVG sits on top. The user gets the OS-native option list. */
.shop-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.shop-sort__label {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.shop-sort__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 22px 6px 0;     /* room for the chevron on the right */
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  outline: none;
  line-height: 1.2;
}
.shop-sort__select:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}
.shop-sort__chev {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg);
  pointer-events: none;
}

/* Grid + FLIP-friendly cards */
.shop-grid {
  display: grid;
  gap: var(--space-md) clamp(16px, 2vw, 28px);
}
.shop-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.shop-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.shop-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.shop-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
.shop-card { will-change: transform; }
.shop-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ----- Top filter banner (swaps with the active tab) ----- */
.shop-banner {
  position: relative; /* anchor for the overlaid filter pills */
  width: 100%;
  background: var(--surface);
  line-height: 0; /* drop the inline-image descender gap */
}
.shop-banner__img {
  display: block;
  width: 100%;
  height: auto; /* keep each banner's natural ratio — no cropping */
  border-radius: 0; /* override the global img rounding (base.css) */
}

/* ----- Banner overlay: filter pills + divider on top, heading below ----- */
.shop-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.5vw, 28px) clamp(24px, 4vw, 56px) clamp(20px, 3vw, 40px);
  line-height: normal; /* reset the banner's line-height:0 */
  pointer-events: none; /* let the image area stay non-interactive */
}
.shop-banner__overlay .shop-tab { pointer-events: auto; }

.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Divider under the tab row — a short rule (not full width). */
.shop-banner__rule {
  align-self: flex-start;
  width: 40%;
  height: 1px;
  margin-top: clamp(12px, 1.5vw, 16px);
  background: rgba(0, 0, 0, 0.18);
}
.shop-tab {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.shop-tab:hover { border-color: var(--fg); }
.shop-tab.is-active {
  background: var(--fg);
  border-color: var(--fg);
  color: #ffffff;
}

/* Per-line active colours — the selected tab fills with its brand colour
   instead of the default dark. Inactive tabs keep the plain dark outline. */
.shop-tab[data-line="recover"].is-active {
  background: #0D5F1D;
  border-color: #0D5F1D;
  color: #ffffff;
}
.shop-tab[data-line="daily"].is-active {
  background: #E5C4A5;
  border-color: #E5C4A5;
  color: var(--fg); /* dark text — tan is too light for white */
}

/* Active-line heading (the "High Efficacy Elixir" slot). Pinned 220px down
   from the top of the banner, aligned to the same left gutter as the tabs. */
.shop-banner__head {
  position: absolute;
  top: 220px;
  left: clamp(24px, 4vw, 56px);
  max-width: 50%; /* keep clear of the product shot on the right */
}
.shop-banner__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 60px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg);
}
/* Step descriptor ("The Active Step") — italic subtitle between the line
   name and the body tagline. */
.shop-banner__step {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.9vw, 26px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.shop-banner__tagline {
  margin: 12px 0 0;
  /* Cap the line length to a comfortable reading measure so the body copy
     wraps into shorter lines instead of stretching across the banner, then
     clamp to 3 lines so the block stays compact (overflow → ellipsis). */
  max-width: 42ch;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Dark banners (Elixir, Recovery) — flip the overlay to a light scheme so pills
   + heading stay readable (light outline + white text; active pill = white). */
.shop-banner__overlay.is-invert .shop-banner__rule {
  background: rgba(255, 255, 255, 0.32);
}
.shop-banner__overlay.is-invert .shop-tab {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}
.shop-banner__overlay.is-invert .shop-tab:hover { border-color: #ffffff; }
.shop-banner__overlay.is-invert .shop-tab.is-active {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fg);
}
/* …but Recovery keeps its green brand fill even on its dark-green banner. */
.shop-banner__overlay.is-invert .shop-tab[data-line="recover"].is-active {
  background: #0D5F1D;
  border-color: #ffffff;
  color: #ffffff;
}
.shop-banner__overlay.is-invert .shop-banner__title { color: #ffffff; }
.shop-banner__overlay.is-invert .shop-banner__step { color: rgba(255, 255, 255, 0.92); }
.shop-banner__overlay.is-invert .shop-banner__tagline { color: rgba(255, 255, 255, 0.78); }

/* Tablets / narrow viewports (portrait iPad ≈ 768–834px): the banner image
   keeps its natural ratio, so it gets much shorter as the viewport narrows —
   the fixed 220px heading offset then drops the title past the banner's lower
   edge and it clips. Below 1024px, let the heading flow under the tab divider
   (like the mobile layout) so it always sits inside the banner. The tagline
   stays visible here — only phones (≤720px) drop it. */
@media (max-width: 1024px) {
  .shop-banner__head {
    position: static;
    top: auto;
    left: auto;
    max-width: min(560px, 64%);
    margin-top: clamp(10px, 2.4vw, 22px);
  }
}

@media (max-width: 720px) {
  .shop-banner__overlay { padding: 14px 20px 16px; }
  /* On the much shorter mobile banner, drop the fixed 270px offset and let the
     heading flow under the tab divider instead. */
  .shop-banner__head {
    position: static;
    top: auto;
    left: auto;
    max-width: 78%;
    margin-top: clamp(8px, 2vw, 18px);
  }
  .shop-banner__title { font-size: clamp(20px, 6.5vw, 34px); }
  .shop-banner__step { font-size: clamp(14px, 4.6vw, 20px); margin-top: 5px; }
  /* The long body paragraph is dropped on phones — only the line name +
     italic step descriptor stay on the compact mobile banner. */
  .shop-banner__tagline { display: none; }
}

/* ----- Per-line grouped sections ----- */
.shop-lines { display: flex; flex-direction: column; gap: var(--space-xl); }
.shop-line-section { scroll-margin-top: calc(var(--nav-h) + 64px); }
.shop-line-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.shop-line-name {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.shop-line-count {
  margin-left: auto; /* pin the count to the right of the name */
  font-family: var(--lh-font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .shop-line-head { flex-wrap: wrap; gap: 4px 12px; }
}

@media (max-width: 1100px) {
  .shop-groups { grid-template-columns: repeat(2, 1fr); }
  .shop-grid--cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .shop-groups { grid-template-columns: 1fr; }
  .shop-grid,
  .shop-grid--cols-2,
  .shop-grid--cols-3,
  .shop-grid--cols-4,
  .shop-grid--cols-6 { grid-template-columns: repeat(2, 1fr); }
  .shop-toolbar { flex-wrap: wrap; }
}

/* ===== CONTACT ===== */
.contact-hero { padding: var(--space-xl) 0; }
.contact-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.contact-hero__title em { font-style: italic; font-weight: 400; }
.contact-hero__desc {
  color: var(--muted);
  margin-top: var(--space-sm);
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
}

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-2xl);
  align-items: start;
}
.contact-split__right { position: sticky; top: calc(var(--nav-h) + var(--space-md)); }

.contact-list { padding: 0; }
.contact-item { padding: var(--space-md) 0; border-top: 1px solid var(--border); }
.contact-item__label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-xs);
}
.contact-item__value { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.contact-item__desc { font-size: 13px; color: var(--muted); }

.contact-form-wrap {
  background: var(--dark);
  color: var(--dark-fg);
  padding: var(--space-lg);
}
.contact-form__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}
.contact-form__title em { font-style: italic; font-weight: 400; }
.contact-form__sub {
  font-size: 13px;
  color: oklch(70% 0.01 60);
  margin-bottom: var(--space-lg);
}
.contact-form__group { margin-bottom: var(--space-md); }
.contact-form__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: oklch(60% 0.01 60);
  margin-bottom: var(--space-xs);
}
.contact-form__input,
.contact-form__textarea,
.contact-form__select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid oklch(40% 0.01 60);
  color: var(--dark-fg);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 8px 0;
  outline: none;
  transition: border-color 0.2s;
}
.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus { border-bottom-color: var(--dark-fg); }
.contact-form__textarea { min-height: 80px; resize: vertical; }
.contact-form__select { appearance: none; cursor: pointer; }
.contact-form__select option { background: var(--dark); color: var(--dark-fg); }
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid oklch(50% 0.01 60);
  color: var(--dark-fg);
  padding: 14px 32px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-md);
  transition: background 0.2s;
}
.contact-form__submit:hover { background: oklch(30% 0.01 60); }

/* ===== GLOBAL PAGE ===== */
.global-hero { padding: var(--space-xl) 0; }
.global-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.global-hero__title em { font-style: italic; font-weight: 400; }
.global-hero__desc {
  color: var(--muted);
  margin-top: var(--space-sm);
  font-size: 15px;
  line-height: 1.7;
  max-width: 560px;
}
.global-locations { padding: var(--space-lg) 0 var(--space-xl); }
.location-card {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.location-card__label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-xs);
}
.location-card__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.location-card__address { font-size: 14px; color: var(--muted); line-height: 1.7; }
.location-card__map {
  aspect-ratio: 16/9;
  background: var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.global-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  margin-bottom: var(--space-2xl);
}
.global-stat { background: var(--surface); padding: var(--space-lg); text-align: center; }
.global-stat__num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.global-stat__label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== BRAND PAGE ===== */
.brand-hero { padding: var(--space-xl) 0; }
.brand-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.brand-hero__title em { font-style: italic; font-weight: 400; }
.brand-hero__desc {
  color: var(--muted);
  margin-top: var(--space-sm);
  font-size: 15px;
  line-height: 1.7;
  max-width: 560px;
}
.brand-section { padding: var(--space-xl) 0; border-top: 1px solid var(--border); }
.brand-section__grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-xl);
}
.brand-section__label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}
.brand-section__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-sm);
}
.brand-section__title em { font-style: italic; font-weight: 400; }
.brand-section__text {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 600px;
}
.brand-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  margin: var(--space-xl) 0;
}
.brand-value { background: var(--surface); padding: var(--space-lg); }
.brand-value__idx {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: var(--space-sm);
  font-variant-numeric: tabular-nums;
}
.brand-value__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
}
.brand-value__title em { font-style: italic; font-weight: 400; }
.brand-value__desc { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ===== JOURNAL ARTICLES ===== */
.journal-grid { padding: var(--space-xl) 0; }
.journal-item { border-top: 1px solid var(--border); padding: var(--space-lg) 0; }
.journal-item__img { aspect-ratio: 16/9; background: var(--accent); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-sm); }
.journal-item__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.journal-item__desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.journal-item__meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: var(--space-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__right { text-align: left; }
  .hero__desc { margin-left: 0; }
  .countdown { justify-content: flex-start; }
  .calendar__item { grid-template-columns: 1fr; }
  .calendar__idx { display: none; }
  .science-grid { grid-template-columns: 1fr; }
  .science-grid__item:nth-child(odd) { border-right: none; }
  .product-grid { grid-template-columns: 1fr; }
  .ingredients { grid-template-columns: 1fr; }
  .location-card { grid-template-columns: 1fr; }
  .global-stats { grid-template-columns: 1fr; }
  .brand-section__grid { grid-template-columns: 1fr; }
  .brand-values { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .contact-split { grid-template-columns: 1fr; }
  .contact-split__right { position: static; }
  .nav__links { display: none; }
  .nav__right { display: none; }
  .nav__menu-btn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--fg);
  }
  .nav { justify-content: space-between; }
  .study-card__stats { gap: var(--space-lg); }
}

@media (max-width: 480px) {
  :root { --space-xl: 48px; --space-2xl: 64px; }
  .countdown { gap: var(--space-md); }
}

/* ===== /global route — full-bleed legacy iframe, hide host chrome ===== */
body.route-global .footer { display: none !important; }
body.route-global { overflow: hidden; }
body.route-global .global-embed-wrap { margin-top: calc(var(--nav-h, 64px) * -1); padding-top: var(--nav-h, 64px); }


/* ===== SHOP CARD — image + link affordance ===== */
.product-card__img {
  position: relative;
  overflow: hidden;
}
.product-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-card__short {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-card--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
.shop-card--link:hover { transform: translateY(-4px); }
.shop-card--link:hover .product-card__name { color: var(--hover); }
.shop-card--link:hover .product-card__photo { transform: scale(1.04); }
.shop-card--link .product-card__name { transition: color 220ms ease; }
.shop-card--link .product-card__photo { transition: transform 480ms cubic-bezier(.22,.61,.36,1); }

/* Shop cards are borderless and squared off — the card image is just a
   plain photo tile (no frame). Other surfaces using .product-card__img
   (PDP, line landing pages) keep the default bordered look. */
.shop-card .product-card__img,
.shop-card .product-card__photo {
  border: none;
  border-radius: 0;
}


/* ===== PRODUCT DETAIL PAGE (PDP) ===== */
.pdp { padding: var(--space-md) 0 var(--space-xl); }
.pdp__container { max-width: 1200px; }
.pdp-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
  background: transparent; border: none; cursor: pointer;
  padding: 8px 0; margin-bottom: var(--space-md);
}
.pdp-back:hover { color: var(--hover); }

.pdp__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-bottom: var(--space-xl);
}

.pdp-gallery { position: sticky; top: 88px; }
.pdp-gallery__main {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--surface, #f6f4ef);
  border: 1px solid var(--border);
  overflow: hidden;
}
.pdp-gallery__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pdp-gallery__placeholder {
  width: 100%; height: 100%;
  background: var(--clr-daily, #e8e4dc);
}
.pdp-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.pdp-gallery__thumb {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--surface, #f6f4ef);
  border: 1px solid var(--border);
  padding: 0; cursor: pointer; overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease;
}
.pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-gallery__thumb:hover { border-color: var(--hover); }
.pdp-gallery__thumb.is-active { border-color: var(--hover); border-width: 2px; }

.pdp-info__line {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.pdp-info__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  margin: 0 0 6px;
}
.pdp-info__subtitle { color: var(--muted); font-size: 16px; margin-bottom: 18px; }
.pdp-info__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 12px; color: var(--muted);
  padding: 10px 0; border-block: 1px solid var(--border);
  margin-bottom: 16px;
}
.pdp-info__meta strong {
  font-weight: 600; color: var(--fg);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px;
  margin-right: 4px;
}
.pdp-info__price {
  font-size: 22px; font-weight: 600;
  margin-bottom: 18px;
}
.pdp-info__price-sale { color: var(--accent-strong, #b34); margin-right: 10px; }
.pdp-info__price-old {
  color: var(--muted); text-decoration: line-through;
  font-weight: 400; font-size: 16px;
}
.pdp-info__short {
  font-size: 15px; line-height: 1.6; color: var(--fg);
  margin: 0 0 22px;
}
.pdp-info__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-btn {
  padding: 13px 22px;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; color: var(--fg);
  border: 1px solid var(--fg); cursor: pointer;
  transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
}
.pdp-btn:hover { background: var(--hover); color: #ffffff; border-color: var(--hover); }
.pdp-btn--primary { background: var(--fg); color: var(--bg, #fff); }
.pdp-btn--primary:hover { background: var(--hover); border-color: var(--hover); opacity: 1; }
.pdp-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.pdp-btn[disabled]:hover { background: transparent; color: var(--fg); }
.pdp-btn--primary[disabled]:hover { background: var(--fg); color: var(--bg, #fff); }

.pdp-sections { display: grid; gap: var(--space-lg); max-width: 820px; }
.pdp-section { border-top: 1px solid var(--border); padding-top: var(--space-md); }
.pdp-section__title {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px; font-weight: 600;
}
.pdp-section__body {
  font-size: 15px; line-height: 1.7; color: var(--fg);
  white-space: pre-wrap;
}
.pdp-section__body--small { font-size: 12px; color: var(--muted); line-height: 1.6; }
.pdp-faq { margin: 0; }
.pdp-faq__item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.pdp-faq__item:last-child { border-bottom: none; }
.pdp-faq__item dt { font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.pdp-faq__item dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.pdp-loading, .pdp-error {
  text-align: center; padding: var(--space-xl) 0;
  color: var(--muted); font-size: 14px;
}
.pdp-error .pdp-btn { margin-top: 16px; }

@media (max-width: 820px) {
  .pdp__layout { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
}

/* =====================================================================
   PDP v2 — layout theo mockup (image | notes | info + accordion)
   ===================================================================== */
.pdp--v2 .pdp__container { max-width: 1280px; }

.pdp2-top {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  margin-bottom: var(--space-lg);
}

/* --- Cột 1: ảnh chính (1:1, hiển thị tối đa 1500x1500) --- */
.pdp2-media__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 1500px;
  background: var(--surface, #f6f4ef);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* Per-line backgrounds for the product image frame. */
.pdp2-media__frame[data-line="daily"]   { background: #fbf1e2; }
.pdp2-media__frame[data-line="elixir"]  { background: #161616; }
.pdp2-media__frame[data-line="recover"] {
  background: linear-gradient(135deg, #245d5a 0%, #1a4644 55%, #0f2e2c 100%);
}
.pdp2-media__img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.pdp2-media__placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #eee, #f6f4ef);
}

/* Prev/next navigation overlay on the main image frame */
.pdp2-media__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  color: var(--fg, #111);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
  opacity: 0;
  z-index: 2;
}
.pdp2-media__frame:hover .pdp2-media__nav,
.pdp2-media__nav:focus-visible {
  opacity: 1;
}
.pdp2-media__nav:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.05);
}
.pdp2-media__nav:active {
  transform: translateY(-50%) scale(0.95);
}
.pdp2-media__nav--prev { left: 16px; }
.pdp2-media__nav--next { right: 16px; }

.pdp2-media__counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

/* On touch devices the hover trigger never fires — keep buttons visible. */
@media (hover: none) {
  .pdp2-media__nav { opacity: 1; }
}

/* --- Cột 2: note labels chú thích (NO.1 → NO.5) --- */
.pdp2-notes {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 24px;
  font-size: 12px; letter-spacing: 0.05em;
  color: var(--muted);
  padding-top: 8px;
}
.pdp2-notes__item {
  text-transform: uppercase;
  font-weight: 500;
}
.pdp2-notes__item--lower { margin-top: 120px; }

/* --- Cột 3: thông tin sản phẩm --- */
.pdp2-info {
  align-self: start;
  padding-top: 4px;
}

/* Top row: line badge on the left, key ingredients chips on the right */
.pdp2-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pdp2-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 0 0 auto;
}
.pdp2-components {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}
/* Outlined "DAILY"-style chips: white background, line-coloured border,
   line-coloured text. Per-line variants override the default. */
.pdp2-components__chip {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  background: #fff;
  color: #c4ad81;
  border: 1.5px solid #c4ad81;
  font-family: var(--font-display, inherit);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.pdp2-components[data-line="daily"] .pdp2-components__chip {
  color: #c4ad81;
  border-color: #c4ad81;
}
.pdp2-components[data-line="elixir"] .pdp2-components__chip {
  color: #161616;
  border-color: #161616;
}
.pdp2-components[data-line="recover"] .pdp2-components__chip {
  color: #1a4644;
  border-color: #1a4644;
}

.pdp2-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
}
.pdp2-badge--best  { background: #c7d84a; color: #1f2a00; }
.pdp2-badge--info  { background: #2f7bd6; }
.pdp2-badge--sale  { background: #d63a2f; }

.pdp2-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  margin: 4px 0 6px;
}
.pdp2-subtitle {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 var(--space-md);
}

.pdp2-skintype { margin: 0 0 var(--space-md); }
.pdp2-skintype__label {
  font-weight: 700; font-size: 14px;
  text-decoration: underline; text-underline-offset: 4px;
  margin-bottom: 4px;
}
.pdp2-skintype__value {
  color: var(--muted); font-size: 14px;
}

/* --- Accordion (Drop down 3 mục) --- */
.pdp2-accordion {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
  margin-top: var(--space-sm);
}
.pdp2-panel { border-bottom: 1px solid var(--border); }
.pdp2-panel__head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.pdp2-panel__title {
  font-size: 15px; font-weight: 700; color: var(--fg);
}
.pdp2-panel__icon {
  font-size: 22px; line-height: 1; color: var(--fg);
  font-weight: 300;
  width: 24px; text-align: center;
}
.pdp2-panel__body {
  padding: 0 4px 18px;
  font-size: 14px; line-height: 1.7; color: var(--fg);
  white-space: pre-wrap;
}
.pdp2-panel__body--small { font-size: 12px; color: var(--muted); line-height: 1.6; }
.pdp2-panel__empty { color: var(--muted); font-style: italic; }
.pdp2-panel.is-open .pdp2-panel__head { padding-bottom: 8px; }

.pdp2-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* --- Thumbnails hàng ngang dưới cùng --- */
.pdp2-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.pdp2-thumb {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--surface, #f6f4ef);
  border: 1px solid var(--border);
  padding: 0; cursor: pointer; overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease;
}
.pdp2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp2-thumb:hover { border-color: var(--hover); }
.pdp2-thumb.is-active {
  border-color: var(--fg);
  border-bottom: 2px solid var(--fg);
}
.pdp2-thumb--empty { background: #ebebeb; cursor: default; border-color: #ebebeb; }
.pdp2-thumb__placeholder { width: 100%; height: 100%; background: #ebebeb; }

/* --- Banner story — stacked full-width imagery below the gallery --- */
.pdp2-banners {
  margin-top: clamp(48px, 8vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 32px);
}
.pdp2-banner__img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Responsive --- */
@media (max-width: 1020px) {
  .pdp2-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .pdp2-notes { display: none; } /* notes là annotation, ẩn ở mobile */
}
@media (max-width: 720px) {
  .pdp2-top { grid-template-columns: 1fr; }
  .pdp2-info { align-self: stretch; }
}