/** Shopify CDN: Minification failed

Line 446:33 Unexpected ")"

**/
/* =========================================================================
   Croma — utility-page dark-brand skin: cart page, 404, blog/article,
   pages (policies/contact/events), list-collections, password.
   Scoped per surface; never touches the cart drawer / header / footer.
   Tokens from croma.css. Loaded after croma-collection.css.

   HOW THIS WORKS
   --------------
   Horizon paints every section from a `.color-scheme-N` class that defines a
   bank of `--color-*` custom properties, then a base rule does
   `body .color-scheme-N { color: var(--color-foreground); background-color:
   var(--color-background); }`. Several of these stock schemes are off-brand on
   this theme (cyan `--color-primary-hover` #80eaff, light 230/230/230 borders,
   white inputs, dark-red #a42325 headings, white primary buttons).

   Rather than fight every control, we REMAP the scheme custom properties on the
   element that carries `.color-scheme-N` — the section's `.section` div and its
   `.section-background` sibling — scoped to each page via a unique descendant
   anchor (`.cart-page`, `.blog-posts`, `.page-width-content`, `.collection-card`,
   `.section--password`, the contact-form block, etc.) reached with `:has()`
   (already used 37× in base.css, so support is a given). Overriding the vars
   repaints fg/bg AND cascades into every descendant control in one stroke —
   the same approach the product page used with `.product-information.section`.
   Section-scoped, so nothing leaks to the header/footer/drawer or other pages.
   ========================================================================= */


/* =========================================================================
   1. CART PAGE  (/cart) — templates/cart.json → sections/main-cart.liquid
   Off-brand found: section scheme = scheme-30258803 (cyan --color-primary-hover,
   light 230 borders, WHITE secondary buttons, black inputs w/ no border); line
   items / quantity steppers / note + discount inputs / checkout button were all
   stock (the drawer skin is scoped to .cart-drawer, so the PAGE got nothing).
   Scope: .cart-page (page only — the drawer is .cart-drawer and stays untouched).
   ========================================================================= */

/* remap the section scheme vars on the cart page's color-scheme wrapper + bg */
.shopify-section:has(.cart-page) > .section,
.shopify-section:has(.cart-page) > .section-background,
.cart-page {
  --color-background: var(--croma-navy);
  --color-background-rgb: 15 20 27;
  --color-foreground: var(--croma-text);
  --color-foreground-rgb: 244 247 251;
  --color-foreground-heading: var(--croma-text);
  --color-foreground-heading-rgb: 244 247 251;

  /* kill cyan + old red primaries → coral */
  --color-primary: var(--croma-coral);
  --color-primary-rgb: 242 77 81;
  --color-primary-hover: var(--croma-coral-hi);
  --color-primary-hover-rgb: 255 93 97;

  /* light 230/230/230 borders → faint white lines */
  --color-border: var(--croma-line2);
  --color-border-rgb: 255 255 255;

  /* inputs: dark surface instead of pure black / white */
  --color-input-background: var(--croma-navy2);
  --color-input-text: var(--croma-text);
  --color-input-text-rgb: 244 247 251;
  --color-input-border: var(--croma-line2);
  --color-input-hover-background: var(--croma-surface);

  --style-border-radius-inputs: 10px;
}

/* page surface + body font */
.cart-page {
  background-color: var(--croma-navy);
  color: var(--croma-text);
  font-family: var(--font-body--family, 'Montserrat'), sans-serif;
}

/* page title — match the drawer's condensed uppercase chrome, not the loud display face */
.cart-page .cart-title,
.cart-page .cart-page__title :is(h1, h2, h3) {
  color: var(--croma-text) !important;
  font-family: var(--font-accent--family, 'Barlow Condensed'), sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* item-count bubble — minimal pill (mirrors the drawer) */
.cart-page .cart-bubble,
.cart-page .cart-bubble__background {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid var(--croma-line2) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.cart-page .cart-bubble__text,
.cart-page .cart-bubble__text-count {
  color: var(--croma-text) !important;
  font-family: var(--font-accent--family, 'Barlow Condensed'), sans-serif;
}

/* ---- line items ---- */
.cart-page .cart-items--dividers .cart-items__table-row {
  border-bottom: 1px solid var(--croma-line) !important;
}
.cart-page .cart-items--dividers .cart-items__table-row:last-child {
  border-bottom: none !important;
}
.cart-page .cart-items__media-image,
.cart-page .cart-items__media-container {
  border-radius: 10px !important;
}
.cart-page .cart-items__media-image {
  border: 1px solid var(--croma-line) !important;
  background-color: var(--croma-navy2);
}
.cart-page .cart-items__title {
  color: var(--croma-text) !important;
  font-weight: 600 !important;
}
.cart-page .cart-items__title:hover {
  color: var(--croma-blue) !important; /* salmon link */
}
/* secondary line text: vendor / variant / properties */
.cart-page .cart-items__details,
.cart-page .cart-items__variants,
.cart-page .cart-items__variant,
.cart-page .cart-items__variants dd,
.cart-page .cart-items__properties dt,
.cart-page .cart-items__properties dd {
  color: var(--croma-muted) !important;
}
.cart-page .cart-items__details .cart-items__title {
  color: var(--croma-text) !important;
}
/* prices */
.cart-page .cart-items__price,
.cart-page .cart-items__price text-component {
  color: var(--croma-text) !important;
}
.cart-page .cart-items__price-unit { color: var(--croma-muted) !important; }
.cart-page .compare-at-price { color: var(--croma-muted) !important; opacity: .7; }
/* line-level discount labels */
.cart-page .cart-items__details .list-unstyled li { color: var(--croma-coral) !important; }
/* per-line error */
.cart-page .cart-item__error,
.cart-page .cart-item__error-text { color: var(--croma-coral) !important; }

/* ---- quantity stepper ---- */
.cart-page .quantity-selector {
  background-color: var(--croma-navy2) !important;
  border: 1px solid var(--croma-line2) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.cart-page .quantity-selector .quantity-minus,
.cart-page .quantity-selector .quantity-plus {
  background-color: transparent !important;
  color: var(--croma-text) !important;
  border: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.cart-page .quantity-selector .quantity-minus:hover:not([disabled]),
.cart-page .quantity-selector .quantity-plus:hover:not([disabled]) {
  background-color: rgba(255, 255, 255, .1) !important;
  color: var(--croma-blue) !important;
}
.cart-page .quantity-selector .quantity-minus[disabled],
.cart-page .quantity-selector .quantity-plus[disabled] {
  color: var(--croma-muted) !important;
  opacity: .45;
}
.cart-page .quantity-selector input[type="number"] {
  background-color: transparent !important;
  color: var(--croma-text) !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* ---- remove button ---- */
.cart-page .cart-items__remove {
  color: var(--croma-muted) !important;
  background-color: transparent !important;
  border-radius: 8px;
  transition: color .18s ease, background-color .18s ease;
}
.cart-page .cart-items__remove:hover,
.cart-page .cart-items__remove:focus-visible {
  color: var(--croma-coral) !important;
  background-color: rgba(242, 77, 81, .12) !important;
}

/* ---- summary / totals ---- */
.cart-page .cart__summary-container,
.cart-page .cart__summary-inner,
.cart-page .cart__summary-totals {
  background-color: var(--croma-navy) !important;
}
.cart-page .cart__original-total-container,
.cart-page .cart__original-total-container *,
.cart-page .cart__summary-item:not(.cart__total) {
  color: var(--croma-muted) !important;
}
.cart-page .cart__discount,
.cart-page .cart__discount-label,
.cart-page .cart__discount-value { color: var(--croma-coral) !important; }
.cart-page .cart__total-label { color: var(--croma-muted) !important; }
.cart-page .cart__total-value,
.cart-page .cart__total-value text-component {
  color: var(--croma-text) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
}
.cart-page .tax-note,
.cart-page .tax-note *,
.cart-page .cart__installments,
.cart-page .cart__installments * { color: var(--croma-muted) !important; }

/* ---- cart note + discount inputs ---- */
.cart-page .cart-actions { border-block-color: var(--croma-line) !important; }
.cart-page .cart-note__label,
.cart-page .cart-note__summary { color: var(--croma-text) !important; }
.cart-page .cart-note__summary:hover { color: var(--croma-blue) !important; }
.cart-page .cart-note__instructions,
.cart-page .cart-discount__input {
  background-color: var(--croma-navy2) !important;
  color: var(--croma-text) !important;
  border: 1px solid var(--croma-line2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.cart-page .cart-note__instructions:focus,
.cart-page .cart-discount__input:focus {
  border-color: var(--croma-blue) !important;
  outline: none !important;
}
.cart-page .cart-note__instructions::placeholder,
.cart-page .cart-discount__input::placeholder { color: var(--croma-muted) !important; }
.cart-page .cart-discount summary,
.cart-page .cart-discount .disclosure__title { color: var(--croma-text) !important; }
/* "Apply" discount — coral */
.cart-page .cart-discount__button {
  background: var(--croma-coral) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: filter .18s ease;
}
.cart-page .cart-discount__button:hover { filter: brightness(1.08); }
.cart-page .cart-discount__pill {
  background-color: var(--croma-surface) !important;
  color: var(--croma-text) !important;
  border: 1px solid var(--croma-line2) !important;
}
.cart-page .cart-discount__error,
.cart-page .cart-discount__error-text { color: var(--croma-coral) !important; }

/* ---- primary CHECKOUT cta (coral solid) ---- */
.cart-page .cart__checkout-button {
  background: var(--croma-coral) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  min-height: 50px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px -16px rgba(242, 77, 81, .75) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cart-page .cart__checkout-button:hover:not([disabled]) {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 18px 38px -14px rgba(242, 77, 81, .9) !important;
}
.cart-page .cart__checkout-button:focus-visible {
  outline: 2px solid var(--croma-blue) !important;
  outline-offset: 3px;
}
.cart-page .cart__checkout-button[disabled] { filter: grayscale(.3); opacity: .55; }

/* express-checkout wallet buttons rounding to match */
.cart-page shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: 10px;
}

/* ---- empty cart state ---- */
.cart-page--empty .cart-items__wrapper p { color: var(--croma-muted) !important; }
.cart-page--empty .cart-items__wrapper a:not(.cart-items__empty-button) {
  color: var(--croma-blue) !important;
}
.cart-page .cart-items__empty-button {
  background-color: rgba(255, 255, 255, .05) !important;
  color: var(--croma-text) !important;
  border: 1.5px solid var(--croma-line2) !important;
  border-radius: 10px !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.cart-page .cart-items__empty-button:hover {
  background-color: rgba(255, 255, 255, .12) !important;
  border-color: #fff !important;
  transform: translateY(-1px);
}
.cart-page .cart-items__empty-button:focus-visible {
  outline: 2px solid var(--croma-blue) !important;
  outline-offset: 3px;
}


/* =========================================================================
   2. 404  (bad URL / /404) — templates/404.json → sections/main-404.liquid
   Off-brand found: section renders .color-scheme-1 (dark-red #a42325 headings,
   light 230 borders) and the "Continue shopping" button is a stock .button
   (white bg / red border). Heading + copy needed Croma typography; button → coral.
   Scope: the 404 section = the .shopify-section.section-wrapper that contains the
   main-404 content. We anchor on `:has(> .section.section--height-small)` plus the
   404's continue-shopping link to avoid touching other scheme-1 sections.
   ========================================================================= */

/* remap scheme vars on the 404 section wrapper (anchored by its CTA to /collections/all
   living inside a section-wrapper) */
.shopify-section.section-wrapper:has(.section--height-small) > .section,
.shopify-section.section-wrapper:has(.section--height-small) > .section-background {
  --color-background: var(--croma-navy);
  --color-background-rgb: 15 20 27;
  --color-foreground: var(--croma-text);
  --color-foreground-rgb: 244 247 251;
  --color-foreground-heading: var(--croma-text);
  --color-foreground-heading-rgb: 244 247 251;
  --color-primary: var(--croma-coral);
  --color-primary-hover: var(--croma-coral-hi);
  --color-border: var(--croma-line2);
  --color-border-rgb: 255 255 255;
}

/* 404 heading — loud display face, on-brand */
.shopify-section.section-wrapper:has(.section--height-small) .text-block :is(h1, h2) {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif !important;
  color: var(--croma-text) !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.shopify-section.section-wrapper:has(.section--height-small) .text-block p {
  color: var(--croma-muted) !important;
}

/* 404 "Continue shopping" → coral solid */
.shopify-section.section-wrapper:has(.section--height-small) .button {
  background: var(--croma-coral) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px -16px rgba(242, 77, 81, .7);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.shopify-section.section-wrapper:has(.section--height-small) .button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.shopify-section.section-wrapper:has(.section--height-small) .button:focus-visible {
  outline: 2px solid var(--croma-blue) !important;
  outline-offset: 3px;
}


/* =========================================================================
   3a. BLOG INDEX  (/blogs/*) — templates/blog.json → sections/main-blog.liquid
   Off-brand found: scheme-1 (dark-red headings, light borders); blog post cards
   + titles + meta were stock light treatment.
   Scope: .blog-posts (root class — IS the .section element) + .section-background
   sibling. NOTE: `.blog-posts` alone (0,1,0) ties with `.color-scheme-1`, which
   wins on source order; we qualify with `.section` → `.section.blog-posts` (0,2,0)
   to win the cascade (same trick as `.product-information.section`).
   ========================================================================= */
.shopify-section:has(.blog-posts) > .section-background,
.section.blog-posts {
  --color-background: var(--croma-navy);
  --color-background-rgb: 15 20 27;
  --color-foreground: var(--croma-text);
  --color-foreground-rgb: 244 247 251;
  --color-foreground-heading: var(--croma-text);
  --color-foreground-heading-rgb: 244 247 251;
  --color-primary: var(--croma-coral);
  --color-primary-hover: var(--croma-coral-hi);
  --color-border: var(--croma-line2);
  --color-border-rgb: 255 255 255;
}
.section.blog-posts {
  /* !important to beat `body .color-scheme-N` (0,2,1); keeps the section
     explicitly dark instead of relying on body show-through */
  background-color: var(--croma-navy) !important;
  font-family: var(--font-body--family, 'Montserrat'), sans-serif;
}
/* blog page title — display face */
.blog-posts > .text-block :is(h1, h2),
.blog-posts .blog-post-card__title {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif !important;
  color: var(--croma-text) !important;
}
/* post cards: dark surface */
.blog-posts .blog-post-card {
  background-color: var(--croma-navy2);
  border: 1px solid var(--croma-line);
  border-radius: var(--croma-r);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.blog-posts .blog-post-card:hover {
  border-color: var(--croma-line2);
  transform: translateY(-2px);
}
.blog-posts .blog-post-card__media,
.blog-posts .blog-post-card__image { border-radius: 0; }
/* card title + hover salmon */
.blog-posts .blog-post-card__title a,
.blog-posts .blog-post-card a :is(h1, h2, h3, h4) { color: var(--croma-text) !important; }
.blog-posts .blog-post-card__title a:hover { color: var(--croma-blue) !important; }
/* meta (date / author / excerpt) */
.blog-posts .blog-post-card__info,
.blog-posts .blog-post-card__info *,
.blog-posts .blog-post-meta,
.blog-posts .blog-post-card__excerpt { color: var(--croma-muted) !important; }
/* read-more / any inline links → salmon */
.blog-posts a.link,
.blog-posts .blog-post-card__excerpt a,
.blog-posts .link-arrow { color: var(--croma-blue) !important; }
/* pagination */
.blog-posts .pagination__item { color: var(--croma-muted) !important; }
.blog-posts .pagination__item--current,
.blog-posts .pagination__item:hover { color: var(--croma-text) !important; }


/* =========================================================================
   3b. ARTICLE  (/blogs/*/article) — templates/article.json → main-blog-post.liquid
   Off-brand found: section scheme empty → scheme-1 (dark-red headings, light
   borders); article body (RTE) + links were stock; comments form light.
   Scope: anchor on .blog-post-content / .blog-post-comments (unique to article).
   ========================================================================= */
.shopify-section:has(.blog-post-content) > .section,
.shopify-section:has(.blog-post-content) > .section-background,
.shopify-section:has(.blog-post-comments-container) > .section,
.shopify-section:has(.blog-post-comments-container) > .section-background {
  --color-background: var(--croma-navy);
  --color-background-rgb: 15 20 27;
  --color-foreground: var(--croma-text);
  --color-foreground-rgb: 244 247 251;
  --color-foreground-heading: var(--croma-text);
  --color-foreground-heading-rgb: 244 247 251;
  --color-primary: var(--croma-coral);
  --color-primary-hover: var(--croma-coral-hi);
  --color-border: var(--croma-line2);
  --color-border-rgb: 255 255 255;
  --color-input-background: var(--croma-navy2);
  --color-input-text: var(--croma-text);
  --color-input-text-rgb: 244 247 251;
  --color-input-border: var(--croma-line2);
  --style-border-radius-inputs: 10px;
}
/* article headings: display face; meta muted */
.shopify-section:has(.blog-post-content) header :is(h1, h2) {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif !important;
  color: var(--croma-text) !important;
}
.shopify-section:has(.blog-post-content) .blog-post-meta,
.shopify-section:has(.blog-post-content) header .blog-post-meta * {
  color: var(--croma-muted) !important;
}
/* article body — readable Montserrat, comfortable measure */
.blog-post-content .rte,
.shopify-section:has(.blog-post-content) .rte {
  color: var(--croma-text);
  font-family: var(--font-body--family, 'Montserrat'), sans-serif;
  line-height: 1.75;
}
.blog-post-content .rte :is(h1, h2, h3, h4) {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif;
  color: var(--croma-text);
}
.blog-post-content .rte a,
.shopify-section:has(.blog-post-content) .rte a {
  color: var(--croma-blue);
  text-underline-offset: 3px;
}
.blog-post-content .rte a:hover { color: var(--croma-coral-hi); }
.blog-post-content .rte blockquote {
  border-inline-start: 3px solid var(--croma-coral);
  color: var(--croma-muted2);
}
.blog-post-content .rte hr { border-color: var(--croma-line); }
/* comments block */
.shopify-section:has(.blog-post-comments-container) .blog-post-comment {
  background-color: var(--croma-navy2);
  border: 1px solid var(--croma-line);
  border-radius: var(--croma-r);
}
.shopify-section:has(.blog-post-comments-container) .blog-post-comment__author-name { color: var(--croma-text); }
.shopify-section:has(.blog-post-comments-container) .blog-post-comment__date { color: var(--croma-muted); }


/* =========================================================================
   4a. PAGES  (templates/page.json, page.events.json → sections/main-page.liquid)
   Off-brand found: scheme-30258803 (cyan hover, light borders) / scheme-1
   (dark-red headings). RTE body + links were stock. events.json also has a
   `hero` + `section` using scheme-5 (pure black) — left mostly alone (already
   dark), but their links/buttons get salmon/coral via the scoped remap below.
   Scope: .page-width-content (root class — IS main-page's .section), qualified
   with `.section` so .section.page-width-content (0,2,0) beats the scheme class.
   NOTE: Shopify *policy* pages (/policies/*) render a Shopify-hosted
   .shopify-policy__container, NOT main-page — handled in 4c.
   ========================================================================= */
.shopify-section:has(.page-width-content) > .section-background,
.section.page-width-content {
  --color-background: var(--croma-navy);
  --color-background-rgb: 15 20 27;
  --color-foreground: var(--croma-text);
  --color-foreground-rgb: 244 247 251;
  --color-foreground-heading: var(--croma-text);
  --color-foreground-heading-rgb: 244 247 251;
  --color-primary: var(--croma-coral);
  --color-primary-hover: var(--croma-coral-hi);  /* was cyan #80eaff */
  --color-border: var(--croma-line2);
  --color-border-rgb: 255 255 255;
}
.section.page-width-content {
  background-color: var(--croma-navy) !important; /* beat `body .color-scheme-N` (0,2,1) */
  font-family: var(--font-body--family, 'Montserrat'), sans-serif;
}
/* page title — display face */
.page-width-content > .text-block :is(h1, h2),
.page-width-content .text-block :is(h1) {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif !important;
  color: var(--croma-text) !important;
}
/* contact page title sits in a generic section (no .page-width-content anchor),
   so scope by template to give its heading the display face */
main[data-template='page.contact'] :is(h1, h2, h3) {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif !important;
  color: var(--croma-text) !important;
}
/* RTE body typography + salmon links */
.page-width-content .rte {
  color: var(--croma-text);
  line-height: 1.7;
}
.page-width-content .rte :is(h1, h2, h3, h4) {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif;
  color: var(--croma-text);
}
.page-width-content .rte a {
  color: var(--croma-blue);
  text-underline-offset: 3px;
}
.page-width-content .rte a:hover { color: var(--croma-coral-hi); }
.page-width-content .rte blockquote {
  border-inline-start: 3px solid var(--croma-coral);
  color: var(--croma-muted2);
}
.page-width-content .rte hr { border-color: var(--croma-line); }
/* any button block on a page → coral */
.page-width-content .button:not(.button-secondary):not(.button-unstyled) {
  background: var(--croma-coral) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: filter .18s ease, transform .18s ease;
}
.page-width-content .button:not(.button-secondary):not(.button-unstyled):hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

/* events.json hero + video sections use scheme-5 (already near-black); just make
   their links/buttons coral and headings the display face so they read on-brand */
.shopify-section:has(.page-width-content) ~ .shopify-section .button:not(.button-secondary):not(.button-unstyled),
.shopify-section .hero-block .button:not(.button-secondary):not(.button-unstyled) {
  background: var(--croma-coral) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700 !important;
}


/* =========================================================================
   4b. CONTACT FORM block (blocks/contact-form.liquid → snippets/contact-form.liquid)
   Off-brand found: the form block defaults to scheme-1 (white inputs / black text),
   submit was a stock white button. Inputs read --color-input-* and --color-primary.
   Scope: .contact-form (the block wrapper).
   ========================================================================= */
.contact-form {
  --color-input-background: var(--croma-navy2);
  --color-input-text: var(--croma-text);
  --color-input-text-rgb: 244 247 251;
  --color-input-border: var(--croma-line2);
  --color-input-hover-background: var(--croma-surface);
  --color-primary: var(--croma-coral);
  --color-primary-hover: var(--croma-coral-hi);
  --color-border: var(--croma-line2);
  --style-border-radius-inputs: 10px;
}
.contact-form .contact-form__input,
.contact-form .contact-form__input--textarea {
  background-color: var(--croma-navy2) !important;
  color: var(--croma-text) !important;
  border: 1px solid var(--croma-line2) !important;
  border-radius: 10px !important;
}
.contact-form .contact-form__input::placeholder { color: var(--croma-muted) !important; }
.contact-form .contact-form__input:focus,
.contact-form .contact-form__input:focus-visible {
  border-color: var(--croma-blue) !important;
  outline: none !important;
}
/* submit → coral */
.contact-form .button {
  background: var(--croma-coral) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px -16px rgba(242, 77, 81, .7);
  transition: filter .18s ease, transform .18s ease;
}
.contact-form .button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.contact-form .button:focus-visible {
  outline: 2px solid var(--croma-blue) !important;
  outline-offset: 3px;
}
.contact-form .contact-form__success { color: var(--croma-green) !important; }
.contact-form .contact-form__error { color: var(--croma-coral) !important; }


/* =========================================================================
   4c. SHOPIFY POLICY pages (/policies/*) — Shopify-hosted .shopify-policy layout.
   These bypass page.json (own container) but inherit the storefront's scheme-1
   body bg (navy2). Headings render dark-red + RTE links stock. Brand the title +
   RTE links. Scope: .shopify-policy__container.
   ========================================================================= */
.shopify-policy__container .shopify-policy__title :is(h1, h2) {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif !important;
  color: var(--croma-text) !important;
}
.shopify-policy__container .rte { color: var(--croma-text); line-height: 1.7; }
.shopify-policy__container .rte :is(h1, h2, h3, h4) {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif;
  color: var(--croma-text);
}
.shopify-policy__container .rte a { color: var(--croma-blue); text-underline-offset: 3px; }
.shopify-policy__container .rte a:hover { color: var(--croma-coral-hi); }


/* =========================================================================
   4d. SHARED CONTENT PROSE — policy (/policies/*), pages (.page-width-content)
   and articles (.blog-post-content) RTE harmonized so body size, line-height,
   reading measure, paragraph/list spacing + heading scale all MATCH.
   ========================================================================= */
.shopify-policy__container .rte,
.page-width-content .rte,
.blog-post-content .rte {
  font-family: var(--font-body--family, 'Montserrat'), sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--croma-text);
  max-width: 72ch;
}
.shopify-policy__container .rte p,
.page-width-content .rte p,
.blog-post-content .rte p { margin: 0 0 1em; }
.shopify-policy__container .rte :is(h2, h3, h4),
.page-width-content .rte :is(h2, h3, h4),
.blog-post-content .rte :is(h2, h3, h4) {
  line-height: 1.25 !important;
  margin: 1.6em 0 .5em !important;
}
.shopify-policy__container .rte h2,
.page-width-content .rte h2,
.blog-post-content .rte h2 { font-size: 26px !important; }
.shopify-policy__container .rte h3,
.page-width-content .rte h3,
.blog-post-content .rte h3 { font-size: 20px !important; }
.shopify-policy__container .rte h4,
.page-width-content .rte h4,
.blog-post-content .rte h4 { font-size: 17px !important; }
.shopify-policy__container .rte :is(ul, ol),
.page-width-content .rte :is(ul, ol),
.blog-post-content .rte :is(ul, ol) { margin: 0 0 1em; padding-inline-start: 1.4em; }
.shopify-policy__container .rte li,
.page-width-content .rte li,
.blog-post-content .rte li { margin-bottom: .4em; }


/* =========================================================================
   5. LIST-COLLECTIONS  (/collections) — templates/list-collections.json →
   sections/main-collection-list.liquid
   Off-brand found: outer section = scheme-1 (dark-red "Shop by collection"
   heading, light borders). Cards use inherit_color_scheme:false + scheme-6
   (transparent bg, BLACK --color-foreground-heading → title invisible on dark /
   imageless cards). placement on_image.
   Scope: .ui-test-collection-list (section schema class) + .collection-card.
   ========================================================================= */
.shopify-section.ui-test-collection-list > .section-background,
.shopify-section.ui-test-collection-list .section {
  --color-background: var(--croma-navy);
  --color-background-rgb: 15 20 27;
  --color-foreground: var(--croma-text);
  --color-foreground-rgb: 244 247 251;
  --color-foreground-heading: var(--croma-text);
  --color-foreground-heading-rgb: 244 247 251;
  --color-primary: var(--croma-coral);
  --color-primary-hover: var(--croma-coral-hi);
  --color-border: var(--croma-line2);
  --color-border-rgb: 255 255 255;
}
/* section heading "Shop by collection" — display face */
.ui-test-collection-list .text-block :is(h1, h2, h3) {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif !important;
  color: var(--croma-text) !important;
}
/* fix the scheme-6 cards: black heading → white; give the card a dark base so
   imageless / letterboxed cards aren't a void, and a subtle line + hover lift */
.ui-test-collection-list .collection-card {
  --color-foreground: var(--croma-text);
  --color-foreground-rgb: 244 247 251;
  --color-foreground-heading: var(--croma-text);
  --color-foreground-heading-rgb: 244 247 251;
  background-color: var(--croma-navy2);
  border: 1px solid var(--croma-line);
  border-radius: var(--croma-r);
  overflow: hidden;
  /* hover behaviour (sibling-dim + image lift) is owned storewide by croma.css */
}
/* card title — readable on the image with a scrim so on_image text stays legible */
.ui-test-collection-list .collection-card__content {
  background: linear-gradient(to top, rgba(7, 10, 14, .72) 0%, rgba(7, 10, 14, .25) 55%, transparent 100%);
}
.ui-test-collection-list .collection-card__content :is(h1, h2, h3, h4),
.ui-test-collection-list .collection-card__content .collection-title,
.ui-test-collection-list .collection-card__content p {
  color: var(--croma-text) !important;
  font-family: var(--font-accent--family, 'Barlow Condensed'), sans-serif !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* the card's arrow/icon → salmon */
.ui-test-collection-list .collection-card .svg-wrapper,
.ui-test-collection-list .collection-card__content svg { color: var(--croma-blue); }


/* =========================================================================
   6. PASSWORD splash  (templates/password.json → sections/password.liquid)
   (storefront-password page; only shown when the shop is password-protected)
   Off-brand found: scheme empty → scheme-1 (dark-red heading, light borders);
   email-signup input white + stock button; "Enter using password" link used
   --color-primary / --color-primary-hover (cyan on some schemes).
   Scope: .section--password (root class — IS the .section), qualified with
   `.section` so .section.section--password (0,2,0) beats the scheme class;
   plus .password-* + .email-signup within it.
   ========================================================================= */
.shopify-section:has(.section--password) > .section-background,
.section.section--password {
  --color-background: var(--croma-navy);
  --color-background-rgb: 15 20 27;
  --color-foreground: var(--croma-text);
  --color-foreground-rgb: 244 247 251;
  --color-foreground-heading: var(--croma-text);
  --color-foreground-heading-rgb: 244 247 251;
  --color-primary: var(--croma-blue);            /* "enter password" link → salmon */
  --color-primary-hover: var(--croma-coral-hi);
  --color-border: var(--croma-line2);
  --color-border-rgb: 255 255 255;
  --color-input-background: var(--croma-navy2);
  --color-input-text: var(--croma-text);
  --color-input-text-rgb: 244 247 251;
  --color-input-border: var(--croma-line2);
  --style-border-radius-inputs: 10px;
}
.section.section--password { background-color: var(--croma-navy) !important; } /* beat body .color-scheme-N */
/* heading — display face */
.section--password .text-block :is(h1, h2, h3) {
  font-family: var(--font-heading--family, 'Protest Riot'), sans-serif !important;
  color: var(--croma-text) !important;
}
.section--password .text-block p { color: var(--croma-muted) !important; }
/* email-signup input */
.section--password .email-signup__input {
  background-color: var(--croma-navy2) !important;
  color: var(--croma-text) !important;
  border-color: var(--croma-line2) !important;
}
.section--password .email-signup__input::placeholder { color: var(--croma-muted) !important; }
/* email-signup submit → coral */
.section--password .email-signup__button:not(.button-unstyled) {
  background-color: var(--croma-coral) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
/* footer links / "powered by Shopify" / admin link */
.section--password .password-enter__button { color: var(--croma-blue) !important; }
.section--password .password-enter__button:hover { color: var(--croma-coral-hi) !important; }
.section--password .password-enter__powered-by,
.section--password .password-enter__powered-by svg { color: var(--croma-muted) !important; }

/* the password DIALOG (overlay shown after clicking "enter password") also reads
   the section scheme; brand its inputs + submit too */
.password-dialog {
  --color-input-background: var(--croma-navy2);
  --color-input-text: var(--croma-text);
  --color-input-border: var(--croma-line2);
  --color-primary: var(--croma-coral);
  --color-primary-hover: var(--croma-coral-hi);
  background-color: var(--croma-navy);
  color: var(--croma-text);
}
.password-dialog .storefront-password-form input {
  background-color: var(--croma-navy2) !important;
  color: var(--croma-text) !important;
  border-color: var(--croma-line2) !important;
}
.password-dialog .password-dialog__submit-button .button,
.password-dialog .password-dialog__submit-button button {
  background: var(--croma-coral) !important;
  color: #fff !important;
  border: none !important;
}