/* ==========================================================================
   HerbXMedica — sections.css
   One block per homepage section. No block depends on another: each
   <section data-section="…"> can be lifted straight into an Elementor
   section without dragging a sibling selector with it.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hxm-hero { position: relative; background: var(--hxm-forest-deep); }

/* The shared slider viewport carries a 4px bleed for card shadows; the hero
   is full-bleed and must not, or the slides overflow the viewport. */
.hxm-hero__viewport { overflow: hidden; margin-inline: 0; padding-inline: 0; }

.hxm-hero__track {
  display: flex;
  gap: 0;
  transition: transform 760ms var(--hxm-ease);
}

.hxm-hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  /* Content sets the height, the floor stops it collapsing. The bottom
     padding reserves room for the absolutely-positioned controls, which is
     what a fixed height failed to do — shorten the box and the controls end
     up on top of the copy. */
  height: auto;
  min-height: min(70vh, 580px);
  padding-block: clamp(36px, 4vw, 56px) clamp(94px, 8vw, 118px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hxm-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hxm-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hxm-hero-focus, 50% 50%);
  transform: scale(1.02);
}

/* Two layers: a horizontal wash that carries the copy column, and a light
   overall tint so a bright photograph cannot wash out the white type. */
.hxm-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(6, 26, 18, 0.94) 0%,
      rgba(6, 26, 18, 0.86) 26%,
      rgba(6, 26, 18, 0.52) 54%,
      rgba(6, 26, 18, 0.24) 78%,
      rgba(6, 26, 18, 0.34) 100%),
    linear-gradient(180deg, rgba(6, 26, 18, 0.34) 0%, rgba(6, 26, 18, 0.12) 42%, rgba(6, 26, 18, 0.5) 100%);
  pointer-events: none;
}

.hxm-hero__slide.is-active .hxm-hero__media img {
  animation: hxm-kenburns 9s var(--hxm-ease) forwards;
}

@keyframes hxm-kenburns {
  from { transform: scale(1.02); }
  to { transform: scale(1.12); }
}

.hxm-hero__inner { position: relative; z-index: 2; width: 100%; }

.hxm-hero__copy { max-width: 640px; }

.hxm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-3xs);
  font-weight: 500;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-leaf-light);
}

.hxm-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--hxm-leaf);
}

.hxm-hero__title {
  font-family: var(--hxm-font-display);
  /* Deliberately below --hxm-fs-3xl: at 64px this wraps to three lines and
     the slide grows past the height the client asked to reduce. */
  font-size: clamp(2rem, 1.42rem + 2.5vw, 3.25rem);
  font-weight: 700;
  line-height: var(--hxm-lh-tight);
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-white);
  margin-block: 16px 14px;
  text-wrap: balance;
}

.hxm-hero__text {
  font-size: var(--hxm-fs-md);
  line-height: 1.6;
  color: var(--hxm-on-image);
  max-width: 48ch;
}

.hxm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hxm-hero__stat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hxm-on-image-rule);
  max-width: 380px;
}

.hxm-hero__stat-value {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-lg);
  font-weight: 700;
  color: var(--hxm-leaf-light);
  line-height: 1;
}

.hxm-hero__stat-label {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-on-image-soft);
  line-height: 1.5;
}

/* Controls */
.hxm-hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding-bottom: 30px;
}

.hxm-hero__controls-inner {
  display: flex;
  align-items: center;
  gap: 22px;
}

.hxm-hero__fraction {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-3xs);
  font-weight: 500;
  letter-spacing: var(--hxm-ls-label);
  color: var(--hxm-white);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.hxm-hero__fraction i {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--hxm-on-image-soft);
}

.hxm-hero__fraction span:last-child { color: var(--hxm-on-image-soft); }

.hxm-hero__progress {
  flex: 1;
  height: 2px;
  background: var(--hxm-on-image-veil);
  overflow: hidden;
  max-width: 340px;
}

.hxm-hero__progress span {
  display: block;
  height: 100%;
  background: var(--hxm-leaf);
  transform-origin: left center;
  transform: scaleX(0);
}

.hxm-hero__arrows { display: flex; gap: 8px; margin-left: auto; }

.hxm-hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--hxm-on-image-faint);
  border-radius: var(--hxm-r-xs);
  color: var(--hxm-white);
  transition: background-color var(--hxm-t-fast) var(--hxm-ease),
              color var(--hxm-t-fast) var(--hxm-ease),
              border-color var(--hxm-t-fast) var(--hxm-ease),
              opacity var(--hxm-t-fast) var(--hxm-ease);
}

.hxm-hero__arrow svg { width: 19px; height: 19px; }
.hxm-hero__arrow:hover { background: var(--hxm-leaf); border-color: var(--hxm-leaf); color: var(--hxm-white); }
.hxm-hero__arrow[disabled] { opacity: 0.35; pointer-events: none; }

/* ==========================================================================
   2. TRUST STRIP
   ========================================================================== */
.hxm-trust { padding-block: clamp(30px, 4vw, 44px); }

.hxm-trust__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hxm-trust__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 26px;
  border-left: 1px solid var(--hxm-line);
}

.hxm-trust__item:first-child { border-left: 0; padding-left: 0; }

.hxm-trust__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--hxm-leaf-soft);
  color: var(--hxm-green);
}

.hxm-trust__icon svg {
  width: 23px;
  height: 23px;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  transition: stroke-dashoffset 900ms var(--hxm-ease);
}

.hxm-trust__icon.is-drawn svg { stroke-dashoffset: 0; }

.hxm-trust__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.hxm-trust__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  color: var(--hxm-ink);
  line-height: 1.3;
}

.hxm-trust__note {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
  line-height: 1.5;
}

/* ==========================================================================
   3. SHOP BY CATEGORY
   ========================================================================== */
.hxm-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.hxm-cat {
  position: relative;
  display: block;
  border-radius: var(--hxm-leaf-arc);
  overflow: hidden;
  background: var(--hxm-mist);
  transition: transform var(--hxm-t-base) var(--hxm-ease), box-shadow var(--hxm-t-base) var(--hxm-ease);
}

.hxm-cat:hover { transform: translateY(-4px); box-shadow: var(--hxm-shadow-md); }

.hxm-cat__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }

.hxm-cat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 640ms var(--hxm-ease);
}

.hxm-cat:hover .hxm-cat__media img { transform: scale(1.06); }

.hxm-cat__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 26px 26px;
  background: linear-gradient(180deg, var(--hxm-scrim-0) 0%, var(--hxm-scrim-86) 62%);
  color: var(--hxm-white);
}

.hxm-cat__count {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-leaf-light);
  transform: translateY(6px);
  opacity: 0;
  transition: transform var(--hxm-t-base) var(--hxm-ease), opacity var(--hxm-t-base) var(--hxm-ease);
}

.hxm-cat:hover .hxm-cat__count { transform: none; opacity: 1; }

.hxm-cat__name {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--hxm-ls-tight);
  transition: transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-cat:hover .hxm-cat__name { transform: translateY(-2px); }

.hxm-cat__hi {
  font-family: var(--hxm-font-deva);
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-on-image-dim);
}

.hxm-cat__go {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--hxm-glass);
  color: var(--hxm-forest);
  opacity: 0;
  transform: translate3d(-6px, 6px, 0);
  transition: opacity var(--hxm-t-base) var(--hxm-ease), transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-cat:hover .hxm-cat__go { opacity: 1; transform: none; }
.hxm-cat__go svg { width: 19px; height: 19px; }

/* ==========================================================================
   5. INGREDIENT LEDGER  —  the signature section
   ========================================================================== */
.hxm-section--ledger { background: var(--hxm-paper); overflow: hidden; }

.hxm-ledger {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Left — the rotating cut-out on a soft radial ground */
.hxm-ledger__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
}

.hxm-ledger__ground {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, var(--hxm-white) 0%, var(--hxm-on-image-none) 70%);
}

.hxm-ledger__ground::before,
.hxm-ledger__ground::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--hxm-line-strong);
}

.hxm-ledger__ground::before { inset: 0; }
.hxm-ledger__ground::after { inset: 13%; border-style: dashed; opacity: 0.7; }

.hxm-ledger__img {
  position: relative;
  z-index: 2;
  width: 76%;
  height: auto;
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.97);
  transition: opacity 420ms var(--hxm-ease), transform 520ms var(--hxm-ease-out);
}

.hxm-ledger__img.is-in { opacity: 1; transform: none; }

.hxm-ledger__index {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: 6%;
  padding: 8px 14px;
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  font-variant-numeric: tabular-nums;
}

/* Right — the spec panel */
.hxm-ledger__panel { min-width: 0; }

/* --- The information column ------------------------------------------------
   Reordered for scanning: the herb name leads, one meta line places it
   botanically, a plain-language sentence explains it, then the measured
   composition sits in large, tabular rows. Previously the name competed with
   a stack of small mono rows and the numbers were the least legible thing on
   screen — which is the opposite of what this section is for. */
.hxm-ledger__index-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-green);
  font-variant-numeric: tabular-nums;
}

.hxm-ledger__index-inline::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--hxm-leaf);
}

.hxm-ledger__name {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-2xl);
  font-weight: 700;
  line-height: var(--hxm-lh-tight);
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-ink);
  margin-block: 14px 8px;
}

.hxm-ledger__hi {
  font-family: var(--hxm-font-deva);
  font-size: var(--hxm-fs-md);
  font-weight: 400;
  color: var(--hxm-muted);
  margin-left: 10px;
}

.hxm-ledger__latin {
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-muted);
}

.hxm-ledger__latin em {
  font-style: italic;
  color: var(--hxm-green);
  font-weight: 600;
}

.hxm-ledger__summary {
  margin-top: 16px;
  font-size: var(--hxm-fs-sm);
  line-height: 1.6;
  color: var(--hxm-muted);
  max-width: 52ch;
}

/* --- Measured composition -------------------------------------------------- */
.hxm-ledger__facts {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--hxm-line);
}

.hxm-ledger__facts-title {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-forest);
  margin-bottom: 6px;
}

.hxm-fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px 20px;
  padding-block: 16px;
  border-bottom: 1px solid var(--hxm-line);
}

.hxm-fact:last-child { border-bottom: 0; }

.hxm-fact__name {
  font-size: var(--hxm-fs-xs);
  font-weight: 600;
  color: var(--hxm-ink);
}

.hxm-fact__value {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--hxm-forest);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hxm-fact__value small {
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
  font-weight: 500;
  color: var(--hxm-muted);
  margin-left: 7px;
}

.hxm-fact__track {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-line);
  overflow: hidden;
}

.hxm-fact__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--hxm-leaf);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--hxm-ease);
}

.hxm-fact.is-filled .hxm-fact__fill { transform: scaleX(var(--hxm-potency, 0)); }

.hxm-ledger__origin {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-muted);
}

.hxm-ledger__origin svg { width: 17px; height: 17px; color: var(--hxm-green); flex: none; }

/* Top — the herb selector strip: pick a herb, then read its detail below */
.hxm-ledger__strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: clamp(36px, 4.5vw, 56px);
  padding-bottom: clamp(26px, 3vw, 36px);
  border-bottom: 1px solid var(--hxm-line);
}

.hxm-ledger__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--hxm-r-md);
  background: transparent;
  text-align: center;
  transition: background-color var(--hxm-t-base) var(--hxm-ease),
              border-color var(--hxm-t-base) var(--hxm-ease),
              transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-ledger__tab:hover { background: var(--hxm-white); border-color: var(--hxm-line); transform: translateY(-3px); }

.hxm-ledger__tab[aria-selected="true"] {
  background: var(--hxm-white);
  border-color: var(--hxm-leaf);
}

.hxm-ledger__tab-img {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
}

.hxm-ledger__tab-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(0.6);
  opacity: 0.62;
  transition: filter var(--hxm-t-base) var(--hxm-ease), opacity var(--hxm-t-base) var(--hxm-ease);
}

.hxm-ledger__tab:hover .hxm-ledger__tab-img img,
.hxm-ledger__tab[aria-selected="true"] .hxm-ledger__tab-img img { filter: none; opacity: 1; }

.hxm-ledger__tab-name {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-3xs);
  font-weight: 600;
  color: var(--hxm-ink);
  line-height: 1.2;
}

.hxm-ledger__tab-latin {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hxm-muted);
  line-height: 1.4;
}

/* ==========================================================================
   6. SPLIT BANNER
   ========================================================================== */
.hxm-split {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  background: var(--hxm-forest);
  border-radius: var(--hxm-r-lg);
  overflow: hidden;
}

.hxm-split__copy {
  position: relative;
  z-index: 2;
  padding: clamp(40px, 5vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.hxm-split__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-2xl);
  font-weight: 700;
  line-height: var(--hxm-lh-tight);
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-on-dark);
  margin-block: 16px 18px;
  max-width: 14ch;
}

.hxm-split__text {
  color: var(--hxm-on-dark-muted);
  font-size: var(--hxm-fs-sm);
  max-width: 46ch;
  margin-bottom: 30px;
}

.hxm-split__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 34px;
}

.hxm-split__point {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-on-dark);
}

.hxm-split__point svg { width: 17px; height: 17px; color: var(--hxm-leaf-light); flex: none; margin-top: 3px; }

/* Three named reasons to trust the brand, replacing an undifferentiated
   bullet list. */
.hxm-pillars {
  display: grid;
  gap: 26px;
  margin-block: 32px 36px;
  padding-top: 30px;
  border-top: 1px solid var(--hxm-on-dark-line);
}

.hxm-pillar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
}

.hxm-pillar__icon {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 50%;
  background: var(--hxm-leaf-ring);
  color: var(--hxm-leaf-light);
}

.hxm-pillar__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-on-dark);
}

.hxm-pillar__text {
  font-size: var(--hxm-fs-2xs);
  line-height: 1.65;
  color: var(--hxm-on-dark-muted);
  max-width: 46ch;
}

.hxm-split__media { position: relative; overflow: hidden; min-height: 480px; }

.hxm-split__media img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
}

/* ==========================================================================
   7. SHOP BY CONCERN
   ========================================================================== */
.hxm-concerns__tabs { margin-bottom: 10px; gap: 12px; }

.hxm-concerns .hxm-pilltabs__btn {
  padding: 13px 22px;
  font-size: var(--hxm-fs-2xs);
}

.hxm-concerns__more {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* ==========================================================================
   8. DEAL OF THE DAY
   ========================================================================== */
.hxm-section--deal { background: var(--hxm-forest); color: var(--hxm-on-dark); }

.hxm-deal {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hxm-deal__media {
  position: relative;
  border-radius: var(--hxm-leaf-arc);
  overflow: hidden;
  background: var(--hxm-mist);
  aspect-ratio: 1 / 1;
  max-width: 500px;
  width: 100%;
}

.hxm-deal__media img { width: 100%; height: 100%; object-fit: cover; }

.hxm-deal__title { color: var(--hxm-on-dark); margin-block: 16px 14px; }

.hxm-deal__hi {
  font-family: var(--hxm-font-deva);
  font-size: var(--hxm-fs-md);
  font-weight: 400;
  color: var(--hxm-leaf-light);
  margin-left: 8px;
}

.hxm-deal__text { color: var(--hxm-on-dark-muted); font-size: var(--hxm-fs-sm); max-width: 50ch; }

.hxm-deal__pricing { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.hxm-deal__pricing .price .amount { color: var(--hxm-on-dark); font-size: var(--hxm-fs-lg); }
.hxm-deal__pricing .price del .amount { color: var(--hxm-on-dark-muted); font-size: var(--hxm-fs-sm); }

.hxm-deal__stock { margin-top: 26px; max-width: 420px; }
.hxm-deal__stock .hxm-potency__label { color: var(--hxm-on-dark-muted); }
.hxm-deal__stock .hxm-potency__value { color: var(--hxm-on-dark); }
.hxm-deal__stock .hxm-potency__track { background: var(--hxm-on-dark-line); }
.hxm-deal__stock .hxm-potency__fill { background: var(--hxm-turmeric); }

.hxm-deal__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Countdown */
.hxm-countdown { display: flex; align-items: flex-end; gap: 10px; margin-top: 30px; }

.hxm-countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 74px;
}

.hxm-countdown__num {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 14px 8px;
  border: 1px solid var(--hxm-on-dark-line);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-on-dark-tint);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-lg);
  font-weight: 500;
  color: var(--hxm-on-dark);
  font-variant-numeric: tabular-nums;
  transform-origin: center top;
  backface-visibility: hidden;
}

.hxm-countdown__num.is-flip { animation: hxm-flip 420ms var(--hxm-ease); }

@keyframes hxm-flip {
  0% { transform: rotateX(-70deg); opacity: 0.4; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

.hxm-countdown__label {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-on-dark-muted);
}

.hxm-countdown__sep {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-lg);
  color: var(--hxm-leaf-light);
  padding-bottom: 30px;
}

/* ==========================================================================
   9. PROMO BANNER GRID
   ========================================================================== */
.hxm-promos {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.hxm-promo {
  position: relative;
  display: block;
  min-height: 250px;
  border-radius: var(--hxm-r-lg);
  overflow: hidden;
  background: var(--hxm-forest);
  color: var(--hxm-white);
}

.hxm-promo--tall { grid-row: span 2; min-height: 524px; }

.hxm-promo__media { position: absolute; inset: 0; }

.hxm-promo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--hxm-ease);
}

.hxm-promo:hover .hxm-promo__media img { transform: scale(1.06); }

.hxm-promo__body {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 30px 30px;
  background: linear-gradient(180deg, var(--hxm-scrim-0) 0%, var(--hxm-scrim-90) 68%);
  transition: transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-promo:hover .hxm-promo__body { transform: translateY(-4px); }

.hxm-promo__eyebrow {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-leaf-light);
}

.hxm-promo__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-lg);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: var(--hxm-ls-tight);
}

.hxm-promo__text {
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-on-image);
  max-width: 34ch;
}

.hxm-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-leaf-light);
}

.hxm-promo__cta svg { width: 15px; height: 15px; transition: transform var(--hxm-t-base) var(--hxm-ease); }
.hxm-promo:hover .hxm-promo__cta svg { transform: translateX(5px); }

/* ==========================================================================
   10. FARM TO FORMULATION
   ========================================================================== */
   ROOT CAUSE FIX
   This section used to be scroll-pinned: JS wrote an inline height of
   (sticky height + horizontal travel) onto .hxm-process to reserve scroll
   distance for a translating track. That reserved up to ~750px of empty
   page, and because the measurement ran before layout settled it applied
   inconsistently — which is where the giant blank area came from.

   It is now a plain grid timeline that sizes to its own content. No inline
   height, no sticky, no transform, no reserved scroll. */
.hxm-section--process { background: var(--hxm-paper); }

.hxm-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.hxm-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-right: 12px;
}

/* The connecting line runs from this step's marker to the next one, so it
   never overhangs the first or last marker. */
.hxm-step::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 62px;
  right: -28px;
  height: 2px;
  background: var(--hxm-line);
}

.hxm-step:last-child::after { display: none; }

.hxm-step__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--hxm-white);
  border: 2px solid var(--hxm-line);
  color: var(--hxm-green);
  transition: border-color var(--hxm-t-base) var(--hxm-ease),
              color var(--hxm-t-base) var(--hxm-ease);
}

.hxm-step__marker svg { width: 24px; height: 24px; }

.hxm-step:hover .hxm-step__marker,
.hxm-step:focus-within .hxm-step__marker {
  border-color: var(--hxm-leaf);
  color: var(--hxm-forest);
}

.hxm-step__n {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-label);
  /* leaf only reaches 2:1 against mist at this size — the darker palette
     green keeps the colour family and clears 4.5:1 */
  color: var(--hxm-green);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hxm-step__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  line-height: var(--hxm-lh-snug);
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-ink);
}

.hxm-step__text {
  font-size: var(--hxm-fs-2xs);
  line-height: 1.6;
  color: var(--hxm-muted);
}

/* ==========================================================================
   11. STATS
   ========================================================================== */
.hxm-section--stats { background: var(--hxm-mist); }

.hxm-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.hxm-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 26px;
  background: var(--hxm-white);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
}

.hxm-stat__value {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-2xl);
  font-weight: 500;
  color: var(--hxm-forest);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hxm-stat__label {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
}

/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */
.hxm-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 32px 30px;
  background: var(--hxm-white);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
}

.hxm-review__quote { color: var(--hxm-leaf); }
.hxm-review__quote svg { width: 30px; height: 30px; }

.hxm-review__text { margin: 0; }
.hxm-review__text p { font-size: var(--hxm-fs-2xs); color: var(--hxm-ink); }

.hxm-review__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--hxm-line);
}

.hxm-review__avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }

.hxm-review__who { display: flex; flex-direction: column; }
.hxm-review__who strong { font-family: var(--hxm-font-display); font-size: var(--hxm-fs-2xs); font-weight: 600; }

.hxm-review__meta {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
}

.hxm-review__tags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.hxm-review__tags .hxm-badge svg { width: 12px; height: 12px; }

.hxm-review__product {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-green);
  text-align: right;
}

.hxm-review__product:hover { text-decoration: underline; }

/* ==========================================================================
   13. CERTIFICATION MARQUEE
   ========================================================================== */
.hxm-section--certs { padding-block: clamp(40px, 5vw, 64px); border-block: 1px solid var(--hxm-line); }

.hxm-certs__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}

.hxm-certs__head i { flex: 1; height: 1px; background: var(--hxm-line); }

/* ==========================================================================
   14. JOURNAL
   ========================================================================== */
.hxm-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.hxm-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--hxm-white);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  overflow: hidden;
  transition: transform var(--hxm-t-base) var(--hxm-ease), box-shadow var(--hxm-t-base) var(--hxm-ease);
}

.hxm-post:hover { transform: translateY(-4px); box-shadow: var(--hxm-shadow-md); }

.hxm-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hxm-mist); }

.hxm-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 640ms var(--hxm-ease);
}

.hxm-post:hover .hxm-post__media img { transform: scale(1.05); }

.hxm-post__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1; }

.hxm-post__chip {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-leaf-soft);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-green);
}

.hxm-post__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-sm);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: var(--hxm-ls-tight);
}

.hxm-post__title a { transition: color var(--hxm-t-fast) var(--hxm-ease); }
.hxm-post:hover .hxm-post__title a { color: var(--hxm-green); }

.hxm-post__excerpt { font-size: var(--hxm-fs-2xs); color: var(--hxm-muted); }

.hxm-post__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
}

.hxm-post__meta svg { width: 14px; height: 14px; }

/* ==========================================================================
   15. NEWSLETTER BAND
   ========================================================================== */
.hxm-section--news { background: var(--hxm-mist); }

.hxm-news {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(36px, 4.5vw, 60px);
  background: var(--hxm-white);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-lg);
}

.hxm-news__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-xl);
  font-weight: 700;
  line-height: var(--hxm-lh-tight);
  letter-spacing: var(--hxm-ls-tight);
  margin-block: 14px 12px;
  max-width: 18ch;
}

.hxm-news__text { color: var(--hxm-muted); font-size: var(--hxm-fs-2xs); max-width: 46ch; }

.hxm-news__form { display: flex; flex-direction: column; gap: 12px; }

.hxm-news__submit {
  flex: none;
  min-height: 48px;
  height: 48px;
  padding-block: 0;
  padding-inline: 30px;
}
/* Bottom-aligned so the button sits level with the input, not with the
   label above it, and matched to the input height rather than oversized. */
.hxm-news__row { display: flex; gap: 10px; align-items: flex-end; }
.hxm-news__row .hxm-field { flex: 1; }

/* One panel, three grounds: the dark newsletter section, the dark footer,
   and the light contact form. It used to carry light-surface colours
   everywhere, which put --hxm-muted on forest at 2:1 — invisible. Only ever
   shown after a successful submit, which is why it survived earlier passes.
   The colours are now custom properties, defaulted for light and overridden
   by the two dark scopes below. */
.hxm-news__success {
  --hxm-succ-edge: var(--hxm-green);
  --hxm-succ-ico:  var(--hxm-green);
  --hxm-succ-ink:  var(--hxm-ink);
  --hxm-succ-meta: var(--hxm-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--hxm-succ-edge);
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-leaf-softer);
}

/* Only the FOOTER newsletter sits on dark. The homepage newsletter section
   looks dark from the outside but its inner .hxm-news card is white, so it
   keeps the light set above. */
.hxm-footer .hxm-news__success {
  --hxm-succ-edge: var(--hxm-leaf);
  --hxm-succ-ico:  var(--hxm-leaf);
  --hxm-succ-ink:  var(--hxm-on-dark);
  --hxm-succ-meta: var(--hxm-on-dark-muted);
}

.hxm-news__success svg { width: 22px; height: 22px; color: var(--hxm-succ-ico); flex: none; }
.hxm-news__success strong { display: block; font-family: var(--hxm-font-display); font-size: var(--hxm-fs-2xs); color: var(--hxm-succ-ink); }
.hxm-news__success span { font-size: var(--hxm-fs-2xs); color: var(--hxm-succ-meta); }

/* ==========================================================================
   16. BROWSE BY CONCERN  (reference-style ailment entry point)
   A plain, fast list of body systems rather than image tiles — people who
   arrive with a problem want to find it by name, not scan photographs.
   ========================================================================== */
.hxm-browse {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.hxm-browse__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}

.hxm-browse__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--hxm-line);
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-ink);
  transition: color var(--hxm-t-fast) var(--hxm-ease),
              padding-left var(--hxm-t-base) var(--hxm-ease);
}

.hxm-browse__link:hover,
.hxm-browse__link:focus-visible {
  color: var(--hxm-green);
  padding-left: 12px;
}

.hxm-browse__count {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
  font-variant-numeric: tabular-nums;
}

.hxm-browse__link svg {
  width: 18px;
  height: 18px;
  color: var(--hxm-leaf);
  flex: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--hxm-t-base) var(--hxm-ease),
              transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-browse__link:hover svg,
.hxm-browse__link:focus-visible svg { opacity: 1; transform: none; }

/* Search-by-concern panel */
.hxm-browse__aside {
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-lg);
  background: var(--hxm-white);
}

.hxm-browse__aside-title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-lg);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
  margin-block: 12px 10px;
}

.hxm-browse__aside-text {
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-muted);
  margin-bottom: 20px;
}

.hxm-browse__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ==========================================================================
   17. LEGACY TIMELINE
   ========================================================================== */
.hxm-legacy {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px 24px;
  padding-top: 30px;
}

/* One continuous line behind the whole row instead of a border per card,
   so it can be drawn rather than just appearing. */
.hxm-legacy__rail {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hxm-on-dark-line);
  overflow: hidden;
}

.hxm-legacy__rail i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--hxm-green), var(--hxm-leaf-light));
  transform-origin: left center;
  /* Unarmed default: a complete line. If the script never runs, the timeline
     reads as finished rather than as a rail waiting to be drawn. */
  transform: scaleX(1);
}

/* Armed: empty until the scroll handler writes a value. JS arms the list and
   paints in the same tick, so there is no frame where the rail is full and
   then collapses. The short transition only smooths the gap between rAF
   frames — it must not be long enough to lag the scroll. */
.hxm-legacy.is-armed .hxm-legacy__rail i {
  transform: scaleX(var(--hxm-story-progress, 0));
  transition: transform 120ms linear;
}

.hxm-legacy__item {
  position: relative;
  padding-top: 26px;
}

/* Hidden ONLY once JS has armed the list. Anything that stops the script
   before that leaves the timeline plainly visible instead of blank. */
.hxm-legacy.is-armed .hxm-legacy__item {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(6px);
  transition:
    opacity 700ms var(--hxm-ease-out) var(--hxm-story-delay, 0ms),
    transform 700ms var(--hxm-ease-out) var(--hxm-story-delay, 0ms),
    filter 700ms var(--hxm-ease-out) var(--hxm-story-delay, 0ms);
}

.hxm-legacy.is-armed .hxm-legacy__item.is-in { opacity: 1; transform: none; filter: none; }

/* The dot lands slightly after its card, with a single ring that expands
   out of it — the one flourish in the section. */
.hxm-legacy__dot {
  position: absolute;
  top: -1px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hxm-leaf-light);
}

.hxm-legacy.is-armed .hxm-legacy__dot {
  transform: scale(0);
  transition: transform 520ms var(--hxm-ease-back) calc(var(--hxm-story-delay, 0ms) + 140ms);
}

.hxm-legacy__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--hxm-leaf-light);
  opacity: 0;
}

.hxm-legacy.is-armed .hxm-legacy__item.is-in .hxm-legacy__dot { transform: scale(1); }

.hxm-legacy.is-armed .hxm-legacy__item.is-in .hxm-legacy__dot::after {
  animation: hxm-story-ping 900ms var(--hxm-ease-out) calc(var(--hxm-story-delay, 0ms) + 240ms) 1;
}

@keyframes hxm-story-ping {
  from { opacity: 0.85; transform: scale(0.6); }
  to   { opacity: 0;    transform: scale(2.1); }
}

.hxm-legacy__year {
  display: block;
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-lg);
  font-weight: 700;
  color: var(--hxm-leaf-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The year wipes upward out of its own line box a beat before the copy —
   again, only once armed. */
.hxm-legacy.is-armed .hxm-legacy__year {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 620ms var(--hxm-ease-out) calc(var(--hxm-story-delay, 0ms) + 90ms);
}

.hxm-legacy.is-armed .hxm-legacy__item.is-in .hxm-legacy__year { clip-path: inset(0 0 -18% 0); }

.hxm-legacy__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  line-height: var(--hxm-lh-snug);
  color: var(--hxm-on-dark);
  margin-block: 12px 8px;
}

.hxm-legacy__text {
  font-size: var(--hxm-fs-2xs);
  line-height: 1.6;
  color: var(--hxm-on-dark-muted);
}

/* No motion means no hidden resting state — the section is simply there. */
@media (prefers-reduced-motion: reduce) {
  .hxm-legacy.is-armed .hxm-legacy__item { opacity: 1; transform: none; filter: none; transition: none; }
  .hxm-legacy.is-armed .hxm-legacy__dot { transform: scale(1); transition: none; }
  .hxm-legacy .hxm-legacy__dot::after { animation: none; }
  .hxm-legacy.is-armed .hxm-legacy__year { clip-path: none; transition: none; }
  .hxm-legacy__rail i { transform: scaleX(1); transition: none; }
}

/* ==========================================================================
   18. AILMENT CIRCLES  —  the quick "jump to a category" row that sits
   directly under the hero. Horizontally scrollable rather than wrapped, so
   the row reads as one continuous shelf at every width.
   ========================================================================== */
.hxm-section--ailments { padding-block: clamp(34px, 4vw, 52px); }

/* The eyebrow is inline-flex and carries no margin of its own, so the gap to
   the circles has to be declared here or the label sits on top of them. */
.hxm-ailments__label { margin-bottom: clamp(22px, 2.6vw, 34px); }

/* A grid, not a scroller. Eight tiles divide the 1222px container evenly,
   so there is nothing to scroll and therefore no scrollbar to style away.
   Responsive.css reflows it to 4 x 2 and then 2 x 4. */
.hxm-ailments {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px) clamp(8px, 1.4vw, 18px);
  align-items: start;
}

.hxm-ailment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: center;
}

.hxm-ailment__disc {
  display: grid;
  place-items: center;
  width: clamp(76px, 6.6vw, 96px);
  height: clamp(76px, 6.6vw, 96px);
  border-radius: 50%;
  background: var(--hxm-mist);
  color: var(--hxm-green);
  transition: background-color var(--hxm-t-base) var(--hxm-ease),
              color var(--hxm-t-base) var(--hxm-ease),
              transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-ailment__disc svg { width: clamp(34px, 2.9vw, 42px); height: clamp(34px, 2.9vw, 42px); }

.hxm-ailment:hover .hxm-ailment__disc,
.hxm-ailment:focus-visible .hxm-ailment__disc {
  background: var(--hxm-forest);
  color: var(--hxm-leaf-light);
  transform: translateY(-3px);
}

.hxm-ailment__name {
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--hxm-ink);
  text-wrap: balance;
}

.hxm-ailment:hover .hxm-ailment__name { color: var(--hxm-green); }

/* ==========================================================================
   19. CATEGORY ROWS  —  a heading plus four products, repeated. Gives the
   homepage real merchandise above the fold without one long undifferentiated
   grid.
   ========================================================================== */
.hxm-catrow + .hxm-catrow { margin-top: clamp(48px, 6vw, 80px); }

.hxm-catrow__head { margin-bottom: clamp(24px, 3vw, 36px); }
.hxm-catrow .hxm-sec-head__title { margin-top: 10px; }

/* ==========================================================================
   20. WAVE DIVIDER  —  one path, filled with the surface the band is cut
   against, so a colour band reads as carved rather than as a stripe with a
   drawing on it. The bottom placement is the top one flipped, which is why
   there is a single path in hxm_wave().
   ========================================================================== */
.hxm-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(34px, 6vw, 92px);
  display: block;
  pointer-events: none;
}

/* The fill is the NEIGHBOURING surface, not the band's own — a band set
   against a mist section declares --hxm-wave-above: var(--hxm-mist) and the
   cut lands invisibly on it. Defaults to the page surface. */
.hxm-wave--top { top: -1px; color: var(--hxm-wave-above, var(--hxm-paper)); }

.hxm-wave--bottom {
  bottom: -1px;
  transform: scaleY(-1);
  color: var(--hxm-wave-below, var(--hxm-paper));
}

/* ==========================================================================
   21. CATEGORY TILES  —  the shop-by-category grid. One tile per shelf,
   carrying that shelf's leading pack rather than a scene, because the pack is
   the thing that changes when the shelf does.
   ========================================================================== */
/* Six columns, each tile spanning two, which is three across -- the same
   layout repeat(3, ...) gave, with two spare tracks that let a short final
   row be centred. Hiding a shelf (see category-tiles.php) left eight tiles
   in a three-wide grid and a hole at the end of the last row; the two rules
   below close it and match only when the last row is actually short, so a
   ninth shelf coming back needs no edit here. */
.hxm-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(28px, 3.5vw, 44px);
}

.hxm-tiles__item { grid-column: span 2; }

/* Two left over: start them one track in, so the pair sits centred. */
.hxm-tiles__item:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }

/* One left over: put it in the middle. */
.hxm-tiles__item:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }

.hxm-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--hxm-white);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  overflow: hidden;
  transition: transform var(--hxm-t-base) var(--hxm-ease),
              box-shadow var(--hxm-t-base) var(--hxm-ease),
              border-color var(--hxm-t-base) var(--hxm-ease);
}

.hxm-tile:hover {
  transform: translateY(-4px);
  border-color: var(--hxm-leaf);
  box-shadow: var(--hxm-shadow-md);
}

.hxm-tile__title {
  font-family: var(--hxm-font-display);
  font-size: clamp(1.25rem, 1.02rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--hxm-ls-tight);
  text-transform: uppercase;
  color: var(--hxm-forest);
  text-wrap: balance;
}

/* Grows to absorb the difference between a one-line and a two-line title, so
   the footers of a row of tiles stay on one line. */
.hxm-tile__media {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  margin-block: clamp(14px, 1.6vw, 22px);
  aspect-ratio: 4 / 3;
  border-radius: var(--hxm-r-xs);
  overflow: hidden;
  background: var(--hxm-mist);
}

.hxm-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 640ms var(--hxm-ease);
}

.hxm-tile:hover .hxm-tile__media img { transform: scale(1.05); }

.hxm-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--hxm-line);
}

.hxm-tile__count {
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-muted);
}

.hxm-tile__go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--hxm-mist);
  color: var(--hxm-forest);
  transition: background var(--hxm-t-base) var(--hxm-ease),
              color var(--hxm-t-base) var(--hxm-ease),
              transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-tile__go svg { width: 16px; height: 16px; }

.hxm-tile:hover .hxm-tile__go {
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  transform: translateX(3px);
}

/* ==========================================================================
   22. INGREDIENT WHEEL  —  six wedges cut from one disc, the brand mark in a
   white core. The wedges are SVG; the herb plates on top are real elements so
   they can carry alt text and survive a stylesheet failure.
   ========================================================================== */
.hxm-wheelsplit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}

.hxm-wheel { display: grid; place-items: center; }

.hxm-wheel__disc {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: var(--hxm-shadow-lg);
}

.hxm-wheel__disc > svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

/* The ring is a full-size overlay; each segment is rotated out from the
   centre, its plate pushed along the radius, then counter-rotated so the
   label stays level however far round the disc it sits. */
.hxm-wheel__ring {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;

  /* Each segment is a full-size square rotated about the centre, so its
     bounding box runs up to 1.37x the disc -- about 58px of empty corner
     hanging out of each side at the mobile disc width. Nothing is drawn out
     there, but the boxes still counted as content: on a 375px phone they made
     the document 404px wide, and a horizontally overflowing document widens
     the mobile LAYOUT viewport, which is the containing block for every
     position:fixed element. That is what pushed the floating WhatsApp button
     (right: 16px of 404, not of 375) off the right edge of the screen.
     Clipping to the disc box costs nothing visually and fixes both. */
  overflow: hidden;
}

.hxm-wheel__seg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;
  transform: rotate(var(--hxm-seg-a, 0deg));
  pointer-events: none;
}

/* Sized and offset so that six plates at this radius clear each other on the
   circumference AND clear the core: a 30% box set 5% in puts its centre at
   0.60 of the radius, where the arc between neighbours is 0.314 of the disc
   against a 0.30 box. */
.hxm-wheel__herb {
  display: block;
  width: 30%;
  aspect-ratio: 1;
  margin-top: 5%;
  transform: rotate(calc(-1 * var(--hxm-seg-a, 0deg)));
}

/* The plates are transparent botanical drawings, so they sit straight on the
   wedge — no disc behind them, which is what the reference does with its
   photography. */
.hxm-wheel__herb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(12, 42, 30, 0.28));
}

.hxm-wheel__core {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 34%;
  aspect-ratio: 1;
  padding: 5%;
  border-radius: 50%;
  background: var(--hxm-white);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55), var(--hxm-shadow-md);
}

.hxm-wheel__core img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hxm-wheel__text {
  margin-top: 16px;
  font-size: var(--hxm-fs-sm);
  line-height: var(--hxm-lh-body);
  color: var(--hxm-muted);
}

.hxm-wheel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-block: clamp(20px, 2.4vw, 30px);
}

.hxm-wheel__chip {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 74px;
}

.hxm-wheel__chip img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--hxm-line);
  background: var(--hxm-mist);
}

.hxm-wheel__chip span {
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
  color: var(--hxm-muted);
  text-align: center;
}

/* ==========================================================================
   23. WHY CHOOSE  —  four numbered claims, each with the evidence under it.
   The numeral is a ghost behind the card rather than a heading, so the claim
   is still the first thing read.
   ========================================================================== */
.hxm-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(28px, 3.5vw, 44px);
}

.hxm-reason {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: 0 16px;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--hxm-white);
  border: 1px solid var(--hxm-line);
  border-radius: var(--hxm-r-md);
  overflow: hidden;
}

.hxm-reason::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--hxm-leaf), var(--hxm-turmeric));
  opacity: 0;
  transition: opacity var(--hxm-t-base) var(--hxm-ease);
}

.hxm-reason:hover::before { opacity: 1; }

.hxm-reason__n {
  grid-column: 1;
  font-family: var(--hxm-font-display);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-green);
  opacity: 0.16;
}

.hxm-reason__mark {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-forest);
  color: var(--hxm-leaf-light);
}

.hxm-reason__mark svg { width: 24px; height: 24px; }

.hxm-reason__label {
  grid-column: 1;
  align-self: center;
  justify-self: start;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-green-soft);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
  color: var(--hxm-green);
}

.hxm-reason__title {
  grid-column: 1 / -1;
  margin-top: 18px;
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-lg);
  font-weight: 700;
  line-height: var(--hxm-lh-snug);
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-ink);
  text-wrap: balance;
}

.hxm-reason__text {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: var(--hxm-fs-2xs);
  line-height: var(--hxm-lh-body);
  color: var(--hxm-muted);
}

.hxm-reason__points {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hxm-line);
}

.hxm-reason__points li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-ink);
}

.hxm-reason__points svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--hxm-green);
}

.hxm-reason__tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hxm-reason__tag {
  padding: 6px 14px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
}

/* ==========================================================================
   24. VIDEO PICKS  —  a portrait clip per product. The play control only
   renders when a clip is actually attached, so the frame never offers a video
   it cannot play; see template-parts/sections/video-picks.php.
   ========================================================================== */
.hxm-picks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(24px, 3vw, 40px);
}

.hxm-pick {
  display: flex;
  flex-direction: column;
  border-radius: var(--hxm-r-md);
  overflow: hidden;
  background: var(--hxm-forest-deep);
  box-shadow: var(--hxm-shadow-md);
}

.hxm-pick__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--hxm-mist);
}

.hxm-pick__poster,
.hxm-pick__frame video,
.hxm-pick__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  transition: transform 720ms var(--hxm-ease);
}

.hxm-pick:hover .hxm-pick__poster { transform: scale(1.04); }

.hxm-pick__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: var(--hxm-r-xs);
  background: var(--hxm-forest);
  color: var(--hxm-on-dark);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 700;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.hxm-pick__badge--new { background: var(--hxm-green); }
.hxm-pick__badge--liked { background: var(--hxm-turmeric-ink); }
.hxm-pick__badge--deal { background: var(--hxm-danger); }
.hxm-pick__badge--best { background: var(--hxm-leaf); }

.hxm-pick__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  background: var(--hxm-glass);
  color: var(--hxm-forest);
  cursor: pointer;
  transition: transform var(--hxm-t-base) var(--hxm-ease-back),
              background var(--hxm-t-base) var(--hxm-ease);
}

.hxm-pick__play svg { width: 24px; height: 24px; margin-left: 3px; }
.hxm-pick__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.hxm-pick.is-playing .hxm-pick__play,
.hxm-pick.is-playing .hxm-pick__caption { display: none; }

.hxm-pick__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 16px 14px;
  background: linear-gradient(180deg, var(--hxm-scrim-0), var(--hxm-scrim-86));
  color: var(--hxm-white);
  font-size: var(--hxm-fs-3xs);
  line-height: 1.4;
}

.hxm-pick__product {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: var(--hxm-on-dark);
}

.hxm-pick__thumb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--hxm-r-xs);
  overflow: hidden;
  background: var(--hxm-white);
}

.hxm-pick__thumb img { width: 100%; height: 100%; object-fit: contain; }

.hxm-pick__body { display: grid; gap: 3px; min-width: 0; }

/* Two lines, then ellipsis — the names run long and the row is fixed. */
.hxm-pick__name {
  font-size: var(--hxm-fs-3xs);
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hxm-pick__price { display: flex; align-items: baseline; gap: 8px; }
.hxm-pick__price del { font-size: var(--hxm-fs-label-sm); color: var(--hxm-on-dark-muted); }

.hxm-pick__price ins {
  font-weight: 700;
  font-size: var(--hxm-fs-2xs);
  color: var(--hxm-leaf-light);
  text-decoration: none;
  background: none;
}

.hxm-pick__go {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hxm-on-dark-tint-up);
  transition: transform var(--hxm-t-base) var(--hxm-ease);
}

.hxm-pick__go svg { width: 15px; height: 15px; }
.hxm-pick__product:hover .hxm-pick__go { transform: translateX(3px); }

/* ==========================================================================
   25. STAT BAND  —  the counters, cut out of a mist strip. Same
   [data-hxm-stats] hook and same .hxm-stat cards as before; only the band
   around them is new.
   ========================================================================== */
.hxm-statband {
  position: relative;
  padding-block: clamp(72px, 8vw, 128px);
  background: var(--hxm-mist);
}

.hxm-statband__head { margin-bottom: clamp(24px, 3vw, 40px); }
.hxm-statband .hxm-stat { border-color: transparent; box-shadow: var(--hxm-shadow-sm); }

/* ==========================================================================
   26. ASSURANCE  —  the forest claim band, wave-cut at both edges, with the
   four service promises under it on the page surface.
   ========================================================================== */
.hxm-assure { padding-block: 0; }

/* No overflow clipping: the waves are inset by -1px so they overhang onto the
   page surface rather than leaving a sub-pixel seam of band colour, and
   clipping them turns that overhang into the very hairline it prevents.

   The band's top edge meets the mist stat band, so its top wave is filled
   mist; below it is the promises row on the page surface. */
.hxm-assure__band {
  position: relative;
  padding-block: clamp(76px, 9vw, 132px);
  background: var(--hxm-forest);
  --hxm-wave-above: var(--hxm-mist);
}

.hxm-assure__claim {
  margin: 0;
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-xl);
  font-weight: 700;
  line-height: var(--hxm-lh-snug);
  letter-spacing: var(--hxm-ls-tight);
  color: var(--hxm-on-dark);
  text-align: center;
  text-wrap: balance;
}

.hxm-assure__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  padding-block: clamp(40px, 5vw, 68px);
}

.hxm-assure__item {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.hxm-assure__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--hxm-mist);
  color: var(--hxm-green);
}

.hxm-assure__icon svg { width: 24px; height: 24px; }

.hxm-assure__title {
  font-family: var(--hxm-font-display);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  color: var(--hxm-ink);
}

.hxm-assure__text {
  font-size: var(--hxm-fs-2xs);
  line-height: 1.55;
  color: var(--hxm-muted);
  max-width: 30ch;
}

/* ==========================================================================
   27. HOMEPAGE SURFACE RHYTHM
   The page alternates paper and mist the whole way down, with one forest
   section in the middle. Every card on this site is white, so the sections
   that are made of cards take the tint and the ones that are not stay on
   paper — which makes the alternation land on content rather than being
   applied to it. In render order:

     hero              forest-deep photograph
     ailments          paper    icon circles
     category-tiles    mist     white tiles
     trust             paper    icon strip
     category-rows     mist     white product cards
     ingredient-wheel  paper    the disc carries its own colour
     why-choose        FOREST   white cards, the one mid-page peak
     video-picks       paper    dark cards
     testimonials      mist     white cards
     process           paper    numbered steps, no cards
     stats             mist     white stat cards, wave-cut top edge
     assurance         forest band (wave both edges) over paper promises
     certifications    mist     logo marquee
     journal           paper    white post cards

   No two neighbours share a surface. Reorder front-page.php and this has to
   be re-derived — including the two wave fills, which name the surface each
   band is cut against rather than their own.
   ========================================================================== */