/* ============================================================
   fophop — "Playbook" unified design system
   Synthesis of three source explorations:
   • Toybox Pop (neo-brutalist energy, SVG toys, checker bands)
   • Sky Play   (navy/sky trust palette, compliance content)
   • Editorial  (gift bundles, lookbook blocks, filter tabs)
   Type:  Fredoka (display) + Nunito (body)
   ============================================================ */

:root {
  /* ---- core ink + surfaces ---- */
  --ink:        #1b2a4a;   /* navy — premium + trustworthy */
  --ink-soft:   #33415f;
  --muted:      #5a6a8c;
  --cream:      #fff7ec;   /* warm base */
  --cream-2:    #fff1d9;
  --sky:        #eaf2ff;   /* cool base */
  --sky-deep:   #cfe2ff;
  --paper:      #ffffff;

  /* ---- play palette (shared chroma, varied hue) ---- */
  --cherry:     #e84b3c;   --cherry-dk: #c73a2c;
  --sun:        #ffc93c;
  --teal:       #00b3a4;
  --grass:      #3fa45b;   /* trust / verified */
  --blue:       #3158a8;
  --pink:       #ff90b8;

  /* ---- tint backs for product art ---- */
  --tint-yellow:#fff3d6;
  --tint-teal:  #dff2e4;
  --tint-sky:   #e3ecff;
  --tint-pink:  #ffe3de;

  /* ---- structure ---- */
  --line:       3px solid var(--ink);
  --line-2:     2.5px solid var(--ink);
  --radius:     18px;
  --radius-sm:  12px;
  /* hard offset (Toybox Pop) */
  --pop:        6px 6px 0 var(--ink);
  --pop-sm:     4px 4px 0 var(--ink);
  /* soft drop (Sky Play) */
  --soft:       0 6px 0 rgba(27,42,74,.12);
  --soft-sm:    0 4px 0 rgba(27,42,74,.12);

  --display: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
  --body:    'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; }
:focus-visible { outline: 3px solid var(--cherry); outline-offset: 2px; }

.wrap { width: min(1180px, 92%); margin-inline: auto; }
.display { font-family: var(--display); font-weight: 700; }

/* ---------- signature: checkerboard ribbon ---------- */
.ribbon {
  height: 18px;
  background: repeating-conic-gradient(var(--ink) 0 25%, var(--cherry) 0 50%) 0 0 / 36px 36px;
}
.ribbon--sun { background: repeating-conic-gradient(var(--ink) 0 25%, var(--sun) 0 50%) 0 0 / 36px 36px; }
.ribbon--teal { background: repeating-conic-gradient(var(--ink) 0 25%, var(--teal) 0 50%) 0 0 / 30px 30px; }

/* ---------- signature: logo (o = checker piece) ---------- */
.logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.logo .o {
  display: inline-block;
  width: .60em; height: .60em;
  border-radius: 50%;
  margin: 0 .03em;
  transform: translateY(.02em);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,255,255,.32);
}
.logo .o.red  { background: var(--cherry); }
.logo .o.dark { background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .logo:hover .o.red  { animation: hop .6s ease; }
  .logo:hover .o.dark { animation: hop .6s ease .12s; }
  @keyframes hop { 0%,100%{transform:translateY(.02em)} 40%{transform:translateY(-.40em)} 70%{transform:translateY(0)} }
}

/* ---------- announcement bar ---------- */
.announce {
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 16px;
  letter-spacing: .01em;
}
.announce b { color: var(--sun); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--display); font-weight: 600;
  font-size: 17px;
  border: var(--line);
  border-radius: 999px;
  padding: 13px 28px;
  color: var(--ink);
  background: var(--paper);
  transition: transform .14s ease, box-shadow .14s ease, background .14s;
}
.btn--cherry { background: var(--cherry); color: #fff; }
.btn--sun    { background: var(--sun); }
.btn--ink    { background: var(--ink); color: #fff; }
.btn--big    { font-size: 19px; padding: 16px 34px; }

/* ---------- badges ---------- */
.badge {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--display); font-weight: 600;
  font-size: 12px; letter-spacing: .04em;
  background: var(--sun);
  border: var(--line-2);
  border-radius: 999px;
  padding: 4px 12px;
}
.badge--cherry { background: var(--cherry); color: #fff; }
.badge--grass  { background: var(--grass); color: #fff; }
.badge--teal   { background: var(--teal); color: #fff; }

/* ---------- pill kicker ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--paper);
  border: var(--line-2);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 800; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase;
}
.kicker .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--teal); border: 2px solid var(--ink); }

/* ---------- section heads ---------- */
.sec { padding: clamp(56px, 8vw, 92px) 0; }
.sec-head { margin-bottom: 40px; }
.sec-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.02; }
.sec-head p  { color: var(--muted); font-weight: 700; margin-top: 8px; max-width: 52ch; }
.sec-head--center { text-align: center; }
.sec-head--center p { margin-inline: auto; }
.underline {
  background: linear-gradient(var(--sun), var(--sun)) no-repeat;
  background-size: 100% .26em; background-position: 0 88%;
}

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #c6d2ec; padding: clamp(48px,6vw,68px) 0 28px; font-size: 14px; }
.foot .logo { color: #fff; margin-bottom: 12px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
.foot p { color: #9fb0d2; max-width: 32ch; font-weight: 600; }
.foot h4 { font-family: var(--display); color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 13px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-weight: 600; }
.foot a:hover { color: var(--sun); }
.foot__bottom { border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #8294ba; font-weight: 600; }

@media (max-width: 860px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .foot__grid { grid-template-columns: 1fr; }
}