@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════
   VIXI · CAMADA "PLAYFUL" — visual infantil premium (wow)
   Carrega DEPOIS de vixi-shared.css. Só sobrescreve aparência.
   Remover o <link> reverte tudo ao estado anterior.
   ═══════════════════════════════════════════════════════════ */

:root{
  --font-d:'Baloo 2', 'Fredoka', sans-serif;
  --joy-pink:#FF3D8B;
  --joy-pink-dk:#C71E64;
  --joy-purple:#7B4DFF;
  --joy-purple-dk:#5A34C0;
  --joy-mint:#12B5A0;
  --joy-yellow:#FFD43B;
  --joy-sky:#5CC8FF;
  --scallop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 Q30,0 60,40 T120,40 T180,40 T240,40 T300,40 T360,40 T420,40 T480,40 T540,40 T600,40 T660,40 T720,40 T780,40 T840,40 T900,40 T960,40 T1020,40 T1080,40 T1140,40 T1200,40 L1200,40 L0,40 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  --confetti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Ccircle cx='40' cy='55' r='5' fill='%23FFD43B' opacity='.55'/%3E%3Ccircle cx='250' cy='42' r='4' fill='%23FF6FA0' opacity='.5'/%3E%3Ccircle cx='160' cy='120' r='3.5' fill='%235CC8FF' opacity='.55'/%3E%3Ccircle cx='285' cy='215' r='5' fill='%237CE0C0' opacity='.5'/%3E%3Ccircle cx='95' cy='230' r='4' fill='%23B66BFF' opacity='.5'/%3E%3Ccircle cx='205' cy='285' r='3.5' fill='%23FFD43B' opacity='.55'/%3E%3Crect x='120' y='42' width='9' height='9' rx='2' fill='%23FF6FA0' opacity='.45' transform='rotate(28 124 46)'/%3E%3Crect x='28' y='170' width='8' height='8' rx='2' fill='%235CC8FF' opacity='.45' transform='rotate(20 32 174)'/%3E%3Crect x='270' y='130' width='8' height='8' rx='2' fill='%23B66BFF' opacity='.45' transform='rotate(45 274 134)'/%3E%3Crect x='175' y='195' width='7' height='7' rx='2' fill='%2312B5A0' opacity='.4' transform='rotate(15 178 198)'/%3E%3C/svg%3E");
}

/* fundo lúdico + confete sutil em todas as páginas (não mais branco chapado) */
body{
  background-color:#FFF9FC!important;
  background-image:
    var(--confetti),
    radial-gradient(55% 40% at 100% 0%, rgba(146,214,255,.22) 0%, transparent 60%),
    radial-gradient(50% 38% at 0% 22%, rgba(255,224,150,.20) 0%, transparent 60%),
    radial-gradient(60% 45% at 90% 92%, rgba(255,190,224,.20) 0%, transparent 62%)!important;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat!important;
  background-size:320px 320px,auto,auto,auto!important;
  background-position:0 0,center,center,center!important;
  background-attachment:fixed!important}

/* ---------- TÍTULOS mais fofos ---------- */
.hero h1,.sec-head h2,.cat-group-title,.logo-name,.prod-name,.about-text h2,
.news-wrap h2,.ig-bar h3,.promo-card h3{font-family:var(--font-d)!important;letter-spacing:-.6px}

/* ═══════════ HERO — céu de fantasia ═══════════ */
.hero{
  background:
    radial-gradient(90% 60% at 15% 10%, #FFE7A0 0%, transparent 42%),
    radial-gradient(80% 55% at 88% 16%, #B9E9FF 0%, transparent 45%),
    radial-gradient(90% 70% at 82% 96%, #FFC9E4 0%, transparent 50%),
    linear-gradient(180deg,#CDEFFF 0%, #EAD9FF 46%, #FFE1EF 100%)!important;
  overflow:visible;padding-bottom:40px
}
/* esconde os blobs borrados antigos, usa nuvens no lugar */
.hero .blob{display:none}
.hero .hero-bg::before,.hero .hero-bg::after{
  content:"";position:absolute;width:130px;height:46px;background:#fff;border-radius:50px;
  opacity:.9;box-shadow:0 10px 30px rgba(120,80,160,.12);animation:joyDrift 10s ease-in-out infinite}
.hero .hero-bg::before{top:70px;left:6%}
.hero .hero-bg::after{top:130px;right:9%;transform:scale(.78);animation-duration:13s}
@keyframes joyDrift{50%{transform:translateX(24px)}}
/* arco-íris atrás do título */
.hero::before{
  content:"";position:absolute;top:-140px;left:8%;width:440px;height:440px;border-radius:50%;z-index:0;pointer-events:none;
  background:conic-gradient(from 200deg,#FF6FA0,#FFD43B,#7CE0C0,#5CC8FF,#B66BFF,#FF6FA0);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 61%,#000 74%,transparent 75%);
          mask:radial-gradient(circle,transparent 60%,#000 61%,#000 74%,transparent 75%);opacity:.45}
/* borda ondulada embaixo do hero */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:38px;z-index:3;
  background:var(--scallop);background-size:1200px 38px;background-repeat:repeat-x}

.hero-badge{border:none!important;background:#fff!important;color:var(--joy-pink)!important;
  font-family:var(--font-d);font-size:15px;box-shadow:0 8px 22px rgba(242,39,110,.16);animation:joyWiggle 5s ease-in-out infinite}
@keyframes joyWiggle{0%,92%,100%{transform:rotate(-2deg)}96%{transform:rotate(3deg)}}
.hero h1{text-shadow:3px 3px 0 rgba(255,255,255,.6)}
.hero h1 .hi{color:var(--joy-pink)!important}
.hero-sub{color:#6A2A55!important;font-weight:700}

/* ═══════════ BOTÕES 3D chunky ═══════════ */
.btn-main,.hdr-cta,.cat-group-more,.pbuy-btn,.news-form button,.ig-btn,.pc-pink .btn-main,.padd{
  font-family:var(--font-d)!important}
.btn-main{
  background:var(--joy-pink)!important;color:#fff!important;border-radius:20px!important;
  box-shadow:0 7px 0 var(--joy-pink-dk),0 16px 26px rgba(199,30,100,.30)!important;transition:transform .12s,box-shadow .12s!important}
.btn-main:hover{transform:translateY(-3px)!important;box-shadow:0 10px 0 var(--joy-pink-dk),0 20px 30px rgba(199,30,100,.34)!important}
.btn-main:active{transform:translateY(2px)!important;box-shadow:0 3px 0 var(--joy-pink-dk)!important}
.btn-ghost{border:3px solid #fff!important;background:#fff!important;color:var(--joy-purple)!important;
  border-radius:20px!important;box-shadow:0 7px 0 #D9C7FF!important}
.btn-ghost:hover{transform:translateY(-3px)!important;box-shadow:0 10px 0 #D9C7FF!important;color:var(--joy-purple)!important}

.pbuy-btn{background:var(--joy-pink)!important;border-radius:14px!important;padding:11px 14px!important;
  box-shadow:0 4px 0 var(--joy-pink-dk)!important;transition:transform .12s,box-shadow .12s!important}
.pbuy-btn:hover{transform:translateY(-2px)!important;box-shadow:0 6px 0 var(--joy-pink-dk)!important;background:var(--joy-pink)!important}
.pbuy-btn:active{transform:translateY(2px)!important;box-shadow:0 1px 0 var(--joy-pink-dk)!important}

.cat-group-more,.hdr-cta{border-radius:14px!important;box-shadow:0 4px 0 var(--joy-pink-dk)!important;background:var(--joy-pink)!important}
.cat-group-more:hover,.hdr-cta:hover{transform:translateY(-2px)!important;box-shadow:0 6px 0 var(--joy-pink-dk)!important;background:var(--joy-pink)!important}
.news-form button{border-radius:14px!important;box-shadow:0 4px 0 var(--joy-pink-dk)!important;background:var(--joy-pink)!important}

/* ═══════════ CARDS de produto mais fofos ═══════════ */
.prod-card{border-radius:24px!important;box-shadow:0 8px 26px rgba(120,60,140,.10)!important;border:none!important}
.prod-card:hover{transform:translateY(-8px)!important;box-shadow:0 22px 46px rgba(120,60,140,.20)!important}
.pnew{color:var(--joy-pink)!important}
.cat-tile{border-radius:26px!important}
.prod-colecao-tag,.pbadge.off{border-radius:99px!important}

/* ═══════════ ANNOUNCE + HEADER ═══════════ */
.ann{background:linear-gradient(90deg,var(--joy-pink),var(--joy-purple))!important}
.logo-icon{box-shadow:0 6px 0 rgba(199,30,100,.25)!important}
.ibt{border-radius:16px!important}
.ibt:hover{background:var(--joy-pink)!important}

/* ═══════════ PROMISES bar arredondada ═══════════ */
.promises{border-bottom:none!important}
.prom-grid{gap:14px;padding:22px 28px}
.prom-item{border-right:none!important;background:#FFF4F9;border-radius:20px;padding:16px 18px}
.prom-icon{font-size:30px}

/* ═══════════ BALÃO de conteúdo — texto sobre rosinha claro, não sobre o confete ═══════════ */
.section>.wrap{
  background:#FFE3EF;
  border-radius:28px;
  padding:40px 34px;
  box-shadow:0 6px 30px rgba(242,39,110,.08);
  position:relative}
@media(max-width:768px){
  .section>.wrap{padding:26px 18px;border-radius:22px}
}

/* ═══════════ SEÇÕES / FOOTER tons alegres ═══════════ */
.sec-head .eyebrow,.about-text .eyebrow,.news-wrap .eyebrow{color:var(--joy-mint)!important}
.ig-bar,.ig-desc-bubble{background:linear-gradient(120deg,var(--joy-pink),var(--joy-purple))!important}
footer,.footer-sec{background:linear-gradient(180deg,#FFF1F8,#F3E9FF)!important;border-top:none!important}
.wa-float{box-shadow:0 6px 0 #128C7E,0 10px 26px rgba(37,211,102,.45)!important}

/* ═══════════ HEROS INTERNOS → mesmo céu da home ═══════════ */
/* usado por clothes.html, cart.html, conta.html (body .clothes-hero) e colecao.html (body .colpage-hero) */
body .clothes-hero,body .colpage-hero{
  background:
    radial-gradient(90% 70% at 15% 12%, #FFE7A0 0%, transparent 42%),
    radial-gradient(80% 60% at 88% 16%, #B9E9FF 0%, transparent 45%),
    radial-gradient(90% 80% at 82% 96%, #FFC9E4 0%, transparent 50%),
    linear-gradient(180deg,#CDEFFF 0%, #EAD9FF 55%, #FFE1EF 100%)!important;
  overflow:visible!important;color:#3A1030!important}
/* arco-íris (::before) + borda ondulada (::after), substituindo os emojis decorativos */
body .clothes-hero::before,body .colpage-hero::before{
  content:""!important;top:-150px!important;left:50%!important;right:auto!important;
  transform:translateX(-50%)!important;width:420px!important;height:420px!important;
  border-radius:50%!important;font-size:0!important;opacity:.4!important;
  background:conic-gradient(from 200deg,#FF6FA0,#FFD43B,#7CE0C0,#5CC8FF,#B66BFF,#FF6FA0)!important;
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 61%,#000 74%,transparent 75%)!important;
          mask:radial-gradient(circle,transparent 60%,#000 61%,#000 74%,transparent 75%)!important}
body .clothes-hero::after,body .colpage-hero::after{
  content:""!important;left:0!important;right:0!important;bottom:-1px!important;top:auto!important;
  width:auto!important;height:34px!important;font-size:0!important;opacity:1!important;
  background:var(--scallop)!important;background-size:1200px 34px!important;background-repeat:repeat-x!important}
body .clothes-hero h1,body .colpage-hero h1,body .clothes-hero #clothesTitle{color:#3A1030!important;text-shadow:2px 2px 0 rgba(255,255,255,.55)}
body .clothes-hero p,body .colpage-hero p,body .clothes-hero #clothesHeroDesc{color:#6A2A55!important;opacity:1!important;font-weight:700}
body .clothes-hero .back-btn,body .colpage-hero .back-btn{background:#fff!important;color:var(--joy-pink)!important;box-shadow:0 3px 0 rgba(199,30,100,.18)}
body .clothes-hero .back-btn:hover,body .colpage-hero .back-btn:hover{background:#FFF0F6!important}
body .clothes-hero .breadcrumb,body .colpage-hero .breadcrumb{color:#9A6A85!important}
body .clothes-hero .breadcrumb a,body .colpage-hero .breadcrumb a{color:var(--joy-pink)!important}
/* pills de categoria (clothes) — reestilizadas pra fundo claro */
body .clothes-cat-pills{background:transparent!important;padding-top:28px!important}
body .clothes-cat-pill{border:2px solid #FFCFE0!important;background:#fff!important;color:var(--joy-pink)!important;box-shadow:0 3px 0 rgba(199,30,100,.10)}
body .clothes-cat-pill:hover,body .clothes-cat-pill.on{background:var(--joy-pink)!important;color:#fff!important;border-color:var(--joy-pink)!important}

/* ═══════════ PÁGINA DE PRODUTO — peças mais fofas ═══════════ */
.product-detail-img{border-radius:26px!important;box-shadow:0 12px 34px rgba(120,60,140,.14)!important}
.product-detail-cat,.cpcat{color:var(--joy-mint)!important}
.sticky-buy{border-radius:22px 22px 0 0!important}

/* ═══════════ CART / CONTA — cartões arredondados ═══════════ */
.cart-page-summary,.cart-page-list,.profile-card,.auth-card,.order-card{border-radius:22px!important}
.ship-progress-fill{background:linear-gradient(90deg,var(--joy-mint),var(--joy-sky))!important}

/* ═══════════ DECORAÇÕES FLUTUANTES nas seções ═══════════ */
@keyframes joyTwinkle{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:.9;transform:scale(1.1)}}
@keyframes joyBob{50%{transform:translateY(-12px) rotate(6deg)}}

/* rodapé — florzinha e estrela grandes bem suaves ao fundo */
footer,.footer-sec{position:relative;overflow:hidden}
footer::before,.footer-sec::before{content:'🌸';position:absolute;top:-24px;right:36px;font-size:130px;opacity:.10;pointer-events:none;line-height:1}
footer::after,.footer-sec::after{content:'⭐';position:absolute;bottom:8px;left:44px;font-size:78px;opacity:.10;pointer-events:none;line-height:1}

/* navegador de tamanhos (home) — balãozinho fofo no canto */
.sizes-section{position:relative;overflow:hidden}
.sizes-section::after{content:'🎈';position:absolute;top:18px;right:24px;font-size:34px;opacity:.55;pointer-events:none;animation:joyBob 4s ease-in-out infinite}

/* seções relacionadas / vistos recentemente (produto) — brilho no título */
.related-section .sec-head h2::after,.recent-section .recent-title::after,.recent-title::after{content:' ✨';opacity:.7}

/* barra Instagram — nuvenzinhas flutuando */
.ig-bar{position:relative;overflow:hidden}
.ig-bar::before{content:'☁️';position:absolute;top:16px;left:6%;font-size:40px;opacity:.5;animation:joyBob 7s ease-in-out infinite;pointer-events:none}
.ig-bar::after{content:'✨';position:absolute;bottom:20px;right:7%;font-size:30px;opacity:.6;animation:joyTwinkle 2.6s ease-in-out infinite;pointer-events:none}

/* newsletter — coraçãozinho pulsando */
.news-wrap{position:relative;overflow:hidden}

/* promessas (frete/pix/troca) — leve brilho ao passar o mouse */
.prom-item{transition:transform .18s}
.prom-item:hover{transform:translateY(-3px)}

@media(max-width:768px){
  .hero::before{width:300px;height:300px;top:-90px}
  .hero h1{font-size:38px}
  footer::before,.footer-sec::before{font-size:90px}
}