/* ==========================================================================
   Ferrands Playful UI  —  v1.0.0
   Namespace: .ffp-   •   Loaded on every front-end page (header/footer use it)
   Inert wherever .ffp- classes are absent, so non-playful pages are unaffected.
   Reverse: rename ferrands-playful-ui.php to .php.disabled.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Contrast notes (Appendix A), verified ratios against the paired background:
     white on --ffp-pink      5.6:1  PASS normal text
     cacao on --ffp-cyan      6.2:1  PASS
     pink  on --ffp-cream     5.3:1  PASS
     white/cream on cyan      FAILS — never do it; use --ffp-cyan-ink on light instead.
   -------------------------------------------------------------------------- */
:root{
  --ffp-pink:#C80078;         --ffp-pink-deep:#8A0053;   --ffp-pink-darkest:#5E0039;
  --ffp-pink-tint:#FDE7F2;
  --ffp-cyan:#00A0DC;         --ffp-cyan-ink:#0077A8;    --ffp-cyan-tint:#E1F4FC;
  --ffp-cacao:#141414;        --ffp-text:#2A2118;        --ffp-ink-soft:#5C5248;
  --ffp-cream:#FFF8EC;
  --ffp-gold:#F1C859;         --ffp-gold-tint:#FCEFC7;   --ffp-yellow-tint:#FFF4C2;
  --ffp-gold-dark:#8A4A08;

  --ffp-bd:3px;                      /* standard sticker border */
  --ffp-shadow:6px 6px 0 var(--ffp-cacao);
  --ffp-shadow-panel:8px 8px 0 var(--ffp-cacao);
  --ffp-r-card:24px; --ffp-r-flavour:28px; --ffp-r-panel:32px;
  --ffp-ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ffp-content:1200px;              /* header is 1240px, set in the header template */
}

/* --------------------------------------------------------------------------
   2. PAGE BASE  (scoped to .ffp-playful so other pages keep their own look)
   -------------------------------------------------------------------------- */
body.ffp-playful{
  background:var(--ffp-cream);
  color:var(--ffp-text);
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.ffp-playful .ffp-wrap{
  max-width:var(--ffp-content); margin-inline:auto; padding-inline:24px;
}
@media (max-width:767px){ body.ffp-playful .ffp-wrap{ padding-inline:16px; } }

/* Section rhythm: 72–104px desktop, 48–64px mobile (Appendix A, Layout). */
.ffp-section{ padding-block:clamp(72px,7vw,104px); position:relative; }
@media (max-width:767px){ .ffp-section{ padding-block:clamp(48px,9vw,64px); } }

/* Sticky-header offset. Measured 2026-10-03: 116px at 1440, 101px at <=1024.
   Xpro only pins after 221px of scroll, so these are the pinned heights. */
.ffp-anchor{ scroll-margin-top:132px; }
@media (max-width:1024px){ .ffp-anchor{ scroll-margin-top:117px; } }

/* --------------------------------------------------------------------------
   3. HEADLINE TREATMENTS
   Offsets drop ~30% below 767px so the extrusion does not swamp small type.
   -------------------------------------------------------------------------- */
.ffp-pop{ color:var(--ffp-pink);
  text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,2px 2px 0 #fff,
    -2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,3px 4px 0 var(--ffp-pink-deep),5px 6px 0 var(--ffp-pink-deep); }
.ffp-puff{ color:var(--ffp-cream);
  text-shadow:3px 0 0 var(--ffp-pink-deep),-3px 0 0 var(--ffp-pink-deep),0 3px 0 var(--ffp-pink-deep),
    0 -3px 0 var(--ffp-pink-deep),2px 2px 0 var(--ffp-pink-deep),-2px -2px 0 var(--ffp-pink-deep),
    2px -2px 0 var(--ffp-pink-deep),-2px 2px 0 var(--ffp-pink-deep),
    4px 6px 0 var(--ffp-pink-darkest),6px 8px 0 var(--ffp-pink-darkest); }
.ffp-ink{ color:var(--ffp-cacao); text-shadow:3px 3px 0 var(--ffp-cream),6px 6px 0 var(--ffp-pink); }
@media (max-width:767px){
  .ffp-pop{ text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,
    2px 3px 0 var(--ffp-pink-deep),3px 4px 0 var(--ffp-pink-deep); }
  .ffp-puff{ text-shadow:2px 0 0 var(--ffp-pink-deep),-2px 0 0 var(--ffp-pink-deep),
    0 2px 0 var(--ffp-pink-deep),0 -2px 0 var(--ffp-pink-deep),
    3px 4px 0 var(--ffp-pink-darkest),4px 6px 0 var(--ffp-pink-darkest); }
  .ffp-ink{ text-shadow:2px 2px 0 var(--ffp-cream),4px 4px 0 var(--ffp-pink); }
}

/* Type scale: desktop -> tablet <=1024 -> phone <=767 (Appendix A). */
.ffp-h1{ font:900 clamp(44px,5.3vw,76px)/1.04 "Nunito",sans-serif; margin:0 0 .35em; }
.ffp-h2{ font:900 clamp(36px,4.4vw,64px)/1.06 "Nunito",sans-serif; margin:0 0 .4em; }
.ffp-h3{ font:900 clamp(20px,1.7vw,22px)/1.2 "Nunito",sans-serif; margin:0; }
.ffp-body{ font:400 clamp(16px,1.3vw,20px)/1.6 "Nunito",sans-serif; }

/* --------------------------------------------------------------------------
   4. STICKER CARD
   -------------------------------------------------------------------------- */
.ffp-sticker{
  background:#fff; border:var(--ffp-bd) solid var(--ffp-cacao);
  border-radius:var(--ffp-r-card); box-shadow:var(--ffp-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ffp-sticker--panel{ border-radius:var(--ffp-r-panel); box-shadow:var(--ffp-shadow-panel); }
.ffp-tilt-l{ transform:rotate(-1.4deg); }
.ffp-tilt-r{ transform:rotate(1.4deg); }

@media (hover:hover) and (pointer:fine){
  .ffp-sticker:hover{ transform:translate(-3px,-3px) rotate(0deg); box-shadow:9px 9px 0 var(--ffp-cacao); }
  .ffp-sticker--panel:hover{ transform:translate(-3px,-3px) rotate(0deg); box-shadow:11px 11px 0 var(--ffp-cacao); }
}
/* Phones: flatter shadow, no tilt — tilted cards cost horizontal room at 390px. */
@media (max-width:767px){
  .ffp-sticker{ box-shadow:4px 4px 0 var(--ffp-cacao); }
  .ffp-tilt-l,.ffp-tilt-r{ transform:none; }
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.ffp-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px;
  border:var(--ffp-bd) solid var(--ffp-cacao); box-shadow:0 5px 0 var(--ffp-cacao);
  font:900 clamp(16px,1.2vw,17px)/1 "Nunito",sans-serif; text-decoration:none;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.ffp-btn--pink{ background:var(--ffp-pink); color:#fff; }        /* 5.6:1 */
.ffp-btn--cream{ background:var(--ffp-cream); color:var(--ffp-cacao); }
.ffp-btn--on-dark{ background:var(--ffp-pink); color:#fff;
  border-color:var(--ffp-cream); box-shadow:0 5px 0 var(--ffp-cream); }
.ffp-btn:hover{ transform:translateY(2px); box-shadow:0 3px 0 var(--ffp-cacao); }
.ffp-btn--on-dark:hover{ box-shadow:0 3px 0 var(--ffp-cream); }
.ffp-btn:active{ transform:translateY(5px); box-shadow:none; }
.ffp-btn__arrow{ width:1em; height:1em; flex:none; stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* --------------------------------------------------------------------------
   6. EYEBROWS
   -------------------------------------------------------------------------- */
.ffp-eyebrow{ font:400 clamp(26px,2.2vw,30px)/1 "Kaushan Script",cursive; color:var(--ffp-pink); }
.ffp-eyebrow--on-cream{ color:var(--ffp-cyan-ink); }
.ffp-eyebrow-sticker{
  display:inline-block; background:var(--ffp-cream);
  border:var(--ffp-bd) solid var(--ffp-cacao); border-radius:999px;
  box-shadow:4px 4px 0 var(--ffp-cacao); padding:4px 20px 8px;
  font:400 26px/1 "Kaushan Script",cursive; color:var(--ffp-pink); transform:rotate(-3deg);
}

/* --------------------------------------------------------------------------
   7. FLAVOUR CARD (16 oz)  +  the scoop swap
   New class names (.ffp-swap*) so ferrands-16oz-scoop-hover.php's page-289 rules,
   which stay live until the Phase 4 sign-off, cannot fight this card.
   -------------------------------------------------------------------------- */
.ffp-card{ border-radius:var(--ffp-r-flavour); padding:18px 18px 22px; text-align:center; }

/* The image box doubles as the crossfade stage, and the tint plate is a ::before. That means
   the Elementor loop template needs only containers and core image widgets carrying .ffp-
   classes — no extra markup element that the agency could delete by accident. */
.ffp-card__box{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; margin-bottom:14px; }
.ffp-card__box::before{
  content:""; position:absolute; left:10%; top:10%; width:80%; height:80%; border-radius:50%;
  border:var(--ffp-bd) solid var(--ffp-cacao);
  transition:background-color .25s ease, transform .3s var(--ffp-ease-pop);
}
/* Plate tints cycle by position so a row never repeats a tint. */
.ffp-card:nth-child(4n+1) .ffp-card__box::before{ background:var(--ffp-cyan-tint); }
.ffp-card:nth-child(4n+2) .ffp-card__box::before{ background:var(--ffp-pink-tint); }
.ffp-card:nth-child(4n+3) .ffp-card__box::before{ background:var(--ffp-gold-tint); }
.ffp-card:nth-child(4n+4) .ffp-card__box::before{ background:var(--ffp-yellow-tint); }

/* Both layers occupy the same grid cell. These selectors match either a bare <img> (style
   guide) or Elementor's wrapping .elementor-element div (loop template), so one rule serves both. */
.ffp-swap{ display:grid; place-items:center; }
.ffp-swap__closed,.ffp-swap__scoops{
  grid-area:1/1; position:relative; z-index:1; width:78%; margin:0;
  transition:opacity .28s ease, transform .35s var(--ffp-ease-pop);
}
.ffp-swap__closed img,.ffp-swap__scoops img{
  display:block; width:100%; height:auto; max-height:100%; object-fit:contain;
}
.ffp-swap__scoops{ opacity:0; }

@media (hover:hover) and (pointer:fine){
  .ffp-card:hover .ffp-card__box::before{ background:var(--ffp-pink); transform:scale(1.05); }
  .ffp-card:hover .ffp-swap__closed{ opacity:0; transform:scale(1.08) rotate(-5deg); }
  .ffp-card:hover .ffp-swap__scoops{ opacity:1; transform:scale(1.08) rotate(-5deg); }
  /* A card with no scoops photo must not fade its tub to nothing. */
  .ffp-card:not(:has(.ffp-swap__scoops)):hover .ffp-swap__closed{ opacity:1; }
}
/* Touch devices get no swap: there is no hover to undo it. */
@media (hover:none){ .ffp-swap__scoops{ display:none; } }

/* --------------------------------------------------------------------------
   8. GOLD RIBBON
   The dark middle stops are what hold white text at >=4.5:1. Do not lighten them.
   -------------------------------------------------------------------------- */
.ffp-ribbon{
  display:inline-flex; align-items:center; justify-content:center; min-width:150px;
  padding:7px 22px 8px; border:2px solid var(--ffp-cacao); border-radius:10px 20px 10px 20px;
  background:linear-gradient(180deg,#F1C859 0%,#C08524 24%,#9A560C 62%,#7B3D01 100%);
  color:#fff; font:900 18px/1.2 "Nunito",sans-serif; letter-spacing:.02em;
  text-shadow:0 1px 0 #4A2400;
}

/* --------------------------------------------------------------------------
   9. SMALL TYPE PARTS
   -------------------------------------------------------------------------- */
.ffp-special{ font:400 32px/1 "Alex Brush",cursive; color:var(--ffp-pink); }
.ffp-fr{ font:italic 500 18px/1.3 "Playfair Display",serif; color:var(--ffp-ink-soft); }
.ffp-pill{
  display:inline-block; background:var(--ffp-cream); border:2px solid var(--ffp-cacao);
  border-radius:999px; padding:4px 12px; font:800 13px/1.3 "Nunito",sans-serif; color:var(--ffp-cacao);
}

/* --------------------------------------------------------------------------
   10. CHIPS
   -------------------------------------------------------------------------- */
.ffp-chip{
  display:inline-flex; align-items:center; gap:8px; background:#fff;
  border:2px solid var(--ffp-cacao); border-radius:999px; box-shadow:0 3px 0 var(--ffp-cacao);
  padding:9px 16px; font:800 15px/1.2 "Nunito",sans-serif; color:var(--ffp-text);
}
.ffp-chip--also{ background:var(--ffp-gold-tint); border:2px dashed var(--ffp-gold-dark);
  color:#5A3000; font-size:14px; box-shadow:none; }
.ffp-chip .ffp-fr{ font-size:15px; }
.ffp-chips{ display:flex; flex-wrap:wrap; gap:10px; }

/* --------------------------------------------------------------------------
   11. SIZE CARD (Products sections)
   -------------------------------------------------------------------------- */
.ffp-sizecard{ width:340px; max-width:100%; padding:20px; text-align:center; }
.ffp-sizecard__box{ aspect-ratio:1/1; display:grid; place-items:center; position:relative; }
.ffp-sizecard__plate{ position:absolute; inset:8%; width:84%; height:84%; border-radius:50%;
  border:var(--ffp-bd) solid var(--ffp-cacao); }
.ffp-sizecard__img{ position:relative; z-index:1; width:64%; object-fit:contain; }
@media (max-width:767px){ .ffp-sizecard{ width:100%; max-width:420px; margin-inline:auto; } }

/* --------------------------------------------------------------------------
   12. SHOP-BY-SIZE PANELS (Homepage)
   -------------------------------------------------------------------------- */
.ffp-panel{ position:relative; min-height:560px; padding:24px; border-radius:var(--ffp-r-panel);
  border:var(--ffp-bd) solid var(--ffp-cacao); box-shadow:var(--ffp-shadow-panel);
  overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
.ffp-panel--pink{ background:var(--ffp-pink); }
.ffp-panel--cyan{ background:var(--ffp-cyan); }
.ffp-panel--cacao{ background:var(--ffp-cacao); }
.ffp-panel__stage{ position:absolute; left:0; right:0; top:40px; height:300px;
  display:grid; place-items:center; }
.ffp-panel__stage img{ position:absolute; max-height:100%; width:auto;
  filter:drop-shadow(6px 8px 0 rgba(20,20,20,.25)); transition:transform .3s var(--ffp-ease-pop); }
.ffp-panel__stage img:nth-child(1){ transform:rotate(-6deg) translateX(-14%); }
.ffp-panel__stage img:nth-child(2){ transform:rotate(5deg) translateX(14%); }
@media (hover:hover) and (pointer:fine){
  .ffp-panel:hover .ffp-panel__stage img:nth-child(1){ transform:rotate(-11deg) translate(-14%,-12px); }
  .ffp-panel:hover .ffp-panel__stage img:nth-child(2){ transform:rotate(10deg) translate(14%,-12px); }
}
.ffp-panel__label{ position:relative; z-index:2; background:var(--ffp-cream);
  border:var(--ffp-bd) solid var(--ffp-cacao); border-radius:var(--ffp-r-card); padding:16px 18px; text-align:center; }
.ffp-panel__group{ font:400 26px/1 "Kaushan Script",cursive; color:var(--ffp-pink); }
.ffp-panel__sizes{ font:900 28px/1.15 "Nunito",sans-serif; color:var(--ffp-cacao); margin:4px 0 8px; }

/* --------------------------------------------------------------------------
   13. TEXTURES — one decorative layer per section, switch off with .ffp-no-decor
   -------------------------------------------------------------------------- */
.ffp-decor{ position:absolute; inset:0; pointer-events:none; }
.ffp-no-decor .ffp-decor{ display:none; }
.ffp-sunburst::before{ content:""; position:absolute; left:50%; top:46%; width:220%; aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.12) 0deg 9deg, rgba(255,255,255,0) 9deg 18deg); }
.ffp-halftone::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.16) 2px, transparent 2.6px) 0 0/24px 24px; }

/* Sprinkles: capsules 20–28px long, 7–9px thick. Decorative, aria-hidden in markup. */
.ffp-sprinkle{ position:absolute; border-radius:9px; width:24px; height:8px; }
.ffp-sprinkle--pink{ background:var(--ffp-pink); }
.ffp-sprinkle--cyan{ background:var(--ffp-cyan); }
.ffp-sprinkle--gold{ background:var(--ffp-gold); }
.ffp-sprinkle--cacao{ background:var(--ffp-cacao); }
.ffp-sprinkle--cream{ background:var(--ffp-cream); }
@media (max-width:767px){ .ffp-sprinkle:nth-of-type(n+5){ display:none; } }

/* --------------------------------------------------------------------------
   14. SCALLOPED FOOTER EDGE
   -------------------------------------------------------------------------- */
.ffp-scallop-top{ position:relative; }
.ffp-scallop-top::before{ content:""; position:absolute; left:0; right:0; top:-24px; height:24px;
  background:radial-gradient(circle at 24px 24px, var(--ffp-cacao) 23.5px, transparent 24px) 0 0/48px 24px repeat-x; }

/* --------------------------------------------------------------------------
   15. SEAL  (Our Story teaser)
   -------------------------------------------------------------------------- */
.ffp-seal{ width:340px; max-width:100%; aspect-ratio:1; position:relative; }
.ffp-seal__ring{ animation:ffp-spin 48s linear infinite; transform-origin:50% 50%; }
@keyframes ffp-spin{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------------------
   16. MARQUEE RIBBON
   -------------------------------------------------------------------------- */
.ffp-marquee{ background:var(--ffp-cyan); border-bottom:var(--ffp-bd) solid var(--ffp-cacao);
  overflow:hidden; }
.ffp-marquee__track{ display:flex; width:max-content; animation:ffp-marquee 40s linear infinite; }
.ffp-marquee:hover .ffp-marquee__track,
.ffp-marquee:focus-within .ffp-marquee__track{ animation-play-state:paused; }
.ffp-marquee__item{ display:inline-flex; align-items:center; gap:14px; padding:9px 14px;
  font:800 15px/1.2 "Nunito",sans-serif; color:var(--ffp-cacao); white-space:nowrap; } /* 6.2:1 */
.ffp-marquee__dot{ width:10px; height:10px; border-radius:50%; background:var(--ffp-cream);
  border:2px solid var(--ffp-cacao); flex:none; }
.ffp-marquee__dot--pink{ background:var(--ffp-pink); }
@keyframes ffp-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --------------------------------------------------------------------------
   17. SIZE FILTER BAR  (built in Phase 4; styling lives here)
   Sits under the pinned header: 116px at 1440, 101px at <=1024 (measured).
   -------------------------------------------------------------------------- */
.ffp-filter{ position:sticky; top:116px; z-index:20; background:var(--ffp-cream);
  border-top:var(--ffp-bd) solid var(--ffp-cacao); border-bottom:var(--ffp-bd) solid var(--ffp-cacao); }
@media (max-width:1024px){ .ffp-filter{ top:101px; } }
.ffp-filter__row{ display:flex; align-items:center; gap:10px; padding:12px 0; }
.ffp-filter__chip{ font:800 15px/1 "Nunito",sans-serif; background:#fff; color:var(--ffp-text);
  border:2px solid var(--ffp-cacao); border-radius:999px; padding:0 16px;
  min-height:44px; min-width:44px; cursor:pointer; }  /* 44px = WCAG 2.5.5 target */
.ffp-filter__chip[aria-pressed="true"]{ background:var(--ffp-pink); color:#fff; }
.ffp-filter__count{ opacity:.75; font-weight:700; margin-left:6px; }
@media (max-width:767px){
  .ffp-filter__row{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .ffp-filter__row::-webkit-scrollbar{ display:none; }
}

/* --------------------------------------------------------------------------
   18. FOCUS  — 3px solid outline, 3px offset; cream version on pink/dark
   -------------------------------------------------------------------------- */
body.ffp-playful :is(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--ffp-cacao); outline-offset:3px; border-radius:4px;
}
body.ffp-playful :is(.ffp-panel,.ffp-btn--on-dark,.ffp-footer) :is(a,button):focus-visible,
body.ffp-playful .ffp-btn--pink:focus-visible{
  outline-color:var(--ffp-cream);
}

/* --------------------------------------------------------------------------
   19. REDUCED MOTION — everything in Appendix A's motion table goes still
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body.ffp-playful *,
  body.ffp-playful *::before,
  body.ffp-playful *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .ffp-marquee__track{ animation:none; width:100%; justify-content:center; flex-wrap:wrap; }
  .ffp-seal__ring{ animation:none; }
  .ffp-sticker:hover,.ffp-panel:hover .ffp-panel__stage img{ transform:none; }
  .ffp-card:hover .ffp-swap__closed,.ffp-card:hover .ffp-swap__scoops{ transform:none; }
}

/* --------------------------------------------------------------------------
   20. GRID COLLAPSE  (Appendix A, Layout)
   -------------------------------------------------------------------------- */
.ffp-grid{ display:grid; gap:28px; }
.ffp-grid--4{ grid-template-columns:repeat(4,1fr); }   /* value strip, favourites, stats */
.ffp-grid--3{ grid-template-columns:repeat(3,1fr); }   /* panels */
.ffp-grid--5{ grid-template-columns:repeat(5,1fr); }   /* beliefs */
.ffp-grid--2{ grid-template-columns:repeat(2,1fr); }   /* find / stock */
@media (max-width:1024px){
  .ffp-grid--4,.ffp-grid--5,.ffp-grid--2{ grid-template-columns:repeat(2,1fr); }
  .ffp-grid--3{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .ffp-grid--5,.ffp-grid--2{ grid-template-columns:1fr; }   /* beliefs 1, find/stock 1 */
  .ffp-grid--4{ grid-template-columns:repeat(2,1fr); }      /* favourites + stats stay 2 */
}
@media (max-width:359px){ .ffp-grid--4{ grid-template-columns:1fr; } }