/* ==========================================================================
   Colour pop — preview layer (colorpop-r1, not approved).

   Loaded last, so the whole pass can be compared or removed by dropping one
   <link>. The ground stays dark so the artwork still leads; what changes is
   that the interface stops being grey. Five saturated colours taken from the
   designs themselves (the pink monster, the lilac hoodie, the sneaker blues,
   the lime of "creepy", the gold of the iced-out monkey) mark headings,
   buttons, prices and the range tiles.

   Motion stays calm: hover and focus only, nothing loops on its own.
   ========================================================================== */

:root {
  --pop-pink:   #FF4FA8;
  --pop-violet: #A46BFF;
  --pop-cyan:   #3FE0FF;
  --pop-lime:   #C8FF4A;
  --pop-sun:    #FFC23D;
  --pop-ink:    #1A0613;   /* text on a bright fill; 9:1 or better on all five */

  --pop-grad:      linear-gradient(100deg, var(--pop-pink) 0%, var(--pop-violet) 50%, var(--pop-cyan) 100%);
  --pop-grad-warm: linear-gradient(100deg, var(--pop-pink) 0%, var(--pop-sun) 100%);

  --ground:    #0C0A12;
  --surface:   #15121D;
  --surface-2: #1C1826;
  --surface-3: #262033;
  --line:        rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);
}

/* --- page ground: three soft colour lights.
   background-attachment: fixed is applied only on pointer-fine (non-touch)
   devices. iOS Safari has a long-standing bug where fixed backgrounds on
   body cause white flashes during scroll momentum and break scroll entirely
   inside fixed/sticky containers. Touch devices scroll the gradient with the
   page — still correct colour, none of the jank. */
body {
  background:
    radial-gradient(60vw 50vh at 0% 0%,   rgba(255, 79, 168, 0.13), transparent 70%),
    radial-gradient(55vw 55vh at 100% 35%, rgba(164, 107, 255, 0.12), transparent 70%),
    radial-gradient(60vw 50vh at 20% 100%, rgba(63, 224, 255, 0.10), transparent 70%),
    var(--ground);
}
@media (hover: hover) and (pointer: fine) {
  body { background-attachment: fixed; }
}

/* --- gradient text helper --------------------------------------------------- */
.nav__brand span,
.footer__brand span,
.hero__title em,
.section-head h2 em,
.hero__facts dt {
  background: var(--pop-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- nav ------------------------------------------------------------------- */
.nav {
  background: rgba(12, 10, 18, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
.nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--pop-grad);
  opacity: 0.85;
}
.nav__link:hover { color: var(--pop-pink); }
.nav__link.is-active::after { background: var(--pop-grad); }
.nav__cart {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--pop-grad) border-box;
  border: 1.5px solid transparent;
  border-radius: 999px;
}
.nav__cart-count,
.nav__cart-count[data-empty='true'] { background: var(--pop-pink); color: var(--pop-ink); }

/* --- hero ------------------------------------------------------------------ */
.hero::before {
  top: -25%;
  right: -4%;
  width: min(900px, 90vw);
  background:
    radial-gradient(circle at 40% 40%, rgba(255, 79, 168, 0.32) 0%, transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(63, 224, 255, 0.26) 0%, transparent 55%);
  filter: blur(10px);
}
.hero__eyebrow { color: var(--pop-lime); }
.hero__title em { padding-bottom: 0.12em; }
.hero__title em::after { background: var(--pop-grad-warm); height: 0.06em; border-radius: 99px; }
.hero__facts dd { color: var(--ink-2); }
.hero__art {
  border: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.06),
    0 30px 80px -20px rgba(255, 79, 168, 0.55),
    0 20px 60px -30px rgba(63, 224, 255, 0.6);
}
.hero__art-tag.is-on { border-color: var(--pop-pink); }
.hero__art-tag b { color: var(--pop-lime); }

/* --- buttons --------------------------------------------------------------- */
.btn { border-radius: 999px; transition: transform var(--fast), box-shadow var(--med), background var(--med); }
.btn--primary,
.btn--primary:hover {
  background: var(--pop-grad-warm);
  color: var(--pop-ink);
  box-shadow: 0 10px 30px -10px rgba(255, 79, 168, 0.75);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(255, 79, 168, 0.9); }
.btn--ghost {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--ground), var(--ground)) padding-box,
    var(--pop-grad) border-box;
}
.btn--ghost:hover {
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--pop-grad) border-box;
  transform: translateY(-2px);
}

/* --- section headings: each section gets its own colour -------------------- */
.label { color: var(--pop-cyan); }
#shop .label     { color: var(--pop-lime); }
#drops .label    { color: var(--pop-pink); }
#featured .label { color: var(--pop-sun); }
#the-artist .label { color: var(--pop-violet); }
.section-head h2 { position: relative; padding-bottom: 10px; }
.section-head h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 99px;
  background: var(--pop-grad);
}
#drops .section-head h2::after    { background: var(--pop-grad-warm); }
#featured .section-head h2::after { background: linear-gradient(90deg, var(--pop-sun), var(--pop-lime)); }
.text-link { color: var(--ink); border-color: var(--pop-pink); }
.text-link:hover { color: var(--pop-pink); border-color: var(--pop-pink); }

/* --- range tiles: one colour per range ------------------------------------- */
.tile { --tc: var(--pop-pink); border-radius: 16px; transition: transform var(--med), box-shadow var(--med); }
.tile:nth-child(5n+2) { --tc: var(--pop-cyan); }
.tile:nth-child(5n+3) { --tc: var(--pop-violet); }
.tile:nth-child(5n+4) { --tc: var(--pop-lime); }
.tile:nth-child(5n+5) { --tc: var(--pop-sun); }
.tile {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 55%, transparent),
              0 18px 40px -22px var(--tc) !important;
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--tc);
  z-index: 2;
}
.tile__kind,
.tile__meta { color: var(--tc) !important; }
.tile__name { color: #fff; }
@media (hover: hover) {
  .tile:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 2px var(--tc), 0 26px 50px -18px var(--tc) !important;
  }
}

/* --- product cards --------------------------------------------------------- */
.card { --halo: var(--pop-violet); }
.card__well {
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 34px -20px var(--halo) !important;
}
@media (hover: hover) {
  .card:hover .card__well {
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px var(--halo), 0 24px 48px -16px var(--halo) !important;
  }
}
.card__price { color: var(--pop-lime); font-weight: 600; }
.card__eyebrow { color: var(--ink-2); }
.badge { border-radius: 999px; padding-inline: 10px; font-weight: 600; }
.badge--new { background: var(--pop-pink) !important; color: var(--pop-ink) !important; }

/* --- the art / families panel ---------------------------------------------- */
.art {
  border-radius: 20px;
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(160deg, #1d1530, #120f1b) padding-box,
    var(--pop-grad) border-box !important;
}
.art__copy h2 em { color: var(--pop-violet); }
.art__family { border-radius: 10px; }
.art__family:hover { background: color-mix(in srgb, var(--pop-violet) 18%, var(--surface-2)); }
.art__family:hover b { color: var(--pop-cyan); }

/* --- drop-list signup ------------------------------------------------------ */
.signup {
  border-radius: 20px;
  border: 0 !important;
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(255, 79, 168, 0.35), transparent 60%),
    radial-gradient(80% 140% at 100% 100%, rgba(63, 224, 255, 0.30), transparent 60%),
    var(--surface-2) !important;
}
.signup .label { color: var(--pop-lime); }
.signup__form input { border-radius: 999px; padding-inline: 18px; }

/* --- footer ---------------------------------------------------------------- */
.footer { border-top: 0; position: relative; }
.footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--pop-grad);
}
.footer__col h3 { color: var(--pop-pink); }
.footer a:hover { color: var(--pop-cyan); }

@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover, .btn--ghost:hover, .tile:hover, .card:hover .card__well { transform: none; }
}