/* ============================================================
   DOODLES — Tiny Hits of Hope  ·  Phase 1 homepage
   Glossy/vector retro. Ported from the approved design-lab home.
   Products don't exist yet → product slots render as "coming soon".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;700&family=Great+Vibes&family=Lora:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --cotton-candy:#FFB6D9; --bubblegum:#FF6FAE; --hot-pink:#FF3FA4;
  --lavender:#C79BFF; --purple-haze:#A778FF; --pool-blue:#6FD8FF;
  --aqua-glow:#74F5E3; --mint:#B7F0E3; --peach-cream:#FFCAAE;
  --cream:#FFF3E8; --white:#FFFFFF; --holo-silver:#E8E8F5; --ink:#111111;
  --muted:#6B5566;
  --disco:linear-gradient(120deg,#FFFFFF 0%,#FFD6EC 26%,#E0D4FF 52%,#B7F0E3 76%,#FFFFFF 100%);
  --f-script:"Great Vibes",cursive;
  --f-display:"Playfair Display",Georgia,serif;
  --f-body:"Lora",Georgia,serif;
  --f-sticker:"Comfortaa",system-ui,sans-serif;
  --f-ui:"Work Sans",system-ui,sans-serif;
  --maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:var(--hot-pink);text-decoration:none;}
h1,h2,h3{font-family:var(--f-display);margin:0 0 .4em;line-height:1.12;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes shimmer{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}

/* ---------- announcement bar ---------- */
.announce{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  gap:28px;padding:11px 24px;font-family:var(--f-ui);font-size:12.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;position:relative;}
.announce .heart{color:var(--bubblegum);margin-right:8px;}
.announce .free{position:absolute;right:26px;color:var(--bubblegum);font-weight:600;}
@media(max-width:720px){.announce .free{display:none;}}

/* ---------- nav (3-col, centered script logo) ---------- */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:16px 34px;background:#fff;border-bottom:1px solid #F3E4EE;position:sticky;top:0;z-index:200;}
.nav-left,.nav-right{display:flex;align-items:center;gap:26px;font-family:var(--f-ui);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.nav-right{justify-content:flex-end;}
.nav a{color:var(--ink);}
.nav a:hover{color:var(--hot-pink);}
.nav-logo{font-family:var(--f-script);font-size:34px;line-height:1;display:flex;align-items:center;
  gap:8px;color:var(--ink);white-space:nowrap;}
.nav-logo .s1{color:var(--bubblegum);font-size:15px;}
.nav-logo .s2{color:var(--pool-blue);font-size:15px;}
.nav-icons{display:flex;align-items:center;gap:16px;padding-left:6px;font-size:15px;color:var(--ink);}
.nav-icons .cart{position:relative;cursor:pointer;}
.nav-icons .badge{position:absolute;top:-8px;right:-9px;width:17px;height:17px;border-radius:999px;
  background:var(--hot-pink);color:#fff;font-family:var(--f-ui);font-size:10px;font-weight:600;
  display:grid;place-items:center;}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;}
.menu-toggle span{width:26px;height:3px;background:var(--ink);border-radius:3px;transition:.25s;}
.menu-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---------- hero ---------- */
.hero{position:relative;min-height:600px;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(80% 70% at 20% 20%,#FFD6EC 0%,rgba(255,214,236,0) 60%),
    radial-gradient(70% 70% at 82% 22%,#E0D4FF 0%,rgba(224,212,255,0) 62%),
    radial-gradient(80% 80% at 50% 100%,#FFB6D9 0%,rgba(255,182,217,0) 65%),
    linear-gradient(180deg,#DCEBFF 0%,#EED9FF 42%,#FFC9E6 100%);}
.hero-float{position:absolute;top:96px;width:210px;height:300px;animation:floaty 6s ease-in-out infinite;}
.hero-float.left{left:34px;}
.hero-float.right{right:34px;top:120px;width:220px;animation-duration:7s;}
.hero-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:56px 24px 74px;text-align:center;max-width:800px;}
.hero-logo{width:min(560px,74vw);height:auto;mix-blend-mode:multiply;animation:floaty 6.5s ease-in-out infinite;}
.hero-line{font-family:var(--f-sticker);font-weight:700;font-size:clamp(18px,2.4vw,25px);line-height:1.45;
  letter-spacing:.02em;text-transform:uppercase;}
.hero-cta-row{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap;justify-content:center;}
.hero-cta-row .hh{color:var(--hot-pink);font-size:15px;}

/* ---------- buttons (glossy acrylic) ---------- */
.btn{font-family:var(--f-ui);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:12px;
  border:0;border-radius:999px;letter-spacing:.02em;transition:transform .15s ease,box-shadow .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn--pink{color:#fff;padding:17px 40px;font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(180deg,#FF6FAE 0%,#FF3FA4 52%,#E82B8E 100%);
  box-shadow:0 14px 28px rgba(255,63,164,.36),inset 0 3px 8px rgba(255,255,255,.6);}
.btn--pink .sp{color:#fff;}
.btn--ink{color:#fff;background:var(--ink);padding:15px 24px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;}
.btn--ink:hover{background:#2b2b2b;}
.btn--ink .h{color:var(--bubblegum);}

/* ---------- checker divider ---------- */
.checker{background-image:repeating-conic-gradient(var(--ink) 0% 25%,#fff 0% 50%);}
.checker--lg{height:30px;background-size:30px 30px;}
.checker--sm{height:22px;background-size:22px 22px;}

/* ---------- section shells ---------- */
.sec{padding:62px 0 70px;}
.sec-head{font-family:var(--f-display);font-weight:700;}

/* ---------- category doorways ---------- */
.cats{background:linear-gradient(180deg,#FFF7F1,#FFF3E8);}
.cats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:34px;}
.cat{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:var(--ink);padding:8px;
  transition:transform .15s ease;}
.cat:hover{transform:translateY(-3px);color:var(--hot-pink);}
.cat .icon{width:118px;height:118px;}
.cat .t{font-family:var(--f-ui);font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.cat .c{font-family:var(--f-body);font-size:14.5px;line-height:1.55;color:var(--muted);max-width:190px;}
.cat .arw{font-size:17px;color:var(--hot-pink);}

/* glossy palette slot (icon / product placeholder) */
.slot{width:100%;height:100%;border-radius:16px;position:relative;overflow:hidden;
  box-shadow:inset 0 3px 10px rgba(255,255,255,.7),0 10px 22px rgba(199,155,255,.25);
  display:grid;place-items:center;}
.slot.pink{background:linear-gradient(150deg,#FFC9E6,#FF6FAE);}
.slot.lav{background:linear-gradient(150deg,#E7DAFF,#A778FF);}
.slot.blue{background:linear-gradient(150deg,#D6F3FF,#6FD8FF);}
.slot.mint{background:linear-gradient(150deg,#D9FBF1,#74F5E3);}
.slot.peach{background:linear-gradient(150deg,#FFE6D6,#FFCAAE);}
.slot.ghost{background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.55));box-shadow:inset 0 3px 10px rgba(255,255,255,.9);}
.slot .soon{font-family:var(--f-ui);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.78);padding:4px 9px;border-radius:999px;}

/* ---------- featured collections ---------- */
.collections{background:var(--cream);}
.coll-panel{background:linear-gradient(180deg,#FFD9EC 0%,#FFC6E3 100%);border-radius:30px;
  padding:44px 40px 48px;box-shadow:0 20px 44px rgba(255,111,174,.2),inset 0 2px 10px rgba(255,255,255,.7);
  display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:center;}
.coll-intro h2{font-family:var(--f-display);font-size:38px;font-weight:700;line-height:1.08;}
.coll-intro h2 .sp{color:var(--purple-haze);font-size:22px;}
.coll-intro p{font-family:var(--f-body);font-size:16px;color:#6B4A5E;margin:.4rem 0 1.1rem;}
.coll-rail-wrap{position:relative;}
.coll-rail{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;padding:4px 2px 10px;scrollbar-width:none;}
.coll-rail::-webkit-scrollbar{display:none;}
.coll-card{flex:0 0 178px;height:292px;border-radius:20px;padding:16px 14px 18px;display:flex;flex-direction:column;
  justify-content:space-between;align-items:center;cursor:pointer;transition:transform .15s ease;
  box-shadow:0 14px 26px rgba(17,17,17,.14),inset 0 3px 10px rgba(255,255,255,.75);}
.coll-card:hover{transform:translateY(-4px);}
.coll-card .art{width:100%;height:186px;}
.coll-card .art .slot{border-radius:14px;}
.coll-card .t{font-family:var(--f-sticker);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;text-shadow:0 2px 6px rgba(17,17,17,.35);text-align:center;}
.coll-card .sub{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-align:center;margin-top:3px;}
.rail-btn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:999px;border:0;
  background:var(--ink);color:#fff;font-size:14px;cursor:pointer;display:grid;place-items:center;}
.rail-btn:hover{background:var(--hot-pink);}
.rail-btn.prev{left:-32px;} .rail-btn.next{right:-32px;}

/* ---------- becoming (checker bg, sticker tiles) ---------- */
.becoming{background-image:repeating-conic-gradient(var(--ink) 0% 25%,#fff 0% 50%);background-size:44px 44px;padding:42px 0;}
.becoming-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:center;}
.tile{padding:26px 22px;min-height:130px;display:grid;align-items:center;
  box-shadow:0 14px 26px rgba(17,17,17,.24),inset 0 4px 10px rgba(255,255,255,.8);
  font-family:var(--f-sticker);font-weight:700;font-size:16px;line-height:1.5;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);}
.tile.pink{background:linear-gradient(160deg,#fff,#FFB6D9);border-radius:26px;transform:rotate(-2.2deg);}
.tile.lav{background:linear-gradient(160deg,#fff,#E0D4FF);border-radius:26px;transform:rotate(-1.2deg);}
.tile.mint{background:linear-gradient(160deg,#fff,#B7F0E3);border-radius:26px;transform:rotate(2deg);}
.tile.note{background:#fff;border-radius:6px;transform:rotate(1.4deg);border-left:3px solid var(--bubblegum);
  box-shadow:0 14px 26px rgba(17,17,17,.24);font-family:var(--f-body);font-weight:400;font-size:17px;text-transform:none;letter-spacing:0;}
.tile .h{color:var(--hot-pink);}
.tile.barcode{background:var(--cream);border-radius:6px;transform:rotate(-1.6deg);box-shadow:0 14px 26px rgba(17,17,17,.24);
  display:flex;flex-direction:column;gap:10px;justify-content:center;}
.barcode .lbl{font-family:var(--f-ui);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.barcode .bars{height:34px;border-radius:2px;background-image:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 9px);}
.barcode .num{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.12em;color:var(--muted);}

/* ---------- newsletter ---------- */
.news{background:linear-gradient(180deg,#EFE2FF 0%,#F7ECFF 100%);padding:62px 0 66px;}
.news-grid{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center;}
.news h2{font-family:var(--f-display);font-size:30px;font-weight:700;line-height:1.15;text-transform:uppercase;}
.news p{font-family:var(--f-body);font-size:15.5px;color:#5E4A66;}
.news-form{display:flex;flex-direction:column;gap:18px;}
.news-input{display:flex;max-width:620px;border-radius:999px;overflow:hidden;border:2px solid var(--ink);background:#fff;
  box-shadow:0 14px 28px rgba(167,120,255,.24);}
.news-input input{flex:1;border:0;outline:0;padding:18px 24px;font-family:var(--f-body);font-size:16px;background:transparent;color:var(--ink);}
.news-input button{border:0;background:var(--ink);color:#fff;font-family:var(--f-ui);font-size:13px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;padding:0 46px;cursor:pointer;}
.news-input button:hover{background:var(--hot-pink);}
.prefs{display:flex;gap:30px;flex-wrap:wrap;}
.prefs label{display:flex;align-items:center;gap:10px;font-family:var(--f-body);font-size:15px;color:#3E2F44;cursor:pointer;}
.prefs input{width:17px;height:17px;accent-color:var(--hot-pink);cursor:pointer;}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#fff;padding:46px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1fr auto 1.1fr auto;gap:44px;align-items:start;}
.footer-logo{font-family:var(--f-script);font-size:46px;line-height:1;}
.footer-logo .s{color:var(--bubblegum);font-size:18px;}
.footer-col{display:flex;flex-direction:column;gap:9px;font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;}
.footer-col a{color:#fff;}
.footer-col a:hover{color:var(--bubblegum);}
.footer-mission{font-family:var(--f-sticker);font-weight:500;font-size:14.5px;line-height:1.75;letter-spacing:.06em;text-transform:uppercase;text-align:center;}
.footer-social{display:flex;flex-direction:column;gap:14px;}
.footer-social .h{font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;}
.footer-social .links{display:flex;gap:18px;font-family:var(--f-ui);font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
.footer-social .links a{color:var(--bubblegum);}
.footer-social .links a:hover{color:var(--lavender);}
.footer-bottom{max-width:var(--maxw);margin:30px auto 0;padding:0 34px;font-family:var(--f-ui);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#8A8A8A;text-align:center;}

/* ---------- forms: honeypot + status message ---------- */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;}
.form-message{font-family:var(--f-ui);font-size:.95rem;font-weight:600;border-radius:14px;max-height:0;padding:0 1rem;overflow:hidden;transition:max-height .25s ease,padding .25s ease;}
.form-message.success{background:#E9FBF3;color:#0d7a52;border:2px solid var(--aqua-glow);padding:.8rem 1rem;max-height:140px;}
.form-message.error{background:#FFE9F1;color:#c02a63;border:2px solid var(--bubblegum);padding:.8rem 1rem;max-height:140px;}

/* ---------- a11y ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px;}
  .coll-panel{grid-template-columns:1fr;}
}
@media(max-width:860px){
  .wrap{padding:0 20px;}
  .nav{padding:14px 20px;}
  .nav-left,.nav-right{display:none;}
  .nav{grid-template-columns:auto 1fr auto;}
  .nav-logo{font-size:28px;justify-self:start;}
  .menu-toggle{display:flex;justify-self:end;}
  .mobile-drawer{position:fixed;inset:0 0 0 auto;width:min(82vw,320px);background:var(--cream);z-index:300;
    transform:translateX(100%);transition:transform .3s ease;padding:84px 28px;display:flex;flex-direction:column;gap:1.3rem;
    box-shadow:-12px 0 40px rgba(0,0,0,.16);}
  .mobile-drawer.open{transform:none;}
  .mobile-drawer a{font-family:var(--f-ui);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-size:15px;}
  .hero-float{display:none;}
  .hero-line{font-size:20px;}
  .cats-grid{grid-template-columns:repeat(2,1fr);gap:24px;}
  .becoming-grid{grid-template-columns:1fr;}
  .tile{transform:none!important;}
  .news-grid{grid-template-columns:1fr;gap:24px;}
  .footer-grid{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .footer-mission{order:-1;}
}
.mobile-drawer{display:none;}
@media(max-width:860px){.mobile-drawer{display:flex;}}