@media only screen and (max-width: 767px) {
	.top {height: auto;overflow: hidden;}
	.top .left {float: none;}
	.top .left ul {margin-bottom: 0;margin-top: 10px;}
	.top .left ul li {float: none;text-align: center;}
	.top .right {float: none;}
	.top .right ul {text-align: center;margin-bottom: 20px;}
	.top .right ul li {float: none;display: inline-block;}
}

@media only screen and (max-width: 991px) {
	.header .inner {display: block;}
	.header .logo {display: block;width: 100%;text-align: center;}
	.header .logo img {}
	.header .search-area {display: block;}
	.header .right {display: block;}
	.header .navbar-left {text-align: center;margin-bottom: 20px;}
	.navbar-form .form-group {display: inline-block;}
	.navbar-form button {display: inline-block;}
	.header .right ul {float: none;text-align: center;margin-bottom: 20px;}
	.header .right ul li {float: none;display: inline-block;}
	.header form {
		margin-left: 0;
		margin-right: 0;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.bx-controls a.bx-prev, .bx-controls a.bx-next {padding-top: 215px!important;}
}

@media only screen and (min-width: 501px) and (max-width: 700px) {
	ul.bxslider li, ul.bxslider li .text {height: 300px;}
	.bx-controls a.bx-prev,
	.bx-controls a.bx-next {font-size: 36px;}
	ul.bxslider li .text .inner h2 {font-size: 30px;}
	ul.bxslider li .text .inner h3 {font-size: 20px;}
	.bx-controls a.bx-prev, .bx-controls a.bx-next {padding-top: 120px!important;}
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
	ul.bxslider li, ul.bxslider li .text {height: 250px;}
	.bx-controls a.bx-prev,
	.bx-controls a.bx-next {font-size: 30px;}
	ul.bxslider li .text .inner h2 {font-size: 24px;}
	ul.bxslider li .text .inner h3 {font-size: 16px;}
	.bx-controls a.bx-prev, .bx-controls a.bx-next {padding-top: 100px!important;}
}
@media only screen and (min-width: 992px) {
	.product .text {
		min-height: 190px;
	}
	.header .inner {
		width: 100%;
	}
	.header .search-area {
		padding-right: 0;
	}
	.header .search-area form {
		padding-right: 0;
	}
	.header .container {
		padding-right: 0;
	}
}

/* =======================================================
   100% PERFECT MOBILE RESPONSIVE STYLES (FINAL FIX)
   Ye code sirf 991px (Mobile/Tablet) screens ke liye hai
======================================================= */
@media only screen and (max-width: 991px) {

	/* 1. TOP BAR (Social & Contact) */
	.top { display: block !important; height: auto; padding: 5px 0; background: #050505 !important; }
	.top .left ul, .top .right ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 15px; margin: 0; padding: 2px 0; }
	.top .left ul li, .top .right ul li { float: none; font-size: 11px; color: #c5a059 !important; margin: 0; }

	/* 2. HEADER - Logo aur Icons 1 Line Mein */
	.header { padding: 12px 15px; background: #fff !important; position: relative; z-index: 99999; }
	.header .inner { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	
	/* Logo (Left Side) */
	.header .logo { display: flex; width: 45% !important; flex: 0 0 45%; text-align: left; padding: 0 !important; margin: 0; align-items: center; }
	.header .logo img { max-height: 38px !important; width: auto; margin: 0; }

	/* Icons (Right Side) */
	.header .right { display: flex; width: 55% !important; flex: 0 0 55%; justify-content: flex-end; align-items: center; padding: 0 !important; margin: 0; }
	.header .right ul { display: flex; margin: 0; padding: 0; gap: 20px; align-items: center; }
	.header .right ul li { margin: 0; padding: 0; display: flex; }
	.header .right ul li a { font-size: 0 !important; color: #111 !important; display: flex; align-items: center; }
	.header .right ul li a i { font-size: 24px !important; color: #c5a059 !important; }

	/* 3. SEARCH BAR - Logo ke neechay full width */
	.header .search-area { display: block !important; width: 100% !important; flex: 0 0 100%; margin-top: 15px; padding: 0 !important; }
	.header .search-area form { display: flex; width: 100%; margin: 0; }
	.header .search-area .form-group { width: 85%; margin: 0; display: block; }
	
	/* Input Field */
	.header .navbar-form .search-top { width: 100%; height: 40px; border-radius: 4px 0 0 4px; border: 1px solid #ddd; padding-left: 15px; }
	
	/* Search Button - Icon Perfect Center */
	.header .search-area button {
		width: 15%; 
        height: 40px; 
        border-radius: 0 4px 4px 0; 
        background: #0a0a0a !important;
		font-size: 0 !important; 
        display: flex !important; 
        justify-content: center !important; 
		align-items: center !important; 
        padding: 0 !important; 
        border: none !important; 
        line-height: 1 !important; 
        outline: none !important;
	}
	.header .search-area button::after { content: "\f002"; font-family: "FontAwesome"; color: #c5a059 !important; font-size: 16px !important; display: block !important; margin: auto !important; }

	/* 4. MOBILE MENU TOGGLE (Hamburger) */
	.nav { background: #000 !important; position: relative; z-index: 999999 !important; }
	.menu-container { width: 100%; position: relative; }
	.menu-mobile { 
		display: flex !important; justify-content: space-between; align-items: center; 
		padding: 12px 20px; color: #fff; font-weight: bold; border-bottom: 1px solid #222; 
		cursor: pointer; letter-spacing: 1px; position: relative; z-index: 999999; 
	}
	.menu-mobile:after { content: "\f0c9"; font-family: "FontAwesome"; color: #c5a059; font-size: 22px; }

	/* 5. MOBILE MENU ACCORDION (Z-Index fix so it stays on top of body/slider) */
	.menu > ul { 
		display: none; 
        background: #0a0a0a; 
        width: 100%; 
        margin: 0; 
        padding: 0; 
		position: absolute !important; /* Forces menu to float */
        top: 100%; 
        left: 0; 
		z-index: 9999999 !important; /* Stays above everything */
        box-shadow: 0 15px 40px rgba(0,0,0,0.5); 
	}
	.menu > ul > li { width: 100%; border-bottom: 1px solid #1a1a1a; display: block; float: none; margin: 0; }
	
	/* Main Links */
	.menu > ul > li > a { display: flex; justify-content: space-between; padding: 15px 20px; color: #fff !important; font-size: 13px; text-transform: uppercase; }
	.menu > ul > li:has(ul) > a::after { content: "\f107"; font-family: "FontAwesome"; color: #c5a059; font-size: 18px; }

	/* Sub-Menus (Hidden by default, opened by JavaScript) */
	.menu > ul > li > ul { display: none; background: #000; padding: 0; margin: 0; position: static; width: 100%; }
	.menu > ul > li > ul > li { width: 100%; border-bottom: 1px solid #111; display: block; float: none; }
	.menu > ul > li > ul > li > a { padding: 12px 20px 12px 30px; color: #aaa !important; display: block; font-size: 12px; }

	/* 3rd Level Menu */
	.menu > ul > li > ul > li > ul { display: none; background: #111; padding: 0; margin: 0; position: static; }
	.menu > ul > li > ul > li > ul > li { display: block; width: 100%; float: none; }
	.menu > ul > li > ul > li > ul > li > a { padding: 10px 20px 10px 45px; color: #777 !important; display: block; }
}


/* =======================================================
   BANNERS & SLIDER - MOBILE/TABLET (NO CROP)
======================================================= */

/* For Tablets (iPads) */
@media only screen and (max-width: 991px) {
    .bs-slider, 
    .bs-slider .carousel-inner, 
    .bs-slider .item { 
        height: 250px !important; 
    }
}

/* For Mobile Phones */
@media only screen and (max-width: 767px) {
    .bs-slider, 
    .bs-slider .carousel-inner, 
    .bs-slider .item { 
        height: 180px !important; /* Mobile par smart height */
    }
    
    .bs-slider .slide-text h1 { 
        font-size: 18px !important; 
        margin-bottom: 8px !important; 
    }
    
    /* Mobile par paragraph hide kiya gaya hai taake text fit aaye */
    .bs-slider .slide-text p { display: none !important; }
    
    .bs-slider .slide-text .btn-primary { 
        padding: 5px 12px !important; 
        font-size: 11px !important; 
    }
    
    /* Arrows position ko center kiya hai */
    .carousel-control .fa-angle-left, 
    .carousel-control .fa-angle-right {
        margin-top: 0 !important; /* Flexbox khud center karega */
        font-size: 20px !important;
    }
}

/* =======================================================
   SERVICES SECTION - MOBILE ONLY (3 IN A ROW APP STYLE)
======================================================= */
@media only screen and (max-width: 767px) {
    
    .service { 
        padding: 30px 0; 
        background: #fdfdfd; 
    }
    
    .service .container { 
        padding: 0 10px; /* Side se barabar fasla */
    }

    /* Force 3 Items in One Line */
    .service .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Agli line mein jane se rokna */
        justify-content: space-between !important; /* Darmyan mein barabar fasla */
        margin: 0 !important;
        gap: 8px; /* Boxes ke darmyan exact gap */
    }
    
    .service .col-md-4 {
        width: 33% !important; /* 3 hisson mein taqseem kiya */
        padding: 0 !important;
        display: flex;
    }

    /* Mobile Item Box Styling */
    .service .item {
        width: 100%;
        padding: 15px 5px;
        background: #fff;
        border: 1px solid #f0f0f0; /* Halka sa border outline */
        border-radius: 8px; /* App style curved corners */
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        margin-bottom: 0;
    }

    /* Smart Icons for Mobile */
    .service .item .photo {
        height: 35px; /* Icon area chota kiya */
        margin-bottom: 10px;
    }
    .service .item .photo img {
        max-height: 30px !important; /* Icon image choti ki */
    }

    /* Mobile Typography (Text sizing) */
    .service .item h3 {
        font-size: 10px !important; /* 3 boxes ki wajah se font chota rakhna laazmi hai */
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
        line-height: 1.3;
        /* Agar text lamba ho to usay 2 lines mein limit karna: */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Mobile Paragraph Note */
    .service .item p {
        font-size: 9px !important;
        line-height: 1.2;
        color: #999;
        /* Mobile par paragraph hide karna behtar hota hai, agar show karna ho to is line ko delete kar dein: */
        display: none !important; 
    }
}

/* Tablet (iPad) Styling */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service .col-md-4 { padding: 0 10px; }
    .service .item { padding: 30px 10px; }
    .service .item h3 { font-size: 12px; }
    .service .item p { font-size: 11px; }
}

/* =======================================================
   PRODUCT SECTIONS - MOBILE (2 ITEMS PER ROW)
======================================================= */
@media only screen and (max-width: 767px) {
    .product { padding: 10px 0; }
    
    .headline { margin-bottom: 25px; }
    .headline h2 { font-size: 18px; letter-spacing: 1px; margin-bottom: 5px; }
    .headline h3 { font-size: 11px; }

    /* Adjusting card for 2 columns */
    .product-carousel .item {
        padding-bottom: 15px;
        margin: 0; 
    }

    /* Image Height Fix for Mobile */
    .product-carousel .photo {
        height: 180px; /* Mobile par short aur smart */
    }

    /* Product Title Control (Agar lamba naam ho to ... aa jayega) */
    .product-carousel .text h3 {
        font-size: 10px;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 5px;
    }

    .product-carousel .text h4 { font-size: 13px; margin-bottom: 8px; }
    .product-carousel .text h4 del { font-size: 11px; }
    .product-carousel .rating { margin-bottom: 10px; font-size: 10px; }

    /* Mobile Button - Compact */
    .product-carousel .text p a {
        padding: 6px 10px;
        font-size: 9px;
        letter-spacing: 0.5px;
    }
    
    /* Mobile par cart icon hide kiya taake button fit aaye */
    .product-carousel .text p a i { display: none; }

    .out-of-stock .inner { padding: 6px 10px; font-size: 9px; }
}

/* =======================================================
   SPACING FIX FOR MOBILE (SERVICES & PRODUCTS)
======================================================= */
@media only screen and (max-width: 767px) {
    
    /* 1. Services Section Spacing (Mobile) */
    .service { 
        padding: 25px 0 !important; /* Fasla bilkul munasib aur kam ho gaya */
        background: #fdfdfd; 
    }
    
    /* 2. All Product Sections Spacing (Mobile) */
    .product { 
        padding: 25px 0 !important; /* Mobile par fasla kam aur smart */
    }
    
    /* Mobile ki Headline ki spacing */
    .headline { 
        margin-bottom: 20px !important; 
    }
}

/* Tablet (iPad) Spacing */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .service { padding: 35px 0 !important; }
    .product { padding: 35px 0 !important; }
}

/* =======================================================
   NEWSLETTER & FOOTER - MOBILE / TABLET (FIXED OVERFLOW)
======================================================= */
@media only screen and (max-width: 767px) {
    
    /* Newsletter Mobile Adjustments */
    .home-newsletter { 
        padding: 40px 15px; 
    }
    .home-newsletter .single {
        width: 100% !important; /* Forces it to stay inside screen */
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .home-newsletter h2 { 
        font-size: 16px; 
        letter-spacing: 1px; 
        margin-bottom: 15px; 
    }
    
    /* Strict Flexbox to prevent Input/Button from going out of screen */
    .home-newsletter .input-group {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .home-newsletter .form-control { 
        height: 45px; 
        font-size: 12px; 
        flex: 1; /* Input baqi tamam khali jagah le lega */
        min-width: 0; /* Bohat zarori line overflow rokne ke liye */
        padding-left: 15px;
    }
    .home-newsletter .input-group-btn {
        display: flex;
        width: auto;
    }
    .home-newsletter .btn-theme { 
        height: 45px; 
        padding: 0 15px; /* Button chota kiya */
        font-size: 11px; 
        letter-spacing: 0.5px;
        white-space: nowrap; /* Button text ko tootne nahi dega */
    }
    
    /* Footer Copyright Adjustments */
    .footer-bottom { 
        padding: 20px 15px; 
    }
    .footer-bottom .copyright { 
        font-size: 11px; 
        line-height: 1.6; 
    }
    
    /* Scrollup button smart for mobile */
    .scrollup {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 16px;
        right: 15px;
        bottom: 15px;
    }
}

/* Tablet (iPad) Fixes */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .home-newsletter .single { padding: 0 20px; }
}

/* =======================================================
   CATEGORY PAGE - MOBILE/TABLET (2 ITEMS PER ROW)
======================================================= */
@media only screen and (max-width: 767px) {
    
    /* 1. Mobile Top Banner */
    .page-banner { height: 150px; }
    .page-banner h1 { font-size: 20px; letter-spacing: 1px; }

    /* 2. Page Padding */
    .page { padding: 30px 0; }
    .page h3 { font-size: 16px; margin-bottom: 20px; }

    /* 3. Products Grid Mobile Fix (Force 2 Columns) */
    .product-cat .row {
        display: flex;
        flex-wrap: wrap; /* Zaroori cheez 2 line banane ke liye */
        margin: 0 -5px; /* Side space adjust */
    }
    .product-cat .item-product-cat {
        width: 50%; /* Har item aadhi screen le ga (2 in a row) */
        padding: 0 5px; /* Chota sa fasla */
        margin-bottom: 20px;
    }

    /* 4. Mobile Product Design Adjustments */
    .product-cat .item-product-cat .inner { padding-bottom: 15px; }
    .product-cat .photo { height: 200px; /* Mobile short image */ }
    
    /* Text Trim for Mobile */
    .product-cat .text h3 {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 5px;
    }
    .product-cat .text h4 { font-size: 13px; margin-bottom: 8px; }
    .product-cat .text h4 del { font-size: 11px; }
    .product-cat .rating { font-size: 10px; margin-bottom: 10px; }

    /* Smart Mobile Button */
    .product-cat .text p a {
        padding: 6px 10px;
        font-size: 9px;
        letter-spacing: 0.5px;
    }
    .product-cat .text p a i { display: none; /* Hide cart icon to save space */ }
}

/* Tablet Adjustments */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .product-cat .item-product-cat { width: 33.33%; /* Tablet par 3 columns */ float: left; }
    .product-cat .photo { height: 250px; }
}

/* =======================================================
   CATEGORY PAGE - HIDE SIDEBAR ON MOBILE
======================================================= */
@media only screen and (max-width: 991px) {
    
    /* Mobile aur Tablet par side wali categories ko chupana */
    .page .col-md-3 {
        display: none !important; 
    }
    
    /* Main product area ko poori screen par fit karna */
    .page .col-md-9 {
        width: 100% !important;
        padding: 0 10px !important;
    }
    
    /* Mobile par page ke oopar ka fasla thora aur kam karna */
    .page {
        padding-top: 20px !important;
    }
}

/* =======================================================
   LOGIN PAGE - MOBILE / TABLET ONLY (ISOLATED)
======================================================= */
@media only screen and (max-width: 767px) {
    
    /* 1. Mobile padding for the page */
    body:has(.user-content) .page { 
        padding: 40px 15px !important; 
        min-height: auto;
    }
    
    /* 2. Fit Card inside mobile screen */
    body:has(.user-content) .user-content { 
        padding: 40px 25px !important; 
        box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; 
        border-radius: 8px !important;
    }
    
    /* 3. Typography scaling for mobile */
    body:has(.user-content) .user-content label {
        font-size: 10px !important;
    }
    body:has(.user-content) .user-content .form-control {
        height: 35px !important;
        font-size: 13px !important;
    }
    body:has(.user-content) .user-content .btn-success {
        height: 45px !important;
        font-size: 12px !important;
    }
}

/* =======================================================
   REGISTRATION PAGE - MOBILE / TABLET ONLY (ISOLATED)
======================================================= */
@media only screen and (max-width: 767px) {
    
    body:has(input[name="cust_re_password"]) .page { 
        padding: 30px 15px !important; 
    }
    
    body:has(input[name="cust_re_password"]) .user-content { 
        padding: 35px 20px !important; 
        box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; 
        border-radius: 8px !important;
    }

    /* Mobile par form fields ek line mein lane ke liye column ki padding theek karna */
    body:has(input[name="cust_re_password"]) .user-content .col-md-6,
    body:has(input[name="cust_re_password"]) .user-content .col-md-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important; /* Zabardasti 100% width di */
    }
    
    /* Typography scaling for mobile */
    body:has(input[name="cust_re_password"]) .user-content label {
        font-size: 10px !important;
    }
    body:has(input[name="cust_re_password"]) .user-content .form-control {
        font-size: 13px !important;
    }
    body:has(input[name="cust_re_password"]) .user-content .btn-danger {
        height: 45px !important;
        font-size: 12px !important;
    }
}

/* Tablet (iPad) Fixes */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    body:has(input[name="cust_re_password"]) .user-content {
        padding: 40px 30px !important;
    }
}

/* =======================================================
   PRODUCT DETAIL PAGE - MOBILE/TABLET ONLY (ISOLATED)
======================================================= */
@media only screen and (max-width: 767px) {
    
    body:has(.prod-slider) .page { padding: 20px 15px 40px !important; }
    body:has(.prod-slider) .breadcrumb { display: none !important; } /* Hide complex breadcrumb on mobile */
    
    body:has(.prod-slider) .col-md-5 { padding-right: 15px; margin-bottom: 30px; }

    /* Mobile Image adjustments */
    body:has(.prod-slider) .prod-slider li { height: 350px !important; }
    body:has(.prod-slider) .prod-pager-thumb { width: 60px; height: 80px; }

    /* Mobile Typography adjustments */
    body:has(.prod-slider) .p-title h2 { font-size: 20px !important; letter-spacing: 1px; }
    body:has(.prod-slider) .p-short-des p { font-size: 13px !important; }
    body:has(.prod-slider) .p-price span:last-child { font-size: 24px !important; }

    /* Controls & Buttons mobile width */
    body:has(.prod-slider) .p-quantity select,
    body:has(.prod-slider) .p-quantity .qty { width: 100% !important; max-width: 100%; margin-top: 5px; }
    
    body:has(.prod-slider) .btn-cart1 input[type="submit"] {
        width: 100% !important; max-width: 100% !important;
        font-size: 14px !important; padding: 15px !important;
    }

    /* Mobile Tabs (Stack them vertically for better view) */
    body:has(.prod-slider) .nav-tabs {
        border-bottom: none; display: flex; flex-direction: column; margin-top: 30px; margin-bottom: 20px;
    }
    body:has(.prod-slider) .nav-tabs > li { width: 100%; border-bottom: 1px solid #eaeaea; }
    body:has(.prod-slider) .nav-tabs > li.active > a { border-bottom: 1px solid #c5a059 !important; padding-left: 10px; }
}

/* Tablet (iPad) Fixes */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    body:has(.prod-slider) .prod-slider li { height: 400px !important; }
    body:has(.prod-slider) .col-md-5 { padding-right: 15px; margin-bottom: 40px; }
    body:has(.prod-slider) .btn-cart1 input[type="submit"] { max-width: 100%; }
}

/* =======================================================
   PRODUCT PAGE - TEXT OVERLAP & SPACE FIX (MOBILE)
======================================================= */
@media only screen and (max-width: 767px) {
    
    /* 1. Mobile Text Overlap Fix (HTML ke -30px ko khatam karna) */
    body:has(.prod-slider) .tab-content .tab-pane {
        margin-top: 15px !important; /* Text ko headings ke neechay se bahar nikala */
        padding: 5px 10px !important;
    }

    /* 2. Related Products Space Fix (Mobile) */
    body:has(.prod-slider) .product.pt_70.pb_70,
    body:has(.prod-slider) .product.bg-gray {
        padding-top: 15px !important; /* Mobile par fasla aur kam kar diya */
        padding-bottom: 15px !important;
    }
    
    /* Related Products ki heading spacing mobile ke liye */
    body:has(.prod-slider) .product .headline {
        margin-bottom: 15px !important;
    }
}

/* =======================================================
   SHOPPING CART PAGE - MOBILE/TABLET (OVERFLOW FIX)
======================================================= */
@media only screen and (max-width: 991px) {
    
    body:has(.cart) .page { padding: 30px 15px 50px !important; }
    
    /* 1. Cart Container Spacing */
    body:has(.cart) .cart { padding: 15px 10px; }
    
    /* 2. Make Table Responsive & Scrollable without breaking page */
    body:has(.cart) .cart table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
        white-space: nowrap; /* Prevent text wrapping inside table cells */
    }
    
    body:has(.cart) .table th, 
    body:has(.cart) .table td { padding: 15px 10px !important; font-size: 12px !important; }
    
    body:has(.cart) .table td img { max-width: 60px; }
    
    body:has(.cart) .total-amount { font-size: 18px !important; }

    /* 3. Action Buttons Mobile Stack */
    body:has(.cart-buttons) .cart-buttons ul {
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px;
    }
    body:has(.cart-buttons) .cart-buttons li { width: 100%; }
    body:has(.cart-buttons) .cart-buttons .btn-primary {
        width: 100%; /* Full width buttons */
        display: block;
        text-align: center;
        padding: 15px !important;
        font-size: 11px !important;
    }
}

/* =======================================================
   CUSTOMER DASHBOARD - MOBILE/TABLET ONLY (ISOLATED)
======================================================= */
@media only screen and (max-width: 991px) {
    
    .dashboard-page {
        padding: 30px 15px !important;
    }
    
    /* 1. Sidebar adjustments for mobile */
    .dashboard-page .col-md-3 {
        margin-bottom: 30px; /* Sidebar aur Content ke darmyan fasla */
        padding: 0 !important;
    }
    .dashboard-page .col-md-3 ul li a {
        padding: 15px 20px;
        font-size: 12px;
    }
    
    /* 2. Main Content adjustments */
    .dashboard-page .col-md-9 {
        padding: 0 !important;
    }
    .dashboard-page .user-content {
        padding: 40px 20px;
        min-height: 250px; /* Mobile par height thori kam ki */
    }
    .dashboard-page .user-content h3 {
        font-size: 18px; /* Welcome text mobile ke hisaab se chota */
        line-height: 1.5;
    }
}


/* =======================================================
   CUSTOMER DASHBOARD - MOBILE/TABLET (APP STYLE GRID)
======================================================= */
@media only screen and (max-width: 991px) {
    
    .dashboard-page {
        padding: 30px 15px !important;
    }
    
    /* 1. Zabardasti Sidebar ko wapis lana aur theek karna */
    .dashboard-page .col-md-3 {
        display: block !important; /* Category page wale hide bug ka ilaaj */
        width: 100% !important;
        margin-bottom: 25px;
        padding: 0 !important;
    }
    
    /* 2. Mobile Menu ko Boxes (Grid) mein badalna */
    .dashboard-page .col-md-3 ul {
        display: flex;
        flex-wrap: wrap; /* 2 lines mein set karega */
        gap: 10px; /* Dabbon ke darmyan fasla */
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 0;
    }
    .dashboard-page .col-md-3 ul li {
        flex: 1 1 48%; /* Har button aadhi screen lega (2 in a row) */
        margin: 0;
    }
    .dashboard-page .col-md-3 ul li a {
        background: #ffffff;
        padding: 15px 10px;
        text-align: center; /* Text center mein */
        font-size: 11px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.04);
        border: 1px solid #eaeaea;
        transform: none; /* Mobile par animation band ki */
    }
    
    /* Mobile Hover/Active color */
    .dashboard-page .col-md-3 ul li a:hover,
    .dashboard-page .col-md-3 ul li a.active {
        background: #111111; /* Active box black ho jayega */
        color: #c5a059; /* Text gold hoga */
        border-color: #111111;
        transform: none;
    }
    
    /* 3. Main Content adjustments */
    .dashboard-page .col-md-9 {
        width: 100% !important;
        padding: 0 !important;
    }
    .dashboard-page .user-content {
        padding: 40px 20px;
        min-height: 200px; 
    }
    .dashboard-page .user-content h3 {
        font-size: 16px; 
        line-height: 1.5;
    }
}

/* =======================================================
   DASHBOARD FIX - MOBILE (FORCE SHOW & GRID)
======================================================= */
@media only screen and (max-width: 991px) {
    /* Sidebar ko mobile par wapis show karna aur override hatana */
    .page .col-md-12:first-child {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
    }

    /* Links ko 2-column grid mein badalna */
    .custom-dash-nav ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .custom-dash-nav ul li {
        flex: 1 1 48% !important; /* 2 buttons per row */
        margin: 0 !important;
    }
    .custom-dash-nav ul li a {
        background: #fff !important;
        text-align: center !important;
        padding: 12px 5px !important;
        font-size: 10px !important;
        border: 1px solid #eee !important;
        border-radius: 6px !important;
    }
    .custom-dash-nav ul li a:hover {
        background: #111 !important;
        color: #c5a059 !important;
        padding-left: 5px !important;
    }
}


/* =======================================================
   CUSTOMER PROFILE UPDATE - MOBILE FIX
======================================================= */
@media only screen and (max-width: 991px) {
    /* Sidebar force show on mobile */
    body:has(input[name="cust_name"]) .page .col-md-12:first-child {
        display: block !important;
        width: 100% !important;
        margin-bottom: 30px !important;
        padding: 0 !important;
    }

    body:has(input[name="cust_name"]) .page {
        padding: 30px 15px !important;
    }

    body:has(input[name="cust_name"]) .user-content {
        padding: 25px 20px !important;
    }

    body:has(input[name="cust_name"]) .user-content h3 {
        font-size: 18px !important;
    }
}

/* =======================================================
   MOBILE SIDEBAR: FORCE SHOW ON PROFILE PAGE
======================================================= */
@media only screen and (max-width: 991px) {
    
    /* 1. Profile page par sidebar dabba wapis zahir karna */
    .profile-update-page .col-md-3 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        margin-bottom: 25px !important;
    }

    /* 2. Agar koi purani CSS 'first-child' ko hide kar rahi hai to usay override karna */
    .profile-update-page div[class*="col-md-"]:first-child {
        display: block !important;
    }

    /* 3. Grid ko mobile par set karna taake sidebar upar hi rahe */
    .profile-update-page .dash-row {
        display: flex !important;
        flex-direction: column !important; /* Sidebar top par, form neechay */
    }
}

/* =======================================================
   BILLING & SHIPPING PAGE - MOBILE RESPONSIVE FIX
======================================================= */
@media only screen and (max-width: 991px) {
    
    /* 1. Page Padding */
    .billing-shipping-page {
        padding: 30px 15px !important;
    }

    /* 2. Sidebar ko Mobile par wapis show karna */
    .billing-shipping-page .sidebar-col {
        display: block !important;
        width: 100% !important;
        margin-bottom: 30px !important;
        padding: 0 !important;
    }

    /* 3. Address Card Padding */
    .address-update-card {
        padding: 25px 20px !important;
    }

    /* 4. Grid ko 1 Column banana (Billing upar, Shipping neechay) */
    .address-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* 5. Section Titles Size */
    .section-title {
        font-size: 14px !important;
        text-align: center;
    }

    /* 6. City aur State ko Mobile par ek ke neechay ek karna */
    .field-row-split {
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* 7. Input Fields Fix */
    .field-row .form-control, 
    .field-row-split .form-control {
        font-size: 13px !important;
        padding: 12px 0 !important;
    }

    /* 8. Save Button Full Width */
    .btn-address-update {
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 13px !important;
    }
}

/* Choti screens (Mobile) par labels ko thora bara dikhana */
@media only screen and (max-width: 767px) {
    .field-row label {
        font-size: 11px !important;
    }
}


/* =======================================================
   CUSTOMER ORDER PAGE - MOBILE FIX (RESPONSIVE)
======================================================= */
@media only screen and (max-width: 991px) {
    
    /* Sidebar force show */
    body:has(.table-responsive) .page .col-md-12:first-child {
        display: block !important;
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    /* Table Container Scroll */
    body:has(.table-responsive) .table-responsive {
        border: none !important;
        border-radius: 8px;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body:has(.table-responsive) .table {
        min-width: 800px !important; /* Forces scroll instead of squishing */
    }

    body:has(.table-responsive) .user-content {
        padding: 20px 15px !important;
    }

    /* Pagination mobile size */
    .pagination a, .pagination span {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }
}

/* =======================================================
   CART PAGE - MOBILE STACK & SCROLL FIX
======================================================= */
@media only screen and (max-width: 991px) {
    
    body:has(.cart) .page { padding: 40px 15px !important; }

    /* Force horizontal scroll on small screens */
    body:has(.cart) .cart {
        overflow-x: auto !important;
        background: #fff !important;
        border-radius: 12px !important;
        padding: 5px !important;
    }

    body:has(.cart) .cart table {
        min-width: 850px !important; /* Prevents text squishing */
    }

    /* Buttons Stack for Mobile */
    body:has(.cart) .cart-buttons ul {
        flex-direction: column !important;
        gap: 10px !important;
    }

    body:has(.cart) .cart-buttons li, 
    body:has(.cart) .cart-buttons .btn-primary {
        width: 100% !important;
        text-align: center !important;
    }
}

/* =======================================================
   MOBILE HEADER FIX (Like Image 2)
======================================================= */
@media only screen and (max-width: 991px) {
    .luxury-header .container-fluid { padding: 0 15px !important; }
    
    .mobile-toggle { flex: 1; font-size: 24px; cursor: pointer; color: #000; }
    
    .logo-area { flex: 2; text-align: center; }
    .logo-area img { max-height: 45px; }

    .right-icons-area { flex: 1; justify-content: flex-end; gap: 15px; }
    
    .mobile-search a { color: #000; font-size: 22px; }

    /* Mobile Slide Down Menu */
    .mobile-menu-wrapper {
        background: #fff;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
    }
    .mob-nav { list-style: none; padding: 0; margin: 0; }
    .mob-nav li a {
        display: block;
        padding: 12px 20px;
        color: #000;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 1px solid #f9f9f9;
    }
}

/* =======================================================
   MOBILE MENU ARROW (FORCE VISIBILITY)
======================================================= */
.mob-nav li.has-children {
    position: relative !important;
}

.mob-toggle-arrow {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 55px !important;
    height: 48px !important; /* Link ke height ke barabar */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 22px !important;
    color: #111111 !important; /* Force Black Color */
    background: #f8f8f8 !important;
    border-left: 1px solid #eaeaea !important;
    z-index: 999 !important; /* Sab se upar rakhne ke liye */
    cursor: pointer !important;
}

/* Arrow ke icon par direct color force karna */
.mob-toggle-arrow i {
    color: #111111 !important;
    font-weight: bold !important;
}

/* =======================================================
   MOBILE SLIDER DOTS FIX (SIZE & POSITION)
======================================================= */
@media only screen and (max-width: 767px) {
    
    /* 1. Dots ko mazeed neechay karna */
    .custom-indicators {
        bottom: 2px !important; /* Pehle 10px tha, ab bilkul neechay kar diya */
    }

    /* 2. Normal dots ka size chota karna */
    .custom-indicators li {
        width: 6px !important;
        height: 6px !important;
        margin: 0 4px !important;
    }

    /* 3. Active (Black) dot ka size chota karna */
    .custom-indicators li.active {
        width: 8px !important;
        height: 8px !important;
        background-color: #000000 !important;
        box-shadow: none !important; /* Koi extra ring nahi */
    }
}

/* =======================================================
   MODERN HOME PAGE 2026 - MOBILE RESPONSIVE FIXES
======================================================= */
@media only screen and (max-width: 767px) {
    
    /* 1. Spacing Control (Mobile par extra space kam karna) */
    .pt_50, .pt_70 { padding-top: 30px !important; }
    .pb_50, .pb_70 { padding-bottom: 30px !important; }

    /* 2. Headlines (Heading ka size mobile ke hisab se set karna) */
    .modern-headline h2 {
        font-size: 20px !important;
        letter-spacing: 1px !important;
        margin-bottom: 20px !important;
    }

    /* 3. Top Categories (Men, Women, Kids) */
    .category-section .col-xs-12 {
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }
    .cat-title {
        width: 80% !important; /* Dabba thora chota kiya taake acha lage */
        padding: 8px 15px !important;
        bottom: 15px !important;
    }
    .cat-title h3 {
        font-size: 12px !important;
    }

    /* 4. Modern Product Card Fixes */
    .modern-product-card {
        padding: 5px !important;
    }
    .image-wrapper {
        border-radius: 8px !important; /* Curves slightly smaller on mobile */
    }
    .product-name a {
        font-size: 11px !important;
        line-height: 1.4 !important;
        display: block !important;
    }
    .new-price {
        font-size: 14px !important;
    }
    .old-price {
        font-size: 11px !important;
    }
    
    /* Buttons & Badges Size Reduce */
    .btn-modern-cart {
        padding: 10px !important;
        font-size: 10px !important;
    }
    .discount-badge {
        font-size: 9px !important;
        padding: 3px 6px !important;
        top: 8px !important;
        right: 8px !important;
    }
    .wishlist-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        bottom: 8px !important;
        right: 8px !important;
    }

    /* 5. Client Reviews (Testimonials) */
    .testimonial-item {
        padding: 10px !important;
    }
    .quote-icon {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }
    .review-text {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }
    .client-name {
        font-size: 12px !important;
    }
}

/* =======================================================
   MOBILE FIXES: CATEGORY TEXT & SCROLL SIZES
======================================================= */
@media only screen and (max-width: 991px) {
    .modern-product-scroll-item { flex: 0 0 calc(33.333% - 13px); } /* 3 items on tablet */
}

@media only screen and (max-width: 767px) {
    /* 2 items side-by-side swipe on mobile */
    .modern-product-scroll-item { flex: 0 0 calc(50% - 10px); }
    
    .image-wrapper { height: 180px; /* Chota box for mobile */ }

    /* Category Text Position Fix (Inside Image, Gold color) */
    .cat-title {
        position: absolute !important;
        bottom: 15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: rgba(255, 255, 255, 0.9) !important;
        padding: 5px 20px !important;
        border-radius: 30px !important;
        text-align: center !important;
        width: auto !important;
    }
    .cat-title h3 {
        color: #c5a059 !important; /* Gold Color */
        font-size: 13px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }

    .modern-headline h2 { font-size: 18px !important; margin-bottom: 15px !important; }
}

@media only screen and (max-width: 767px) {
    /* FORCE ZERO SPACING BETWEEN SECTIONS */
    .pt_30, .pt_20, .pt_40 { padding-top: 15px !important; }
    .pb_30, .pb_10, .pb_20, .pb_40 { padding-bottom: 15px !important; }

    /* Mobile Headlines gap reduce */
    .modern-headline { margin-bottom: 15px !important; }
    .modern-headline h2 { font-size: 16px !important; margin-bottom: 5px !important; }

    /* Mobile Categories gap */
    .cat-box { margin-bottom: 10px !important; }

    /* Product Grid Mobile (3 side-by-side or narrower 2) */
    .modern-product-scroll-item { flex: 0 0 calc(45% - 10px); }
    .modern-product-scroll-container { gap: 10px; }
    
    .image-wrapper { height: 160px !important; border-radius: 8px !important; }
}

/* =======================================================
   STRICT EQUAL WIDTH FOR TABLET & MOBILE
======================================================= */

/* TABLET (3 Products per line) */
@media only screen and (max-width: 991px) {
    .modern-product-scroll-item { 
        flex: 0 0 calc(33.333% - 13px) !important;
        width: calc(33.333% - 13px) !important;
        max-width: calc(33.333% - 13px) !important;
    } 
}

/* MOBILE (2 Products per line) */
@media only screen and (max-width: 767px) {
    .modern-product-scroll-item { 
        flex: 0 0 calc(45% - 10px) !important;
        width: calc(45% - 10px) !important;
        max-width: calc(45% - 10px) !important;
    }
    
    /* Ensure image wrapper doesn't break the layout on small screens */
    .image-wrapper { 
        width: 100% !important; 
        height: 160px !important; 
        border-radius: 8px !important; 
    }
}

/* =======================================================
   SINGLE PRODUCT PAGE FIX - MOBILE RESPONSIVE
======================================================= */
@media only screen and (max-width: 767px) {
    .modern-single-product.page { padding-top: 15px !important; }
    .modern-single-product .p-title h2 { font-size: 22px !important; margin-top: 15px !important; }
    .modern-single-product .p-price { font-size: 26px !important; }
    .modern-single-product .nav-tabs > li { width: 50% !important; text-align: center !important; }
    .modern-single-product .nav-tabs > li > a { font-size: 11px !important; padding: 10px 5px !important; }
    .modern-single-product .tab-content { padding: 15px !important; }
    .modern-single-product .btn-cart1 input[type="submit"] { width: 100% !important; padding: 12px !important; font-size: 12px !important; }
}
/* =======================================================
   MOBILE DROPDOWN WIDTH FIX (SIZE & COLOR)
======================================================= */
@media only screen and (max-width: 767px) {
    .modern-single-product .p-quantity select.form-control {
        width: 160px !important; /* Isko aap apni marzi se 140px ya 180px kar sakte hain */
        display: inline-block !important;
    }
}
/* =======================================================
   MOBILE DROPDOWN WIDTH & ALIGNMENT FIX
======================================================= */
@media only screen and (max-width: 767px) {
    .modern-single-product .p-quantity select.form-control {
        width: 100% !important; 
        max-width: 200px !important; /* Width ko munasib rakhega */
        display: block !important; /* Text ke bilkul neechay barabar align karega */
        margin-top: 8px !important; /* Thori si space taake khoobsurat lagay */
    }
}
/* =======================================================
   MOBILE ALIGNMENT & WIDTH FIX FOR DROPDOWNS
======================================================= */
@media only screen and (max-width: 767px) {
    /* Bootstrap ki 'row' class jo dabbe ko left kheench rahi thi, usay rokna */
    .modern-single-product .p-quantity .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Extra padding khatam karna taake text ke bilkul barabar aaye */
    .modern-single-product .p-quantity .col-md-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Dropdown aur Quantity box ko khoobsurat 100% width dena */
    .modern-single-product select.form-control, 
    .modern-single-product input.qty {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin-top: 8px !important;
        height: 45px !important; /* Touch karne mein asani ke liye */
    }
}
/* =======================================================
   CHECKOUT PAGE - MOBILE RESPONSIVE
======================================================= */
@media only screen and (max-width: 767px) {
    .dark-checkout-page > .container > .row > .col-md-12 {
        padding: 20px 10px !important; /* Reduces padding for mobile screen */
    }
    
    .login-prompt-box { padding: 40px 15px !important; }
    .login-prompt-box h2 { font-size: 22px !important; }
    
    .dark-checkout-page .col-md-6 { margin-bottom: 30px !important; }
    
    .dark-checkout-page .table-responsive {
        border: none !important;
    }
}