/*! HappyLand theme — front page sections */
/* ================= Hero ================= */
.hero{position:relative;overflow:hidden;padding:56px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:2px solid var(--ink);
  border-radius:99px;padding:5px 16px;font-size:12.5px;font-weight:800;box-shadow:3px 3px 0 var(--pink)}
.hero h1{font-size:clamp(38px,5.2vw,62px);margin:22px 0 10px}
.hero h1 .hl{background:linear-gradient(90deg,#FF5D8F,#FFAF1E,#17B2A0,#4FA8FF) no-repeat 0 88%/100% 12px;
  padding-inline:2px;border-radius:4px}
.hero p.lead{font-size:16.5px;color:var(--ink-soft);max-width:520px;font-weight:500}
.hero-ctas{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero-hint{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:13.5px;font-weight:700;
  color:var(--ink-soft);background:rgba(255,255,255,.7);border-radius:99px;padding:6px 16px 6px 8px}
.hero-hint .hand{animation:wave-hand 2.2s ease-in-out infinite;transform-origin:70% 80%}
@keyframes wave-hand{0%,100%{transform:rotate(0)}30%{transform:rotate(-18deg)}60%{transform:rotate(10deg)}}
.popcount{color:var(--pink);font-weight:900}
.hero-art{position:relative}
.hero-art svg{width:100%;height:auto;overflow:visible}
/* بادکنک‌های شناور */
.hb{transform-box:fill-box;transform-origin:center;animation:floaty 5.2s ease-in-out infinite alternate;cursor:pointer}
/* نکته: در فایل اصلی این قواعد با nth-of-type روی عناصر <g> دیگری می‌افتاد و تأخیرِ شناوری اعمال نمی‌شد؛ با data-pop عددی اصلاح شد */
.hb[data-pop="2"]{animation-duration:6.1s;animation-delay:-1.4s}
.hb[data-pop="3"]{animation-duration:4.6s;animation-delay:-.7s}
.hb[data-pop="4"]{animation-duration:5.8s;animation-delay:-2.1s}
.hb[data-pop="5"]{animation-duration:5s;animation-delay:-3s}
.hb:hover .hb-body{filter:brightness(1.06)}
.hb.popped{opacity:0;transform:scale(1.45);transition:opacity .16s,transform .16s;pointer-events:none}
.hb.grow{animation:regrow .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes regrow{from{opacity:0;transform:scale(.1)}to{opacity:1;transform:scale(1)}}
@keyframes floaty{from{translate:0 -7px}to{translate:0 9px}}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick .55s ease-in-out infinite alternate}
@keyframes flick{from{transform:scaleY(1) scaleX(1)}to{transform:scaleY(.82) scaleX(1.12) }}
.tw{animation:twinkle 2.6s ease-in-out infinite}
.tw:nth-of-type(2n){animation-delay:-1.3s}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.pop-word{position:absolute;font-family:var(--font-disp);font-size:26px;color:var(--pink);
  pointer-events:none;text-shadow:1px 1px 0 var(--ink);animation:popword 1s ease-out forwards;z-index:5}
@keyframes popword{0%{transform:translate(-50%,0) scale(.6) rotate(-8deg);opacity:0}
  20%{opacity:1}100%{transform:translate(-50%,-60px) scale(1.25) rotate(6deg);opacity:0}}
.confetto{position:absolute;border-radius:3px;pointer-events:none;z-index:5}

/* موج انتهای Hero */
.hero-wave{display:block;width:100%;height:44px;margin-bottom:-1px}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero p.lead{margin-inline:auto}
  .hero-ctas,.hero-hint{justify-content:center}
  .hero-art{max-width:520px;margin-inline:auto}
  .hero{padding-top:34px}
}

/* ================= سربخش‌ها ================= */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:900;letter-spacing:1px;color:var(--ink-soft);margin-bottom:6px}
.kicker::before{content:"";width:26px;height:3px;border-radius:99px;background:var(--pink)}
.section-head h2{font-size:clamp(28px,3.4vw,40px)}
.section-head .sub{color:var(--ink-soft);font-size:14.5px;max-width:420px;margin-top:4px}
@media (max-width:600px){.section-head{flex-direction:column;align-items:flex-start}}

/* ================= دسته‌بندی‌ها ================= */
.cats{padding:64px 0 74px;background:var(--paper)}
.cats-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-auto-rows:auto;gap:22px}
.cat-card{position:relative;border-radius:var(--r-lg);padding:26px;overflow:hidden;
  border:2px solid var(--ink);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.cat-card:hover{transform:translateY(-6px) rotate(0deg)!important;box-shadow:var(--shadow-lift)}
.cat-card:hover .cat-art{transform:scale(1.05) rotate(-2deg)}
/* رنگ هر کارت از ترم دسته (فیلد رنگ) می‌آید؛ جایگاه فقط چیدمان و کمی چرخش را تعیین می‌کند */
.cat-c-pink{background-color:var(--pink-soft);background-image:radial-gradient(rgba(255,93,143,.13) 2.5px,transparent 2.5px);background-size:22px 22px}
.cat-c-purple{background-color:var(--purple-soft);background-image:radial-gradient(rgba(144,97,232,.12) 2.5px,transparent 2.5px);background-size:22px 22px}
.cat-c-teal{background-color:var(--teal-soft);background-image:radial-gradient(rgba(23,178,160,.13) 2.5px,transparent 2.5px);background-size:22px 22px}
.cat-c-sun{background-color:var(--sun-soft);background-image:repeating-linear-gradient(0deg,rgba(222,143,0,.09) 0 2px,transparent 2px 26px)}
.cat-c-sky{background-color:var(--sky-soft);background-image:radial-gradient(rgba(79,168,255,.14) 2.5px,transparent 2.5px);background-size:22px 22px}
.cat-slot-1{transform:rotate(-.6deg)}.cat-slot-2{transform:rotate(.5deg)}.cat-slot-3{transform:rotate(-.5deg)}.cat-slot-4{transform:rotate(.4deg)}
.cats-grid[data-n="4"] .cat-slot-1,.cats-grid[data-n="3"] .cat-slot-1{grid-row:1/3}
.cats-grid[data-n="4"] .cat-slot-4{grid-column:2/4}
.cats-grid[data-n="3"] .cat-slot-3{grid-column:2/4}
.cats-grid[data-n="2"]{grid-template-columns:1fr 1fr}
.cats-grid[data-n="1"]{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
.cats-grid[data-n="1"] .cat-slot-1,.cats-grid[data-n="2"] .cat-slot-1{grid-row:auto}
.cat-slot-1 .cat-art{min-height:260px}
.cat-img{max-height:240px;width:auto;border-radius:var(--r-md);object-fit:cover}
.cat-art{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:150px;
  padding-block:14px;transition:transform .35s}
.cat-wide .cat-card-in{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;align-items:center;flex:1}
.cat-card h3{font-size:24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cat-card h3 .mini-badge{font-family:var(--font-body);font-size:10.5px;font-weight:900;background:var(--sun);color:var(--ink);
  padding:2px 10px;border-radius:99px;border:1.5px solid var(--ink)}
.cat-card .desc{font-size:13.5px;color:var(--ink-soft);margin-top:6px;font-weight:500}
.cat-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:10px}
.cat-count{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--ink-soft)}
.cat-count b{color:var(--ink)}
.cat-go{display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:13.5px;color:var(--ink);
  border-bottom:2.5px solid currentColor;padding-bottom:2px;transition:gap .2s,color .2s;cursor:pointer}
.cat-go:hover{color:var(--pink);gap:12px}
.safety-note{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11.5px;font-weight:700;
  color:var(--ink-soft);background:rgba(144,97,232,.09);border-radius:10px;padding:7px 12px}
@media (max-width:900px){
  .cats-grid,.cats-grid[data-n]{grid-template-columns:1fr}
  .cats-grid .cat-card{grid-row:auto!important;grid-column:auto!important;transform:rotate(0)!important}
  .cat-wide .cat-card-in{grid-template-columns:1fr}
}

/* ================= پرفروش‌ها (اسلایدر) ================= */
.bestsellers{padding:64px 0 74px}
.bestsellers .section-head{align-items:center}
.pnav{display:flex;gap:10px}
.pnav button{width:48px;height:48px;border-radius:16px;border:2px solid var(--ink);background:var(--paper);
  display:grid;place-items:center;box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.pnav button:hover{background:var(--sun)}
.pnav button:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.ptrack{display:flex;gap:18px;overflow-x:auto;padding:10px 4px 22px;scroll-snap-type:x mandatory;
  scrollbar-width:thin}
.ptrack .pcard{min-width:262px;scroll-snap-align:start}

/* ================= تازه‌رسیده‌ها (تب) ================= */
.fresh{padding:64px 0 74px;background:var(--paper);position:relative;overflow:hidden}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.tab-btn{padding:9px 22px;border-radius:99px;border:2px solid var(--ink);background:var(--cream);
  font-weight:800;font-size:13.5px;transition:all .2s;box-shadow:0 3px 0 var(--ink)}
.tab-btn:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.tab-btn[aria-pressed="true"]{background:var(--tab-c,var(--pink));color:#fff;box-shadow:0 3px 0 var(--ink);transform:translateY(2px)}
@media (max-width:640px){.tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}.tab-btn{white-space:nowrap}}

/* ================= پک‌های شبانه ================= */
.packs{background:var(--night);color:var(--cream);padding:74px 0 80px;position:relative;overflow:hidden}
.packs .kicker{color:#CBB9F5}.packs .kicker::before{background:var(--sun)}
.packs .sub{color:rgba(255,249,240,.65)}
.packs-stars i{position:absolute;border-radius:99px;background:#FFE9A8;opacity:.7;animation:twinkle 3s ease-in-out infinite}
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;margin-top:12px}
.pack{background:var(--cream);color:var(--ink);border-radius:var(--r-lg);border:2px solid var(--ink);
  padding:22px;position:relative;transition:transform .3s,box-shadow .3s}
.pack:hover{transform:translateY(-8px) rotate(0)!important;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.pack:nth-child(1){transform:rotate(-1deg)}
.pack:nth-child(3){transform:rotate(1deg)}
.pack.hot{outline:4px solid var(--sun);outline-offset:-2px}
.pack .hot-tag{position:absolute;top:-16px;right:20px;background:var(--sun);color:var(--ink);font-weight:900;
  font-size:12px;border:2px solid var(--ink);border-radius:99px;padding:4px 16px;box-shadow:0 3px 0 var(--ink)}
.pack-art{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-md);
  display:grid;place-items:center;aspect-ratio:16/9;margin-bottom:16px;overflow:hidden}
.pack h3{font-size:22px}
.pack ul{margin:14px 0 16px;display:grid;gap:8px}
.pack li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.pack li svg{flex-shrink:0;color:var(--sun)}
.pack .pprice .old{color:#B06}
.pack-cta{width:100%}
@media (max-width:900px){.packs-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* ================= اعتماد ================= */
.trust{padding:60px 0}
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper);border:2px solid var(--ink);
  border-radius:var(--r-lg);box-shadow:var(--shadow-soft);overflow:hidden}
.titem{display:flex;align-items:center;gap:14px;padding:24px 22px;border-inline-start:2px dashed var(--line)}
.titem:first-child{border-inline-start:none}
.titem .tico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;flex-shrink:0;border:2px solid var(--ink)}
.titem:nth-child(1) .tico{background:var(--pink-soft);color:var(--pink-hard)}
.titem:nth-child(2) .tico{background:var(--sun-soft);color:var(--sun-hard)}
.titem:nth-child(3) .tico{background:var(--teal-soft);color:var(--teal-hard)}
.titem:nth-child(4) .tico{background:var(--purple-soft);color:var(--purple-hard)}
.titem h3{font-size:16.5px;font-family:var(--font-body);font-weight:900}
.titem p{font-size:12.5px;color:var(--ink-soft);font-weight:600;line-height:1.8}
@media (max-width:900px){.trust-strip{grid-template-columns:1fr 1fr}
.titem:nth-child(3){border-inline-start:none}.titem:nth-child(n+3){border-top:2px dashed var(--line)}}
@media (max-width:560px){.trust-strip{grid-template-columns:1fr}
.titem{border-inline-start:none;border-top:2px dashed var(--line)}.titem:first-child{border-top:none}}

/* ================= خبرنامه ================= */
.news{padding:0 0 74px}
.news-box{background:var(--pink);border:2px solid var(--ink);border-radius:var(--r-lg);box-shadow:0 8px 0 var(--pink-hard);
  padding:34px;display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center;position:relative;overflow:hidden}
.news-box::after{content:"";position:absolute;inset-inline-start:-60px;bottom:-60px;width:200px;height:200px;
  border-radius:99px;border:22px dashed rgba(255,255,255,.22)}
.news-box h2{font-size:clamp(24px,3vw,34px);color:#fff}
.news-box p{color:rgba(255,255,255,.92);font-size:14px;font-weight:600;margin-top:4px}
.news-form{display:flex;background:#fff;border:2px solid var(--ink);border-radius:99px;overflow:hidden;box-shadow:0 5px 0 rgba(61,44,88,.35)}
.news-form input{flex:1;border:none;outline:none;padding:12px 20px;font-size:14px;min-width:0}
.news-form button{background:var(--ink);color:#fff;font-weight:900;padding:12px 26px;transition:opacity .2s}
.news-form button:hover{opacity:.9}
.news-consent{display:flex;gap:8px;align-items:center;margin-top:12px;color:#fff;font-size:12.5px;font-weight:700}
.news-consent input{width:18px;height:18px;flex-shrink:0;accent-color:var(--ink)}
.news-consent a{color:#fff;text-decoration:underline}
.news-msg{font-size:12.5px;margin-top:10px;font-weight:800;color:#fff;min-height:20px}
@media (max-width:800px){.news-box{grid-template-columns:1fr;padding:26px}}

.fresh-more{text-align:center;margin-top:30px}
.grid-empty{grid-column:1/-1;text-align:center;color:var(--ink-soft);padding:30px 0;font-weight:700}
.pgrid[aria-busy="true"]{opacity:.5;transition:opacity .2s}
.pack-art .hl-pimg,.pack-art img{width:100%;height:100%;object-fit:cover}
.pack-art svg{width:100%;height:100%}
.pack .pprice del{color:#B06;font-size:12.5px;font-weight:700}
.pack .pprice ins{text-decoration:none;font-size:18px;font-weight:900}

/* Home text (page editor content): readable column for SEO copy */
.home-text{padding:50px 0 20px}
.home-text-in{max-width:860px;margin-inline:auto;background:var(--paper);border:2px solid var(--line,#F0E3EA);border-radius:26px;padding:34px clamp(20px,4vw,44px);font-size:15.5px;line-height:2.1;color:var(--ink)}
.home-text-in>*+*{margin-top:1em}
.home-text-in h2,.home-text-in h3{font-family:var(--font-disp);line-height:1.5;margin-top:1.5em}
.home-text-in>:first-child{margin-top:0}
.home-text-in h2{font-size:clamp(21px,2.6vw,27px)}
.home-text-in h3{font-size:clamp(18px,2.2vw,22px)}
.home-text-in a{color:var(--pink-hard,#D64071);text-decoration:underline;text-underline-offset:4px}
.home-text-in ul,.home-text-in ol{padding-inline-start:1.4em}
.home-text-in img{max-width:100%;height:auto;border-radius:14px}
