/** Shopify CDN: Minification failed

Line 1620:0 Unexpected "}"

**/
/* ============================================================
   BOLD ACTIVE — V3 design system
   Additive layer over the vendor theme. Touches no vendor file.

   Colour lives in Shopify colour schemes 1-4 (settings_data.json):
     scheme-1  Bold A  Horchata  #F7EFE6   editorial light
     scheme-2  Bold B  Oxblood   #1A090F   primary dark
     scheme-3  Bold C  White     #FFFFFF   commerce light
     scheme-4  Bold D  Mulberry  #2B1322   secondary dark
   Those flow automatically via snippets/settings.liquid. This file adds
   only what Shopify's role list has no slot for, plus self-hosted type.

   Ordering rule: never place scheme-1 adjacent to scheme-3. Close in
   lightness, different in temperature — butted together they read as a bug.
   ============================================================ */

/* ---------- self-hosted brand type (SIL OFL, same-origin) ----------

   COUNTERPART CHANGE — 2026-09-06: the vendor webfont loader is DISABLED.
     snippets/settings.liquid  the whole font_face block is commented out
     layout/theme.liquid       fonts.shopifycdn.com preconnect + 2 preloads removed
     assets/base.css           carries the same note at the top of the file

   Shopify's font_picker serves static instances only, and Archivo's wdth axis IS
   the brand's display voice — so the faces below are self-hosted instead. That
   made the theme's Poppins + Cormorant downloads dead weight, hence killing them.

   These two changes are a pair. Re-enabling the vendor loader without removing the
   --font-*-family overrides below gives you two font systems fighting, and the
   Typography pickers still won't work.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Archivo';
  src: url('bold-archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('bold-bodonimoda-italic-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('bold-dmmono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- type roles ----------
   These override the theme's font_picker settings. The three pickers in
   Settings > Typography are therefore inert by design — brand type is
   locked so it can't be changed from the editor by accident. */
:root {
  --font-heading-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-heading-weight: 800;
  --font-heading-style: normal;
  --font-body-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body-weight: 400;
  --font-button-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-button-weight: 700;
  --font-italic-family: 'Bodoni Moda', Didot, Georgia, serif;
  --font-italic-style: italic;
  --font-italic-weight: 500;
  --bold-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* V3 draws control and section rules at 1.5px; the theme ships 0.1rem (1px).
     One token so the weight is tunable in a single place. */
  --bold-rule-w: .15rem;
}

/* Archivo's width axis is the display voice — unavailable through
   Shopify's font_picker, which is why the faces are self-hosted. */
h1, h2, h3, .h1, .h2, .h3 { font-stretch: 118%; }
.bold-display { font-stretch: 125%; font-weight: 800; letter-spacing: -.025em; line-height: .86; text-transform: uppercase; }
.bold-serif   { font-family: var(--font-italic-family); font-style: italic; font-weight: 500; font-stretch: normal; letter-spacing: 0; text-transform: none; }
.bold-mono    { font-family: var(--bold-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.bold-tnum    { font-variant-numeric: tabular-nums; }

/* ---------- tokens Shopify's role list has no slot for ---------- */
.color-scheme-1 {  /* Bold A — Horchata */
  --bold-ink-3: 124,96,104;   /* muted captions  */
  --bold-edge-ctl: 158,127,138; /* control borders, >=3:1 per WCAG 1.4.11 */
  --bold-accent: #C81742;      /* V3 accent for this ground */
}
.color-scheme-2 {  /* Bold B — Oxblood */
  --bold-ink-3: 169,135,144;   /* muted captions  */
  --bold-edge-ctl: 140,84,104; /* control borders, >=3:1 per WCAG 1.4.11 */
  --bold-accent: #FF3F66;      /* V3 accent for this ground */
}
.color-scheme-3 {  /* Bold C — White */
  --bold-ink-3: 124,110,116;   /* muted captions  */
  --bold-edge-ctl: 148,138,142; /* control borders, >=3:1 per WCAG 1.4.11 */
  --bold-accent: #C81742;      /* V3 accent for this ground */
}
.color-scheme-4 {  /* Bold D — Mulberry */
  --bold-ink-3: 188,148,166;   /* muted captions  */
  --bold-edge-ctl: 154,94,124; /* control borders, >=3:1 per WCAG 1.4.11 */
  --bold-accent: #FF7096;      /* V3 accent for this ground */
}

.color-scheme-7 {  /* Bold E — Chamoy · the fixed accent surface */
  --bold-ink-3: 250,223,229;   /* 4.58 on chamoy */
  --bold-edge-ctl: 245,185,199; /* 3.46 — meets WCAG 1.4.11 */
}
/* scheme-7 deliberately has NO [data-mode="inverted"] rule. Chamoy is the fixed
   point of the system — it reads the same in both modes, exactly as the "Se nota"
   panel does in V3. Adding an inversion rule here would be a bug, not a gap. */

/* The theme's other schemes are vendor demo data and some are internally broken —
   scheme-5 ships secondary_text #ffffff on a #f8f8f8 ground (1.06:1). Without these,
   a Bold card placed on one of them falls back to that and renders invisible text. */
.color-scheme-5 {  /* not a Bold surface — safe defaults so a Bold card dropped here is legible */
  --bold-ink-3: 107,107,107;
  --bold-edge-ctl: 142,142,142;
}
.color-scheme-6 {  /* not a Bold surface — safe defaults so a Bold card dropped here is legible */
  --bold-ink-3: 154,154,154;
  --bold-edge-ctl: 110,110,110;
}
.color-scheme-8 {  /* not a Bold surface — safe defaults so a Bold card dropped here is legible */
  --bold-ink-3: 154,154,154;
  --bold-edge-ctl: 110,110,110;
}

.bold-ink-3    { color: rgb(var(--bold-ink-3)); }
.bold-edge-ctl { border-color: rgb(var(--bold-edge-ctl)); }

/* Control boundaries need 3:1; the theme's --color-border is a hairline
   divider and is deliberately softer. Keep the two jobs separate. */
.bold-control { border: 1.5px solid rgb(var(--bold-edge-ctl)); }

/* ---------- inversion ----------
   One attribute on <html> swaps every band: a<->b and c<->d.
   Specificity (0,2,0) beats the generated .color-scheme-N (0,1,0). */
[data-mode="inverted"] .color-scheme-1 {
    --color-background: 26,9,15;
    --color-background-contrast: 36,16,26;
    --color-shadow: 0,0,0;
    --color-primary-text: 249,240,231;
    --color-secondary-text: 201,165,175;
    --color-heading-text: 249,240,231;
    --color-foreground: 249,240,231;
    --color-filled-button: 255,63,102;
    --color-filled-button-text: 26,9,15;
    --color-outlined-button: 26,9,15;
    --color-outlined-button-text: 249,240,231;
    --color-button-text: 26,9,15;
    --color-link: 255,63,102;
    --color-border: 63,30,42;
    --color-tag-foreground: 26,9,15;
    --color-tag-background: 255,63,102;
    --color-progress-bar: 255,63,102;
    --color-placeholder: 36,16,26;
    --color-rating-stars: 233,178,78;
    --color-button-swiper: 255,63,102;
    --bold-ink-3: 169,135,144;
    --bold-edge-ctl: 140,84,104;
}
[data-mode="inverted"] .color-scheme-2 {
    --color-background: 247,239,230;
    --color-background-contrast: 239,228,214;
    --color-shadow: 38,16,26;
    --color-primary-text: 38,16,26;
    --color-secondary-text: 113,83,90;
    --color-heading-text: 38,16,26;
    --color-foreground: 38,16,26;
    --color-filled-button: 200,23,66;
    --color-filled-button-text: 255,246,247;
    --color-outlined-button: 247,239,230;
    --color-outlined-button-text: 38,16,26;
    --color-button-text: 255,246,247;
    --color-link: 200,23,66;
    --color-border: 226,207,191;
    --color-tag-foreground: 255,246,247;
    --color-tag-background: 200,23,66;
    --color-progress-bar: 200,23,66;
    --color-placeholder: 239,228,214;
    --color-rating-stars: 142,97,22;
    --color-button-swiper: 200,23,66;
    --bold-ink-3: 124,96,104;
    --bold-edge-ctl: 158,127,138;
}
[data-mode="inverted"] .color-scheme-3 {
    --color-background: 43,19,34;
    --color-background-contrast: 55,26,44;
    --color-shadow: 0,0,0;
    --color-primary-text: 249,238,244;
    --color-secondary-text: 214,176,193;
    --color-heading-text: 249,238,244;
    --color-foreground: 249,238,244;
    --color-filled-button: 255,112,150;
    --color-filled-button-text: 43,19,34;
    --color-outlined-button: 43,19,34;
    --color-outlined-button-text: 249,238,244;
    --color-button-text: 43,19,34;
    --color-link: 255,112,150;
    --color-border: 74,36,57;
    --color-tag-foreground: 43,19,34;
    --color-tag-background: 255,112,150;
    --color-progress-bar: 255,112,150;
    --color-placeholder: 55,26,44;
    --color-rating-stars: 239,188,94;
    --color-button-swiper: 255,112,150;
    --bold-ink-3: 188,148,166;
    --bold-edge-ctl: 154,94,124;
}
[data-mode="inverted"] .color-scheme-4 {
    --color-background: 255,255,255;
    --color-background-contrast: 246,244,245;
    --color-shadow: 26,18,22;
    --color-primary-text: 26,18,22;
    --color-secondary-text: 99,86,92;
    --color-heading-text: 26,18,22;
    --color-foreground: 26,18,22;
    --color-filled-button: 200,23,66;
    --color-filled-button-text: 255,246,247;
    --color-outlined-button: 255,255,255;
    --color-outlined-button-text: 26,18,22;
    --color-button-text: 255,246,247;
    --color-link: 200,23,66;
    --color-border: 233,228,230;
    --color-tag-foreground: 255,246,247;
    --color-tag-background: 200,23,66;
    --color-progress-bar: 200,23,66;
    --color-placeholder: 246,244,245;
    --color-rating-stars: 142,97,22;
    --color-button-swiper: 200,23,66;
    --bold-ink-3: 124,110,116;
    --bold-edge-ctl: 148,138,142;
}

/* ============================================================
   WORDMARK — logo + "Active" in Bodoni italic
   ============================================================
   assets/bold-logo-black.png and bold-logo-white.png are 600x214, trimmed to the
   glyph box from the originals in Shopify Files (6000x4000 / 4000x4000, both
   heavily padded; the black one was RGB on an opaque white background and would
   have shown as a white rectangle on Horchata). Both re-cut with real
   transparency at an identical 2.804 ratio, so they need no per-file scaling,
   crop box or blend mode.

   Which file shows is decided in CSS, not Liquid, so [data-mode="inverted"]
   flips the logo along with every other band. ----------------------------- */

.bold-wordmark {
  /* Both driven from the header section's own settings — sections/header.liquid
     emits them per breakpoint from logo_width / logo_width_mobile and the
     "Heading scale" range. Values here are fallbacks only.
     Source PNGs stay 600px wide; the CDN serves 160/320 renditions. */
  --bold-logo-w: 134px;
  --bold-active-scale: .28;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bold-logo-w) * .07);   /* scales with the lockup */
  text-decoration: none;
  line-height: 1;
}
/* section-header.css ships `.header__logo img { width: 100% }` at (0,1,1), which
   outranks a lone class and made the Width setting a no-op. Scoping under
   .header__logo gives (0,2,0) and wins without !important. That wrapper also
   carries `font-size: 0`, so the heading sets its own size explicitly below. */
.header__logo .bold-wordmark__logo,
.bold-wordmark__logo { width: var(--bold-logo-w); height: auto; flex: none; }
.header__logo .bold-wordmark__logo--white,
.bold-wordmark__logo--white { display: var(--bold-logo-white, none); }
.header__logo .bold-wordmark__logo--black,
.bold-wordmark__logo--black { display: var(--bold-logo-black, block); }

.color-scheme-1, .color-scheme-3 { --bold-logo-black: block; --bold-logo-white: none; }
.color-scheme-2, .color-scheme-4 { --bold-logo-black: none;  --bold-logo-white: block; }
[data-mode="inverted"] .color-scheme-1,
[data-mode="inverted"] .color-scheme-3 { --bold-logo-black: none;  --bold-logo-white: block; }
[data-mode="inverted"] .color-scheme-2,
[data-mode="inverted"] .color-scheme-4 { --bold-logo-black: block; --bold-logo-white: none; }

.bold-wordmark__active {
  font-family: var(--font-italic-family);
  font-style: italic;
  font-weight: 500;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: -.005em;
  color: rgb(var(--color-link));
  /* a ratio of the logo width, so the lockup scales as one unit */
  font-size: calc(var(--bold-logo-w) * var(--bold-active-scale, .28));
  font-weight: 600;
  line-height: 1;
  position: relative;
  top: .02em;
}

/* no breakpoint overrides here — header.liquid supplies the mobile width */

/* ------------------------------------------------------------------------
   Hero media — desktop crop fix
   base.css sets `.media img { object-fit: cover; object-position: center
   center; }`, which crops evenly from top and bottom. The hero container's
   height is capped to the viewport (see --inner-height in hero-bold.liquid),
   so a tall portrait photo gets vertically centred inside a shorter box —
   on a face-forward shot that crops the top of the subject's face.
   Anchoring to the top instead means all the excess crop comes off the
   bottom, where it's harmless. Scoped to desktop widths only — mobile uses
   its own image/crop and is left exactly as-is.
   .hero-banner is (0,1,0) same as .media in base.css and this file loads
   after it, so `.hero-banner .hero__media img` at (0,2,0) wins outright. */
@media screen and (min-width: 750px) {
  .hero-banner .hero__media img {
    object-position: center top;
  }
}


/* ============================================================
   ANNOUNCEMENT TICKER — the V3 chamoy marquee
   ============================================================
   Uses the theme's own marquee mode (text_block_behaviour: marquee), which
   already duplicates the track, pauses on hover and honours
   prefers-reduced-motion. We only restyle it.

   .marquee__content ships font-family: var(--font-heading-family) and
   letter-spacing: -.02em at (0,1,0). Scoping under .announcement_bar__marquee
   gives (0,2,0) so the mono treatment wins without !important.
   ------------------------------------------------------------ */

.announcement_bar__marquee .marquee__content {
  font-family: var(--bold-mono);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: .55rem 0 .5rem;
}
.announcement_bar__marquee .marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
.announcement_bar__marquee .marquee__item p { margin: 0; }

/* ✱ between every message, exactly as the V3 ticker sets it. Decorative, so
   it is hidden from assistive tech rather than read out on every item. */
.announcement_bar__marquee .marquee__item::after {
  content: "\2733";
  margin-inline-start: 2.6rem;
  color: rgb(var(--color-primary-text) / .55);
  letter-spacing: 0;
  speak: never;
}

/* ============================================================
   HEADER RULE
   ============================================================
   section-header.css sets:
     .header { border-block-end: .1rem solid
               rgba(var(--color-foreground), var(--header-inner-after-opacity, 1)) }
   --color-foreground is primary_text — cream on Oxblood — washed to 10% opacity.
   V3 uses --line, which is the scheme's own border role (#3F1E2A on Oxblood).
   `.header` is (0,1,0) and section-header.css loads after this file, so the
   override needs the id to win: #header is (1,0,0). ------------------------- */

#header {
  border-block-end: var(--bold-rule-w) solid rgb(var(--bold-edge-ctl, var(--color-border)));
}

/* ---- outlined buttons ----
   base.css line 1477 paints every button border from --color-button-outline, and
   .button--outlined sets that to --color-outlined-button-text, i.e. the button's own
   TEXT colour (#F9F0E7 on Oxblood) — hence a white outline. V3's .btn.ghost keeps the
   label in ink and draws the border in --edge-ctl. Reproduce that by overriding only
   the outline, so the label stays legible.
   --bold-edge-ctl is 3.29:1 on Oxblood — a control boundary, so 3:1 is the bar. */
.button--outlined {
  --color-button-outline: rgb(var(--bold-edge-ctl, var(--color-border)));
  --color-button-hover-outline: rgb(var(--color-outlined-button-text));
}
/* base.css sets `border: 0.1rem solid var(--color-button-outline)` on .button.
   Thickened on the OUTLINED variant only — that's the one whose border is
   actually visible. Filled buttons keep the vendor 0.1rem; their border matches
   the fill so the extra 0.05rem would be invisible anyway. */
.button--outlined { border-width: var(--bold-rule-w); }

/* ============================================================
   HERO EXPANDED — BOLD  (sections/hero-bold.liquid)
   ============================================================
   Scoped under .bold-hero; sections/hero-banner.liquid is untouched.

   IMPORTANT: the vendor styles the INNER paragraph, not the container —
     .hero__heading p { font-size: …; color: …; line-height: … }   (0,1,1)
   Styling .hero__heading alone therefore did nothing, which is why the first
   pass of size and colour controls appeared to be ignored. Every rule below
   targets the element AND its inner p.

   Sizes, line heights and gaps are all per-slide multipliers the theme editor
   sets via --bold-* on .bold-slide-<block.id>.
   ------------------------------------------------------------ */

.bold-hero { --bold-huge: clamp(3.4rem, 1.3rem + 9.6vw, 9rem); }

/* colour roles — also hit the inner p, which carries the vendor colour */
.bold-c--text,      .bold-c--text > p      { color: rgb(var(--color-primary-text)); }
.bold-c--secondary, .bold-c--secondary > p { color: rgb(var(--color-secondary-text)); }
.bold-c--muted,     .bold-c--muted > p     { color: rgb(var(--bold-ink-3, var(--color-secondary-text))); }
.bold-c--accent,    .bold-c--accent > p    { color: rgb(var(--color-link)); }
.bold-c--chrome,    .bold-c--chrome > p {
  background-image: var(--display-fill); background-size: 230% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* weight utilities for use inside the HTML fields */
.bold-w400{font-weight:400}.bold-w500{font-weight:500}.bold-w600{font-weight:600}
.bold-w700{font-weight:700}.bold-w800{font-weight:800}.bold-w900{font-weight:900}

/* eyebrow */
.bold-hero .bold-eyebrow {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-family: var(--bold-mono);
  font-size: calc(1rem * var(--bold-sz-eyebrow, .8));
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  margin-block: 0;
}
.bold-eyebrow__dot { width:.55em; height:.55em; border-radius:50%; background:currentColor; flex:none; }
.bold-eyebrow__meta { color: rgb(var(--bold-ink-3, var(--color-secondary-text))); }

/* display headline — element AND inner p */
.bold-hero .hero__heading,
.bold-hero .hero__heading p {
  font-family: var(--font-heading-family);
  font-stretch: 125%; font-weight: 800; letter-spacing: -.025em;
  text-transform: uppercase; margin-block: 0;
  /* no font-size here on purpose — size the heading from the section's
     Custom CSS via .bold-hero__heading. Line height stays editor-driven. */
  line-height: var(--bold-lh-heading, .86);
}
/* the vendor zeroes line-height on <em> inside the heading; undo it so inline
   HTML behaves predictably in these fields */
.bold-hero .hero__heading p em { font-size: inherit; line-height: inherit; }

/* accent line — element AND inner p */
.bold-hero .bold-hero__accent,
.bold-hero .bold-hero__accent p,
.bold-hero .bold-hero__accent div {
  margin-block: 0;
  /* no font-size here on purpose — size it from the section's Custom CSS via
     .bold-hero__accent. Line height stays editor-driven. */
  line-height: var(--bold-lh-accent, .9);
}
.bold-hero .bold-hero__accent--serif,
.bold-hero .bold-hero__accent--serif p {
  font-family: var(--font-italic-family); font-style: italic; font-weight: 500;
  font-stretch: normal; text-transform: none; letter-spacing: 0;
}
.bold-hero .bold-hero__accent--display,
.bold-hero .bold-hero__accent--display p {
  font-stretch: 125%; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase;
}

/* chip */
.bold-hero .bold-hero__chip {
  display: inline-flex; align-items: center; margin-block: 0;
  padding: .42rem .9rem;
  border: var(--bold-rule-w) dashed rgb(var(--bold-edge-ctl, var(--color-border)));
  border-radius: 999px;
  font-family: var(--bold-mono);
  font-size: calc(1rem * var(--bold-sz-chip, .8));
  letter-spacing: .14em; text-transform: uppercase;
}

/* lede */
.bold-hero .hero__entry,
.bold-hero .hero__entry p {
  font-size: calc(1rem * var(--bold-sz-text, 1.15));
  line-height: 1.5; margin-block: 0;
}

/* ---- vertical rhythm: margins live on the animation wrappers ---- */
.bold-hero .bold-a--eyebrow { margin-block-end: var(--bold-gap-eyebrow, 26px); }
.bold-hero .bold-a--heading { margin-block-end: var(--bold-gap-heading, 0px); }
.bold-hero .bold-a--accent  { margin-block-start: var(--bold-gap-accent, -.16em); }
.bold-hero .bold-a--chip    { margin-block-start: var(--bold-gap-chip, 16px); }
.bold-hero .bold-a--text    { margin-block-start: var(--bold-gap-text, 24px); }
.bold-hero .bold-a--cta     { margin-block-start: var(--bold-gap-cta, 28px); }
.bold-hero .bold-a--facts   { margin-block-start: var(--bold-gap-facts, 34px); }
/* the vendor adds its own bottom margins on these — zero them so the controls
   above are the single source of vertical rhythm */
.bold-hero .hero__subheading { margin-block-end: 0; }
.bold-hero .hero__heading    { margin-block-end: 0; }

/* stat row */
.bold-hero__facts {
  display: flex; flex-wrap: wrap; padding: 0; margin: 0;
  border-top: var(--bold-rule-w) solid rgb(var(--bold-edge-ctl, var(--color-border)));
}
.bold-hero__fact {
  flex: 1 1 auto; min-width: 112px;
  margin-inline-end: 22px; padding: 14px 22px 0 0;
  border-inline-end: var(--bold-rule-w) solid rgb(var(--bold-edge-ctl, var(--color-border)));
}
.bold-hero__fact:last-child { border-inline-end: 0; margin-inline-end: 0; }
.bold-hero__facts dt {
  font-stretch: 118%; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  font-size: calc(1rem * var(--bold-sz-fact-value, 1.4));
}
.bold-hero__facts dd {
  margin: 2px 0 0; font-family: var(--bold-mono);
  font-size: calc(1rem * var(--bold-sz-fact-label, .8));
  letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--bold-ink-3, var(--color-secondary-text)));
}

/* ============================================================
   FEATURED PRODUCTS EXPANDED — BOLD
   ============================================================ */

/* slider arrows, matching the V3 rail buttons */
.bold-slider__buttons { display: flex; gap: 8px; }
.bold-swiper-btn {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: var(--bold-rule-w) solid rgb(var(--bold-edge-ctl, var(--color-border)));
  background: transparent; color: rgb(var(--color-primary-text));
  display: grid; place-items: center; transition: .16s ease;
}
.bold-swiper-btn:hover {
  background: rgb(var(--color-primary-text));
  color: rgb(var(--color-background));
  border-color: rgb(var(--color-primary-text));
}
.bold-swiper-btn svg { width: 15px; height: 15px; }
.bold-swiper-btn[disabled], .bold-swiper-btn.swiper-button-disabled { opacity: .35; pointer-events: none; }
/* the vendor hides arrows under 750px; the Bold section shows them */
@media (max-width: 749px) { .bold-feed .bold-slider__buttons { display: flex; } }
.bold-feed .swiper { cursor: grab; overflow-x: auto; scrollbar-width: thin;
  scrollbar-color: rgb(var(--bold-edge-ctl)) transparent; }
.bold-feed .swiper::-webkit-scrollbar { height: 5px; }
.bold-feed .swiper::-webkit-scrollbar-track { background: transparent; }
.bold-feed .swiper::-webkit-scrollbar-thumb { background: rgb(var(--bold-edge-ctl)); border-radius: 3px; }
.bold-feed .swiper:active { cursor: grabbing; }

/* ---- price: sale first, then compare-at ---- */
.bold-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: calc(1.3rem * var(--bold-card-scale,1) * var(--bold-card-mob,1));
  font-family: var(--bold-mono); font-variant-numeric: tabular-nums; }
.bold-price__now { color: rgb(var(--color-primary-text)); }
.bold-price--sale .bold-price__now { color: rgb(var(--color-link)); }
.bold-price__was { color: rgb(var(--bold-ink-3, var(--color-secondary-text))); text-decoration: line-through; }

/* ---- Style 2 card ---- */
.bold-card {
  display: flex; flex-direction: column; height: 100%;
  background: rgb(var(--color-background));
  /* --bold-card-scale is set per section from the editor (Card text scale).
     --bold-card-mob adds a notch on small screens, where the card is a much
     larger share of the viewport and the type can carry more weight. */
  --bold-card-scale: 1;
  --bold-card-mob: 1;
  /* the card queries its OWN width, so the meta row reflows on any narrow card —
     2-up mobile, a 5-column desktop grid, a narrow sidebar — without needing to
     know which setting caused it. */
  container-type: inline-size;
}
@media (max-width: 749px) { .bold-card { --bold-card-mob: 1.08; } }
.bold-card__media-link { display: block; }
.bold-card__media {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  background: rgb(var(--color-placeholder));
}
.bold-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bold-card__img--hover {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .35s ease;
}
.bold-card:hover .bold-card__img--hover { opacity: 1; }
/* wrapper so more than one pill can stack without overlapping */
.bold-card__tags {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.bold-card__tag {
  background: rgba(0,0,0,.36); color: #fff; backdrop-filter: blur(6px);
  padding: .3rem .66rem; border-radius: 999px;
  font-size: calc(.82rem * var(--bold-card-scale,1) * var(--bold-card-mob,1));
  letter-spacing: .12em; text-transform: uppercase;
}

/* quick add — the V3 PLP size overlay */
.bold-card__qa {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 10px 14px;
  background: linear-gradient(to top, rgba(10,4,7,.74), rgba(10,4,7,.44));
  backdrop-filter: blur(4px);
  transform: translateY(101%);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.bold-card:hover .bold-card__qa,
.bold-card:focus-within .bold-card__qa { transform: none; }
/* header row: label left, close right — so the control lives inside the sheet
   instead of a floating button sitting on top of it */
.bold-card__qa-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 2px;
}
.bold-card__qa b {
  color: rgba(255,255,255,.75);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  font-size: calc(.82rem * var(--bold-card-scale,1) * var(--bold-card-mob,1));
}
.bold-card__qa-close {
  display: none;                      /* desktop closes on mouse-out */
  width: 34px; height: 34px; flex: none;
  align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.32);
  font-size: 1.3rem; line-height: 1;
}
.bold-card__qa-close:hover { background: #fff; color: #1A090F; }
.bold-card__qa-size {
  /* WCAG 2.5.5 Target Size wants 44x44 CSS px. Height is set explicitly rather
     than left to padding, so the target does not shrink when the label is short. */
  min-width: calc(52px * var(--bold-card-scale,1));
  min-height: calc(44px * var(--bold-card-scale,1));
  padding: .5rem .8rem; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff;
  font-family: var(--bold-mono); letter-spacing: .05em; cursor: pointer;
  font-size: calc(.95rem * var(--bold-card-scale,1) * var(--bold-card-mob,1));
}
.bold-card__qa-size:hover { background: #fff; color: #1A090F; }
.bold-card__qa-size[disabled] { opacity: .38; text-decoration: line-through; cursor: not-allowed; }
.bold-card__qa-size[disabled]:hover { background: transparent; color: #fff; }
/* + toggle: touch only. Desktop keeps the hover reveal. */
.bold-card__qa-toggle {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px;
  width: 44px; height: 44px; border-radius: 50%; display: none;
  place-items: center; cursor: pointer;
  background: rgb(var(--color-background)); color: rgb(var(--color-primary-text));
  border: var(--bold-rule-w) solid rgb(var(--bold-edge-ctl));
  font-size: 1.15rem; line-height: 1; z-index: 2;
  transition: transform .18s ease;
}
.bold-card__qa-toggle { transition: transform .18s ease, opacity .18s ease; }
@media (hover: none), (max-width: 749px) {
  .bold-card__qa-toggle { display: grid; }
  .bold-card__qa { transform: translateY(101%); }
  .bold-card:hover .bold-card__qa { transform: translateY(101%); }
  .bold-card.is-qa-open .bold-card__qa { transform: none; }

  /* the floating + would sit on top of the open sheet — retire it and hand
     over to the close control inside the sheet */
  .bold-card.is-qa-open .bold-card__qa-toggle { opacity: 0; pointer-events: none; }
  .bold-card.is-qa-open .bold-card__qa-close { display: inline-flex; }

  /* while the sheet is open, tapping the image should not navigate away */
  .bold-card.is-qa-open .bold-card__media-link { pointer-events: none; }

  /* dim the image so the sheet reads as the active layer */
  .bold-card__media::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: rgba(10,4,7,.34); opacity: 0; transition: opacity .22s ease;
  }
  .bold-card.is-qa-open .bold-card__media::after { opacity: 1; }
  .bold-card.is-qa-open .bold-card__qa { z-index: 3; }
}
.bold-card__qa-sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }

.bold-card__body { padding: 14px 2px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bold-card__title { font-size: calc(1.3rem * var(--bold-card-scale,1) * var(--bold-card-mob,1));
  font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.bold-card__title a { color: rgb(var(--color-primary-text)); }
.bold-card__subtitle {
  margin: 0; line-height: 1.45;
  font-size: calc(1rem * var(--bold-card-scale,1) * var(--bold-card-mob,1));
  color: rgb(var(--bold-ink-3, var(--color-secondary-text)));
}
.bold-card__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgb(var(--color-border));
}
/* Not enough horizontal room for price and swatches side by side — stack them,
   swatches under the price. ~240px is where a 2-up mobile card lands. */
@container (max-width: 240px) {
  .bold-card__meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bold-card__swatches { width: 100%; }
}
/* no container-query support: fall back to the viewport, which catches the
   2-up mobile case even if not the narrow-desktop-grid one */
@supports not (container-type: inline-size) {
  @media (max-width: 560px) {
    .bold-card__meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  }
}
.bold-card__swatches { display: flex; gap: 6px; align-items: center; }
.bold-card__sw { padding: 0; cursor: pointer; position: relative; transition: box-shadow .14s ease; }
.bold-card__sw:hover { box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 3px rgb(var(--bold-edge-ctl)); }
.bold-card__sw[aria-pressed="true"] {
  box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 3px rgb(var(--color-link));
}
.bold-card__sw {
  width: calc(20px * var(--bold-card-scale,1) * var(--bold-card-mob,1));
  height: calc(20px * var(--bold-card-scale,1) * var(--bold-card-mob,1)); border-radius: 50%; display: block;
  background-size: cover; background-position: center;
  border: 1px solid color-mix(in srgb, rgb(var(--color-primary-text)) 30%, transparent);
}
/* Base fill for any value the map below does not cover. Neutral, not a strike
   mark — the variant exists, it just has no colour yet. */
.bold-card__sw { background: rgb(var(--color-placeholder)); }
.bold-card__sw--none { border-style: dashed; }
.bold-card__sw-more {
  letter-spacing: .06em; color: rgb(var(--bold-ink-3, var(--color-secondary-text)));
  font-size: calc(.9rem * var(--bold-card-scale,1) * var(--bold-card-mob,1));
}

/* ============================================================
   COLOUR SWATCH MAP — theme-side fallback
   ============================================================
   Shopify swatch values are not configured on the Colour option, and the swatch
   UI is unavailable because the option is not linked to Shopify's standard Color
   attribute. This maps the 29 catalogue values to hex by their handle instead.

   Precedence, highest first:
     1. inline style from a real Shopify swatch  (value.swatch.color / .image)
     2. .bold-sw--<handle> below
     3. the neutral base on .bold-card__sw, for any value not listed

   So this is a fallback layer, not a replacement — configure swatches in Shopify
   later and they take over automatically with no change here.

   Only affects Bold Style 2 cards. Vendor cards, the PDP picker and collection
   filters still need the Shopify-side setup.
   ------------------------------------------------------------ */

.bold-sw--black            { background: #1C1C1C; }   /* Black */
.bold-sw--electric-blue    { background: #1F4FE0; }   /* Electric Blue */
.bold-sw--graphite-grey    { background: #4A4E54; }   /* Graphite Grey */
.bold-sw--pink             { background: #E8709A; }   /* Pink */
.bold-sw--ink-blue         { background: #1E2A50; }   /* Ink Blue */
.bold-sw--floral-pink      { background: #E9A0B4; }   /* Floral Pink */
.bold-sw--winter-berry     { background: #7C2237; }   /* Winter Berry */
.bold-sw--dark-coffee      { background: #3B2A22; }   /* Dark Coffee */
.bold-sw--slate-grey       { background: #6E767E; }   /* Slate Grey */
.bold-sw--white            { background: #F5F4F2; }   /* White */
.bold-sw--pine-green       { background: #24473A; }   /* Pine Green */
.bold-sw--light-pink       { background: #F2CBD6; }   /* Light Pink */
.bold-sw--raspberry        { background: #B02A4C; }   /* Raspberry */
.bold-sw--ice-blue         { background: #C7DCE8; }   /* Ice Blue */
.bold-sw--light-yellow     { background: #F0E3A8; }   /* Light Yellow */
.bold-sw--hibiscus-red     { background: #C42535; }   /* Hibiscus Red */
.bold-sw--mushroom-grey    { background: #A9A096; }   /* Mushroom Grey */
.bold-sw--rain-blue        { background: #7C93A8; }   /* Rain Blue */
.bold-sw--tan-brown        { background: #A97B54; }   /* Tan Brown */
.bold-sw--baby-blue        { background: #A8C9E4; }   /* Baby Blue */
.bold-sw--provence-blue    { background: #5B78A8; }   /* Provence Blue */
.bold-sw--coffee           { background: #6B4A36; }   /* Coffee */
.bold-sw--mokka            { background: #7A5A46; }   /* Mokka */
.bold-sw--orchid-pink      { background: #D183B4; }   /* Orchid Pink */
.bold-sw--cherry           { background: #A31A2C; }   /* Cherry */
.bold-sw--chestnut         { background: #7A4A32; }   /* Chestnut */
.bold-sw--ice-grey         { background: #D6D8D8; }   /* Ice Grey */
.bold-sw--pistachio        { background: #A9C48A; }   /* Pistachio */
.bold-sw--pearl-pink       { background: #F0DCDD; }   /* Pearl Pink */

/* near-duplicates worth replacing with real garment colours:
   Coffee / Mokka / Chestnut  ·  Graphite / Slate / Ice / Mushroom Grey
   Pink / Light / Floral / Orchid / Pearl Pink
   Electric / Ink / Ice / Rain / Baby / Provence Blue                        */

/* second pill reads as the supporting figure, not a second headline */
.bold-card__tag--pct {
  background: rgba(0,0,0,.24);
  color: rgba(255,255,255,.92);
}
.bold-card__tag .percentage { font-weight: 700; }

/* ============================================================
   PDP — Bold treatment
   ============================================================
   Vendor class names are preserved throughout; these are additive rules on the
   theme's own hooks, not replacements.
   ------------------------------------------------------------ */

/* price row: price, then Save $X, then % off, all on one baseline */
.product__price--row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.product__price--row .bold-price { font-size: 1.35rem; }
.product__price--row .bold-card__tag {
  position: static; backdrop-filter: none;
  background: rgb(var(--color-link));
  color: rgb(var(--color-background));
  font-size: .78rem; letter-spacing: .1em;
}
.product__price--row .bold-card__tag--pct {
  background: transparent;
  color: rgb(var(--color-link));
  border: 1px solid rgb(var(--bold-edge-ctl, var(--color-border)));
}

/* breadcrumb above the gallery — small and quiet, per the reference */
.product__breadcrumbs {
  font-size: .78rem;
  letter-spacing: .01em;
  color: rgb(var(--bold-ink-3, var(--color-secondary-text)));
  padding-block: 10px 8px;
}
.product__breadcrumbs a { color: rgb(var(--bold-ink-3, var(--color-secondary-text))); }
.product__breadcrumbs a:hover { color: rgb(var(--color-primary-text)); }

@media (max-width: 749px) {
  /* Left gutter is done with Swiper's slidesOffsetBefore, NOT container padding:
     padding on a Swiper container breaks its translate maths. And never touch
     .swiper-slide margin — margin-right IS how Swiper implements spaceBetween,
     so zeroing it destroys the 8px gaps and the slide positioning with them. */
  .product__breadcrumbs { padding-inline-start: 5px; font-size: .74rem; }

  /* pagination as a capsule bar: active bullet stretches, the rest stay dots */
  .swiper--product-gallery__pagination.swiper-pagination {
    display: inline-flex; align-items: center; gap: 6px;
    /* Swiper positions this absolutely at left:0;width:100%. Centre it by pinning
       both edges and letting auto margins do the work — no transform, which would
       fight Swiper if it ever animates the element. */
    left: 0; right: 0; width: max-content; margin-inline: auto;
    padding: 7px 12px; border-radius: 999px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px -4px rgba(20,8,12,.35);
  }
  .swiper--product-gallery__pagination .swiper-pagination-bullet {
    width: 6px; height: 6px; margin: 0; border-radius: 999px;
    background: rgb(var(--color-primary-text)); opacity: .28;
    transition: width .22s ease, opacity .22s ease;
  }
  .swiper--product-gallery__pagination .swiper-pagination-bullet-active {
    width: 26px; opacity: 1;
  }
}

/* ============================================================
   PDP — spacing, pagination, price scale, variant swatches
   ============================================================ */

/* --- colour swatches: V3 .cwbtn circles, theme colours, never variant photos ---
   The picker was set to variant_options_with_thumbnails: 'Colour', which paints
   each swatch with a product photo. Cleared in product.json; these fill from the
   same map the cards use, hooked off the label's title attribute so no vendor
   template needs touching. background-image: none defeats any leftover photo.

   SCOPED TO THE COLOUR OPTION. Size labels carry the identical class
   (product-option__label--circle), so an unscoped rule hid XS/S/M/L as well.
   The adjacent-sibling selector off the input's name is what separates them -
   nothing on the label itself distinguishes one option from the other. */
.product-option__input[name^="Colour"] + .product-option__label[title="Black"],
.product-option__input[name^="Color"]  + .product-option__label[title="Black"] { background-image: none; background-color: #1C1C1C; }
.product-option__input[name^="Colour"] + .product-option__label[title="Electric Blue"],
.product-option__input[name^="Color"]  + .product-option__label[title="Electric Blue"] { background-image: none; background-color: #1F4FE0; }
.product-option__input[name^="Colour"] + .product-option__label[title="Graphite Grey"],
.product-option__input[name^="Color"]  + .product-option__label[title="Graphite Grey"] { background-image: none; background-color: #4A4E54; }
.product-option__input[name^="Colour"] + .product-option__label[title="Pink"],
.product-option__input[name^="Color"]  + .product-option__label[title="Pink"] { background-image: none; background-color: #E8709A; }
.product-option__input[name^="Colour"] + .product-option__label[title="Ink Blue"],
.product-option__input[name^="Color"]  + .product-option__label[title="Ink Blue"] { background-image: none; background-color: #1E2A50; }
.product-option__input[name^="Colour"] + .product-option__label[title="Floral Pink"],
.product-option__input[name^="Color"]  + .product-option__label[title="Floral Pink"] { background-image: none; background-color: #E9A0B4; }
.product-option__input[name^="Colour"] + .product-option__label[title="Winter Berry"],
.product-option__input[name^="Color"]  + .product-option__label[title="Winter Berry"] { background-image: none; background-color: #7C2237; }
.product-option__input[name^="Colour"] + .product-option__label[title="Dark Coffee"],
.product-option__input[name^="Color"]  + .product-option__label[title="Dark Coffee"] { background-image: none; background-color: #3B2A22; }
.product-option__input[name^="Colour"] + .product-option__label[title="Slate Grey"],
.product-option__input[name^="Color"]  + .product-option__label[title="Slate Grey"] { background-image: none; background-color: #6E767E; }
.product-option__input[name^="Colour"] + .product-option__label[title="White"],
.product-option__input[name^="Color"]  + .product-option__label[title="White"] { background-image: none; background-color: #F5F4F2; }
.product-option__input[name^="Colour"] + .product-option__label[title="Pine Green"],
.product-option__input[name^="Color"]  + .product-option__label[title="Pine Green"] { background-image: none; background-color: #24473A; }
.product-option__input[name^="Colour"] + .product-option__label[title="Light Pink"],
.product-option__input[name^="Color"]  + .product-option__label[title="Light Pink"] { background-image: none; background-color: #F2CBD6; }
.product-option__input[name^="Colour"] + .product-option__label[title="Raspberry"],
.product-option__input[name^="Color"]  + .product-option__label[title="Raspberry"] { background-image: none; background-color: #B02A4C; }
.product-option__input[name^="Colour"] + .product-option__label[title="Ice Blue"],
.product-option__input[name^="Color"]  + .product-option__label[title="Ice Blue"] { background-image: none; background-color: #C7DCE8; }
.product-option__input[name^="Colour"] + .product-option__label[title="Light Yellow"],
.product-option__input[name^="Color"]  + .product-option__label[title="Light Yellow"] { background-image: none; background-color: #F0E3A8; }
.product-option__input[name^="Colour"] + .product-option__label[title="Hibiscus Red"],
.product-option__input[name^="Color"]  + .product-option__label[title="Hibiscus Red"] { background-image: none; background-color: #C42535; }
.product-option__input[name^="Colour"] + .product-option__label[title="Mushroom Grey"],
.product-option__input[name^="Color"]  + .product-option__label[title="Mushroom Grey"] { background-image: none; background-color: #A9A096; }
.product-option__input[name^="Colour"] + .product-option__label[title="Rain Blue"],
.product-option__input[name^="Color"]  + .product-option__label[title="Rain Blue"] { background-image: none; background-color: #7C93A8; }
.product-option__input[name^="Colour"] + .product-option__label[title="Tan Brown"],
.product-option__input[name^="Color"]  + .product-option__label[title="Tan Brown"] { background-image: none; background-color: #A97B54; }
.product-option__input[name^="Colour"] + .product-option__label[title="Baby Blue"],
.product-option__input[name^="Color"]  + .product-option__label[title="Baby Blue"] { background-image: none; background-color: #A8C9E4; }
.product-option__input[name^="Colour"] + .product-option__label[title="Provence Blue"],
.product-option__input[name^="Color"]  + .product-option__label[title="Provence Blue"] { background-image: none; background-color: #5B78A8; }
.product-option__input[name^="Colour"] + .product-option__label[title="Coffee"],
.product-option__input[name^="Color"]  + .product-option__label[title="Coffee"] { background-image: none; background-color: #6B4A36; }
.product-option__input[name^="Colour"] + .product-option__label[title="Mokka"],
.product-option__input[name^="Color"]  + .product-option__label[title="Mokka"] { background-image: none; background-color: #7A5A46; }
.product-option__input[name^="Colour"] + .product-option__label[title="Orchid Pink"],
.product-option__input[name^="Color"]  + .product-option__label[title="Orchid Pink"] { background-image: none; background-color: #D183B4; }
.product-option__input[name^="Colour"] + .product-option__label[title="Cherry"],
.product-option__input[name^="Color"]  + .product-option__label[title="Cherry"] { background-image: none; background-color: #A31A2C; }
.product-option__input[name^="Colour"] + .product-option__label[title="Chestnut"],
.product-option__input[name^="Color"]  + .product-option__label[title="Chestnut"] { background-image: none; background-color: #7A4A32; }
.product-option__input[name^="Colour"] + .product-option__label[title="Ice Grey"],
.product-option__input[name^="Color"]  + .product-option__label[title="Ice Grey"] { background-image: none; background-color: #D6D8D8; }
.product-option__input[name^="Colour"] + .product-option__label[title="Pistachio"],
.product-option__input[name^="Color"]  + .product-option__label[title="Pistachio"] { background-image: none; background-color: #A9C48A; }
.product-option__input[name^="Colour"] + .product-option__label[title="Pearl Pink"],
.product-option__input[name^="Color"]  + .product-option__label[title="Pearl Pink"] { background-image: none; background-color: #F0DCDD; }

/* Geometry from V3 .cwbtn (pdp-jefa-legging-v3.html:316-318): 34px, fully round,
   34%-ink hairline, accent ring when selected, 1.06 hover lift. */
.product-option__input[name^="Colour"] + .product-option__label, .product-option__input[name^="Color"] + .product-option__label {
  position: relative;
  inline-size: 34px; block-size: 34px;
  border-radius: 50%;
  border: 1px solid rgba(var(--bold-edge-ctl), .85);
  background-size: cover; background-position: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-option__input[name^="Colour"] + .product-option__label > span:not(.visually-hidden):not(.label-unavailable), .product-option__input[name^="Color"] + .product-option__label > span:not(.visually-hidden):not(.label-unavailable) {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.product-option__input:checked[name^="Colour"] + .product-option__label, .product-option__input:checked[name^="Color"] + .product-option__label {
  box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 3.5px var(--bold-accent, #C81742);
}
.product-option__input[name^="Colour"] + .product-option__label:hover, .product-option__input[name^="Color"] + .product-option__label:hover { transform: scale(1.06); }

/* --- breadcrumb spacing --- */
.product__topbar-nav.product__topbar-nav.product__topbar-nav { padding-block: 0; padding-inline: 0; }
.product__breadcrumbs { padding-block: 0 8px; }

@media (max-width: 749px) {
  .product__topbar-nav.product__topbar-nav.product__topbar-nav { padding-block: 0; padding-inline: 0; }
  .product__breadcrumbs { padding-block: 0 4px; padding-inline-start: 5px; font-size: .74rem; }

  /* Pagination pinned to the bottom of the media itself. The theme renders this
     div as a sibling AFTER .main-product__media (its comment says "please don't
     move elsewhere" - the class binding depends on that position), so the
     positioning context is their shared parent, .product-grid__item--media-wrapper.
     Anchoring on .main-product__media was wrong: the pagination is not inside it,
     so the dots resolved against a different box and left the image entirely.
     Taking the bar out of flow collapses the wrapper onto the media, so
     inset-block-end lands on the image. The only other children are the three
     hidden PhotoSwipe icon holders, which contribute no height. */
  .product-grid__item--media-wrapper { position: relative; }
  .swiper--product-gallery__pagination.swiper-pagination {
    position: absolute;
    inset-block-end: 14px;
    inset-block-start: auto;
    left: 0; right: 0; width: max-content; margin-inline: auto;
    z-index: 3;
  }
}

/* --- price block: significantly larger price, slightly larger pills --- */
.product__price--row .bold-price { font-size: 2.1rem; line-height: 1.05; }
/* Compare-at deliberately reads LARGER than the sale price here - the strike
   through is what marks it as the old number, so the size difference is free to
   carry emphasis instead. em, so it stays tied to the price above it. */
.product__price--row .bold-price__was {
  font-size: 1.08em;
  /* Lightened by mixing the muted-caption token toward the ground, which moves it
     AWAY from the text colour on light and dark surfaces alike, so it reads
     lighter in both modes rather than only on Horchata/White.
     Contrast, measured: 4.84 -> 3.83 on scheme-3, 4.94 -> 3.90 on scheme-1,
     6.01 -> 4.90 on scheme-2, 6.50 -> 5.35 on scheme-4. See the note below. */
  color: color-mix(in srgb, rgb(var(--bold-ink-3)) 88%, rgb(var(--color-background)));
}
/* Root here is 9px (html font-size = body_font_scale 0.9 x 62.5%), so these rem
   values are the px targets divided by 9:
     11px -> 1.2222rem   6px -> 0.6667rem   12px -> 1.3333rem
   A pill radius has to exceed half the box height, so a large fixed value is used
   rather than a percentage - 50% on a non-square box gives ellipses, not caps. */
.product__price--row .bold-card__tag {
  font-size: 1.2222rem;
  padding: 0.6667rem 1.3333rem;
  line-height: 1.1;
  border-radius: 999px;
}

/* --letter-spacing-small is hardcoded to 0.1rem at snippets/settings.liquid:223
   (it is not a theme setting - the comment there even asks whether the three
   rem-based tokens can go). Overridden here rather than edited in place: this
   stylesheet loads after that inline :root block, so an equal-specificity
   redeclaration wins and the vendor snippet stays untouched.
   Affects: announcement bar, article, store locator, account, customer,
   and base.css:4290/4300. */
:root { --letter-spacing-small: 0; }

/* ============================================================
   PDP description — line clamp with a MORE toggle
   Pure CSS state (checkbox + label), so it needs no measurement and works
   whether the accordion is open or closed at render time. bold-readmore.js
   only hides the toggle when the text does not actually overflow.
   ============================================================ */
.bold-clamp { --bold-clamp-lines: 3; }

.bold-clamp__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--bold-clamp-lines);
  line-clamp: var(--bold-clamp-lines);
  overflow: hidden;
}
/* :checked = expanded. Restoring `display: block` is what releases the clamp;
   line-clamp only applies to -webkit-box. */
.bold-clamp__state:checked ~ .bold-clamp__text {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.bold-clamp__toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-block-start: .6rem;
  min-height: 44px;                     /* WCAG 2.5.5 target size */
  font-family: var(--bold-mono, inherit);
  font-size: .78rem; letter-spacing: .08em;
  cursor: pointer;
  border-block-end: 1px solid rgb(var(--bold-edge-ctl));
  align-self: flex-start;
}
.bold-clamp__toggle:hover { border-block-end-color: rgb(var(--color-primary-text)); }

/* Only one of the two labels shows, driven by the same checkbox. */
.bold-clamp__less,
.bold-clamp__state:checked ~ .bold-clamp__toggle .bold-clamp__more { display: none; }
.bold-clamp__state:checked ~ .bold-clamp__toggle .bold-clamp__less { display: inline; }

/* Keyboard focus lands on the visually-hidden checkbox, so surface it on the label. */
.bold-clamp__state:focus-visible ~ .bold-clamp__toggle {
  outline: 2px solid var(--bold-accent, #C81742);
  outline-offset: 3px;
}

/* Set by bold-readmore.js when the text fits inside the clamp. */
.bold-clamp[data-bold-fits] .bold-clamp__toggle { display: none; }

/* ============================================================
   PDP — size selectors and Add to cart, sized against V3
   Root rem here is 9px (html font-size = body_font_scale 0.9 x 62.5%), which is
   why the vendor values compute so small: the size chips are 2.8rem = 25.2px with
   1.0rem = 9px text, and .button text is font-button-scale x 1rem = 9px.
   V3 for comparison (its rem is 16px): .size is 52px wide with ~12.8px DM Mono,
   .btn is ~48px tall with 12.8px/700/.12em text.
   ============================================================ */

/* Size chips -> 44px minimum touch target (WCAG 2.5.5). Scoped by excluding the
   colour inputs rather than matching [name^="Size"], so any non-colour option
   (Inseam, Length) gets the same treatment. Beats the vendor's (0,3,0) rule. */
.product__variant-picker
  .product-option__input:not([name^="Colour"]):not([name^="Color"])
  + .product-option__label:not(.product-option__label--image) {
  min-inline-size: 52px;
  min-block-size: 44px;
  padding-inline: 1.4rem;
  font-family: var(--bold-mono);
  font-size: 1.4rem;          /* 12.6px - matches V3 .size */
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: .06em;
  border: 1.5px solid rgb(var(--bold-edge-ctl));
  border-radius: 4px;
}
/* V3 .size[aria-pressed="true"]: solid ink, ground text. */
.product__variant-picker
  .product-option__input:checked:not([name^="Colour"]):not([name^="Color"])
  + .product-option__label:not(.product-option__label--image) {
  background-color: rgb(var(--color-primary-text));
  border-color: rgb(var(--color-primary-text));
  color: rgb(var(--color-background));
}
/* V3 .size[disabled]: faded, struck through, dashed edge. */
.product__variant-picker
  .product-option__input.disabled:not([name^="Colour"]):not([name^="Color"])
  + .product-option__label:not(.product-option__label--image) {
  opacity: .45;
  border-style: dashed;
  text-decoration: line-through;
}

/* Add to cart. Scoped to the product submit buttons - .button is site-wide and
   must not move. Matches V3 .btn: ~48px tall, 12.6px, 700, .12em. */
/* Cart checkout buttons share this block rather than repeating the values, so
   "same size as the PDP Add to cart" stays true if these are ever retuned.
   .button[name="checkout"] covers both the drawer and the cart page - the two
   markups differ (cart__summary-button only exists on the page) but both carry
   name="checkout". Shopify's injected accelerated-checkout buttons do not, so
   they are left alone. */
.product-form__submit.button,
.product-bar__submit.button,
.button[name="checkout"] {
  min-block-size: 48px;
  padding-block: 1.4rem;
  font-size: 1.4rem;          /* was font-button-scale x 1rem = 9px */
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.15;
}

/* ============================================================
   PDP - TheValue - Bold
   Geometry ported 1:1 from the SIGMAS pdp-cost-comparison section; colour comes
   from the Bold surfaces instead of that store's palette. The price markers are
   absolutely positioned OUTSIDE each bar, which is why the columns reserve side
   padding - without it they overlap the checklist card or get clipped by the
   section's overflow.
   ============================================================ */
.bold-value {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 640px;
  overflow: hidden;
  color: rgb(var(--color-primary-text));
  background-color: rgb(var(--color-background));
}
.bold-value__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  /* A flat alpha wash is a weak way to darken a photo: at 80% black a pure-white
     highlight still resolves to #333, so bright images stay legible through it and
     the control feels like it stops working near the top of its range. Dimming the
     image itself crushes those highlights, which an overlay cannot do. Scaled by
     the same setting at half strength, so the two compound smoothly rather than
     the image going black on its own. */
  filter: brightness(calc(1 - (var(--bold-value-scrim, .4) * 0.5)));
}
.bold-value__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, var(--bold-value-scrim, .4));
}
.bold-value__inner {
  position: relative; z-index: 2; width: 100%; max-width: 1320px; margin-inline: auto;
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-evenly;
  flex-wrap: wrap; gap: clamp(24px, 3vw, 40px);
}
/* Nothing here may exceed the line, or a wide flex item drags the whole row -
   and the heading with it - past the viewport. */
.bold-value__inner > * { max-width: 100%; min-width: 0; }

.bold-value__copy { flex: 1 1 380px; max-width: 460px; }
.bold-value__eyebrow {
  display: flex; align-items: center; gap: 8px;
  /* px, not rem: the root here is 9px, so the .78rem this started as computed to
     7px against the SIGMAS original's 12px. Every other size in this section is
     already absolute for the same reason. */
  font-family: var(--bold-mono); font-size: 14px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bold-accent, #C81742); margin-block-end: 18px;
}
.bold-value__heading {
  font-weight: 900; text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(32px, 4.4vw, 50px); line-height: 1.02;
  margin: 0 0 20px; color: rgb(var(--color-primary-text));
}
.bold-value__sub {
  font-size: clamp(14px, 1.5vw, 17px); line-height: 1.6;
  color: rgb(var(--bold-ink-3)); margin: 0 0 20px;
}
.bold-value__fine { font-size: 11px; line-height: 1.6; color: rgb(var(--bold-ink-3)); margin: 0; }

.bold-value__card {
  flex: 0 0 auto; width: clamp(300px, 27vw, 370px); aspect-ratio: 1 / 1; max-width: 100%;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 2px;
  padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .55);
}
.bold-value__card-title { font-size: 16px; font-weight: 600; margin: 0 0 14px; flex: 0 0 auto; }
.bold-value__cols {
  display: flex; justify-content: flex-end; gap: 26px; padding-block-end: 10px;
  border-block-end: 1px solid rgba(var(--bold-edge-ctl), .6); flex: 0 0 auto;
}
.bold-value__cols span {
  width: 32px; text-align: center; font-family: var(--bold-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: rgb(var(--bold-ink-3));
}
.bold-value__rows { display: flex; flex-direction: column; flex: 1; }
.bold-value__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 6px; border-block-end: 1px solid rgba(var(--bold-edge-ctl), .6); flex: 1;
}
.bold-value__row:last-child { border-block-end: none; }
.bold-value__row p { margin: 0; font-size: 12.5px; line-height: 1.35; flex: 1; }
.bold-value__marks { display: flex; gap: 26px; flex: none; }
.bold-value__marks span { width: 32px; display: flex; justify-content: center; }

/* Desktop / wide layout — same breakpoint where .bold-value__inner switches out
   of the stacked mobile column below. The card widens and stops being a square
   so the three checklist rows can sit side by side instead of stacked. */
@media (min-width: 861px) {
  .bold-value__card {
    width: clamp(560px, 54vw, 860px);
    aspect-ratio: auto;
  }
  /* The BOLD/THEM header labels were right-aligned above the stacked rows; with
     the rows now running as their own columns each carries its own check/dash,
     so the header line no longer maps onto anything and is hidden rather than
     left floating over three columns it does not describe. */
  .bold-value__cols { display: none; }
  .bold-value__rows {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(16px, 2vw, 28px);
  }
  .bold-value__row {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 14px;
    padding-block: 0;
    padding-inline: clamp(10px, 1.4vw, 20px);
    border-block-end: none;
    border-inline-end: 1px solid rgba(var(--bold-edge-ctl), .6);
  }
  .bold-value__row:last-child { border-inline-end: none; }
  .bold-value__row p { flex: none; }
  .bold-value__marks { gap: 14px; }
}

.bold-value__bars { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 24px); flex: 0 0 auto; }
.bold-value__bar-col { display: flex; flex-direction: column; align-items: center; }
.bold-value__bar-col--us { padding-inline-start: clamp(92px, 8vw, 124px); }
.bold-value__bar-col--them { padding-inline-end: clamp(136px, 11vw, 172px); }
.bold-value__bar {
  width: 96px; border-radius: 2px 2px 0 0; position: relative; overflow: visible;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* translateY(-50%) centres each marker on the value it calls out. */
.bold-value__mk {
  position: absolute; display: flex; align-items: baseline; gap: 7px;
  white-space: nowrap; line-height: 1; transform: translateY(-50%);
}
.bold-value__amt { font-size: 14px; font-weight: 400; color: rgb(var(--color-primary-text)); }
.bold-value__lbl {
  font-family: var(--bold-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgb(var(--bold-ink-3));
}
.bold-value__mk--left { right: calc(100% + 12px); }
.bold-value__mk--right { left: calc(100% + 12px); }
/* Hairline from marker to bar edge so the level reads unambiguously. */
.bold-value__mk::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 1px;
  background: rgb(var(--bold-edge-ctl));
}
.bold-value__mk--left::after { left: calc(100% + 2px); }
.bold-value__mk--right::after { right: calc(100% + 2px); }

.bold-value__bar-total {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--bold-mono); font-size: 9px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; padding-inline: 6px; line-height: 1.25;
}
.bold-value__bar--us { background: var(--bold-accent, #C81742); color: rgb(var(--color-background)); }
.bold-value__bar--us .bold-value__bar-total { background: rgba(0, 0, 0, .28); color: #fff; }
.bold-value__bar--them {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  color: rgb(var(--color-primary-text));
}
.bold-value__bar--them .bold-value__bar-total { background: rgba(255, 255, 255, .30); }

/* Both columns are bottom-aligned, so an uneven footer would push one bar off
   the shared floor - the logo is taller than the text label. A fixed footer
   height keeps both bars on the same line. */
.bold-value__bar-foot {
  height: 56px; margin-block-start: 12px;
  display: flex; align-items: center; justify-content: center;
}
.bold-value__brand {
  font-family: var(--bold-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: rgb(var(--bold-ink-3));
  text-align: center; max-width: 130px;
}
/* The white Bold wordmark is already light, so it needs no invert filter. */
.bold-value__logo { display: block; max-width: 112px; max-height: 44px; height: auto; object-fit: contain; }

@media (max-width: 860px) {
  .bold-value__inner { flex-direction: column; text-align: center; }
  .bold-value__copy { max-width: 520px; }
  .bold-value__eyebrow { justify-content: center; }
}
/* Phones: the outboard markers need ~230px of side padding, which will not fit
   beside two 96px bars at 390px. Narrow the bars, tighten the reserved gutters
   and step the marker type down so the group stays inside the viewport. */
@media (max-width: 700px) {
  .bold-value__bars { gap: 16px; }
  .bold-value__bar { width: 72px; }
  .bold-value__bar-col--us { padding-inline-start: 84px; }
  .bold-value__bar-col--them { padding-inline-end: 96px; }
  .bold-value__mk { gap: 5px; align-items: center; white-space: normal; }
  .bold-value__amt { font-size: 12px; white-space: nowrap; }
  .bold-value__lbl { font-size: 8.5px; letter-spacing: .06em; white-space: normal; max-width: 54px; line-height: 1.2; }
  .bold-value__mk--left { right: calc(100% + 8px); }
  .bold-value__mk--left .bold-value__lbl { text-align: right; }
  .bold-value__mk--right { left: calc(100% + 8px); }
  .bold-value__mk--right .bold-value__lbl { text-align: left; }
  .bold-value__mk::after { width: 5px; }
  .bold-value__bar-total { font-size: 8px; letter-spacing: .06em; }
  .bold-value__logo { max-width: 84px; }
  .bold-value__bar-foot { height: 44px; margin-block-start: 10px; }
}
/* The shaded zone carries both the label and the computed figure, so the 0.76x
   total cost is visible rather than implied. */
.bold-value__bar-total { flex-direction: column; gap: 2px; }
.bold-value__bar-total-amt { font-size: 11px; letter-spacing: .04em; }

/* ============================================================
   PDP - Transparent Pricing - Bold
   The light counterpart to the value hero. Ported from the SIGMAS section, with
   its fixed #F4F2ED ground / #FFFFFF card pair expressed through the scheme
   tokens instead: the ground is tinted 4% toward ink and the cards sit at the
   plain scheme background, so the card still reads lighter than the ground on
   Horchata and the relationship survives inversion onto a dark surface.
   ============================================================ */
.bold-tp {
  background: color-mix(in srgb, rgb(var(--color-background)) 96%, rgb(var(--color-primary-text)) 4%);
  color: rgb(var(--color-primary-text));
  padding: clamp(40px, 5.5vw, 76px) clamp(20px, 5vw, 64px);
}
.bold-tp__inner {
  max-width: 1320px; margin-inline: auto;
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 960px) { .bold-tp__inner { grid-template-columns: 1fr 1fr; } }
/* Grid children default to min-width:auto, so a long unbroken string in either
   column can push the track past the viewport. */
.bold-tp__copy, .bold-tp__cards { min-width: 0; }

/* Colour is set explicitly rather than inherited: a bare h2 rule elsewhere on
   the page would otherwise win over inheritance from the wrapper. */
.bold-tp__heading {
  font-weight: 900; text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.05;
  margin: 0 0 16px; color: rgb(var(--color-primary-text));
}
.bold-tp__body {
  font-size: clamp(13px, 1.2vw, 15px); line-height: 1.6;
  color: rgb(var(--bold-ink-3)); max-width: 52ch;
}
.bold-tp__body p { margin: 0; }

.bold-tp__cards { display: flex; flex-direction: column; gap: 20px; }
.bold-tp__card {
  background: rgb(var(--color-background));
  border-radius: 12px; padding: clamp(18px, 2vw, 24px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.bold-tp__card-title { font-weight: 600; font-size: 14px; line-height: 1.35; margin-block-end: 4px; }
.bold-tp__rows { list-style: none; margin: 0; padding: 0; }
.bold-tp__rows li {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 11px; border-block-start: 1px solid rgba(var(--bold-edge-ctl), .45);
  font-size: 13px;
}
.bold-tp__plus { color: rgb(var(--bold-ink-3)); font-size: 16px; line-height: 1; }
.bold-tp__total {
  display: flex; align-items: baseline; justify-content: space-between;
  border-block-start: 2px solid rgb(var(--color-primary-text));
  padding-block-start: 16px; margin-block-start: 2px;
}
.bold-tp__total-label { font-weight: 600; font-size: 14px; }
.bold-tp__total-amt {
  font-weight: 500; font-size: clamp(20px, 2.2vw, 26px);
  color: var(--bold-accent, #C81742); line-height: 1;
}
.bold-tp__note { margin-block-start: 7px; font-size: 11.5px; color: rgb(var(--bold-ink-3)); }

.bold-tp__pay {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.bold-tp__was { font-size: 14px; color: rgb(var(--bold-ink-3)); text-decoration: line-through; }
.bold-tp__now { font-weight: 500; font-size: clamp(26px, 3vw, 34px); line-height: 1.05; margin-block-start: 2px; }
.bold-tp__youpay {
  font-family: var(--bold-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--bold-ink-3)); margin-block-start: 5px;
}
.bold-tp__badges { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.bold-tp__badge {
  font-size: 11.5px; font-weight: 600; padding: 7px 13px; border-radius: 7px;
  color: #fff; background: var(--bold-accent, #C81742); white-space: nowrap;
}
/* SIGMAS pairs a deep accent with a lighter one; chamoy lightened keeps that
   two-tone read without introducing a colour outside the Bold palette. */
.bold-tp__badge--soft { background: color-mix(in srgb, var(--bold-accent, #C81742) 72%, #fff 28%); }

/* ============================================================
   PDP - quantity field, and mobile spacing
   ============================================================ */

/* Quantity was 8rem wide with a 2.8rem input - 72 x 25px against the 48px Add to
   cart, because of the 9px root. Matched to the button, with the +/- controls
   given a real touch target. */
.product-form__quantity .quantity { width: auto; }
.product-form__quantity .quantity__wrapper { min-block-size: 48px; align-items: center; }
.product-form__quantity .quantity__input {
  min-block-size: 48px; height: auto; inline-size: 4.4rem;
  font-size: 1.4rem; font-weight: 500;
}
.product-form__quantity .quantity__button {
  inline-size: 44px; min-block-size: 44px; opacity: .75;
}
.product-form__quantity .quantity__button:hover { opacity: 1; }

@media (max-width: 749px) {
  /* Gap between the media column and the info column - i.e. the space between the
     bottom of the image and the product title. The vendor's .product-grid
     { gap: 2.8rem } is also (0,1,0) and section-product.css loads AFTER this file,
     so a single-class selector loses the cascade - a media query adds no
     specificity. Doubled to (0,2,0). Desktop is untouched: main-product emits
     #shopify-section-... .product-grid { gap: ... } at (1,1,0) from the grid_gap
     setting, which still wins above 750px. */
  .product-grid.product-grid { gap: 0.8rem; }
}

/* ============================================================
   PDP - sticky add-to-cart bar

   The vendor puts almost every rule for this component - position:fixed, the
   wrapper's display:flex, and the .is-hidden treatment - inside
   @media (min-width: 750px). Below that it is an unstyled static block in the
   page flow, always visible, children stacked: which is why it filled the screen
   on a phone. Everything here is therefore declared at ALL widths, not just as
   an override of the desktop rules.

   Specificity: the vendor's wrapper rule is (0,2,0) and section-product.css loads
   after this file, so a matching (0,2,0) selector loses. The class is repeated to
   reach (0,3,0).
   ============================================================ */
/* Doubled class = (0,2,0), beating the vendor's (0,1,0). Without this the vendor's
   inset-block-start (header height) still applied while inset-block-end:0 applied
   too, pinning BOTH edges and stretching the bar over the whole viewport. */
.product__sticky-cart.product__sticky-cart {
  position: fixed;
  inset-block-start: auto;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 3;
  width: 100%;
  background-color: rgb(var(--color-background));
  border-block-start: var(--bold-rule-w, 1px) solid rgb(var(--bold-edge-ctl));
  padding-block: 8px;
  padding-inline: var(--page-gutter, 10px);
}
/* Vendor's .product__sticky-cart.is-hidden is (0,2,0) and slides it UP; this needs
   (0,3,0) to win and slide it down instead. */
.product__sticky-cart.product__sticky-cart.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

/* One row, always. 30% colour / 25% size / 45% add to cart.
   display:contents lifts the two fields out of their wrapper so all three sit as
   direct flex items of the bar and the percentages measure against the bar
   itself. flex-shrink is left at 1 so the gaps come out of the tracks
   proportionally instead of overflowing the row. */
.product__sticky-cart.product__sticky-cart .product__sticky-cart-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
}
.bold-stickybar__opts { display: contents; }
.bold-stickybar__field { display: block; min-width: 0; }
.bold-stickybar__field:nth-of-type(1) { flex: 0 1 30%; }
.bold-stickybar__field:nth-of-type(2) { flex: 0 1 25%; }
.product__sticky-cart .product__sticky-cart--action { flex: 0 1 45%; min-width: 0; }
.product__sticky-cart .product-bar__submit {
  inline-size: 100%;
  min-block-size: 44px;
  white-space: nowrap;
  padding-inline: 8px;
}

.bold-stickybar__select {
  inline-size: 100%; min-block-size: 44px;
  padding-inline: 10px 24px; padding-block: 0;
  font-family: var(--bold-mono); font-size: 1.3rem; font-weight: 500;
  color: rgb(var(--color-primary-text));
  background-color: rgb(var(--color-background));
  border: 1.5px solid rgb(var(--bold-edge-ctl));
  border-radius: 4px;
  text-overflow: ellipsis;
  /* Native arrows differ per platform, so the two selects would not match each
     other; drawn instead. */
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.bold-stickybar__select:focus-visible { outline: 2px solid var(--bold-accent, #C81742); outline-offset: 2px; }
.bold-stickybar__select option[disabled] { color: rgb(var(--bold-ink-3)); }

@media (max-width: 749px) {
  .product__sticky-cart.product__sticky-cart .product__sticky-cart-wrapper { gap: 6px; }
  .bold-stickybar__select { font-size: 1.2rem; padding-inline: 8px 20px; }
  .product__sticky-cart .product-bar__submit { font-size: 1.2rem; }
  /* The vendor visually-hides the submit label at this width and shows only a bag
     icon. With the bar at the bottom the label is the instruction, so it is put
     back - and since this file loads BEFORE section-product.css, the (0,2,0)
     vendor rule beat the matching selector. Doubled class -> (0,3,0). Leaving it
     at (0,2,0) hid the label while our own rule hid the icon, so the button came
     out completely empty once a size was picked. */
  .product__sticky-cart.product__sticky-cart .button span {
    position: static !important;
    width: auto !important; height: auto !important; margin: 0 !important;
    clip: auto !important; clip-path: none !important; overflow: visible !important;
    white-space: nowrap;
  }
  .product__sticky-cart.product__sticky-cart .button svg { display: none; }
}

/* ============================================================
   "Select size" resting state, in CSS
   bold-select-size.js is deferred, so without this the button paints as an
   enabled "Add to cart" for a frame before being gated. These rules describe the
   same condition declaratively, so the correct state is painted immediately and
   the script has nothing left to correct visually.

   The condition mirrors missingSelection() in that file: a non-colour option
   exists, and none of them is checked. The first :has() is the guard - without
   it a colour-only product (no size run at all) would sit dimmed forever.
   ============================================================ */
product-info:has(.product-option__input:not([name^="Colour"]):not([name^="Color"])):not(:has(.product-option__input:not([name^="Colour"]):not([name^="Color"]):checked)) :is(.product-form__submit, .product-bar__submit) {
  position: relative;
  opacity: .55;
  pointer-events: none;
}
product-info:has(.product-option__input:not([name^="Colour"]):not([name^="Color"])):not(:has(.product-option__input:not([name^="Colour"]):not([name^="Color"]):checked)) :is(.product-form__submit, .product-bar__submit) > span {
  visibility: hidden;
}
product-info:has(.product-option__input:not([name^="Colour"]):not([name^="Color"])):not(:has(.product-option__input:not([name^="Colour"]):not([name^="Color"]):checked)) :is(.product-form__submit, .product-bar__submit)::after {
  content: var(--bold-select-size-label, "Select size");
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   Back to top vs the sticky bar
   The vendor pins .back-to-top to inset-block-end: var(--spacing-5) (2.4rem),
   which sits inside the bottom bar and lands on the Add to cart button. While
   the bar is on screen the button is lifted clear of it.
   --bold-stickybar-h is measured and published by bold-select-size.js, so this
   tracks the bar's real height instead of assuming one.
   ============================================================ */
:root { --bold-stickybar-h: 0px; }

.back-to-top { transition: inset-block-end var(--duration-default, .2s) ease; }

body:has(.product__sticky-cart:not(.is-hidden)) .back-to-top {
  inset-block-end: calc(var(--spacing-5) + var(--bold-stickybar-h) + 8px);
}

/* ============================================================
   Mobile gallery — no override needed
   The padding that shrank this came from the theme's PARTIAL mobile layout
   ([data-layout-mobile="product__media-layout--partial--sm"]), which pads the
   Swiper container and shows a peek of the next slide. The template now selects
   the FULL mobile layout, which ships no CSS of its own - so the photo is full
   width with nothing from us. Overriding the partial layout meant fighting its
   own pagination variant, which is what broke swipe in the editor and the dots
   in mobile preview.
   ============================================================ */

/* ============================================================
   PDP content grid — 3 up at every width
   The vendor sets repeat(2, ...) above 750px and, below it, hides the static
   grid entirely in favour of an autoplaying single-slide Swiper. Both the
   slider and its init script are gone from bold-main-product__info-blocks,
   so this static grid is now the only rendering.

   Specificity: the vendor rule is (0,1,0) and section-product.css loads after
   this file, so the class is doubled to (0,2,0). The vendor's own
   .product__content-grid--single rule is also (0,2,0) and declared later, so a
   lone block still resolves to one column — which is the behaviour worth keeping.
   ============================================================ */
.product__content-grid.product__content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

/* ============================================================
   Mobile gallery — full-bleed
   No rule needed. section-product.css already ships
     @media (max-width: 749px) { .product .container { padding: 0; } }
   so the media column is edge-to-edge on mobile before anything is added -
   base.css only pads .container from 990px up. A negative margin here pulled the
   column a full --page-gutter PAST the viewport on both sides, which read as the
   right edge bleeding. The only things insetting the photo were Swiper's
   slidesOffsetBefore and the fractional slidesPerView, both handled in
   main-product__media-gallery.liquid.
   ============================================================ */
}

/* ============================================================
   Cart drawer — View cart in the head, Checkout full width
   ============================================================ */
.cart-drawer__head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }

/* The title MUST keep its natural width. The item counter is absolutely
   positioned at inset-inline-start: calc(100% + 0.8rem) against the title, so
   100% is the title's own box - stretching the title with flex: 1 1 auto dragged
   its right edge, and the counter with it, across to the View cart button.
   The right margin reserves room for that overhanging counter, which takes up no
   layout space of its own; margin is used rather than padding because padding
   would widen the title's padding box and push the counter further out again. */
.cart-drawer__head .cart-drawer__title {
  flex: 0 0 auto;
  margin: 0 2.4rem 0 0;
}
/* Close button stays hard right without space-between spreading the middle item. */
.cart-drawer__head .cart-drawer__close { margin-inline-start: auto; }

.cart-drawer__view-cart {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 32px;                 /* deliberately smaller than a primary action */
  padding: 0 1.2rem;
  font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--button-border-radius);
}

/* Sole action in the footer, so it spans the drawer. */
.cart-drawer__action-buttons { display: block; }
.cart-drawer__action-buttons .button { inline-size: 100%; }

/* ============================================================
   Buy set - Bold
   The CTA extracted out of the Bundle item selector's pinned bar.
   ============================================================ */
.bold-buy-set { display: block; }
.bold-buy-set__cta {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: .5rem;
  inline-size: 100%;
}
.bold-buy-set__cta[disabled] { opacity: .55; cursor: not-allowed; }
.bold-buy-set__price { display: flex; align-items: baseline; gap: .5rem; }
.bold-buy-set__was { opacity: .6; font-weight: 400; }

.bold-buy-set__stock {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin: .75rem 0 0;
  font-family: var(--bold-mono); font-size: 1.1rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgb(var(--bold-ink-3));
}
.bold-buy-set__dot {
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: #6fcf97; flex: 0 0 auto;
}
.bold-buy-set__error {
  margin: .5rem 0 0; font-size: 1.1rem;
  color: var(--bold-accent, #C81742); text-align: center;
}

/* Stock line follows availability rather than a configured label. */
.bold-buy-set.is-unavailable .bold-buy-set__dot { background: var(--bold-accent, #C81742); }


/* ============================================================
   Bundle item selector
   These live here, not in assets/bundle-item-selector.css, because that file is
   pulled in from inside the block via stylesheet_tag. In the theme editor a
   block/section can re-render on its own, and a stylesheet linked from within the
   fragment is not reliably present for that paint - which is why the storefront
   laid out correctly at every width while the editor showed the rows collapsed on
   top of each other. bold-v3.css is in <head> for every render context.

   Sizes are px on purpose: the original values were rem written against a 16px
   root, and this theme's root is 9px, so everything computed at ~56% of intended.
   ============================================================ */
.bundle-item-selector,
.bundle-item-selector *,
.bundle-item-selector *::before,
.bundle-item-selector *::after {
  box-sizing: border-box;
}

.bundle-item-selector {
  display: block;
  inline-size: 100%;
  isolation: isolate;
}

.bundle-item-selector__items {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
}

.bundle-item-selector .bundle-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  inline-size: 100%;
  padding-block: 18px;
  border-block-end: 1px solid rgba(var(--bold-edge-ctl, 0 0 0), .45);
}

.bundle-item-selector .bundle-item:first-child { padding-block-start: 0; }
.bundle-item-selector .bundle-item:last-child { border-block-end: none; }

/* Grid child: min-width 0 so a wide image cannot push the info column out. */
.bundle-item-selector .bundle-item__media { min-inline-size: 0; }

.bundle-item-selector .bundle-item__image {
  inline-size: 96px;
  block-size: 124px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: color-mix(in srgb, rgb(var(--color-background)) 92%, rgb(var(--color-primary-text)) 8%);
}

.bundle-item-selector .bundle-item__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-inline-size: 0;
  inline-size: 100%;
}

.bundle-item-selector .bundle-item__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: rgb(var(--color-primary-text));
}

.bundle-item-selector .bundle-item__price {
  margin: 0;
  font-size: 14px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.bundle-item-selector .bundle-item__price s {
  color: rgb(var(--bold-ink-3));
  font-weight: 400;
}

.bundle-item-selector .bundle-item__swatches,
.bundle-item-selector .bundle-item__sizes {
  display: flex;
  flex-wrap: wrap;
  inline-size: 100%;
  gap: 8px;
}

/* Colour comes from the .bold-sw--<handle> map in bold-v3.css - this store has no
   Shopify swatch data, so no background is set here or these blank out. */
.bundle-item-selector .bundle-item__swatch {
  flex: 0 0 auto;
  inline-size: 30px;
  block-size: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--bold-edge-ctl));
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}

.bundle-item-selector .bundle-item__swatch:hover { transform: scale(1.06); }

.bundle-item-selector .bundle-item__swatch.is-selected {
  box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 3.5px var(--bold-accent, #C81742);
}

/* Only if Shopify swatch data ever exists does the inline value take over. */
.bundle-item-selector .bundle-item__swatch[style*="--swatch-bg"] {
  background-color: var(--swatch-bg);
}

/* 44px minimum, matching the PDP size chips. */
.bundle-item-selector .bundle-item__size {
  flex: 0 0 auto;
  min-inline-size: 48px;
  min-block-size: 44px;
  padding-inline: 10px;
  font-family: var(--bold-mono, inherit);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgb(var(--color-primary-text));
  background: transparent;
  border: 1.5px solid rgb(var(--bold-edge-ctl));
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.bundle-item-selector .bundle-item__size.is-selected {
  background: rgb(var(--color-primary-text));
  border-color: rgb(var(--color-primary-text));
  color: rgb(var(--color-background));
}

.bundle-item-selector .bundle-item__size.is-disabled,
.bundle-item-selector .bundle-item__size[disabled] {
  opacity: .45;
  border-style: dashed;
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 749px) {
  .bundle-item-selector .bundle-item {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    padding-block: 14px;
  }
  .bundle-item-selector .bundle-item__image { inline-size: 78px; block-size: 100px; }
  .bundle-item-selector .bundle-item__title { font-size: 14px; }
}

/* ============================================================
   Bundle & Save — PDP quantity tiers
   px throughout: this theme's root is 9px (body_font_scale 0.9 x 62.5%), so rem
   values written against a 16px root land at ~56% of their intended size.
   ============================================================ */
.bold-bundle-save { display: block; }
.bold-bundle-save[hidden] { display: none; }

.bold-bundle-save__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-block-end: 10px;
}
.bold-bundle-save__title {
  font-family: var(--bold-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--color-primary-text));
}
.bold-bundle-save__qty {
  font-family: var(--bold-mono); font-size: 11px; letter-spacing: .06em;
  color: rgb(var(--bold-ink-3));
}

/* One row at every width. The tiers are a single ladder to read across - wrapping
   them to 2x2 on mobile broke that reading order, and the reference keeps all four
   abreast at 375px by letting the cards shrink instead of wrap. */
.bold-bundle-save__row {
  display: flex; flex-wrap: nowrap; gap: 6px;
}
.bold-bundle-save__row > * { flex: 1 1 0; min-inline-size: 0; }

.bold-bundle-save__tier {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 8px 12px;
  min-block-size: 44px;                  /* WCAG 2.5.5, same as the size chips */
  background: transparent;
  border: 1.5px solid rgb(var(--bold-edge-ctl));
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bold-bundle-save__tier:hover { border-color: rgb(var(--color-primary-text)); }
.bold-bundle-save__tier.is-selected {
  border-color: rgb(var(--color-primary-text));
  box-shadow: inset 0 0 0 1px rgb(var(--color-primary-text));
}
.bold-bundle-save__tier:focus-visible {
  outline: 2px solid var(--bold-accent, #C81742); outline-offset: 2px;
}

/* The recommended tier reads as chosen-for-you, so it carries the accent even
   when another tier is selected. */
.bold-bundle-save__tier.is-best { border-color: var(--bold-accent, #C81742); }
.bold-bundle-save__badge {
  position: absolute; inset-block-start: 0; inset-inline: 0;
  transform: translateY(-50%);
  margin-inline: auto; width: max-content;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bold-accent, #C81742); color: #fff;
  font-family: var(--bold-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; white-space: nowrap;
}

.bold-bundle-save__buy {
  font-family: var(--bold-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: rgb(var(--bold-ink-3));
}
.bold-bundle-save__each { font-size: 18px; font-weight: 700; line-height: 1.1; }
.bold-bundle-save__caption { font-size: 10px; color: rgb(var(--bold-ink-3)); }
.bold-bundle-save__save {
  margin-block-start: 4px;
  font-size: 11px; font-weight: 600; color: var(--bold-accent, #C81742);
}
.bold-bundle-save__total { font-size: 10px; color: rgb(var(--bold-ink-3)); }
.bold-bundle-save__ship {
  margin-block-start: 2px; font-size: 10px; color: rgb(var(--bold-ink-3));
}

/* Four cards across 375px: side padding and type come down so the widest line
   ("Save $132") still fits without the card clipping it. */
@media (max-width: 480px) {
  .bold-bundle-save__tier { padding: 12px 4px 10px; gap: 1px; }
  .bold-bundle-save__buy { font-size: 10px; letter-spacing: .04em; }
  .bold-bundle-save__each { font-size: 15px; }
  .bold-bundle-save__caption,
  .bold-bundle-save__total,
  .bold-bundle-save__ship { font-size: 9px; }
  .bold-bundle-save__save { font-size: 10px; margin-block-start: 3px; }
  .bold-bundle-save__badge { font-size: 8px; padding: 2px 5px; letter-spacing: .06em; }
}

/* --- Bundle & Save: one colour picker per unit --------------------------- */
/* Doubled class for (0,3,0): section-product.css loads after this file and sets
   display on the fieldset, so an equal-specificity rule here would lose. */
.product__variant-options.bold-units-replaced.bold-units-replaced { display: none; }

.bold-bundle-save__units { display: flex; flex-direction: column; gap: 10px; }
.bold-bundle-save__units[hidden] { display: none; }

.bold-bundle-save__unit { display: flex; flex-direction: column; gap: 6px; }
.bold-bundle-save__unit-label {
  font-family: var(--bold-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: rgb(var(--bold-ink-3));
}
.bold-bundle-save__unit-label strong {
  color: rgb(var(--color-primary-text)); font-weight: 600; text-transform: none; letter-spacing: 0;
}
.bold-bundle-save__unit-swatches { display: flex; flex-wrap: wrap; gap: 8px; }

/* Same circle spec as the PDP swatches; colour comes from the bold-sw-- map. */
.bold-bundle-save__unit-sw {
  inline-size: 28px; block-size: 28px; flex: 0 0 auto;
  padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgb(var(--bold-edge-ctl));
  background-size: cover; background-position: center;
  transition: box-shadow .15s ease, transform .15s ease;
}
.bold-bundle-save__unit-sw:hover { transform: scale(1.06); }
.bold-bundle-save__unit-sw.is-selected {
  box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 3.5px var(--bold-accent, #C81742);
}
.bold-bundle-save__unit-sw:focus-visible {
  outline: 2px solid var(--bold-accent, #C81742); outline-offset: 2px;
}

/* --- Quantity field and the Add to cart bar ------------------------------
   With the tier ladder setting quantity, a separate quantity stepper is a second
   control for the same thing - and they can disagree. Hidden only while the
   ladder is actually live, so a product without the metafield keeps its stepper.
   The button then takes the full row, as on the reference. */
/* ATC price: the pre-discount figure reads as struck through, dimmed against the
   button fill rather than recoloured, so it stays legible on the dark button. */
.bold-atc-price__sep { margin-inline: .5em; }
.bold-atc-price__was { opacity: .8; text-decoration: line-through; }
.bold-atc-price__now { margin-inline-start: .35em; }

product-info:has(bold-bundle-save:not([hidden])) .product-form__quantity { display: none; }

/* Column, not block: the theme spaces this with gap, and switching it to block
   dropped that gap so the button sat flush against Shop Pay. */
product-info:has(bold-bundle-save:not([hidden])) .product-form__buttons {
  display: flex; flex-direction: column; gap: 12px;
}
product-info:has(bold-bundle-save:not([hidden])) .product-form__submit {
  inline-size: 100%;
  min-block-size: 44px;                  /* WCAG 2.5.5 touch target */
  border-radius: 5px;
  font-size: 1.5rem;                     /* 13.5px at this theme's 9px root */
  letter-spacing: .1em;
}