/* ============================================================
   TYPICAL-SECTION.CSS  -  TYPICAL-SECTION page (gender / brand listing)
   ------------------------------------------------------------
   Best-sellers.css ke bilkul same: margins, padding, background,
   cards, mobile sab same to same.
   Sky-blue background + glass product cards + white headings.
   Sirf header.css + footer.css ke saath chalta hai - kisi doosri
   page-CSS par depend nahi karta.
     1. Colors / helpers
     2. Heading + intro
     3. Product card + grid
     4. Mobile
     5. Page ke apne hisse (loader / no products)
     6. Background (moving dark blobs + clouds + grain; hover par product ke color me badalta hai)
        -> AB MOBILE PAR BHI LAPTOP JAISA HI (same blobs, same moving, same grain)
     7. Mobile / touch + bag button
     8. Reduced motion
============================================================ */

/* ============================================================
   1. COLORS / HELPERS
============================================================ */
:root{
    --sale-red:#d62839;
    --badge-red:rgba(160,18,34,.72);   /* DISCOUNT + OUT OF STOCK dono badge ka same color - yahin se badlo */

    /* WISHLIST + ADD TO CART button ka GLASS look (desktop + mobile dono par same) - yahin se badlo
       --glass-btn-bg      : button ka glass background (zyada safed chahiye to .34 / .22 badhao)
       --glass-btn-border  : kinara
       --glass-btn-shadow  : andar ki chamak + bahar ki halki parchhai
       --glass-btn-blur    : peeche ka blur (bada number = zyada dhundhla) */
    --glass-btn-bg:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 58%),
        linear-gradient(150deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,.24) 100%);
    --glass-btn-border:rgba(255,255,255,.75);
    --glass-btn-shadow:
        inset 0 1.5px 1px rgba(255,255,255,.9),
        inset 0 -6px 12px rgba(255,255,255,.12),
        0 6px 16px rgba(0,40,90,.28);
    --glass-btn-blur:blur(10px) saturate(180%);

    /* ORIGINAL (kati hui) price ka rang - yahin se badlo */
    --old-price-red:#ff3b4f;
}

.container{ max-width:1440px; margin:0 auto; padding:0 15px; }

/* Footer se chipakne se bachane ke liye: neeche ki jagah (sirf main content ke container me) */
#main-content > .container{ padding-bottom:90px; }
@media(max-width:768px){
    #main-content > .container{ padding-bottom:70px; }
}

/* ============================================================
   2. HEADING + INTRO
   ------------------------------------------------------------
   Heading header ke piche chhupe to .trending-header ka margin-top badhao.
============================================================ */
.trending-header{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    margin-top:150px; margin-bottom:25px; padding:0 20px;
}
.main-trending-title{
    font-size:2rem; font-weight:700; text-transform:uppercase; text-align:center;
    margin:0; color:#fff; text-shadow:0 2px 14px rgba(0,50,120,.55);
    letter-spacing:3px; line-height:1.2;
}
/* Heading ke neeche decorative line */
.style-line{
    width:70px; height:4px; border-radius:2px; margin:14px auto 6px;
    background:linear-gradient(90deg,#19c2ff,#7b3ff2); box-shadow:0 0 12px rgba(25,194,255,.6);
}
/* Heading ke neeche dynamic intro (SEO/GEO text) */
.collection-intro{
    max-width:820px; margin:0 auto 24px; padding:0 15px; text-align:center;
    color:#e3f0fb; font-size:.92rem; line-height:1.7; text-shadow:0 1px 8px rgba(0,30,60,.45);
}
@media(max-width:768px){
    .trending-header{ margin-top:120px; gap:0; }
    .main-trending-title{ font-size:1.5rem; letter-spacing:2px; }
}

/* ============================================================
   3. PRODUCT CARD (GLASS: image transparent PNG hai) + GRID
============================================================ */
.product-card{
    position:relative; height:100%; 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; padding:8px;
    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);
    -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
    transition:transform .35s cubic-bezier(.25,1.25,.4,1), box-shadow .35s ease, border-color .3s ease, background .3s ease;
}
/* glass ki tirchhi chamak (shine) - hover par guzarti hai */
.product-card::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);
}
.product-card:hover::before{ transform:translateX(130%); }

/* Card par koi grain nahi - clean transparent glass (grain sirf background me, card ke blur se halka dikhta hai) */

/* HOVER LIFT (upar uthna): transform card par nahi, uske PARENT (.grid-item / slider item) ke hover par lagta hai.
   Wajah: pehle card khud upar uthta tha -> mouse card ke kinare se bahar reh jata tha -> hover hat jata -> card wapas
   neeche aata -> phir hover -> bahut teji se kaampna (vibration). Parent apni jagah se hilta nahi, isliye ab stable hai.
   Uthne ki height badalni ho to sirf neeche translateY(-6px) badlo. */
@media (hover:hover){
    .grid-item:hover .product-card,
    .trending-card-item:hover .product-card,
    .best-card-item:hover .product-card{ transform:translateY(-6px); }
}
.product-card:hover{
    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);
}
.main-link{ position:absolute; inset:0; z-index:5; }

/* image ka tile: bilkul transparent, sirf halki parchhai se image tairti dikhe */
.img-box{
    position:relative; background:transparent; border-radius:12px; overflow:hidden;
    border:1px solid transparent; transition:.3s;
}
.lazy-fade-img{ opacity:0; }
.lazy-fade-img.loaded{ opacity:1; }

/* ------------------------------------------------------------
   BADGE (DISCOUNT / OUT OF STOCK) - left side, wishlist jaisa gol glass
   Color: dono ka SAME (--badge-red, section 1 me)
   Size badalna ho to width/height badlo (mobile me section 4 me alag size hai)
   index.css me bhi BILKUL yahi design hai (dono pages par ek jaisa)
------------------------------------------------------------ */
.product-card .badge{
    position:absolute; top:12px; left:12px; z-index:6; isolation:isolate;
    width:48px; height:48px; padding:0; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; line-height:1.1; color:#fff; letter-spacing:.2px;
    background:var(--badge-red); border:1px solid rgba(255,255,255,.55);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 4px 10px rgba(130,0,20,.35);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    text-shadow:0 1px 3px rgba(90,0,10,.6);
}
/* 2 line FORCE: upar % / neeche OFF (header.css ya bootstrap ka .badge style override na kare isliye !important) */
.product-card .badge{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; }
.product-card .badge b,
.product-card .badge small{
    display:block !important; width:100%; margin:0; padding:0; text-align:center;
    font-size:8px; font-weight:800; letter-spacing:.1px; line-height:1.15; white-space:nowrap;
}

/* OUT OF STOCK badge ka font: PERFECT hai, 10px (mobile me section 4 me 6.5px) - ise mat chhedo */
.product-card .badge.badge-oos b,
.product-card .badge.badge-oos small{ font-size:8px; }

/* DISCOUNT badge ka font: BADA kiya (sirf discount badge, OUT OF STOCK nahi)
   Desktop: % wala number = 16px, OFF = 10.5px  |  Mobile me section 4 me: 12.5px / 7.5px
   Aur bada / chhota karna ho to sirf yahan ke 2 numbers badlo */
.product-card .badge:not(.badge-oos) b{ font-size:13px; font-weight:900; line-height:1.05; letter-spacing:0; }
.product-card .badge:not(.badge-oos) small{ font-size:8.5px; font-weight:800; line-height:1.1; letter-spacing:.3px; }

/* Wishlist icon desktop par sirf card hover par dikhta hai */
.wishlist-btn{
    position:absolute; top:12px; right:12px; width:35px; height:35px; z-index:6;
    isolation:isolate;
    background:var(--glass-btn-bg); border:1px solid var(--glass-btn-border); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:#fff; text-shadow:0 1px 4px rgba(0,30,60,.5);
    box-shadow:var(--glass-btn-shadow);
    -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur);
    opacity:0; transition:opacity .3s, color .3s, transform .4s cubic-bezier(.25,1.25,.4,1);
}
.product-card:hover .wishlist-btn{ opacity:1; }
.wishlist-btn:hover{ color:#ff5d73; transform:scale(1.1); }
.wishlist-btn i.text-danger{ color:#d32f2f; }

/* Dono images (main + hover) EXACT same tareeke se position hoti hain taaki framing match kare */
.product-img-container{ width:100%; height:340px; position:relative; overflow:hidden; }
.product-img-container img{
    position:absolute; top:0; left:0; width:100%; height:100%;
    padding:20px; box-sizing:border-box; object-fit:contain;
    filter:drop-shadow(0 16px 16px rgba(0,25,55,.35));
    transition:opacity .5s ease, transform .6s ease;
}
.product-img-container img.hover-img{ opacity:0 !important; }
.product-card:hover .product-img-container img.main-img{ opacity:0; transform:scale(1.05); }
.product-card:hover .product-img-container img.hover-img.loaded{ opacity:1 !important; transform:scale(1.05); }

.add-cart-btn{
    position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
    isolation:isolate;
    width:90%; opacity:0; visibility:hidden; transition:all .3s ease; z-index:7;
    background:var(--glass-btn-bg); border:1px solid var(--glass-btn-border); color:#fff;
    text-shadow:0 1px 4px rgba(0,30,60,.5);
    box-shadow:var(--glass-btn-shadow);
    -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur);
    padding:10px; text-align:center; font-size:11px; font-weight:700; border-radius:25px; cursor:pointer;
}
.product-card:hover .add-cart-btn{ opacity:1; visibility:visible; bottom:15px; }
.add-cart-btn.oos-btn{ background:#444 !important; color:#fff !important; border-color:#444 !important; cursor:not-allowed !important; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
.add-cart-btn.oos-btn::before{ display:none; }

/* hover par buttons me paani ka bubble */
.add-cart-btn::before,
.wishlist-btn::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    opacity:0; transform:scale(.6);
    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,.5);
    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);
    transition:opacity .3s ease, transform .5s cubic-bezier(.25,1.25,.4,1);
}
.add-cart-btn::before{ inset:2px; border-radius:999px; }
.wishlist-btn::before{ inset:0; border-radius:50%; }
.add-cart-btn:not(.oos-btn):hover::before,
.wishlist-btn:hover::before{ opacity:1; transform:scale(1); }

/* naam / price ka glass patti */
.info{
    padding:12px 8px; margin-top:5px; border-radius:16px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.35);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition:.3s;
}
.product-card:hover .info{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); }
.info .brand{ font-size:10px; color:rgba(255,255,255,.80); font-weight:700; text-transform:uppercase; margin-bottom:2px; letter-spacing:.5px; }
.info .title{ font-size:14px; font-weight:600; color:#fff; height:38px; overflow:hidden; margin-bottom:5px; line-height:1.3; }
.price-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.curr-price{ color:#fff; font-weight:700; font-size:15px; }

/* KATI HUI (original) PRICE: bada + saaf (peeche halka safed pill, taaki red text neele background par dikhe) */
.old-price{
    color:#c8102e; font-size:13px; font-weight:400; line-height:1.2;
    text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:rgba(200,16,46,.75);
    background:rgba(255,255,255,.88); padding:2px 8px; border-radius:10px;
    box-shadow:0 2px 8px rgba(0,40,90,.25); text-shadow:none;
}
.info .brand, .info .title, .curr-price{ text-shadow:0 1px 6px rgba(0,30,60,.45); }

/* Static grid */
.product-grid{ display:flex; flex-wrap:wrap; gap:20px; padding:10px 0; }
.grid-item{ width:calc(25% - 15px); flex-shrink:0; }

/* ============================================================
   4. MOBILE (<=768px)
   ------------------------------------------------------------
   Mobile view bigde to sabse pehle yahan height + padding check karo.
============================================================ */
@media(max-width:768px){
    .product-grid{ gap:10px; }
    .grid-item{ width:calc(50% - 5px); }

    .product-card{
        padding:4px; border-radius:16px;
        -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
    }
    .product-img-container{ height:170px; }
    .product-img-container img{ padding:6px; }
    .info .title{ font-size:12px; height:32px; }

    /* kati hui price mobile par */
    .old-price{ font-size:11px; padding:1px 6px; }

    /* badge mobile par thoda chhota */
    .product-card .badge{ width:40px; height:40px; }
    /* OUT OF STOCK: 6.5px (perfect, same rakha) */
    .product-card .badge.badge-oos b,
    .product-card .badge.badge-oos small{ font-size:5.5px; letter-spacing:.1px; }
    /* DISCOUNT: mobile par bhi bada (% = 12.5px, OFF = 7.5px) */
    .product-card .badge:not(.badge-oos) b{ font-size:10.5px; letter-spacing:0; }
    .product-card .badge:not(.badge-oos) small{ font-size:6.5px; letter-spacing:.2px; }
}
@media(max-width:400px){
    .product-img-container{ height:140px; }
    .product-img-container img{ padding:4px; }
}

/* ============================================================
   5. PAGE KE APNE HISSE
============================================================ */
/* Koi product na mile to */
.no-products-msg{ width:100%; text-align:center; padding:40px 0; color:#e3f0fb; font-size:15px; text-shadow:0 1px 8px rgba(0,30,60,.45); }

/* Infinite-scroll loader: gif + "Loading..." dono bilkul center me
   (JS isko display:block karta hai; img block hai to margin:auto se center rehta hai) */
.scroll-loader{ display:none; text-align:center; padding:20px; width:100%; }
.scroll-loader img{ display:block; margin:0 auto; width:40px; height:auto; }
.scroll-loader p{ text-align:center; color:#e3f0fb; font-size:13px; margin:5px 0 0; text-shadow:0 1px 6px rgba(0,30,60,.45); }

/* ============================================================
   6. BACKGROUND: light sky-blue + gehre dark blue moving blobs +
      safed clouds + halka grain   (LAPTOP + MOBILE DONO PAR SAME)
   ------------------------------------------------------------
   3 rang (variables):
     --bg1  = sky ka UPAR wala rang (neeche wala --bg1b isi se apne aap banta hai)
     --bg2  = gehre dark blobs (3)       --bg3  = safed clouds (2)
   Product card par hover karte hi js/by-type.js rang us product ke
   color me badal deta hai; mouse hatne par wapas default.
   Default badalna ho to sirf html{ --bg1 --bg2 --bg3 } badlo.

   MOBILE FIX (important):
     Pehle blobs ka size "vmax" me tha. Laptop par vmax = width hota hai,
     lekin mobile (portrait) par vmax = HEIGHT hota hai -> blobs bahut bade
     ho jate the aur poori screen dark/alag dikhti thi. Ab sab size ek
     variable --u se bante hain:
        laptop / desktop : --u = 1vmax
        mobile (<=768px) : --u = .75vmax   (proportion laptop jaisa dikhe)
     Mobile par blobs chhote / bade karne ho to sirf mobile wala --u badlo
     (bada number = bade blobs, chhota = chhote).
   Mobile par grain animation + moving blobs ab BAND NAHI hain - laptop jaisa hi chalta hai.

   Layers:
     html::before -> sky gradient (upar --bg1, neeche --bg1b)
     html::after  -> 3 dark blobs + 2 cloud blobs (poori screen me ghoomte hain)
     body::before -> grain (halka, overlay)

   Blobs ka size / position / speed:
     --bNx / --bNy = blob ka center,  --bNr = blob ka radius (N = 1..5)
     1,2,3 = dark blobs,  4,5 = clouds
     Speed = html::after ke animation me 10s / 12s / 11s / 13s / 15s
             (number badhao = dheere, ghatao = tez)
     Dark kitna: html::after ke background me 92% / 92% / 85% (clouds: 70% / 60%)

   GRAIN: body::before ke SVG me baseFrequency='.5' (chhota number = bada dana; aur bada: .4)
   aur opacity .5 (halka: .35 | strong: .7). Cards par grain nahi hai (clean glass).

   Agar background na dikhe to header.css / footer.css me body ya html par
   solid background / z-index check karo.
============================================================ */
@property --bg1  { syntax:'<color>'; inherits:true; initial-value:#bfe4fa; }
@property --bg2  { syntax:'<color>'; inherits:true; initial-value:#03163b; }
@property --bg3  { syntax:'<color>'; inherits:true; initial-value:#ffffff; }

/* blobs ke center (x, y) aur radius (r) - animation inhe smooth badalta hai */
@property --b1x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b1y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b1r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b2x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b2y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b2r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b3x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b3y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b3r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b4x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b4y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b4r { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b5x { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b5y { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --b5r { syntax:'<length>'; inherits:false; initial-value:0px; }

html{
    --bg1:#bfe4fa;      /* sky upar (light) */
    --bg2:#03163b;      /* gehra dark blue */
    --bg3:#ffffff;      /* safed clouds */
    --bg1b:color-mix(in srgb, var(--bg1) 45%, #1a5a92);   /* sky neeche: --bg1 se apne aap banta hai (hover par bhi saath badalta hai) */
    --u:1vmax;          /* blob size ki unit: laptop par 1vmax */
    transition:--bg1 .3s ease, --bg2 .3s ease, --bg3 .3s ease;   /* fast: .3s -> aur kam = aur fast */
}
@media(max-width:768px){
    html{ --u:.75vmax; }   /* mobile: blobs ka size laptop ke proportion me (bade = .9vmax, chhote = .6vmax) */
}

html::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(to bottom, var(--bg1), var(--bg1b));
}

html::after{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;

    /* shuruaati position (animation inhe chalaata hai) - dark blobs (1,2,3) ka radius bada */
    --b1x:calc(15 * var(--u));                    --b1y:calc(15 * var(--u));                      --b1r:calc(42 * var(--u));
    --b2x:calc(100vw - 12.5 * var(--u));          --b2y:calc(100vh - 12.5 * var(--u));            --b2r:calc(39 * var(--u));
    --b3x:calc(12.5 * var(--u));                  --b3y:calc(55vh + 22.5 * var(--u));             --b3r:calc(32 * var(--u));
    --b4x:calc(40vw + 25 * var(--u));             --b4y:calc(10vh + 20 * var(--u));               --b4r:calc(22 * var(--u));
    --b5x:calc(55vw + 22.5 * var(--u));           --b5y:calc(45vh + 17.5 * var(--u));             --b5r:calc(20 * var(--u));

    /* upar wali layer pehle: clouds sabse upar, dark blobs unke neeche */
    background:
        radial-gradient(circle var(--b3r) at var(--b3x) var(--b3y), color-mix(in srgb, var(--bg2) 85%, transparent) 0%, transparent 100%),
        radial-gradient(circle var(--b2r) at var(--b2x) var(--b2y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%),
        radial-gradient(circle var(--b1r) at var(--b1x) var(--b1y), color-mix(in srgb, var(--bg2) 92%, transparent) 0%, transparent 100%);

    animation:
        alifB1 10s ease-in-out infinite alternate,
        alifB2 12s ease-in-out infinite alternate,
        alifB3 11s ease-in-out infinite alternate,
        alifB4 13s ease-in-out infinite alternate,
        alifB5 15s ease-in-out infinite alternate;
}
@keyframes alifB1{
    0%   { --b1x:calc(15 * var(--u));                  --b1y:calc(15 * var(--u));                  --b1r:calc(42 * var(--u)); }
    50%  { --b1x:calc(15 * var(--u) + 60vw);           --b1y:calc(15 * var(--u) + 30vh);           --b1r:calc(50 * var(--u)); }
    100% { --b1x:calc(15 * var(--u) + 20vw);           --b1y:calc(15 * var(--u) + 70vh);           --b1r:calc(38 * var(--u)); }
}
@keyframes alifB2{
    0%   { --b2x:calc(100vw - 12.5 * var(--u));        --b2y:calc(100vh - 12.5 * var(--u));        --b2r:calc(39 * var(--u)); }
    50%  { --b2x:calc(45vw - 12.5 * var(--u));         --b2y:calc(60vh - 12.5 * var(--u));         --b2r:calc(45 * var(--u)); }
    100% { --b2x:calc(80vw - 12.5 * var(--u));         --b2y:calc(25vh - 12.5 * var(--u));         --b2r:calc(39 * var(--u)); }
}
@keyframes alifB3{
    0%   { --b3x:calc(12.5 * var(--u));                --b3y:calc(55vh + 22.5 * var(--u));         --b3r:calc(32 * var(--u)); }
    50%  { --b3x:calc(12.5 * var(--u) + 70vw);         --b3y:calc(25vh + 22.5 * var(--u));         --b3r:calc(38 * var(--u)); }
    100% { --b3x:calc(12.5 * var(--u) + 90vw);         --b3y:calc(75vh + 22.5 * var(--u));         --b3r:calc(29 * var(--u)); }
}
@keyframes alifB4{
    0%   { --b4x:calc(40vw + 25 * var(--u));           --b4y:calc(10vh + 20 * var(--u));           --b4r:calc(22 * var(--u)); }
    50%  { --b4x:calc(-5vw + 25 * var(--u));           --b4y:calc(35vh + 20 * var(--u));           --b4r:calc(26.4 * var(--u)); }
    100% { --b4x:calc(-30vw + 25 * var(--u));          --b4y:calc(60vh + 20 * var(--u));           --b4r:calc(20.9 * var(--u)); }
}
@keyframes alifB5{
    0%   { --b5x:calc(55vw + 22.5 * var(--u));         --b5y:calc(45vh + 17.5 * var(--u));         --b5r:calc(20 * var(--u)); }
    50%  { --b5x:calc(5vw + 22.5 * var(--u));          --b5y:calc(15vh + 17.5 * var(--u));         --b5r:calc(23 * var(--u)); }
    100% { --b5x:calc(35vw + 22.5 * var(--u));         --b5y:calc(-5vh + 17.5 * var(--u));         --b5r:calc(20 * var(--u)); }
}

/* grain: overlay wala grayscale dana (baseFrequency .5) - light aur dark dono jagah dikhe.
   Cards par grain nahi hai (clean glass), grain sirf background me hai.
   Mobile par bhi laptop jaisa hi (animation band nahi kiya). */
body::before{
    content:""; position:fixed; inset:-80px; z-index:-1; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:160px 160px;
    opacity:.5; mix-blend-mode:overlay;      /* halka: .35 | strong: .7 ; dana bada: baseFrequency .5 -> .4 */
    animation:alifGrain .8s steps(1) infinite;
}
@keyframes alifGrain{
    0%  { transform:translate(0,0); }
    25% { transform:translate(-30px,20px); }
    50% { transform:translate(25px,-30px); }
    75% { transform:translate(-15px,-35px); }
    100%{ transform:translate(0,0); }
}
body::after{ display:none; }

/* ============================================================
   7. MOBILE / TOUCH
   ------------------------------------------------------------
   a) .touch-active = ungli se touch / slide karne par card ka "hover" look
      (js/by-type.js ye class lagata hai).
   b) Wishlist (heart) icon mobile / touch par hamesha dikhe.
   c) Mobile par ADD TO CART -> chhota gol BAG icon (neeche-right kone me).
============================================================ */
.product-card.touch-active::before{ transform:translateX(130%); }
.product-card.touch-active{
    transform:translateY(-4px);
    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-card.touch-active .info{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); }
.product-card.touch-active .product-img-container img.hover-img.loaded{ opacity:1 !important; transform:scale(1.05); }
.product-card.touch-active .product-img-container:has(img.hover-img.loaded) img.main-img{ opacity:0; transform:scale(1.05); }

@media (max-width:900px), (hover:none){
    .product-card .wishlist-btn{
        opacity:1 !important; visibility:visible !important; display:flex !important;
        z-index:9; width:34px; height:34px; top:8px; right:8px;
        background:var(--glass-btn-bg); color:#fff; border:1px solid var(--glass-btn-border);
        box-shadow:var(--glass-btn-shadow);
        -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur);
    }
    .product-card .wishlist-btn i{ display:block; font-size:15px; line-height:1; color:inherit; text-shadow:0 1px 3px rgba(0,20,50,.6); }
    .product-card .wishlist-btn i.text-danger{ color:#ff5d73; }
    .product-card .badge{ top:8px; left:8px; }
}

@media (max-width:768px){
    .product-card .add-cart-btn,
    .product-card:hover .add-cart-btn{
        position:absolute; left:auto; top:auto; right:8px; bottom:8px; transform:none;
        width:38px; height:38px; margin:0; padding:0; border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        font-size:0; line-height:1;                       /* "ADD TO CART" likha hua chhup jata hai, sirf icon */
        opacity:1; visibility:visible; z-index:9;
        background:var(--glass-btn-bg); color:#fff; border:1px solid var(--glass-btn-border);
        box-shadow:var(--glass-btn-shadow);
        -webkit-backdrop-filter:var(--glass-btn-blur); backdrop-filter:var(--glass-btn-blur);
        text-shadow:0 1px 4px rgba(0,30,60,.5);
        transition:transform .2s ease, background .25s ease;
    }
    .product-card .add-cart-btn::before{ inset:0; border-radius:50%; }
    .product-card .add-cart-btn i{ font-size:16px; margin:0; display:block; line-height:1; text-shadow:0 1px 3px rgba(0,20,50,.6); }
    .product-card .add-cart-btn i::before{ content:"\f290"; }      /* FontAwesome: bag-shopping */
    .product-card .add-cart-btn:active{ transform:scale(.9); }
    .product-card .add-cart-btn.added{ background:linear-gradient(150deg, rgba(25,194,255,.85), rgba(25,194,255,.55)); }
    .product-card .add-cart-btn.added i::before{ content:"\f00c"; }
    .product-card .add-cart-btn.oos-btn{ display:none !important; }
}
@media (max-width:400px){
    .product-card .add-cart-btn,
    .product-card:hover .add-cart-btn{ width:34px; height:34px; right:6px; bottom:6px; }
    .product-card .add-cart-btn i{ font-size:14px; }
}

/* ============================================================
   8. REDUCED MOTION (animation kam karne wale users ke liye)
============================================================ */
@media(prefers-reduced-motion:reduce){
    html{ transition:none; }
    html::after, body::before{ animation:none; }
    .product-card{ transition:none; }
}