@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Gochi+Hand&family=Nunito+Sans:opsz,wdth,wght@6..12,75..125,400..900&display=swap');

:root{
  --pink:#F76BBE;
  --yellow:#FAD741;
  --mint:#77D9C1;
  --purple:#7756BE;
  --deep-purple:#5E34B1;
  --peach:#F8A77A;
  --blue:#6BCEFB;
  --raspberry:#DE2B6A;
  --ink:#1A1A1A;
  --white:#FFFFFF;
  --cream:#FFF9F2;
  --lavender:#F2ECFF;
  --line:#E9E0F6;
  --shadow:0 18px 45px rgba(62,35,105,.13);
  --heading:"Adigiana Toybox","Fredoka",system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,sans-serif;
  --hand:"Gochi Hand",cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  background:
    radial-gradient(circle at 10% 20%, rgba(247,107,190,.09), transparent 24rem),
    radial-gradient(circle at 90% 45%, rgba(107,206,251,.10), transparent 26rem),
    var(--cream);
  color:var(--ink);
}
button,input{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.page-shell{overflow:hidden}
.hero{
  height:100svh;
  min-height:650px;
  max-height:900px;
  position:relative;
  background:linear-gradient(135deg,#5E34B1 0%,#7756BE 46%,#6BCEFB 100%);
  color:white;
  isolation:isolate;
}
.hero:before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.18) 1.5px,transparent 1.5px);
  background-size:28px 28px;
  opacity:.35;z-index:-1
}
.hero-orb{position:absolute;border-radius:999px;filter:blur(2px);opacity:.55}
.orb-a{width:320px;height:320px;background:var(--pink);right:-110px;top:-80px}
.orb-b{width:220px;height:220px;background:var(--yellow);left:-90px;bottom:80px}
.hero-inner{
  width:min(1280px,92%);
  margin:auto;
  height:calc(100% - 54px);
  min-height:0;
  display:grid;
  grid-template-columns:1.18fr .82fr;
  align-items:center;
  gap:22px;
  position:relative;
}
.hero-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding-top:0;
  position:relative;
  z-index:2;
}
.brand-logo{
  position:relative;
  width:min(650px,94%);
  margin:0 0 10px 0;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.14))
}
.hero-copy{
  padding-top:0;
  max-width:680px;
  position:relative;
  z-index:2;
  transform:translateY(-8px)
}
.scribble{
  display:inline-block;
  font-family:var(--hand);
  font-size:1.45rem;
  transform:rotate(-2deg);
  margin:0 0 8px 4px;
}
.hero h1,.intro-section h2,.how-it-works h2,.details-section h2,.cart-heading h2{
  font-family:var(--heading);
  margin:0;
  letter-spacing:-.03em;
  line-height:.94
}
.hero h1{font-size:clamp(3.25rem,6.4vw,6.2rem);text-shadow:0 6px 0 rgba(43,20,97,.18)}
.hero h1 span{color:var(--yellow)}
.hero-kicker{
  margin-top:10px;
  font-family:var(--hand);
  font-size:clamp(1.45rem,2.4vw,2.05rem);
  line-height:1;
  color:white;
  transform:rotate(-1deg);
  transform-origin:left center;
}
.hero-copy p{
  font-size:1.14rem;line-height:1.48;max-width:570px;
  margin:14px 0 0;
  font-weight:700;color:rgba(255,255,255,.92)
}
.hero-cta{
  display:inline-flex;margin-top:14px;padding:15px 22px;border-radius:999px;
  background:var(--yellow);color:var(--ink);font-weight:900;text-decoration:none;
  box-shadow:0 7px 0 rgba(57,34,85,.22);transition:.2s ease
}
.hero-cta:hover{transform:translateY(-2px) rotate(-1deg)}
.hero-blob{
  width:min(575px,48vw);
  justify-self:center;
  margin-top:18px;
  transform:translateX(8px);
  filter:drop-shadow(0 30px 30px rgba(29,15,66,.28));
  animation:float 4.6s ease-in-out infinite
}
@keyframes float{50%{transform:translateY(-14px) rotate(2deg)}}
.marquee{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--yellow);color:var(--ink);
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  overflow:hidden;white-space:nowrap;
}
.marquee-track{
  display:flex;
  width:max-content;
  font-family:var(--heading);
  font-weight:900;
  will-change:transform;
  animation:marquee 24s linear infinite;
}
.marquee-set{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:28px;
  padding:12px 14px;
  min-width:max-content;
}
.marquee-track i{font-style:normal;color:var(--raspberry)}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-25%)}
}

main{width:min(1180px,92%);margin:0 auto}
.intro-section{
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;
  padding:88px 0 30px
}
.eyebrow{
  font-size:.8rem;letter-spacing:.15em;font-weight:1000;
  color:var(--deep-purple)
}
.intro-section h2,.how-it-works h2,.details-section h2,.cart-heading h2{
  font-size:clamp(2.5rem,5vw,4.4rem);margin-top:6px
}
.intro-section p{max-width:700px;font-size:1.06rem;line-height:1.65;color:#5c5365}
.mini-badge{
  display:flex;align-items:center;gap:12px;background:white;border:3px solid var(--ink);
  border-radius:24px;padding:12px 16px;box-shadow:7px 7px 0 var(--pink);
  transform:rotate(2deg);font-size:.95rem
}
.mini-badge img{width:62px}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 24px}
.filter-chip{
  border:2px solid var(--ink);background:white;border-radius:999px;
  padding:10px 16px;font-weight:900
}
.filter-chip.active{background:var(--ink);color:white}

.product-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px
}
.product-card{
  background:white;border:3px solid var(--ink);border-radius:28px;overflow:hidden;
  box-shadow:8px 8px 0 rgba(94,52,177,.16);transition:.2s ease;
  display:flex;flex-direction:column
}
.product-card:hover{transform:translateY(-4px) rotate(-.35deg)}
.product-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--lavender)}
.product-media>img{width:100%;height:100%;object-fit:cover}
.placeholder-art{
  height:100%;display:grid;place-items:center;position:relative;overflow:hidden;
  border-bottom:3px solid var(--ink)
}
.placeholder-art:before,.placeholder-art:after{
  content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.34)
}
.placeholder-art:before{width:190px;height:190px;right:-45px;top:-55px}
.placeholder-art:after{width:120px;height:120px;left:-30px;bottom:-35px}
.placeholder-art img{width:140px;z-index:1;filter:drop-shadow(0 12px 14px rgba(0,0,0,.16))}
.placeholder-art span{
  position:absolute;bottom:14px;left:18px;right:18px;
  font-family:var(--heading);font-size:1.65rem;font-weight:900;z-index:2
}
.accent-pink{background:linear-gradient(135deg,#ffd2ec,var(--pink))}
.accent-purple{background:linear-gradient(135deg,#dcd0ff,var(--purple))}
.accent-yellow{background:linear-gradient(135deg,#fff2ac,var(--yellow))}
.accent-blue{background:linear-gradient(135deg,#d9f2ff,var(--blue))}
.accent-mint{background:linear-gradient(135deg,#d7fff5,var(--mint))}
.accent-peach{background:linear-gradient(135deg,#ffe5d5,var(--peach))}
.product-badge,.sold-label{
  position:absolute;top:14px;right:14px;padding:8px 12px;border-radius:999px;
  border:2px solid var(--ink);background:white;font-family:var(--hand);font-size:1rem;
  transform:rotate(3deg);z-index:3
}
.sold-label{left:14px;right:auto;background:var(--ink);color:white}
.product-content{padding:20px}
.product-tagline{
  font-family:var(--hand);font-size:1.25rem;color:var(--raspberry);margin:0 0 2px
}
.product-card h3{
  font-family:var(--heading);font-size:2rem;margin:0 0 6px;letter-spacing:-.03em
}
.product-description{color:#6b6273;line-height:1.5;margin:0 0 14px}
.size-list{display:grid;gap:8px}
.size-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;background:#faf8fc;border:1px solid var(--line);border-radius:16px
}
.size-row>div:first-child{display:flex;gap:8px;align-items:baseline}
.size-row span{color:#6e6479;font-weight:800}
.qty-control,.mini-qty{display:flex;align-items:center;gap:9px}
.qty-control button,.mini-qty button{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:white;
  font-weight:1000;font-size:1.1rem;line-height:1
}
.qty-control button:last-child{background:var(--yellow)}
.qty-control span,.mini-qty span{min-width:20px;text-align:center;color:var(--ink)}
.sold-out{opacity:.58}
.sold-out button{cursor:not-allowed}

.how-it-works{padding:94px 0 72px;text-align:center}
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px
}
.steps article{
  background:white;border:3px solid var(--ink);border-radius:24px;padding:24px;
  box-shadow:7px 7px 0 var(--mint)
}
.steps article:nth-child(2){box-shadow:7px 7px 0 var(--pink)}
.steps article:nth-child(3){box-shadow:7px 7px 0 var(--yellow)}
.steps article>span{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--deep-purple);color:white;font-family:var(--heading);font-size:1.25rem;margin:auto
}
.steps h3{font-family:var(--heading);font-size:1.45rem;margin:12px 0 5px}
.steps p{margin:0;color:#6c6374;line-height:1.5}

.details-section{
  display:grid;grid-template-columns:1fr 1fr;gap:35px;
  background:linear-gradient(135deg,#ffe3f4,#f1ebff 55%,#ddf5ff);
  border:3px solid var(--ink);border-radius:30px;padding:35px;
  box-shadow:9px 9px 0 rgba(26,26,26,.12)
}
.scribble.dark{color:var(--raspberry)}
.details-copy p{line-height:1.6;color:#61586a}
.details-form{display:grid;gap:14px}
.details-form label{font-weight:900}
.details-form input{
  width:100%;margin-top:6px;border:2px solid var(--ink);border-radius:16px;
  padding:14px 15px;background:white;outline:none
}
.details-form input:focus{box-shadow:0 0 0 4px rgba(119,86,190,.15)}

.cart-section{padding:82px 0 120px}
.cart-heading{display:flex;justify-content:space-between;align-items:end;gap:20px}
.text-button{border:0;background:transparent;text-decoration:underline;font-weight:900}
.cart-items{
  background:white;border:3px solid var(--ink);border-radius:28px;padding:18px;
  margin-top:24px;box-shadow:8px 8px 0 rgba(94,52,177,.12)
}
.empty-cart{display:flex;gap:16px;align-items:center;padding:12px}
.empty-cart img{width:78px}
.empty-cart h3{font-family:var(--heading);font-size:1.5rem;margin:0 0 3px}
.empty-cart p{margin:0;color:#6b6273}
.cart-line{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:14px 4px;border-bottom:1px dashed #d9d0e4
}
.cart-line:last-child{border-bottom:0}
.cart-line-copy{display:flex;flex-direction:column}
.cart-line-copy strong{font-family:var(--heading);font-size:1.2rem}
.cart-line-copy span{color:#756b7f}
.cart-line-actions{display:flex;gap:20px;align-items:center}
.cart-summary{
  margin-top:18px;background:var(--ink);color:white;border-radius:28px;padding:24px
}
.cart-summary>div{display:flex;justify-content:space-between;align-items:center}
.grand-total{font-size:1.6rem;margin-top:8px}
.cart-summary p{color:#cfc7d8;font-size:.9rem}
.whatsapp-button{
  width:100%;border:0;border-radius:18px;background:#25D366;color:white;
  padding:16px 18px;font-weight:1000;font-size:1.04rem;
  display:flex;justify-content:space-between;align-items:center;margin-top:14px
}
.whatsapp-button b{font-size:1.5rem}

footer{
  background:var(--deep-purple);color:white;text-align:center;padding:40px 20px 100px
}
footer img{width:min(320px,70vw);margin:auto}
footer p{font-family:var(--hand);font-size:1.2rem;margin-top:10px}

.sticky-cart{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,130%);
  width:min(620px,calc(100% - 24px));z-index:20;transition:.28s ease
}
.sticky-cart.visible{transform:translate(-50%,0)}
.sticky-cart button{
  width:100%;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);
  border-radius:22px;padding:12px 16px;box-shadow:6px 6px 0 var(--ink);
  display:flex;justify-content:space-between;align-items:center;font-weight:1000
}
.sticky-cart button>span{display:flex;flex-direction:column;align-items:flex-start}
.sticky-cart small{font-size:.74rem}
.sticky-cart strong{font-size:1.25rem}
.toast{
  position:fixed;top:18px;left:50%;transform:translate(-50%,-140%);
  background:var(--ink);color:white;padding:11px 16px;border-radius:999px;
  z-index:40;font-weight:900;transition:.22s ease
}
.toast.show{transform:translate(-50%,0)}

@media (max-width:820px){
  .hero{height:auto;min-height:760px;max-height:none}
  .hero-inner{grid-template-columns:1fr;align-content:start;padding-top:30px}
  .hero-left{padding-top:18px}
  .brand-logo{width:min(470px,92vw);margin-bottom:8px}
  .hero-copy{padding-top:0}
  .hero h1{font-size:clamp(3.4rem,16vw,5.4rem)}
  .hero-blob{
    position:absolute;right:-24px;bottom:34px;width:275px;opacity:.93
  }
  .hero-copy p{max-width:520px}
  .intro-section{grid-template-columns:1fr;padding-top:74px}
  .mini-badge{justify-self:start}
  .product-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .details-section{grid-template-columns:1fr;padding:24px}
}
@media (max-width:520px){
  main{width:min(94%,1180px)}
  .hero-inner{width:92%}
  .hero-copy{padding-top:0}
  .hero-copy p{font-size:1rem;max-width:85%}
  .hero-blob{width:235px;right:-38px;bottom:50px}
  .marquee-track{font-size:.92rem}
  .intro-section h2,.how-it-works h2,.details-section h2,.cart-heading h2{font-size:2.65rem}
  .product-card{border-radius:23px}
  .product-content{padding:17px}
  .details-section{border-radius:24px}
  .cart-heading{align-items:flex-start}
  .cart-line{align-items:flex-start}
  .cart-line-actions{flex-direction:column;gap:7px;align-items:flex-end}
}

.optional-label{
  font-weight:700;
  color:#7a7084;
  font-size:.86em;
}

.footer-social{
  margin:18px auto 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.footer-social-label{
  font-family:var(--hand);
  font-size:1.35rem;
  color:var(--yellow);
  transform:rotate(-1deg);
}
.social-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
.social-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:2px solid white;
  background:rgba(255,255,255,.10);
  color:white;
  text-decoration:none;
  font-weight:900;
  transition:.2s ease;
}
.social-links a:hover{
  transform:translateY(-2px);
  background:white;
  color:var(--deep-purple);
}
.social-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:white;
  color:var(--deep-purple);
  font-weight:1000;
  line-height:1;
}

.delivery-section{
  margin-top:72px;
  background:white;
  border:3px solid var(--ink);
  border-radius:30px;
  padding:34px;
  box-shadow:9px 9px 0 var(--yellow);
}
.delivery-heading{
  max-width:760px;
}
.delivery-heading h2{
  font-family:var(--heading);
  font-size:clamp(2.4rem,4.8vw,4rem);
  line-height:.98;
  letter-spacing:-.03em;
  margin:6px 0 10px;
}
.delivery-heading p{
  color:#62596b;
  line-height:1.6;
  margin:0;
}
.delivery-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}
.delivery-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:3px solid var(--ink);
  border-radius:22px;
  padding:18px;
  background:#faf8fc;
  cursor:pointer;
  transition:.18s ease;
}
.delivery-card:hover{
  transform:translateY(-2px);
}
.delivery-card.selected{
  background:linear-gradient(135deg,#fff2ac,var(--yellow));
  box-shadow:6px 6px 0 rgba(26,26,26,.14);
}
.delivery-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.delivery-card-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.delivery-card-copy strong{
  font-family:var(--heading);
  font-size:1.28rem;
  line-height:1.05;
}
.delivery-card-copy small{
  color:#655d6d;
  font-weight:800;
}
.delivery-check{
  width:34px;
  height:34px;
  border:2px solid var(--ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:white;
  opacity:.32;
  font-weight:1000;
}
.delivery-card.selected .delivery-check{
  opacity:1;
  background:var(--mint);
}
.delivery-extra{
  margin-top:18px;
  padding:18px;
  border:2px dashed var(--deep-purple);
  border-radius:20px;
  background:var(--lavender);
}
.delivery-extra[hidden]{
  display:none;
}
.delivery-extra label{
  display:block;
  font-weight:900;
}
.delivery-extra input{
  width:100%;
  margin-top:6px;
  border:2px solid var(--ink);
  border-radius:16px;
  padding:14px 15px;
  background:white;
  outline:none;
}
.delivery-extra p{
  margin:10px 0 0;
  color:#675e70;
  font-size:.92rem;
}
.delivery-summary-line{
  margin-top:8px;
  gap:16px;
}
.delivery-summary-line strong{
  text-align:right;
  font-size:.95rem;
}
@media (max-width:700px){
  .delivery-section{
    padding:24px;
    border-radius:24px;
  }
  .delivery-options{
    grid-template-columns:1fr;
  }
}

.delivery-extra-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.delivery-extra-grid .full-span{
  grid-column:1 / -1;
}
.address-grid{
  align-items:start;
}
.details-form input:required,
.delivery-extra input:required{
  border-color:var(--deep-purple);
}
@media (max-width:900px){
  .delivery-options{
    grid-template-columns:1fr;
  }
}
@media (max-width:650px){
  .delivery-extra-grid{
    grid-template-columns:1fr;
  }
  .delivery-extra-grid .full-span{
    grid-column:auto;
  }
}

.social-links a small{
  font-size:.78rem;
  font-weight:800;
  opacity:.8;
}
@media (max-width:520px){
  .social-links a{
    width:100%;
    max-width:280px;
    justify-content:center;
  }
}

.size-price-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.price-display{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.price-display del{
  color:#8b8193;
  font-size:.9rem;
  font-weight:800;
  text-decoration-thickness:2px;
}
.price-display b{
  color:var(--raspberry);
  font-size:1.12rem;
  font-weight:1000;
}
.price-display em{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--ink);
  border:1.5px solid var(--ink);
  font-size:.72rem;
  font-style:normal;
  font-weight:1000;
  line-height:1;
}

.care-section{
  margin:0 0 72px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:28px;
  align-items:center;
  background:linear-gradient(135deg,#fff3c4 0%,#ffe4f2 48%,#e8f6ff 100%);
  border:3px solid var(--ink);
  border-radius:30px;
  padding:34px;
  box-shadow:9px 9px 0 var(--pink);
}
.care-copy h2{
  font-family:var(--heading);
  font-size:clamp(2.5rem,4.8vw,4.2rem);
  line-height:.98;
  letter-spacing:-.03em;
  margin:6px 0 12px;
}
.care-copy>p{
  margin:0;
  max-width:700px;
  color:#62596b;
  line-height:1.65;
}
.care-tip{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:18px;
  padding:14px 16px;
  border:2px solid var(--ink);
  border-radius:18px;
  background:white;
  max-width:560px;
}
.care-tip strong{
  font-family:var(--heading);
  font-size:1.15rem;
}
.care-tip span{
  color:#655d6d;
  font-weight:700;
}
.care-qr-card{
  justify-self:center;
  text-align:center;
  transform:rotate(1.5deg);
}
.care-qr-frame{
  width:min(260px,60vw);
  aspect-ratio:1;
  padding:14px;
  background:white;
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:8px 8px 0 var(--yellow);
  overflow:hidden;
}
.care-qr-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.care-qr-card .scribble{
  margin-top:14px;
  font-size:1.35rem;
}
@media (max-width:760px){
  .care-section{
    grid-template-columns:1fr;
    padding:24px;
    border-radius:24px;
  }
  .care-qr-card{
    justify-self:center;
  }
}