/*
Theme Name: WabXpart
Theme URI: https://mystore.yunustextile.com
Author: Your Name
Author URI: https://yunustextile.com
Description: Custom banaya hua ecommerce theme - koi third-party theme/plugin nahi, sab kuch apna code.
Version: 1.0.0
Text Domain: wabxpart
*/
/* ^ Upar wala poora comment block WordPress parhta hai taake pehchan
     sake ke yeh ek theme hai, aur Appearance > Themes page par yeh
     info (naam, author, description) dikhaye. */


/* ==========================================================================
   SECTION 1: CSS Variables (Custom Properties)
   Yahan hum rangon aur values ko "naam" dete hain, taake neeche poori
   file mein baar baar wahi hex code likhne ke bajaye naam use karein.
   Agar kabhi color badalna ho to sirf YAHAN badalna paregа, poori file
   mein dhoondne ki zaroorat nahi.
   ========================================================================== */
:root {
    /* :root matlab "poori website par yeh variables available hain" */

    --color-primary: #a4c639;
    /* ^ Lime green (logo ke leaf icon jaisa) - buttons, accents ke liye */

    --color-secondary: #6b6b6b;
    /* ^ Medium-dark gray (logo ke "YUNUS" text jaisa) - header text, footer bg */

    --color-hover: #a4c639;
    /* ^ Hover states ka rang - default Primary jaisa hi, lekin Customizer
         se ALAG bhi kiya ja sakta hai */

    --color-accent: #e94560;
    /* ^ Pink/red - badges (cart/wishlist count) aur search button ke liye */

    --color-bg: #ffffff;
    /* ^ White - page ka default background color */

    --color-text: #222222;
    /* ^ Bohat dark grey (pure black nahi) - normal paragraph text ke liye */

    --color-header-bg: #ffffff;
    /* ^ Main Header aur Navigation row ka background - WHITE (light theme) */

    --color-header-text: var(--color-secondary);
    /* ^ Header/Nav ke andar text ka rang - dark gray (kyunke background ab white hai) */

    --color-footer-bg: var(--color-secondary);
    /* ^ Footer hamesha dark gray/black jaisa rahega, chahe dark mode on ho ya na ho -
         yeh ek common aur professional pattern hai (footer thora "heavy" lagta hai) */

    --color-surface: #f5f5f5;
    /* ^ Halka grey - input boxes, cards, jaisi "surfaces" ke liye jo pure white
         se thora alag honi chahiye taake unki shape dikhe */

    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* ^ Font list - browser pehli available font use karega (system-ui = device ka
         apna default font, taake alag se font download na karni pare, site tez chale) */

    --spacing-unit: 1rem;
    /* ^ Ek "standard gap" ki value - margins/paddings mein hum isay multiply karke use karenge */

    --max-width: 1200px;
    /* ^ Content kitni chaurai tak phail sakta hai bade screens par (bohat chaura na ho jaye) */

    --search-max-width: 600px;
    /* ^ Header search box ki default width (desktop par) - agar admin
         Customizer se badle to yeh value override ho jati hai */

    --logo-height: 60px;
    /* ^ Logo ki default height - Customizer > Site Identity se control hoti hai */

    --topbar-bg: #a4c639;
    --topbar-text: #ffffff;
    --topbar-hover: #6b6b6b;
    /* ^ Top Bar ke apne 3 colors - "Site Colors" section se bilkul
         alag, Customizer > Top Bar section se control hote hain */
}


/* ==========================================================================
   SECTION 2: Modern CSS Reset
   Har browser (Chrome, Firefox, Edge) khud-bakhud kuch default spacing
   deta hai jo har jagah alag hoti hai. Yeh reset sab ko "zero" se
   shuru karta hai, taake hum khud control kar sakein.
   ========================================================================== */
*,
*::before,
*::after {
    /* ^ "*" matlab HAR element (div, p, h1, sab kuch) is rule ko follow karega */

    box-sizing: border-box;
    /* ^ Iska matlab: agar hum kisi box ki width 200px rakhein aur usmein
         padding bhi 20px daalein, to box phir bhi 200px ka hi rahega
         (padding andar se lega, bahar nahi barhayega). Bina is ke,
         layout calculations confusing ho jati hain. */

    margin: 0;
    /* ^ Har element ka bahar wala gap zero se shuru */

    padding: 0;
    /* ^ Har element ka andar wala gap bhi zero se shuru */
}

html {
    overflow-x: hidden;
    /* ^ SAFETY NET: agar kabhi koi element (badge, icon, waghera)
         galti se container se thora bahar nikal jaye, yeh line
         poori site ko LEFT-RIGHT scroll hone se rokti hai. Yeh
         ek achi "defensive" practice hai, hamesha rakhni chahiye. */
}

body {
    font-family: var(--font-body);
    /* ^ var(--font-body) matlab "upar jo font-body variable banaya tha, wahi value yahan use karo" */

    color: var(--color-text);
    /* ^ Poori site ka default text color */

    background-color: var(--color-bg);
    /* ^ Poori site ka background color */

    line-height: 1.6;
    /* ^ Lines ke darmiyan gap - 1.6 matlab font-size ka 1.6 guna, isse
         paragraph parhne mein aasani hoti hai (bohat close lines na hon) */
}

img {
    max-width: 100%;
    /* ^ Image apne container se bahar kabhi nahi niklegi (responsive) */

    height: auto;
    /* ^ Height khud-bakhud adjust hogi taake image "squeeze/stretch" na ho */

    display: block;
    /* ^ Image ke neeche ek chota sa extra gap (jo images default mein
         chorti hain) hata deta hai */
}

a {
    color: var(--color-accent);
    /* ^ Sab links ka color humara "accent" color (pink/red) hoga, browser
         ka default blue nahi */

    text-decoration: none;
    /* ^ Links ke neeche ki line (underline) hata di - modern designs mein
         yeh style common hai */
}


/* ==========================================================================
   SECTION 3: Typography Scale (Headings ka size)
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    /* ^ Yeh rule ek sath sab headings (h1 se h6 tak) par lagta hai */

    font-weight: 700;
    /* ^ 700 matlab "Bold" - headings normal text se mota dikhna chahiye */

    line-height: 1.2;
    /* ^ Headings mein lines paragraph se zyada "tight" (kam gap) rakhte hain */

    margin-bottom: calc(var(--spacing-unit) * 0.75);
    /* ^ calc() se hum variable ko multiply kar sakte hain - yahan
         spacing-unit (1rem) ka 0.75 guna, matlab 0.75rem ka neeche gap */
}

h1 { font-size: 2.5rem; }   /* Sab se bara heading - jaise page ka main title */
h2 { font-size: 2rem; }     /* Dusra bara - jaise section titles */
h3 { font-size: 1.5rem; }   /* Chota - jaise sub-sections */
h4 { font-size: 1.25rem; }  /* Sab se chota jo hum define kar rahe hain */

p {
    margin-bottom: var(--spacing-unit);
    /* ^ Har paragraph ke neeche ek standard gap, taake text "chipka hua" na lage */
}


/* ==========================================================================
   SECTION 4: Layout Container
   Yeh class har page (home, product, cart) mein content ko center mein,
   ek maximum chaurai tak seemit rakhegi.
   ========================================================================== */
.container {
    max-width: var(--max-width);
    /* ^ Content kabhi 1200px se zyada chaura nahi hoga, chahe screen
         kitni bhi badi ho (jaise 4K monitor) */

    margin-inline: auto;
    /* ^ "auto" left-right dono taraf barabar gap de kar content ko
         CENTER mein la deta hai */

    padding-inline: var(--spacing-unit);
    /* ^ Left aur right mein thora andar ka gap, taake content screen
         ke bilkul kinare se na chipke (mobile par zaroori hai) */
}


/* ==========================================================================
   SECTION 5: Top Utility Bar
   Header ki sab se upar wali patli strip - contact info (left) aur
   social icons (right).
   ========================================================================== */
.top-bar {
    background-color: var(--topbar-bg);
    /* ^ Ab Site Colors se nahi, Top Bar section ke apne "Background
         Color" control se aata hai - independent */

    color: var(--topbar-text);
    /* ^ Top Bar ke apne "Text Color" control se */

    font-size: 0.875rem;
    /* ^ Normal text (1rem) se chota - yeh "secondary/utility" info hai,
         zyada attention nahi chahiye */
}

.top-bar-inner {
    display: flex;
    /* ^ Contact info aur social icons ko side-by-side laata hai */

    align-items: center;
    justify-content: space-between;
    /* ^ Contact LEFT, social icons RIGHT - jaisa humne header row mein kiya tha */

    flex-wrap: wrap;
    gap: 0.5rem;
    /* ^ Agar wrap ho to bhi thora gap rahe */

    padding-block: 0.5rem;
    /* ^ Upar/neeche chota sa gap - yeh row patli honi chahiye */
}

.top-bar-contact {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* ^ Address, Phone, Email ke darmiyan gap */

    flex-wrap: wrap;
}

.top-bar-contact a,
.top-bar-contact span {
    color: var(--topbar-text);
    /* ^ Parent (.top-bar) ka text color hi use ho, taake sab consistent rahe */

    font-size: inherit;
    /* ^ Parent (.top-bar) ka font-size hi use karo, apna alag mat lagao */
}

.top-bar-contact a:hover {
    color: var(--topbar-hover);
    /* ^ Top Bar ke apne "Hover Color" control se */
}

.top-bar-social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* ^ Icons ke darmiyan thora kam gap (contact info se, kyunke yeh
         chote icons hain, zyada text nahi) */
}

.top-bar-social a {
    color: var(--topbar-text);
    /* ^ Icon ka color (svg mein humne "currentColor" use kiya tha,
         is liye yahan jo color set karenge wahi icon ka rang banega) */

    display: flex;
    /* ^ Taake icon <a> tag ke andar bilkul center/aligned rahe */
}

.top-bar-social a:hover {
    color: var(--topbar-hover);
    /* ^ Top Bar ke apne "Hover Color" control se */
}


/* ==========================================================================
   SECTION 6: Header Layout
   header.php mein humne <div class="container"> ke andar do cheezen
   rakhi thin: .site-branding (logo/naam) aur .main-navigation (menu).
   Yahan hum unhein FLEXBOX se side-by-side arrange karte hain.
   ========================================================================== */
.site-header {
    background-color: var(--color-header-bg);
    /* ^ Pehle yahan --color-primary (dark) tha - ab WHITE, aap ki
         request ke mutabiq. Border-bottom se thora separation diya
         hai taake white header, white page se bilkul mil na jaye */

    border-bottom: 1px solid #e5e5e5;
}

.main-header {
    display: grid;
    /* ^ Flexbox ke bajaye GRID use kar rahe hain - iski wajah niche samjhayi hai */

    grid-template-columns: 1fr auto 1fr;
    /* ^ Yeh row ko 3 "columns" mein baant deta hai:
         Column 1 (logo)    = 1fr  (flexible, barabar hissa)
         Column 2 (search)  = auto (sirf utni jagah jitni search bar ko chahiye)
         Column 3 (actions) = 1fr  (flexible, barabar hissa)

         Kyunke LEFT aur RIGHT dono columns "1fr" (barabar) hain, jo bhi
         extra jagah bachegi woh dono taraf EK JAISI hogi - is se beech
         wali search bar hamesha SACH MEIN center mein aayegi, chahe
         logo choti ho ya bari, chahe actions ka content kam ho zyada. */

    align-items: center;
    gap: 2rem;

    padding-block: 1rem;

    flex-wrap: wrap;
    /* ^ Yeh line grid mein kaam nahi karti (flexbox ki property hai) -
         mobile mein hum poori tarah alag layout denge (neeche dekhein) */
}

.site-branding {
    justify-self: start;
    /* ^ Grid mein "justify-self" ek column ke andar item ko horizontally
         position karta hai - "start" matlab bilkul left mein rahe */
}

.header-actions {
    justify-self: end;
    /* ^ Bilkul right mein rahe */
}

.site-branding .site-title {
    color: var(--color-header-text);
    /* ^ Pehle white tha (dark background ke liye) - ab header WHITE hai,
         is liye text dark gray (--color-header-text) hona chahiye */

    font-size: 1.5rem;
    /* ^ Site ka naam thora bara/prominent dikhna chahiye */

    font-weight: 700;
    /* ^ Bold - logo jaisa "branding" feel dene ke liye */
}

.site-branding img,
.custom-logo {
    height: var(--logo-height);
    /* ^ ZAROORI FIX: aap ne dekha ke logo upload karne par bohat bara
         dikh raha tha. Yeh line logo ki height ko HAMESHA Customizer
         ki "Logo Height" slider value tak seemit rakhti hai. */

    width: auto;
    /* ^ Width khud-bakhud height ke hisaab se adjust hogi, taake logo
         "squeeze/stretch" na ho, uska original shape (aspect ratio) barqarar rahe */

    max-width: 100%;
}


/* ============ SEARCH BAR (+ Category Dropdown) ============ */
.header-search {
    display: flex;
    /* ^ Category dropdown + Input + Button sab ek "pill" jaisi shape mein sath */

    border: 2px solid var(--color-primary);
    border-radius: 4px;
    /* ^ ZAROORI: header ka background ab WHITE hai, is liye search box
         ko visible rehne ke liye ek border chahiye (pehle dark background
         par white box khud contrast kar deta tha, ab nahi) */

    overflow: hidden;
    /* ^ Andar ke elements (select/input/button) ke corners is border-radius
         ke andar hi "clip" ho jayen, bahar na nikalein */

    justify-self: center;
    width: 100%;
    max-width: var(--search-max-width);
    min-width: 0;
    /* ^ ===========================================================
         YEH ASAL BUG FIX HAI (cart icon gayab hone wala masla):
         Browsers <input> jaisay elements ko ek "chupi hui minimum
         width" dete hain, jo Grid/Flexbox ko sahi tarah "shrink"
         karne se rokti hai. "min-width: 0" yeh restriction hata deta hai.
         =========================================================== */
}

.header-category-select {
    border: none;
    border-right: 1px solid #e0e0e0;
    background-color: var(--color-surface);

    padding: 0 0.75rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text);

    border-radius: 4px 0 0 4px;
    /* ^ Sirf LEFT corners round - yeh sab se left wala hissa hai ab
         (Category -> Input -> Button ki tarteeb mein) */

    cursor: pointer;
    max-width: 140px;
    /* ^ Bohat lambe category naam bhi search box ko na todein */
}

.header-search input[type="search"] {
    flex: 1;
    /* ^ Input box khud bachi hui jagah le (Category aur Button ke ilawa) */

    border: none;
    padding: 0.75rem 1rem;
    /* ^ Pehle 0.6rem tha - thora barha diya, taake search box overall
         desktop par bara/prominent dikhe (aap ki request ke mutabiq) */

    border-radius: 0;
    /* ^ Ab koi corner round nahi - Category (left) aur Button (right)
         already round hain, beech wala input seedha (flat) rahega */

    font-family: var(--font-body);
    font-size: 0.95rem;
}

.header-search button {
    background-color: var(--color-primary);
    /* ^ Pehle accent (pink) tha - ab primary (green) use kar rahe hain,
         taake hover/buttons mein primary color ka istemal consistent rahe */

    color: var(--color-bg);
    border: none;
    padding: 0 1.25rem;
    border-radius: 0 4px 4px 0;
    /* ^ Sirf RIGHT corners round - Category se le kar Button tak, teeno
         mil kar ek connected "pill" shape banate hain */

    display: flex;
    align-items: center;
    cursor: pointer;
    /* ^ Mouse hover karne par "hand/pointer" cursor dikhega - batata hai
         ke yeh clickable hai */
}


/* ============ CALL US + CART ============ */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* ^ "Call Us" aur Cart icon ke darmiyan gap */
}

.header-callus {
    display: flex;
    flex-direction: column;
    /* ^ "Call Us:" label upar, phone number neeche - do lines mein */

    font-size: 0.85rem;
    line-height: 1.3;
    white-space: nowrap;
    /* ^ Phone number kisi bhi soorat mein 2 lines mein na tootay */
}

.header-callus-label {
    color: var(--color-header-text);
    opacity: 0.65;
    /* ^ Thora halka/faded - kyunke yeh "label" hai, phone number
         (asal important cheez) zyada highlight honi chahiye */
}

.header-callus a {
    color: var(--color-header-text);
    font-weight: 600;
}

.header-callus a:hover {
    color: var(--color-hover);
    /* ^ Pehle seedha Primary use hota tha - ab alag "Hover Color"
         variable, jo Customizer se independently control ho sakta hai */
}

.header-icon-link {
    position: relative;
    /* ^ "relative" isliye taake neeche wala badge (jo "absolute" hoga)
         isi icon ke corner mein sahi tareeqe se position ho sake */

    color: var(--color-header-text);

    display: flex;
    align-items: center;
    justify-content: center;
    /* ^ SVG ko apne andar horizontally aur vertically bilkul center
         rakhta hai - isi se "vertical align" ka masla theek hota hai */
}

.header-icon-link:hover {
    color: var(--color-hover);
    /* ^ Hover Color variable - Customizer se control hoti hai */
}

.icon-badge {
    position: absolute;
    /* ^ Normal document flow se hat kar, parent (.header-icon-link) ke
         andar "free" position hota hai */

    top: -6px;
    right: -6px;
    /* ^ Icon ke UPAR-DAAYEN corner mein chota sa badge laga deta hai.
         (Pehle -8px tha jo screen ke kinare se bahar nikal kar
         horizontal scrollbar bana raha tha - is liye -6px kiya aur
         neeche ek extra safety fix bhi add kar rahe hain) */

    background-color: var(--color-accent);
    color: var(--color-bg);

    font-size: 0.7rem;
    font-weight: 700;

    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* ^ 50% radius se yeh box bilkul GOL (circle) ban jata hai */

    display: flex;
    align-items: center;
    justify-content: center;
    /* ^ In teeno se number ("0") badge ke bilkul beech mein aa jata hai */
}


/* ============ ROW 3: NAVIGATION ============ */
.main-navigation {
    background-color: var(--color-header-bg);
    /* ^ Pehle dark tha - ab Header jaisa hi WHITE, consistent light theme ke liye */

    border-bottom: 1px solid #e5e5e5;
    /* ^ Halki si line taake Nav row aur neeche ka content alag dikhein */
}

.main-navigation .container {
    padding-block: 0.75rem;
    /* ^ Nav row ke upar/neeche gap */
}

.main-navigation ul {
    display: flex;
    /* ^ Menu items (li) ko bhi ek line mein side-by-side arrange karta hai,
         warna default mein yeh upar-neeche (vertical list) hote hain */

    list-style: none;
    /* ^ Bullet points (•) hata deta hai - ab yeh normal list nahi lagegi */

    gap: 1.5rem;
    /* ^ Har menu item ke darmiyan barabar gap (1.5rem) - purane tareeqe
         mein log har <li> par margin-right lagate thay, "gap" modern aur
         aasan tareeqa hai */
}

.main-navigation a {
    color: var(--color-header-text);
    /* ^ Pehle white tha - ab dark gray, kyunke nav ka background ab white hai */

    font-weight: 500;
    /* ^ Halka bold - normal text se thora alag dikhne ke liye */
}

.main-navigation a:hover {
    color: var(--color-hover);
    /* ^ Hover Color variable - Customizer se alag control ho sakti hai,
         Primary Color se juda hona zaroori nahi */
}


/* ==========================================================================
   SECTION 6: Footer Layout
   ========================================================================== */
.site-footer {
    background-color: var(--color-footer-bg);
    /* ^ Footer hamesha dark gray/black rehta hai (secondary color) -
         chahe Light mode ho ya Dark mode, yeh common professional
         pattern hai (footer "heavy/grounded" lagta hai) */

    color: var(--color-bg);
    /* ^ Footer ka text white (dark background ke sath contrast) */

    padding-block: 1.5rem;
    /* ^ Footer ke upar/neeche extra gap */

    margin-top: 3rem;
    /* ^ Footer aur us se upar wale content ke darmiyan gap, taake footer
         "chipka hua" na lage */

    text-align: center;
    /* ^ Copyright text ko center mein rakhta hai */
}

.site-footer p {
    margin-bottom: 0;
    /* ^ Section 3 mein humne har <p> ka margin-bottom set kiya tha,
         lekin footer ke aakhri paragraph ke neeche extra gap ki
         zaroorat nahi - is liye yahan overwrite kar diya */
}


/* ==========================================================================
   SECTION 7: Mobile Responsive Adjustment
   Yeh sirf WEBSITE ke mobile BROWSER view ke liye hai - Android/iOS
   app se iska koi taluq nahi.
   ========================================================================== */
@media (max-width: 768px) {
    /* ^ Yeh rule SIRF tab lagega jab screen ki width 768px ya usse
         kam ho (yani phone/chota tablet). Bade screen (laptop/desktop)
         par yeh rules ignore ho jayenge. */

    h1 { font-size: 1.875rem; }
    /* ^ Chote screen par bara heading thora chota kar diya, taake phone
         mein ajeeb na lage */

    h2 { font-size: 1.5rem; }
    /* ^ Isi tarah dusra heading bhi chota */

    .container {
        padding-inline: calc(var(--spacing-unit) * 0.75);
        /* ^ Chote screen par side ka gap thora kam kar diya (0.75 guna),
             taake mobile par content ke liye zyada jagah bache */
    }

    .site-header .container {
        flex-direction: column;
        /* ^ Mobile par logo aur menu ko side-by-side ke bajaye UPAR-NEECHE
             stack kar deta hai - chhoti screen par side-by-side rakhna
             ajeeb/tight lagta */

        align-items: flex-start;
        /* ^ Stack hone ke baad dono cheezen left-aligned rahengi */

        gap: 1rem;
        /* ^ Stacked hone par logo aur menu ke darmiyan gap */
    }

    .main-navigation ul {
        flex-wrap: wrap;
        /* ^ Agar menu items zyada hon aur ek line mein na samayein,
             to agli line par chale jayenge (mobile par common zaroorat) */

        gap: 1rem;
        /* ^ Chote screen par gap thora kam kar diya */
    }

    .top-bar-inner {
        flex-direction: column;
        /* ^ Mobile par contact info aur social icons ko upar-neeche
             stack karna - side-by-side chote screen par tang lagta */

        align-items: flex-start;
        gap: 0.5rem;
    }

    .top-bar-contact {
        flex-direction: column;
        align-items: center;
        /* ^ Pehle "flex-start" (left) thi, ab "center" - aap ki request
             ke mutabiq */

        text-align: center;
        width: 100%;
        gap: 0.35rem;
        /* ^ Address/Phone/Email bhi mobile par apni apni line mein */
    }

    .wabxpart-header-mobile-left .top-bar-contact {
        align-items: flex-start;
        text-align: left;
        /* ^ OPT-OUT: agar "Center header items on mobile" uncheck ho,
             to contact info bhi wapis left-aligned ho jayega */
    }

    .wabxpart-hide-contact-mobile .top-bar-contact {
        display: none;
        /* ^ Naya option: agar "Show contact info on mobile" uncheck
             ho, to yeh poora block mobile/tablet par GHAYAB ho jayega.
             (Yeh rule MEDIA QUERY ke andar hai, is liye desktop par
             koi asar nahi parega - wahan hamesha dikhega) */
    }

    .top-bar-social {
        width: 100%;
        /* ^ Poori width le taake center karne ke liye jagah ho */

        justify-content: center;
        /* ^ Default: social icons mobile par CENTER mein (jaisa
             aap ne mangwaya). Agar Customizer se off kiya to
             neeche wali rule ise override kar degi. */
    }

    .wabxpart-social-mobile-left .top-bar-social {
        justify-content: flex-start;
        /* ^ OPT-OUT: agar admin ne "Center social icons on mobile"
             uncheck kiya ho, to yeh wapis LEFT mein le aayega */
    }

    .main-header {
        grid-template-columns: 1fr auto;
        /* ^ Ab 2 columns: pehla flexible (search ke liye), doosra
             sirf utni jagah jitni cart icon ko chahiye */

        grid-template-areas:
            "logo    logo"
            "search  actions";
        /* ^ "Grid Areas" - yeh ek "naqsha" (map) hai row/column ka.
             Pehli row mein "logo" dono columns cover karta hai (upar,
             poori chaurai). Doosri row mein "search" left column aur
             "actions" (cart) right column - yani EK LINE mein sath! */
    }

    .site-branding {
        grid-area: logo;
        /* ^ Yeh element upar wale naqshe ke "logo" naam wali jagah mein jayega */

        justify-self: center;
        text-align: center;
    }

    .header-search {
        grid-area: search;
        /* ^ "search" wali jagah mein - doosri row, LEFT side */
    }

    .header-actions {
        grid-area: actions;
        /* ^ "actions" wali jagah mein - doosri row, RIGHT side,
             search ke bilkul barabar/sath */

        justify-self: end;
        /* ^ Apne column ke end (right) mein rahe */

        align-self: center;
        /* ^ Grid row ki poori height (jo search box ki wajah se bari
             ho sakti hai) ke andar, iconon ko VERTICALLY center karta
             hai - yehi cart/wishlist ke "misalign" hone ka fix hai */
    }

    /* =========================================================
       OPT-OUT: Agar Customizer se "Center header on mobile"
       checkbox UNCHECK kiya gaya ho, body par yeh class lagti hai
       aur logo ko wapis LEFT-aligned kar deti hai (search/cart
       row apni jagah rahegi, kyunke woh already ek functional
       side-by-side layout hai, left-right hi rehna behtar hai).
       ========================================================= */
    .wabxpart-header-mobile-left .site-branding {
        justify-self: start;
        text-align: left;
    }

    .header-search {
        max-width: 100%;
        /* ^ Mobile par search bar poori chaurai le sakti hai (desktop
             wali 500px limit hata di) */
    }

    .header-actions {
        margin-inline-start: 0;
        justify-content: space-between;
        /* ^ Mobile par "Call Us" aur Cart ko poori width mein
             left-right spread kar diya, ek jagah simat kar nahi rakha */
    }

    .header-callus {
        display: none;
        /* ^ Mobile par "Call Us" text chupa diya - jagah kam hoti hai,
             aur phone number top-bar mein already maujood hai */
    }
}


/* ==========================================================================
   SECTION 8: Dark Mode
   Yeh SIRF tab active hoti hai jab Customizer > Site Colors > "Color
   Scheme" mein "Dark" select kiya jaye. Us waqt PHP (inc/customizer.php)
   <body> tag par "theme-dark" class laga deta hai, aur yeh saari rules
   sirf usi class ke andar apply hoti hain.
   ========================================================================== */
.theme-dark {
    --color-bg: #121212;
    /* ^ Pehle white tha, ab bohat dark (near-black) - page ka background */

    --color-text: #f0f0f0;
    /* ^ Pehle dark tha, ab halka/white - normal paragraph text ab
         dark background par parhne layak rahega */

    --color-header-bg: #1a1a1a;
    /* ^ Header/Nav ka background bhi dark ho jata hai */

    --color-header-text: #f0f0f0;
    /* ^ ZAROORI: aap ne manga tha "dark mein font color white ho jaye" -
         yehi line woh karti hai, header/nav ka text ab white hai */

    --color-surface: #1e1e1e;
    /* ^ Aap ne kaha tha "baqi gray black jaisa ho jaye" - yeh input
         boxes/dropdown jaisi "surfaces" ko halke grey se bohat dark
         (almost black) bana deta hai */
}

/* Dark mode mein header/nav ke border bhi halke (subtle) hone chahiye
   dark background par - light mode wali #e5e5e5 (halka grey) border
   dark background par bohat "loud"/mismatched lagti */
.theme-dark .site-header,
.theme-dark .main-navigation {
    border-color: #2a2a2a;
}

/* Search box ka border bhi dark mode mein primary ki jagah subtle grey -
   taake bohat "chamakta" na lage dark background par */
.theme-dark .header-search {
    border-color: #333333;
}

.theme-dark .header-category-select {
    border-right-color: #333333;
}

/* ===================================================================
   WABXPART ECOMMERCE SHOP STYLES
   =================================================================== */

.wabx-shop-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
}

.wabx-shop-header {
    text-align: center;
    margin-bottom: 35px;
}

.wabx-shop-title {
    font-size: 28px;
    color: #1a1a1a;
    font-weight: 700;
}

.wabx-shop-desc {
    color: #777;
    margin-top: 5px;
}

/* Products Grid */
.wabx-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
}

/* Single Product Card */
.wabx-product-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wabx-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* Sale Badge */
.wabx-sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #d63638;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
    text-transform: uppercase;
}

/* Product Thumbnail */
.wabx-product-thumb {
    width: 100%;
    height: 240px;
    background: #f7f7f7;
    overflow: hidden;
}

.wabx-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.wabx-product-card:hover .wabx-card-img {
    transform: scale(1.05);
}

.wabx-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
}

/* Product Info */
.wabx-product-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.wabx-product-category {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.wabx-product-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.wabx-product-title a {
    color: #222;
    text-decoration: none;
}

.wabx-product-title a:hover {
    color: #0d441f; /* Matching your header green */
}

/* Price */
.wabx-product-price {
    font-size: 16px;
    margin-bottom: 15px;
}

/* Button */
.wabx-product-action {
    margin-top: auto;
}

.wabx-btn-product {
    display: block;
    text-align: center;
    background: #0d441f; /* Header ka dark green match */
    color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.wabx-btn-product:hover {
    background: #156630;
    color: #fff;
}

/* ===================================================================
   SINGLE PRODUCT PAGE STYLES
   =================================================================== */

.wabx-single-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
}

.wabx-product-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    background: #ffffff;
    padding: 35px;
    border-radius: 10px;
    border: 1px solid #eaeaea;
}

@media (max-width: 768px) {
    .wabx-product-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Gallery Section */
.wabx-main-image {
    width: 100%;
    height: 440px;
    background: #fbfbfb;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wabx-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.wabx-thumbnails-row {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.wabx-thumb {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.wabx-thumb:hover, .wabx-thumb.active {
    border-color: #0d441f; /* Header match green */
    opacity: 0.9;
}

/* Summary Section */
.wabx-product-cat-tag {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.wabx-single-title {
    font-size: 28px;
    color: #1a1a1a;
    margin: 10px 0 15px 0;
    font-weight: 700;
}

.wabx-single-price {
    font-size: 26px;
    margin-bottom: 20px;
}

.wabx-meta-details {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 0;
    margin-bottom: 20px;
}

.wabx-meta-line {
    margin-bottom: 6px;
    font-size: 14px;
    color: #555;
}

.wabx-meta-line strong {
    color: #222;
}

.wabx-single-description {
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
    font-size: 15px;
}

/* Actions & Cart Form */
.wabx-form-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.wabx-qty-input {
    width: 70px;
    height: 48px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    text-align: center;
}

.wabx-btn-add-cart {
    flex-grow: 1;
    height: 48px;
    background: #0d441f; /* Header green */
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease;
}

.wabx-btn-add-cart:hover {
    background: #156630;
}

.wabx-btn-add-cart:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* ===================================================================
   CART PAGE STYLES
   =================================================================== */

.wabx-cart-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.wabx-page-title {
    font-size: 26px;
    margin-bottom: 25px;
    font-weight: 700;
}

.wabx-cart-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start;
}

@media (max-width: 850px) {
    .wabx-cart-layout {
        grid-template-columns: 1fr;
    }
}

.wabx-cart-table-wrapper {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
}

.wabx-cart-table {
    width: 100%;
    border-collapse: collapse;
}

.wabx-cart-table th {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #eee;
    color: #666;
    font-size: 14px;
}

.wabx-cart-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #f2f2f2;
    vertical-align: middle;
}

.wabx-cart-product-cell {
    display: flex;
    align-items: center;
    gap: 15px;
}

.wabx-cart-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.wabx-cart-title {
    color: #222;
    text-decoration: none;
    font-weight: 600;
}

.wabx-btn-remove {
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

/* Summary Box */
.wabx-cart-summary {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 25px;
}

.wabx-cart-summary h3 {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.wabx-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 15px;
    color: #555;
}

.wabx-total-row {
    border-top: 1px solid #eee;
    padding-top: 15px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.wabx-btn-checkout {
    display: block;
    text-align: center;
    background: #0d441f; /* Header match green */
    color: #fff;
    text-decoration: none;
    padding: 14px;
    border-radius: 6px;
    font-weight: 600;
    margin-top: 20px;
    transition: background 0.2s;
}

.wabx-btn-checkout:hover {
    background: #156630;
}

.wabx-empty-cart {
    background: #fff;
    padding: 50px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #eaeaea;
}

.wabx-btn-shop {
    display: inline-block;
    background: #0d441f;
    color: #fff;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
}

/* Quantity Controller Buttons */
.wabx-qty-controller {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.wabx-qty-btn {
    background: #f1f1f1;
    border: none;
    width: 32px;
    height: 32px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.wabx-qty-btn:hover {
    background: #0d441f; /* Header match green */
    color: #fff;
}

.wabx-cart-qty-input {
    width: 45px;
    height: 32px;
    border: none;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    background: transparent;
    -moz-appearance: textfield;
}

.wabx-cart-qty-input::-webkit-outer-spin-button,
.wabx-cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===================================================================
   CHECKOUT PAGE STYLES
   =================================================================== */

.wabx-checkout-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.wabx-checkout-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 850px) {
    .wabx-checkout-layout {
        grid-template-columns: 1fr;
    }
}

.wabx-billing-fields {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 25px;
}

.wabx-billing-fields h2, .wabx-checkout-sidebar h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #222;
}

.wabx-form-row {
    margin-bottom: 15px;
}

.wabx-form-row.double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.wabx-form-row label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #444;
}

.wabx-form-row input[type="text"],
.wabx-form-row input[type="email"],
.wabx-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 15px;
}

/* Review Table & Sidebar */
.wabx-order-review {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 25px;
}

.wabx-review-table, .wabx-confirmation-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.wabx-review-table th, .wabx-review-table td,
.wabx-confirmation-table td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.wabx-grand-total td {
    border-top: 2px solid #ddd;
    border-bottom: none;
    padding-top: 15px;
}

/* Payment box */
.wabx-payment-methods {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.wabx-payment-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    cursor: pointer;
}

.wabx-payment-desc {
    font-size: 13px;
    color: #666;
    margin: 8px 0 0 24px;
}

/* Thank you box */
.wabx-thankyou-box {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 40px;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.wabx-thankyou-icon {
    font-size: 48px;
    color: #00a32a;
    line-height: 1;
    margin-bottom: 15px;
}

.wabx-summary-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    background: #fdfdfd;
    border: 1px dashed #ccc;
    padding: 15px;
    border-radius: 6px;
    margin: 25px 0;
    text-align: left;
    font-size: 14px;
}

.wabx-shipping-info {
    text-align: left;
    background: #fbfbfb;
    padding: 15px;
    border-radius: 6px;
    margin-top: 20px;
    font-size: 14px;
}

/* Wishlist Button on Product Cards */
.wabx-btn-wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: #444;
}

.wabx-btn-wishlist:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.wabx-btn-wishlist.active svg {
    fill: #d63638;
    stroke: #d63638;
}

/* Card Action Buttons Hover */
.wabx-btn-grid-cart:hover {
    background: #156630 !important;
}

.wabx-btn-grid-buynow:hover {
    background: #d48e25 !important;
}

.wabx-btn-wishlist:hover {
    transform: scale(1.1);
}

/* ===================================================================
   LIVE SHIPMENT TRACKING STYLES
   =================================================================== */

.wabx-track-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

.wabx-track-header {
    text-align: center;
    margin-bottom: 30px;
}

.wabx-track-form-box {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.wabx-track-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 15px;
    align-items: end;
}

.wabx-track-form-grid label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #444;
}

.wabx-track-form-grid input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.wabx-btn-track {
    background: #0d441f;
    color: #fff;
    border: none;
    padding: 11px 24px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.wabx-btn-track:hover {
    background: #156630;
}

.wabx-track-error {
    background: #fbeae5;
    color: #d63638;
    padding: 12px;
    border-radius: 5px;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 600;
}

/* Results Card */
.wabx-track-results-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 30px;
    margin-top: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.wabx-track-result-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.wabx-status-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.status-processing { background: #e7f5ea; color: #0d441f; }
.status-shipped { background: #eef2fa; color: #2271b1; }
.status-completed { background: #d1e7dd; color: #0f5132; }
.status-on-hold { background: #fff8e5; color: #8a6d3b; }

/* Visual Timeline */
.wabx-timeline-wrapper {
    margin: 40px 0;
    padding: 0 10px;
}

.wabx-timeline-track {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wabx-timeline-track::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #eee;
    z-index: 1;
}

.wabx-timeline-progress {
    position: absolute;
    top: 20px;
    left: 0;
    height: 4px;
    background: #0d441f;
    z-index: 2;
    transition: width 0.4s ease;
}

.wabx-timeline-step {
    position: relative;
    z-index: 3;
    text-align: center;
    width: 80px;
}

.wabx-step-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px auto;
    font-size: 18px;
    transition: all 0.3s;
}

.wabx-step-title {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    display: block;
}

.wabx-timeline-step.completed .wabx-step-circle {
    border-color: #0d441f;
    background: #e7f5ea;
    box-shadow: 0 0 0 4px rgba(13, 68, 31, 0.1);
}

.wabx-timeline-step.completed .wabx-step-title {
    color: #0d441f;
}

.wabx-track-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 25px;
}

@media (max-width: 650px) {
    .wabx-track-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .wabx-track-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Shop Sidebar Responsive Layout */
@media (max-width: 880px) {
    .wabx-shop-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
}

/* ===================================================================
   PREMIUM BUTTON HOVER EFFECTS & MICRO-INTERACTIONS
   =================================================================== */

/* 1. Add to Cart Button Hover */
.wabx-btn-add-cart {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.wabx-btn-add-cart:hover {
    background: #156630 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 68, 31, 0.35) !important;
}

.wabx-btn-add-cart:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(13, 68, 31, 0.2) !important;
}

/* 2. Buy Now Button Hover */
.wabx-btn-single-buynow {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.wabx-btn-single-buynow:hover {
    background: #d48e25 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(231, 163, 60, 0.4) !important;
}

.wabx-btn-single-buynow:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(231, 163, 60, 0.2) !important;
}

/* 3. Order on WhatsApp Button Hover */
#wabx_single_whatsapp_btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#wabx_single_whatsapp_btn:hover {
    background: #1eb956 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4) !important;
}

#wabx_single_whatsapp_btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.2) !important;
}

/* 4. Social Share Buttons (Pills Hover) */
.wabx-social-share-box a,
.wabx-social-share-box button {
    transition: all 0.2s ease !important;
}

.wabx-social-share-box a:hover,
.wabx-social-share-box button:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Copy Link Button Specific Hover */
#wabx_copy_link_btn:hover {
    border-color: #0d441f !important;
    color: #0d441f !important;
    background: #e7f5ea !important;
}

/* 5. Variation Option Pills Hover */
.wabx-var-pill {
    transition: all 0.2s ease !important;
}

.wabx-var-pill:hover:not(.active) {
    border-color: #0d441f !important;
    color: #0d441f !important;
    background: #f4fbf5 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ===================================================================
   WHATSAPP BUTTONS & FLOATING AI BOT HOVER INTERACTIONS
   =================================================================== */

/* 1. Product Card WhatsApp Buttons (Grid & Cards) */
.wabx-card-actions a[href*="whatsapp.com"] {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.wabx-card-actions a[href*="whatsapp.com"]:hover {
    background: #1eb956 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.5) !important;
    color: #ffffff !important;
}

.wabx-card-actions a[href*="whatsapp.com"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(37, 211, 102, 0.25) !important;
}

/* 2. Global Floating WhatsApp AI Bot Circular Button */
#wabx_wa_toggle_btn {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    animation: wabxFloatingPulse 3s infinite ease-in-out;
}

#wabx_wa_toggle_btn:hover {
    transform: scale(1.12) rotate(6deg) !important;
    background: #1eb956 !important;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.65) !important;
}

#wabx_wa_toggle_btn:active {
    transform: scale(0.95) rotate(0deg) !important;
}

/* Ambient Idle Glow Pulse for Floating Bot */
@keyframes wabxFloatingPulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
    }
    50% {
        box-shadow: 0 8px 30px rgba(37, 211, 102, 0.75);
    }
}

/* 3. AI Chat Box Quick Action Buttons Hover */
#wabx_ai_chat_window button {
    transition: all 0.2s ease !important;
}

#wabx_ai_chat_window button:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Chat Close Icon (x) Rotation Hover */
#wabx_ai_chat_window div[style*="background: #0d441f"] button:hover {
    transform: rotate(90deg) !important;
    opacity: 0.85;
}

/* ===================================================================
   PRODUCT CARD BOX - ALL BUTTONS TACTILE HOVER & GLOW EFFECTS
   =================================================================== */

/* 1. Base Transition for All Buttons & Links inside Card Actions */
.wabx-card-actions button,
.wabx-card-actions a {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* 2. "Add to Cart" Button Hover (Green Glow) */
.wabx-card-actions .wabx-btn-grid-cart:hover {
    background: #156630 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(13, 68, 31, 0.45) !important;
}
.wabx-card-actions .wabx-btn-grid-cart:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(13, 68, 31, 0.2) !important;
}

/* 3. "Buy Now" Button Hover (Golden Glow) */
.wabx-card-actions .wabx-btn-grid-buynow:hover {
    background: #d48e25 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(231, 163, 60, 0.45) !important;
}
.wabx-card-actions .wabx-btn-grid-buynow:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(231, 163, 60, 0.2) !important;
}

/* 4. "WhatsApp" Button Hover (Neon Green Glow) */
.wabx-card-actions a[href*="whatsapp.com"]:hover {
    background: #1eb956 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.5) !important;
    color: #ffffff !important;
}
.wabx-card-actions a[href*="whatsapp.com"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.2) !important;
}

/* 5. "Send Price Inquiry" / Form Button Hover (Blue Glow) */
.wabx-card-actions .wabx-open-inquiry-modal:hover {
    background: #135e96 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(34, 113, 177, 0.45) !important;
    color: #ffffff !important;
}
.wabx-card-actions .wabx-open-inquiry-modal:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(34, 113, 177, 0.2) !important;
}

/* 6. Floating Wishlist Heart Button Hover */
.wabx-btn-wishlist {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.wabx-btn-wishlist:hover {
    transform: scale(1.18) !important;
    box-shadow: 0 6px 16px rgba(214, 54, 56, 0.35) !important;
    background: #ffffff !important;
}
.wabx-btn-wishlist:active {
    transform: scale(0.95) !important;
}