/** Shopify CDN: Minification failed

Line 460:13 Expected identifier but found whitespace
Line 460:24 Unexpected "0.15s"

**/
/*
  1derWorld Brand System & Design Tokens
  Architect: Claude Opus 5.5 | Builder: Antigravity (Gemini)
  Theme: Crave 16.1.0 Overrides
  Milestone 1 Fix (M1-fix)
*/

/* Self-Hosted Fredoka Typography (Relative URLs, no CDN) */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fredoka-semibold.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fredoka-bold.woff2') format('woff2');
}

:root {
  /* Core Brand Tokens */
  --paper: #FFF8EC;
  --surface: #FFFFFF;
  --ink: #1B1F4B;
  --ink-soft: #4A4F7A;
  --line: #E9DFCB;
  --violet: #5B3FD9;
  --sun: #FFC93C;
  --coral: #FF8A7A;
  --mint: #2EC4A6;
  --sky: #4CB8F5;
  --sale: #C2362A;

  /* Calm Sensory Palette */
  --sage: #A8C3A0;
  --mist: #BFD7EA;
  --oat: #F4EFE6;
  --lav: #CFC6F2;
  --calm-ink: #2F3A33;

  /* Tints */
  --tint-sun: #FFF0C7;
  --tint-violet: #ECE7FF;
  --tint-mint: #DDF6F0;
  --tint-coral: #FFE6E1;

  /* Structural */
  --shadow: #1B1F4B;
  --r: 14px;
  --r-btn: 12px;

  /* Typography Font Stacks */
  --font-heading-family: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --font-body-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --font-calm-family: 'Atkinson Hyperlegible', Verdana, sans-serif;
}

/* Base Body Font Override */
body {
  font-family: var(--font-body-family);
}

/* Headings Font Override */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6,
.heading, .card__heading, .title,
.banner__heading,
.header__heading {
  font-family: var(--font-heading-family) !important;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------
   ANNOUNCEMENT BAR (Header Spec)
   ------------------------------------------------------------- */
.announcement-bar {
  background-color: var(--ink) !important;
  color: #FFF8EC !important;
  border-bottom: none !important;
  width: 100% !important;
}

.announcement-bar__message {
  color: #FFF8EC !important;
  font-family: var(--font-body-family) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

@media screen and (min-width: 750px) {
  .announcement-bar {
    padding: 10px 16px !important;
  }
  .announcement-bar__message {
    font-size: 14px !important;
  }
  .announcement-bar__text-mobile {
    display: none !important;
  }
  .announcement-bar__text-desktop {
    display: inline !important;
  }
}

@media screen and (max-width: 749px) {
  .announcement-bar {
    padding: 8px 12px !important;
  }
  /* Wrap instead of truncating so "COD" is never cut off on narrow phones */
  .announcement-bar__message {
    font-size: 12.5px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .announcement-bar__text-desktop {
    display: none !important;
  }
  .announcement-bar__text-mobile {
    display: inline !important;
  }
}

/* -------------------------------------------------------------
   HEADER & NAVIGATION SPEC (M1-fix Exact Spec)
   ------------------------------------------------------------- */
.section-header {
  position: relative;
  z-index: 20;
}

.header-wrapper {
  border-bottom: 2px solid var(--line) !important;
}

header.header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Base Logo & Link Styles */
.header__heading-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.brand-logo-svg,
.header__heading-logo {
  display: block !important;
  width: 175px !important;
  max-width: 175px !important;
  height: auto !important;
}

/* Base Nav Item Styles (Fredoka 600) */
.header__menu-item {
  font-family: var(--font-heading-family) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  padding: 8px 0 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

.header__menu-item:hover {
  color: var(--violet) !important;
}

.header__active-menu-item {
  color: var(--violet) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--violet) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 6px !important;
}

/* Drawer Menu Items (Mobile / Tablet) */
.menu-drawer__menu-item {
  font-family: var(--font-heading-family) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--ink) !important;
}

/* Icons */
.header__icon {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ink) !important;
}

.header__icon .icon {
  width: 24px !important;
  height: 24px !important;
}

/* Desktop Header (>= 990px) */
@media screen and (min-width: 990px) {
  header.header {
    min-height: 84px !important;
    height: 84px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
  }

  .header--middle-left {
    grid-template-columns: auto 1fr auto !important;
    column-gap: 24px !important;
  }

  /* Hide redundant Home link on desktop (logo already links home) */
  .header__inline-menu .header__nav-item--home {
    display: none !important;
  }

  .header__heading-link {
    width: 175px !important;
    max-width: 175px !important;
    flex-shrink: 0 !important;
  }

  .brand-logo-svg,
  .header__heading-logo {
    width: 175px !important;
    max-width: 175px !important;
  }

  .header__inline-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .list-menu--inline {
    gap: 28px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header__icons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    justify-self: end !important;
  }
}

/* Nav tightness between 990px and 1199px (F5 fix) */
@media screen and (min-width: 990px) and (max-width: 1199px) {
  header.header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .header--middle-left {
    column-gap: 16px !important;
  }

  .list-menu--inline {
    gap: 20px !important;
  }
}

/* Mobile & Tablet Header (<= 989px) */
@media screen and (max-width: 989px) {
  header.header {
    min-height: 64px !important;
    height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .header__heading-link {
    width: 140px !important;
    max-width: 140px !important;
  }

  .brand-logo-svg,
  .header__heading-logo {
    width: 140px !important;
    max-width: 140px !important;
  }
}

/* Cart Count Bubble Spec */
.cart-count-bubble {
  background-color: var(--sun) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 50% !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 6px !important;
  right: 4px !important;
}

/* -------------------------------------------------------------
   ACCESSIBILITY: SKIP TO CONTENT LINK (B4 Fix)
   Only visible on keyboard focus
   ------------------------------------------------------------- */
.skip-to-content-link:not(:focus) {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.skip-to-content-link:focus {
  position: fixed !important;
  top: 15px !important;
  left: 15px !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  z-index: 9999 !important;
  background-color: var(--sun) !important;
  color: var(--ink) !important;
  padding: 10px 20px !important;
  border: 2px solid var(--ink) !important;
  border-radius: var(--r-btn) !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  outline: 3px solid var(--sky) !important;
}

/* -------------------------------------------------------------
   BUTTONS (GEMINI_RULES v2 Spec: Hover, Active, Focus, Reduced Motion)
   ------------------------------------------------------------- */
.button:not(.skip-to-content-link):not(.button--secondary):not(.button--tertiary):not(.button--plain),
.button--primary:not(.skip-to-content-link),
.product-form__submit {
  background-color: var(--sun) !important;
  color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: var(--r-btn) !important;
  box-shadow: 4px 4px 0 var(--shadow) !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.02em !important;
  padding: 12px 28px !important;
  min-height: 48px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out !important;
}

/* Disable Crave default pseudo shadows */
.button:before, 
.button:after,
.shopify-payment-button__button--unbranded:before,
.shopify-payment-button__button--unbranded:after {
  display: none !important;
}

/* Primary Hover: background #FFB703, translate(-2px,-2px), shadow 6px */
@media (hover: hover) and (pointer: fine) {
  .button:not(.skip-to-content-link):not(.button--secondary):not(.button--tertiary):hover,
  .button--primary:not(.skip-to-content-link):hover,
  .product-form__submit:hover {
    background-color: #FFB703 !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--shadow) !important;
  }
}

/* Primary Active: translate(2px,2px), shadow 2px */
.button:not(.skip-to-content-link):not(.button--secondary):not(.button--tertiary):active,
.button--primary:not(.skip-to-content-link):active,
.product-form__submit:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

/* Secondary Button (and Buy It Now on PDP): white with navy border */
.button--secondary,
button.shopify-payment-button__button--unbranded {
  background-color: #FFFFFF !important;
  color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: var(--r-btn) !important;
  box-shadow: 4px 4px 0 var(--shadow) !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  padding: 12px 24px !important;
  min-height: 48px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out !important;
}

@media (hover: hover) and (pointer: fine) {
  .button--secondary:hover,
  button.shopify-payment-button__button--unbranded:hover {
    background-color: var(--violet) !important;
    color: #FFFFFF !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--shadow) !important;
  }
}

.button--secondary:active,
button.shopify-payment-button__button--unbranded:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out !important;
}

/* Secondary Hover: fills Wonder Violet with white text */
@media (hover: hover) and (pointer: fine) {
  .button--secondary:hover {
    background-color: var(--violet) !important;
    color: #FFFFFF !important;
    border-color: var(--violet) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--shadow) !important;
  }
}

.button--secondary:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

/* Ghost / Tertiary Button */
.button--ghost,
.button--tertiary {
  background-color: transparent !important;
  color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: var(--r-btn) !important;
  box-shadow: none !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  min-height: 48px !important;
  transition: all 0.15s ease-out !important;
}

@media (hover: hover) and (pointer: fine) {
  .button--ghost:hover,
  .button--tertiary:hover {
    background-color: var(--paper) !important;
    color: var(--violet) !important;
    border-color: var(--violet) !important;
  }
}

/* Focus-visible: 3px #4CB8F5 outline, 3px offset */
.button:focus-visible,
.product-form__submit:focus-visible,
a.button:focus-visible {
  outline: 3px solid var(--sky) !important;
  outline-offset: 3px !important;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  .button:hover,
  .button:active,
  .button--secondary:hover,
  .button--secondary:active,
  .product-card-wrapper:hover .card {
    transform: none !important;
  }
}

/* Scheme 6 (Calm Sensory Scheme S1) */
.color-scheme-6 .button {
  box-shadow: none !important;
}

/* -------------------------------------------------------------
   PRODUCT CARD REDESIGN (GEMINI_RULES v2 Spec)
   ------------------------------------------------------------- */
.product-card-wrapper {
  position: relative !important;
  height: 100% !important;
}

.product-card-wrapper .card {
  background-color: #FFFFFF !important;
  border: 1.5px solid #E9DFCB !important;
  border-radius: 16px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out !important;
}

/* Desktop Card Hover: lifts translateY(-4px), gains 4px 4px 0 #1B1F4B shadow */
@media (hover: hover) and (pointer: fine) {
  .product-card-wrapper:hover .card {
    transform: translateY(-4px) !important;
    box-shadow: 4px 4px 0 var(--shadow) !important;
    border-color: var(--ink) !important;
  }

  .product-card-wrapper:hover .card__inner img {
    transform: scale(1.04) !important;
  }
}

/* Sun-tint square for product image */
.product-card-wrapper .card__inner {
  background-color: #FFF0C7 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

.product-card-wrapper .card__inner:after {
  display: none !important;
}

.product-card-wrapper .card__media {
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.product-card-wrapper .card__media img {
  object-fit: cover !important;
  border-radius: 8px !important;
  padding: 0 !important;
  transition: transform 180ms ease-out !important;
  width: 100% !important;
  height: 100% !important;
}

/* Sticker Age Badge: top-left sticker, rotated -3deg, 1.5px navy border, 2px shadow */
.card__age-sticker-wrapper {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 2 !important; /* below the sticky header / menu drawer (z-index 3) */
  pointer-events: none !important;
}

.card__age-sticker {
  display: inline-block !important;
  font-family: var(--font-heading-family) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  transform: rotate(-3deg) !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
}

/* Card Content & Heading */
.product-card-wrapper .card__content {
  padding: 12px 4px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
}

.product-card-wrapper .card__information {
  padding: 0 !important;
}

.product-card-wrapper .card__heading {
  margin: 0 0 6px 0 !important;
  line-height: 1.35 !important;
}

.product-card-wrapper .card__heading a {
  font-family: var(--font-body-family), 'Nunito Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
}

.product-card-wrapper .card__heading a:hover {
  color: var(--violet) !important;
}

/* -------------------------------------------------------------
   PRICES (GEMINI_RULES v2 Spec)
   Card: Fredoka 700, 20px, Wonder Violet #5B3FD9
   Sale: Sale Red #C2362A + struck-through MRP #4A4F7A (14px) + Coral Save Pill
   PDP: Fredoka 700, 28px
   ------------------------------------------------------------- */
.price {
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Card Price: 20px Wonder Violet */
.product-card-wrapper .price {
  margin: 4px 0 0 0 !important;
}

.product-card-wrapper .price-item {
  font-family: var(--font-heading-family) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.product-card-wrapper .price:not(.price--on-sale) .price-item--regular {
  color: var(--violet) !important;
}

.product-card-wrapper .price-item--sale {
  color: var(--sale) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.product-card-wrapper .price--on-sale .price-item--regular {
  color: #4A4F7A !important;
  font-size: 14px !important;
  font-family: var(--font-body-family), 'Nunito Sans', sans-serif !important;
  font-weight: 600 !important;
  text-decoration: line-through !important;
  margin-left: 6px !important;
}

/* Coral Save Pill */
.badge--save {
  display: inline-block !important;
  background-color: #FFE6E1 !important;
  color: var(--sale) !important;
  font-family: var(--font-heading-family) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  margin-left: 6px !important;
  border: 1px solid rgba(194, 54, 42, 0.25) !important;
  vertical-align: middle !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}

/* PDP Price: 28px */
.product__info-container .price {
  margin-bottom: 8px !important;
}

.product__info-container .price-item {
  font-family: var(--font-heading-family) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.product__info-container .price:not(.price--on-sale) .price-item--regular {
  color: var(--violet) !important;
}

.product__info-container .price-item--sale {
  color: var(--sale) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

.product__info-container .price--on-sale .price-item--regular {
  color: #4A4F7A !important;
  font-size: 18px !important;
  font-family: var(--font-body-family), 'Nunito Sans', sans-serif !important;
  font-weight: 600 !important;
  text-decoration: line-through !important;
  margin-left: 10px !important;
}

.product__info-container .badge--save {
  font-size: 14px !important;
  padding: 3px 10px !important;
  margin-left: 10px !important;
}

/* Full-width "Add to cart" Quick-Add Button */
.product-card-wrapper .quick-add {
  margin-top: 12px !important;
  width: 100% !important;
}

.product-card-wrapper .quick-add__submit {
  width: 100% !important;
  background-color: var(--sun) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease !important;
}

.product-card-wrapper .quick-add__submit .quick-add__label-desktop {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.product-card-wrapper .quick-add__submit .quick-add__label-mobile {
  display: none !important;
}

@media screen and (max-width: 400px) {
  .product-card-wrapper .quick-add__submit {
    padding: 8px 6px !important;
    font-size: 13px !important;
  }
  .product-card-wrapper .quick-add__submit .quick-add__label-desktop {
    display: none !important;
  }
  .product-card-wrapper .quick-add__submit .quick-add__label-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .product-card-wrapper .quick-add__submit:hover {
    background-color: #FFB703 !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 4px 4px 0 var(--ink) !important;
  }
}

.product-card-wrapper .quick-add__submit:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
}

/* Hide duplicate Crave bottom-left sale badge since we show the price save pill */
.product-card-wrapper .card__badge .badge--bottom-left {
  display: none !important;
}

/* -------------------------------------------------------------
   SECTION TINTS & WAVY EDGE UTILITIES (GEMINI_RULES v2 Spec)
   ------------------------------------------------------------- */
.section-tint-sun {
  background-color: #FFF0C7 !important;
}

.section-tint-mint {
  background-color: #DDF6F0 !important;
}

.section-tint-violet {
  background-color: #ECE7FF !important;
}

.section-tint-coral {
  background-color: #FFE6E1 !important;
}

.section-tint-sky {
  background-color: #E3F3FD !important;
}

.section-tint-cream {
  background-color: #FFF8EC !important;
}

.section-tint-calm {
  background-color: #F4EFE6 !important;
}

/* Wavy Divider Component */
.wavy-divider-container {
  width: 100% !important;
  line-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 2 !important;
}

.wavy-divider-container--flip {
  transform: rotate(180deg) !important;
}

.wavy-divider-svg {
  display: block !important;
  width: 100% !important;
  height: 32px !important;
}

/* General Sticker Badge Utility */
.sticker-badge {
  display: inline-block !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  transform: rotate(-3deg) !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
}


/* -------------------------------------------------------------
   HERO BANNER SPEC (Milestone 2)
   ------------------------------------------------------------- */
.banner {
  background-color: var(--paper);
}

.banner__heading {
  font-family: var(--font-heading-family) !important;
  color: var(--ink) !important;
  line-height: 1.15 !important;
}

.banner__box {
  background-color: var(--paper) !important;
  border-radius: var(--r) !important;
  border: 2px solid var(--line) !important;
}

@media screen and (min-width: 750px) {
  .banner__heading.h1 {
    font-size: 52px !important;
    letter-spacing: -0.02em !important;
  }
  .banner__text p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: var(--ink) !important;
    max-width: 520px !important;
  }
  .banner__box {
    padding: 36px 40px !important;
    max-width: 60rem !important;
  }
}

@media screen and (max-width: 749px) {
  .banner {
    max-height: 70vh !important;
  }
  .banner__media {
    max-height: 35vh !important;
  }
  .banner__heading.h1 {
    font-size: 32px !important;
    letter-spacing: -0.01em !important;
  }
  .banner__text p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--ink) !important;
  }
  .banner__box {
    padding: 24px 20px !important;
    border: none !important;
  }
}

.banner__buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center !important;
  margin-top: 24px !important;
}

/* Primary CTA in Hero (Shop by age) */
.banner__buttons a.button:first-child,
.banner__buttons a.button--primary {
  background-color: var(--sun) !important;
  color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: var(--r-btn) !important;
  box-shadow: 4px 4px 0 var(--shadow) !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  padding: 12px 28px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out !important;
}

@media (hover: hover) and (pointer: fine) {
  .banner__buttons a.button:first-child:hover,
  .banner__buttons a.button--primary:hover {
    background-color: #FFB703 !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--shadow) !important;
  }
}

.banner__buttons a.button:first-child:active,
.banner__buttons a.button--primary:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

/* Secondary CTA in Hero (Find a gift in 30 seconds) */
.banner__buttons a.button--secondary,
.banner__buttons a.button:nth-child(2) {
  background-color: #FFFFFF !important;
  color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: var(--r-btn) !important;
  box-shadow: 4px 4px 0 var(--shadow) !important;
  font-family: var(--font-heading-family) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  padding: 12px 24px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out !important;
}

@media (hover: hover) and (pointer: fine) {
  .banner__buttons a.button--secondary:hover,
  .banner__buttons a.button:nth-child(2):hover {
    background-color: var(--violet) !important;
    color: #FFFFFF !important;
    border-color: var(--violet) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--shadow) !important;
  }
}

.banner__buttons a.button--secondary:active,
.banner__buttons a.button:nth-child(2):active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}