/* =========================================================
   header.css  -  base + WATER GLASS header + logo + nav + mega menus
                  + icons + mobile menu + right Search/Cart panels
   Ye file har page me sabse pehle link karni hai
   --bub = hover bubble ka radius (999px = gol bubble, 0 = bilkul square)

   NAYE VARIABLES (yahin se easily change karo):
   --hm   = header ka left/right margin (50px)
   --hr8  = header / mega / panels ka border radius (8px, 5-10px ke beech)
   --htop = header ka top margin (normal)      -> 48px  (mobile <=620px: 38px)
   --htops= header ka top margin (scroll par)  -> 36px  (mobile <=620px: 18px)
   --hov  = hover par text ka rang (ab safed). Price ka golden rang --gold hi hai.
   --bead-bg = logo circle ka background (transparent PNG logo ke liye lagbhag solid)
        rgba(255,255,255,.92) = lagbhag solid white (dark/colored logo ke liye)
        rgba(255,255,255,.75) = thoda glass look
        rgba(6,34,58,.92)     = dark navy (agar logo safed/light rang ka ho)
   ========================================================= */

/* ===== base / shared ===== */
:root{
  --navy:#06223a; --deep:#0b3a5c; --ice:#5ad0ff; --mint:#b8f1e6; --paper:#f3f8fb; --ink:#102a3d;
  --blue1:#9fe6ff; --blue2:#5ad0ff; --blue3:#1b8fc4;
  --glass:rgba(255,255,255,.14); --glass2:rgba(255,255,255,.3); --edge:rgba(255,255,255,.45);
  --gold:#ffe066;
  --hov:#fff;     /* hover par text ka rang (pehle golden tha) */
  --bub:999px;
  --hm:50px;      /* header left/right margin */
  --hr8:8px;      /* header border radius */
  --htop:48px;    /* header top margin */
  --htops:36px;   /* scroll par top margin (logo circle ab top se nahi chipkega) */
  --bead-bg:rgba(255,255,255,.92); /* logo circle background (kam transparent) */
  --base:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--base);color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
img{max-width:100%;display:block}
.wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
/* logo circle aur uska hole ek saath hilen, isliye bob ek shared variable se */
@property --bob{syntax:'<length>';inherits:true;initial-value:0px}
@keyframes bobvar{0%,100%{--bob:0px}50%{--bob:-2.5px}}
/* logo hole ke variables animate ho sakein (circle ke sath hole bhi smoothly chhota ho) */
@property --hx{syntax:'<length>';inherits:true;initial-value:-999px}
@property --hr{syntax:'<length>';inherits:true;initial-value:0px}
@property --hgap{syntax:'<length>';inherits:true;initial-value:2px}
html.panel-open,html.panel-open body{overflow:hidden}

/* ===== HEADER (water glass, left/right margin, 8px radius) =====
   Glass .header::before me hai, aur logo circle ki jagah uska "hole" hai
   (hole ki position header.js se --hx/--hy/--hr me set hoti hai) */
.header{
  --hx:-999px; --hy:0px; --hr:0px;
  --hgap:2px;
  animation:bobvar 5s ease-in-out infinite;
  position:fixed;z-index:100;
  top:var(--htop);
  left:var(--hm);
  width:calc(100% - (var(--hm) * 2));
  height:64px;padding:0 16px 0 22px;
  border-radius:var(--hr8);
  display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff;
  background:none;
  border:0;
  box-shadow:
    0 2px 3px rgba(0,25,50,.15),
    0 14px 24px -8px rgba(0,25,50,.28),
    0 24px 40px -16px rgba(90,208,255,.18);
  text-shadow:0 1px 4px rgba(0,20,40,.65);
  transition:top .3s,--hx .4s cubic-bezier(.25,1.1,.4,1),--hr .4s cubic-bezier(.25,1.1,.4,1),--hgap .4s cubic-bezier(.25,1.1,.4,1);
}
/* scroll par: logo ka size SAME rehta hai, sirf header halka sa upar move hota hai.
   Logo circle header se 17px upar nikla hai + ring 5px = 22px, isliye top 36px rakha hai
   taaki circle ke upar 14px ki jagah bache aur wo screen ke top se na chipke */
.header.scrolled{top:var(--htops)}
/* nav ko ab shift karne ki zarurat nahi, kyunki logo chhota nahi hota */
.header>.nav{transition:margin-left .4s cubic-bezier(.25,1.1,.4,1)}
.header>*{position:relative;z-index:2}
/* nav static: mega menu header ke hisaab se (poori width) khule */
.header>.nav{position:static}
.header::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:var(--hr8);
  border:1px solid rgba(255,255,255,.3);
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%) 0 0/100% 45% no-repeat,
    radial-gradient(120% 120% at 15% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),
    radial-gradient(80% 100% at 90% 120%,rgba(120,215,255,.14),rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(235,248,255,.08),rgba(200,235,252,.04));
  backdrop-filter:blur(6px) saturate(170%) brightness(1.06);
  -webkit-backdrop-filter:blur(6px) saturate(170%) brightness(1.06);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 12px 16px -10px rgba(255,255,255,.25),
    inset 0 -10px 14px -8px rgba(0,60,110,.22),
    inset 0 0 20px 2px rgba(255,255,255,.06);
  -webkit-mask-image:radial-gradient(circle at var(--hx) calc(var(--hy) + var(--bob)),transparent calc(var(--hr) + var(--hgap)),#000 calc(var(--hr) + var(--hgap) + 1px));
  mask-image:radial-gradient(circle at var(--hx) calc(var(--hy) + var(--bob)),transparent calc(var(--hr) + var(--hgap)),#000 calc(var(--hr) + var(--hgap) + 1px));
}

/* ===== LOGO ===== */
.logo{display:flex;align-items:center;gap:14px;flex:none}
/* LOGO CIRCLE (sikka): background ab --bead-bg se aata hai (lagbhag solid), taaki
   transparent PNG logo saaf dikhe. Zyada/kam transparency ke liye :root me --bead-bg badlo */
.bead{position:relative;flex:none;width:98px;height:98px;margin:-17px 0;border-radius:50%;
  display:grid;place-items:center;text-shadow:none;
  background:var(--bead-bg);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  box-shadow:
    inset -4px -7px 11px rgba(0,80,130,.18),
    inset 0 0 0 2px rgba(255,255,255,.55),
    0 12px 20px -4px rgba(0,25,50,.3),
    0 2px 3px rgba(0,25,50,.2);
  transform:translateY(var(--bob));
  transition:width .4s cubic-bezier(.25,1.1,.4,1),height .4s cubic-bezier(.25,1.1,.4,1),margin .4s ease,box-shadow .4s ease}
/* glossy patti ab logo ke peeche (z-index 0), logo ke colors nahi dabte */
.bead::before{content:"";position:absolute;z-index:0;left:15%;top:8%;width:38%;height:22%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));transform:rotate(-24deg);pointer-events:none}
.bead::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  box-shadow:0 0 12px rgba(90,208,255,.2);pointer-events:none}
.bead img{position:relative;z-index:3;height:88px;width:auto;object-fit:contain;border-radius:0;background:none;padding:0;filter:none;
  transition:transform .5s cubic-bezier(.25,1.25,.4,1),height .4s cubic-bezier(.25,1.1,.4,1)}
.bead:hover img,
.logo:hover .bead img{transform:scale(1.18)}
.brand-name{flex:none;font-size:22px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;color:#fff}

/* ===== NAV ===== */
.nav{display:flex;gap:4px;font-size:14px;text-transform:uppercase;letter-spacing:.02em;font-weight:500;white-space:nowrap}
.nav>li{position:relative}
/* mega menu wale li static: mega header ke hisaab se 100% width me khulta hai (li ke hisaab se nahi) */
.nav>li.has-mega{position:static}
.nav>li>a{display:block;padding:10px 16px;border-radius:0;position:relative;z-index:1;
  transition:background .25s,transform .4s cubic-bezier(.25,1.25,.4,1),text-shadow .4s ease,color .3s ease}
/* hover par sirf bubble dikhega, link ka apna background nahi */
.nav>li>a:hover,.nav>li>a.active{background:transparent}
.nav>li>a.active{font-weight:700}
.nav>li:hover>a{color:var(--hov);transform:translateY(-1px);text-shadow:0 1px 3px rgba(0,25,60,.75)}
.chev{display:inline-block;vertical-align:middle;margin:-2px 0 0 5px;transition:transform .3s ease}
.nav>li:hover>a .chev,.nav>li:focus-within>a .chev{transform:rotate(180deg)}
/* link se mega menu tak mouse ka invisible pul (hover na toote) - sirf hover ke time banta hai */
.nav>li.has-mega:hover>a::after{content:"";position:absolute;left:-8px;right:-8px;top:100%;height:34px}

/* ===== WATER BUBBLE (nav + mega menu dono, bubble jaisa look) ===== */
.nav>li.nav-water,
.mega-water{
  border-radius:var(--bub)!important;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.65) 0,rgba(255,255,255,.18) 14%,rgba(255,255,255,0) 38%),
    radial-gradient(circle at 75% 90%,rgba(130,220,255,.40) 0,rgba(130,220,255,0) 55%),
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(110,200,255,.10));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.7),
    inset 0 -8px 14px rgba(0,130,210,.18),
    inset 3px 0 6px rgba(255,255,255,.18),
    0 8px 18px rgba(0,120,200,.18),
    0 0 14px rgba(120,220,255,.25);
  -webkit-backdrop-filter:blur(3px) saturate(160%);
  backdrop-filter:blur(3px) saturate(160%);
  overflow:hidden;pointer-events:none;opacity:0;
}

/* nav bubble */
.nav>li.nav-water{
  position:absolute;top:50%;left:0;width:0;height:38px;
  margin:0;padding:0;list-style:none;
  transform:translateY(-50%);
  z-index:0;
  transition:left .5s cubic-bezier(.25,1.25,.4,1),width .5s cubic-bezier(.25,1.25,.4,1),opacity .3s ease;
}
.nav>li.nav-water.show{opacity:1;animation:bubbleWobble 2.8s ease-in-out infinite}
.nav>li.nav-water::after,
.mega-water::after{
  content:"";position:absolute;top:4px;left:14%;width:60%;height:7px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:waterShine 3s ease-in-out infinite;
}
@keyframes waterShine{50%{transform:translateX(6px) scaleX(.9);opacity:.7}}
@keyframes bubbleWobble{
  0%,100%{transform:translateY(-50%) scale(1,1)}
  35%{transform:translateY(calc(-50% - 1px)) scale(1.03,.97)}
  70%{transform:translateY(calc(-50% + 1px)) scale(.98,1.03)}
}

/* mega menu bubble (links/pills ke beech slide karta hai) */
.mega>.mega-water{margin:0;max-width:none}
.mega-water{
  position:absolute;top:0;left:0;width:0;height:0;z-index:0;
  transition:top .5s cubic-bezier(.25,1.25,.4,1),left .5s cubic-bezier(.25,1.25,.4,1),
             width .5s cubic-bezier(.25,1.25,.4,1),height .5s cubic-bezier(.25,1.25,.4,1),
             opacity .3s ease;
}
.mega-water.show{opacity:1;animation:bubbleWobbleM 2.8s ease-in-out infinite}
@keyframes bubbleWobbleM{
  0%,100%{transform:scale(1,1)}
  35%{transform:translateY(-1px) scale(1.03,.97)}
  70%{transform:translateY(1px) scale(.98,1.03)}
}

/* ===== MEGA MENU (hover par, water glass, 8px radius) ===== */
.mega{
  position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:5;
  padding:24px 28px 26px;color:#fff;text-shadow:0 1px 4px rgba(0,20,40,.65);
  text-transform:none;letter-spacing:0;font-weight:400;white-space:normal;
  border-radius:var(--hr8);
  background:
    linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 60%) 0 0/100% 30% no-repeat,
    radial-gradient(120% 120% at 15% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 55%),
    radial-gradient(80% 100% at 90% 120%,rgba(120,215,255,.12),rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(235,248,255,.10),rgba(200,235,252,.06));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 12px 16px -10px rgba(255,255,255,.22),
    inset 0 -10px 14px -8px rgba(0,60,110,.22),
    inset 0 0 18px 2px rgba(255,255,255,.06),
    0 2px 3px rgba(0,25,50,.15),
    0 16px 26px -6px rgba(0,25,50,.3),
    0 26px 40px -14px rgba(90,208,255,.2);
  backdrop-filter:blur(10px) saturate(170%) brightness(1.05);
  -webkit-backdrop-filter:blur(10px) saturate(170%) brightness(1.05);
  transform-origin:var(--ox,50%) -16px;
  max-height:calc(100vh - 170px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;
  opacity:0;visibility:hidden;transform:translateY(-22px);
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s linear .45s;
}
.nav>li:hover>.mega,.nav>li:focus-within>.mega{
  opacity:1;visibility:visible;transform:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease,visibility 0s;
}
/* click ke baad turant band (mouse move par wapas) */
.nav>li.sub-closed:hover>.mega,
.nav>li.sub-closed:focus-within>.mega{
  opacity:0;visibility:hidden;transform:translateY(-22px);pointer-events:none;
  transition:transform .3s ease,opacity .2s ease,visibility 0s linear .3s;
}

/* content poori width me, bade screen par max 1320px center me */
.mega>*{max-width:1320px;margin-left:auto;margin-right:auto}
.mega-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.mega-head h4{font-size:17px;font-weight:700}
.mega-links{display:flex;align-items:center;gap:8px}
.mega-empty{padding:26px 0;color:rgba(255,255,255,.7);font-size:14px}

/* pill buttons (View all / Featured brands ...) */
.pill{position:relative;z-index:1;display:inline-block;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.35);
  transition:background .25s,color .25s,transform .4s cubic-bezier(.25,1.25,.4,1)}
.pill:hover{background:rgba(255,255,255,.2);color:var(--hov);transform:translateY(-1px);text-shadow:0 1px 3px rgba(0,25,60,.75)}
.pill-main{background:linear-gradient(180deg,#bff0ff,#5ad0ff 60%,#2c9fd6);color:var(--navy);border-color:rgba(255,255,255,.7)}
.pill-main:hover{background:linear-gradient(180deg,#d6f6ff,#7bdcff 60%,#3aaee0);color:var(--navy)}
/* round arrow buttons */
.rbtn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4);
  transition:background .25s,color .25s,transform .4s cubic-bezier(.25,1.25,.4,1)}
.rbtn:hover{background:rgba(255,255,255,.22);color:var(--hov);transform:scale(1.1)}

/* Shop By layout */
.mega-shop{display:grid;grid-template-columns:repeat(4,minmax(120px,160px)) minmax(0,1fr);gap:22px}
/* Main / By category / By type / By brand headings = "Trend this week" jaisa
   (17px, bold, safed, aur same 40px height taaki "Trend this week" ke saath ek line me aayein) */
.mcol h4{font-size:17px;font-weight:700;color:#fff;
  min-height:40px;display:flex;align-items:center;margin:0 0 16px 10px}
.mcol a:not(.pill){position:relative;z-index:1;display:block;padding:8px 10px;border-radius:0;font-size:14px;
  transition:color .3s,transform .4s cubic-bezier(.25,1.25,.4,1),text-shadow .4s ease}
.mcol a:not(.pill):hover,.mcol a:not(.pill):focus-visible{
  color:var(--hov);transform:translateY(-1px);text-shadow:0 1px 3px rgba(0,25,60,.75)}
.mcol .pill{margin:10px 0 0 10px}
.mtrend{border-left:1px solid rgba(255,255,255,.2);padding-left:24px;min-width:0}

/* horizontal sliders (Trend / Brands) */
.hscroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start}
.mtrend .pcard{flex:0 0 168px}
.mtrend .pcard-img{height:130px}

/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.pcard{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.3),0 12px 24px -10px rgba(0,25,50,.55);
  transition:transform .45s cubic-bezier(.25,1.25,.4,1),border-color .3s,box-shadow .3s}
.pcard:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.75);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 18px 30px -10px rgba(0,25,50,.65),0 0 0 2px rgba(255,255,255,.25)}
.pcard-link{display:block;flex:1}
.pcard-img{height:170px;background:#eaf2f7}
.pcard-img img,.bcard-img img,.citem-img img{width:100%;height:100%;object-fit:contain}
.pcard-info{padding:12px 14px 0}
.pcard-info small{display:block;font-size:11px;letter-spacing:.04em;color:var(--ice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-info h5{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.pcard:hover .pcard-info h5{color:var(--hov);text-shadow:0 1px 3px rgba(0,25,60,.75)}
.pcard-foot{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 14px}
.pcard-price{font-weight:700;color:var(--gold);font-size:15px}
.pcard-add{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);
  transition:background .25s,color .25s,transform .4s cubic-bezier(.25,1.25,.4,1)}
.pcard-add:hover{background:var(--hov);color:var(--navy);transform:scale(1.12)}
.pcard-add:disabled{opacity:.8;cursor:default}

/* brand cards */
.bcard{flex:0 0 168px;display:block;padding:8px;border-radius:20px;text-align:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.3),0 12px 24px -10px rgba(0,25,50,.55);
  transition:transform .45s cubic-bezier(.25,1.25,.4,1),border-color .3s}
.bcard:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.75)}
.bcard-img{height:130px;border-radius:14px;background:#eaf2f7;display:grid;place-items:center}
.bcard span{display:block;padding:10px 4px 4px;font-size:14px;font-weight:600;transition:color .3s}
.bcard:hover span{color:var(--hov);text-shadow:0 1px 3px rgba(0,25,60,.75)}

/* ===== image loading skeleton (black-white wave) ===== */
.img-skeleton{position:relative;overflow:hidden;background:#e9f1f6}
.img-skeleton::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(110deg,rgba(6,34,58,.10) 0%,rgba(6,34,58,.20) 25%,rgba(255,255,255,.95) 50%,rgba(6,34,58,.20) 75%,rgba(6,34,58,.10) 100%);
  background-size:280% 100%;
  animation:skel 2.2s ease-in-out infinite;
}
.img-skeleton.loaded::before{animation:none;opacity:0;transition:opacity .3s ease}
@keyframes skel{0%{background-position:280% 0}100%{background-position:-280% 0}}
img.lazy-fade-img{position:relative;z-index:2;opacity:0;transition:opacity .4s ease}
img.lazy-fade-img.loaded{opacity:1}

/* ===== RIGHT SIDE: search / wishlist / cart icons ===== */
.hright{display:flex;align-items:center;gap:8px;flex:none}
.hicons{display:flex;align-items:center;gap:6px}
.hicon{position:relative;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  transition:background .25s,transform .4s cubic-bezier(.25,1.25,.4,1),color .3s ease}
.hicon:hover,.hicon:focus-visible{background:rgba(255,255,255,.14);color:var(--hov);transform:scale(1.08)}
.badge{position:absolute;top:1px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;color:#fff;
  background:#e53935;border:1.5px solid rgba(255,255,255,.85);text-shadow:none}
.badge.pop{animation:badgePop .5s ease}
@keyframes badgePop{50%{transform:scale(1.5)}}

/* ===== BURGER + MOBILE MENU ===== */
.burger{display:none;width:44px;height:44px;border-radius:50%;position:relative;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.5)}
.burger i{position:absolute;left:13px;width:16px;height:1.5px;background:#fff;transition:.3s}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:27px}
.burger.open i:nth-child(1){top:21px;transform:rotate(45deg)}.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){top:21px;transform:rotate(-45deg)}
/* mobile menu header ke neeche, header ke same left/right margin ke sath */
.mobile{position:fixed;z-index:99;top:calc(var(--htop) + 64px + 12px);left:var(--hm);right:var(--hm);padding:12px;border-radius:var(--hr8);color:#fff;
  max-height:calc(100vh - var(--htop) - 64px - 34px);overflow-y:auto;
  background:rgba(6,34,58,.6);border:1px solid var(--edge);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s}
.mobile.open{opacity:1;visibility:visible;transform:none}
.mobile a,.mobile .mg-h{display:block;width:100%;padding:13px 16px;border-radius:0;text-align:left;text-transform:uppercase;letter-spacing:.02em}
.mobile a:hover,.mobile .mg-h:hover{background:rgba(255,255,255,.2)}
.mobile .s{padding-left:32px;font-size:14px;opacity:.85;text-transform:none;letter-spacing:0}
.mobile .ml{padding:10px 16px 2px 32px;font-size:12px;color:rgba(255,255,255,.55)}
.mobile .mg-h{display:flex;justify-content:space-between;align-items:center}
.mobile .mg-h[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mg-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.mg-b>div{overflow:hidden}
.mg-h[aria-expanded="true"]+.mg-b{grid-template-rows:1fr}

/* =========================================================
   RIGHT SIDE PANELS (Search + Cart) - glass card, right se slide
   ========================================================= */
.po{position:fixed;inset:0;z-index:1000;background:rgba(2,14,26,.45);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.po.open{opacity:1;visibility:visible;transition:opacity .35s ease}
.hpanel{
  position:fixed;z-index:1001;top:16px;right:16px;bottom:16px;width:min(430px,calc(100% - 32px));
  display:flex;flex-direction:column;color:#fff;overflow:hidden;
  border-radius:30px 26px 28px 24px / 26px 30px 24px 28px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%),rgba(6,34,58,.72);
  border:1px solid var(--edge);
  box-shadow:inset 3px 4px 8px -3px rgba(255,255,255,.3),inset -4px -6px 10px -4px rgba(0,45,90,.3),0 30px 70px -20px rgba(0,25,50,.7);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  transform:translateX(calc(100% + 40px));visibility:hidden;
  transition:transform .55s cubic-bezier(.22,1,.36,1),visibility 0s linear .55s}
.hpanel.open{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.22,1,.36,1),visibility 0s}
.hp-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px 14px}
.hp-head h3{font-size:18px;font-weight:700}
.hp-close{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);
  transition:background .25s,color .25s,transform .4s cubic-bezier(.25,1.25,.4,1)}
.hp-close:hover{background:rgba(255,255,255,.22);color:var(--hov);transform:rotate(90deg)}
.hp-body{flex:1;overflow-y:auto;padding:4px 24px 20px;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.hp-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.6);margin:18px 0 10px}

/* search */
.sfield{position:relative;display:block;margin:0 24px 6px}
.sfield svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);opacity:.8;pointer-events:none}
.sfield input{width:100%;height:50px;padding:0 18px 0 46px;border-radius:25px;color:#fff;font:inherit;outline:0;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 2px 6px rgba(0,25,50,.25);transition:border-color .25s,box-shadow .25s}
.sfield input::placeholder{color:rgba(255,255,255,.6)}
.sfield input:focus{border-color:var(--ice);box-shadow:0 0 0 3px rgba(90,208,255,.25)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 14px;border-radius:999px;font-size:13px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
  transition:background .25s,color .25s,transform .4s cubic-bezier(.25,1.25,.4,1)}
.chip:hover{background:rgba(255,255,255,.2);color:var(--hov);transform:translateY(-2px)}
.search-products{display:flex;flex-direction:column;gap:12px}
.s-note{padding:18px 4px;font-size:14px;color:rgba(255,255,255,.7)}
.s-note.err{color:#ff9a9a}
.search-product-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  transition:border-color .3s,background .3s,transform .4s cubic-bezier(.25,1.25,.4,1)}
.search-product-item:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);transform:translateX(-3px)}
.search-img-wrapper{width:62px;height:62px;flex:none;border-radius:12px;overflow:hidden;background:#eaf2f7}
.search-product-item img{width:62px;height:62px;object-fit:contain;border-radius:12px;background:#eaf2f7}
.search-product-item h5{font-size:14px;font-weight:600;line-height:1.3}
.search-product-item p{font-size:12px;color:rgba(255,255,255,.65)}
.search-product-item span{font-size:13px;font-weight:700;color:var(--gold)}

/* cart */
.citem{position:relative;display:flex;gap:14px;padding:12px;margin-bottom:12px;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  transition:opacity .3s ease,transform .3s ease,border-color .3s}
.citem:hover{border-color:rgba(255,255,255,.4)}
.citem.enter,.citem.out{opacity:0;transform:translateX(30px)}
.citem-img{display:block;flex:none;width:82px;height:100px;border-radius:14px;background:#eaf2f7}
.citem-body{flex:1;min-width:0;padding-right:22px}
.citem-body small{display:block;font-size:11px;letter-spacing:.04em;color:var(--ice)}
.citem-body h5{font-size:14px;font-weight:600;margin-bottom:10px;line-height:1.3}
.citem-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qty{display:flex;align-items:center;padding:2px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3)}
.qty button{width:28px;height:28px;border-radius:50%;font-size:16px;line-height:1;transition:background .2s,color .2s}
.qty button:hover:not(:disabled){background:rgba(255,255,255,.2);color:var(--hov)}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty input{width:30px;text-align:center;border:0;background:none;color:#fff;font:inherit;font-weight:700;font-size:13px;outline:0;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty button.shake{animation:shake .3s ease}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.cprice{font-size:15px;font-weight:700;color:var(--gold);white-space:nowrap}
.cremove{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  color:rgba(255,255,255,.55);transition:color .25s,transform .3s ease,background .25s}
.cremove:hover{color:#ff7b7b;background:rgba(255,255,255,.1);transform:rotate(12deg)}
.climit{display:none;margin-top:6px;font-size:12px;font-weight:600;color:#ff9a9a}
.climit.show{display:block}
.cart-empty{text-align:center;margin-top:60px;color:rgba(255,255,255,.65)}
.cart-foot{padding:18px 24px 24px;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:10px}
.ctotal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.ctotal span{color:rgba(255,255,255,.7);font-size:14px}
.ctotal b{font-size:20px}
.btn-main,.btn-ghost{display:block;text-align:center;height:50px;line-height:48px;border-radius:16px;font-weight:700;font-size:14px;
  transition:transform .4s cubic-bezier(.25,1.25,.4,1),box-shadow .3s,background .25s,color .25s}
.btn-main{color:var(--navy);background:linear-gradient(180deg,#bff0ff,#5ad0ff 60%,#2c9fd6);border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.7),0 10px 20px -8px rgba(90,208,255,.6)}
.btn-main:hover{transform:translateY(-2px);box-shadow:inset 0 1px 2px rgba(255,255,255,.7),0 14px 26px -8px rgba(90,208,255,.8)}
.btn-ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.2);color:var(--hov)}

/* toast (stock limit / success) - header ke neeche */
#alifToastBox{position:fixed;top:calc(var(--htop) + 64px + 16px);right:20px;z-index:1100;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.alif-toast{display:flex;align-items:center;gap:10px;min-width:220px;max-width:320px;padding:12px 16px;border-radius:16px;
  color:#fff;font-size:13px;font-weight:600;
  background:rgba(6,34,58,.78);border:1px solid var(--edge);border-left:4px solid #ff6b6b;
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 14px 30px -10px rgba(0,25,50,.6);
  opacity:0;transform:translateX(30px);transition:opacity .3s ease,transform .3s ease}
.alif-toast.show{opacity:1;transform:none}
.alif-toast.success{border-left-color:var(--ice)}

/* ===== RESPONSIVE (margin + nav/icons width ke hisaab se adjust, kuch bahar nahi nikalta) ===== */
.nav{min-width:0}
.hright{min-width:0}
@media(max-width:1600px){
  :root{--hm:40px}
  .nav{font-size:13px;gap:2px}
  .nav>li>a{padding:9px 11px}
  .brand-name{font-size:20px}
  .mega{padding:22px 22px 24px}
  .mega-shop{grid-template-columns:repeat(4,minmax(100px,130px)) minmax(0,1fr);gap:16px}
}
@media(max-width:1440px){
  :root{--hm:30px}
  .header{padding:0 12px 0 20px;gap:10px}
  .nav{font-size:12.5px;gap:0}
  .nav>li>a{padding:8px 8px}
  .chev{margin-left:3px}
  .brand-name{font-size:19px}
  .logo{gap:10px}
  .hright{gap:4px}
  .hicons{gap:2px}
  .hicon{width:40px;height:40px}
}
@media(max-width:1300px){
  :root{--hm:20px}
  .nav{display:none}
  .burger{display:block}
  .bead{width:80px;height:80px;margin:-8px 0}
  .bead img{height:70px}
  .brand-name{font-size:19px}
}
@media(max-width:620px){
  /* MOBILE: top margin halka kam (44 -> 38px).
     Scroll par header aur upar jaakar rukta hai (34 -> 18px).
     Aur upar chahiye to --htops kam karo (logo circle ko upar ~13px chahiye, isliye 14px se neeche mat jao) */
  :root{--hm:8px;--htop:38px;--htops:18px}
  .header{padding:0 10px 0 14px;gap:8px}
  .brand-name{font-size:15px}
  .hicon-wish{display:none}
  .hicon{width:38px;height:38px}
  .burger{width:40px;height:40px}
  .burger i{left:11px}
  .burger i:nth-child(1){top:13px}.burger i:nth-child(2){top:19px}.burger i:nth-child(3){top:25px}
  .burger.open i:nth-child(1),.burger.open i:nth-child(3){top:19px}
  .logo{gap:8px;min-width:0}
  .hpanel{top:10px;right:10px;bottom:10px;width:calc(100% - 20px)}
  #alifToastBox{right:10px;left:10px}
  .alif-toast{max-width:none}
}
@media(max-width:400px){
  .header{padding:0 8px 0 12px}
  .bead{width:60px;height:60px}
  .bead img{height:53px}
  .brand-name{font-size:13px;letter-spacing:0}
}
@media(max-width:340px){
  .brand-name{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ===== SPA page transition (js/spa-route.js) ===== */
#main-content{transition:opacity .15s ease}
#main-content.spa-fade{opacity:0}
#spaFadeOverlay{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .15s ease}
#spaFadeOverlay.active{opacity:1;pointer-events:auto}
#spaPageLoader{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;pointer-events:none;opacity:0}
#spaPageLoader span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue1),var(--blue3));box-shadow:0 0 10px var(--ice)}
#spaPageLoader.active{opacity:1}
#spaPageLoader.active span{width:85%;transition:width .5s cubic-bezier(.1,.7,.2,1)}
#spaPageLoader.done span{width:100%;transition:width .1s linear}
#spaPageLoader.hide{opacity:0;transition:opacity .15s ease}

/* =========================================================
   SEARCH + CART PANELS = header jaisa water glass, 8px radius,
   aur hover par wahi bubble effect
   ========================================================= */
:root{
  --bubbg:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.65) 0,rgba(255,255,255,.18) 14%,rgba(255,255,255,0) 38%),
    radial-gradient(circle at 75% 90%,rgba(130,220,255,.40) 0,rgba(130,220,255,0) 55%),
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(110,200,255,.10));
  --bubsh:
    inset 0 2px 3px rgba(255,255,255,.7),
    inset 0 -8px 14px rgba(0,130,210,.18),
    inset 3px 0 6px rgba(255,255,255,.18),
    0 8px 18px rgba(0,120,200,.18),
    0 0 14px rgba(120,220,255,.25);
}

/* ---- panel: header jaisa glass, 8px radius ---- */
.hpanel{
  border-radius:var(--hr8);
  background:
    linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 35%),
    radial-gradient(120% 120% at 15% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 55%),
    radial-gradient(80% 100% at 90% 120%,rgba(120,215,255,.14),rgba(255,255,255,0) 60%),
    rgba(6,34,58,.5);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 12px 16px -10px rgba(255,255,255,.22),
    inset 0 -10px 14px -8px rgba(0,60,110,.22),
    0 16px 26px -6px rgba(0,25,50,.3),
    0 26px 40px -14px rgba(90,208,255,.2);
  backdrop-filter:blur(14px) saturate(170%) brightness(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(170%) brightness(1.05);
  text-shadow:0 1px 4px rgba(0,20,40,.65);
}
.hpanel .hp-head h3{letter-spacing:.02em}
.cart-foot{border-top:1px solid rgba(255,255,255,.25)}

/* ---- text buttons: chip, View bag, Checkout (bubble hover) ---- */
.chip,.btn-main,.btn-ghost{
  position:relative;isolation:isolate;border-radius:0;
  background:transparent;border:1px solid rgba(255,255,255,.3);box-shadow:none;
  transition:color .3s,transform .4s cubic-bezier(.25,1.25,.4,1),text-shadow .4s ease;
}
.chip::before,.btn-main::before,.btn-ghost::before{
  content:"";position:absolute;inset:2px;z-index:-1;pointer-events:none;
  border-radius:var(--bub);background:var(--bubbg);border:1px solid rgba(255,255,255,.55);box-shadow:var(--bubsh);
  opacity:0;transform:scale(.6);
  transition:opacity .3s ease,transform .5s cubic-bezier(.25,1.25,.4,1);
}
.chip:hover,.btn-main:hover,.btn-ghost:hover{
  background:transparent;color:var(--hov);transform:translateY(-1px);text-shadow:0 1px 3px rgba(0,25,60,.75);box-shadow:none;
}
.chip:hover::before,.btn-main:hover::before,.btn-ghost:hover::before{opacity:1;transform:scale(1)}
/* checkout button thoda alag dikhe (blue), hover par bubble wahi */
.btn-main{color:var(--navy);background:linear-gradient(180deg,rgba(191,240,255,.85),rgba(90,208,255,.75) 60%,rgba(44,159,214,.8));
  border-color:rgba(255,255,255,.7);text-shadow:none}
.btn-main:hover{background:linear-gradient(180deg,rgba(191,240,255,.85),rgba(90,208,255,.75) 60%,rgba(44,159,214,.8));color:var(--navy);text-shadow:none}

/* ---- round icon buttons: header icons, close, remove, qty +/- ---- */
.hicon,.hp-close,.qty button{position:relative;isolation:isolate}
.cremove{isolation:isolate}  /* cremove already position:absolute hai */
.hicon::before,.hp-close::before,.cremove::before,.qty button::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:50%;
  background:var(--bubbg);border:1px solid rgba(255,255,255,.55);box-shadow:var(--bubsh);
  opacity:0;transform:scale(.6);
  transition:opacity .3s ease,transform .5s cubic-bezier(.25,1.25,.4,1);
}
.hicon:hover::before,.hicon:focus-visible::before,
.hp-close:hover::before,.cremove:hover::before,
.qty button:hover:not(:disabled)::before{opacity:1;transform:scale(1)}
.hicon:hover,.hicon:focus-visible,
.hp-close:hover,.cremove:hover,
.qty button:hover:not(:disabled){background:transparent}
.hp-close{background:transparent;border:1px solid rgba(255,255,255,.3)}

/* ---- search box, qty box, cards ---- */
.sfield input{border-radius:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 2px 6px rgba(0,25,50,.2)}
.sfield input:focus{border-color:rgba(255,255,255,.7);box-shadow:inset 0 2px 6px rgba(0,25,50,.2),0 0 14px rgba(120,220,255,.3)}
.qty{border-radius:0;background:transparent}
.search-product-item,.citem{
  border-radius:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.25);
  transition:border-color .3s,background .3s,box-shadow .3s,transform .4s cubic-bezier(.25,1.25,.4,1);
}
.search-product-item:hover,.citem:hover{
  background:var(--bubbg),rgba(255,255,255,.04);border-color:rgba(255,255,255,.6);box-shadow:var(--bubsh);
}
.search-product-item:hover h5{color:var(--hov);text-shadow:0 1px 3px rgba(0,25,60,.75)}
.search-img-wrapper,.search-product-item img,.citem-img{border-radius:0}
.alif-toast{border-radius:0}

/* ---- hover se pehle ka shape bhi rounded (pill), checkout = View bag jaisa design ---- */
.chip,.btn-main,.btn-ghost,.sfield input,.qty{border-radius:999px}
.search-product-item,.citem{border-radius:18px}
.search-img-wrapper,.search-product-item img,.citem-img{border-radius:12px}

/* checkout button: blue gradient hata kar View bag jaisa glass + bubble hover */
.btn-main{
  color:#fff;background:transparent;border:1px solid rgba(255,255,255,.3);box-shadow:none;
  text-shadow:0 1px 4px rgba(0,20,40,.65);
}
.btn-main:hover{
  background:transparent;color:var(--hov);box-shadow:none;transform:translateY(-1px);
  text-shadow:0 1px 3px rgba(0,25,60,.75);
}

/* =========================================================
   TREND THIS WEEK: ek baar me exactly 3 cards, bada image, full cover
   ========================================================= */
.mtrend .hscroll{padding:4px 0 10px;scroll-padding:0}
.mtrend .pcard{flex:0 0 calc((100% - 28px) / 3)}   /* 3 cards + 2 gap (14px) = poori width */
.mtrend .pcard-img{height:230px}
/* image poora cover kare - sab product cards par */
.pcard-img img{object-fit:cover;object-position:center}

/* ---- Trend cards: image height kam + text ke beech ka gap kam ---- */
.mtrend .pcard-img{height:180px}
.mtrend .pcard-info{padding:8px 14px 0}
.mtrend .pcard-info small{line-height:1.25}
.mtrend .pcard-info h5{line-height:1.25;margin-top:1px}
.mtrend .pcard-foot{padding:2px 14px 10px}
.mtrend .pcard-price{line-height:1.2}
.mtrend .pcard-add{width:34px;height:34px}

/* =========================================================
   Saare mega menus ki height Shop By jaisi + cards ka black shadow band hataya
   ========================================================= */
.pcard,.bcard{box-shadow:inset 0 1px 2px rgba(255,255,255,.3)}
.pcard:hover{box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 0 0 2px rgba(255,255,255,.25)}
.pcard-info,.pcard-foot,.bcard span{text-shadow:0 1px 2px rgba(0,20,40,.3)}

/* sab mega menus ka header aur slider/grid ka spacing same */
.mega-head{min-height:40px}
.hscroll,.mtrend .hscroll{padding:8px 0 8px}
.pgrid{padding:8px 0 8px}

/* product cards: Trend wale jaisa hi size - Best Sellers / Combo / New Arrivals */
.pcard-img{height:180px}
.pcard-info{padding:8px 14px 0}
.pcard-info small{line-height:1.25}
.pcard-info h5{line-height:1.25;margin-top:1px}
.pcard-foot{padding:2px 14px 10px}
.pcard-price{line-height:1.2}
.pcard-add{width:34px;height:34px}

/* Brands menu: card bada, image ki height badhai */
.bcard{flex:0 0 220px}
.bcard-img{height:214px}

/* =========================================================
   Product images: poori bottle dikhe (crop nahi), white background, bada height
   ========================================================= */
.pcard-img,.mtrend .pcard-img{height:200px;background:#fff}
.pcard-img img{object-fit:contain;object-position:center;padding:8px}
.bcard-img{height:234px}

/* =========================================================
   MEGA MENU PRODUCT CARD: mouse hover par image change (home page jaisa)
   ========================================================= */
.pcard-img{position:relative}
.pcard-img img.main-img{transition:opacity .5s ease,transform .6s ease}
.pcard-img img.hover-img{
  position:absolute;inset:0;opacity:0!important;
  transition:opacity .5s ease,transform .6s ease;
}
.pcard:hover .pcard-img:has(img.hover-ready) img.main-img{opacity:0;transform:scale(1.05)}
.pcard:hover .pcard-img img.hover-img.hover-ready{opacity:1!important;transform:scale(1.05)}

/* ---- mega menu "View all" / "All brands" button = baaki pills jaisa ---- */
.pill-main,
.pill-main:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(255,255,255,.35);
}
.pill-main:hover{
  background:rgba(255,255,255,.2);
  color:var(--hov);
}

/* =========================================================
   SMOOTH CLICK / OPEN / CLOSE  (search, cart, buttons, menu)
   ========================================================= */

/* panel khulte hi scrollbar gayab hone se page ka jhatka (layout shift) band */
html{scrollbar-gutter:stable}

/* mobile par click ka grey flash + 300ms delay hatao */
a,button,.hicon,.chip,.pill,.rbtn,.pcard-add,.qty button,.cremove,.hp-close,.burger{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* overlay se heavy blur hata, panel GPU layer par */
.po{background:rgba(2,14,26,.5);backdrop-filter:none;-webkit-backdrop-filter:none;will-change:opacity}
.hpanel{will-change:transform;backface-visibility:hidden;
  transition:transform .6s cubic-bezier(.22,1,.36,1),visibility 0s linear .6s}
.hpanel.open{transition:transform .6s cubic-bezier(.22,1,.36,1),visibility 0s}

/* panel ke andar ka content ek ek karke halka sa upar se fade-in hota hai */
.hpanel .hp-head,.hpanel .sfield,.hpanel .hp-body,.hpanel .cart-foot{
  opacity:0;transform:translateY(14px);
  transition:opacity .2s ease,transform .2s ease}
.hpanel.open .hp-head,.hpanel.open .sfield,.hpanel.open .hp-body,.hpanel.open .cart-foot{
  opacity:1;transform:none;
  transition:opacity .5s ease var(--d,.15s),transform .6s cubic-bezier(.22,1,.36,1) var(--d,.15s)}
.hpanel.open .hp-head{--d:.10s}
.hpanel.open .sfield{--d:.16s}
.hpanel.open .hp-body{--d:.22s}
.hpanel.open .cart-foot{--d:.28s}

/* click dabane par halka press effect */
.hicon:active,.hp-close:active,.rbtn:active,.pcard-add:active,.burger:active{
  transform:scale(.9);transition-duration:.15s}
.qty button:active:not(:disabled),.cremove:active{transform:scale(.86);transition-duration:.15s}
.btn-main:active,.btn-ghost:active,.chip:active,.pill:active{
  transform:translateY(1px) scale(.97);transition-duration:.15s}
.nav>li>a:active,.mcol a:active,.mobile a:active{transform:scale(.97);transition-duration:.15s}

/* cart item: aate / jaate time fade + slide + height smooth collapse */
.citem{
  max-height:260px;
  transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1),max-height .35s ease,
             margin .35s ease,padding .35s ease,border-color .3s,background .3s,box-shadow .3s}
.citem.enter{opacity:0;transform:translateX(30px);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;overflow:hidden}
.citem.out{opacity:0;transform:translateX(30px);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;overflow:hidden}

/* search results / cart empty message: loading ke baad smooth fade-in */
@keyframes softIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.search-product-item,.s-note,.cart-empty{animation:softIn .35s ease backwards}
.search-product-item:nth-child(2){animation-delay:.04s}
.search-product-item:nth-child(3){animation-delay:.08s}
.search-product-item:nth-child(4){animation-delay:.12s}
.search-product-item:nth-child(5){animation-delay:.16s}
.search-product-item:nth-child(n+6){animation-delay:.2s}

/* =========================================================
   FIX 1: LOGO CIRCLE ab mega menu ke UPAR dikhega (neeche nahi dabega)
   Mega menu z-index:5 hai, logo ko usse upar (8) rakha hai.
   ========================================================= */
.header>.logo{z-index:8}

/* =========================================================
   FIX 2: MEGA MENU KAPKAPI (flicker) band
   Pehle problem: link ke upar/neeche (header ka border area) aur
   links ke beech ke gap me mouse jaate hi hover toot jata tha,
   menu band hokar dobara khulta tha. Ab:
   (a) link ka hover area header ki poori height tak badha diya
   (b) links ke beech ka gap bhi hover area me aata hai
   (c) neeche ka invisible pul ab poori width me hai, to link se
       mega tak mouse kisi bhi side jaye menu khula rehta hai
   (d) ek mega se dusre mega par jaate time purana menu turant
       chhup jata hai (dono ek saath fade hokar kapkapate nahi)
   ========================================================= */
/* (a)+(b) link ke upar/neeche 12px aur dono side 3px extra hover area */
.nav>li.has-mega>a::before{
  content:"";position:absolute;left:-3px;right:-3px;top:-12px;bottom:-12px;
}
/* (c) pul: poori width, link ke neeche se mega tak (header border + 12px gap cover) */
.nav>li.has-mega:hover>a::after,
.nav>li.has-mega:focus-within>a::after{
  content:"";position:absolute;left:-100vw;right:-100vw;top:100%;height:36px;
}
/* (d) jab koi dusra mega hover me ho, baaki sab megas bina animation ke turant band */
.nav:has(>li.has-mega:hover)>li.has-mega:not(:hover):not(:focus-within)>.mega{
  transition:none;
  opacity:0;visibility:hidden;transform:translateY(-22px);
}

/* =========================================================
   FIX 3: MEGA MENU me product / brand image ka background TRANSPARENT
   (pehle white #fff / light-blue tha). Ab card ka glass background
   hi image ke peeche dikhega.
   ========================================================= */
.pcard-img,
.mtrend .pcard-img,
.bcard-img,
.pcard-img.img-skeleton,
.bcard-img.img-skeleton,
.mega .img-skeleton{
  background:transparent!important;
}
/* image ke peeche ka white/blue padding-color bhi na aaye */
.pcard-img img,
.bcard-img img,
.pcard-img img.main-img,
.pcard-img img.hover-img{
  background:transparent!important;
}

/* =========================================================
   MEGA MENU CARDS = HOME PAGE JAISE GLASS CARDS
   (Shop By / Best Sellers / Combo / New Arrivals ke product cards + Brands ke cards)
   - same glass background + same border
   - hover par top-left se bottom-right shine guzarti hai
   - card ka outer shadow nahi
   ========================================================= */
.pcard,
.bcard{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(150deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.14) 100%);
  border:1px solid rgba(255,255,255,.38);
  border-radius:22px;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.75),
    inset 1px 0 2px rgba(255,255,255,.25),
    inset 0 -14px 28px rgba(255,255,255,.06);
  transition:transform .35s cubic-bezier(.25,1.25,.4,1), border-color .3s ease, background .3s ease, box-shadow .35s ease;
}

/* glass ki tirchhi chamak: hover par top-left se bottom-right guzarti hai */
.pcard::before,
.bcard::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.32) 47%, rgba(255,255,255,.08) 53%, transparent 66%);
  transform:translateX(-130%);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.pcard:hover::before,
.bcard:hover::before{ transform:translateX(130%); }

/* hover: upar uthe, border aur saaf (pehle wala golden border hata diya) */
.pcard:hover,
.bcard:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.65);
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(150deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.20) 100%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.9),
    inset 1px 0 2px rgba(255,255,255,.35),
    inset 0 -14px 28px rgba(255,255,255,.10);
}

/* product image halki parchhai ke saath glass par tairti dikhe (home jaisa) */
.pcard-img img{ filter:drop-shadow(0 16px 16px rgba(0,25,55,.35)); }

/* Brands card ka andar ka padding home jaisa */
.bcard{ padding:8px; }