/** Shopify CDN: Minification failed

Line 139:48 Expected ":"

**/
/* ==========================================================================
   SquishFX — Design tokens (ported literally from Claude Design project
   a8458fb5-60b7-49ff-bc2d-69768b92c2e7 — tokens/colors.css, fonts.css,
   typography.css, spacing.css, radii.css, shadows.css). Do not reinvent
   these values — this file is a direct port. See sqx-motion.css for the
   motion tokens (tokens/motion.css) and keyframes.
   ========================================================================== */

/* ---- Fonts (tokens/fonts.css) ------------------------------------------
   Updated 8.28.26 per design-spec-8.28.26.md TYPE section: display font is
   Unbounded (Google Fonts, 700/800), body font is General Sans (Fontshare
   CDN, 400/500/600/700). Baloo 2 stays loaded below only because it remains
   one of the selectable --hfont alternates (see settings.header_font /
   layout/theme.liquid); Plus Jakarta Sans is dropped — nothing in the theme
   references it once --font-body switches to General Sans. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@700;800&family=Baloo+2:wght@500;600;700;800&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* ---- Color: Brand pop (tokens/colors.css) ---- */
  --lime-500: #cafc05;
  --lime-400: #d9fd47;
  --lime-600: #b0dd00;
  --lime-100: #f3ffb8;

  /* ---- Color: Cool Revival ---- */
  --teal-500: #00d596;  --teal-400: #2ee5ad; --teal-600: #00b07c; --teal-100: #c5fced;
  --sky-500:  #00aeff;  --sky-400:  #4cc6ff; --sky-600:  #0090e0; --sky-100:  #d3f0ff;
  --cyan-500: #00ffff;  --cyan-100: #d6ffff;
  --mint-500: #00de94;  --mint-100: #c9f8e6;
  --spring-500: #00ff52; --spring-100: #ccffd9;

  /* ---- Color: Lavender (calm secondary/decorative) ----
     --lavender-200 added for the site-wide trust-icon standardization
     (client: "one consistent accent color throughout the trust icons...
     purple is probably the best option"). --lavender-100 (#efe9fb) reads
     as almost-white once sized down to a 40px circle, so it doesn't read
     as "purple" at a glance — --lavender-200 is one step more saturated,
     still soft/pale enough for a calm circle fill, but clearly purple.
     See --sqx-icon-bg / --sqx-icon-fg below for the paired glyph color
     and its contrast ratio against this value.

     UPDATED 8.28.26 per design-spec-8.28.26.md: owner collapsed the
     --lavender-100/--lavender-200 family (#efe9fb / #e3d5fa) into one
     exact value, #f1edfa. --lavender-200 now aliases --lavender-100
     rather than carrying its own separate hex. */
  --lavender-500: #9d86e9; --lavender-400: #b7a6ef; --lavender-600: #6f58c9; --lavender-100: #f1edfa;
  --lavender-200: var(--lavender-100);

  /* ---- Color: Ink / neutrals ---- */
  /* --ink-900 UPDATED 8.28.26 per design-spec-8.28.26.md: was #0a2621, now
     #22312d (owner's exact spec value for all primary text, dark badges,
     email "join" bg, active filter pill bg, icon strokes, selected
     swatch/thumb border). */
  --ink-900: #22312d;
  --ink-800: #123830;
  --ink-700: #274b43;
  --ink-600: #456b62;
  --ink-500: #6a8b82;
  --ink-400: #93aca4;
  --ink-300: #c3d6d1;
  --ink-200: #dfeae7;
  --ink-100: #eef4f2;
  --paper:   #ffffff;
  --off-white: #f1f7f6;

  /* ---- Color: Semantic ---- */
  --success-500: #00c27a;  --success-100: #cdf5e5;
  --warning-500: #ffc24b;  --warning-100: #fff1d2;
  --danger-500:  #ff5c8a;  --danger-100:  #ffe0ea;
  --info-500:    #00aeff;  --info-100:    #d3f0ff;

  /* ---- Color: Semantic aliases ---- */
  --brand:            var(--lime-500);
  --brand-ink:        var(--ink-900);
  --brand-secondary:  var(--sky-500);
  --brand-tertiary:   var(--teal-500);
  --accent-select:    var(--lime-500);

  --bg-app:      var(--off-white);
  --bg-canvas:   var(--paper);
  --surface-card:   var(--paper);
  --surface-sunken: var(--ink-100);
  --surface-lime:   var(--lime-100);
  --surface-teal:   var(--teal-100);
  --surface-sky:    var(--sky-100);
  --surface-lavender: var(--lavender-100);

  /* ---- Color: SquishFX site-wide additions ----
     --sqx-surface-purple: soft pale lavender/purple section-background tint.
     Aliased to the SAME token (--surface-lavender / --lavender-100 /
     #f1edfa as of 8.28.26) the email-signup section's "stay in the loop"
     band already uses (see .sqx-loop in sqx-email-signup.css) — reusing
     rather than inventing a near-duplicate purple, per an existing
     --lavender-* family.

     --sqx-green-500: the site-wide primary-button green (replaces lime
     everywhere except the product-card "Add to bag" button, which stays
     lime — see layout/theme.liquid). RE-POINTED per client feedback
     ("change this back to the lighter color green we are using
     throughout") from --teal-600 (#00b07c, read as a muted/sage green)
     to --teal-500 (#00d596) — the brighter, lighter shade one step up in
     the SAME Cool Revival teal family, already the theme's designated
     --brand-tertiary token, so it's a color already established/used
     elsewhere rather than a new invention. Still used for the "Dupes,
     decoded" pill badge color referenced in the client's design.
     --glow-green mirrors the --glow-lime/--glow-sky/--glow-teal pattern,
     rebuilt from the new teal-500 RGB (0,213,150) to match.

     --sqx-icon-bg / --sqx-icon-fg: the standardized trust-icon-circle
     treatment (client: one consistent purple accent, dark icon inside for
     contrast — replacing the old per-item sky/lime/teal/mint rotation).
     Every trust icon circle across the homepage (sqx-trust section, the
     sqx-shop-by-store store cards) reads these two tokens instead of a
     per-item tone class. --sqx-icon-fg on --sqx-icon-bg measures ~11:1
     contrast (#22312d on #f1edfa as of the 8.28.26 token update) —
     comfortably passes WCAG AA/AAA.

     --sqx-section-tint: the ONE soft background tint reused by every
     "punctuation" section on the homepage (currently sqx-trust and
     sqx-shop-by-store) as part of the noise-reduction pass — client asked
     for "at most one or two very subtle tinted sections for rhythm, not a
     different tint per section," so this is deliberately a single shared
     token rather than a bespoke gradient per section. */
  --sqx-surface-purple: var(--surface-lavender);
  --sqx-green-500: var(--teal-500);
  --sqx-icon-bg: var(--lavender-200);
  --sqx-icon-fg: var(--ink-900);
  --sqx-section-tint: color-mix(in srgb, var(--lavender-100) 55%, var(--paper) 45%);

  /* ---- Color: SquishFX 8.28.26 token-foundation additions ----
     Added straight from design-spec-8.28.26.md COLORS. Named/prefixed
     --sqx- to match the site-wide-addition convention above rather than
     folding into the ported --ink-*/--lavender-* scales, since the spec
     gives each of these one exact literal value rather than a tonal
     family. */
  --sqx-bg-warm:        #f1efeb; /* legacy warm html-bg value — NO LONGER used as the home/cart body bg as of 8.29.26 polish pass I (owner: page body should read pure white); kept only in case another section still references it directly. */
  --sqx-fill-soft:      #f6f4f0; /* inactive filter pills, close-btn circles, ISO card bg, qty track, avatar fallback */
  --sqx-border-input:   #e4e0d7; /* 1.5px inputs/steppers + 2px FAQ cards (hover: var(--ink-300) #c3d6d1) */
  --sqx-divider:        #edeae3; /* 1px dividers / footer top border */

  --sqx-text-secondary:      #66786f; /* secondary body text */
  --sqx-text-muted:          #8a978f; /* muted / captions */
  --sqx-text-footer:         #b3bcb5; /* footer fine print */
  --sqx-text-lavender-sub:   #7a748c; /* subtext inside lavender-bg sections */
  --sqx-text-on-lime:        #4a5a1f; /* text set directly on lime bg */

  --sqx-swatch-pink-lemonade:   #ff8ac2;
  --sqx-swatch-blue-raspberry:  #5ab8ff;
  --sqx-swatch-key-lime:        #9ae06b;
  --sqx-swatch-grape-soda:      #b48ce8;
  --sqx-swatch-coral:           #ff5c8a;
  --sqx-swatch-teal:            #00d596; /* == --teal-500, aliased for the swatch-name callsite */

  --sqx-shadow-quick-add: 0 2px 8px rgba(0,0,0,0.12); /* the ONE shadow flat-design keeps — see MOTION/RADII notes in design-spec-8.28.26.md */
  --sqx-tracking-heading: 0.02em; /* heading letter-spacing per spec (distinct from --tracking-tight/-caps below) */

  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-secondary:var(--ink-600);
  --text-muted:    var(--ink-500);
  --text-placeholder: var(--ink-400);
  --text-on-brand: var(--ink-900);
  --text-inverse:  var(--paper);

  --border-subtle: var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong: var(--ink-600);

  --focus-ring: var(--sky-500);
  --star: #3E63DD;

  --link:       var(--sky-600);
  --link-hover: var(--ink-900);

  /* ---- Typography (tokens/typography.css) ----
     UPDATED 8.28.26 per design-spec-8.28.26.md TYPE section.
     --hfont is the settable heading-font variable backing the theme's
     "headerFont" option (settings.header_font, wired in layout/theme.liquid)
     — Unbounded by default, with Bricolage Grotesque / Clash Display /
     Baloo 2 as the documented alternates. --font-display now reads --hfont
     instead of naming a font directly, so switching the setting recolors
     every h1–h6 (see the base element wiring at the bottom of this file)
     without touching this token. */
  --hfont: 'Unbounded', system-ui, -apple-system, sans-serif;
  --font-display: var(--hfont);
  --font-body:    'General Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'General Sans', system-ui, sans-serif;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --text-6xl: 5.5rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;
  --tracking-caps: 0.10em;

  /* ---- Spacing (tokens/spacing.css) — 4px base ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* ---- Radii (tokens/radii.css) ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* ---- Shadows (tokens/shadows.css) ---- */
  --shadow-xs: 0 1px 2px rgba(10,50,42,0.06);
  --shadow-sm: 0 2px 8px rgba(10,50,42,0.08);
  --shadow-md: 0 8px 22px rgba(10,50,42,0.10);
  --shadow-lg: 0 18px 44px rgba(10,50,42,0.12);
  --shadow-xl: 0 30px 70px rgba(10,50,42,0.16);

  --glow-lime: 0 8px 20px rgba(160,220,10,0.42);
  --glow-sky:  0 8px 20px rgba(0,174,255,0.38);
  --glow-teal: 0 8px 20px rgba(0,213,150,0.36);
  --glow-green: 0 8px 20px rgba(0,213,150,0.40);

  --ring-focus: 0 0 0 3px rgba(0,174,255,0.30);
  --ring-error: 0 0 0 3px rgba(255,92,138,0.28);

  --inset-press: inset 0 3px 6px rgba(10,50,42,0.14);
}

/* Base element wiring so the ported fonts/colors are visibly active without
   waiting on full section templates. */

/* Safety net against horizontal page overflow on narrow viewports (bug-fix
   pass, 8.29.26). No section-level root cause was found to be leaking
   width at 390px in an accurate viewport measurement (Playwright, real
   device-metrics emulation) — every template measured exactly
   scrollWidth === innerWidth with zero overflow. Kept anyway as a
   defensive belt-and-suspenders rule per owner instruction: if any
   future section (image, full-bleed breakout, etc.) ever pushes wider
   than the viewport, this clips it instead of shifting the header's
   bag/hamburger off-canvas. */
html, body {
  overflow-x: hidden;
}

body {
  /* UPDATED 8.29.26 polish pass I (owner ruling): page body reads pure
     white behind every home section that doesn't set its own background
     — was var(--bg-app) (#f1f7f6 tinted off-white). Sections that
     explicitly set a lavender background (reviews, halloween) are
     untouched — they paint their own background regardless of this
     value, so this change only affects the plain white gaps. */
  background: var(--paper);
  color: var(--text-body);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  /* UPDATED 8.28.26: display headings are uppercase with 0.02em tracking
     per design-spec-8.28.26.md TYPE (was --tracking-tight, -0.02em). */
  text-transform: uppercase;
  letter-spacing: var(--sqx-tracking-heading);
  color: var(--text-strong);
}