:root{
  /* Irfan Corp palette — brand yellow #F3B807 on black, matching the logo.
     The variable names are inherited from the cloned engine; only the values
     changed, so every existing rule re-themes without being touched.
     Yellow needs DARK text on it, never white — see the contrast block at the
     bottom of this file, which is what keeps buttons and chips readable. */
  --brand:#F3B807;--brand-dk:#D9A406;--brand-ink:#141414;
  --teal:#F3B807;--teal-dk:#141414;--teal-lt:#FFF8E0;
  --yellow:#F3B807;--yellow-dk:#D9A406;--cream:#FFFBF0;--coral:#E5484D;
  --charcoal:#1F1F1F;--ink:#141414;--soft:#5C5C5C;--paper:#FFFFFF;--line:#E7E3D6;
  /* aliases so the cloned engine's existing rules keep working */
  --purple:#F3B807;--purple-dk:#D9A406;--deep:#1F1F1F;--lav:#FFF8E0;--lav2:#FDF0C6;--green:#159A5B;--sky:#2E7DD1;
  --shadow:0 4px 10px rgba(20,20,20,.05),0 22px 44px -20px rgba(20,20,20,.22);
  --shadow-sm:0 10px 26px -14px rgba(20,20,20,.24);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:'Nunito',"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden;background:#FFFFFF}
h1,h2,h3{font-family:'Baloo 2',"Segoe UI",sans-serif;letter-spacing:0}
/* clean, static, kid-friendly background wash */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(55% 45% at 88% 0%,rgba(251,205,10,.10),transparent 60%),
  radial-gradient(50% 40% at 0% 100%,rgba(16,132,116,.08),transparent 60%),#FFFFFF}
@media(prefers-reduced-motion:reduce){.hero2::before{animation:none}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance;letter-spacing:-.01em}
main{min-height:50vh}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:none;font:inherit;font-weight:700;padding:13px 26px;border-radius:999px;background:var(--purple);color:#fff;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(107,78,230,.6)}
.btn.dark{background:var(--deep)}
.btn.ghost{background:#fff;color:var(--purple);box-shadow:inset 0 0 0 2px var(--line)}
.btn.wide{width:100%;margin-top:8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple)}
.pad{padding-top:58px;padding-bottom:58px}
.lav{background:transparent}
.center{text-align:center;max-width:60ch;margin:0 auto 34px}
.center h2{font-size:clamp(26px,4vw,38px);margin:10px 0}
.center p{color:var(--soft);font-size:17px}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-top h2{font-size:clamp(23px,3.2vw,32px)}
.sec-top a{font-weight:700;color:var(--purple);font-size:14px;white-space:nowrap}

/* ---------- header ---------- */
.announce{background:var(--deep);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:9px 12px}
header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;transition:background .25s,box-shadow .25s}
.bar{display:flex;align-items:center;gap:22px;height:82px;transition:height .25s}
header.solid .bar,body.inner .bar{height:60px}
header.solid .logo img,body.inner .logo img{height:38px}
header.solid .logo .bw,body.inner .logo .bw{font-size:22px}
header.solid .logo .mark,body.inner .logo .mark{width:34px;height:34px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:25px;color:#fff;margin-right:auto}
.brandmark{width:40px;height:40px;flex:none;display:block;filter:drop-shadow(0 4px 8px rgba(107,78,230,.28))}
.logo .mark{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#fff,#FFF3CC);position:relative;flex:none;transition:background .25s}
.logo .mark::before{content:"";position:absolute;left:11px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--purple);box-shadow:13px 0 0 var(--purple)}
.logo .mark::after{content:"";position:absolute;left:12px;bottom:10px;width:15px;height:8px;border-bottom:3px solid var(--purple);border-radius:0 0 12px 12px}
.mainnav{display:flex;gap:28px;font-weight:700;font-size:15px}
.mainnav a{color:rgba(255,255,255,.9)}
.mainnav a:hover{color:#fff}
.hsearch{display:flex;align-items:center;background:rgba(255,255,255,.9);border-radius:999px;padding:4px 4px 4px 14px}
.hsearch input{border:none;background:none;outline:none;font:inherit;width:150px;color:var(--ink)}
.hsearch button{border:none;background:var(--purple);color:#fff;border-radius:999px;width:34px;height:34px;cursor:pointer}
.acct-link{color:#fff;font-weight:700;font-size:14px;white-space:nowrap}
.cart-pill{background:rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:9px 15px;font-weight:700;font-size:14px}
.burger{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:6px;line-height:0;border-radius:8px}
.burger svg{display:block;width:28px;height:28px}
.mobmenu{display:none}
/* solid header (scrolled home OR inner pages) */
header.solid,body.inner header{background:rgba(255,255,255,.68);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 8px 24px -14px rgba(43,35,80,.35)}
body.inner header{position:sticky}  /* in-flow on inner pages so no big top clearance is needed */
header.solid .logo,body.inner .logo,header.solid .burger,body.inner .burger{color:var(--ink)}
header.solid .logo .mark,body.inner .logo .mark{background:linear-gradient(135deg,var(--purple),var(--coral))}
header.solid .logo .mark::before,body.inner .logo .mark::before{background:#fff;box-shadow:13px 0 0 #fff}
header.solid .logo .mark::after,body.inner .logo .mark::after{border-bottom-color:#fff}
header.solid .mainnav a,body.inner .mainnav a{color:var(--soft)}
header.solid .mainnav a:hover,body.inner .mainnav a:hover{color:var(--purple)}
header.solid .cart-pill,body.inner .cart-pill{background:var(--purple)}
header.solid .acct-link,body.inner .acct-link{color:var(--ink)}
body.inner .hsearch{background:var(--lav)}
body.inner{padding-top:0}
@media(max-width:900px){.hsearch{display:none}.mainnav{display:none}.burger{display:block}
  .bar{gap:12px}
  /* The logo's auto margin absorbs the free space, so whatever follows it —
     cart pill, menu button, or the menu button alone when the cart is empty —
     stays pinned to the right edge. Do NOT move this onto .cart-pill: that
     breaks the moment the cart is hidden and the burger slides left. */
  .logo{margin-right:auto;min-width:0}
  .acct-link,.cart-pill{margin-left:0}
  /* full-screen mobile menu */
  body.menu-open{overflow:hidden}
  .mobmenu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:300;background:#F7F5FF;
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow:hidden}
  .mobmenu.open{transform:none}
  .mm-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:#fff;border-bottom:1px solid var(--line);flex:none}
  .mm-head .logo{color:var(--ink);font-size:20px;gap:8px;margin:0}
  .mm-head-r{display:flex;align-items:center;gap:12px}
  .mm-cart{position:relative;font-size:22px;text-decoration:none;line-height:1}
  .mm-cart b{position:absolute;top:-7px;right:-9px;background:var(--coral);color:#fff;font-size:10px;font-weight:800;padding:1px 5px;border-radius:99px}
  .mm-close{width:38px;height:38px;border:none;background:#F4F1E8;border-radius:50%;font-size:17px;color:var(--soft);cursor:pointer}
  .mm-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}
  .mm-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .mm-card{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:18px;color:var(--ink);box-shadow:var(--shadow-sm)}
  .mm-card .i{font-size:26px;margin-bottom:4px}
  .mm-card b{font-size:15px;font-weight:800}
  .mm-card small{color:var(--soft);font-size:12px}
  .mm-card.new{background:linear-gradient(150deg,#E9F1FF,#D8E7FF)}
  .mm-card.sale{background:linear-gradient(150deg,#FFF4DC,#FFE7B0)}
  .mm-sec{display:flex;align-items:center;gap:10px;margin:22px 2px 12px}
  .mm-sec-ic{width:36px;height:36px;border-radius:11px;background:var(--lav2);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
  .mm-sec b{font-size:15px;font-weight:800;color:var(--ink);display:block;line-height:1.2}
  .mm-sec small{font-size:12px;color:var(--soft)}
  .mm-ages{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  .mm-age{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:12px 14px;border-radius:16px;color:var(--ink)}
  .mm-age .i{font-size:22px;margin-bottom:3px}
  .mm-age b{font-size:16px;font-weight:800}
  .mm-age small{font-size:10.5px;color:var(--soft);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
  .mm-age.a1{background:#E6F7EC}.mm-age.a2{background:#FFF6DC}.mm-age.a3{background:#E6F1FF}.mm-age.a4{background:#F3EAFF}
  .mm-all{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
  .mm-all .go{margin-left:auto;color:var(--purple);font-size:18px}
  .mm-cats{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .mm-cat{display:flex;align-items:center;gap:12px;padding:13px 16px;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
  .mm-cat:last-child{border-bottom:none}
  .mm-cat:active{background:var(--lav)}
  .mm-cat .ic{width:34px;height:34px;border-radius:10px;background:var(--lav2);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
  .mm-cat .nm{font-size:14.5px}
  .mm-foot{flex:none;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .mm-foot a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 4px;color:var(--ink);font-size:20px}
  .mm-foot a small{font-size:11px;color:var(--soft);font-weight:700}
}

/* ---------- hero ---------- */
.hero2{position:relative;overflow:hidden;min-height:clamp(540px,82vh,740px);display:flex;align-items:center;background:var(--g1,#FF6E8A)}
.hero2::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;z-index:0;will-change:transform;
  background-color:var(--g1,#FF6E8A);
  background-image:linear-gradient(135deg,var(--g1,#FF6E8A),var(--g2,#FF8A3D),var(--g1,#FF6E8A),var(--g2,#FF8A3D),var(--g1,#FF6E8A));
  animation:auroraDrift 13s ease-in-out infinite}
.hero2 .wrap{position:relative;z-index:1}
.hero2 .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:20px;align-items:center;width:100%;padding-top:84px}
.hero2 .kick{color:rgba(255,255,255,.92);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:13px}
.hero2 h1{font-size:clamp(40px,6.4vw,78px);line-height:.97;text-transform:uppercase;color:#fff;letter-spacing:-.02em;margin:14px 0}
.hero2 p{color:rgba(255,255,255,.94);font-size:18px;max-width:44ch;margin-bottom:28px}
.hero2 .shop{background:var(--deep);color:#fff;border-radius:10px;padding:16px 34px;font-weight:700;display:inline-flex;gap:8px;transition:transform .12s}
.hero2 .shop:hover{transform:translateY(-2px)}
.hero2 .art{display:flex;justify-content:center;align-items:flex-end}
.kidimg{width:100%;max-width:470px;height:auto;filter:drop-shadow(0 30px 32px rgba(0,0,0,.26));animation:floaty 3.6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
.hero2 .doo{position:absolute;color:rgba(255,255,255,.5);pointer-events:none}
@media(prefers-reduced-motion:reduce){.kidimg{animation:none}}
@media(max-width:880px){.hero2{min-height:0}.hero2 .wrap{grid-template-columns:1fr;text-align:center;padding:120px 22px 44px}.kidimg{max-width:280px;margin:6px auto 0}}

/* ---------- stats ---------- */
.statsband{background:transparent;padding:30px 0 6px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;text-align:center;box-shadow:var(--shadow-sm)}
.stat .n{font-weight:800;font-size:30px;color:var(--purple)}
.stat.b .n{color:var(--coral)}.stat.c .n{color:var(--teal)}
.stat small{color:var(--soft);font-size:13px;font-weight:600}
@media(max-width:700px){.stats{grid-template-columns:1fr}}

/* ---------- features ---------- */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 22px;text-align:center;transition:transform .14s,box-shadow .14s}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.feat .ic{width:62px;height:62px;border-radius:20px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:28px}
.feat h3{font-size:18px}.feat p{color:var(--soft);font-size:14px;margin:6px 0 0}
@media(max-width:880px){.feats{grid-template-columns:1fr 1fr}}

/* ---------- category tiles ---------- */
.catgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.catgrid.big{grid-template-columns:repeat(4,1fr);gap:18px}
.ctile{background:var(--lav);border:1px solid var(--line);border-radius:18px;padding:20px 14px;text-align:center;transition:transform .12s,box-shadow .12s}
.ctile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ctile .ic{font-size:34px;display:block;margin-bottom:8px}
.ctile h3{font-size:14px}
.catgrid.big .ctile{padding:30px 18px}.catgrid.big .ic{font-size:46px}.catgrid.big small{color:var(--soft);font-size:12.5px}
@media(max-width:880px){.catgrid{grid-template-columns:repeat(3,1fr)}.catgrid.big{grid-template-columns:1fr 1fr}}

/* ---------- ages ---------- */
.ages{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.agecard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px 20px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .14s}
.agecard:hover{transform:translateY(-5px)}
.agecard .ring{width:110px;height:110px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:52px;background:var(--lav);position:relative}
.agecard .ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px dashed var(--line)}
.agecard h3{font-size:19px}.agecard p{color:var(--soft);font-size:13.5px;margin:4px 0 0}
@media(max-width:880px){.ages{grid-template-columns:1fr 1fr}}

/* ---------- product grid/cards ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .14s,box-shadow .14s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.thumb{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative}
.thumb .toy{font-size:74px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.14))}
.thumb img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:12px;top:12px;color:#fff;font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;background:var(--coral);z-index:2}
.badge.new{background:var(--teal)}
.badge.sold{background:var(--soft)}
.stockbadge{position:absolute;left:12px;bottom:12px;z-index:2;background:rgba(20,16,40,.76);color:#fff;font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.card.is-sold .thumb .toy,.card.is-sold .thumb img{opacity:.5;filter:grayscale(.4)}
.card .add.sold{background:#EFEDE6;color:var(--soft);cursor:not-allowed}
.card .add.sold:hover{background:#EFEDE6;color:var(--soft)}
.pd-media.is-sold .pd-img{opacity:.55;filter:grayscale(.4)}
.lowstock{color:#C24437;font-weight:700;font-size:14px;margin:0 0 10px}
.soldout-box{background:#F3F1F8;border:1px solid var(--line);color:var(--soft);border-radius:12px;padding:14px 16px;margin:0 0 14px;font-size:14.5px}

/* custom pasted landing HTML — let the pasted markup control its own look */
.product-custom-html{width:100%}
.product-custom-html img{max-width:100%;height:auto}

/* ===== AD / LANDING PAGE ===== */
.adpage{padding-top:82px}
.ad-urgency{background:var(--coral);color:#fff;text-align:center;font-weight:800;letter-spacing:.03em;padding:11px;font-size:14px}
.ad-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:34px 22px}
.ad-media{display:flex;flex-direction:column;gap:12px}
.ad-main{border-radius:22px;position:relative;display:flex;align-items:center;justify-content:center;min-height:400px;overflow:hidden}
.ad-main img{width:100%;height:100%;object-fit:cover}
.ad-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.adt{width:72px;height:72px;border-radius:12px;border:2px solid var(--line);background:#fff;padding:0;overflow:hidden;cursor:pointer}
.adt.on{border-color:var(--purple)}.adt img{width:100%;height:100%;object-fit:cover}
.ad-rating{color:var(--yellow);font-size:14px}.ad-rating span{color:var(--soft)}
.ad-info h1{font-size:clamp(26px,3.6vw,40px);margin:8px 0 12px}
.ad-price{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ad-price .now{font-size:32px;font-weight:800;color:var(--coral)}
.ad-price .was{color:var(--soft)}
.ad-price .save{background:var(--coral);color:#fff;font-weight:800;font-size:12.5px;padding:4px 10px;border-radius:999px}
.ad-benefits{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px;background:var(--lav);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.ad-benefits li{font-weight:600;font-size:15px}
.ad-buy{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ad-atc{background:var(--purple)}.ad-cod{background:var(--ink)}
.ad-buy .btn{flex:1;min-width:150px}
.ad-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.ad-timeline .tl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:2px}
.ad-timeline .ic{font-size:24px}
.ad-timeline b{font-size:12.5px}.ad-timeline small{color:var(--soft);font-size:11.5px}
.ad-trust{list-style:none;display:flex;gap:16px;flex-wrap:wrap;padding:0;margin:0;color:var(--soft);font-size:14px;font-weight:600}
.ad-band{padding:52px 0}
.ad-band.lav{background:transparent}
.ad-band .center h2{font-size:clamp(24px,3.4vw,36px)}
.ad-desc{max-width:75ch;margin:20px auto 0;color:var(--soft);line-height:1.8;text-align:center}
.ad-feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:52px 22px}
.ad-feature__media{border-radius:22px;min-height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ad-feature__media img{width:100%;height:100%;object-fit:cover}
.ad-feature__text h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:14px}
.ad-feature__text p{color:var(--soft);font-size:17px;margin-bottom:20px}
.ad-compare{max-width:720px;margin:0 auto}
.ad-compare table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.ad-compare th,.ad-compare td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
.ad-compare th:first-child,.ad-compare td:first-child{text-align:left;font-weight:600}
.ad-compare thead th{background:var(--ink);color:#fff;font-size:14px}
.ad-compare thead th:nth-child(2){background:var(--purple)}
.ad-compare .yes{color:#0E9E86;font-weight:800;font-size:18px}
.ad-compare .no{color:var(--coral);font-weight:800;font-size:18px}
.ad-sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px -14px rgba(43,35,80,.35);padding:10px 0}
.ad-sticky__in{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ad-sticky__info{display:flex;align-items:center;gap:12px}
.ad-sticky__info .thumb{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.ad-sticky__info .thumb .toy{font-size:26px}.ad-sticky__info .thumb img{width:100%;height:100%;object-fit:cover}
.ad-sticky__info b{display:block;font-size:14px}.ad-sticky__info span{color:var(--soft);font-size:13px}
.ad-sticky__info s{color:var(--soft)}
.ad-sticky .btn{white-space:nowrap}
@media(max-width:860px){.ad-hero,.ad-feature{grid-template-columns:1fr}.ad-sticky__info b{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.card .body{padding:14px 16px 6px;display:flex;flex-direction:column;gap:5px;flex:1}
.card .tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--purple)}
/* admin: delete-image cross */
.imgdel{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#E8477E;color:#fff;font-size:17px;font-weight:800;line-height:1;box-shadow:0 2px 7px rgba(0,0,0,.35);border:2px solid #fff;z-index:6}
.imgdel:hover{background:#c9356a;transform:scale(1.08)}
.card{position:relative}
.card>.imgdel{position:absolute;top:10px;right:10px}
.pdt-wrap{position:relative;display:inline-block}
.pdt-wrap .imgdel{position:absolute;top:-7px;right:-7px;width:22px;height:22px;font-size:15px}
.card .metarow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.agechip{font-size:10.5px;font-weight:800;color:#B4530A;background:#FFF1E0;border:1px solid #FFDFB8;border-radius:999px;padding:2px 8px;white-space:nowrap;line-height:1.5}
.card h3{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.55em}
.pricerow{display:flex;align-items:center;gap:8px;margin-top:2px}
.pricerow .now{font-weight:800;font-size:18px}
.pricerow .was{font-size:13px;color:var(--soft);text-decoration:line-through}
.savepill{align-self:flex-start;background:#E4F7EE;color:#0E9E86;font-weight:800;font-size:12px;padding:4px 10px;border-radius:8px;margin-top:1px}
.card .add{display:block;text-align:center;margin:10px 16px 16px;border:none;background:#141414;color:#fff;font-weight:800;border-radius:12px;padding:12px;cursor:pointer;transition:background .12s,transform .1s}
.card .add:hover{background:#000}
.card .add:active{transform:scale(.98)}
.card .add.buynow{background:#25D366;color:#fff}
.card .add.buynow:hover{background:#1EBE5A;color:#fff}
@media(max-width:880px){.grid{grid-template-columns:1fr 1fr}}

/* ---------- cta / testimonials / faq ---------- */
.cta{background:linear-gradient(130deg,var(--teal),#149C82);color:#fff;border-radius:28px;padding:44px;text-align:center}
.cta h2{font-size:clamp(26px,4vw,40px)}.cta p{opacity:.92;margin:12px auto 24px;max-width:46ch}
.cta .btn{background:var(--yellow);color:var(--ink)}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-sm)}
.rev .s{color:var(--yellow)}.rev p{margin:10px 0 16px;font-size:14.5px}
.rev .who{display:flex;align-items:center;gap:12px;font-weight:700;font-size:14px}
.rev .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--coral));color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.rev .who small{display:block;color:var(--soft);font-weight:500}
@media(max-width:880px){.revs{grid-template-columns:1fr}}
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.qa{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.qa summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--purple);font-size:22px}
.qa[open] summary::after{content:"–"}
.qa .a{padding:0 22px 18px;color:var(--soft);font-size:14.5px}

/* ---------- page head / breadcrumbs ---------- */
.page-head{background:transparent;padding:32px 0 28px;border-bottom:1px solid var(--line)}
.page-head.slim{padding:24px 0 18px}
.page-head h1{font-size:clamp(27px,4vw,40px);margin:8px 0 4px}
.page-head p{color:var(--soft)}
.crumbs{font-size:13px;color:var(--soft)}
.crumbs a{color:var(--purple);font-weight:600}

/* ---------- shop layout ---------- */
.shoparea{padding:22px 22px 60px}
/* category chips across the top (was a left sidebar) */
.catbar-wrap{position:relative}
/* edge fade cues — show only on the side that has more content */
.catbar-wrap::before,.catbar-wrap::after{content:"";position:absolute;top:0;bottom:16px;width:56px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s}
.catbar-wrap::before{left:0;background:linear-gradient(90deg,#F1EBFF 20%,transparent)}
.catbar-wrap::after{right:0;background:linear-gradient(270deg,#F1EBFF 20%,transparent)}
.catbar-wrap.can-left::before{opacity:.96}
.catbar-wrap.can-right::after{opacity:.96}
/* round arrow buttons that appear at each scrollable edge */
.catnav{position:absolute;top:3px;height:40px;width:40px;z-index:3;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.96);box-shadow:var(--shadow-sm);color:var(--purple);font-size:22px;font-weight:900;line-height:1;
  display:none;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,background .12s}
.catnav:hover{background:#fff;transform:scale(1.08)}
.catnav.prev{left:-4px}.catnav.next{right:-4px}
.catbar-wrap.can-left .catnav.prev{display:flex}
.catbar-wrap.can-right .catnav.next{display:flex;animation:cueNudge 1.3s ease-in-out 4}
@keyframes cueNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.catbar{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 16px;margin-bottom:8px;-webkit-overflow-scrolling:touch;
        scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.catbar .chip{scroll-snap-align:start}
.catbar::-webkit-scrollbar{height:8px}
.catbar::-webkit-scrollbar-track{background:var(--lav);border-radius:99px}
.catbar::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;transition:background .15s}
.catbar:hover::-webkit-scrollbar-thumb{background:var(--purple)}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:#fff;border:1px solid var(--line);
      color:var(--ink);font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;transition:background .12s,color .12s,border-color .12s}
.chip:hover{border-color:var(--purple);color:var(--purple)}
.chip.on{background:var(--purple);border-color:var(--purple);color:#fff}
.resultcount{color:var(--soft);font-size:14px;font-weight:700}
/* active filters + reset */
.activefilters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.activefilters .afl{font-size:13px;font-weight:700;color:var(--soft)}
.afchip{display:inline-flex;align-items:center;gap:6px;background:var(--lav2);border:1px solid var(--line);color:var(--purple-dk);
        font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;transition:background .12s}
.afchip:hover{background:#FDEFC0}
.afchip b{font-size:12px;opacity:.7}
.afreset{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:var(--purple);color:#fff;font-weight:800;
         font-size:13px;padding:8px 16px;border-radius:999px;box-shadow:var(--shadow-sm);transition:background .12s,transform .1s}
.afreset:hover{background:var(--purple-dk);transform:translateY(-1px)}
@media(max-width:560px){.afreset{margin-left:0;width:100%;justify-content:center}}
.shop-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.searchmini{display:flex;gap:8px;flex:1;min-width:220px;max-width:440px}
.searchmini input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:0 16px;height:46px;font:inherit}
.searchmini button{border:none;background:var(--purple);color:#fff;border-radius:12px;padding:0 20px;height:46px;font-weight:700;cursor:pointer}
.sortform label{display:flex;align-items:center;gap:8px;color:var(--soft);font-size:14px;white-space:nowrap}
.sortform select{border:1px solid var(--line);border-radius:12px;padding:0 14px;height:46px;font:inherit;background:#fff}
.pager{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:38px}
.pager a,.pager .on{min-width:42px;height:42px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;
       border-radius:12px;border:1px solid var(--line);font-weight:800;background:#fff;color:var(--ink);transition:all .12s}
.pager a:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-1px)}
.pager .on{background:var(--purple);color:#fff;border-color:var(--purple)}
.pager .nav{padding:0 16px;color:var(--purple)}
.pager .gap{color:var(--soft);font-weight:800;padding:0 2px}
@media(max-width:820px){.shoparea{padding:16px 14px 40px}}
/* sleek page-wide scrollbar */
*{scrollbar-width:thin;scrollbar-color:#c9bff2 transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cdc2f0;border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--purple);border:3px solid transparent;background-clip:content-box}

/* ---------- product detail ---------- */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:32px 22px}
.pd-media{border-radius:24px;position:relative;display:flex;align-items:center;justify-content:center;min-height:380px;overflow:hidden}
.pd-img{width:100%;display:flex;align-items:center;justify-content:center}
.pd-img .toy{font-size:150px}
.pd-img img{width:100%;height:auto;display:block}
.pd-info .tag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--purple)}
.pd-info h1{font-size:clamp(26px,3.4vw,38px);margin:10px 0}
.pd-info .stars{color:var(--yellow);font-size:14px}.pd-info .stars span{color:var(--soft)}
/* piece-count variant selector */
.pd-variants{margin:16px 0 4px}
.pd-variants .pv-label{display:block;font-weight:800;font-size:13px;color:var(--ink);margin-bottom:8px}
.pd-variants .pv-opts{display:flex;flex-wrap:wrap;gap:9px}
.pd-variants .pv{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:74px;padding:8px 14px;border-radius:12px;background:#fff;border:2px solid var(--line);cursor:pointer;transition:.12s;font:inherit}
.pd-variants .pv b{font-size:14px;font-weight:800;color:var(--ink)}
.pd-variants .pv small{font-size:12px;color:var(--soft)}
.pd-variants .pv:hover{border-color:var(--teal)}
.pd-variants .pv.on{border-color:var(--teal);background:var(--teal-lt)}
.pd-variants .pv.on b,.pd-variants .pv.on small{color:var(--teal-dk)}
.pricerow .fromlbl{font-size:11px;font-weight:700;color:var(--soft);align-self:center}
.pd-age{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:#FFF1E0;border:1px solid #FFDFB8;border-radius:999px;padding:6px 14px;font-size:14px;color:#8A3F08}
.pd-age span{font-weight:600;color:#B4530A}.pd-age b{font-weight:800;color:#8A3F08}
.pd-price{display:flex;align-items:center;gap:12px;margin:16px 0}
.pd-price .now{font-size:30px;font-weight:800;color:var(--ink)}
.pd-price .was{color:var(--soft);text-decoration:line-through}
.pd-price .save{background:#E7FBF4;color:#0E9E86;font-weight:700;font-size:12.5px;padding:4px 10px;border-radius:999px}
.pd-short{color:var(--soft)}
.pd-buy{display:flex;gap:12px;align-items:center;margin:20px 0;flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qty button{width:42px;height:46px;border:none;background:var(--lav);font-size:20px;cursor:pointer;color:var(--purple)}
.qty input{width:52px;height:46px;border:none;text-align:center;font:inherit;font-weight:700}
.pd-usp{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;color:var(--soft);font-size:14.5px}
.pd-perks{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:20px;background:#FAF7F2;border:1px solid var(--line);border-radius:18px;padding:24px 20px}
.pd-perks .pk{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.pd-perks .pk-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px}
.pd-perks .pk b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.25}
.pd-perks .pk small{display:block;margin-top:3px;font-size:12.5px;color:var(--soft);line-height:1.35}
.pk-ic.i1{background:#FCE0EC}.pk-ic.i2{background:#FCEFC7}.pk-ic.i3{background:#EADFFB}.pk-ic.i4{background:#D9F1EA}
.buynow-lg{background:#25D366;color:#fff;font-size:17px;padding:15px 32px;margin:6px 0;text-align:center;justify-content:center}
.buynow-lg:hover{background:#1EBE5A}
/* Buy now: white bg with colourful gradient border */
.buynow-lg,.pd-buy .btn.dark{
  border:2.5px solid transparent;color:var(--purple);font-weight:800;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(100deg,var(--purple),#FF6E8A 52%,#FF8A3D) border-box;
}
.buynow-lg:hover,.pd-buy .btn.dark:hover{
  color:#fff;
  background:linear-gradient(100deg,var(--purple),#FF6E8A 52%,#FF8A3D) border-box;
}
.preview-bar{background:#FFF3D6;border:1px solid #FFE39E;color:#8A6D1B;border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:14px}
.preview-bar a{color:var(--purple);font-weight:800}
.preview-bar.hidden-bar{background:#FFECEF;border-color:#F5C2CE;color:#B23A5B}
.preview-bar.active-bar{background:#E7FBF4;border-color:#B4EBD9;color:#0E8F79}
/* floating WhatsApp share tab */
.badge.off{background:var(--soft)}
.card.is-hidden{opacity:.64}
.card.is-hidden .thumb img{filter:grayscale(.35)}

/* ===== mobile polish ===== */
@media(max-width:640px){
  .wrap{padding:0 16px}
  .pad{padding-top:34px;padding-bottom:34px}
  .grid{grid-template-columns:1fr}          /* one product per row on phones */
  .card .thumb .toy{font-size:96px}
  .catgrid{grid-template-columns:1fr 1fr}
  .feats,.revs{grid-template-columns:1fr}
  .page-head{padding:20px 0 14px}
  .page-head.slim{padding:16px 0 10px}
  .page-head h1{font-size:25px}
  .page-head p{font-size:14px}
  .sec-top{margin-bottom:16px}
  .center{margin-bottom:26px}
  .center h2{font-size:24px}
  .hero2 .wrap{padding:106px 16px 34px}
  .hero2 h1{font-size:clamp(34px,10vw,46px)}
  .kidimg{max-width:230px}
  .product-detail{gap:16px;padding:16px 16px}
  .pd-media{min-height:0;aspect-ratio:1/1}
  .pd-info h1{font-size:24px}
  .pd-price .now{font-size:26px}
  .pd-buy{gap:10px;flex-wrap:nowrap}
  .buynow-lg{width:100%}
  .pd-buy .qty{flex:none;justify-content:center}
  .pd-buy .btn{flex:1;min-width:0}
  .pd-desc{max-width:100%}
  .pd-h{font-size:20px}
  .cta{padding:28px 20px}
  .cta h2{font-size:24px}
  /* footer: single column, tidy */
  .foot{grid-template-columns:1fr;gap:24px;padding-top:30px;padding-bottom:30px}
  .foot .about p{max-width:100%}
  .subfoot{flex-direction:column;gap:4px;text-align:center}
  .wa-full{display:none}
  .shoparea{padding:14px 14px 40px}
  .shop-bar{flex-direction:column;align-items:stretch}
  .catbar{gap:8px;padding:4px 0 12px}
  .chip{font-size:13px;padding:8px 14px}
  .searchmini{max-width:none}
  .sortform,.sortform label{width:100%}
  .sortform select{flex:1}
  .toast{left:12px;right:12px;transform:translateY(140%);max-width:none}
  .toast.show{transform:translateY(0)}
}
.pd-h{font-size:22px;margin-bottom:12px}
.pd-desc{color:var(--ink);max-width:70ch;line-height:1.95;font-size:15.5px}
.pd-desc strong{color:var(--ink);font-weight:800}
/* reviews */
.stars-ic{color:#FFB800;letter-spacing:1px;white-space:nowrap}
.rev-avg{display:inline-flex;align-items:center;gap:6px;color:var(--soft);font-size:14px;font-weight:700}
.rev-avg b{color:var(--ink)}
.reviews{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.review{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.rv-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rv-av{width:38px;height:38px;border-radius:50%;background:var(--lav2);color:var(--purple-dk);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.rv-meta{display:flex;flex-direction:column;line-height:1.25}
.rv-name{font-weight:800;font-size:14px;color:var(--ink)}
.rv-stars .stars-ic{font-size:13px}
.rv-date{margin-left:auto;color:var(--soft);font-size:12px}
.review p{margin:0;color:var(--ink);font-size:14.5px;line-height:1.55}
@media(max-width:640px){.reviews{grid-template-columns:1fr}}
@media(max-width:820px){.product-detail{grid-template-columns:1fr}}

/* ---------- cart / checkout ---------- */
.cart-grid,.checkout-grid{display:grid;grid-template-columns:1fr 340px;gap:26px}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);padding:0 8px 12px;border-bottom:1px solid var(--line)}
.cart-table td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.ci-prod{display:flex;gap:12px;align-items:center}
.mini-thumb{width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.mini-thumb .toy{font-size:32px}.mini-thumb img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.ci-name{font-weight:700}.ci-prod small{color:var(--soft);display:block}
.qtybox{width:60px;padding:8px;border:1px solid var(--line);border-radius:8px;text-align:center;font:inherit}
.rm{color:var(--coral);font-weight:800}
.cart-actions{display:flex;justify-content:space-between;margin-top:18px;gap:12px}
.cart-summary{background:var(--lav);border:1px solid var(--line);border-radius:20px;padding:24px;align-self:start}
.cart-summary h3{margin:0 0 16px}
.cart-summary .row{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px}
.cart-summary hr{border:none;border-top:1px solid var(--line);margin:8px 0}
.cart-summary .row.total{font-size:18px;font-weight:800;border-top:2px solid var(--line);margin-top:8px;padding-top:14px}
.cart-summary .hint{background:#FFF6E0;color:#8A6D1B;border-radius:10px;padding:8px 12px;font-size:12.5px;margin:6px 0}
.cod{text-align:center;color:var(--soft);font-size:13px;margin:12px 0 0}
.checkout-grid .co-fields{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-weight:700;font-size:13.5px}
.field input,.field textarea,.field select{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(107,78,230,.15)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pay-note{background:var(--lav);border-radius:12px;padding:14px;font-size:14px;margin-top:8px}
.alert{background:#FFECEF;border:1px solid #FFC9D3;color:#B23350;border-radius:12px;padding:14px 18px;margin-bottom:18px}
.alert ul{margin:0;padding-left:18px}
@media(max-width:820px){.cart-grid,.checkout-grid{grid-template-columns:1fr}.row2{grid-template-columns:1fr}
  .cart-table thead{display:none}.cart-table td{display:block;border:none;padding:4px 0}
  .cart-table tr{display:block;border-bottom:1px solid var(--line);padding:14px 0}
  .cart-table td[data-l]::before{content:attr(data-l) ": ";font-weight:700;color:var(--soft)}}

/* ---------- misc ---------- */
.empty{text-align:center;padding:50px 0}
.empty .big{font-size:70px}.empty h3{font-size:24px;margin:10px 0 6px}.empty p{color:var(--soft);margin-bottom:18px}
.success-box{max-width:640px;margin:20px auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:40px;box-shadow:var(--shadow)}
.success-box .tick{font-size:60px}.success-box h1{margin:10px 0}.success-box p{color:var(--soft)}
.ord-card{text-align:left;background:var(--lav);border-radius:16px;padding:22px;margin:22px 0}
.ord-card .row{display:flex;justify-content:space-between;padding:6px 0;font-size:14.5px}
.ord-card hr{border:none;border-top:1px solid var(--line);margin:8px 0}
.ord-card .row.total{font-weight:800;font-size:17px;border-top:2px solid var(--line);margin-top:6px;padding-top:12px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:26px}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.cc{background:var(--lav);border:1px solid var(--line);border-radius:16px;padding:20px}
.cc .e{font-size:26px}.cc h4{margin:8px 0 4px}.cc p{color:var(--soft);font-size:14px}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}.contact-cards{grid-template-columns:1fr 1fr}}

/* ---------- product-page trust cards + stats ---------- */
.pd-trust .pdt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pdt-card{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.pdt-ic{flex:none;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px}
.pdt-ic.ic1{background:#FFEAD9}.pdt-ic.ic2{background:#DFF6E6}.pdt-ic.ic3{background:#E2F1FF}.pdt-ic.ic4{background:#EFE6FF}
.pdt-card b{display:block;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:5px}
.pdt-card p{margin:0;font-size:14px;color:var(--soft);line-height:1.5}
.pd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.pd-stats .ps{border-radius:16px;padding:20px 22px}
.pd-stats .ps b{display:block;font-size:30px;font-weight:800;line-height:1}
.pd-stats .ps small{display:block;margin-top:8px;font-size:13.5px;font-weight:700;color:var(--soft)}
.pd-stats .ps1{background:#FFF0E9}.pd-stats .ps1 b{color:#F1621E}
.pd-stats .ps2{background:#FBF6DF}.pd-stats .ps2 b{color:#8A5A12}
.pd-stats .ps3{background:#E2F6F1}.pd-stats .ps3 b{color:#0E9E86}
.pd-stats .ps4{background:#E6F7EC}.pd-stats .ps4 b{color:#1FA84E}
@media(max-width:760px){.pd-trust .pdt-grid{grid-template-columns:1fr}.pd-stats{grid-template-columns:1fr 1fr}}

/* ---------- trust band ---------- */
.trustband{background:var(--paper);border-top:1px solid var(--line);padding:30px 0}
.trustband .trust{display:grid;grid-template-columns:repeat(4,1fr)}
.trustband .ti{display:flex;gap:14px;align-items:flex-start;padding:4px 24px}
.trustband .ti:not(:first-child){border-left:1px solid var(--line)}
.trustband .tic{flex:none;width:54px;height:54px;border-radius:50%;background:var(--teal-lt);display:flex;align-items:center;justify-content:center;font-size:25px}
.trustband .ti b{display:block;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:5px}
.trustband .ti p{font-size:13.5px;color:var(--soft);line-height:1.5;margin:0}
@media(max-width:900px){.trustband .trust{grid-template-columns:repeat(2,1fr);gap:24px 0}.trustband .ti:nth-child(odd){border-left:0}}
@media(max-width:560px){.trustband{padding:22px 0}.trustband .trust{grid-template-columns:1fr}.trustband .ti{border-left:0!important}}

/* ---------- footer ---------- */
.site-foot{background:var(--deep);color:#C9C1EC;margin-top:20px}
.site-foot .logo{color:#fff}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:26px;padding-top:44px;padding-bottom:44px}
.foot h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#8F86BE;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.foot .flinks a{display:inline-flex;align-items:center;gap:9px}
.foot .flinks .fic{flex:none;width:18px;text-align:center;font-size:14px;opacity:.9}
.foot .about p{font-size:14px;margin:12px 0 16px;max-width:34ch}
.social{display:flex;gap:10px;margin:16px 0 4px}
.social .soc{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff;transition:transform .14s,background .14s}
.social .soc:hover{transform:translateY(-2px)}
.social .soc.ig:hover{background:radial-gradient(circle at 30% 110%,#FEDA75,#FA7E1E 28%,#D62976 60%,#962FBF 90%)}
.social .soc.fb:hover{background:#1877F2}
.social .soc.wa:hover{background:#25D366}
.pays{display:flex;gap:7px;flex-wrap:wrap;align-items:center}   /* wrap: the badges overflowed the footer column at some widths */
.pays .pay{box-sizing:border-box;height:30px;background:#fff;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;padding:0 9px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pays .pay b{font-weight:900;font-size:12px;line-height:1;letter-spacing:.01em;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-style:normal}
.pays .l-cod{color:#3A2F6B}
.pays .l-ep{color:#12A150;font-style:italic;letter-spacing:.005em}
.pays .l-jc{color:#231F20}.pays .l-jc i{color:#ED1C24;font-style:italic}
.pays .l-visa{color:#1A1F71;font-style:italic;font-size:13.5px;letter-spacing:.04em}
.pays .pay.mc{padding:0 7px}.pays .pay.mc svg{display:block}
@media(max-width:820px){.pays{flex-wrap:wrap}}
.subfoot{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;padding-bottom:18px;font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr}}
.edit-fab{position:fixed;right:18px;bottom:18px;z-index:70;background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:12px 18px;border-radius:999px;box-shadow:var(--shadow)}
/* cart toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:90;background:var(--ink);color:#fff;font-weight:600;font-size:14.5px;padding:14px 20px;border-radius:14px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;transition:transform .35s cubic-bezier(.2,.9,.3,1.4);max-width:92vw}
.toast.show{transform:translate(-50%,0)}
.toast a{color:var(--yellow);font-weight:800}
/* product gallery */
.pd-left{display:flex;flex-direction:column;gap:12px}
.pd-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.pdt{width:70px;height:70px;border-radius:12px;border:2px solid var(--line);background:#fff;padding:0;overflow:hidden;cursor:pointer;transition:border-color .12s}
.pdt.on{border-color:var(--purple)}
.pdt img{width:100%;height:100%;object-fit:cover}
/* related carousel */
.carousel{position:relative}
.ctrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc(25% - 14px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.ctrack .card{scroll-snap-align:start}
.cbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:none;background:#fff;box-shadow:var(--shadow);color:var(--purple);font-size:22px;cursor:pointer}
.cbtn:hover{background:var(--purple);color:#fff}
.cbtn.prev{left:-14px}.cbtn.next{right:-14px}
@media(max-width:880px){.ctrack{grid-auto-columns:calc(70% - 10px)}.cbtn{display:none}}
/* coupon box */
.coupon-box{margin-bottom:14px}
.coupon-form{display:flex;gap:8px}
.coupon-form input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;text-transform:uppercase}
.coupon-form button{border:none;background:var(--ink);color:#fff;border-radius:10px;padding:0 16px;font-weight:700;cursor:pointer}
.coupon-on{background:#E7FBF4;color:#0E9E86;border-radius:10px;padding:10px 12px;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.coupon-rm{color:var(--coral);font-weight:700;font-size:12.5px}
.coupon-warn{background:#FFF6E0;color:#8A6D1B;border-radius:10px;padding:8px 12px;font-size:12.5px;margin-bottom:8px}
.cart-summary .row.disc{color:#0E9E86;font-weight:600}
/* whatsapp confirm */
.wa-confirm{display:block;text-align:center;background:#25D366;color:#fff;font-weight:700;padding:14px;border-radius:12px;margin:8px 0 8px;font-size:15px}
.wa-confirm:hover{filter:brightness(1.05)}
.wa-note{color:var(--soft);font-size:13px;margin:0 0 16px}
/* auth */
.auth-wrap{display:flex;justify-content:center}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;width:420px;max-width:100%;box-shadow:var(--shadow)}
.auth-card.wide-card{width:640px}
.auth-card h2{font-size:24px;margin:0 0 4px}
.auth-sub{color:var(--soft);margin:0 0 20px}
.auth-card .field{margin-bottom:14px}
.auth-alt{text-align:center;color:var(--soft);font-size:14px;margin:12px 0 0}
.auth-alt a{color:var(--purple);font-weight:700}
/* account */
.account-grid{display:grid;grid-template-columns:220px 1fr;gap:26px}
.acct-side{display:flex;flex-direction:column;gap:4px;align-self:start;background:var(--lav);border:1px solid var(--line);border-radius:16px;padding:12px}
.acct-side a{padding:11px 14px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--ink)}
.acct-side a:hover{background:#fff}
.acct-side a.on{background:var(--purple);color:#fff}
.acct-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.acard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow-sm)}
.acard .an{font-size:26px;font-weight:800;color:var(--purple)}
.acard .al{color:var(--soft);font-size:13px}
.acct-h{margin:0 0 14px;font-size:20px}
.acct-orders{display:flex;flex-direction:column;gap:10px}
.ao{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:box-shadow .12s,transform .12s}
.ao:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.ao-l b{display:block}.ao-l small{color:var(--soft)}
.ao-total{font-weight:800}
.ao-go{color:var(--purple);font-weight:700;font-size:14px}
.ao .pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;text-transform:capitalize;background:#EFEAFE;color:var(--purple)}
.ao .pill.pending{background:#FFF3D6;color:#997404}.ao .pill.confirmed{background:#E6F0FF;color:#2C6ED6}
.ao .pill.shipped{background:#E9E5FF;color:#5637CC}.ao .pill.delivered{background:#E7FBF4;color:#0E9E86}
.ao .pill.cancelled{background:#FFECEF;color:#C24666}
@media(max-width:820px){.account-grid{grid-template-columns:1fr}.acct-side{flex-direction:row;flex-wrap:wrap}
  .ao{grid-template-columns:1fr auto;gap:8px}.ao-total,.ao-go{grid-column:2}}

/* ---------- KidsMania hero slider ---------- */
/* White, not tinted: product photos are cut out on white, and any colour here
   left a visible rectangle around every phone in the slider. */
.hero-slider{position:relative;background:#fff;overflow:hidden;border-bottom:1px solid var(--line)}
/* all slides share one grid cell: the track keeps the height of the tallest slide,
   so swapping slides cross-fades instead of collapsing/jumping the layout */
.hs-track{position:relative;display:grid}
.hs-slide{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s}
.hs-slide.on{opacity:1;visibility:visible;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.hs-slide{transition:none}}
.hs-inner{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:30px;padding:44px 22px;min-height:420px}
.hs-kick{color:var(--teal);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.hs-txt h1{font-size:clamp(24px,3.6vw,40px);color:var(--ink);margin:10px 0 14px;line-height:1.12}
.hs-price{font-size:22px;margin-bottom:20px}
.hs-price b{color:var(--teal-dk);font-family:'Baloo 2'}
.hs-price s{color:var(--soft);font-size:16px;margin-left:6px;font-weight:400}
.hs-price .frm{font-size:14px;color:var(--soft)}
.hs-btn{display:inline-block;background:var(--teal);color:#fff;font-weight:800;padding:13px 30px;border-radius:999px;font-family:'Baloo 2'}
.hs-btn:hover{background:var(--teal-dk)}
.hs-img{display:flex;justify-content:center}
.hs-img img{max-height:360px;width:auto;border-radius:18px}
.hs-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:22px;color:var(--teal-dk);cursor:pointer;z-index:3;box-shadow:var(--shadow-sm)}
.hs-nav.prev{left:14px}.hs-nav.next{right:14px}
.hs-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3}
.hs-dot{width:10px;height:10px;border-radius:50%;border:none;background:rgba(16,132,116,.3);cursor:pointer;padding:0;transition:.2s}
.hs-dot.on{background:var(--teal);width:26px;border-radius:6px}
@media(max-width:820px){.hs-inner{grid-template-columns:1fr;text-align:center;padding:28px 20px;min-height:0}.hs-img{order:-1}.hs-img img{max-height:230px}.hs-nav{display:none}}

/* trust bar */
.trustrow{background:var(--charcoal);color:#fff}
.trustrow .tr{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 22px}
.trustrow .tri{display:flex;align-items:center;gap:11px;justify-content:center}
.trustrow .tri .ic{font-size:24px}
.trustrow .tri b{display:block;font-size:14px;font-weight:800}
.trustrow .tri small{color:#c9d2d0;font-size:12px}
@media(max-width:820px){.trustrow .tr{grid-template-columns:1fr 1fr;gap:14px 8px}}

/* ---------- BlockPlanet: visible dark header + bigger media ---------- */
.logo{color:var(--ink)}
.mainnav a{color:var(--ink);font-weight:700}
.mainnav a:hover{color:var(--teal)}
.burger{color:var(--ink)}
.acct-link{color:#fff !important;background:#25D366;padding:9px 16px;border-radius:999px;box-shadow:var(--shadow-sm)}
.acct-link:hover{background:#1EBE5A}
/* bigger hero slide image */
/* fixed image box = every slide is the same height, so the stacked track never shifts */
.hs-img img{height:420px;width:100%;max-height:none;object-fit:contain}
.hs-inner{min-height:460px}

/* product-card images fill the whole square — no empty letterbox gaps, on home + list */
.card .thumb{aspect-ratio:1/1;min-height:0}
.card .thumb img{width:100%;height:100%;max-height:none;object-fit:cover}

/* The header used to float over the hero, so the slide needed a big top pad to
   clear it. It is in normal flow now (sticky under the top bar), so that pad is
   just dead space — hence the ordinary padding here. */
@media(min-width:821px){
  .hs-inner{padding-top:46px;align-items:center}
}

/* ---------- brand logo (image replaces the old SVG mark + text) ---------- */
.logo img{height:46px;width:auto;display:block}
.logo{gap:0}
@media(max-width:900px){ .logo img{height:38px} }
@media(max-width:380px){ .logo img{height:32px} }
.mm-head .logo img{height:34px}
/* footer uses the full lockup incl. BUILD - PLAY - LEARN, on a dark background */
.site-foot .footlogo img{height:74px;width:auto}
@media(max-width:600px){ .site-foot .footlogo img{height:60px} }

/* search at the top of the slide-out menu (desktop .hsearch is hidden under 900px) */
.mm-search{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 5px 5px 16px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.mm-search input{flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;font-size:15px;color:var(--ink);padding:9px 0}
.mm-search button{flex:none;border:none;background:var(--teal);color:#fff;border-radius:999px;width:40px;height:40px;font-size:17px;cursor:pointer}

/* mobile slider: full-width image. No header clearance needed any more — the
   header sits in flow above, not floating over the slide. */
@media(max-width:820px){
  .hs-inner{padding:22px 14px 30px}
  .hs-img{order:-1;width:100%}
  /* full-width, but a fixed square box so every slide matches and nothing jumps */
  .hs-img img{width:100%;height:auto;aspect-ratio:1/1;max-height:none;border-radius:16px;object-fit:contain}
}

/* ---- BachatShop text wordmark (replaces image logo; theme-aware) ---- */
.logo .bw{font-family:'Baloo 2',"Segoe UI",sans-serif;font-weight:800;line-height:1;letter-spacing:.2px;margin-left:10px}
.logo .bw b{font-weight:800;color:var(--yellow)}                         /* default: over teal hero -> yellow */
header.solid .logo .bw b,body.inner .logo .bw b,.mm-head .logo .bw b{color:var(--teal)} /* on white -> teal */
.site-foot .logo .bw b{color:var(--yellow)}                              /* dark footer -> yellow */
.site-foot .footlogo{align-items:center}
.site-foot .footlogo .mark{width:50px;height:50px}
.site-foot .footlogo .bw{font-size:32px}

/* ---- Static intro hero (shown when no product images are on the slider yet) ---- */
.hero-static{color:#fff;padding:64px 0 72px;position:relative;overflow:hidden}
.hero-static .hs2-inner{display:flex;align-items:center;gap:30px;justify-content:space-between}
.hero-static .hs2-kick{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:7px 15px;border-radius:999px;margin-bottom:16px}
.hero-static h1{color:#fff;font-size:clamp(30px,5vw,52px);line-height:1.05;margin:0 0 14px;max-width:16ch}
.hero-static p{font-size:clamp(15px,2vw,19px);max-width:52ch;opacity:.95;margin:0 0 26px}
.hero-static .hs2-btn{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:800;font-family:'Baloo 2',sans-serif;padding:15px 34px;border-radius:999px;font-size:18px;box-shadow:0 10px 26px -10px rgba(0,0,0,.35)}
.hero-static .hs2-btn:hover{background:var(--yellow-dk)}
.hero-static .hs2-emojis{display:flex;gap:14px;flex:none}
.hero-static .hs2-emojis span{font-size:clamp(40px,7vw,84px);filter:drop-shadow(0 8px 14px rgba(0,0,0,.2));animation:bsfloat 4s ease-in-out infinite}
.hero-static .hs2-emojis span:nth-child(2){animation-delay:.5s}
.hero-static .hs2-emojis span:nth-child(3){animation-delay:1s}
.hero-static .hs2-emojis span:nth-child(4){animation-delay:1.5s}
@keyframes bsfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:760px){.hero-static .hs2-emojis{display:none}.hero-static{padding:48px 0 54px}}

/* ---- Branded placeholder tag on photo-less product tiles (mirrors the image watermark) ---- */
.thumb{position:relative}
.thumb .toy{filter:drop-shadow(0 6px 10px rgba(43,35,80,.12))}
.ph-tag{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.92);color:var(--teal);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;line-height:1;padding:5px 10px;border-radius:999px;
  box-shadow:0 4px 10px -4px rgba(16,132,116,.4);letter-spacing:.2px}
.ph-tag b{color:var(--yellow-dk)}
.ph-tag i{font-style:normal;color:var(--soft);font-weight:700;font-size:11px}

/* ---- BachatShop image logo (light over teal hero, dark on white header) ---- */
.logo .lgimg{height:46px;width:auto;display:block}
#siteHeader .logo{gap:0}
#siteHeader.solid .logo .lgimg,body.inner #siteHeader .logo .lgimg{height:40px} /* shrink on scroll/inner */
.mm-head .logo .lgimg{height:34px}
.site-foot .footlogo .lgimg{height:60px}
@media(max-width:900px){ .logo .lgimg{height:40px} }
@media(max-width:380px){ .logo .lgimg{height:34px} }

/* ---------- product-page free-delivery banner ---------- */
.free-lhr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 4px;padding:12px 16px;
  border-radius:12px;background:#E7FBF4;border:1px dashed #25D366;color:#0E8F79;font-size:15px}
.free-lhr b{font-weight:900;letter-spacing:.02em}
.free-lhr span{color:#0E8F79;opacity:.85;font-size:13px}

/* ---------- variant chip + quickstore-style single-column checkout (BlockPlanet parity) ---------- */
.ci-variant{display:inline-block;margin:2px 0;padding:2px 8px;border-radius:20px;background:var(--lav,#eef);color:var(--brand,#108474);font-size:.78rem;font-weight:700}
.qs-checkout{max-width:560px;margin:0 auto}
.qs-alert{max-width:560px;margin:0 auto 16px}
.qs-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 18px;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.qs-h{margin:0 0 14px;font-size:16px}
.qs-order{background:var(--lav)}
.qs-line{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.qs-line:first-of-type{padding-top:0}
.qs-thumb{width:56px;height:56px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qs-thumb img{width:100%;height:100%;object-fit:cover}
.qs-thumb .toy{font-size:26px}
.qs-info{flex:1;min-width:0}
.qs-info b{display:block;font-size:14px;line-height:1.3}
.qs-info small{display:block;color:var(--soft);font-size:12.5px;margin-top:2px}
.qs-info .ci-variant{margin:3px 0 0}
.qs-lt{font-weight:800;white-space:nowrap}
.qs-tot{margin-top:12px;padding-top:12px;border-top:2px dashed rgba(0,0,0,.12)}
.qs-tot .row{display:flex;justify-content:space-between;padding:5px 0;font-size:14.5px}
.qs-tot .row.disc{color:#0E9E86;font-weight:600}
.qs-tot .row.total{font-size:19px;font-weight:800;border-top:1px solid rgba(0,0,0,.12);margin-top:6px;padding-top:12px}
.qs-more{margin-top:6px}
.qs-more summary{cursor:pointer;color:var(--purple);font-weight:700;font-size:14px;padding:6px 0;list-style:none}
.qs-more summary::-webkit-details-marker{display:none}
.qs-more summary::before{content:"＋ ";font-weight:800}
.qs-more[open] summary::before{content:"－ "}
.qs-pay{background:#FFF6E0;color:#8A6D1B;border:1px solid #FFE39E;border-radius:12px;padding:12px 16px;font-size:14px;text-align:center;margin-bottom:12px}
.co-wa{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;background:#25D366;color:#fff;font-size:17px;font-weight:800;padding:15px 22px;border-radius:14px;margin-bottom:6px;box-shadow:0 6px 18px rgba(37,211,102,.28)}
.co-wa:hover{background:#1EBE5A;color:#fff}
.co-wa .ur{color:#eafff3;font-size:13px}
.co-or{display:flex;align-items:center;text-align:center;color:var(--ink);font-size:17px;font-weight:800;margin:20px 0}
.co-or::before,.co-or::after{content:"";flex:1;height:2px;background:var(--line)}
.co-or span{padding:0 16px}
.co-or .ur{font-size:15px;font-weight:700}
.qs-confirm{display:flex;width:100%;align-items:center;justify-content:center;font-size:18px;font-weight:800;padding:17px 24px;border-radius:14px}
.qs-trust{text-align:center;color:var(--soft);font-size:12.5px;margin:12px 0 0}
/* Urdu labels */
.ur{direction:rtl;unicode-bidi:isolate;font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Segoe UI",Tahoma,sans-serif;font-weight:600}
.field label .ur{display:inline-block;margin-inline-start:6px;color:var(--soft);font-size:13px}
.qs-h .ur{margin-inline-start:8px;color:var(--soft);font-size:14px;font-weight:700}
.qs-tot .row .ur{color:var(--soft);font-size:12.5px;font-weight:600;margin-inline-start:5px}
.qs-more summary .ur{color:var(--soft);font-size:13px;margin-inline-start:5px}
.qs-pay .ur,.qs-trust .ur{display:block;margin-top:4px;font-size:13px;font-weight:700}
.qs-confirm .ur{color:inherit;font-weight:800;margin-inline-end:6px}
.qs-checkout input::placeholder,.qs-checkout textarea::placeholder{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",inherit;opacity:.7}

/* ============================================================
   Irfan Corp additions — brand bar, spec chips, spec table
   ============================================================ */

/* one-line spec under a product card title: "6.7" AMOLED · 8GB · 5000mAh" */
.card .specline{
  font-size:12.5px;color:var(--soft);line-height:1.4;margin:-2px 0 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* brand filter strip on the shop / brand pages */
.brandbar{
  display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;margin-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.brandbar::-webkit-scrollbar{display:none}
.brandbar .chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:14px;
  text-decoration:none;white-space:nowrap;transition:.15s;
}
.brandbar .chip small{color:var(--soft);font-weight:600;font-size:11.5px}
.brandbar .chip:hover{border-color:var(--teal);color:var(--teal)}
.brandbar .chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.brandbar .chip.on small{color:rgba(255,255,255,.75)}

/* short indexable intro above a brand listing */
.brandintro{
  background:var(--teal-lt);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-bottom:18px;
}
.brandintro p{margin:0;color:var(--soft);font-size:14.5px;line-height:1.75}
.brandintro b{color:var(--ink)}
.brandintro .upd{margin-top:8px;font-size:12.5px;color:#98a2b3}

/* full specification table on the product page */
.spec-table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table tr:last-child{border-bottom:none}
.spec-table th{
  text-align:left;width:38%;padding:11px 16px;font-size:14px;font-weight:700;
  color:var(--ink);background:var(--teal-lt);vertical-align:top;
}
.spec-table td{padding:11px 16px;font-size:14px;color:var(--soft);line-height:1.6}
@media (max-width:560px){
  .spec-table th{width:44%;font-size:13px;padding:10px 12px}
  .spec-table td{font-size:13px;padding:10px 12px}
}

/* ============================================================
   Brand-yellow contrast overrides
   The engine was written for a dark primary colour and hard-codes
   color:#fff on it in many places. Yellow needs dark text, so every
   surface that is now #F3B807 gets --brand-ink instead of white.
   ============================================================ */
.btn,
.hsearch button,
.searchmini button,
.mm-search button,
.hs-btn,
.chip.on,
.brandbar .chip.on,
.afreset,
.pager .on,
.badge.new,
.ad-atc,
.ad-compare thead th:nth-child(2),
.cbtn:hover,
.acct-side a.on,
header.solid .cart-pill,
body.inner .cart-pill{ color:var(--brand-ink) }

.btn:hover,.cbtn:hover,.chip.on:hover,.afreset:hover{ color:var(--brand-ink) }
.btn.ghost{ background:#fff;color:var(--brand-ink);box-shadow:inset 0 0 0 2px var(--ink) }

/* dark hero and CTA panels: yellow text on black reads better than the reverse */
.cta{ background:linear-gradient(130deg,#1B1B1B,#000);color:#fff }
.cta h2,.cta .btn{ color:var(--brand-ink) }
.cta p{ color:rgba(255,255,255,.82) }

/* green/WhatsApp buttons keep white text — they are not on the yellow */
.card .add.buynow,.card .add.buynow:hover,.buynow-lg,.buynow-lg:hover{ color:#fff }
/* the sold-out badge and dark stock pill stay light-on-dark */
.badge{ color:#fff }
.badge.new{ color:var(--brand-ink) }
.stockbadge{ color:#fff }

/* header on the homepage sits over a dark hero: keep it legible */
.eyebrow{ color:var(--brand-dk) }

/* ============================================================
   Installment plan badge
   ============================================================ */
.instpill{
  display:inline-flex;align-items:center;gap:8px;
  background:#E9F7EF;border:1px solid #BFE6CE;color:#16794A;
  border-radius:10px;padding:9px 14px;margin:2px 0 12px;
  font-size:14.5px;font-weight:700;
}
.instpill svg{flex:none}
.instpill.sm{
  padding:4px 8px;border-radius:7px;font-size:11.5px;gap:5px;margin:4px 0 0;
}
.card .instpill.sm b{font-weight:700}

/* ============================================================
   Faceted filters (price range / RAM / storage)
   ============================================================ */
.facets{
  border:1px solid var(--line);border-radius:14px;background:#fff;
  margin-bottom:16px;overflow:hidden;
}
.facets > summary{
  cursor:pointer;list-style:none;padding:13px 18px;font-weight:800;color:var(--ink);
  display:flex;align-items:center;gap:10px;user-select:none;
}
.facets > summary::-webkit-details-marker{display:none}
.facets > summary::after{content:"▾";margin-left:auto;color:var(--soft);transition:transform .15s}
.facets[open] > summary::after{transform:rotate(180deg)}
.facets > summary:hover{background:var(--teal-lt)}
.facets .fcount{
  background:var(--brand);color:var(--brand-ink);border-radius:999px;
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;padding:0 6px;
}
.facetbody{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;
  padding:4px 18px 18px;border-top:1px solid var(--line);
}
.facetgroup h4{
  margin:14px 0 10px;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--soft);
}
.facetopts{display:flex;flex-wrap:wrap;gap:8px}
.facetopts .fopt{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 14px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-weight:700;font-size:13.5px;
  text-decoration:none;transition:.14s;white-space:nowrap;
}
.facetopts .fopt:hover{border-color:var(--brand);background:var(--teal-lt)}
.facetopts .fopt.on{
  background:var(--brand);border-color:var(--brand);color:var(--brand-ink);
  box-shadow:0 4px 12px -4px rgba(243,184,7,.7);
}
/* price band buttons run full width so the ranges line up and stay readable */
.facetgroup:first-child .facetopts{display:grid;grid-template-columns:1fr;gap:7px}
.facetgroup:first-child .fopt{justify-content:center}
@media (min-width:700px){
  .facetgroup:first-child .facetopts{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Floating "Ask on WhatsApp" button
   Opens a chat with us, pre-filled with the page the visitor is on.
   ============================================================ */
.wa-fab{
  position:fixed;right:18px;bottom:18px;z-index:170;
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;text-decoration:none;
  padding:12px 18px 12px 14px;border-radius:999px;font-weight:800;font-size:15px;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.65),0 2px 6px rgba(0,0,0,.18);
  transition:transform .14s,box-shadow .14s,background .14s;
}
.wa-fab:hover{background:#1EBE5A;transform:translateY(-2px);box-shadow:0 12px 30px -6px rgba(37,211,102,.7)}
.wa-fab .wa-ic{display:flex;align-items:center;justify-content:center;flex:none}
.wa-fab .wa-ic svg{display:block;shape-rendering:geometricPrecision}
.wa-fab .wa-ic svg,.wa-fab .wa-ic svg path{fill:#fff}
/* on phones the label would crowd the screen — keep the icon only */
@media(max-width:640px){
  .wa-fab{right:14px;bottom:14px;padding:14px;border-radius:50%;gap:0}
  .wa-fab .wa-txt{display:none}
}

/* ============================================================
   Logo lockup — square mark + IRFAN CORP wordmark
   ============================================================ */
.brandlock{display:inline-flex;align-items:center;gap:10px;line-height:1}
.brandlock .lgmark{
  height:38px;width:auto;display:block;flex:none;
}
.brandlock .lgword{
  display:inline-flex;gap:.34em;font-weight:800;letter-spacing:.01em;
  font-size:23px;font-family:'Nunito',"Segoe UI",system-ui,sans-serif;
}
.brandlock .lgword b{color:var(--ink);font-weight:800}
.brandlock .lgword i{color:var(--brand);font-style:normal;font-weight:800}
/* The homepage hero is a light gradient, so the header wordmark stays dark
   there too — only the dark footer needs the inverted treatment, where the
   mark also needs a light chip or its black outlines disappear. */
.brandlock.on-dark .lgword b{color:#fff}
.brandlock.on-dark .lgmark{
  background:#fff;border-radius:9px;padding:4px;height:44px;
}
.site-foot .brandlock .lgword{font-size:21px}
.mm-head .brandlock .lgword{font-size:19px}
.mm-head .brandlock .lgmark{height:32px}
@media(max-width:560px){
  .brandlock{gap:8px}
  .brandlock .lgmark{height:32px}
  .brandlock .lgword{font-size:19px}
}
@media(max-width:360px){
  .brandlock .lgword{font-size:17px}
}

/* ============================================================
   Layout fixes
   ============================================================ */
/* belt-and-braces: nothing may ever scroll the page sideways */
/* Do NOT put overflow-x on <html>. `hidden` there makes html the scroll
   container and breaks `position:sticky` on the header; `clip` additionally
   makes overflow-y compute to clip, so the page stops scrolling altogether.
   `overflow-x:hidden` on <body> alone (set near the top of this file) is
   propagated to the viewport by the UA, which blocks sideways scrolling and
   leaves the header sticking to the viewport as it should. */
body{max-width:100%}

/* the scroll arrows sit on top of the rail, so keep chips clear of them */
.catbar{padding-left:44px;padding-right:44px;scroll-padding-left:44px}
.catbar-wrap:not(.can-left) .catbar{padding-left:2px}
.catbar-wrap:not(.can-right) .catbar{padding-right:2px}

/* "Reset filters" was stretching to full width on phones and dominating the
   page — keep it the same size as the chips it sits beside */
@media(max-width:560px){
  .afreset{margin-left:0;width:auto;justify-content:center}
}
.activefilters{row-gap:8px}

/* the page heading already states the count; don't repeat it right below */
@media(max-width:700px){
  .shop-bar .resultcount{display:none}
  .shop-bar{justify-content:flex-end}
}

/* facet panel: single column on phones so the price bands stay readable */
@media(max-width:560px){
  .facetbody{grid-template-columns:1fr;gap:6px;padding:2px 14px 16px}
  .facets > summary{padding:12px 14px}
}

/* ============================================================
   Top bar — shop address, phone and social, above the header
   ============================================================ */
.topbar{background:var(--brand);color:var(--brand-ink);font-size:13.5px;font-weight:700}
.topbar .tb{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:38px;padding-top:6px;padding-bottom:6px;
}
.topbar .tb-item{
  display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;
  line-height:1.3;
}
.topbar .tb-item svg{flex:none;opacity:.85}
.topbar a.tb-item:hover{text-decoration:underline}
.topbar .tb-right{display:flex;align-items:center;gap:14px;flex:none}
.topbar .tb-soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--brand-ink);color:var(--brand);flex:none;transition:transform .14s;
}
.topbar .tb-soc:hover{transform:scale(1.09)}
@media(max-width:700px){
  .topbar{font-size:12px}
  .topbar .tb{flex-wrap:wrap;gap:6px 12px;justify-content:center;text-align:center}
  .topbar .tb-addr span{display:inline-block}
}
@media(max-width:420px){
  .topbar .tb-addr svg{display:none}
}

/* ============================================================
   Header now sits under the top bar, so it sticks instead of
   floating fixed over the page. The hero is a light gradient,
   so header text is dark ink on every page — the inherited
   white-on-dark treatment would have been invisible.
   ============================================================ */
header{position:sticky;top:0}
body.home header,body.inner header{position:sticky;top:0}
body.home header{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
body.home header.solid{box-shadow:0 8px 24px -14px rgba(20,20,20,.35)}
.logo,.burger{color:var(--ink)}
.mainnav a{color:var(--soft)}
.mainnav a:hover{color:var(--brand-dk)}
.acct-link{color:var(--ink)}
.hsearch{background:var(--teal-lt)}

/* ============================================================
   Contextual chip row — replaces the horizontally scrolling
   category rail. Chips wrap; nothing scrolls sideways.
   ============================================================ */
.chiprow{
  display:flex;flex-wrap:wrap;gap:9px;
  padding:4px 0 16px;margin-bottom:4px;
}
.chiprow .chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;transition:.14s;
}
.chiprow .chip small{color:var(--soft);font-weight:600;font-size:11.5px}
.chiprow .chip:hover{border-color:var(--brand);background:var(--teal-lt)}
.chiprow .chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.chiprow .chip.on small{color:rgba(20,20,20,.6)}
@media(max-width:560px){
  .chiprow{gap:7px}
  .chiprow .chip{padding:8px 13px;font-size:13.5px}
}

/* brand chips: 16 of them stack tall on a phone, so tighten them up */
@media(max-width:480px){
  .chiprow{gap:6px;padding-bottom:12px}
  .chiprow .chip{padding:7px 11px;font-size:12.5px;gap:4px}
  .chiprow .chip small{font-size:10.5px}
}

/* "Since 1999" under the wordmark */
.brandlock .lgtext{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0}
.brandlock .lgtag{
  font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--soft);line-height:1;white-space:nowrap;
}
.brandlock.on-dark .lgtag{color:rgba(255,255,255,.62)}
.mm-head .brandlock .lgtag{font-size:9px;letter-spacing:.14em}
@media(max-width:560px){
  .brandlock .lgtag{font-size:9px;letter-spacing:.13em}
}
/* 360px Android phones keep it — only the very narrowest drop it */
@media(max-width:339px){
  .brandlock .lgtag{display:none}
}

/* ============================================================
   Top bar: address, phone and Facebook all on ONE line at every
   width. The address truncates rather than wrapping — it links
   to Maps, so a clipped tail costs nothing.
   ============================================================ */
.topbar .tb{flex-wrap:nowrap !important;gap:12px;justify-content:space-between;text-align:left}
.topbar .tb-addr{min-width:0;flex:1 1 auto}
.topbar .tb-addr span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .tb-right{flex:0 0 auto;gap:12px}
.topbar .tb-item span{white-space:nowrap}
@media(max-width:700px){
  .topbar{font-size:12px}
  .topbar .tb{gap:10px;justify-content:space-between;text-align:left}
  .topbar .tb-right{gap:10px}
}
@media(max-width:480px){
  .topbar{font-size:11px}
  .topbar .tb{gap:8px;padding-top:5px;padding-bottom:5px}
  .topbar .tb-item{gap:5px}
  .topbar .tb-soc{width:22px;height:22px}
  .topbar .tb-soc svg{width:14px;height:14px}
}
@media(max-width:400px){
  .topbar{font-size:10.5px}
  .topbar .tb-item svg{width:13px;height:13px}
}

/* ============================================================
   "SINCE 1999" as a badge, not a whisper
   ============================================================ */
.brandlock .lgtag{
  display:inline-block;align-self:flex-start;
  background:var(--brand);color:var(--brand-ink);
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  line-height:1;white-space:nowrap;padding:3px 7px 2px;border-radius:4px;
  margin-top:2px;
}
.brandlock.on-dark .lgtag{background:var(--brand);color:var(--brand-ink)}
.mm-head .brandlock .lgtag{font-size:8.5px;letter-spacing:.13em;padding:3px 6px 2px}
@media(max-width:560px){
  .brandlock .lgtag{font-size:8.5px;letter-spacing:.12em;padding:2px 6px}
}

/* ============================================================
   Brand rail — one scrollable line with edge arrows
   ============================================================ */
.chiprow-wrap{position:relative;margin-bottom:4px}
.chiprow.scroller{
  flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 0 12px;margin-bottom:0;
}
.chiprow.scroller::-webkit-scrollbar{display:none}
.chiprow.scroller .chip{flex:none}
.chipnav{
  display:none;position:absolute;top:2px;height:38px;width:38px;z-index:3;
  align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.96);
  color:var(--ink);font-size:20px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(20,20,20,.4);transition:transform .14s,background .14s;
}
.chipnav:hover{background:#fff;transform:scale(1.08)}
.chipnav.prev{left:-6px}
.chipnav.next{right:-6px}
.chiprow-wrap.can-left  .chipnav.prev{display:flex}
.chiprow-wrap.can-right .chipnav.next{display:flex}
/* fade the edge the arrow sits on so chips don't look chopped */
.chiprow-wrap.can-right::after,
.chiprow-wrap.can-left::before{
  content:"";position:absolute;top:0;bottom:12px;width:44px;pointer-events:none;z-index:2;
}
.chiprow-wrap.can-right::after{right:0;background:linear-gradient(to left,#fff 30%,rgba(255,255,255,0))}
.chiprow-wrap.can-left::before{left:0;background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0))}
/* keep the first/last chip clear of whichever arrow is showing */
.chiprow-wrap.can-left  .chiprow.scroller{padding-left:38px}
.chiprow-wrap.can-right .chiprow.scroller{padding-right:38px}
@media(max-width:480px){
  .chipnav{width:34px;height:34px;font-size:18px}
  .chiprow-wrap.can-left  .chiprow.scroller{padding-left:34px}
  .chiprow-wrap.can-right .chiprow.scroller{padding-right:34px}
}

/* ============================================================
   Trust row — the four columns were butting into each other,
   worst on the 2x2 phone layout where the text of one column
   ran straight into the next.
   ============================================================ */
.trustrow .tr{gap:14px 30px;padding:18px 22px}
.trustrow .tri{align-items:flex-start}
.trustrow .tri .ic{line-height:1.15}
.trustrow .tri b{line-height:1.3}
.trustrow .tri small{display:block;line-height:1.45}
@media(max-width:820px){
  .trustrow .tr{grid-template-columns:1fr 1fr;gap:20px 28px;padding:20px 22px}
  /* left-aligned reads as a tidy two-column list; centred blocks collide */
  .trustrow .tri{justify-content:flex-start;gap:10px}
  .trustrow .tri .ic{font-size:21px}
  .trustrow .tri b{font-size:13.5px}
  .trustrow .tri small{font-size:11.5px}
}
@media(max-width:520px){
  .trustrow .tr{gap:18px 20px;padding:18px 16px}
  .trustrow .tri{gap:9px}
  .trustrow .tri .ic{font-size:19px}
  .trustrow .tri b{font-size:12.5px}
  .trustrow .tri small{font-size:11px}
}

/* "You save Rs 18,001" must not break across two lines */
.pd-price{flex-wrap:wrap;row-gap:6px}
.pd-price .save{white-space:nowrap}
.pd-price .now,.pd-price .was{white-space:nowrap}
.card .savepill{white-space:nowrap}

/* ============================================================
   Footer: the logo column and the "Shop" column were running
   into each other. Grid items default to min-width:auto, so a
   wide item (the logo lockup) pushes into its neighbour instead
   of shrinking. Pin them to min-width:0, widen the column gap,
   and drop to a single column on phones where two columns of
   long link names never had room anyway.
   ============================================================ */
.foot{gap:28px 40px}
.foot > *{min-width:0}
.foot .about p{overflow-wrap:anywhere}
.site-foot .brandlock{flex-wrap:wrap;row-gap:6px;max-width:100%}
.site-foot .brandlock .lgword{font-size:20px}
@media(max-width:640px){
  .foot{grid-template-columns:1fr;gap:26px}
  .foot .about p{max-width:100%}
}