/** Shopify CDN: Minification failed

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

**/
/* =========================================================
   White Mountain Puzzles — Design Tokens
   Drop-in tokens for any WMP page/section.
   Sourced from the WMP Design System bundle.
   ========================================================= */

@font-face {
  font-family: "Mouse Memoirs";
  src: url("{{ 'MouseMemoirs-Regular.woff2' | asset_url }}") format("woff2"),
       url("{{ 'MouseMemoirs-Regular.woff' | asset_url }}") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("{{ 'Avenir-Regular.ttf' | asset_url }}") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("{{ 'Avenir-Black.ttf' | asset_url }}") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand anchors */
  --wmp-blue:        #00539f;
  --wmp-blue-deep:   #043057;
  --wmp-red:         #ef3e42;
  --wmp-yellow:      #ffdb12;
  --wmp-green:       #00b67a;
  --wmp-green-cta:   #2fb457;

  /* Neutrals */
  --wmp-cream:       #fafafa;
  --wmp-cream-warm:  #faf6ee;
  --wmp-paper:       #ffffff;
  --wmp-ink:         #171717;
  --wmp-ink-soft:    #3d4c4f;
  --wmp-muted:       #8a8f93;
  --wmp-rule:        #e5e7eb;
  --wmp-rule-strong: #d9d9d9;

  /* Accents */
  --wmp-star:        #f6a529;
  --wmp-star-bg:     #ebf6f0;

  /* Semantic */
  --color-bg:           var(--wmp-cream);
  --color-bg-elevated:  var(--wmp-paper);
  --color-bg-band:      var(--wmp-blue);
  --color-bg-warm:      var(--wmp-cream-warm);
  --color-fg:           var(--wmp-ink-soft);
  --color-fg-strong:    var(--wmp-ink);
  --color-fg-muted:     var(--wmp-muted);
  --color-fg-link:      var(--wmp-blue);
  --color-fg-heading:   var(--wmp-blue);
  --color-sale:         var(--wmp-red);
  --color-cta:          var(--wmp-blue);
  --color-cta-alt:      var(--wmp-green-cta);
  --color-border:       var(--wmp-rule);

  /* Type */
  --font-display: "Mouse Memoirs", "Bungee", "Impact", sans-serif;
  --font-body:    "Nunito Sans", "Avenir Next", "Avenir",
                  "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-strong:  "Avenir", "Nunito Sans", "Helvetica Neue", system-ui, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  --fs-5xl: 48px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.45;

  --tracking-display: 0.02em;
  --tracking-allcaps: 0.04em;

  /* Radii / shadow / space */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(4, 48, 87, 0.08);
  --shadow-md: 0 2px 8px rgba(4, 48, 87, 0.12);
  --shadow-lg: 0 8px 24px rgba(4, 48, 87, 0.16);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 56px;
  --space-16: 80px;

  --container-max: 1280px;
  --container-pad: 24px;
}

/* Lora (hero serif) + Nunito Sans (body fallback) */
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800;6..12,900&display=swap");

.wmp-eyebrow,
.wmp-caps {
  font-family: var(--font-strong);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-allcaps);
}

.wmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-strong);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-allcaps);
  font-size: var(--fs-base);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, transform 80ms ease;
}
.wmp-btn:active { transform: translateY(1px); }
.wmp-btn--primary { background: var(--color-cta); color: #fff; }
.wmp-btn--primary:hover { background: var(--wmp-blue-deep); color: #fff; }
.wmp-btn--sale { background: var(--color-sale); color: #fff; }
.wmp-btn--sale:hover { background: #c92e32; color: #fff; }
.wmp-btn--cta { background: var(--color-cta-alt); color: #fff; }
.wmp-btn--cta:hover { background: #228d44; color: #fff; }