/** Shopify CDN: Minification failed

Line 19:3 Unexpected "("
Line 24:6 Expected identifier but found "%"
Line 24:17 Unexpected ","
Line 24:47 Unexpected "{"
Line 24:56 Expected ":"
Line 24:63 Expected identifier but found whitespace
Line 25:84 Unterminated string token
Line 30:89 Unterminated string token

**/
/* ==========================================================================
   SM — smooche.com design system (shared tokens + primitives)
   --------------------------------------------------------------------------
   Reverse-engineered 1:1 from https://smooche.com/products/color-changing-foundation
   (mobile 390px, captured 2026-08-02) with the Section Extractor core driven headless.
   Measurements: EXEMPLES FROM OTHER SHOPS/smooche.com-2026-08-02/zones/*/spec.mobile.json
   (1508 elements surveyed across the 13 sections of the page).

   HOW TO USE
   - Tokens only + reusable primitives. Paints nothing on its own.
   - Every value is a CSS custom property so each section overrides it from its own
     {% schema %}, scoped to #shopify-section-{{ section.id }}. Nothing hard-coded.
   - The `sm-` prefix keeps this layer fully isolated from Revive's own CSS and from
     the cart drawer. Never rename the prefix.

   FONT NOTE
   smooche ships `futura-pt` (Adobe Fonts, licensed — we never bundle it). Sections expose
   a Shopify font_picker and assign it to --sm-font-*. The closest face in Shopify's free
   library is **Jost** (a geometric Futura revival); Poppins is the rounder fallback.
   ========================================================================== */

:root {
  /* ---- palette (measured counts in comments) ------------------------------ */
  --sm-text: #151515;           /* 721 nodes — primary text                    */
  --sm-text-strong: #000000;    /* 653 nodes — headings / hard black           */
  --sm-text-muted: #555555;     /* secondary copy                              */
  --sm-text-soft: #777777;
  --sm-pink: #df8096;           /* brand accent: stars, badges, borders, bars   */
  --sm-pink-tint: rgba(223, 128, 150, 0.07); /* selected-card fill             */
  --sm-pink-pale: #fff9fb;      /* section background wash                      */
  --sm-surface: #f7f7f7;        /* cards, feature tiles, media background       */
  --sm-surface-2: #efefef;      /* footer background                            */
  --sm-white: #ffffff;
  --sm-green: #16a34a;          /* "Shipped today"                              */
  --sm-border: rgba(0, 0, 0, 0.08);

  /* ---- typography --------------------------------------------------------- */
  --sm-font-body: inherit;
  --sm-font-heading: inherit;

  --sm-fs-body: 1.6rem;         /* 16px  — 865 nodes */
  --sm-lh-body: 2.5rem;         /* 25px  = 1.5625     */
  --sm-fs-small: 1.2rem;        /* 12px  — 281 nodes  */
  --sm-lh-small: 1.875rem;      /* 18.75px            */
  --sm-fs-mid: 1.44rem;         /* 14.4px             */
  --sm-lh-mid: 2.25rem;         /* 22.5px             */
  --sm-fs-h2: 2.2rem;           /* 22px               */
  --sm-lh-h2: 3.4375rem;        /* 34.375px           */
  --sm-fs-title: 4.4rem;        /* product H1 (mobile) */
  --sm-lh-title: 1.05;

  /* ---- geometry ----------------------------------------------------------- */
  --sm-gutter: 2rem;            /* page side padding */
  --sm-radius-sm: 0.5rem;       /* 5px  */
  --sm-radius: 0.8rem;          /* 8px  — dominant */
  --sm-radius-md: 1rem;         /* 10px */
  --sm-radius-lg: 1.6rem;       /* 16px */
  --sm-radius-pill: 3rem;       /* 30px */

  /* ---- controls ----------------------------------------------------------- */
  --sm-btn-height: 7rem;
  --sm-btn-radius: 0.8rem;
  --sm-btn-bg: #000000;
  --sm-btn-color: #ffffff;
  --sm-btn-fs: 1.6rem;
  --sm-btn-tracking: 0.1em;
}

/* ==========================================================================
   Base
   ========================================================================== */
.sm {
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-body);
  line-height: var(--sm-lh-body);
  color: var(--sm-text);
}
.sm *, .sm *::before, .sm *::after { box-sizing: border-box; }
.sm-wrap { padding-inline: var(--sm-gutter); }
.sm-small { font-size: var(--sm-fs-small); line-height: var(--sm-lh-small); }
.sm-muted { color: var(--sm-text-muted); }
.sm-pink { color: var(--sm-pink); }

.sm-h1 {
  margin: 0;
  font-family: var(--sm-font-heading);
  font-size: var(--sm-fs-title);
  line-height: var(--sm-lh-title);
  font-weight: 700;
  color: var(--sm-text-strong);
}
.sm-h2 {
  margin: 0;
  font-family: var(--sm-font-heading);
  font-size: var(--sm-fs-h2);
  line-height: var(--sm-lh-h2);
  font-weight: 700;
  color: var(--sm-text-strong);
}

/* ==========================================================================
   Primary button — measured: full width, black, ~70px tall, radius 8,
   uppercase, generous tracking.
   ========================================================================== */
.sm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  min-height: var(--sm-btn-height);
  padding: 1.6rem 2.4rem;
  border: 0;
  border-radius: var(--sm-btn-radius);
  background: var(--sm-btn-bg);
  color: var(--sm-btn-color);
  font-family: var(--sm-font-heading);
  font-size: var(--sm-btn-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--sm-btn-tracking);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.sm-btn:hover { opacity: 0.88; }
.sm-btn[aria-disabled='true'], .sm-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Revive's <product-form> calls .loading__spinner unconditionally — it must exist. */
.sm-btn .loading__spinner { width: 1.8rem; height: 1.8rem; display: none; }
.sm-btn.loading .loading__spinner { display: block; }

/* ==========================================================================
   Offer / bundle cards — radio rows: selected = pink border + pink tint fill.
   ========================================================================== */
.sm-offer {
  position: relative;
  display: block;
  padding: 1.8rem 2rem;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  background: var(--sm-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sm-offer + .sm-offer { margin-top: 1.2rem; }
.sm-offer__input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sm-offer__input:checked + .sm-offer__body,
.sm-offer:has(.sm-offer__input:checked) {
  border-color: var(--sm-pink);
  background: var(--sm-pink-tint);
}
.sm-offer__row { display: flex; align-items: center; gap: 1.2rem; }
.sm-offer__radio {
  flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem;
  border: 2px solid var(--sm-pink);
  border-radius: 50%;
  display: grid; place-items: center;
}
.sm-offer__radio::after {
  content: '';
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: var(--sm-pink);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.sm-offer:has(.sm-offer__input:checked) .sm-offer__radio::after { transform: scale(1); }
.sm-offer__title { font-weight: 700; color: var(--sm-text-strong); }
.sm-offer__sub { color: var(--sm-text-muted); }
.sm-offer__price { margin-left: auto; text-align: right; font-weight: 700; }
.sm-offer__compare { color: var(--sm-text-soft); text-decoration: line-through; font-weight: 400; }

/* ==========================================================================
   Badges / pills
   ========================================================================== */
.sm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1.2rem;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-pink);
  color: var(--sm-white);
  font-size: var(--sm-fs-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sm-badge--ghost { background: var(--sm-surface); color: var(--sm-text); }

/* ==========================================================================
   Feature tiles — 2-column grid of grey rounded cards with a pink icon.
   ========================================================================== */
.sm-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.sm-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem;
  border-radius: var(--sm-radius);
  background: var(--sm-surface);
  font-weight: 600;
  line-height: 1.25;
}
.sm-tile__icon { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; object-fit: contain; }

/* ==========================================================================
   Stars
   ========================================================================== */
.sm-stars { display: inline-flex; gap: 0.2rem; color: var(--sm-pink); line-height: 1; }
.sm-stars svg { width: 1em; height: 1em; display: block; fill: currentColor; }

/* ==========================================================================
   Media — square-ish gallery on grey, with a scrollable thumbnail strip.
   ========================================================================== */
.sm-media { position: relative; }
.sm-media__stage {
  border-radius: var(--sm-radius-lg);
  background: var(--sm-surface);
  overflow: hidden;
}
.sm-media__track {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sm-media__track::-webkit-scrollbar { display: none; }
.sm-media__slide { flex: 0 0 100%; scroll-snap-align: center; }
.sm-media__slide img {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--sm-media-ratio, 1 / 1);
  object-fit: cover;
}
.sm-media__thumbs {
  display: flex; gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.sm-media__thumbs::-webkit-scrollbar { display: none; }
.sm-media__thumb {
  flex: 0 0 auto; width: 9rem;
  border: 0; padding: 0; background: var(--sm-surface);
  border-radius: var(--sm-radius-md); overflow: hidden; cursor: pointer;
}
.sm-media__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.sm-media__thumb[aria-current='true'] { outline: 2px solid var(--sm-pink); outline-offset: -2px; }

/* ==========================================================================
   Progress / urgency bar
   ========================================================================== */
.sm-progress {
  height: 0.8rem;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-surface);
  overflow: hidden;
}
.sm-progress__fill { height: 100%; background: var(--sm-pink); border-radius: inherit; }

/* ==========================================================================
   Accordion
   ========================================================================== */
.sm-acc { border-bottom: 1px solid var(--sm-border); }
.sm-acc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  padding-block: 1.8rem;
  font-family: var(--sm-font-heading);
  font-weight: 600;
  color: var(--sm-text-strong);
  cursor: pointer;
  list-style: none;
}
.sm-acc__summary::-webkit-details-marker { display: none; }
.sm-acc__icon { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; transition: transform 0.25s ease; }
.sm-acc[open] .sm-acc__icon { transform: rotate(180deg); }
.sm-acc__panel { padding-bottom: 1.8rem; }
.sm-acc__panel > *:first-child { margin-top: 0; }
.sm-acc__panel > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.sm-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sm-rte > *:first-child { margin-top: 0; }
.sm-rte > *:last-child { margin-bottom: 0; }
.sm-rte a { color: inherit; }