/** Shopify CDN: Minification failed

Line 16:40 Unexpected "*"
Line 24:71 Unterminated string token

**/
/* ==========================================================================
   KOPPĀ — Cénée UI type treatment
   Ported from the koppa-restyle-sandbox direction (theme #157368582332).

   This carries the signature of the editorial system: tiny, wide-tracked
   uppercase UI type against the display serif. Radius, hairline colours and
   the display face are ported at their source tokens instead — see the
   section files and assets/cupra-design-tokens.css.

   SPECIFICITY NOTE: every cupra-*/page-* section renders its own <style>
   block in the body, so those rules come after this file in document order
   and win at equal specificity. Each selector below is therefore doubled
   (.ch-btn.ch-btn = 0,2,0) so it outranks the section rule (0,1,0) without
   a single !important. Do not "simplify" these to single classes — the
   rules silently stop applying.

   The blue accent (#336699 / #4A82B5) is deliberately untouched: this port
   takes the system's chrome and typography, not its greyscale palette.
   ========================================================================== */

:root {
  --kc-ui-size:  1.1rem;
  --kc-ui-track: 0.066em;
  --kc-ui-lh:    1.45;
  --kc-rule:     #d9d9d9;
  --kc-ink:      #141414;
}

/* ---------- Eyebrows, section labels, kickers ---------- */
.ab-eyebrow.ab-eyebrow,
.ca-label.ca-label,
.car-eyebrow.car-eyebrow,
.car-label.car-label,
.cbs-label.cbs-label,
.cc-eyebrow.cc-eyebrow,
.cd-label.cd-label,
.ch-sec-label.ch-sec-label,
.cm-label.cm-label,
.cr-eyebrow.cr-eyebrow,
.cs-label.cs-label,
.csp-eyebrow.csp-eyebrow,
.km-eyebrow.km-eyebrow,
.pw-eyebrow.pw-eyebrow,
.wl-eyebrow.wl-eyebrow {
  font-size: var(--kc-ui-size);
  letter-spacing: var(--kc-ui-track);
  line-height: var(--kc-ui-lh);
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.ab-btn.ab-btn,
.ca-btn.ca-btn,
.cbs-btn.cbs-btn,
.cc-btn.cc-btn,
.cd-btn.cd-btn,
.ch-btn.ch-btn,
.cm-btn.cm-btn,
.cr-btn.cr-btn,
.cs-btn.cs-btn,
.km-btn.km-btn,
.wl-btn.wl-btn {
  font-size: var(--kc-ui-size);
  letter-spacing: var(--kc-ui-track);
  line-height: var(--kc-ui-lh);
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
}

/* Buttons lose the lift — depth in this system comes from hairlines only */
.ch-btn.ch-btn:hover,
.cm-btn.cm-btn:hover,
.cs-btn.cs-btn:hover,
.ca-btn.ca-btn:hover,
.cr-btn.cr-btn:hover {
  transform: none;
}

/* ---------- Prices ----------
   Tracking only. These keep their section's size on purpose: shrinking a
   price to 11px on a live storefront is a commerce decision, not a styling
   one. Revisit with Maddie if the full UI scale is wanted here too. */
.ab-prodcard__price.ab-prodcard__price,
.ca-card__price.ca-card__price,
.cbs-card__price.cbs-card__price,
.ccd-card__price.ccd-card__price,
.ch-prod-card__price.ch-prod-card__price,
.cm-prod-card__price.cm-prod-card__price,
.cm-offer__price.cm-offer__price,
.cp-rec-card__price.cp-rec-card__price,
.cs-ind-card__price.cs-ind-card__price {
  letter-spacing: var(--kc-ui-track);
}

/* ---------- Header nav ---------- */
.header__menu-item.header__menu-item,
.header__inline-menu .header__menu-item {
  font-size: var(--kc-ui-size);
  letter-spacing: var(--kc-ui-track);
  line-height: var(--kc-ui-lh);
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- Zero radius on the Dawn-side chrome the tokens don't reach ---------- */
.button.button,
.shopify-challenge__button.shopify-challenge__button,
.customer .button.button,
.field__input.field__input,
.select__select.select__select,
.quantity.quantity,
.card.card,
.card__inner.card__inner,
.media.media,
.badge.badge {
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ch-btn.ch-btn, .cm-btn.cm-btn, .cs-btn.cs-btn { transition: none; }
}

/* ==========================================================================
   HEADER NAV — keep the main menu on one line
   The nav was wrapping ("FIND YOUR ROUTINE" dropping under "HOME") at
   intermediate desktop widths because the header grid is 1fr auto 1fr and the
   icons column carried "United Arab Emirates | USD $". That picker now lives
   in the footer bottom bar, and these rules stop the menu wrapping even when
   the viewport is tight or a longer menu item is added later.
   ========================================================================== */

@media screen and (min-width: 990px) {
  .header__inline-menu > .list-menu--inline {
    flex-wrap: nowrap;
  }
  .header__menu-item {
    white-space: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Let the logo column give way before the menu does */
  .header__heading,
  .header__heading-link {
    min-width: 0;
  }
}

/* Tight desktops: close the gaps rather than break the line */
@media screen and (min-width: 990px) and (max-width: 1319px) {
  .header__menu-item {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
  .header__inline-menu {
    margin-left: 0;
  }
}

/* ==========================================================================
   TYPOGRAPHY — families and weights, per the Cénée spec

   Spec §1/§2 place the display serif narrowly: weight 400, on the hero
   wordmark, the statement lead and the oversized review score. Everything
   else — section headings, card names, pillar titles — is Geist at 600, and
   all UI type is Geist at 500. An earlier pass pointed every section's
   display token at Libre Bodoni, which put the serif on every h2 site-wide.
   Those tokens are back on Geist; the serif is applied here instead, only
   where the spec puts it.
   ========================================================================== */

:root {
  --kc-ff-serif: 'Libre Bodoni', 'Didot', 'Times New Roman', serif;
  --kc-ff-ui:    'Geist', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Statement leads: the one place the serif carries a headline ---------- */
.ch-herocar__hl.ch-herocar__hl,
.cm-h1.cm-h1,
.ca-banner__heading.ca-banner__heading {
  font-family: var(--kc-ff-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ---------- Oversized numerals — the "review score" role ----------
   These read as display figures, not as bold sans. At 400 in the serif they
   carry size instead of weight, which is most of what was making stat blocks
   feel heavy: a 600 number stacked directly above a 600 title. */
.ab-sci-stat__num.ab-sci-stat__num,
.ab-tile__num.ab-tile__num,
.ca-reviews-highlight__num.ca-reviews-highlight__num,
.ca-reviews-summary__num.ca-reviews-summary__num,
.ca-reviews-summary__score.ca-reviews-summary__score,
.ca-step__num.ca-step__num,
.ca-step-card__num.ca-step-card__num,
.cd-mode__num.cd-mode__num,
.cd-step__num.cd-step__num,
.ch-ben-tile__stat.ch-ben-tile__stat,
.ch-closing__stat-num.ch-closing__stat-num,
.ch-prot-step__num.ch-prot-step__num,
.ch-stats__num.ch-stats__num,
.ch-subscribe__stat-num.ch-subscribe__stat-num,
.cm-ben-tile__stat.cm-ben-tile__stat,
.cm-stat__num.cm-stat__num,
.cm-step__num.cm-step__num,
.cm-step-card__num.cm-step-card__num,
.cr-hiw-step__num.cr-hiw-step__num,
.cr-science-fact__stat.cr-science-fact__stat,
.cr-stat__num.cr-stat__num,
.cs-benefit__num.cs-benefit__num,
.cs-study__num.cs-study__num,
.pw-fact__stat.pw-fact__stat,
.wl-seq__num.wl-seq__num {
  font-family: var(--kc-ff-serif);
  font-weight: 400;
}

/* ---------- Header nav is UI type, so it is Geist ----------
   It had no family of its own and inherited --font-body-family (Plus Jakarta
   Sans). Spec §1: Geist is the UI face. */
.header__menu-item.header__menu-item,
.header__inline-menu .header__menu-item,
.header__menu-item.header__menu-item span {
  font-family: var(--kc-ff-ui);
}

/* ---------- Supporting text stays light ----------
   Stat captions and card body copy sit directly under a 600 title; at 500+
   the whole block reads as bold. */
.ch-ben-tile__stat-label.ch-ben-tile__stat-label,
.ch-closing__stat-label.ch-closing__stat-label,
.cm-stat__label.cm-stat__label,
.ch-ben-tile__body.ch-ben-tile__body,
.cm-ben-tile__body.cm-ben-tile__body {
  font-weight: 400;
}