/* =========================================================
   PAPA YES: loaded after store.css (see src/lib/brandKit.ts)
   Rosa mexicano for actions, marigold for Papa, turquoise
   touches and papel picado on a warm cream paper. --purple/--lime/--coral still come from
   the theme settings; this sets the tones around them.
   ========================================================= */
:root{
  --purple-2:#BF0A6C; --ink:#231420;
  --paper:#FFF6EA; --lilac:#FFF0F6; --lilac-bd:#F6D7E5; --line:#F0E3D3; --line-2:#DECBB4;
  --muted:#6B5A62; --muted-lt:#E9C9D8;
  --sun:#FFB627; --sun-soft:#FFE7B0; --turq:#0FA3A3;
  --radius:16px; --radius-sm:10px;
  --shadow:0 12px 30px rgba(35,20,32,.12);
  --shadow-sm:0 2px 10px rgba(35,20,32,.07);
  --font-display:"Bricolage Grotesque", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1,h2,h3,h4{ letter-spacing:-.025em; }

/* word mark: Papa's face + PAPA YES */
.brand{ gap:10px; font-weight:800; letter-spacing:-.01em; text-transform:uppercase; color:var(--ink); }
.brand-mark{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; }
.brand-name{ white-space:nowrap; }

/* friendly, rounded buttons */
.btn{ border-radius:999px; }
.btn-lg{ box-shadow:0 6px 0 rgba(35,20,32,.12); }
.btn-lime.btn-lg:active{ transform:translateY(2px); box-shadow:0 3px 0 rgba(35,20,32,.12); }

/* ===== home hero ===== */
.py-hero{ position:relative; background:radial-gradient(1200px 520px at 85% 35%, var(--sun-soft) 0, rgba(255,231,176,0) 60%), var(--paper); overflow:hidden; }
/* papel picado strung across the top */
.py-hero::before{ content:""; position:absolute; left:0; right:0; top:0; height:56px; background:url(picado.svg) repeat-x 0 0 / auto 56px; pointer-events:none; }
.py-hero .wrap{ padding-top:84px; }
.py-hero .wrap{ grid-template-columns:1.05fr .95fr; }
.py-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.py-ask{ position:relative; display:inline-block; color:var(--purple); }
.py-ask::after{ content:""; position:absolute; left:-2px; right:-4px; bottom:.06em; height:.28em; background:var(--sun); border-radius:6px; z-index:-1; }
.py-hero h1{ position:relative; z-index:0; }
.py-papa-sm{ display:none; }
.py-art{ position:relative; display:flex; justify-content:center; }
.py-papa{ width:100%; max-width:440px; height:auto; filter:drop-shadow(0 18px 30px rgba(35,20,32,.14)); }
.py-float{ position:absolute; width:150px; padding:12px; aspect-ratio:1/1; border-radius:18px; box-shadow:var(--shadow); }
.py-float-0{ left:0; top:44%; transform:rotate(-5deg); }
.py-float-1{ right:-8px; bottom:0; transform:rotate(4deg); }
.py-float:hover{ transform:rotate(0) scale(1.03); }

@media (max-width:1000px){
  .py-hero .wrap{ grid-template-columns:1fr; }
  .py-art{ display:none; }
  .py-papa-sm{ display:block; width:132px; height:auto; flex:0 0 132px; margin-bottom:-6px; }
}
@media (max-width:640px){
  .py-hero .wrap{ padding:56px 16px 30px; gap:0; }
  .py-hero::before{ height:40px; background-size:auto 40px; }
  .py-papa-sm{ width:104px; flex-basis:104px; }
  .py-hero .hero-copy h1{ font-size:clamp(32px,9.6vw,44px); }
  .py-hero .lead{ font-size:16.5px; margin:14px 0 20px; }
}
@media (max-width:760px){
  .brand{ font-size:19px; }
  .brand-mark{ width:30px; height:30px; flex-basis:30px; }
}
@media (prefers-reduced-motion: reduce){ .py-float{ transition:none; } }