/* ===========================================================
   page-wellness-kit.css
   -----------------------------------------------------------
   Page wrapper: .page-wellness-kit
   Loaded by the CMS via getVersionedFile('css/page-wellness-kit.css').

   FRAME WIDTHS (per FIGMA_HANDOFF.md)
     Desktop: 1440px frame, content 1200 (Figma 14686:3128)
     Mobile:  no mobile frame supplied for this page -- the phone
              tier inherits the donor (page-relaxation-kit, itself from
              page-bio-tuner-lite) values,
              400px frame basis (content 380 + 10px gutter each side).

   PAGE FONT-SIZE BASE
     font-size: 18px on .page-wellness-kit. Every em value below is
     calibrated against this base, so Figma px values translate
     directly: 50px Figma -> 50/18 = 2.778em.

     Why em (not rem): rem anchors to <html>, which the CMS leaves at
     the browser default (16px). The Figma was designed against an
     18px base, so all spacing/typography math is in 18ths. Using em
     anchors the math to the .page-wellness-kit font-size scope
     instead, so it stays correct without touching <html> and risking
     the CMS chrome (header/footer) on this page. Watch for em
     compounding in any element that declares its own font-size --
     children of that element will resolve em against the new size,
     not 18px.

   CLAMP FORMULA (already inlined below; documented for reference)
     slope_vw     = (desktop_px - mobile_px) / (1200 - 400) * 100
                  = (desktop_px - mobile_px) / 8
     intercept_px = mobile_px - slope_vw/100 * 400
     result       = clamp(mobile_px, slope_vw vw + intercept_px, desktop_px)

   Clamps use PX endpoints, not em (em inside clamp() depends on the
   parent's font-size and is fragile in this CMS-embedded page).
   No fallback declaration. Single clamp() per rule.

   INHERITED FROM CMS-LOADED CSS (do not re-declare unless overriding):
     - font-family: 'Roboto', sans-serif
     - color-scheme: light only

   ASCII rule: this file MUST stay ASCII-clean. Use HTML entities in
   markup (&mdash; &rsquo;) and -- in comments.

   SECTION INDEX (search the block prefix to jump to a section)
     model         1. Product hero (gallery + buy panel + plug selector)
     box           2. In the box (four technology cards)
     day           3. How they fit into a day (rail + moment cards)
     how-to        4. Watch before you start (four video cards, 3 + 1)
     pair          5. Also worth a look (Wellness & Relaxation Kit card)
     swpg          6. Where to begin (booklet)
     faq           7. Questions (FAQ accordion)
     section-wave  Wave dividers between sections
     page-wave     Page-bottom wave into the footer

   Cloned from page-relaxation-kit (Oct 2026). Same sections; the box
   grid, day rail and video grid carry four cards instead of five (no
   Bio Tuner) per the KWELL Figma.
=========================================================== */

/* -- TOKENS ---------------------------------------------- */
.page-wellness-kit {
  /* Root font-size: dominant Figma paragraph size. */
  font-size: 18px;

  /* Font family: declared here (not just inherited from CMS chrome)
     so the page renders correctly in standalone preview contexts and
     is robust if the CMS-loaded family ever fails to load. Matches
     the CMS body family -- no override, just an explicit assertion. */
  font-family: 'Roboto', sans-serif;

  /* Typography scale -- values per Figma section frames.
     Seed values derived from structural metadata heights:
       heading text rows ~36-45px tall => font ~28-36px
       body text       ~25px tall      => font ~16-18px */
  --text-heading:    clamp(30px, 2.5vw + 20px, 50px); /* 50px / 30px -- big centered section titles */
  --text-subheading: clamp(18px, 0.5vw + 16px, 22px);     /* 22px / 18px -- section intro subhead */
  --text-body:       clamp(16px, 0.25vw + 15px, 18px);     /* ~18px / 16px */
  --text-subtitle:   clamp(14px, 0.25vw + 13px, 16px); /* ~16px / 14px uppercase */
  --text-card-title: clamp(18px, 0.5vw + 16px, 22px);     /* ~22px / 18px */
  --text-btn:        1em;  /* 18px -- Figma button label size. Earlier
                              draft used a clamp to 15px which was below
                              spec; raised to 1em to apply uniformly to
                              every .btn (kits CTAs, swpg CTA, ATC,
                              compare button, etc.). */
  --text-small:      0.778em; /* 14px fixed */

  /* Spacing -- per Figma; seeded from common SOTA patterns.
     section_y 80/40, gutter 30/10. */
  --space-section-y: clamp(40px, 5vw + 20px, 80px);  /* 80px / 40px */
  --space-container: clamp(10px, 2.5vw, 30px); /* 30px / 10px gutter */
  --space-gap-md:    clamp(10px, 1.25vw + 5px, 20px); /* ~20px / 10px */
  --space-gap-lg:    clamp(20px, 2.5vw + 10px, 40px); /* ~40px / 20px */

  /* Radius */
  --radius-btn:    0.625em; /* 11px -- kit default, kept for non-pill variants */
  --radius-pill:   9999px;   /* pill buttons (this page uses pill style heavily) */
  --radius-card:   0.5em;   /*  9px */
  /* PX not em: feeds calc(radius - 1px) corner arcs on mixed-type-size
     elements; em resolves per-element and mismatches the curves (bug
     found on the compare page, Aug 2026). Identical rendering at the
     18px base. */
  --radius-panel:  20px; /* product cards, trust badges, reveals */
  --radius-hero:   clamp(10px, 2.5vw, 30px); /* normalized to the 1200 basis Aug 2026 (was reaching 30px only at ~1700w); hero corners now hit 30px at 1200 */

  /* ============================================================
     BRAND ACCENT CONFIG  --  the only colour lines a new page edits.
     Neutral, role-named tokens. A page built from this template sets
     these three to its product's brand colour; every accent helper
     (.text-accent, .section--accent, checks, links, etc.) references
     them, so re-theming a page is a 3-line change.
     THIS PAGE (Wellness Kit) -> site blue (the kit has no
     product colour of its own; the Figma uses the Water O3zonator /
     site-primary blue throughout).
     ============================================================ */
  --color-accent:      var(--color-water-ozonator);      /* working accent -- text, links, badges, borders */
  --color-accent-dark: var(--color-water-ozonator-dark); /* darker shade -- eyebrow text, hovers, focus ring */
  --color-accent-tint: var(--color-water-ozonator-tint); /* pale fill -- tinted section backgrounds */
  /* Derived alpha tints of the accent -- tinted pills, tab states, the
     Cautions "Important" callout, testimonial cards and the which-model
     compare columns. color-mix() locks every tint to --color-accent, so
     re-theming a clone stays a 3-token swap with NO literal rgba() values
     to hunt down (the WOZ clone missed five of them -- designer feedback
     items 9/11/12/14, July 2026). */
  --color-accent-a60: color-mix(in srgb, var(--color-accent) 60%, transparent);
  --color-accent-a40: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --color-accent-a30: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --color-accent-a20: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --color-accent-a12: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-a10: color-mix(in srgb, var(--color-accent) 10%, transparent);

  /* Full product palette -- retained for cross-product links, kit
     cards and shared utilities that reference a SPECIFIC product
     regardless of which product THIS page is. */
  --color-silver-pulser:   #92ca6a;  /* green */
  --color-magnetic-pulser: #59afb2;  /* teal */
  --color-water-ozonator:  #4792bc;  /* blue -- also the site primary */
  --color-bio-tuner:       #a194c7;  /* purple */

  /* Product pastel backgrounds (lighter tints for themed sections) */
  --color-silver-pulser-tint:   #d9e8d8;
  --color-magnetic-pulser-tint: #cae4e6;
  --color-water-ozonator-tint:  #bbddf0;
  --color-bio-tuner-tint:       #d5d1e6;

  /* Neutrals */
  --color-dark:            #3b3b3b; /* body text -- confirmed from Section 1 Figma */
  --color-tariff:          #c98a2b; /* amber -- USA tariff surcharge line in the buy panel */
  --color-white:           #ffffff;
  --color-cream-bg:        #f8f4f2;
  --color-light-blue:      #eff9fd;
  --color-light-blue-deep: #d6effa;

  /* Accent text variants (darker shades of brand colours used for eyebrows) */
  --color-silver-pulser-dark:   #4a8b3f; /* darker green for "MICROPULSING" eyebrow text */
  --color-water-ozonator-dark:  #3f799a; /* darker blue -- accent-dark on this page (matches page-water-ozonator) */

  /* Button hover dark -- lighter than --color-dark (#3b3b3b).
     Used as the on-hover background for every coloured CTA on the site,
     per the Figma "Add to Cart / Variant3" component. */
  --color-btn-hover: #555555;

  /* Wrapper layout */
  color: var(--color-dark);
  width: 100%;

  /* Section colours promoted to tokens (consistency audit, Oct 2026):
     no inline hex in section rules. */
  --color-border:            #d4d4d4;  /* card / control hairlines */
  --color-border-hover:      #a0a0a0;  /* expand-button hover ring */
  --color-border-mid:        #cdcdcd;  /* reveal + compare-row dividers */
  --bg-section-grey:         #edecec;  /* Which-model section band */
  --color-card-border:       #e2e8e3;  /* Figma green/90 card stroke */
  --color-error:             #b00020;  /* FAQ load-error text */
  --color-warning:           #cc0000;  /* plug-type prompt (Figma validation red) */
  --color-axis:              #7b8f9c;  /* day-rail MORNING / EVENING axis labels */
  --color-text-mid:          #555555;  /* video-card titles (Figma #555) */
  --color-card-stroke:       #e2dbd7;  /* tech-card / session-pill hairline (Figma) */
}

/* -- RESET (scoped to this page) ------------------------- */
.page-wellness-kit *,
.page-wellness-kit *::before,
.page-wellness-kit *::after {
  box-sizing: border-box;
  margin: 0;
}
.page-wellness-kit a      { text-decoration: none; color: inherit; }
.page-wellness-kit ul     { list-style: none; padding: 0; }
.page-wellness-kit img    { display: block; max-width: 100%; height: auto; }
.page-wellness-kit button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
/* Section wrappers use <header>; the CMS site-wide stylesheet sets a
   font-size on the masthead <header>, which matches our section headers by
   tag and (since it's directly matched, it beats the inherited 18px base)
   inflates every em inside them. Re-anchor to the page base -- same reason
   the button reset above re-inherits font metrics. */
.page-wellness-kit header { font: inherit; }

/* Shared section-title base (site standard, Aug 2026): every top-level
   section <h2> carries .sec-title plus its block class (e.g.
   class="sec-title kits__title"). The base owns the declarations all
   section titles share; each block rule keeps only its own line-height
   (varies 1.2 / 1.3 by section) and local overrides, which win on
   source order. Matches the convention on the technology pages. */
.page-wellness-kit .sec-title {
  font-size: var(--text-heading); /* 50 / 30px */
  font-weight: 900;
}

/* Keyboard focus (site standard, Aug 2026): a visible ring on
   interactive elements, matching the technology pages. Only shows for
   keyboard/AT focus (:focus-visible), never on mouse click. */
.page-wellness-kit a:focus-visible,
.page-wellness-kit button:focus-visible,
.page-wellness-kit input:focus-visible,
.page-wellness-kit [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* -- LAYOUT UTILITIES ------------------------------------ */
/* Sections span 100% viewport width (background extends edge-to-edge).
   Content is centred and constrained inside .container, which also
   holds the horizontal gutter padding. */
.page-wellness-kit .section {
  padding: var(--space-section-y) 0;
  width: 100%;
}
.page-wellness-kit .container {
  width: 100%;
  /* Gutters sit OUTSIDE the content column (designer, Aug 2026; matches
     compare-silver-pulsers): a true 1200px column at desktop, padding
     only bites once the viewport is narrower than 1200 + gutters. */
  max-width: calc(1200px + 2 * var(--space-container));
  margin: 0 auto;
  padding: 0 var(--space-container);
}

/* Section background variants */
.page-wellness-kit .section--white  { background: var(--color-white); }
.page-wellness-kit .section--cream  { background: var(--color-cream-bg); }
.page-wellness-kit .section--light  { background: var(--color-light-blue); }
.page-wellness-kit .section--accent-tint { background: var(--color-accent-tint); }
.page-wellness-kit .section--accent { background: var(--color-accent); color: var(--color-white); }
.page-wellness-kit .section--teal   { background: var(--color-magnetic-pulser); color: var(--color-white); }
.page-wellness-kit .section--purple { background: var(--color-bio-tuner);       color: var(--color-white); }

/* -- COLOUR UTILITIES ------------------------------------
   Two-tone headings use the role pair .text-ink (primary tone) +
   .text-accent (emphasised brand tone). On the kit pages .text-ink is
   the dark grey (#3b3b3b) -- designer feedback, Oct 2026: the inherited
   BTL1 blue ink made both tones blue; .text-accent is --color-accent. */
.page-wellness-kit .text-accent { color: var(--color-accent); }
.page-wellness-kit .text-ink    { color: var(--color-dark); }
.page-wellness-kit .text-teal    { color: var(--color-magnetic-pulser); }
.page-wellness-kit .text-purple  { color: var(--color-bio-tuner); }
.page-wellness-kit .text-white   { color: var(--color-white); }
.page-wellness-kit .text-dark    { color: var(--color-dark); }
.page-wellness-kit .text-center  { text-align: center; }

/* Brand subscript -- the "3" in "Water O3zonator" is a brand
   identifier rendered as a subscript. Authored as semantic
   <sub class="brand-sub">3</sub> (ASCII-clean; the literal
   subscript glyph would fail the host's upload filter).
   Tuned here rather than relying on the browser <sub> default,
   which over-shrinks and over-drops the character. */
.page-wellness-kit .brand-sub {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: -0.15em;
}

/* -- TYPOGRAPHY UTILITIES -------------------------------- */
.page-wellness-kit .section-title {
  font-size: var(--text-heading);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  margin-bottom: var(--space-gap-lg);
}
.page-wellness-kit .text-subheading {
  font-size: var(--text-subheading);
  font-weight: 700;
  line-height: 1.5;
}
.page-wellness-kit .text-subtitle {
  font-size: var(--text-subtitle);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-wellness-kit .text-body {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.6;
}
.page-wellness-kit .text-small-italic {
  font-size: var(--text-small);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
}
.page-wellness-kit .text-card-title {
  font-size: var(--text-card-title);
  font-weight: 700;
  line-height: 1.3;
}

/* -- BUTTONS --------------------------------------------- */
.page-wellness-kit .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Asymmetric vertical padding: the top is 0.056em (1px) larger than
     the bottom to optically centre uppercase text. Roboto Black's
     cap-height sits above the midpoint of the em square, so equal
     padding makes the glyphs appear to ride high. */
  padding: calc(0.625em + 0.056em) 1.25em calc(0.625em - 0.056em);
  border-radius: var(--radius-btn);
  font-size: var(--text-btn);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
  cursor: pointer;
}

/* Each colour variant transitions to the same dark grey on hover --
   no translate, no expansion. Pattern applied uniformly to every
   coloured CTA on the page EXCEPT Add-to-Cart, which additionally
   expands vertically -- see .model__add-to-cart:hover further down. */
.page-wellness-kit .btn--primary {
  background: var(--color-water-ozonator);
  color: var(--color-white);
}
.page-wellness-kit .btn--primary:hover {
  background: var(--color-btn-hover);
}

/* Pill modifier -- overrides border-radius to give a fully rounded pill.
   This page's Add-to-Cart and many other CTAs use pill style. */
.page-wellness-kit .btn--pill { border-radius: var(--radius-pill); }

.page-wellness-kit .btn-center {
  display: flex;
  justify-content: center;
  margin-top: var(--space-gap-lg);
}

/* -- TWO-COLUMN LAYOUT ----------------------------------- */
.page-wellness-kit .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-gap-lg);
  align-items: start;
}
.page-wellness-kit .two-col--reverse .two-col__text  { order: 1; }
.page-wellness-kit .two-col--reverse .two-col__media { order: 0; }
.page-wellness-kit .two-col--align-center { align-items: center; }

.page-wellness-kit .two-col__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
  min-width: 0;
}
.page-wellness-kit .two-col__media {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.page-wellness-kit .two-col__media img { width: 100%; }

.page-wellness-kit .rounded-img {
  border-radius: var(--radius-card);
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* -- FEATURE LIST (checkmark or disc bullets) ------------ */
.page-wellness-kit .feature-list {
  list-style: disc;
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.page-wellness-kit .feature-list li {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.6;
}

/* Checkmark-style list (used in Kits / SWPG sections in the Figma) */
.page-wellness-kit .check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
}
.page-wellness-kit .check-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
}
.page-wellness-kit .check-list__icon {
  color: var(--color-water-ozonator); /* brand blue check (currentColor sprite) */
  width: 30px;  /* fixed px: em was resolving small against parent font-size */
  height: 30px;
  flex-shrink: 0;
}

/* -- VIDEO THUMBNAIL ------------------------------------- */
/* Used by .image-to-video markup (see COMPONENTS.md). Click
   handler in /js/replace_image_with_video.js opens a modal. */
.page-wellness-kit .video-thumb {
  position: relative;
  display: block;
}
.page-wellness-kit .video-thumb__img {
  border-radius: var(--radius-card);
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16/9;
}
.page-wellness-kit .video-thumb .play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(48px, 16%, 96px);
  height: auto;
  opacity: 0.85;
  transition: transform 0.2s, opacity 0.2s;
  pointer-events: none;
}
.page-wellness-kit .video-thumb:hover .play-button {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* ===========================================================
   PAGE-SPECIFIC SECTIONS
   -----------------------------------------------------------
   Each of the 9 sections gets its own block below as
   Figma:get_design_context is pulled. Order follows the page
   so a top-down read of this file mirrors a top-down read of
   the page.

   Naming convention:
     .section-<name>             section wrapper
     .section-<name>__<part>     element inside
     .section-<name>--<modifier> variant
=========================================================== */

/* -----------------------------------------------------------
   SECTION 1: MODEL  (Figma 14686:3153)
   Product gallery (left, 10-slide carousel) + buy panel (right,
   sticky on desktop). Stacks vertically below 1024px.
----------------------------------------------------------- */

/* Section-level overrides: this section uses 30px top / 80px bottom
   per Figma rather than the page default. */
.page-wellness-kit .section-model {
  padding: clamp(20px, 1.25vw + 15px, 30px) 0 var(--space-section-y); /* 20/30 -> 80px */
  background: var(--color-white);
}

.page-wellness-kit .model__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-md);
}

/* Breadcrumb / filter strip */
.page-wellness-kit .model__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.page-wellness-kit .model__breadcrumb-link,
.page-wellness-kit .model__breadcrumb-current {
  display: inline-block;
  padding: 0.556em 0.556em; /* 10px - matches Figma button padding */
  border-radius: 1.333em;    /* 24px - rounded pill */
  font-size: 1em;            /* 18px */
  font-weight: 400;
  line-height: 1.5;            /* 27px */
  color: var(--color-dark);
  white-space: nowrap;
}
/* Phone: keep the breadcrumb on ONE line (designer feedback mobile #2,
   WOZ July 2026). At 18px the strip can sit at the viewport edge and wrap
   the current-page item; stop the wrap and step the type down. */
@media (max-width: 767px) {
  .page-wellness-kit .model__breadcrumb { flex-wrap: nowrap; }
  .page-wellness-kit .model__breadcrumb-link,
  .page-wellness-kit .model__breadcrumb-current {
    font-size: 0.833em; /* 15px */
    padding-left: 0.417em;  /* 7.5px */
    padding-right: 0.417em;
    white-space: nowrap;
  }
  .page-wellness-kit .model__breadcrumb-sep {
    font-size: 1em; /* 18px -- was 22px */
    padding: 0 0.083em;
  }
}
.page-wellness-kit .model__breadcrumb-link {
  cursor: pointer;
  transition: background-color 0.15s;
}
.page-wellness-kit .model__breadcrumb-link:hover {
  text-decoration: underline;
}
.page-wellness-kit .model__breadcrumb-sep {
  font-size: 1.222em; /* 22px */
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1;
  padding: 0 0.111em;
}
.page-wellness-kit .model__breadcrumb-current {
  font-weight: 400;
}

/* Product row: gallery + buy panel side-by-side at desktop */
.page-wellness-kit .model__product {
  display: grid;
  grid-template-columns: 591px 1fr;
  gap: 1.111em; /* 20px between columns */
  align-items: start;
}

/* =============== GALLERY (left column) =============== */
.page-wellness-kit .model__gallery {
  position: sticky;
  top: 1em;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.111em; /* 20px between thumb rail and main */
  width: 100%;
}

/* Thumbnail rail -- vertical film strip (site-card-scroller, axis=y,
   follow mode). The rail mirrors the main carousel: the active thumb
   is scrolled into view as the main image advances. Hidden < 1024px
   (mobile uses the dot indicator). */
/* The whole tower (arrows + strip) is 600px tall; the arrows sit
   INSIDE it, top and bottom, and the scroll viewport flex-fills the
   space between them. */
.page-wellness-kit .model__gallery-thumbs {
  display: flex;
  flex-direction: column;
  height: 600px;            /* film-strip tower, arrows included */
  gap: 0.556em; /* 10px between the arrows and the strip */
  align-items: stretch;
}
/* The scroll viewport: fills the space between the two arrows;
   overflow + snap come from site-card-scroller.css (the axis=y rules). */
.page-wellness-kit .model__gallery-thumbs-track {
  flex: 1 1 auto;
  min-height: 0;            /* allow the flex child to shrink + scroll */
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px between thumbs */
  align-items: stretch;
}
/* Up / down arrows: a second pair of carousel controls (carousel-btn
   carousel-btn--prev/--next) -- they advance the main image one at a
   time and dim to 0.35 at the first / last image via the carousel's
   .carousel-btn.is-disabled rule. Same size as the main gallery
   arrows (29x39), reusing that asset rotated to point up / down. */
.page-wellness-kit .model__gallery-thumbs-arrow {
  flex-shrink: 0;
  width: 64px;
  height: 2.167em; /* 39px -- matches the main gallery arrows */
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s, transform 0.15s;
}
.page-wellness-kit .model__gallery-thumbs-arrow:hover { transform: scale(1.1); }
/* CSS-only chevron: a small rotated square with two visible borders. */
.page-wellness-kit .model__gallery-thumbs-chevron {
  display: block;
  width: 0.667em;  /* ~12px */
  height: 0.667em;
  border-top: 2px solid var(--color-dark);
  border-right: 2px solid var(--color-dark);
}
.page-wellness-kit .model__gallery-thumbs-arrow--up .model__gallery-thumbs-chevron {
  transform: rotate(-45deg);       /* points up */
  margin-top: 0.222em;             /* visually centre the rotated shape */
}
.page-wellness-kit .model__gallery-thumbs-arrow--down .model__gallery-thumbs-chevron {
  transform: rotate(135deg);       /* points down */
  margin-bottom: 0.222em;
}
.page-wellness-kit .model__gallery-thumb {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 0.278em; /* 5px */
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  border: 0;
  transition: transform 0.15s;
}
.page-wellness-kit .model__gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.278em; /* 5px - matches wrapper now that there's no border */
}
.page-wellness-kit .model__gallery-thumb:hover {
  transform: scale(1.05);
}
/* Active thumb: border around the image currently on the stage
   (drawn as an inset outline so the 64px box never shifts). */
.page-wellness-kit .model__gallery-thumb.is-active {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: -2px;
}

/* Main stage */
.page-wellness-kit .model__gallery-main {
  position: relative;
  display: flex;
  /* Arrows centre on the row. The dot rail is taken out of flow (below) so the
     stage height equals the aspect-locked track height -- keeping the arrows
     centred on the IMAGE, not drifting with the rail beneath it. */
  align-items: center;
}
.page-wellness-kit .model__gallery-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Circle button with a CSS-drawn white chevron (matches the home page). The
     circle uses this page's accent (bio-tuner purple). No image asset. */
  background: var(--color-accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s, transform 0.15s;
}
.page-wellness-kit .model__gallery-arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-left: 2.5px solid var(--color-white);
  border-bottom: 2.5px solid var(--color-white);
  transform: translateX(2px) rotate(45deg);   /* points LEFT (prev) */
}
.page-wellness-kit .model__gallery-arrow--next::before {
  transform: translateX(-2px) rotate(225deg); /* mirrored -> points RIGHT */
}
.page-wellness-kit .model__gallery-arrow:hover {
  transform: scale(1.1);
}

.page-wellness-kit .model__gallery-stage .carousel-slide img {
  /* Tapping/clicking the gallery image itself now opens the fullscreen
     modal (site-carousels.js tap-to-expand, Sep 2026); zoom-in cursor
     signals it on desktop, matching the expand button's affordance. */
  cursor: zoom-in;
}
.page-wellness-kit .model__gallery-stage {
  position: relative;       /* anchor for the absolute expand button */
  flex: 1;                  /* takes width inside .model__gallery-main row */
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.556em;             /* 10px between track and dots */
}
/* Track sits inside the stage, takes available vertical space. Position
   relative so slides are positioned within it (they fill it). */
.page-wellness-kit .model__gallery-track {
  position: relative;
  width: 100%;
  /* Lock the carousel viewport to the source image ratio (449 x 582)
     so it holds at every viewport; width drives height. */
  aspect-ratio: 449 / 582;
}
.page-wellness-kit .model__gallery-slide {
  display: none;
  width: 100%;
  height: 100%;
}
.page-wellness-kit .model__gallery-slide.is-active {
  display: block;
}
.page-wellness-kit .model__gallery-slide img {
  width: 100%;
  height: 100%;
  /* cover: fills the carousel box, which is locked to the source image
     ratio (449 x 582) on .model__gallery-track -- so correctly-sized
     images show fully with no cropping at any viewport. An off-ratio
     image crops to fill; set object-position on that slide if a
     specific subject must stay fully visible. */
  object-fit: cover;
  border-radius: 0.5em;
}

/* Dot progress bar -- 10 dots, active = blue */
.page-wellness-kit .model__gallery-mobile-dots {
  /* Out of flow so the stage height equals the aspect-locked track height
     (keeps the arrows centred on the image). Sits just below the track. */
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.556em);
  display: flex;
  gap: 0.556em; /* 10px */
  align-items: center;
  justify-content: center;
}
.page-wellness-kit .model__gallery-mobile-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  /* Figma spec is rgba(0,0,0,0.2) but it reads as invisible in
     production -- bumped to 0.4 for legibility. Active dot stays
     water-ozonator blue per Figma. */
  background: rgba(0, 0, 0, 0.4);
  transition: background-color 0.2s;
}
.page-wellness-kit .model__gallery-mobile-dot.is-active {
  background: var(--color-water-ozonator);
}

/* Expand button -- floating circular bottom-right */
.page-wellness-kit .model__gallery-expand {
  position: absolute;
  right: 0.122em; /* 2.2px */
  bottom: 0.456em; /* 8.2px */
  width: 2.489em;  /* 44.8px */
  height: 2.489em;
  border-radius: 9999px;
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.page-wellness-kit .model__gallery-expand:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 1px var(--color-border-hover), 0 2px 8px rgba(0, 0, 0, 0.1);
}
.page-wellness-kit .model__gallery-expand .icon {
  /* Sprite symbol (ico-gallery-expand) replaces the retired
     gallery_expand.svg <img> (Aug 2026). .icon is 1em square, so
     font-size on the icon itself sets the 13.6px glyph size without
     scaling the 44.8px button. Colour via currentColor. */
  font-size: 0.756em; /* 13.6px */
  color: var(--color-dark);     /* the original asset's stroke grey (not a brand token) */
}

/* Fullscreen image modal opened by the expand button.
   Uses native <dialog>; CSS resets the browser defaults so the
   image fills the viewport-relative bounds, with a translucent
   backdrop and an absolutely-positioned close button. Font-size
   is reset to 18px because dialog elements promoted to the top
   layer do not inherit from .page-wellness-kit reliably across
   browsers, and em units below depend on that anchor. */
.page-wellness-kit .model__gallery-modal {
  font-size: 18px;
  border: 0;
  padding: 0;
  margin: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  background: transparent;
  color: var(--color-white);
}
.page-wellness-kit .model__gallery-modal::backdrop {
  background: rgba(0, 0, 0, 0.88);
}
.page-wellness-kit .model__gallery-modal-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-wellness-kit .model__gallery-modal-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 0.5em; /* 9px -- subtle, matches gallery image radius */
}
.page-wellness-kit .model__gallery-modal-arrow {
  /* Same circle-plus-chevron as the inline gallery arrows, floated over
     the fullscreen view. Wired by site-carousels.js as ordinary
     carousel-btn--prev/--next controls. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s;
}
.page-wellness-kit .model__gallery-modal-arrow--prev { left: 1.111em; }  /* 20px */
.page-wellness-kit .model__gallery-modal-arrow--next { right: 1.111em; }
.page-wellness-kit .model__gallery-modal-arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-left: 2.5px solid var(--color-white);
  border-bottom: 2.5px solid var(--color-white);
  transform: translateX(2px) rotate(45deg);   /* points LEFT (prev) */
}
.page-wellness-kit .model__gallery-modal-arrow--next::before {
  transform: translateX(-2px) rotate(225deg); /* mirrored -> points RIGHT */
}
.page-wellness-kit .model__gallery-modal-arrow:hover {
  transform: translateY(-50%) scale(1.1);
}
.page-wellness-kit .model__gallery-modal-close {
  position: absolute;
  top: 1.111em;  /* 20px */
  right: 1.111em;
  width: 2.222em;  /* 40px */
  height: 2.222em;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  font-size: 1.667em; /* 30px -- visible glyph */
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
}
.page-wellness-kit .model__gallery-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* =============== BUY PANEL (right column) =============== */
.page-wellness-kit .model__buy {
  position: sticky;
  top: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.611em; /* 11px between rows -- from Figma */
}

/* Heading block */
.page-wellness-kit .model__heading {
  display: flex;
  flex-direction: column;
}
.page-wellness-kit .model__title {
  font-size: clamp(30px, 0.625vw + 27.5px, 35px); /* 30 -> 35px, fluid 400->1200 */
  font-weight: 700;
  line-height: 1.3; /* ~45px @35 desktop / ~39px @30 mobile (A1) */
  color: var(--color-dark);
  margin: 0;
}
.page-wellness-kit .model__model {
  font-size: 1.222em; /* 22px */
  font-weight: 700;
  line-height: 2.045; /* 45px / 22px (B) */
  color: var(--color-dark);
  margin: 0;
}

/* Description block (Figma 14654:3665): ONE accent card holding a single
   body paragraph (no eyebrow, no title). .model__desc-wrap is the outer
   spacing wrapper; the inner card keeps the shared --accent styling. */
.page-wellness-kit .model__desc-wrap {
  padding-bottom: 1.111em; /* 20px */
}
.page-wellness-kit .model__desc {
  display: flex;
  flex-direction: column;
  gap: 0.556em;
  padding-bottom: 1.111em; /* 20px */
}
/* Box treatment (padding/radius/shadow) lives on the INNER card
   modifier only, never on the generic .model__desc wrapper. */
.page-wellness-kit .model__desc--accent {
  padding: 1.111em; /* 20px */
  border-radius: var(--radius-panel); /* 20px */
  box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07);
}
.page-wellness-kit .model__desc--accent {
  background: var(--color-accent-a30);
}
.page-wellness-kit .model__desc-body {
  font-size: 1em; /* 18px */
  font-weight: 400;
  line-height: 1.667; /* 30px / 18px (C) */
  color: var(--color-dark);
  margin: 0;
}

/* Price */
.page-wellness-kit .model__price {
  display: flex;
  align-items: baseline;
  gap: 0.222em; /* 4px */
  margin: 0;
}
/* USA tariff surcharge line (Brad, Aug 2026). Reuses .model__price for
   the flex/baseline layout; this modifier restyles the text (the price
   line's 25px/900 lives on the child spans, which this line doesn't use). */
.page-wellness-kit .model__tariff {
  display: block; /* not flex: the label text + token spans flow and wrap as one sentence on phones */
  font-size: 1em; /* 18px */
  font-weight: 500;
  color: var(--color-tariff);
}
/* Struck compare-at price (Figma 14661:6191): the site-utilities.js
   price-sum module replaces the hidden parts with the summed total. */
.page-wellness-kit .model__price-was {
  font-size: 1em; /* 18px */
  font-weight: 500;
  line-height: 1.944; /* 35px */
  color: var(--color-dark);
  text-decoration: line-through;
  margin-right: 0.667em; /* 20px gap to the kit price (Figma gap-[20px], minus the flex gap) */
}
.page-wellness-kit .model__price-was:empty { display: none; }
.page-wellness-kit .model__price-amount {
  font-size: 1.389em; /* 25px */
  font-weight: 900;
  line-height: 1.4; /* 35px / 25px (B) */
  color: var(--color-water-ozonator);
}
.page-wellness-kit .model__price-currency {
  font-size: 1.111em; /* 20px */
  font-weight: 400;
  line-height: 1.75; /* 35px / 20px (B) */
  color: var(--color-dark);
}

/* Finance row */
.page-wellness-kit .model__finance {
  display: flex;
  flex-direction: column;
  gap: 0.833em; /* 15px */
}
.page-wellness-kit .model__shipping {
  font-size: 1em; /* 18px */
  font-weight: 400;
  line-height: 1.667; /* 30px / 18px (C) */
  color: var(--color-dark);
  margin: 0;
}
.page-wellness-kit .model__bnpl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.556em; /* 10px */
  margin: 0;
}
.page-wellness-kit .model__bnpl-label {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.333; /* 24px / 18px (C) */
  color: var(--color-dark);
}
.page-wellness-kit .model__bnpl-link {
  font-size: 0.833em; /* 15px */
  font-weight: 700;
  line-height: 1.4; /* 21px / 15px (C, per comment intent) */
  color: var(--color-dark);
  border-bottom: 3px solid var(--color-dark);
  /* No border-radius on a text element's border-bottom; it curves visibly
     at each end because the box is much taller than the border. Figma
     spec is 2px, bumped to 3px for legibility in production. */
  transition: color 0.15s, border-color 0.15s;
}
.page-wellness-kit .model__bnpl-link:hover {
  color: var(--color-water-ozonator);
  border-bottom-color: var(--color-water-ozonator);
}

/* Trust badges */
.page-wellness-kit .model__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.667em; /* 30px */
  padding: 0.556em 0;
  list-style: none;
  margin: 0;
}
.page-wellness-kit .model__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.556em; /* 10px */
}
.page-wellness-kit .model__trust-icon {
  color: var(--color-water-ozonator); /* brand blue check (currentColor sprite) */
  width: 30px; /* fixed px: em was resolving small against parent font-size */
  height: 30px;
  flex-shrink: 0;
}
.page-wellness-kit .model__trust-text {
  font-size: 1.111em; /* 20px */
  font-weight: 700;
  line-height: 1.75; /* 35px / 20px (B) */
  color: var(--color-water-ozonator);
}
.page-wellness-kit .model__trust-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.111em; /* 20px */
  height: 1.111em;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.page-wellness-kit .model__trust-info:hover { opacity: 1; }
.page-wellness-kit .model__trust-info img { width: 100%; height: 100%; }
.page-wellness-kit .model__trust-info svg { width: 100%; height: 100%; }

/* Return-policy tooltip. Shown on hover (mouse), tap (touch), or focus
   (keyboard) by site-utilities.js, which toggles [hidden] + .is-open.
   The trust item is the positioning context. */
.page-wellness-kit .model__trust-item { position: relative; }
.page-wellness-kit .model__trust-tip {
  position: absolute;
  top: calc(100% + 0.556em); /* 10px below the row */
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: 20em; /* ~360px at the 18px base */
  padding: 0.833em 1.111em; /* 15 / 20px */
  border-radius: 0.667em; /* 12px */
  background: var(--color-white);
  box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.18);
  font-size: 1em; /* 18px */
  font-weight: 400;
  line-height: 1.556; /* 28px */
  color: var(--color-dark);
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.page-wellness-kit .model__trust-tip[hidden] { display: none; }
.page-wellness-kit .model__tariff-wrap { position: relative; } /* surcharge tooltip anchor, mirrors .model__trust-item */
.page-wellness-kit .model__tariff .model__trust-info {
  color: var(--color-dark);   /* same gray as the 30-day tip icon (page text + 0.7 opacity) */
  vertical-align: middle;     /* baseline-relative centering ... */
  position: relative;
  top: -0.056em;              /* ... plus a 1px lift; measured against the 30-day
                                 icon this puts both centers within 0.1px */
  margin-left: 0.278em;       /* 5px breathing room after the amount */
}
.page-wellness-kit .model__trust-tip ul {
  margin: 0.278em 0 0; /* 5px */
  padding-left: 1.111em; /* 20px */
  list-style: disc;
}
.page-wellness-kit .model__trust-tip li { margin-top: 0.278em; }
.page-wellness-kit .model__trust-tip.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.page-wellness-kit .model__trust-tip-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-wellness-kit .model__trust-tip-link:hover { color: var(--color-accent-dark); }
/* Phone: the panel is centred on the "?" trigger (left:50% / -50%) with a
   360px max-width; the trigger sits in the right half of the buy panel, so
   on a ~370px phone the panel overran the right viewport edge and clipped
   (designer feedback mobile #3, WOZ July 2026). Anchor it to the trust
   item's full width instead. */
@media (max-width: 767px) {
  .page-wellness-kit .model__trust-tip {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: translateY(-4px);
  }
  .page-wellness-kit .model__trust-tip.is-open {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-wellness-kit .model__trust-tip { transition: none; }
}

/* Add-to-cart form -- legacy table wrapper neutralized */
.page-wellness-kit .model__purchase-table,
.page-wellness-kit .model__purchase-table > tbody,
.page-wellness-kit .model__purchase-table > tbody > tr,
.page-wellness-kit .model__purchase-table > tbody > tr > td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  border-collapse: collapse;
}
.page-wellness-kit .model__purchase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.556em; /* 10px */
  padding: 0.556em 0;
  margin: 0;
}
/* Plug-type selector (Figma 14661:4378) -- required, one choice for the
   whole kit. Same DOM contract as the MP7 / WOZ5 pages: fieldset
   [data-plug-group] with a legend, a hidden [data-plug-msg] prompt and a
   [data-plug-load] container that site-cart.js fills with
   .model__plug-option pills (US/UK/EU/AU) from cart_API action=options. */
.page-wellness-kit .model__plug {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
  padding: 0.556em 0; /* 10px vertical, per Figma py-[10px] */
  border: 0;
  margin: 0;
  min-width: 0;
  flex: 0 0 100%; /* own row within the flex-wrap purchase form (above qty/ATC) */
}
.page-wellness-kit .model__plug-label {
  font-size: 1em; /* 18px */
  font-weight: 400; /* "-- applies to whole kit." is regular; the lead-in <strong> is bold */
  line-height: 1.333; /* 24px / 18px */
  color: var(--color-dark);
  padding: 0;
}
.page-wellness-kit .model__plug-prompt {
  display: flex;
  align-items: center;
  gap: 0.556em; /* 10px between icon and text */
  font-size: 0.833em; /* 15px */
  font-weight: 400;
  line-height: 1.333; /* 20px / 15px */
  color: var(--color-warning);
  margin: 0;
}
.page-wellness-kit .model__plug-prompt[hidden] { display: none; }
.page-wellness-kit .model__plug-prompt-icon {
  width: 1em;  /* 15px at the 15px prompt size */
  height: 1em;
  flex-shrink: 0;
  color: var(--color-warning); /* drives currentColor in the sprite symbol */
}
.page-wellness-kit .model__plug-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.556em; /* 10px */
}
.page-wellness-kit .model__plug-option {
  padding: 0.278em 1.111em; /* 5px 20px */
  border: 1px solid var(--color-dark);
  border-radius: 0.556em; /* 10px */
  background: var(--color-white);
  font-size: 1em; /* 18px */
  font-weight: 400;
  line-height: 1.5; /* 27px / 18px */
  letter-spacing: 0.1em; /* ~1.8px */
  text-transform: uppercase;
  color: var(--color-dark);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.page-wellness-kit .model__plug-option:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.page-wellness-kit .model__plug-option[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.page-wellness-kit .model__qty {
  display: inline-flex;
  align-items: center;
  gap: 0.556em; /* 10px */
  padding: 0.278em 1.111em; /* 5px 20px */
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-pill);
  background: var(--color-white);
}
.page-wellness-kit .model__qty-btn {
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  color: var(--color-dark);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-wellness-kit .model__qty-input {
  width: 1.5em;
  text-align: center;
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-dark);
  background: transparent;
  border: 0;
  padding: 0;
  /* Hide default number-input spinners */
  -moz-appearance: textfield;
  appearance: textfield;
}
.page-wellness-kit .model__qty-input::-webkit-outer-spin-button,
.page-wellness-kit .model__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.page-wellness-kit .model__add-to-cart {
  gap: 0.556em;
  padding: 0.556em 1.111em; /* 10px 20px */
  font-size: 1em; /* 18px */
  /* Override .btn's narrower transition list to include padding +
     box-shadow, both of which animate on hover and is-added. */
  transition: padding 0.15s, box-shadow 0.15s, background-color 0.15s;
}
/* On hover: colour change only (the blue -> hover-dark background swap
   from .btn--primary:hover). The button does NOT grow on hover, per
   designer. (The post-click .is-added state below still expands.) */
/* Post-click success state: SAME SIZE as the resting button (designer,
   July 2026 -- the old expanded-height behaviour is gone), reverts to the
   base bg (not the hover-dark), gains a soft outer glow, and
   swaps the icon + label via the variant toggles below.
   Class is added by site-cart.js on confirmed add and removed
   after a short delay. */
.page-wellness-kit .model__add-to-cart.is-added,
.page-wellness-kit .model__add-to-cart.is-added:hover {
  background: var(--color-water-ozonator);
  box-shadow: 0 0 20px 0 rgba(59, 59, 59, 0.3);
}
/* Icon + label variants -- both pre-rendered, one hidden at any time.
   Cleaner than mutating textContent / src in JS, and ensures both
   assets are preloaded so the swap is instant. */
.page-wellness-kit .model__cart-icon--added,
.page-wellness-kit .model__atc-label--added { display: none; }
.page-wellness-kit .model__add-to-cart.is-added .model__cart-icon--default,
.page-wellness-kit .model__add-to-cart.is-added .model__atc-label--default { display: none; }
.page-wellness-kit .model__add-to-cart.is-added .model__cart-icon--added,
.page-wellness-kit .model__add-to-cart.is-added .model__atc-label--added { display: inline-flex; }
.page-wellness-kit .model__cart-icon {
  /* Sprite symbols (ico-cart / ico-cart-added) inherit the button's white
     text via currentColor -- the old icon_cart_*.svg <img>s and their
     brightness/invert filter hack are retired (July 2026). */
  width: 1.5em;  /* 27px-ish */
  height: 1.222em; /* 22px */
  transition: transform 0.15s;
}

/* Hidden reveals (site-reveal.js: button trigger + [hidden] region) */
.page-wellness-kit .model__reveals {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-panel); /* 20px */
  overflow: hidden;
}
.page-wellness-kit .model__reveal + .model__reveal {
  border-top: 1px solid var(--color-border-mid);
}
.page-wellness-kit .model__reveal-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.111em;
  width: 100%;
  padding: 1.111em; /* 20px */
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s;
}
.page-wellness-kit .model__reveal-label {
  flex: 1;
  font-size: 1.111em; /* 20px */
  font-weight: 700;
  line-height: 1.5; /* 30px / 20px (B) */
  color: var(--color-dark);
}
/* Chevron in a circular container. Collapsed: down + pale-blue fill.
   Expanded: flips 180deg (points up) + solid-blue fill. */
.page-wellness-kit .model__reveal-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;  /* 24px */
  height: 1.5em;
  border-radius: 9999px;
  background: rgba(71, 146, 188, 0.12);
  transition: background-color 0.2s, transform 0.3s;
}
.page-wellness-kit .model__reveal-icon img {
  width: 0.444em;  /* 8px */
  height: 0.333em; /* 6px */
  object-fit: contain;
  display: block;
  /* Recolor the source chevron to the brand blue for the collapsed
     (pale-blue circle) state. */
  filter: brightness(0) saturate(100%) invert(52%) sepia(19%) saturate(1011%) hue-rotate(158deg) brightness(92%) contrast(85%);
  transition: filter 0.2s;
}
.page-wellness-kit .model__reveal-trigger:hover {
  background: rgba(71, 146, 188, 0.12); /* 12% #4792bc, per designer */
}
.page-wellness-kit .model__reveal-trigger:hover .model__reveal-icon {
  background: rgba(71, 146, 188, 0.20);
}
/* Expanded state (aria-expanded set by site-reveal.js) */
.page-wellness-kit .model__reveal-trigger[aria-expanded="true"] .model__reveal-icon {
  background: var(--color-water-ozonator);
  transform: rotateX(180deg);
}
/* Recolor the chevron white when the circle fills blue. The source
   SVG is dark; this filter turns it white at the expanded state. */
.page-wellness-kit .model__reveal-trigger[aria-expanded="true"] .model__reveal-icon img {
  filter: brightness(0) invert(1);
}

/* Sprite chevron (currentColor): recolor via color, not filter. */
.page-wellness-kit .model__reveal-icon svg {
  width: 0.444em;  /* 8px */
  height: 0.333em; /* 6px */
  display: block;
  color: var(--color-water-ozonator); /* brand blue #4792bc, collapsed */
  transition: color 0.2s;
}
.page-wellness-kit .model__reveal-trigger[aria-expanded="true"] .model__reveal-icon svg { color: var(--color-white); }

/* Reveal body (shown/hidden by site-reveal.js) */
.page-wellness-kit .model__reveal-body {
  padding: 0 1.111em 1.111em;
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-wellness-kit .model__reveal-body[hidden] { display: none; }
.page-wellness-kit .model__reveal-note {
  font-size: 0.833em; /* 15px */
  font-weight: 400;
  line-height: 1.6; /* 24px */
  color: var(--color-dark);
}

/* Accessory card (Stock up + Upgrades reveals) */
.page-wellness-kit .accessory-card {
  display: flex;
  align-items: center;
  gap: 1.111em; /* 20px */
  padding: 0.556em; /* 10px */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel); /* 20px */
}
.page-wellness-kit .accessory-card__media {
  flex-shrink: 0;
  width: 5.556em;  /* 100px */
  height: 5.556em;
  border-radius: 0.222em; /* 4px */
  overflow: hidden;
}
.page-wellness-kit .accessory-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-wellness-kit .accessory-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-wellness-kit .accessory-card__name {
  font-size: 1.111em; /* 20px */
  font-weight: 700;
  line-height: 1.5; /* 30px */
  color: var(--color-dark);
}
.page-wellness-kit .accessory-card__price {
  font-size: 1.111em; /* 20px */
  font-weight: 400;
  line-height: 1.15; /* 23px */
  color: var(--color-dark);
}
.page-wellness-kit .accessory-card__desc {
  font-size: 1em; /* 18px */
  font-weight: 400;
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
}
/* The add-to-cart form wrapper is layout-transparent: the card's flex
   (desktop) / grid (mobile, grid-area:add) places the + Add BUTTON
   directly, so the form must not introduce its own box. */
.page-wellness-kit .accessory-card__buy { display: contents; }
.page-wellness-kit .accessory-card__add {
  flex-shrink: 0;
  align-self: center;
  padding: 0.278em 1.111em; /* 5px 20px */
  border-radius: var(--radius-pill);
  background: rgba(85, 85, 85, 0.1);
  font-size: 1em; /* 18px */
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-water-ozonator);
  white-space: nowrap;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.page-wellness-kit .accessory-card__add:hover {
  /* Hover: outline style -- white fill + 1px blue border (per designer's
     prototype). box-shadow inset draws the border without a size shift. */
  background: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-water-ozonator);
}

/* Stack the accessory card vertically on phones:
     image (full width)
     name
     price ............ + Add   (same row; Add right-aligned)
     description
   The card becomes a 2-col grid; display:contents on __info lifts
   name/price/desc up to be grid items alongside the Add button (which
   is already a sibling at card level), so price and Add share one row
   with NO markup change. Desktop keeps __info as a flex column. */
@media (max-width: 767px) {
  .page-wellness-kit .accessory-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "media media"
      "name  name"
      "price add"
      "desc  desc";
    align-items: center;
    column-gap: 0.833em; /* 15px between price and Add */
    row-gap: 0.556em;    /* 10px between stacked rows */
  }
  .page-wellness-kit .accessory-card__info { display: contents; }
  .page-wellness-kit .accessory-card__media {
    grid-area: media;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-card);
  }
  .page-wellness-kit .accessory-card__name  { grid-area: name; }
  .page-wellness-kit .accessory-card__price { grid-area: price; }
  .page-wellness-kit .accessory-card__desc  { grid-area: desc; }
  .page-wellness-kit .accessory-card__add {
    grid-area: add;
    justify-self: end;
    align-self: center;
  }
}

/* =============== RESPONSIVE =============== */

/* Tablet / mobile: stack gallery above buy panel, drop the sticky */
@media (max-width: 1024px) {
  .page-wellness-kit .model__product {
    grid-template-columns: 1fr;
    gap: 1.667em; /* 30px between stacked sections */
  }
  .page-wellness-kit .model__gallery {
    position: static;
    grid-template-columns: 1fr; /* drop thumb rail; show only mobile dots */
  }
  .page-wellness-kit .model__gallery-thumbs {
    display: none; /* mobile uses dot indicator instead */
  }
  .page-wellness-kit .model__buy {
    position: static;
  }
}

/* Phone: the 2->1 column stack happens at 1024 (above); only phone-
   specific tweaks live here. Line-heights are unitless in the base
   rules, so there are no per-breakpoint line-height overrides. */
@media (max-width: 767px) {
  .page-wellness-kit .model__add-to-cart {
    flex: 1; /* fill width next to quantity selector */
  }
}

/* -----------------------------------------------------------
   SECTION 2: IN THE BOX  (Figma 14803:19058, grid 14803:19063)
   Light-blue section (the --blue wave above supplies the top air, so
   the section has no top padding). Four equal technology cards:
   172px photo, 4px brand colour bar, eyebrow in the brand colour,
   name, description, full-width "How it works" pill.
----------------------------------------------------------- */
.page-wellness-kit .section-box {
  padding-top: 0;
}
.page-wellness-kit .box__container {
  display: flex;
  flex-direction: column;
  gap: 2.778em; /* 50px */
}
.page-wellness-kit .box__header {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
  text-align: center;
}
.page-wellness-kit .box__title {
  line-height: 1.2; /* 60px @50 */
}
.page-wellness-kit .box__subhead {
  font-size: 1.222em; /* 22px */
  font-weight: 700;
  line-height: 1.364; /* 30px */
  color: var(--color-dark);
}
.page-wellness-kit .box__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.778em; /* 14px */
  align-items: stretch; /* all cards match the tallest; buttons align along the card feet */
}
.page-wellness-kit .tech-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-card-stroke);
  border-radius: var(--radius-panel); /* 20px */
  overflow: hidden;
  --tech-color: var(--color-accent);
}
.page-wellness-kit .tech-card--sp  { --tech-color: var(--color-silver-pulser); }
.page-wellness-kit .tech-card--mp  { --tech-color: var(--color-magnetic-pulser); }
.page-wellness-kit .tech-card--woz { --tech-color: var(--color-water-ozonator); }
.page-wellness-kit .tech-card__media {
  height: 9.556em; /* 172px */
}
.page-wellness-kit .tech-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Round the img itself (inner arc: outer 20 - 1px border) -- iOS Safari
     does not clip an img to an ancestor's overflow radius. */
  border-radius: 19px 19px 0 0;
}
.page-wellness-kit .tech-card__bar {
  height: 4px;
  background: var(--tech-color);
}
.page-wellness-kit .tech-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* button pinned to the card foot so the row of buttons aligns */
  gap: 1.111em; /* 20px minimum text -> button (designer feedback, Oct 2026: "reduce the
                   space between writing and button"); the tallest card sets the row
                   height, so shorter cards get a little more than 20px */
  padding: 1.111em 0.556em 0.556em; /* 20px 10px 10px */
}
.page-wellness-kit .tech-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-wellness-kit .tech-card__eyebrow {
  font-size: 0.833em; /* 15px */
  font-weight: 700;
  line-height: 1.333; /* 20px */
  letter-spacing: 0.1em; /* 1.5px */
  text-transform: uppercase;
  color: var(--tech-color);
  margin: 0;
}
.page-wellness-kit .tech-card__name {
  font-size: 1em; /* 18px */
  font-weight: 700;
  line-height: 1.111; /* 20px */
  color: var(--color-dark);
  margin: 0;
}
.page-wellness-kit .tech-card__desc {
  font-size: 1em; /* 18px */
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
  margin: 0;
}
.page-wellness-kit .tech-card__cta {
  width: 100%;
  font-size: 0.833em; /* 15px */
  font-weight: 800;
  line-height: 1.133; /* 17px */
  letter-spacing: 0;
  text-transform: none;
  padding: 0.8em 1.2em; /* 12px 18px at 15px */
}
@media (max-width: 1024px) {
  /* 4 -> 1 straight to the phone count (no intermediate step). */
  .page-wellness-kit .box__grid {
    grid-template-columns: 1fr;
    gap: 1.111em; /* 20px */
  }
  .page-wellness-kit .tech-card__media {
    height: auto;
    aspect-ratio: 1200 / 902; /* the photo's natural ratio (placeholder dims -- confirm against the processed files) */
  }
  .page-wellness-kit .tech-card__cta {
    width: auto;
    align-self: flex-start;
  }
}

/* -----------------------------------------------------------
   SECTION 3: HOW THEY FIT INTO A DAY  (Figma 14686:3300)
   White section. Three-colour gradient rail line, MORNING / EVENING
   axis labels, four cream moment cards (eyebrow time, technology,
   copy, bordered session pill pinned to the bottom).
----------------------------------------------------------- */
.page-wellness-kit .day__container {
  display: flex;
  flex-direction: column;
  gap: 2.778em; /* 50px */
}
.page-wellness-kit .day__header {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
  text-align: center;
}
.page-wellness-kit .day__title {
  line-height: 1; /* 50px @50 (Figma leading-[50px]) */
}
.page-wellness-kit .day__subhead {
  font-size: 1.222em; /* 22px */
  font-weight: 700;
  line-height: 1.364; /* 30px */
  color: var(--color-dark);
}
.page-wellness-kit .day__rail {
  display: flex;
  flex-direction: column;
  gap: 0.889em; /* 16px */
}
.page-wellness-kit .day__line {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--color-water-ozonator) 0%,
    var(--color-silver-pulser) 55%,
    var(--color-magnetic-pulser) 100%); /* Figma 14686:3306: blue -> green (54.8%) -> teal */
}
.page-wellness-kit .day__axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.639em; /* 11.5px */
  font-weight: 700;
  line-height: 1.304; /* 15px */
  letter-spacing: 0.13em; /* 1.5px */
  text-transform: uppercase;
  color: var(--color-axis);
}
.page-wellness-kit .day__moments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.111em; /* 20px */
  align-items: stretch;
}
.page-wellness-kit .day-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.556em; /* 10px */
  padding: 1.111em; /* 20px */
  background: var(--color-cream-bg);
  border-radius: 22px; /* Figma rounded-[22px] -- px, card corner */
}
.page-wellness-kit .day-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-wellness-kit .day-card__when {
  font-size: 0.833em; /* 15px */
  font-weight: 700;
  line-height: 1.333; /* 20px */
  letter-spacing: 0.1em; /* 1.5px */
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}
.page-wellness-kit .day-card__name {
  font-size: 1em; /* 18px */
  font-weight: 700;
  line-height: 1.111; /* 20px */
  color: var(--color-dark);
  margin: 0;
}
.page-wellness-kit .day-card__copy {
  font-size: 1em; /* 18px */
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
  margin: 0;
}
.page-wellness-kit .day-card__pill {
  align-self: flex-start;
  margin: 0;
  padding: 0.5em 1em; /* 6px 12px at 12px */
  font-size: 0.667em; /* 12px */
  font-weight: 700;
  line-height: 1.333; /* 16px */
  color: var(--color-dark);
  background: var(--color-white);
  border: 1px solid var(--color-card-stroke);
  border-radius: var(--radius-pill);
}
@media (max-width: 1024px) {
  /* 4 -> 1 straight to the phone count. The rail line + axis stay as a
     "morning to evening" legend above the stacked cards. */
  .page-wellness-kit .day__moments {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------
   SECTION 4: WATCH BEFORE YOU START  (Figma 14803:19120)
   Cream section, two-tone 50px heading, four bordered video
   cards in a 3-column grid (3 + 1, second row left-aligned):
   flush poster (image-to-video modal) + decorative control bar,
   then Share / Watch-on links and the title.
----------------------------------------------------------- */
.page-wellness-kit .how-to__container {
  display: flex;
  flex-direction: column;
  gap: 1.667em; /* 30px */
}
.page-wellness-kit .how-to__header {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */
  text-align: center;
  padding-bottom: 1.111em;
}
.page-wellness-kit .how-to__title {
  line-height: 1.3; /* ~65px @50 desktop / ~39px @30 mobile */
}
.page-wellness-kit .how-to__subhead {
  font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px
                         (the shared --text-subheading bottoms out at 18px,
                         which was wrong for this section's mobile) */
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-dark);
}

.page-wellness-kit .how-to__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 + 1 -- the single card stays left-aligned (Figma 14804:19512) */
  gap: 1.111em; /* 20px */
  align-items: start;
}
.page-wellness-kit .how-to__card {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px between the poster block and the body */
  padding: 0; /* poster sits flush to the card edge (Figma 14676:909) */
  /* No overflow:hidden here: the Share popover (site-video-share.js) is
     appended inside .how-to__actions and hangs below the card's bottom
     edge -- a clip would cut it to its first item. The flush poster is
     rounded on its own instead (below). */
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel); /* 20px */
}
/* The poster + bar are the card's top edge: round only the top corners
   (inner arc: outer 20 - 1px border) and square the bottom so the stage
   meets the control bar cleanly. Stage and poster are rounded themselves
   (iOS Safari ignores an ancestor overflow clip). */
.page-wellness-kit .how-to__card .video-preview__stage { border-radius: 19px 19px 0 0; overflow: hidden; }
.page-wellness-kit .how-to__card .video-preview__poster { border-radius: 19px 19px 0 0; }

.page-wellness-kit .how-to__video {
  display: block;
  width: 100%;
}
/* Video preview rendering now handled by the shared .video-preview
   component in site-image-to-video.css. .how-to__video keeps its
   layout width above. */

/* Card body */
.page-wellness-kit .how-to__body {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
  padding: 0 0.556em 1.111em; /* 0 10px 20px (Figma 14676:929) */
}
.page-wellness-kit .how-to__card-title {
  font-size: 1em; /* 18px */
  font-weight: 500;
  line-height: 1.389; /* 25px */
  color: var(--color-text-mid);
  margin: 0;
  padding: 0 0.556em; /* 10px, aligns with the actions row inset */
}

/* Actions row: Share (left) + Watch-on platforms (right) */
.page-wellness-kit .how-to__actions {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Share left, platform icons right (Figma 14676:930) */
  gap: 0.833em;
  padding: 0 0.556em;
  line-height: 1.9; /* single-line row; sets the text line-box height so the
                       row matches Figma's 35px (1.9 x 18px Share ~= 34px).
                       Explicit value replaces fragile inheritance. */
}
.page-wellness-kit .how-to__share {
  display: inline-flex;
  align-items: center;
  gap: 0.444em; /* 8px */
  font-size: 1em; /* 18px */
  font-weight: 500;
  color: var(--color-dark);
  cursor: pointer;
}
.page-wellness-kit .how-to__share img { width: 1.111em; height: 1.111em; }
.page-wellness-kit .how-to__share svg { width: 1.111em; height: 1.111em; }
.page-wellness-kit .how-to__share:hover { color: var(--color-water-ozonator); }
/* Label swap for the clipboard-fallback confirmation (site-video-share.js
   toggles .is-copied). Both labels are pre-rendered; only one shows. The
   native share path doesn't copy, so it never triggers this. */
.page-wellness-kit .how-to__share-label--copied { display: none; }
.page-wellness-kit .how-to__share.is-copied .how-to__share-label--default { display: none; }
.page-wellness-kit .how-to__share.is-copied .how-to__share-label--copied {
  display: inline;
  color: var(--color-accent);
}
/* Share platform picker (built by site-video-share.js when a card offers
   both Rumble and YouTube; a single option shares directly). The picker is
   appended inside .how-to__actions, which is position:relative for this. */
.page-wellness-kit .how-to__actions { position: relative; }
.page-wellness-kit .how-to__share-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 8.333em; /* 150px */
  padding: 0.278em; /* 5px */
  background: var(--color-white);
  border-radius: 0.556em; /* 10px */
  box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.15);
}
.page-wellness-kit .how-to__share-menu-item {
  padding: 0.444em 0.667em; /* 8px 12px */
  border-radius: 0.333em; /* 6px */
  font-size: 0.833em; /* 15px */
  font-weight: 700;
  text-align: left;
  color: var(--color-dark);
  transition: background-color 0.15s, color 0.15s;
}
.page-wellness-kit .how-to__share-menu-item:hover {
  background: var(--color-accent-a12);
  color: var(--color-accent-dark);
}

.page-wellness-kit .how-to__watch {
  display: flex;
  align-items: center;
  gap: 0.556em; /* 10px between the platform icons (Figma 14676:933) */
}
.page-wellness-kit .how-to__platform {
  display: inline-flex;
  align-items: center;
  gap: 0.444em; /* 8px */
  font-size: 1em; /* 18px */
  font-weight: 500;
  color: var(--color-dark);
  transition: color 0.15s;
}
.page-wellness-kit .how-to__platform img {
  /* Explicit width AND height per Figma so the SVG can't stretch from
     its own viewBox (width:auto was letting these blow out into
     horizontal blobs). object-fit keeps the glyph crisp if the box
     ratio differs slightly from the source. Rumble is ~19x20,
     YouTube is ~26x20 -- widths set per-platform below. */
  height: 1.111em; /* 20px */
  width: auto;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
}
/* Rumble icon: 19.111 x 20.001 in Figma -> ~0.956:1 */
.page-wellness-kit .how-to__platform[data-platform="rumble"] img {
  width: 1.062em; /* ~19.1px */
}
.page-wellness-kit .how-to__platform[data-platform="rumble"] svg { width: 1.062em; height: 1.111em; }
/* YouTube icon: 26 x 20 in Figma -> 1.3:1 (wider than tall) */
.page-wellness-kit .how-to__platform[data-platform="youtube"] img {
  width: 1.444em; /* 26px */
}
.page-wellness-kit .how-to__platform[data-platform="youtube"] svg { width: 1.444em; height: 1.111em; }
.page-wellness-kit .how-to__platform:hover { color: var(--color-water-ozonator); }
/* Watch-on links are icon-only at every width on this page (Figma
   14676:933: YouTube + Rumble glyphs, no text). Hide the text label
   visually but keep it for screen readers -- it is the link's accessible
   name (the icon is aria-hidden). */
.page-wellness-kit .how-to__platform span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Section 3 responsive */
@media (max-width: 1024px) {
  .page-wellness-kit .how-to__grid {
    grid-template-columns: 1fr; /* 3 -> 1 straight to the phone count (STANDARDS 1024 rule) */ /* stack cards */
  }
}

/* -----------------------------------------------------------
   SHARED CAROUSEL CONTROL STATE
   Applied by js/site-carousels.js. Used by the Section 1
   gallery (and any future [data-carousel-id]) when data-loop
   is "false" -- dims the arrow at the start/end.
----------------------------------------------------------- */
.page-wellness-kit .carousel-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* -----------------------------------------------------------
   SECTION 5: ALSO WORTH A LOOK  (Figma 14686:3522, card 14686:3528)
   White section, one wide Wellness & Relaxation Kit cross-sell card: 4px accent
   border, photo left (50%), name / was+now price / summary on
   white, cream INCLUDES checklist + CTA filling the rest.
----------------------------------------------------------- */
.page-wellness-kit .pair__container {
  display: flex;
  flex-direction: column;
  gap: 2.778em; /* 50px heading -> card (Figma gap-[50px]) */
}
.page-wellness-kit .pair__header {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px -- standardized heading/subheading gap */
  text-align: center;
}
.page-wellness-kit .pair__title {
  line-height: 1.2; /* 60px @50 */
}
.page-wellness-kit .pair__subhead {
  font-size: 1.222em; /* 22px -- constant on both frames */
  font-weight: 700;
  line-height: 1.364; /* 30px */
  color: var(--color-dark);
}
.page-wellness-kit .kit-card {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border: 4px solid var(--color-accent);
  border-radius: var(--radius-panel); /* 20px */
  box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07);
  overflow: hidden; /* the two halves are flush to the border */
}
.page-wellness-kit .kit-card__media {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  min-height: 25em; /* 450px at the 1200 width */
}
.page-wellness-kit .kit-card__media a {
  display: block;
  position: absolute;
  inset: 0;
}
.page-wellness-kit .kit-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Inner arc of the 4px bordered card (outer 20 - 4); the img is
     rounded itself -- iOS Safari ignores an ancestor overflow clip. */
  border-radius: 16px 0 0 16px;
}
.page-wellness-kit .kit-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.page-wellness-kit .kit-card__intro {
  display: flex;
  flex-direction: column;
  gap: 0.278em; /* 5px */
  padding: 1.111em; /* 20px */
}
.page-wellness-kit .kit-card__name {
  font-size: 1.222em; /* 22px */
  font-weight: 700;
  line-height: 1.364; /* 30px */
  color: var(--color-dark);
  margin: 0;
}
.page-wellness-kit .kit-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.222em; /* 4px */
  margin: 0;
}
.page-wellness-kit .kit-card__was {
  font-size: 1em; /* 18px */
  font-weight: 500;
  line-height: 1.944; /* 35px */
  color: var(--color-dark);
  text-decoration: line-through;
  margin-right: 0.444em; /* 12px (Figma gap-[12px]) */
}
.page-wellness-kit .kit-card__was:empty { display: none; }
.page-wellness-kit .kit-card__amount {
  font-size: 1.389em; /* 25px */
  font-weight: 900;
  line-height: 1.4; /* 35px */
  color: var(--color-accent);
}
.page-wellness-kit .kit-card__currency {
  font-size: 1.111em; /* 20px */
  font-weight: 400;
  line-height: 1.75; /* 35px */
  color: var(--color-dark);
}
.page-wellness-kit .kit-card__summary {
  font-size: 1em; /* 18px */
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
  margin: 0;
}
/* Cream foot: INCLUDES checklist + CTA, fills the remaining height */
.page-wellness-kit .kit-card__foot {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
  align-items: flex-start;
  padding: 1.111em; /* 20px */
  background: var(--color-cream-bg);
}
.page-wellness-kit .kit-card__includes {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
  width: 100%;
}
.page-wellness-kit .kit-card__includes-label {
  font-size: 0.833em; /* 15px */
  font-weight: 700;
  line-height: 1.533; /* 23px */
  letter-spacing: 0.2em; /* 3px */
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 0;
}
.page-wellness-kit .kit-card__item {
  display: flex;
  align-items: center;
  gap: 1.111em; /* 20px */
  font-size: 1em; /* 18px */
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
}
.page-wellness-kit .kit-card__check {
  width: 1.111em; /* 20px */
  height: 1.111em;
  flex-shrink: 0;
  color: var(--color-accent);
}
.page-wellness-kit .kit-card__cta {
  margin-top: 0.556em; /* 10px */
}
@media (max-width: 1024px) {
  /* Stack: photo first (its natural ratio), then the text column. */
  .page-wellness-kit .kit-card {
    flex-direction: column;
  }
  .page-wellness-kit .kit-card__media {
    flex: 0 0 auto; /* the desktop flex-basis 0 would collapse the stacked box to 0 height */
    min-height: 0;
    aspect-ratio: 1920 / 1440; /* the pair photo's natural ratio (confirm against the processed file) */
  }
  .page-wellness-kit .kit-card__media img {
    border-radius: 16px 16px 0 0;
  }
}

/* -----------------------------------------------------------
   SECTION 6: WHERE TO BEGIN  (Figma 14686:3550)
   White section. Two columns: left = "Inside you'll find"
   checklist + download CTA; right = framed booklet preview
   that opens the video modal (image-to-video). Wraps to a
   single centered column on narrow screens.
----------------------------------------------------------- */
.page-wellness-kit .swpg__container {
  display: flex;
  flex-direction: column;
  gap: 2.778em; /* 50px */
}
.page-wellness-kit .swpg__header {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */
  text-align: center;
}
.page-wellness-kit .swpg__title {
  line-height: 1.3;
}
.page-wellness-kit .swpg__subhead {
  font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px
                         (shared --text-subheading bottoms out at 18px) */
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-dark);
}

/* Body: left column (497px) + right column (653px) from Figma,
   wrapping and centering when they don't fit. */
.page-wellness-kit .swpg__body {
  display: flex;
  flex-wrap: wrap;
  gap: 2.778em; /* 50px */
  align-items: center;
  justify-content: center;
}
.page-wellness-kit .swpg__left {
  flex: 1 1 360px;
  max-width: 497px;
  display: flex;
  flex-direction: column;
  gap: 1.667em; /* 30px */
}
.page-wellness-kit .swpg__list-block {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-wellness-kit .swpg__list-title {
  font-size: 1.222em; /* 22px */
  font-weight: 700;
  line-height: 1.591; /* 35px */
  color: var(--color-dark);
}
/* Checklist rows: 20px text, 30px icon, 30px icon-gap, 10px row gap
   (overrides the base .check-list sizing for this section; the base
   --space-gap-md row gap reads 20px at desktop, Figma rows are 10px). */
.page-wellness-kit .swpg__list {
  gap: 0.556em; /* 10px (Figma 11648:10870) */
}
.page-wellness-kit .swpg__list .check-list__item {
  gap: 1.667em; /* 30px */
}
.page-wellness-kit .swpg__list .check-list__item span {
  font-size: 1.111em; /* 20px */
  font-weight: 500;
  line-height: 1.75; /* 35px */
  color: var(--color-dark);
}
.page-wellness-kit .swpg__cta { align-self: flex-start; }

/* Right: framed booklet preview */
.page-wellness-kit .swpg__preview {
  flex: 1 1 360px;
  max-width: 653px;
  display: block;
}
/* Video preview rendering now handled by the shared .video-preview
   component (framed variant) in site-image-to-video.css. The frame,
   aspect-ratio and play size are set via instance vars on the <a>.
   .swpg__preview keeps its flex/max-width layout above. */

/* Section 8 responsive */
@media (max-width: 1024px) {
  /* Single column. Flatten swpg__left (display:contents) so its children --
     the list-block and the CTA -- join swpg__body's flow directly. That lets
     the booklet preview sit BETWEEN the bullets and the CTA, matching the
     Figma mobile order: list-title -> bullets -> booklet -> download CTA. */
  .page-wellness-kit .swpg__container {
    gap: 1.667em; /* 30px header->body (Figma; desktop 50px) */
  }
  .page-wellness-kit .swpg__body {
    flex-direction: column;
    align-items: stretch;
    gap: 1.111em; /* 20px base = the booklet->CTA gap; preview adds 10px on
                     top so bullets->booklet reads 30px (Figma) */
  }
  .page-wellness-kit .swpg__left {
    display: contents;
  }
  .page-wellness-kit .swpg__list-block {
    order: 1;
  }
  .page-wellness-kit .swpg__preview {
    order: 2;
    flex-basis: auto;
    max-width: 100%;
    margin-top: 0.556em; /* +10px on top of the 20px body gap -> 30px
                            bullets->booklet (booklet->CTA stays the 20px gap) */
  }
  .page-wellness-kit .swpg__cta {
    order: 3;
    align-self: center;
  }
}
@media (max-width: 767px) {
  /* Checklist tightens to the Figma mobile spec: 18px medium text, 20px
     check icon, 10px gap (desktop keeps 20px text / 30px icon / 30px gap). */
  .page-wellness-kit .swpg__list .check-list__item {
    gap: 0.556em; /* 10px */
  }
  .page-wellness-kit .swpg__list .check-list__item span {
    font-size: 1em; /* 18px */
    line-height: 1.667; /* 30px */
  }
}

/* -----------------------------------------------------------
   SECTION 7: QUESTIONS  (Figma 14686:3599)  --  FAQ accordion
   White section. Two columns: portrait image (left) + accordion
   (right). Each row is a accent-tinted pill; expand/collapse is
   handled by site-reveal.js, answer HTML is fetched by
   site-faqs.js from /faqs/sp_*.html.
----------------------------------------------------------- */
.page-wellness-kit .faq__container {
  display: flex;
  flex-direction: column;
  gap: 2.778em; /* 50px */
}
.page-wellness-kit .faq__header {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px -- standardized heading/subheading gap (feedback #7) */
  text-align: center;
}
.page-wellness-kit .faq__title {
  line-height: 1.3;
}
.page-wellness-kit .faq__subhead {
  font-size: 1.222em; /* 22px -- constant; Figma mobile and desktop both 22px
                         (shared --text-subheading bottoms out at 18px) */
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-dark);
}

/* Body: image (left) + accordion (right) */
.page-wellness-kit .faq__body {
  display: flex;
  gap: 2.778em; /* 50px */
  /* flex-start (NOT stretch) -- per Figma the image is 483px tall
     while the accordion column is 635px, so the image is intentionally
     shorter and aligns to the top. stretch would distort the image's
     aspect ratio by forcing it to fill the column. */
  align-items: flex-start;
}
.page-wellness-kit .faq__media {
  flex: 0 0 357px;
  /* Figma container is 357 x 483 (aspect 357:483 ~= 0.74). Holding
     that ratio keeps the image at its intended height (shorter than
     the accordion column beside it) without forcing it via height
     in px, so it scales proportionally if the column shrinks. */
  aspect-ratio: 357 / 483;
  border-radius: var(--radius-panel); /* 20px */
  overflow: hidden;
  /* Stay visible while the accordion is opened and scrolled: the media is
     shorter than the list, so pinning it near the top keeps it on screen as
     you page through. align-self releases it so sticky can engage. */
  align-self: flex-start;
  position: sticky;
  top: 120px;
}
.page-wellness-kit .faq__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Round the img directly: iOS Safari does not reliably clip the
     photo to the wrapper's overflow:hidden + border-radius, leaving
     square corners on phones (designer feedback item 4, Sep 2026 --
     same fix owed to the Silver Pulser pages). */
  border-radius: inherit;
  /* The subject in the source photo sits slightly right-of-center;
     pull the crop window leftward so she lands centered in the tall
     narrow column. Tune the X% if the photo gets re-shot. */
  object-position: 25% center;
}

.page-wellness-kit .faq__list {
  flex: 1 1 0;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 1.111em; /* 20px */
}

/* FAQ row */
.page-wellness-kit .faq__item {
  border-radius: 1.778em; /* 32px */
  box-shadow: 0 4px 20px 0 rgba(26, 43, 28, 0.07);
  overflow: hidden;
}
.page-wellness-kit .faq__item--tint-30 { background: var(--color-accent-a30); }
.page-wellness-kit .faq__item--tint-20 { background: var(--color-accent-a20); }

/* Trigger (the always-visible question bar) */
.page-wellness-kit .faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.111em;
  width: 100%;
  min-height: 3.056em; /* 55px */
  padding: 0.556em 1.111em; /* 10px 20px */
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.page-wellness-kit .faq__question {
  flex: 1;
  font-size: 1.111em; /* 20px */
  font-weight: 700;
  line-height: 1.75; /* 35px */
  color: var(--color-dark);
}
/* Plus icon that rotates to a minus when expanded (drawn in CSS) */
.page-wellness-kit .faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.667em;  /* 30px */
  height: 1.667em;
}
.page-wellness-kit .faq__icon::before,
.page-wellness-kit .faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-accent-dark);
  border-radius: 1px;
  transition: transform 0.2s;
}
.page-wellness-kit .faq__icon::before {
  width: 0.889em;  /* 16px horizontal bar */
  height: 0.139em; /* ~2.5px */
  transform: translate(-50%, -50%);
}
.page-wellness-kit .faq__icon::after {
  width: 0.139em;
  height: 0.889em; /* vertical bar -> makes a plus */
  transform: translate(-50%, -50%);
}
/* When expanded: hide the vertical bar so a plus becomes a minus */
.page-wellness-kit .faq__trigger[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Answer panel (HTML injected by site-faqs.js) */
.page-wellness-kit .faq__answer {
  /* Sides only -- NO bottom padding. site-reveal.js animates the
     region's height (content-box), and padding sits OUTSIDE that
     animation: a padding-bottom left a ~20px strip of the first line
     visible after the close animation finished, until [hidden]
     flipped at transitionend -- the "pauses at the last line, then
     snaps" close (designer feedback, Sep 2026). The bottom spacing
     is supplied by the ::after spacer below, which lives INSIDE the
     content box and therefore collapses with the animation. */
  padding: 0 1.111em; /* 20px sides; flush under question */
  font-size: 1em; /* 18px */
  font-weight: 400;
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
}
.page-wellness-kit .faq__answer[hidden] { display: none; }
/* In-flow bottom spacer replacing the old padding-bottom (see the
   comment on .faq__answer). A block ::after is inside the region's
   content box, so scrollHeight measures it and the height animation
   clips it -- unlike padding, and unlike a last-child margin, which
   would collapse out of the region at rest and be missed by the
   collapse measurement. */
.page-wellness-kit .faq__answer::after {
  content: '';
  display: block;
  height: 1.111em; /* 20px */
}
.page-wellness-kit .faq__answer p { margin-bottom: 0.667em; }
.page-wellness-kit .faq__answer p:last-child { margin-bottom: 0; }
/* Loading / error states set by site-faqs.js */
.page-wellness-kit .faq__answer.is-loading { opacity: 0.6; }
.page-wellness-kit .faq__answer.is-error { color: var(--color-error); }

.page-wellness-kit .faq__cta-wrap { margin-top: 0.556em; }

/* Section 9 responsive */
@media (max-width: 1024px) {
  .page-wellness-kit .faq__container {
    gap: 1.667em; /* 30px header->body (Figma; desktop 50px) */
  }
  .page-wellness-kit .faq__body {
    flex-direction: column;
    gap: 1.667em; /* 30px image->accordion (Figma; desktop 50px) */
  }
  .page-wellness-kit .faq__media {
    flex: none;
    width: 100%;
    /* Keep the base rule's 357/483 portrait ratio when stacked -- the
       photo (kwell_on_pedestals__faq__kwell.jpg, 1920x2598 placeholder -- confirm the processed file) should be shot to
       that ratio, so the whole unit stays in frame. The earlier Figma
       mobile 357/196 landscape band cover-cropped the unit top and
       bottom (designer feedback item 4, Sep 2026 round 2: "images are
       cut off" -- feedback wins over Figma). Same fix owed to the
       Silver Pulser pages. */
    /* Stacked full-width on mobile -- no sticky. */
    position: static;
  }
  .page-wellness-kit .faq__list {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  /* FAQ rows tighten to the Figma mobile spec: 10px gap between rows,
     5px vertical row padding, question line-height 30px (desktop keeps
     20px gap / 10px padding / 35px line-height). */
  .page-wellness-kit .faq__list {
    gap: 0.556em; /* 10px */
  }
  .page-wellness-kit .faq__trigger {
    padding: 0.278em 1.111em; /* 5px 20px */
  }
  .page-wellness-kit .faq__question {
    line-height: 1.5; /* 30px at 20px */
  }
}

/* ===========================================================
   WAVE DIVIDERS BETWEEN SECTIONS
   -----------------------------------------------------------
   Decorative full-bleed PNG waves that transition one section's
   background colour into the next. Each <div class="section-wave
   section-wave--NAME"> sits in normal flow between two sections.

     14686:3240  --blue         white -> light-blue  (1 -> 2)  divider_wave_blue   1640x218
     14686:3299  --curved-blue  light-blue -> white  (2 -> 3)  divider_curved_blue 1640x51
     14686:3549  --green        white -> cream       (5 -> 6)  divider_wave_green_beige_bottom  1640x81
     14686:3598  --beige        cream -> white       (6 -> 7)  divider_wave_beige  1640x70

   Each wave holds its own Figma aspect ratio (width:height) so it
   stays full-bleed and proportional at any viewport width; at the
   1640 design width each resolves to its Figma pixel height. These
   are shared dividers reusable across pages, so the PNGs live in
   images/elements/ (downloaded by download-images.ps1).
=========================================================== */
.page-wellness-kit .section-wave {
  width: 100%;
  /* Default ratio (the --blue wave, 1640x218). Each other wave sets
     its own ratio below to match its Figma dimensions. Holding the
     ratio keeps the wave full-bleed and proportional at any width;
     at the 1640 design width the heights resolve to their Figma px
     (e.g. --curved-blue -> 51px). */
  aspect-ratio: 1640 / 218;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /* Seam fix, section-level (per COMPONENTS.md): fractional element
     heights can leave a sub-pixel gap between the wave's bottom edge and
     the next section, showing the white body background as a thin line
     above that section's heading (designer feedback #5). Pull the next
     section 1px up UNDER the wave: its solid fill is the same colour as
     the wave artwork's bottom row, so the overlap is invisible. The wave
     itself stays background-transparent (designer, July 2026). */
  margin: 0 0 -1px; /* the -1px is the seam fix above -- keep it in the shorthand */
  pointer-events: none;
}
.page-wellness-kit .section-wave--blue {
  background-image: url('../images/elements/divider_wave_blue.png');
  /* 1640 x 218 -- uses the default ratio above. */
}
.page-wellness-kit .section-wave--curved-blue {
  aspect-ratio: 1640 / 51; /* Figma: 1640 x 51 -- flat curve */
  background-image: url('../images/elements/divider_curved_blue.png');
}
.page-wellness-kit .section-wave--green {
  aspect-ratio: 1640 / 81; /* Figma: 1640 x 81 */
  background-image: url('../images/elements/divider_wave_green_beige_bottom.png'); /* baked beige bottom -- section below is --cream (#f8f4f2); use the _white_bottom variant only above white sections */
}
.page-wellness-kit .section-wave--beige {
  aspect-ratio: 1640 / 70; /* Figma: 1640 x 70 */
  background-image: url('../images/elements/divider_wave_beige.png');
}

/* ===========================================================
   MEDIA QUERIES  --  STRUCTURAL ONLY
   -----------------------------------------------------------
   Most responsiveness lives in clamp() above. Add a query
   only when CSS Grid / Flexbox can't handle a structural
   shift cleanly (e.g., 2-col -> 1-col stacking).

   Standard tiers:
     <= 1024px tablet  -- collapse 2-col to 1-col
     <=  767px phone   -- button width, font tweaks
=========================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .page-wellness-kit .two-col {
    grid-template-columns: 1fr;
  }
  /* Reverse variants flip back to natural DOM order on mobile. */
  .page-wellness-kit .two-col--reverse .two-col__text  { order: 0; }
  .page-wellness-kit .two-col--reverse .two-col__media { order: 1; }
}

/* Phone */
@media (max-width: 767px) {
  .page-wellness-kit .btn {
    white-space: normal;
    text-align: center;
  }
}

/* ===========================================================
   PAGE-BOTTOM WAVE.
   The wrapper (.page-wave: full-bleed margins, margin-bottom:-1px to
   tuck against the footer, line-height:0, pointer-events:none) is owned
   by the shared css/site-footer.css, since every page ends with this
   image. We only add what site-footer.css is missing: the img must be
   width:100% or it falls back to its intrinsic width and the wave looks
   "not full bleed". A little air above the wave, page-specific.
=========================================================== */
.page-wellness-kit .page-wave { margin-top: var(--space-section-y); }
/* The wave is the last child of the final section, so remove that
   section's bottom padding -- otherwise ~80px of white sits between the
   wave and the footer (site-footer.css only overlaps 1px). */
.page-wellness-kit .section-questions { padding-bottom: 0; }