/* ==========================================================================
   judybees — typography
   --------------------------------------------------------------------------
   Type scale lifted verbatim from the Webflow framework at
   https://judybees.webflow.io/admin/framework — the source of truth, not the
   flattened values in the standalone HTML exports (those are a snapshot of the
   fluid system at one viewport and disagree with it).

   Fluid interpolation is the framework's own: linear between a 375px and a
   1440px viewport, clamped at both ends. Horizon has its own fluid formula
   (`clamp(min, size * 0.1vw, max)`) which tops out around 1000px — close, but
   not the same curve, so the sizes below are stated explicitly rather than
   handed to Horizon's generator.
   ========================================================================== */

/* Offaly: recovered from a base64 payload embedded in Minnie's Home
   stylesheet, converted TTF -> WOFF2 (162 KB -> 34.5 KB). One weight only.
   NOTE: shipping this to production is gated on the client's web-embedding
   licence — see c-2026-08-09-offaly-license in the pre-launch checklist. */
@font-face {
  font-family: 'Offaly';
  src: url('offaly-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- fluid helper -------------------------------------------------------
     One viewport-relative unit of progress between 375px (23.4375rem) and
     1440px (90rem). Multiply by the rem delta to interpolate any size. */
  --jb-fluid-step: calc((100vw - 23.4375rem) / 66.5625);

  /* ---- display ---------------------------------------------------------- */
  --font-size--display-l: clamp(6.25rem, calc(6.25rem + 4.25 * var(--jb-fluid-step)), 10.5rem);
  --font-size--display-m: clamp(5rem, calc(5rem + 3.5 * var(--jb-fluid-step)), 8.5rem);
  --font-size--display-s: clamp(3.75rem, calc(3.75rem + 2.5 * var(--jb-fluid-step)), 6.25rem);

  /* ---- headings --------------------------------------------------------- */
  --font-size--h1: clamp(4.125rem, calc(4.125rem + 1.375 * var(--jb-fluid-step)), 5.5rem);
  --font-size--h2: clamp(3.625rem, calc(3.625rem + 0.875 * var(--jb-fluid-step)), 4.5rem);
  --font-size--h3: clamp(2.875rem, calc(2.875rem + 0.625 * var(--jb-fluid-step)), 3.5rem);
  --font-size--h4: clamp(2.375rem, calc(2.375rem + 0.25 * var(--jb-fluid-step)), 2.625rem);
  --font-size--h5: clamp(1.5625rem, calc(1.5625rem + 0.3125 * var(--jb-fluid-step)), 1.875rem);
  --font-size--h6: clamp(1.3125rem, calc(1.3125rem + 0.1875 * var(--jb-fluid-step)), 1.5rem);

  /* ---- body ------------------------------------------------------------- */
  --font-size--text-l: clamp(1.25rem, calc(1.25rem + 0.125 * var(--jb-fluid-step)), 1.375rem);
  --font-size--text-m: clamp(1.075rem, calc(1.075rem + 0.05 * var(--jb-fluid-step)), 1.125rem);
  --font-size--text-s: clamp(0.925rem, calc(0.925rem + 0.0125 * var(--jb-fluid-step)), 0.9375rem);
  --font-size--text-xs: 0.8125rem;  /* 13px, fixed */
  --font-size--text-xxs: 0.75rem;   /* 12px, fixed */
  --font-size--text-xxxs: 0.6875rem; /* 11px, fixed — the scale steps by 1px at this end;
                                        added 27 Aug on Nikol's instruction for the card stat
                                        labels, which had hit the 12px floor */

  /* ---- families ----------------------------------------------------------
     Overrides Horizon's font-picker values. Neither family is in Shopify's
     font library, so neither can come from the picker. Verdana is the
     framework's chosen Offaly fallback — wide enough not to reflow badly. */
  --font-heading--family: 'Offaly', Verdana, sans-serif;
  --font-heading--weight: 400;
  --font-body--family: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ---- weights — 400/500/700/800 only. There is no 600. ------------------ */
  --jb-weight-regular: 400;
  --jb-weight-medium: 500;
  --jb-weight-bold: 700;
  --jb-weight-xbold: 800;

  /* ---- brand colors as literals ------------------------------------------
     Colour normally arrives via the active scheme. These two are for the rare
     spot that must be brand-pink or brand-amber regardless of scheme — a hover
     state on a dark footer, an accent that would otherwise invert. Reach for
     the scheme first; use these only when the scheme genuinely can't express it. */
  --jb-pink: #ec176f;
  --jb-amber: #fcb217;
}

/* ==========================================================================
   Case
   --------------------------------------------------------------------------
   Headings are lowercase by default — it is the brand's voice, the same reason
   judybees carries a lowercase b. The .heading-style-* utilities are the
   documented opt-out for anything that must keep its real casing: vendor
   names, product titles, proper nouns. That is what those classes are for.
   ========================================================================== */
/* Case is NOT set here. It comes from Horizon's own --font-hN--case variable, fed by
   settings.type_case_hN — which now offers `lowercase` because we added it to the schema.
   That matters: Horizon styles headings as `h1, .h1.h1, .text-block.h1 > *`, and its
   sections apply those CLASSES rather than raw <h1> tags. A `text-transform` here on the
   element selector alone (specificity 0,0,1) loses to `.h1.h1` (0,2,0), so it would
   lowercase some headings and silently miss others. Driving the variable reaches all of
   them, and leaves the choice editable per heading level in the theme editor. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading--family);
  font-weight: var(--jb-weight-regular);
}

/* The opt-out. Doubled class deliberately — it has to outrank Horizon's own `.h1.h1`
   (0,2,0), and a single class would lose to it and fail without any visible error. */
.heading-style-h1.heading-style-h1,
.heading-style-h2.heading-style-h2,
.heading-style-h3.heading-style-h3,
.heading-style-h4.heading-style-h4,
.heading-style-h5.heading-style-h5,
.heading-style-h6.heading-style-h6 {
  font-family: var(--font-heading--family);
  font-weight: var(--jb-weight-regular);
  text-transform: none;
}

/* Each utility carries its own size so it can be applied to any element.
   .heading-style-h2 resolves to the h2 token — the Webflow framework points
   it at h4, which Nikol' confirmed on 9 Aug 2026 was not intended. */
.heading-style-h1.heading-style-h1 { font-size: var(--font-size--h1); }
.heading-style-h2.heading-style-h2 { font-size: var(--font-size--h2); }
.heading-style-h3.heading-style-h3 { font-size: var(--font-size--h3); }
.heading-style-h4.heading-style-h4 { font-size: var(--font-size--h4); }
.heading-style-h5.heading-style-h5 { font-size: var(--font-size--h5); }
.heading-style-h6.heading-style-h6 { font-size: var(--font-size--h6); }

/* Display sizes are the ONLY headings that carry weight. Everything else is
   400 — Offaly ships one weight, so asking for bold anywhere else would make
   the browser synthesise it and smear the face. Confirmed by Nikol', 9 Aug 2026. */
.text-display-large  { font-size: var(--font-size--display-l); font-weight: var(--jb-weight-bold); }
.text-display-medium { font-size: var(--font-size--display-m); font-weight: var(--jb-weight-medium); }
.text-display-small  { font-size: var(--font-size--display-s); font-weight: var(--jb-weight-medium); }
.text-size-large     { font-size: var(--font-size--text-l); }
.text-size-medium    { font-size: var(--font-size--text-m); }
.text-size-small     { font-size: var(--font-size--text-s); }
.text-size-xs        { font-size: var(--font-size--text-xs); }
.text-size-xxs       { font-size: var(--font-size--text-xxs); }

/* ==========================================================================
   Heading periods
   --------------------------------------------------------------------------
   Written by judybees-heading-dots.js, not by hand — Shopify strips `class`
   from a <span> inside a text setting, so these cannot be authored in the
   theme editor. See that file for the H1/H2-vs-H3-H6 rules.
   ========================================================================== */
.dot-brand-gold { color: var(--jb-amber); }
.dot-brand-pink { color: var(--jb-pink); }

/* ==========================================================================
   Case utilities — names and values taken verbatim from the judybees framework
   --------------------------------------------------------------------------
   Put .text-case-none on anything holding real words that must keep their own
   capitalisation: product names, vendor names, customer input, proper nouns,
   prose. Selectors are doubled so they outrank Horizon's `.h1.h1` heading rules
   — a single class loses to those and fails with no visible error.
   ========================================================================== */
.text-case-none.text-case-none { text-transform: none; }
.text-case-allcaps.text-case-allcaps { text-transform: uppercase; }
.text-case-lowercase.text-case-lowercase { text-transform: lowercase; }
.text-case-capitalize.text-case-capitalize { text-transform: capitalize; }

/* Product titles are merchant data, not design copy. A lowercased product name
   is a bug, so they are exempt by default rather than by anyone remembering to
   add a class. Red Hat Display to match the framework's .product-card_title,
   which uses the paragraph face rather than Offaly.

   `ref="productTitleLink"` is the wrapper Horizon emits around the title on both
   the product card and the product page; `product-title` is the custom element
   used for the gallery placeholder. */
[ref='productTitleLink'],
[ref='productTitleLink'] *,
product-title,
product-title * {
  font-family: var(--font-body--family);
  text-transform: none;
}