/** Shopify CDN: Minification failed

Line 79:0 All "@import" rules must come first

**/
/* ============================================================
   MOCHIOS DESIGN SYSTEM — TOKENS + ANIMATIONS
   Ported from claude.ai/design mochios-design-system project.
   Loaded globally via layout/theme.liquid so every section
   (header, sections, footer) can reference the dc-* tokens.
   ============================================================ */

:root {
  /* --- Primary palette --- */
  --dc-purple-500: #6729bc;
  --dc-purple-accent: #7E4FC9;
  --dc-purple-600: #5A2BA8;
  --dc-purple-700: #4A1F8E;
  --dc-chocolate: #5B2C0F;
  --dc-chocolate-light: #7A431D;
  --dc-white: #FFFFFF;

  /* --- Secondary --- */
  --dc-lavender: #BB99FF;
  --dc-lavender-200: #ece0fa;
  --dc-lavender-100: #F4ECFC;
  --dc-cream: #FBF8F4;
  --dc-cream-sticker: #fff5d6;
  --dc-cream-deep: #F5E6B8;
  --dc-deep-plum: #2A1A52;
  --dc-plum-950: #1A0F2E;
  --dc-silver: #CFCFD4;

  /* --- Candy accents --- */
  --dc-amber: #F5A623;
  --dc-lime: #D6F23C;
  --dc-hot-pink: #FF5CA8;
  --dc-mint: #5BC264;
  --dc-tomato: #E8584E;

  /* --- Ink --- */
  --dc-ink: #1A0F2E;
  --dc-ink-shadow: rgba(26, 15, 46, 0.35);

  /* --- Text --- */
  --dc-text-strong: var(--dc-deep-plum);
  --dc-text-body: #3A2F55;
  --dc-text-muted: #8478A0;
  --dc-text-on-brand: var(--dc-white);

  /* --- Borders + radii --- */
  --dc-border-sticker: 3px;
  --dc-radius-sm: 6px;
  --dc-radius-md: 12px;
  --dc-radius-lg: 24px;
  --dc-radius-xl: 32px;
  --dc-radius-pill: 999px;

  /* --- Sticker shadows --- */
  --dc-shadow-sticker-sm: 3px 4px 0 var(--dc-ink-shadow);
  --dc-shadow-sticker: 5px 7px 0 var(--dc-ink-shadow);
  --dc-shadow-sticker-lg: 6px 8px 0 rgba(26, 15, 46, 0.42);
  --dc-shadow-sticker-press: 1px 2px 0 var(--dc-ink-shadow);

  /* --- Gradients --- */
  --dc-gradient-hero: radial-gradient(120% 120% at 50% 0%, #7B4BE0 0%, #6729bc 55%, #4A1F8E 100%);
  --dc-gradient-purple-glossy: linear-gradient(90deg, #7321bf 0%, #9333EA 25%, #b069f5 50%, #9333EA 75%, #7321bf 100%);
  --dc-gradient-pink: linear-gradient(180deg, #ff8cc4 0%, #FF5CA8 55%, #e84d97 100%);
  --dc-gradient-purple-btn: linear-gradient(180deg, #8A5CF0, #6729bc);

  /* --- Fonts --- */
  --dc-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --dc-font-body: 'Inter', system-ui, sans-serif;
  --dc-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Google fonts — same Bricolage + Inter + JetBrains Mono families as the
   live theme. Loaded once here so the dc-* font stack resolves. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   ANIMATIONS — marquee scroll, floating mochi, sparkle twinkle,
   light sheen sweep. Used by hero + marquee + section decorations.
   ============================================================ */
@keyframes dc-marq      { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes dc-float     { 0%, 100% { transform: translateY(0)   rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--r, 0deg)); } }
@keyframes dc-float2    { 0%, 100% { transform: translateY(0)   rotate(var(--r, 0deg)); } 50% { transform: translateY(-20px) rotate(var(--r, 0deg)); } }
@keyframes dc-bob       { 0%, 100% { transform: translateY(0); }                          50% { transform: translateY(-7px); } }
@keyframes dc-twinkle   { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
@keyframes dc-twinkle2  { 0%, 100% { opacity: 0.7; }  50% { opacity: 0.15; } }
@keyframes dc-sheen     { 0%   { transform: translateX(-130%) rotate(8deg); }
                          100% { transform: translateX(270%)  rotate(8deg); } }

/* ============================================================
   EMPTY-DIV RESTORE
   Dawn's base.css ships a global `div:empty { display:none }` rule
   that hides every childless div on the page. The DC design relies
   on empty divs for decorative backdrops — hero gradient overlays,
   the target-ring disc, dot-pattern overlays, the comparison "winner"
   panel. Restore display for each of them explicitly here so we
   don't have to scatter !important across every section's stylesheet.
   ============================================================ */
.dc-hero-backdrop,
.dc-hero-backdrop__vignette,
.dc-hero-backdrop__sheen,
.dc-hero-backdrop__stars,
.dc-hero-backdrop__sprinkle,
.dc-inside__dots,
.dc-inside__media-ring,
.dc-rv__dots,
.dc-tt__dots,
.dc-bb__dots,
.dc-nu__dots,
.dc-nu__facts-bar,
.dc-nu__facts-bar--thin,
.dc-cmp__winner-bg,
.dc-cmp__spacer,
.dc-af__ring,
.dc-tm__dots,
.dc-jr__dots {
  display: block !important;
}

/* ============================================================
   .mo-hscroll — utility class
   On mobile (≤640px), turns a `display:grid` cards container
   into a snap-scrolling horizontal row. Cards become flex
   children at 62% viewport so ~1.6 show and the next peeks;
   scrollbar is hidden. The print fallback flattens back to
   a 2-col grid so PDF exports don't clip the trailing cards.
   ============================================================ */
@media (max-width: 640px) {
  .mo-hscroll {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .mo-hscroll::-webkit-scrollbar { display: none; }
  .mo-hscroll > * {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
}

@media print {
  .mo-hscroll {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    overflow: visible !important;
    gap: 16px !important;
  }
  .mo-hscroll > * { flex: none !important; width: auto !important; }
}

/* ============================================================
   Flavor-aware PDP scoping
   The buy block sets body[data-active-flavor] when the shopper picks
   a flavor. Any element marked with [data-flavor-scope="<key>"] only
   shows when that flavor is active. Used by the about/nutrition/
   reviews/FAQ sections on /pages/shop to swap content per flavor.
   Space-separated keys are supported (e.g. shared = "chocolate crunch").
   ============================================================ */
[data-flavor-scope] { display: none; }
body[data-active-flavor="chocolate"] [data-flavor-scope~="chocolate"],
body[data-active-flavor="crunch"]    [data-flavor-scope~="crunch"],
body[data-active-flavor="birthday"]  [data-flavor-scope~="birthday"],
body[data-active-flavor="variety"]   [data-flavor-scope~="variety"],
[data-flavor-scope~="all"] {
  display: revert;
}

/* ============================================================
   Mobile section headings — ~50% bigger across the dc system.
   Each section's h2 clamp resolves to its min on phones (since
   the vw mid-range falls below the min). Override here so the
   mobile floor lands much higher and headlines actually dominate
   the screen the way the design intends. The desktop maxes are
   already set on each section and are unaffected by this rule. */
@media (max-width: 749px) {
  .dc-inside__h2,
  .dc-cmp__h2,
  .dc-rv__h2,
  .dc-tt__h2,
  .dc-es__h2,
  .dc-af__h2 {
    font-size: clamp(44px, 13.5vw, 66px) !important;
  }
}