/*==================================================
        BUYREX — MAIN STYLESHEET
        Table of contents (Ctrl+F kar ke section
        naam search karein, seedha wahan pahunch
        jayenge):

        1.  RESET
        2.  MOBILE WRAPPER
        3.  SCROLL CONTAINER
        4.  HEADER
        5.  HEADER BUTTONS
        6.  SEARCH
        7.  HERO
        8.  FEATURE BOXES
        9.  SECTION HEADER (generic "See all" titles)
        10. CATEGORIES
        11. OUR-PRODUCTS (product grid)
        12. BEST SELLERS
        13. PROMO BANNER
        14. WHY BUYREX
        15. NEWSLETTER
        16. FOOTER
        17. BOTTOM NAVIGATION
        18. SCROLL BUTTON (scroll-to-top)
        19. ANIMATION (reveal-on-scroll)
        20. MERGED LOGIC COMPONENTS
        21. PRODUCT CARD CONTENT (grid card design)
        22. PRODUCT DETAIL PAGE
        23. INFO PAGES (About/Contact/Privacy/Terms)
        24. CART & CHECKOUT — shared layout + animation
        25. CART & CHECKOUT — page header, nav visibility
        26. CART PAGE — proceed button, line items,
            summary box, product card
        27. CHECKOUT PAGE — form
        28. TOAST
        29. ORDER SUCCESS OVERLAY
        30. SIDE MENU (hamburger drawer)
        31. WHATSAPP FLOAT BUTTON
        32. DESKTOP VIEW (tablet mockup for PC screens)

        Related files:
        - variables.css  -> saare colors/spacing/fonts
        - responsive.css -> mobile screen size adjustments
==================================================*/


/*==================================================
                RESET
==================================================*/

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font);
    background: var(--body);
    color: var(--title);
    line-height: 1.6;
    overflow: hidden;
    /* FIX: pehle sirf overflow-x:hidden tha. Poori body page
       ka apna scroll allowed tha — is wajah se jab mobile
       browser ka address bar hide/show hota (aur viewport
       height badalti), poori page thora scroll ho jati thi,
       jisse .mobile-wrapper ka bottom edge (aur usme moujood
       bottom-nav) kabhi visible kabhi viewport se neeche chala
       jata tha. Ab body khud kabhi scroll nahi hogi — scroll
       sirf .scroll-content ke andar hota hai jaisa design mein
       tha, is liye bottom-nav hamesha stable rahega. */
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input {
    border: none;
    outline: none;
    font-family: inherit;
}

button {
    cursor: pointer;
}

ul {
    list-style: none;
}


/*==================================================
            MOBILE WRAPPER
==================================================*/

.mobile-wrapper {
    width: 100%;
    max-width: 768px;
    height: 100vh;
    /* fallback for older browsers that don't support dvh */
    height: 100dvh;
    /* FIX: 100vh mobile browsers mein us waqt ki height leta
       hai jab address bar HIDDEN ho (bara wala number) — jab
       bar visible hoti hai to asli visible screen chhoti hoti
       hai, is se wrapper "overflow" ho kar page ko scroll
       karwata tha. 100dvh (dynamic viewport height) hamesha
       ABHI ke visible viewport ke hisaab se apne aap update
       hoti hai — Daraz jaisi sites bhi isi wajah se stable
       rehti hain. */
    /* fixed to viewport height so it always behaves like
       a phone/tablet screen, mobile aur desktop dono pe */
    margin: auto;
    background: var(--white);
    position: relative;
    overflow: hidden;
    /* wrapper khud scroll nahi karega — scroll sirf
       .scroll-content ke andar hoga */
    box-shadow: var(--shadow-lg);
}

/*==================================================
        SCROLL CONTAINER (the actual scrolling area)
        Header, top-bar, hero, products, footer — sab
        isi ke andar hain. Buttons (whatsapp, scroll-top,
        bottom-nav) is se BAHAR hain isliye kabhi scroll
        nahi honge.
==================================================*/

.scroll-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    /* -webkit-overflow-scrolling: touch hata diya — is
       purani iOS property ki wajah se sticky .header touch/
       momentum scroll ke dauran vibrate/flicker karta tha.
       Modern mobile browsers ko iski zarurat nahi, native
       scroll already smooth hai. */
}

.scroll-content::-webkit-scrollbar {
    width: 4px;
}

.scroll-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .15);
    border-radius: 4px;
}

/*--==========================================
                TOP LINE
===========================================*/

.top-bar {
    width: 100%;
    height: 25px;
    background: #09182e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    box-sizing: border-box;
    /* NOT sticky — is liye content ke sath scroll ho kar
       upar chali jayegi, jaisa chahiye tha */
}

.top-left,
.top-right {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.truck-icon,
.fire-icon {
    width: 14px;
    height: 14px;
    color: #ff7a00;
    flex-shrink: 0;
}

.top-right strong {
    font-weight: 700;
}


/*==================================================
                HEADER
==================================================*/

.header {
    position: sticky;
    top: 0;
    z-index: 999;
    height: 70px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    transform: translateZ(0);
    will-change: transform;
    /* apni GPU layer force karta hai — blur ko har scroll
       frame pe repaint hone se rokta hai, isi se vibration/
       flicker hoti thi */
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    margin-top: -10px;
}

.logo h2 {
    font-size: 30px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: .9px;
    transform: scaleX(1.1);
}

.logo span {
    color: var(--secondary);
}


/*==================================================
            HEADER BUTTONS
==================================================*/

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-action {
    display: flex;
    gap: 12px;
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.icon-btn:hover {
    transform: translateY(-2px);
}

.icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary);
}

/* Menu Button - Box shape, no background, only border */
.menu-btn {
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.menu-btn svg {
    width: 24px;
    height: 24px;
    stroke: var(--dark, #1c1f2e);
    stroke-width: 2.2;
}

/* Cart Button - No background, bigger size */
.main-cart-btn {
    width: 50px;
    height: 50px;
    background: transparent;
    box-shadow: none;
}

.main-cart-btn svg {
    width: 39px;
    height: 39px;
    stroke: #050b20;
    stroke-width: 1;
}

/* Cart Badge */
.cart-count {
    position: absolute;
    top: 10px;
    right: 16px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fb5801;
    color: #fff;
    font-size: 14px;
    font-weight: 550;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*==================================================
                SEARCH
==================================================*/

.search-area {
    padding: 5px 18px 12px 18px;
}

.search-box {
    height: 56px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 0 3px 0 18px;
    border: 1px solid #c2c2ca;
}

.search-box svg {
    width: 20px;
    height: 20px;
    color: var(--text-light);
    flex-shrink: 0;
}

.search-box input {
    flex: 1;
    background: none;
    padding: 0 14px;
    font-size: 15px;
    color: var(--title);
    border: none;
    outline: none;
    height: 100%;
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.search-box button {
    width: 70px;
    height: 50px;
    border-radius: 30px;
    background: #09172d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
}

.search-box button svg {
    width: 24px;
    height: 24px;
    color: #fff;
}


/*==================================================
                    HERO
==================================================*/

.hero {
    margin: 0 18px 24px;
    background: linear-gradient(135deg, #0F172A, #1E293B);
    border-radius: 28px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.hero::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    top: -100px;
    right: -80px;
}

.hero-subtext {
    display: block;
    color: #fe6002;
    /* Vibrant Orange */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Highlight Orange Word */
.hero h1 .highlight-orange {
    color: #FF5722;
    /* Pure Orange */
}

.hero::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(249, 115, 22, .15);
    bottom: -70px;
    left: -50px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(249, 115, 22, .18);
    color: #FDBA74;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(249, 115, 22, .25);
}

.hero h1 {
    color: #fff;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 600;
    transform: scaleX(1.1);
    padding-left: 5%;
}


.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 135px;
    height: 48px;
    border-radius: 16px;
    background: var(--gradient-orange);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--shadow-orange);
}

.hero p {
    margin: 12px 0 22px;
    color: #CBD5E1;
}


/*==================================================
            SECTION HEADER
==================================================*/

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.section-header h2 {
    font-size: 23px;
    font-weight: 600;
    color: var(--title);
}


/*==================================================
            CATEGORIES
==================================================*/

.categories {
    padding: 10px 18px 28px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--white);
    border-radius: 20px;
    padding: 14px 8px;
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

.category-card:hover {
    border-color: rgba(249, 115, 22, .25);
    box-shadow: var(--shadow-md);
}

.category-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: #FFF7ED;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.category-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.category-card span {
    font-size: 14px;
    font-weight: 600;
    color: var(--title);
}


/*==================================================
            Our-products
==================================================*/

.our-products {
    padding: 0 18px 28px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Load More button — Our Products (aur search/category
   grids) ke neeche, jab list mein aur products bache hon */
.load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.load-more-btn {
    width: 100%;
    height: 50px;
    border-radius: 16px;
    background: #fff;
    border: 2px solid var(--secondary);
    color: var(--secondary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: .25s;
}

.load-more-btn:hover {
    background: var(--secondary);
    color: #fff;
}

.product-card {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.product-card:hover {
    box-shadow: var(--shadow-md);
}

.product-image {
    aspect-ratio: 1 / 1;
    background: var(--surface);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    padding: 10px 12px 12px;
}

/* Discount */
.discount {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #f0660e;
    color: #fff;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

/* Wishlist */
.wishlist-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xs);
}

.wishlist-btn svg {
    width: 16px;
    height: 16px;
}

.product-category {
    font-size: 11px;
    color: var(--secondary);
    font-weight: 600;
}

/* Rating */
.rating {
    font-size: 11px;
    color: #FACC15;
}

.rating span {
    color: var(--text-light);
}

/* Price */
.price {
    font-size: 16px;
    font-weight: 700;
    color: #f56402;
}

.old-price {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: line-through;
}


/*==================================================
                BEST SELLERS
==================================================*/

.best-sellers {
    padding: 0 18px 28px;
}


/*==================================================
                NEWSLETTER
==================================================*/

.newsletter {
    margin: 0 18px 30px;
    background: var(--gradient-primary);
    border-radius: 24px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.newsletter h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #fff;
}

.newsletter p {
    color: #CBD5E1;
    margin-bottom: 18px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.newsletter-form input {
    height: 54px;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0 16px;
}

/* Textarea ki width aur layout control */
.newsletter-form textarea {
    width: 100%;
    max-width: 100%;
    /* Isse box hadd se zyada wide nahi hoga */
    min-height: 120px;
    /* Box ki shuruati height */
    margin: 0 auto;
    /* Box ko center mein rakhne ke liye */


    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 12px 16px;
    /* Text likhne ke liye androni space */
    font-family: inherit;
    font-size: 17px;
    resize: none;
    /* User box ko khinch kar chota bada nahi kar sakega */
    outline: none;
    box-sizing: border-box;
    /* Padding ko width ke andar barabar rakhne ke liye */
}

.newsletter-form button {
    height: 54px;
    border-radius: 16px;
    background: var(--gradient-orange);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}



/*==================================================
                WHY BUYREX
==================================================*/

.why-buyrex {
    padding: 0 18px 30px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.why-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.why-card svg {
    width: 28px;
    height: 28px;
    color: var(--secondary);
    margin-bottom: 12px;
}

.why-card h4 {
    font-size: 15px;
    margin-bottom: 6px;
}

.why-card p {
    font-size: 13px;
    color: var(--text-light);
}

/*==================================================
                    FOOTER
==================================================*/

.footer {
    background: var(--primary);
    color: #fff;
    padding: 40px 20px 110px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.footer-logo img {
    width: 48px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-column h4 {
    margin-bottom: 8px;
}

.footer-column a {
    color: #CBD5E1;
    font-size: 14px;
}

.footer-social {
    display: flex;
    gap: 14px;
    margin: 20px 0;
}

.footer-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;

    /* --- Click par aane wali browser ki default blue outline/border ko remove karne ke liye --- */
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: none;
}

.footer-social a svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    transition: fill 0.3s ease;
}

/* Sirf mouse/desktop devices par hover chalay — touch phones par sticky gray na ho */
@media (hover: hover) and (pointer: fine) {
    .footer-social a:hover {
        background: rgba(255, 255, 255, .2);
    }

    .footer-social a:hover svg {
        fill: #0f172a;
    }
}

/* Click aur focus par blue color aane se rokne ke liye */
.footer-social a:focus,
.footer-social a:active {
    outline: none;
    box-shadow: none;
}

.copyright {
    margin-top: 20px;
    font-size: 13px;
    color: #94A3B8;
}

.version-tag {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-left: 5px;
}


/*==================================================
            BOTTOM NAVIGATION
==================================================*/

.bottom-nav {
    position: absolute;
    /* FIX: pehle "position: fixed" thi, jo real browser
       viewport ke hisaab se position leta hai — is wajah se
       PC/tablet par ye .mobile-wrapper (phone mockup) ke
       bahar, asli screen ke bottom par chala jata tha.
       "absolute" ab .mobile-wrapper (position:relative) ke
       andar hi confine rehta hai — bilkul #whatsapp-btn aur
       .scroll-top jaisa — mobile, tablet, PC teeno pe sahi. */
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    /* pehle 390px thi — sirf chote phone ke hisaab se thi.
       Ab hamesha .mobile-wrapper ki poori width legi —
       phone, real tablet, aur PC mockup teeno pe sahi
       chaurai dikhegi */
    height: 72px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -10px 25px rgba(15, 23, 42, .08);
    border-top: 1px solid var(--border);
    z-index: 1300;
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #304159;
}

.bottom-nav svg {
    width: 20px;
    height: 20px;
}

.bottom-nav .active {
    color: var(--secondary);
}


/*==================================================
                SCROLL BUTTON
==================================================*/

.scroll-top {
    position: absolute;
    /* .mobile-wrapper ke andar fixed — scroll-content ke
       bahar hai is liye kabhi scroll nahi hoga */
    right: 20px;
    bottom: 90px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gradient-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-orange);
}


/*==================================================
                ANIMATION
        (single source of truth for hover/transition
         on card-type components — avoids conflicting
         duplicate values across the file)
==================================================*/

.product-card,
.category-card,
.why-card {
    transition: .35s;
}

/* FIX: hover-lift effect ab sirf un devices par apply hoga jinke
   paas asli mouse hai (hover:hover). Mobile/touchscreen par
   pehle iske bina bhi tap karte hi browser ":hover" state
   simulate kar deta tha — isi wajah se product card tap karte
   hi thoda upar "uchhal" jata tha, phir detail page khulta tha.
   Ab touch devices par ye lift trigger hi nahi hoga. */
@media (hover: hover) and (pointer: fine) {
    .product-card:hover,
    .category-card:hover,
    .why-card:hover {
        transform: translateY(-5px)!important;
    }
}

/*==================================================
        MERGED LOGIC COMPONENTS
==================================================*/

.products-empty {
    text-align: center;
    color: var(--text-light);
    padding: 30px 10px;
    font-size: 14px;
}


/*==================================================
        PRODUCT CARD CONTENT
==================================================*/

.card-title {
    font-size: 16px;
    font-weight: 510;
    color: var(--title-2);
    line-height: 1.5;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    letter-spacing: .2px;
    /* reserves space for 2 lines always, even if title is 1 line */
}

.card-desc {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
    min-height: 1.5em;
    /* reserves space for 1 line always, even if desc is empty/short */
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-direction: row;
}

.card-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.jfy-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.jfy-card-rating .star {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.jfy-card-rating .rate-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--title);
}

.jfy-card-rating .rate-review {
    font-size: 11px;
    color: var(--text-muted);
}

.card-bottom-row .cart-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    background: var(--gradient-orange);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-orange);
}

.card-bottom-row .cart-btn svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

.wishlist-btn.active svg {
    fill: var(--danger);
    stroke: var(--danger);
}

.category-card.active {
    border-color: var(--secondary);
    box-shadow: var(--shadow-orange);
}

.category-card.active .category-icon {
    background: var(--gradient-orange);
}

.category-card.active span {
    color: var(--secondary);
}

/* product card add-to-cart feedback */
.cart-btn.added {
    background: var(--success) !important;
    box-shadow: none !important;
}


/*==================================================
            PRODUCT DETAIL PAGE
        (ab ye Checkout jaisi hi "stacking overlay"
        hai — jis bhi page se khule (home/category/
        search-results), us page ko hide nahi karti,
        bas uske UPAR slide-in hoti hai. Isi liye
        z-index sabse zyada rakha hai — taake har
        origin page ke upar aa sake, search-results
        (1160) ke bhi upar)
==================================================*/

.product-detail-view {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--body-bg, #f8fafc);
    /* scroll ab .detail-scroll-content (andar wala wrapper) karta
       hai, khud is par nahi — warna .detail-actions (jo isi ke
       andar position:fixed hai) transform ki wajah se content ke
       sath scroll ho jata, cart-drawer wale bug jaisa */
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    z-index: 1170;
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        visibility 0s linear .42s;
    will-change: transform;
}

.product-detail-view.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease;
}

/* style.css mein */
.detail-scroll-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    /* container khud padding NAHI leta — is se image/header
       edge-to-edge (full width) ja sakte hain */
}

.detail-content-wrap {
    padding: 0 18px;
    /* Sirf TEXT/meta content ka horizontal padding yahan se
       aata hai. Header apni ".detail-page-head" class se aur
       image ".detail-image-wrap" se — teeno independent hain,
       neeche "PER-PAGE HEADER SPACING" section dekho. */
}

.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    color: var(--primary);
    border: none;
    cursor: pointer;
}

.detail-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #ffffff00;
    box-shadow: var(--shadow-md);
}

.detail-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #eeecec00;
}

.detail-meta {
    margin-top: 18px;
    /* Sticky action-bar apni hi height ke barabar extra scroll room
       maangta hai, warna scroll end hone tak description ki aakhri
       line uske neeche reh jati hai. Ye padding wahi missing room
       provide karti hai */
    padding-bottom: 270px;
}

.detail-meta h2 {
    font-size: 23px;
    font-weight: 600;
    color: var(--title);
    /* sirf 2 lines dikhengi, aage se cut kar ke "..." */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.detail-meta h2.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.title-readmore-btn {
    display: none;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--secondary);
    font-size: 13px;
    font-weight: 700;
    padding: 0 0 10px;
    cursor: pointer;
}

/* JS is button ko "show" class deta hai sirf jab title
   waqai 2 lines se zyada lamba ho */
.title-readmore-btn.show {
    display: inline-flex;
}

.title-readmore-btn svg {
    width: 15px;
    height: 15px;
    transition: transform .25s ease;
}

.title-readmore-btn.expanded svg {
    transform: rotate(180deg);
}

.price-large {
    font-size: 25px;
    font-weight: 610;
    color: var(--secondary);
}

.detail-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--title);
}

.detail-desc {
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
    /* description aur neeche ke sticky quantity/buttons bar ke
       darmiyan achi khasi jagah taake poora text aaram se
       parha ja sake, kahin bar ke sath overlap na ho */
    margin-bottom: 8px;
    padding-bottom: 10px;
}

.detail-actions {
    /* .cart-bottom-fixed jaisa hi sticky pattern — scroll-content
       ke andar hi bottom-nav (72px) ke upar chipka rehta hai,
       page ke baaki content ke sath scroll nahi hota */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 72px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 18px;
    background: var(--white);
    border-top: 1px solid var(--border-light);
}

.detail-actions .detail-section-title {
    margin: 0;
}

.detail-actions .detail-btn-row {
    margin-top: 6px;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border-radius: 14px;
    padding: 6px 10px;
}

.detail-btn-row {
    display: flex;
    width: 100%;
    gap: 12px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: var(--white);
    box-shadow: var(--shadow-xs);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    color: var(--primary);
}

.qty-box {
    min-width: 26px;
    text-align: center;
    font-weight: 700;
}

.btn-primary.detail-add-btn {
    flex: 1;
    width: auto;
    height: 52px;
    border-radius: 16px;
    font-size: 15px;
}

/* Buy Now — outline style, .detail-btn-row mein Add to Cart
   ke LEFT taraf rehta hai (order HTML mein set hai) */
.btn-outline.detail-buy-btn {
    flex: 1;
    height: 52px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    background: var(--white);
    border: 2px solid var(--secondary);
    color: var(--secondary);
}

.share-icons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.share-icons a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.share-icons a svg {
    width: 18px;
    height: 18px;
}


/*==================================================
                INFO PAGES
        (About / Contact / Privacy / Terms / Category)

        Har page ki apni independent class hai — ek page
        change karne se doosra disturb nahi hota. IMPORTANT:
        har class ka POORA style (display, background,
        padding, sab) ab sirf isi EK jagah hai — pehle ye
        display/padding aur background do alag jagah tooti
        hui thi. Agar kisi page ka style badalna ho, uska
        naam yahan neeche dhoondein, bas ek hi block milega.
==================================================*/

.page-contact {
    display: none;
    padding: 0px 18px 250px;
    background: var(--body-bg, #f8fafc);
    min-height: 100%;
}

.page-contact.active {
    display: block;
}

.page-contact h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--title);
}

.page-contact p {
    margin-bottom: 12px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}

.page-about {
    display: none;
    padding: 0px 18px 250px;
    background: var(--body-bg, #f8fafc);
    min-height: 100%;
}

.page-about.active {
    display: block;
}

.page-about h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--title);
}

.page-about p {
    margin-bottom: 12px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}

.page-privacy {
    display: none;
    padding: 0px 18px 250px;
    background: var(--body-bg, #f8fafc);
    min-height: 100%;
}

.page-privacy.active {
    display: block;
}

.page-privacy h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--title);
}

.page-privacy p {
    margin-bottom: 12px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}

.page-terms {
    display: none;
    padding: 0px 18px 250px;
    background: var(--body-bg, #f8fafc);
    min-height: 100%;
}

.page-terms.active {
    display: block;
}

.page-terms h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--title);
}

.page-terms p {
    margin-bottom: 12px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}

.page-category {
    display: none;
    padding: 0 18px 100px 18px;
}

.page-category.active {
    display: block;
}

.page-category h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--title);
}

.page-category p {
    margin-bottom: 12px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}

.contact-list {
    list-style: none;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text);
}

.contact-list svg {
    width: 18px;
    height: 18px;
    color: var(--secondary);
}

.contact-list a {
    color: var(--secondary);
    font-weight: 600;
}


/*==================================================
        CART / CHECKOUT / SEARCH / SEARCH-RESULTS
        — SLIDING PANELS (SPA "pages")

        In CHAAR panels ka structure same hai: mobile-
        wrapper (jiska overflow: hidden hai) ke andar,
        absolute position se right se slide-in/out hote
        hain. IMPORTANT: har class ka POORA style — display,
        padding, background, slide-animation, z-index —
        ab sirf isi EK jagah hai. (Pehle ye har class 4
        tukdon mein file mein bikhri hui thi — isi wajah
        se ek jagah change karne ka effect kahin aur nazar
        aata tha.)

        Stacking order (z-index), sabse neeche se upar:
        search-drawer (1150) -> search-results-drawer (1160)
        -> cart-drawer (1200) -> checkout-drawer (1300)

        Checkout, cart ke UPAR overlay hota hai (cart band
        kiye baghair) — Daraz jaisa stacked effect.
        Search-results, search-page ke UPAR isi tarah overlay
        hota hai (search-page peeche 'active' hi rehta hai).

        Open  -> translateX(100%) -> 0
        Close -> translateX(0) -> 100%
==================================================*/

.search-drawer {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 18px 18px 100px;
    background: var(--body-bg, #f8fafc);
    min-height: 100%;
    overflow-y: auto;
    /* FIX: pehle overflow-x set hi nahi tha — is wajah se is
       drawer (History + Search Discovery) ke andar koi bhi
       chip/element (jaise chip-remove-btn jo right:-8px par
       positioned hai) container se thora bahar nikalte hi
       poora page horizontally scroll hone lagta tha. */
    overflow-x: hidden;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    z-index: 1150;
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        visibility 0s linear .42s;
    will-change: transform;
}

.search-drawer.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease;
}

.search-results-drawer {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 18px 100px 18px;
    background: var(--body-bg, #f8fafc);
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    z-index: 1160;
    /* search-page ke bilkul OOPAR ek aur stacked layer —
       checkout-over-cart jaisa hi pattern, yehi "3rd page" hai */
    box-shadow: -6px 0 35px rgba(15, 23, 42, .18);
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        visibility 0s linear .42s;
    will-change: transform;
}

.search-results-drawer.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease;
}

.cart-drawer {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--body-bg, #f8fafc);
    /* FIX: pehle yahan overflow-y:auto tha aur .cart-bottom-fixed
       isi ke direct child ke taur par tha. Chunke is element pe
       transform bhi lagi hai (slide animation ke liye), CSS spec
       ke mutabiq transform waale ancestor ke andar "position:fixed"
       waala element viewport ke bajaye USI ancestor ke sath "fixed"
       banta hai — aur agar wo ancestor khud scroll ho raha ho to
       fixed element bhi uske sath scroll ho jata hai. Isi wajah se
       summary/proceed button products ke sath scroll ho raha tha.
       Fix: scroll ab is element pe nahi, andar wale
       .cart-scroll-content par hota hai — .cart-bottom-fixed uske
       bahar (lekin .cart-drawer ke andar) sibling hai, is liye ab
       scroll se disturb nahi hota. */
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    z-index: 1200;
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        visibility 0s linear .42s;
    will-change: transform;
}

.cart-scroll-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 18px 300px;
    /* 220px neeche extra room -> taake list ka aakhri item
       .cart-bottom-fixed (summary + proceed button) ke peeche
       chhup na jaye */
}

.cart-drawer.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease;
}

.checkout-drawer {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 18px 100px;
    background: var(--body-bg, #f8fafc);
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    z-index: 1300;
    /* checkout, cart ke bilkul oopar wali layer — isi liye stack
       hote hue overlay jaisa lagta hai, jaisa Daraz app mein hota hai */
    box-shadow: -6px 0 35px rgba(15, 23, 42, .18);
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease,
        visibility 0s linear .42s;
    will-change: transform;
}

.checkout-drawer.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease;
}


/*==================================================
        CART & CHECKOUT PAGES — PAGE HEADER
        (back button + title row, sticky top par)
==================================================*/

.page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 70px;
    /* main header (.header) 70px height ka hai aur khud
       sticky hai — is se just neeche stick karega, warna
       uske peeche chip jata tha */
    z-index: 15;
    background: var(--body-bg, #f8fafc);
    /* PADDING aur MARGIN-BOTTOM yahan se HATA diye — pehle
       yahi ek shared rule sab 9+ pages ke header ka spacing
       control karti thi, isliye ek page ka padding badalte
       hi baaki sab ka bhi badal jata tha (asli bug). Ab har
       page apni "*-page-head" class se apna spacing khud
       leta hai — dekho neeche "PER-PAGE HEADER SPACING"
       section, .page-head h3 rule ke fauran baad. */
}

/* Cart page mein header hidden hai (bottom-nav dikhta rehta
   hai), checkout/search/product-detail pages mein na header
   hai na bottom-nav — is liye in sab ka page-head top se hi
   stick karega, warna 70px ka khaali gap dikhta */
.cart-drawer .page-head,
.checkout-drawer .page-head,
.search-drawer .page-head,
.search-results-drawer .page-head,
.product-detail-view .page-head {
    top: 0;
}

/* search-page ke page-head mein title ki jagah khud
   search-box hoti hai — back button ke sath poori width le */
.search-drawer .page-head .search-box {
    flex: 1;
    height: 48px;
    margin: 0;
    min-width: 0;
    /* flex item ko default content-width se shrink hone dein,
       warna lamba placeholder/qeemat page-head ko overflow
       kara sakta hai */
}

.page-head .back-btn {
    margin-bottom: 0;
    flex-shrink: 0;
}

.page-head .cart-item-count {
    margin-left: 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
}

.page-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.page-head-actions .icon-btn {
    width: 40px;
    height: 40px;
}

.page-head-actions .icon-btn.active svg {
    fill: var(--danger);
    stroke: var(--danger);
}

.cart-drawer h3,
.page-head h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: var(--title);
}

/*==================================================
        PER-PAGE HEADER SPACING (fully isolated)
        Har page ka header ab do classes leta hai:
        "page-head" (sirf layout: flex/sticky/z-index,
        upar dekho) + ek unique "*-page-head" class
        jo SIRF padding/margin deti hai.

        Yahan se kisi bhi EK page ka spacing badalo —
        baaki 9 pages bilkul untouched rahenge, kyunki
        har ek ki apni alag class hai.
==================================================*/

.detail-page-head {
    /* .detail-scroll-content ka padding 0 hai (taake image
       full-width/edge-to-edge ja sake) — is liye sirf is
       header ko apna 18px horizontal padding khud lena
       padta hai, baaki sab neeche dekho unko zarurat nahi */
    padding: 12px 18px;
    margin-bottom: 5px;
}

.search-page-head {
    /* .search-drawer container khud already 18px horizontal
       padding le raha hai — is liye header ko apna alag se
       nahi chahiye */
    padding: 12px 0;
    margin-bottom: 5px;
}

.search-results-page-head {
    /* .search-results-drawer container already 18px padded */
    padding: 12px 0;
    margin-bottom: 5px;
}

.cart-page-head {
    /* .cart-scroll-content container already 18px padded */
    padding: 12px 0;
    margin-bottom: 5px;
}

.checkout-page-head {
    /* .checkout-drawer container already 18px padded */
    padding: 12px 0;
    margin-bottom: 5px;
}

.contact-page-head {
    /* .page-contact container already 18px padded */
    padding: 12px 0;
    margin-bottom: 5px;
}

.about-page-head {
    /* .page-about container already 18px padded */
    padding: 12px 0;
    margin-bottom: 5px;
}

.privacy-page-head {
    /* .page-privacy container already 18px padded */
    padding: 12px 0;
    margin-bottom: 5px;
}

.terms-page-head {
    /* .page-terms container already 18px padded */
    padding: 12px 0;
    margin-bottom: 5px;
}

.category-page-head {
    /* .page-category container already 18px padded */
    padding: 12px 0;
    margin-bottom: 5px;
}

.checkout-drawer h4 {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    color: var(--title);
}

/* Search Results page title — ek hi line mein rahe, agar
   search term lamba ho to "..." se cut ho jaye (Daraz jaisa) */
#search-results-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*==================================================
        CART PAGE — PROCEED BUTTON (sticky bottom bar)
==================================================*/

.cart-bottom-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 72px;
    /* bottom-nav se exactly touch — koi gap nahi chorna,
       warna beech mein se peeche ke products dikh jate hain */
    z-index: 20;
    background: var(--body-bg, #f8fafc);
    padding: 10px 18px 14px;
    /* neeche thodi extra background padding — taake gap
       ka koi transparent hissa na bache */
}

.proceed-btn {
    width: 100% !important;
    margin-top: 12px;
    height: 56px;
    border-radius: 18px;
    border: none;
    background: linear-gradient(135deg, #ff8a00, #ff5c00);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(255, 122, 0, .45);
    cursor: pointer;
    transition: transform .3s;
}

.proceed-btn:hover {
    transform: translateY(-2px);
}

/*==================================================
        CART & CHECKOUT PAGES — HEADER/NAV VISIBILITY
        (kis page par header/bottom-nav/whatsapp-btn
        dikhna hai ya nahi, .mobile-wrapper ki class
        ke hisaab se decide hota hai)
==================================================*/

/* WhatsApp aur scroll-top floating elements hain — inhe display:none
   se hide karna theek hai, koi reflow/jump nahi hota */
.mobile-wrapper.cart-mode #whatsapp-btn,
.mobile-wrapper.cart-mode .scroll-top {
    display: none !important;
}

/* Top-bar normal document-flow mein hai — display:none se neeche
   wala content turant upar shift ho jata tha (jump/jhatka). 
   visibility:hidden se ye sirf invisible hota hai, uski jagah
   (space) layout mein reserved rehti hai — koi shift nahi hota */
.mobile-wrapper.cart-mode .top-bar {
    visibility: hidden !important;
}

.mobile-wrapper.info-mode .top-bar {
    display: none !important;
}

/* CART page  -> main header GAYAB, bottom-nav DIKHTA hai
   CHECKOUT page -> na header, na bottom-nav */
.mobile-wrapper.drawer-checkout .header {
    display: none !important;
}

.mobile-wrapper.drawer-checkout .bottom-nav {
    display: none !important;
}

/*==================================================
        CART PAGE — SUMMARY BOX (subtotal/delivery/total)
==================================================*/

.cart-summary {
    margin-top: 0px;
    background: #fff;
    border-radius: 18px;
    padding: 12px 16px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, .06);
    border: 1px solid #edf2f7;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--text);
}

.cart-summary div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
    font-size: 13px;
}

.cart-summary span {
    float: right;
}

.cart-total-row {
    margin-top: 16px !important;
    padding-top: 16px;
    border-top: 1px dashed #d7dee7;
    font-size: 18px !important;
    font-weight: 800;
}

/*==================================================
        CHECKOUT PAGE — FORM (name/phone/address inputs)
==================================================*/

#checkout-form {
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    gap: 10px;
}

#checkout-form input,
#checkout-form select {
    height: 54px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 0 16px;
    margin-bottom: 12px;
    transition: .25s;
    font-size: 14px;
}

#checkout-form input:focus,
#checkout-form select:focus {
    border-color: #ff7a00;
    background: #fff;
}

#checkout-form button {
    margin-top: 6px;
    width: 100%;
    height: 50px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ff8a00, #ff5c00);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(255, 122, 0, .35);
    transition: .3s;
}

#checkout-form button:hover {
    transform: translateY(-2px);
}

.checkout-note {
    margin-top: 14px;
    font-size: 12px;
    color: #101d31;
    line-height: 1.6;
}

.urdu-note {
    font-size: 16px;
    display: block;
    font-weight: bold;
    direction: rtl;
    text-align: right;
}

.drawer-panel hr {
    border: none;
    border-top: 1px solid #edf2f7;
    margin: 22px 0;
}

/*==================================================
        CART PAGE — PRODUCT CARD (with image, used by
        updateCartUI() in js/cart.js)
==================================================*/

.cart-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
    border: 1px solid #eef2f7;
}

.cart-image {
    width: 85px;
    height: 85px;
    border-radius: 14px;
    overflow: hidden;
    background: #f8fafc;
    flex-shrink: 0;
}

.cart-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-content {
    flex: 1;
    min-width: 0;
}

.cart-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--title);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-price {
    color: var(--secondary);
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 10px;
}

.cart-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-item-controls button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 16px;
    font-weight: 700;
}

.cart-item-controls span {
    min-width: 20px;
    text-align: center;
    font-weight: 700;
}

.remove-btn {
    width: 36px !important;
    height: 36px !important;
    border: none;
    border-radius: 12px;
    background: #fff1f2 !important;
    color: #ef4444 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-btn svg {
    width: 18px;
    height: 18px;
}

#cart-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 5px 0 100px 0;
}

/*==================================================
                TOAST
==================================================*/

.toast {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
    z-index: 2000;
    box-shadow: var(--shadow-md);
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}


/*==================================================
                ORDER SUCCESS OVERLAY
==================================================*/

#order-success {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

#order-success.show {
    display: flex;
}

#feedback-success {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .6);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

#feedback-success.show {
    display: flex;
}

.success-box {
    background: #fff;
    border-radius: 24px;
    padding: 36px 30px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: pop .5s ease-out;
}

.success-box svg {
    width: 56px;
    height: 56px;
    color: var(--success);
    margin-bottom: 12px;
}

.success-box h3 {
    font-size: 18px;
    margin-bottom: 6px;
    color: var(--title);
}

.success-box p {
    font-size: 13px;
    color: var(--text-light);
}

@keyframes pop {
    0% {
        transform: scale(.6);
        opacity: 0;
    }

    60% {
        transform: scale(1.06);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}


/*==================================================
            SIDE MENU (Hamburger Drawer)
    mobile-wrapper (overflow:hidden) ke andar hi
    absolute positioned hai — isliye SPA mein bina
    page-reload/iframe ke slide karta hai
==================================================*/

#side-menu-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay);
    z-index: 2500;
    cursor: pointer;
    /* FIX: pehle "display:none/block" tha jo turant (0s mein)
       gayab/nazar hota tha — jab ke menu khud 0.35s le kar
       slide-close hota tha. Is mismatch ki wajah se overlay
       achanak gayab ho jata aur menu naye page ke upar
       "atka hua" lagta tha. Ab overlay bhi menu ki hi speed
       (0.35s) se smoothly fade in/out hoga — dono synced. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

#side-menu-overlay.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease;
}

#side-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overflow-x: visible;
    z-index: 2600;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

#side-menu.show {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    #side-menu {
        transition: none;
    }
}

/* ---------- Header ---------- */
.menu-page-header {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-20);
    border-bottom: 1px solid var(--border);
    position: relative;
}

.menu-page-header .logo-box {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-page-header .logo-box img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.menu-page-header h2 {
    font-size: var(--fs-18);
    font-weight: var(--fw-800);
    color: var(--title);
    margin: 0;
}

.menu-page-header h2 span {
    color: var(--secondary);
}

.menu-page-header p {
    font-size: var(--fs-12);
    color: var(--text-light);
    margin: 2px 0 0;
}

.menu-close-btn {
    position: absolute;
    top: var(--space-16);
    right: var(--space-16);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    border: 1px solid var(--border);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--title);
}

/* Amazon-style close button — drawer ke bahar, dimmed 20%
   area mein. #side-menu ka child hai isliye drawer ke sath
   hi slide karta hai */
.side-menu-close-outside {
    position: absolute;
    top: 20px;
    right: -46px;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    cursor: pointer;
    padding: 0;
}

.side-menu-close-outside i {
    width: 26px;
    height: 26px;
    stroke-width: 2.2;
}

/* ---------- Section label ---------- */
.menu-section-label {
    font-size: var(--fs-12);
    font-weight: var(--fw-700);
    letter-spacing: .05em;
    color: var(--text-muted);
    padding: var(--space-16) var(--space-20) var(--space-8);
}

/* ---------- List items ---------- */
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-12);
}

.menu-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12);
    border-radius: var(--radius-sm);
    color: var(--title);
    text-decoration: none;
    font-size: var(--fs-14);
    font-weight: var(--fw-500);
    cursor: pointer;
    transition: var(--transition);
}

.menu-list-item:hover {
    background: var(--surface);
}

.menu-list-item.active {
    background: var(--accent);
    color: var(--secondary-hover);
    font-weight: var(--fw-600);
}

.menu-list-item i {
    width: 20px;
    color: inherit;
}

.menu-list-item .label {
    flex: 1;
}

.menu-badge {
    background: var(--secondary);
    color: var(--white-text);
    font-size: var(--fs-10);
    font-weight: var(--fw-700);
    padding: 2px 9px;
    border-radius: var(--radius-pill);
}

/* Menu drawer ke andar Cart badge — header wali .cart-count
   (position:absolute) se bilkul independent, isi liye
   yahan position/size jo chahe adjust kar sakte hain */
.menu-cart-badge {
    display: none;
}

.menu-cart-badge.show {
    display: flex;
}

hr.menu-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-8) var(--space-20);
}

/* ---------- Promo box ---------- */
.menu-promo {
    margin: var(--space-16);
    background: var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-12);
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.menu-promo-text {
    flex: 1;
    font-size: var(--fs-12);
    color: var(--title);
    line-height: 1.4;
}

.menu-promo-text strong {
    display: block;
    font-size: var(--fs-14);
    margin-bottom: 2px;
}

.menu-promo-text .highlight {
    color: var(--secondary-hover);
    font-weight: var(--fw-700);
}

.menu-promo-arrow {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-circle);
    background: var(--secondary);
    color: var(--white-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/*==================================================
                WHATSAPP FLOAT BUTTON
==================================================*/

#whatsapp-btn {
    position: absolute;
    /* .mobile-wrapper ke andar fixed corner — scroll-content
       ke bahar hai is liye kabhi scroll nahi hoga */
    right: 20px;
    bottom: 150px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .4);
    z-index: 1500;
    color: #fff;
    transition: transform .2s;
}

#whatsapp-btn:hover {
    transform: scale(1.10);
}

#whatsapp-btn svg {
    fill: #ffffff;
    width: 30px;
    height: 30px;
}


/*==================================================
                SEARCH PAGE
        (search history + Search Discovery +
        results — .search-drawer / .search-results-drawer)
==================================================*/

.search-section {
    margin: 20px 0 24px;
    /* min-width:0 zaroori hai warna flex/grid parent ke
       andar content apni natural width force kar ke
       page ko horizontally overflow kara sakta hai */
    min-width: 0;
}

.search-section .section-header {
    margin-bottom: 12px;
}

.search-section .section-header h2 {
    font-size: 16px;
}

.search-section .section-header .view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.search-section .section-header .view-all svg,
.search-section .section-header .view-all i {
    width: 14px;
    height: 14px;
}

/* Search bar ke turant neeche — ek hi line mein
   horizontally scroll hone wali quick-suggestion strip,
   RECOMMENDED_SEARCHES se hi bharti hai */
.search-quick-row {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 4px 0 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
    scrollbar-width: none;
    /* yeh apni jagah horizontally scroll karti hai — isliye
       is par overflow-x:hidden NAHI lagana, sirf poore
       .search-drawer par (upar SLIDE ANIMATION block mein) */
}

.search-quick-row::-webkit-scrollbar {
    display: none;
}

.search-quick-row .quick-chip {
    display: inline-block;
    padding: 0 14px;
    font-size: 13px;
    color: var(--text-light);
    cursor: pointer;
    border-right: 1px solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
}

.search-quick-row .quick-chip:first-child {
    padding-left: 0;
}

.search-quick-row .quick-chip:last-child {
    border-right: none;
}

.search-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    /* FIX: flex item default mein apne content ki natural
       width tak stretch hoti hai, chahe max-width:100% laga
       ho. Lambi history/discovery chips is wajah se container
       se bahar nikal kar .search-drawer ko horizontally scroll
       kara deti thin. min-width:0 chip ko parent ke andar
       shrink/wrap hone deta hai. */
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--title);
    cursor: pointer;
    transition: var(--transition);
}

.search-chip:hover {
    border-color: rgba(249, 115, 22, .3);
}

.search-chip span {
    overflow-wrap: anywhere;
    min-width: 0;
}

.search-chip svg,
.search-chip i {
    width: 14px;
    height: 14px;
    color: var(--text-light);
    flex-shrink: 0;
}

/* Search history chips thora alag background se recommended
   se distinguish ho jayen */
.search-chip-history {
    background: var(--surface);
    position: relative;
    /* Ek line mein hi rahen — lamba text hone par "..." se
       cut ho jaye, poora chip wrap/bara na ho */
    max-width: 220px;
    /* FIX: 3-sec hold par mobile browser ka default
       text-select/copy popup (iOS callout menu, Android
       "Copy/Select all" bubble) khud khul jata tha aur
       humara chota X button dabta reh jata tha. Ye teeno
       properties us default long-press behavior ko band
       kar deti hain, taake sirf humara custom X button
       kaam kare */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.search-chip-history span {
    overflow-wrap: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* 3 second hold ke baad chip par chota gol X button dikhta hai —
   sirf usi chip ko history se remove karne ke liye */
.chip-remove-btn {
    display: flex;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #64748B;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    padding: 0;
    cursor: pointer;
}

.chip-remove-btn svg,
.chip-remove-btn i {
    width: 12px;
    height: 12px;
    color: #fff;
}

/* History ki pehli kuch chips ke baad "v" expand/collapse button */
.search-history-expand-btn {
    width: 38px;
    padding: 10px;
    justify-content: center;
}

.search-history-expand-btn svg,
.search-history-expand-btn i {
    transition: transform .25s ease;
}

.search-history-expand-btn.expanded svg,
.search-history-expand-btn.expanded i {
    transform: rotate(180deg);
}

/* Search Discovery — image jaisa 2-column grid (history
   free-flow flex-wrap hi rehti hai, sirf discovery grid hai) */
.search-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.search-chip-grid .search-chip {
    width: 100%;
    justify-content: flex-start;
}

.search-chip-grid .search-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-results-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--title);
    margin: 0;
}

.search-results-drawer .product-grid {
    margin-top: 18px;
}


/*==================================================
    DESKTOP VIEW — SHOW SITE AS TABLET MOCKUP
    (Only applies above 768px — mobile stays untouched)
==================================================*/

@media (min-width: 769px) {

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #e9edf1;
    }

    .mobile-wrapper {
        width: 600px;
        max-width: 600px;
        height: 97dvh;
        max-height: 100;
        margin: 0 auto;
        border-radius: 28px;
        box-shadow: 0 0 0 10px #1a1a1a, 0 20px 50px rgba(0, 0, 0, .35);
    }

    /* Bottom-nav ki max-width mobile ke liye 390px thi —
       is se desktop/tablet frame (1000px) mein wo chota aur
       off-center dikhta tha. Ab pura frame width le ga. */
    .bottom-nav {
        max-width: 100%;
    }



}


/*==================================================
                OFFLINE OVERLAY
        (offline.js is show/hide karta hai — jab
        internet na ho ya connection wapas aaye)
==================================================*/

#offline-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .85);
    z-index: 5000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

#offline-overlay.show {
    display: flex;
}

.offline-box {
    background: #fff;
    border-radius: 24px;
    padding: 36px 28px;
    max-width: 300px;
    box-shadow: var(--shadow-lg);
    animation: pop .5s ease-out;
}

.offline-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FEF2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.offline-icon-wrap i {
    width: 30px;
    height: 30px;
    color: var(--danger);
    stroke-width: 2;
}

.offline-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--title);
    margin-bottom: 6px;
}

.offline-box p {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.5;
}

#offline-retry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border-radius: 16px;
    border: none;
    background: var(--gradient-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-orange);
    cursor: pointer;
    transition: .25s;
}

#offline-retry-btn:hover {
    transform: translateY(-2px);
}

#offline-retry-btn i {
    width: 16px;
    height: 16px;
    transition: transform .5s ease;
}

#offline-retry-btn.retrying i {
    animation: offline-spin .7s linear infinite;
}

@keyframes offline-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}