/* ==========================================================================
   SHAHAZ.com — Smart Popup card designs (ZIP-307; markup: assets/js/shahaz-popup-designs.js)
   Centred over the page (references 1–5); ZIP-352: the page behind is only dimmed, never blurred. Every size is in em; each design sets its own em from its
   width, so phone and desktop keep the reference proportions. Colours: --pd-p (main), --pd-p2 (deep), --pd-a
   (gold), --pd-bg (card tint). Only chosen parts move (.is-anim): never the whole popup.
   ========================================================================== */
.shz-pd-layer{position:fixed;inset:0;z-index:2147483001;display:grid;place-items:center;padding:16px;pointer-events:none;opacity:0;transition:opacity .3s ease}
.shz-pd-layer.is-visible{opacity:1}
.shz-pd-layer.has-backdrop{pointer-events:auto;background:rgba(0,0,0,.48)}
.shz-pd-layer .pd{pointer-events:auto}
.pd{--pd-ink:#17123a;position:relative;box-sizing:border-box;font-family:Poppins,"Hind Siliguri","Noto Sans Bengali",Arial,sans-serif;color:var(--pd-ink);line-height:1.15;-webkit-tap-highlight-color:transparent;transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .3s ease}
.is-visible .pd,.pd.is-preview{transform:none;opacity:1}
.pd *,.pd *::before,.pd *::after{box-sizing:border-box}
.pd a,.pd button{-webkit-tap-highlight-color:transparent;outline:none}
.pd a:focus,.pd a:focus-visible,.pd button:focus,.pd button:focus-visible{outline:none;box-shadow:none}
.pd svg{display:block;overflow:visible}
.pd-close{position:absolute;z-index:20;top:-.6em;right:-.6em;width:2.6em;height:2.6em;display:grid;place-items:center;padding:0;border:.18em solid #fff;border-radius:50%;background:#2a2230;color:#fff;cursor:pointer;box-shadow:none}
.pd-close svg{width:55%;height:55%}

/* Shared pieces: two-word title tag, pills, promises, button, sparkles */
.pd-tags{display:flex;flex-direction:column;align-items:flex-start;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.pd-t1,.pd-t2{display:inline-block;padding:.08em .32em .12em;border-radius:.18em;white-space:nowrap;transform:skewX(-8deg)}
.pd-t1{color:#fff;background:linear-gradient(180deg,#ff5fa8,var(--pd-p) 60%,var(--pd-p2));text-shadow:none;box-shadow:none}
.pd-t2{margin:-.06em 0 0 .5em;color:#ffd25a;background:linear-gradient(180deg,#2a2346,#120d2b);text-shadow:none;box-shadow:none}
.pd-tags.is-one{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 .2em;padding:.12em .36em .16em;border-radius:.24em;background:linear-gradient(180deg,#ff5fa8,var(--pd-p) 60%,var(--pd-p2));box-shadow:none;transform:rotate(-6deg)}
.pd-tags.is-one .pd-t1,.pd-tags.is-one .pd-t2{padding:0;margin:0;background:none;box-shadow:none;transform:none}
.pd-tags.is-one .pd-t2{color:transparent;background:linear-gradient(180deg,#fff3c4,#f4c24a 50%,#e0a21c);-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:none}
.pd-pill{display:inline-block;padding:.32em .9em .36em;border-radius:999px;background:linear-gradient(180deg,#fff2b8,#f6c548 55%,#e0a21c);color:var(--pd-ink);font-weight:800;text-transform:uppercase;white-space:nowrap;box-shadow:none}
.pd-pill.is-white{background:#fff}
.pd-pill b,.pd-feats b{color:var(--pd-p);font-weight:900}
.pd-feats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:0;padding:0;list-style:none}
.pd-feats li{display:flex;flex-direction:column;align-items:center;gap:.3em;padding:0 .3em;text-align:center;font-weight:700;line-height:1.15}
.pd-feats li+li{border-left:1px solid rgba(23,18,58,.18)}
.pd-feat-ico{display:block;width:2.1em;height:2.1em}
.pd-feat-ico svg{width:100%;height:100%}
.pd-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:.5em;overflow:hidden;border-radius:999px;background:linear-gradient(180deg,#ff4f9f,var(--pd-p) 55%,var(--pd-p2));color:#fff!important;font-weight:800;text-decoration:none!important;white-space:nowrap;box-shadow:none}
.pd-cta svg{width:1.1em;height:1.1em}
.pd-cta::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent)}
.pd-sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.pd-ribbon{position:absolute;width:4em;height:4em;pointer-events:none;z-index:6}
.pd-whole{position:absolute;inset:0;display:block;color:inherit!important;text-decoration:none!important}

/* ---------- 1. offer-card (reference 3): wide cream card, art left, copy right ---------- */
.pd--offer-card{--w:min(92vw,600px);width:var(--w);aspect-ratio:1.52;font-size:calc(var(--w) / 30);border:.2em solid #fff;border-radius:1.4em;background:linear-gradient(135deg,#fff8f1 0%,var(--pd-bg) 55%,#ffe4ee 100%);box-shadow:none}
.pd--offer-card .pd-art{position:absolute;left:0;top:0;bottom:0;width:45%}
.pd--offer-card .pd-podium{position:absolute;left:3%;bottom:6%;width:94%}
.pd--offer-card .pd-bag{position:absolute;left:22%;bottom:20%;width:56%;filter:none}
.pd--offer-card .pd-mini{position:absolute;left:1%;bottom:12%;width:27%;z-index:3}
.pd--offer-card .pd-mini.is-2{left:74%;bottom:12%;width:22%}
/* ZIP-352: the offer product — a white photo card curved like an edge screen, the photo inset like a showcase */
.pd--offer-card .pd-prod{position:absolute;left:5%;bottom:12%;z-index:2;display:block;width:90%;aspect-ratio:1/1.12;padding:.32em;overflow:hidden;border:.12em solid #f0c766;border-radius:22% / 18%;background:#fff}
/* ZIP-361 (owner): the offer product fills the left side — big card, gift boxes small at the two lower corners. */
.pd--offer-card .has-product .pd-mini{left:-3%;bottom:2%;width:20%}
.pd--offer-card .has-product .pd-mini.is-2{left:83%;bottom:2%;width:17%}
.pd--offer-card .has-product .pd-artbolt{top:2%;right:1%;width:11%}
.pd--offer-card .pd-prod img{display:block;width:100%;height:100%;object-fit:cover;border-radius:18% / 15%}
.pd--offer-card .pd-prod__off{position:absolute;top:.32em;left:.32em;padding:.32em .8em .34em;border-radius:.9em 0 .9em 0;background:linear-gradient(120deg,var(--pd-p),var(--pd-p2));color:#fff;font-size:1.4em;font-weight:800;line-height:1}
.pd--offer-card .pd-mini svg{width:100%}
.pd--offer-card .pd-artbolt{position:absolute;right:4%;top:10%;width:14%;transform:rotate(14deg);filter:none}
.pd--offer-card .pd-copy{position:absolute;right:1.4em;top:1.6em;bottom:1.4em;width:53%;display:flex;flex-direction:column;align-items:center;gap:.7em}
.pd--offer-card .pd-head{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding-left:3.2em}
.pd--offer-card .pd-watch{position:absolute;left:0;top:50%;width:4.8em;transform:translateY(-50%) rotate(-10deg);z-index:2;filter:none}
.pd--offer-card .pd-tags{font-size:2.6em}
.pd--offer-card .pd-msg{margin:0;color:var(--pd-ink);font-size:1.18em;font-weight:800;text-align:center}
.pd--offer-card .pd-feats{width:100%;font-size:.86em}
.pd--offer-card .pd-cta{width:100%;margin-top:auto;height:2.7em;font-size:1.22em}

/* ---------- 2. round-offer (reference 4): round white card, gold ring, megaphone, % badge ---------- */
.pd--round-offer{--w:min(88vw,430px);width:var(--w);aspect-ratio:1;font-size:calc(var(--w) / 24);border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff 0%,#fff7fa 55%,var(--pd-bg) 100%);box-shadow:0 0 0 .32em #f4c24a, 0 0 0 .5em rgba(255,255,255,.7)}
.pd--round-offer .pd-ring{position:absolute;inset:-.32em;border-radius:50%;background:conic-gradient(from 210deg,#fff3c4,#d9a032,#fff0bf,#b8820f,#fff3c4);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - .36em),#000 calc(100% - .34em));mask:radial-gradient(closest-side,transparent calc(100% - .36em),#000 calc(100% - .34em));pointer-events:none}
.pd--round-offer .pd-mega{position:absolute;left:-1.6em;top:-.6em;width:8.4em;transform:scaleX(-1) rotate(-24deg);z-index:5;filter:none}
.pd--round-offer .pd-bag{position:absolute;right:1.6em;top:2.2em;width:4.2em;transform:rotate(12deg);z-index:1}
.pd--round-offer .pd-copy{position:absolute;left:50%;top:3.2em;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:3}
.pd--round-offer .pd-kicker{color:var(--pd-ink);font-size:1.7em;font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-style:italic}
.pd--round-offer .pd-tags{font-size:2.6em;align-items:center}
.pd--round-offer .pd-t2{margin-left:.4em}
.pd--round-offer .pd-sidebolt{position:absolute;right:-1.6em;bottom:.2em;width:1.6em}
.pd--round-offer .pd-badge{position:absolute;right:-.9em;top:8.2em;z-index:6;width:6.4em;height:6.4em;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff5fa8,var(--pd-p) 55%,var(--pd-p2));box-shadow:0 0 0 .26em #f4c24a;color:#fff;text-align:center;line-height:1;text-transform:uppercase}
.pd--round-offer .pd-badge small{font-size:.95em;font-weight:800}
.pd--round-offer .pd-badge b{font-size:2.2em;font-weight:900;color:transparent;background:linear-gradient(180deg,#fff3c4,#f4c24a 55%,#e0a21c);-webkit-background-clip:text;background-clip:text}
.pd--round-offer .pd-badge b.is-text{font-size:1em;color:#fff;background:none;padding:0 .4em}
.pd--round-offer .pd-feats{position:absolute;left:50%;top:13.4em;transform:translateX(-50%);width:17.2em;padding:.6em .3em;font-size:.82em;border-radius:1em;background:#fff;box-shadow:none;z-index:4}
.pd--round-offer .pd-cta{position:absolute;left:50%;bottom:2.1em;transform:translateX(-50%);width:13em;height:2.6em;font-size:1.15em;z-index:4}

/* ---------- 3. gift-orb (reference 1): glass orb, gift on top, tag, gold pill, cart ---------- */
.pd--gift-orb{--w:min(78vw,360px);width:var(--w);aspect-ratio:1;font-size:calc(var(--w) / 20)}
.pd--gift-orb .pd-orb{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.95) 0%,rgba(255,236,244,.9) 45%,rgba(255,170,210,.75) 80%,rgba(255,120,180,.7) 100%);box-shadow:0 0 0 .14em rgba(255,214,120,.9)}
.pd--gift-orb .pd-orb::after{content:"";position:absolute;left:14%;top:8%;width:40%;height:20%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));transform:rotate(-24deg)}
.pd--gift-orb .pd-rays{position:absolute;left:50%;top:38%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(rgba(255,214,90,.5) 0 6deg,rgba(255,214,90,0) 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%)}
.pd--gift-orb .pd-gift{position:absolute;left:27%;top:-2.6em;width:8.4em;transform:rotate(-8deg);z-index:2;filter:none}
.pd--gift-orb .r1{left:-.6em;top:7em}.pd--gift-orb .r2{right:-.8em;top:9.5em}
.pd--gift-orb .pd-copy{position:absolute;left:50%;top:7.6em;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6em;z-index:3}
.pd--gift-orb .pd-tags{font-size:2.3em}
.pd--gift-orb .pd-tagbolt{position:absolute;left:-.6em;top:-.4em;width:1.6em;z-index:4;transform:rotate(-8deg)}
.pd--gift-orb .pd-pill{font-size:1.15em}
.pd--gift-orb .pd-cart{position:absolute;right:3.6em;bottom:1.6em;width:3.2em;height:3.2em;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff5fa8,var(--pd-p) 60%,var(--pd-p2));color:#fff!important;box-shadow:0 0 0 .14em #fff;z-index:5}
.pd--gift-orb .pd-close{top:1.6em;right:1.4em}

/* ---------- 4. megaphone (reference 2): glowing ring, megaphone with sound waves, open box, tag + pill ---------- */
.pd--megaphone{--w:min(86vw,420px);width:var(--w);aspect-ratio:1;font-size:calc(var(--w) / 22)}
.pd--megaphone .pd-glow{position:absolute;inset:5%;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(255,236,170,.95) 0%,rgba(255,170,210,.75) 40%,rgba(230,80,170,.55) 70%,rgba(160,60,200,.2) 100%);box-shadow:0 0 0 .18em rgba(255,214,120,.8)}
.pd--megaphone .pd-mega{position:absolute;left:1em;top:3.2em;width:9em;transform:scaleX(-1) rotate(-12deg);z-index:4;filter:none}
.pd--megaphone .pd-boxwrap{position:absolute;left:4.6em;bottom:2.4em;width:10.4em;z-index:3}
.pd--megaphone .pd-boxwrap .pd-gift{width:100%;filter:none}
.pd--megaphone .pd-lid-free{position:absolute;left:-1.6em;top:-.4em;width:7.4em;transform:rotate(-28deg);z-index:2}
.pd--megaphone .pd-boxlogo,.pd--gift-open .pd-boxlogo{position:absolute;left:24%;right:24%;bottom:12%;display:flex;flex-direction:column;align-items:center;gap:.1em;color:var(--pd-p);font-weight:900;letter-spacing:.02em}
.pd--megaphone .pd-boxlogo .pd-bag,.pd--gift-open .pd-boxlogo .pd-bag{width:1.9em}
.pd--megaphone .pd-boxlogo b,.pd--gift-open .pd-boxlogo b{font-size:.72em;white-space:nowrap}
.pd--gift-open .pd-boxlogo b{font-size:.9em}
.pd--megaphone .pd-copy{position:absolute;right:.4em;top:5.4em;display:flex;flex-direction:column;align-items:flex-end;gap:.7em;z-index:5}
.pd--megaphone .pd-tags{font-size:2.3em;flex-direction:column;align-items:flex-start;text-transform:none}
.pd--megaphone .pd-tagbolt{position:absolute;right:-.4em;top:-.6em;width:1.8em}
.pd--megaphone .pd-pill{font-size:1.1em;text-transform:none}
.pd--megaphone .pd-close{top:2.6em;right:2.8em}

/* ---------- 5. gift-open (reference 5): open gift box, the offer card rising out ---------- */
.pd--gift-open{--w:min(80vw,380px);width:var(--w);aspect-ratio:1/1.05;font-size:calc(var(--w) / 20)}
.pd--gift-open .pd-glow{position:absolute;left:8%;right:8%;top:14%;bottom:4%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,140,.95) 0%,rgba(255,180,90,.55) 35%,rgba(255,120,180,0) 70%)}
.pd--gift-open .pd-lid-free{position:absolute;right:-.4em;top:-.6em;width:9.4em;transform:rotate(16deg);z-index:2;filter:none}
.pd--gift-open .pd-card{position:absolute;left:50%;top:3.4em;width:11.4em;height:11.6em;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6em;padding:1em .6em;border-radius:.8em;background:linear-gradient(180deg,#ff5fa8,var(--pd-p) 55%,var(--pd-p2));box-shadow:none;z-index:3}
.pd--gift-open .pd-tags.is-stack{font-size:2.4em;align-items:center}
.pd--gift-open .pd-tags.is-stack .pd-t1,.pd--gift-open .pd-tags.is-stack .pd-t2{background:none;box-shadow:none;padding:0;margin:0}
.pd--gift-open .pd-tags.is-stack .pd-t2{background:linear-gradient(180deg,#fff3c4,#f4c24a 50%,#e0a21c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:none}
.pd--gift-open .pd-tagbolt{position:absolute;left:.4em;top:.7em;width:1.4em}
.pd--gift-open .pd-pill{font-size:.95em}
.pd--gift-open .pd-box{position:absolute;left:50%;bottom:.4em;width:15.6em;transform:translateX(-50%);z-index:4}
.pd--gift-open .pd-box .pd-gift{width:100%;filter:none}
.pd--gift-open .r1{left:.2em;top:7em}.pd--gift-open .r2{right:0;top:11em}
.pd--gift-open .pd-close{top:3.6em;right:.4em}

/* ---------- Motion (only chosen parts) ---------- */
.pd.is-anim .pd-cta::after{animation:pdShine 2.8s ease-in-out infinite}
.pd.is-anim .pd-spark{transform-box:fill-box;transform-origin:center;animation:pdTwinkle 1.8s ease-in-out infinite}
.pd.is-anim .pd-spark.s2{animation-delay:.6s}.pd.is-anim .pd-spark.s3{animation-delay:1.2s}
.pd.is-anim .pd-waves path{transform-box:fill-box;transform-origin:0 50%;animation:pdWave 1.4s ease-out infinite}
.pd.is-anim .pd-waves .w2{animation-delay:.2s}.pd.is-anim .pd-waves .w3{animation-delay:.4s}
.pd.is-anim .pd-mega-body{transform-box:fill-box;transform-origin:20% 55%;animation:pdTalk 1.4s ease-in-out infinite}
.pd--offer-card.is-anim .pd-bag{animation:pdBob 3s ease-in-out infinite}
.pd--offer-card.is-anim .pd-prod{animation:pdBob 3s ease-in-out infinite}
.pd--offer-card.is-anim .pd-watch .pd-bolt,.pd--offer-card.is-anim .pd-artbolt{animation:pdPulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.pd--round-offer.is-anim .pd-badge{animation:pdBeat 1.6s ease-in-out infinite}
.pd--gift-orb.is-anim .pd-gift{animation:pdHop 2.2s ease-in-out infinite}
.pd--gift-orb.is-anim .pd-orb{animation:pdGlow 2.4s ease-in-out infinite}
.pd--gift-orb.is-anim .pd-cart{animation:pdBounce 1.6s ease-in-out infinite}
.pd--megaphone.is-anim .pd-tags{animation:pdBeatTilt 1.6s ease-in-out infinite}
.pd--megaphone.is-anim .pd-beam,.pd--gift-open.is-anim .pd-beam{animation:pdBeam 1.8s ease-in-out infinite}
.pd--gift-open.is-anim .pd-lid-free{animation:pdLid 2.4s ease-in-out infinite}
.pd--gift-open.is-anim .pd-card{animation:pdRise 2.4s ease-in-out infinite}
.pd.is-anim .pd-ribbon{animation:pdSway 3s ease-in-out infinite}
@keyframes pdShine{0%,60%{left:-40%}100%{left:130%}}
@keyframes pdTwinkle{0%,100%{opacity:.2;transform:scale(.4)}50%{opacity:1;transform:scale(1.1)}}
@keyframes pdWave{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes pdTalk{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(2deg)}}
@keyframes pdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.35em)}}
@keyframes pdPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes pdBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes pdBeatTilt{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(-6deg) scale(1.06)}}
@keyframes pdHop{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-.4em)}}
@keyframes pdGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.07) saturate(1.1)}}
@keyframes pdBounce{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-.35em) scale(1.06)}60%{transform:translateY(0) scale(.97)}}
@keyframes pdBeam{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes pdLid{0%,100%{transform:rotate(16deg) translateY(0)}50%{transform:rotate(20deg) translateY(-.4em)}}
@keyframes pdRise{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-.3em)}}
@keyframes pdSway{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.pd,.pd *{animation:none!important;transition-duration:.15s!important}}

/* ZIP-569 (audit DS-03): no page scroll behind a dimmed popup */
html.shz-ep-open,html.shz-ep-open body{overflow:hidden!important;overscroll-behavior:none}