/* ==========================================================================
   STORLY CORE — LAYER 3: SEMANTIC TOKENS + CROSS-SECTION CONTRACT

   Loaded LAST, so it is the single owner of every semantic role. It reads
   layer 2 (--core-primary / --core-text / … from DesignTokens.php) and maps it
   to the roles every section consumes (--brand / --bg / --text / --btn-* / …),
   the per-section --<prefix>-* contract, and the one heading scale.

   theme.css (layer 1) no longer defines any of these — it holds primitives and
   components only. A section's own inline --<prefix>-* still wins over this.
   ========================================================================== */

:root {
  /* Layer 2 defaults — the values a store with NO Global Design falls back to.
     DesignTokens.php emits real --core-* values that override these. */
  --core-primary: var(--brand-primary, #16181b);
  --core-secondary: var(--brand-secondary, #3f5750);
  --core-background: var(--page-bg, #f6f6f4);
  --core-surface: #ffffff;
  --core-text: var(--text-color, #14161a);
  --core-muted: var(--muted-text-color, #5f6568);
  --core-border-color: var(--border-color, #e3e3df);
  --core-success: #15803d;
  --core-danger: #c02626;
  --core-focus: var(--core-secondary);
  --core-on-primary: #ffffff;
  /* Through --brand-*-font, like the colours above: core-dna loads AFTER the
     DesignTokens <style>, so a bare literal here would beat the merchant /
     niche font. The indirection lets the emitted --brand-*-font resolve. */
  --core-font-heading: var(--brand-heading-font, Georgia, "Times New Roman", "Iowan Old Style", serif);
  /* Self-hosted first — see the @font-face in theme.css. Requesting bare
     "Inter" made the browser wait for the third-party copy and swap after
     first paint. */
  --core-font-body: var(--brand-body-font, "InterVariable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --core-container-width: 1360px;
  --core-gutter: 32px;
  --core-section-space: 64px;
  --core-title-size: 42px;
  --core-section-title-size: clamp(30px, var(--core-title-size), 48px);
  --core-body-size: 16px;

  /* ── Structural DNA ──────────────────────────────────────────────────
     One contract every Core section resolves against. A section must never
     restate these numbers; it consumes the token and lets its own
     --<prefix>-* inline property (written by section.php only when the
     merchant actually set a value) override it.

     Global Design still wins over everything here: it renders into :root,
     which outranks this html block.
     ------------------------------------------------------------------ */

  /* Content tracks. `default` follows the merchant's container width so a
     Core homepage lines up with the header, footer and every page shell. */
  --core-track-narrow: 1040px;
  --core-track-default: var(--core-container-width, 1360px);
  --core-track-wide: 1520px;
  --core-track-full: none;
  /* Text-only measures. Prose must never stretch to a 1360px line length, so
     text-first sections resolve against a ch-based track instead. Capped in ch
     so the measure follows the font size rather than a pinned desktop pixel. */
  --core-track-prose-narrow: 58ch;
  --core-track-prose: 72ch;
  --core-track-prose-wide: 92ch;
  --core-track-inset: var(--gutter, clamp(16px, 3vw, 32px));

  /* Vertical rhythm. One base, merchant-settable via Global Design; nothing
     hardcodes its own section padding any more.

     --core-density is the page-rhythm knob a niche preset (or a section's
     Compact / Standard / Spacious / Statement control) sets ONCE:
        compact .66 · standard 1 · spacious 1.4 · statement 1.9
     Every section resolves padding-block against --core-rhythm, so the whole
     homepage breathes as one composition instead of each section inventing a
     padding. A section that needs to override still multiplies this base
     rather than carrying a pixel number. */
  --core-density: 1;
  --core-rhythm: calc(var(--core-section-space, 64px) * var(--core-density, 1));

  /* One eyebrow treatment for every section. */
  --core-eyebrow-size: 11.5px;
  --core-eyebrow-tracking: .14em;
  --core-eyebrow-weight: 600;
  --core-eyebrow-transform: uppercase;

  /* One responsive section-heading scale. --core-section-title-size stays the
     merchant-facing knob and becomes the ceiling, so Global Design still sets
     how large a section heading gets — it just no longer applies that size
     unchanged to a 360px phone. 23.2px → 42px, capping at 1680px. */
  --core-heading-section: clamp(1.45rem, 2.5vw, var(--core-section-title-size, 2.2rem));

  /* Small-screen ceilings. A merchant who sets an explicit heading size in the
     Builder is setting a DESKTOP value, so these cap it on smaller screens
     rather than letting a 56px heading wrap four times on a phone.

     They are ceilings (min(resolved, cap)), not multipliers. A multiplier also
     shrank the default scale, which is already fluid — that double-scaling put
     a hard 32px → 21px step at the 1024px breakpoint. As a ceiling the default
     passes through untouched and only an oversized explicit value is clipped.

     Applied at the font-size declaration, never to the variable: a variable
     override cannot cap an inline value, which always wins. */
  --core-heading-cap-tablet: clamp(1.45rem, 3.4vw, 2rem);
  --core-heading-cap-mobile: clamp(1.3rem, 6vw, 1.65rem);

  /* Section intro rhythm: stack gap inside the header, then header→content. */
  --core-intro-stack: 8px;
  --core-intro-space: clamp(26px, 3.2vw, 44px);
  --core-card-radius: 10px;
  --core-card-padding: 16px;
  --core-card-bg: var(--core-surface);
  --core-card-border-color: var(--core-border-color);
  --core-card-border: 1px solid var(--core-card-border-color);
  --core-card-shadow: 0 12px 42px rgba(18, 20, 23, .055);
  --core-input-radius: 8px;
  --core-input-bg: var(--core-surface);
  --core-input-border-color: var(--core-border-color);
  --core-button-radius: 8px;
  --core-button-bg: var(--core-primary);
  --core-button-text: var(--core-on-primary);
  --core-button-hover-bg: color-mix(in srgb, var(--core-button-bg) 84%, #000);
  --core-button-hover-text: var(--core-button-text);

  /* ── Semantic role aliases — every section consumes these ─────────────── */
  --brand: var(--core-primary);
  --brand-d: color-mix(in srgb, var(--core-primary) 84%, #000);
  --brand-l: color-mix(in srgb, var(--core-primary) 74%, #fff);
  --accent: var(--core-secondary);
  --accent-d: color-mix(in srgb, var(--core-secondary) 84%, #000);
  --accent-soft: color-mix(in srgb, var(--core-secondary) 12%, var(--core-surface));
  --bg: var(--core-background);
  --bg-s: color-mix(in srgb, var(--core-background) 62%, var(--core-surface));
  --bg-t: color-mix(in srgb, var(--core-background) 82%, var(--core-surface));
  --surface: var(--core-surface);
  --text: var(--core-text);
  --text-s: var(--core-muted);
  /* Tertiary text (compare-at prices, counts, captions) stays at full muted
     strength: the old 78% alpha fell to ~3.2:1 on the page colour, below the
     4.5:1 small text needs. Hierarchy comes from size and weight instead. */
  --text-m: var(--core-muted);
  --border: var(--core-border-color);
  --border-l: color-mix(in srgb, var(--core-border-color) 72%, transparent);
  --border-strong: color-mix(in srgb, var(--core-text) 24%, transparent);
  --danger: var(--core-danger);
  --sale: var(--core-danger);
  --success: var(--core-success);
  --on-brand: var(--core-on-primary);
  --font: var(--core-font-body);
  --font-display: var(--core-font-heading);
  --container-max: var(--core-container-width);
  --gutter: clamp(16px, 3vw, var(--core-gutter));
  --card-radius: var(--core-card-radius);
  --card-padding: var(--core-card-padding);
  --card-bg: var(--core-card-bg);
  --card-border: var(--core-card-border);
  --card-shadow: var(--core-card-shadow);
  /* Legacy shadow names from earlier Core layers. Several sections (FAQ, icon
     features, testimonials, collections hover) still ask for --shadow-md, so it
     resolves through the one card shadow instead of a second, slightly
     different literal that drifts away from it. */
  --shadow-md: var(--core-card-shadow);
  --input-radius: var(--core-input-radius);
  --input-bg: var(--core-input-bg);
  --input-border-color: var(--core-input-border-color);
  --btn-radius: var(--core-button-radius);
  --btn-bg: var(--core-button-bg);
  --btn-color: var(--core-button-text);
  --btn-hover-bg: var(--core-button-hover-bg);
  --btn-hover-color: var(--core-button-hover-text);
}

body {
  background: var(--core-background);
  color: var(--core-text);
  font-family: var(--core-font-body);
  font-size: var(--core-body-size);
}

/* ── One container geometry for every section ────────────────────────────
   `.container` and the few sections that render their own inner wrapper
   instead all resolve the same width + gutter, so every left edge lines up. */
.container,
.storly-rt__inner,
.storly-iwt__grid,
.storly-tst__inner,
.storly-nl__inner,
.storly-footer__inner {
  width: 100%;
  max-width: var(--core-container-width);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, var(--core-gutter));
}
@media (max-width: 767px) {
  .container,
  .storly-rt__inner,
  .storly-iwt__grid,
  .storly-tst__inner,
  .storly-nl__inner,
  .storly-footer__inner {
    padding-inline: min(var(--core-gutter), 20px);
  }
}

:is(h1, h2, .section-title, [class$="__heading"], .product-main-title, .shop-catalog__title) {
  font-family: var(--core-font-heading);
}

:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--core-focus);
  outline-offset: 3px;
  box-shadow: var(--core-focus-ring, 0 0 0 3px color-mix(in srgb, var(--core-focus) 24%, transparent));
}

:is(input, select, textarea, .form-input, .form-select) {
  border-color: var(--core-input-border-color);
  border-radius: var(--core-input-radius);
  background-color: var(--core-input-bg);
  color: var(--core-text);
  font-family: var(--core-font-body);
}

:is(.btn-primary, .btn--primary, button[type="submit"]):not([class*="arrow"]):not([class*="nav"]) {
  border-color: var(--core-button-bg);
  border-radius: var(--core-button-radius);
  background-color: var(--core-button-bg);
  color: var(--core-button-text);
}

:is(.btn-primary, .btn--primary, button[type="submit"]):not([class*="arrow"]):not([class*="nav"]):hover {
  border-color: var(--core-button-hover-bg);
  background-color: var(--core-button-hover-bg);
  color: var(--core-button-hover-text);
}

/* Global chrome */
.storly-announce {
  --ann-bg: var(--core-primary);
  --ann-fg: var(--core-on-primary);
  --ann-link: var(--core-on-primary);
  --ann-link-hover: var(--core-on-primary);
  --ann-em: var(--core-secondary);
  --ann-border-color: color-mix(in srgb, var(--core-on-primary) 22%, transparent);
  --ann-icon-color: var(--core-on-primary);
  --ann-control: var(--core-on-primary);
}

.storly-header {
  --hdr-bg: var(--core-surface);
  --hdr-text: var(--core-text);
  --hdr-border: var(--core-border-color);
  --hdr-name-color: var(--core-text);
  --hdr-nav-color: var(--core-text);
  --hdr-nav-hover: var(--core-secondary);
  --hdr-nav-active: var(--core-text);
  --hdr-nav-indicator: var(--core-secondary);
  --hdr-nav-arrow: var(--core-muted);
  --hdr-icon-color: var(--core-text);
  --hdr-icon-hover: var(--core-secondary);
  --hdr-action-hover-bg: var(--core-background);
  --hdr-badge-bg: var(--core-primary);
  --hdr-badge-color: var(--core-on-primary);
  --hdr-cta-bg: var(--core-button-bg);
  --hdr-cta-color: var(--core-button-text);
  --hdr-cta-hover-bg: var(--core-button-hover-bg);
  --hdr-cta-radius: var(--core-button-radius);
  --hdr-dropdown-bg: var(--core-surface);
  --hdr-dropdown-color: var(--core-text);
  --hdr-dropdown-hover-bg: var(--core-background);
  --hdr-dropdown-hover-color: var(--core-text);
  --hdr-dropdown-border: var(--core-border-color);
  --hdr-dropdown-radius: var(--core-card-radius);
  --hdr-drawer-bg: var(--core-surface);
  --hdr-drawer-text: var(--core-text);
}

/* Homepage sections */
.storly-hero {
  --hero-surface: var(--core-background);
  --hero-ink: var(--core-text);
  --hero-ink-soft: var(--core-muted);
}

.trust-section {
  --tb-bg: var(--core-background);
  --tb-ink: var(--core-text);
  --tb-muted: var(--core-muted);
  --tb-icon: var(--core-text);
  --tb-accent: var(--core-secondary);
  --tb-line: var(--core-border-color);
}

:is(.fprod, .bsel) {
  --fprod-heading-size: var(--core-heading-section);
  --bsel-heading-size: var(--core-heading-section);
  --pcard-surface: color-mix(in srgb, var(--core-background) 76%, var(--core-surface));
  --pcard-title: var(--core-text);
  --pcard-category: var(--core-muted);
  --pcard-muted: var(--core-muted);
  --pcard-price: var(--core-text);
  --pcard-sale: var(--core-danger);
  --pcard-compare: var(--core-muted);
  --pcard-btn-bg: var(--core-button-bg);
  --pcard-btn-color: var(--core-button-text);
  --pcard-btn-hover-bg: var(--core-button-hover-bg);
  --pcard-btn-hover-color: var(--core-button-hover-text);
  --pcard-btn-radius: var(--core-button-radius);
}

.storly-collections {
  --colg-section-bg: var(--core-background);
  --colg-eyebrow: var(--core-secondary);
  --colg-heading: var(--core-text);
  --colg-description: var(--core-muted);
  --colg-card-bg: var(--core-surface);
  --colg-view-all: var(--core-text);
  --colg-radius: var(--core-card-radius);
  --colg-heading-size: var(--core-heading-section);
}

.storly-rt {
  --rt-bg: var(--core-background);
  --rt-ink: var(--core-text);
  --rt-muted: var(--core-muted);
  --rt-accent: var(--core-secondary);
  --rt-line: var(--core-border-color);
  --rt-h-size: var(--core-heading-section);
  --rt-body-size: var(--core-body-size);
}

.storly-cta {
  --cta-bg: var(--core-primary);
  --cta-ink: var(--core-on-primary);
  --cta-btn-bg: var(--core-surface);
  --cta-btn-ink: var(--core-primary);
  --cta-heading: var(--core-heading-section);
  --cta-radius: var(--core-card-radius);
}

.storly-iwt {
  --iwt-bg: var(--core-background);
  --iwt-ink: var(--core-text);
  --iwt-ink-soft: var(--core-muted);
  --iwt-accent: var(--core-secondary);
  --iwt-cta-bg: var(--core-button-bg);
  --iwt-cta-ink: var(--core-button-text);
  --iwt-radius: var(--core-card-radius);
  --iwt-heading-size: var(--core-heading-section);
  --iwt-body-size: var(--core-body-size);
}

.storly-tst {
  --tst-bg: var(--core-background);
  --tst-card-bg: var(--core-card-bg);
  --tst-card-border: var(--core-card-border-color);
  --tst-heading: var(--core-text);
  --tst-ink: var(--core-text);
  --tst-muted: var(--core-muted);
  --tst-accent: var(--core-secondary);
  --tst-star-color: var(--core-secondary);
  --tst-radius: var(--core-card-radius);
  --tst-heading-size: var(--core-heading-section);
}

.storly-nl {
  --nl-surface: color-mix(in srgb, var(--core-background) 66%, var(--core-surface));
  --nl-heading: var(--core-text);
  --nl-ink: var(--core-muted);
  --nl-field-bg: var(--core-input-bg);
  --nl-field-border: var(--core-input-border-color);
  --nl-field-radius: var(--core-input-radius);
  --nl-btn-bg: var(--core-button-bg);
  --nl-btn-ink: var(--core-button-text);
  --nl-btn-radius: var(--core-button-radius);
  --nl-surface-radius: var(--core-card-radius);
  --nl-accent: var(--core-secondary);
  --nl-heading-size: var(--core-heading-section);
}

:is(.storly-tst__description, .storly-nl__description) {
  font-size: var(--core-body-size);
}

/* ── One section-heading scale, one set of breakpoints ─────────────────────
   Each section resolves its own --<prefix>-heading-size (which is present only
   when the merchant set one) against the shared scale, and publishes the result
   as --core-h-resolved. The three rules below then size every section heading
   from that single value at the SAME two breakpoints.

   This lives here rather than in the section stylesheets because each section
   reflows at its own width (1024 / 860 / 767 / 760 / 640). Damping the heading
   inside those blocks meant a heading changed size at a different width in
   every section, which is what left the page with several heading sizes at any
   given viewport. Layout breakpoints stay per-section; type scale does not.
   ------------------------------------------------------------------------- */
.fprod              { --core-h-resolved: var(--fprod-heading-size, var(--core-heading-section)); }
.bsel               { --core-h-resolved: var(--bsel-heading-size,  var(--core-heading-section)); }
.storly-collections { --core-h-resolved: var(--colg-heading-size,  var(--core-heading-section)); }
.storly-rt          { --core-h-resolved: var(--rt-h-size,          var(--core-heading-section)); }
.storly-iwt         { --core-h-resolved: var(--iwt-heading-size,   var(--core-heading-section)); }
.storly-tst         { --core-h-resolved: var(--tst-heading-size,   var(--core-heading-section)); }
.storly-nl          { --core-h-resolved: var(--nl-heading-size,    var(--core-heading-section)); }
.storly-trust       { --core-h-resolved: var(--tb-heading-size,    var(--core-heading-section)); }

:is(.fprod__heading,
    .bsel__heading,
    .storly-collections__heading,
    .storly-rt__heading,
    .storly-iwt__heading,
    .storly-tst__heading,
    .storly-nl__heading,
    .storly-trust__heading) {
  font-size: var(--core-h-resolved);
}

@media (max-width: 1024px) {
  :is(.fprod__heading,
      .bsel__heading,
      .storly-collections__heading,
      .storly-rt__heading,
      .storly-iwt__heading,
      .storly-tst__heading,
      .storly-nl__heading,
      .storly-trust__heading) {
    font-size: min(var(--core-h-resolved), var(--core-heading-cap-tablet));
  }
}

@media (max-width: 767px) {
  :is(.fprod__heading,
      .bsel__heading,
      .storly-collections__heading,
      .storly-rt__heading,
      .storly-iwt__heading,
      .storly-tst__heading,
      .storly-nl__heading,
      .storly-trust__heading) {
    font-size: min(var(--core-h-resolved), var(--core-heading-cap-mobile));
  }
}

.storly-footer {
  --ftr-bg: var(--core-primary);
  --ftr-text: color-mix(in srgb, var(--core-on-primary) 76%, transparent);
  --ftr-heading: var(--core-on-primary);
  --ftr-link: color-mix(in srgb, var(--core-on-primary) 90%, transparent);
  --ftr-link-hover: var(--core-secondary);
  --ftr-border: color-mix(in srgb, var(--core-on-primary) 18%, transparent);
  --ftr-accent: var(--core-secondary);
}

/* Catalog, product and purchase funnel */
.shop-catalog-section {
  --shop-card-bg: var(--core-card-bg);
  --shop-btn-bg: var(--core-button-bg);
  --shop-btn-tc: var(--core-button-text);
  --sc-card-bg: var(--core-card-bg);
  --sc-card-border-color: var(--core-card-border-color);
  --sc-card-radius: var(--core-card-radius);
  --sc-card-shadow: var(--core-card-shadow);
  --sc-btn-radius: var(--core-button-radius);
}

:is(.product-main-section, .bundle-main-section, .bundle-configurator-section) {
  --product-bg: var(--core-background);
  --product-price-color: var(--core-text);
  --product-accent: var(--core-secondary);
  --product-image-radius: var(--core-card-radius);
}

.product-main-section :is(
  .product-main-gallery-stage,
  .product-main-gallery-thumb,
  .product-main-trust-icon,
  .product-main-purchase-card,
  .product-main-payment-pill,
  .product-main-payment-option,
  .product-main-fields-card,
  .product-main-notice,
  .product-option-value
) {
  border-color: var(--core-border-color);
  background-color: var(--core-surface);
}

.product-main-section :is(
  .product-main-gallery-stage,
  .product-main-purchase-card,
  .product-main-fields-card,
  .product-main-notice
) {
  border-radius: var(--core-card-radius);
}

.product-main-section :is(
  .product-main-gallery-thumb,
  .product-main-qty,
  .product-main-payment-pill,
  .product-main-payment-option,
  .product-option-value,
  .form-input
) {
  border-radius: var(--core-input-radius);
}

.product-main-section .product-option-value.is-selected {
  border-color: var(--core-primary);
  background: var(--core-primary);
  color: var(--core-on-primary);
}

.product-main-section .product-main-stock-pill.is-success {
  border-color: color-mix(in srgb, var(--core-success) 24%, transparent);
  background: color-mix(in srgb, var(--core-success) 9%, var(--core-surface));
  color: var(--core-success);
}

.product-main-section :is(.product-main-stock-pill.is-danger, .product-main-alert, .product-main-notice-danger) {
  border-color: color-mix(in srgb, var(--core-danger) 24%, transparent);
  background: color-mix(in srgb, var(--core-danger) 8%, var(--core-surface));
  color: var(--core-danger);
}

:is(.bundle-main-section, .bundle-configurator-section) {
  --bundle-ink: var(--core-text);
  --bundle-gold: var(--core-secondary);
  --bundle-muted: var(--core-muted);
  --bundle-line: var(--core-border-color);
  --bundle-warm: color-mix(in srgb, var(--core-background) 72%, var(--core-surface));
}

.bundle-configurator-section :is(
  .bundle-configurator-hero-card,
  .bundle-configurator-photo-card,
  .bundle-configurator-price-card,
  .bundle-configurator-trust-card,
  .bundle-configurator-panel,
  .bundle-configurator-cta-card,
  .bundle-configurator-submit-card,
  .bundle-configurator-summary-card,
  .bundle-step-card,
  .bundle-slot-card,
  .bundle-option-card,
  .bundle-payment-option,
  .bundle-direct-fields
) {
  border-color: var(--core-card-border-color);
  border-radius: var(--core-card-radius);
  background-color: var(--core-card-bg);
}

.bundle-configurator-section :is(.form-input, .bundle-configurator-qty, .bundle-payment-pill) {
  border-color: var(--core-input-border-color);
  border-radius: var(--core-input-radius);
  background: var(--core-input-bg);
}

.bundle-configurator-section :is(.bundle-primary-action, .bundle-modal-primary, button[type="submit"]) {
  border-color: var(--core-button-bg);
  border-radius: var(--core-button-radius);
  background: var(--core-button-bg);
  color: var(--core-button-text);
}

.bundle-configurator-section :is(.bundle-primary-action, .bundle-modal-primary, button[type="submit"]):hover {
  border-color: var(--core-button-hover-bg);
  background: var(--core-button-hover-bg);
  color: var(--core-button-hover-text);
}

:is(.cart-section, .cart-main-section, .cart-page) {
  --cart-ink: var(--core-text);
  --cart-muted: var(--core-muted);
  --cart-line: var(--core-border-color);
  --cart-gold: var(--core-secondary);
}

:is(.checkout-section, .checkout-main-section, .checkout-page) {
  --checkout-ink: var(--core-text);
  --checkout-muted: var(--core-muted);
  --checkout-line: var(--core-border-color);
  --checkout-gold: var(--core-secondary);
}

:is(.thankyou-section, .thank-you-main-section, .thankyou-x) {
  --thankyou-ink: var(--core-text);
  --thankyou-muted: var(--core-muted);
  --thankyou-line: var(--core-border-color);
  --thankyou-gold: var(--core-secondary);
}

:is(.contact-form-section, .contact-info-section, .contact-section, .contact-info-doc) {
  --contact-ink: var(--core-text);
  --contact-gold: var(--core-secondary);
  --contact-muted: var(--core-muted);
  --contact-line: var(--core-border-color);
}

:is(.contact-section__aside, .contact-section__form, .contact-info-doc__card) {
  border-color: var(--core-card-border-color);
  border-radius: var(--core-card-radius);
  background: var(--core-card-bg);
}

.contact-section :is(.form-input, input, select, textarea) {
  border-color: var(--core-input-border-color);
  border-radius: var(--core-input-radius);
  background: var(--core-input-bg);
}

:is(.contact-section__submit, .contact-info-doc__action) {
  border-color: var(--core-button-bg);
  border-radius: var(--core-button-radius);
  background: var(--core-button-bg);
  color: var(--core-button-text);
}

:is(.cart-page, .checkout-page, .thankyou-x) :is(
  .cart-line,
  .checkout-card,
  .thankyou-x__card
) {
  border-color: var(--core-card-border-color);
  border-radius: var(--core-card-radius);
  background: var(--core-card-bg);
}

/* The order summaries are the dark "ink" panel of cart and checkout: their text is
   light by design. They follow the card radius, but must keep their own background —
   giving them the light card background made every total invisible. */
:is(.cart-page, .checkout-page) :is(.cart-summary, .summary-card) {
  border-radius: var(--core-card-radius);
}

:is(.cart-page, .checkout-page, .thankyou-x) :is(
  .cart-qty,
  .checkout-field,
  .checkout-payment-card,
  input,
  select,
  textarea
) {
  border-color: var(--core-input-border-color);
  border-radius: var(--core-input-radius);
  background-color: var(--core-input-bg);
}

:is(.cart-summary__checkout, .cart-empty__action, .checkout-submit, .thankyou-x__button) {
  border-color: var(--core-button-bg);
  border-radius: var(--core-button-radius);
  background: var(--core-button-bg);
  color: var(--core-button-text);
}

:is(.cart-summary__checkout, .cart-empty__action, .checkout-submit, .thankyou-x__button):hover {
  border-color: var(--core-button-hover-bg);
  background: var(--core-button-hover-bg);
  color: var(--core-button-hover-text);
}

@media (max-width: 767px) {
  html {
    --core-section-title-size: clamp(28px, calc(var(--core-title-size) * .85), 38px);
  }
  :is(.storly-iwt__grid, .product-main-layout, .checkout-main-layout) { min-width: 0; }
  :is(img, video, iframe, svg) { max-width: 100%; }
}

/* One reduced-motion reset for the whole theme. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js-reveal [data-reveal], .js-reveal [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .skeleton { animation: none; }
}