@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
/* =========================================
   1. GLOBAL & BASICS
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box !important; }
html, body { 
    width: 100%; 
    max-width: 100%; 
    overflow-x: hidden !important; 
    background-color: #ffffff; 
    color: #000000; 
    font-family: 'Poppins', sans-serif; /* Yahan Roboto ki jagah Poppins likh diya */
    scroll-behavior: smooth; 
}

/* =========================================
   2. HEADER, NAVBAR & SIDEBAR
   ========================================= */
.announcement-bar { background-color: #000000; color: #ffffff; padding: 10px 0; overflow: hidden; white-space: nowrap; position: relative; width: 100%; }
.scrolling-text { display: inline-block; animation: slide-left 15s linear infinite; font-size: 14px; font-weight: 500; }
.highlight { color: #ff0000; }
@keyframes slide-left { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }

.navbar { display: flex; justify-content: space-between; align-items: center; padding: 0px 50px; background-color: #FFC81E; width: 100%; }
.brand-link { display: flex; align-items: center; text-decoration: none; }
.nav-logo-icon { height: 60px; width: auto; object-fit: contain; margin-left: 20px; }
.nav-right { display: flex; align-items: center; gap: 30px; }
.navbar nav a { text-decoration: none; color: #000000 !important; margin-left: 15px; font-size: 15px; font-weight: 700; text-transform: uppercase; transition: color 0.3s; }
.navbar nav a:hover { color: #ff0000 !important; }
.navbar nav a.highlight-link { color: #ff0000 !important; font-weight: 900; }

.search-form { display: flex; border: 1px solid #000000; border-radius: 5px; overflow: hidden; background-color: #ffffff; margin: 5px 0; }
.search-form input { padding: 8px 12px; border: none; outline: none; font-size: 14px; width: 180px; color: #000000; font-family: inherit; }
.btn-search { background-color: #000000; color: #ffffff; border: none; padding: 8px 15px; cursor: pointer; font-size: 14px; font-weight: 700; font-family: inherit; text-transform: uppercase; transition: 0.3s; }
.btn-search:hover { background-color: #333333; }

.cart-icon-wrapper { position: relative; display: flex; align-items: center; text-decoration: none; margin-left: 20px; transition: 0.3s; }
.cart-icon-wrapper:hover { transform: scale(1.1); }
.cart-icon-wrapper img { width: 30px; height: 30px; filter: invert(0); }
.cart-count-badge { position: absolute; top: -8px; right: -12px; background: #ff0000; color: #fff; font-size: 11px; font-weight: 900; padding: 2px 7px; border-radius: 50%; border: 2px solid #FFC81E; }

.mobile-menu-btn { display: none; font-size: 26px; font-weight: 900; cursor: pointer; color: #000; }
.mobile-search-toggle { display: none; width: 22px; height: 22px; cursor: pointer; }
.mobile-sidebar { display: block; position: fixed; top: 0; left: -300px; width: 260px; height: 100vh; background: #fff; z-index: 10000; transition: left 0.3s ease; padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.2); }
.mobile-sidebar.open { left: 0; }
.close-btn { font-size: 35px; text-decoration: none; color: #000; display: block; text-align: right; margin-bottom: 20px; line-height: 1; }
.mobile-sidebar nav { display: flex; flex-direction: column; gap: 15px; }
.mobile-sidebar nav a { color: #000; text-decoration: none; font-size: 16px; font-weight: 800; text-transform: uppercase; border-bottom: 1px solid #eee; padding-bottom: 10px; }

/* =========================================
   3. HOME PAGE (BANNERS & GRID)
   ========================================= */
.strict-banner-container { width: 100%; max-width: 100%; overflow: hidden; display: block; }
.strict-banner-container img { width: 100% !important; height: auto !important; display: block; margin: 0; padding: 0; }
.products-section { padding: 50px 20px 10px 20px; background-color: #ffffff; text-align: center; width: 100%; }
.section-title { font-size: 32px; margin-bottom: 40px; font-weight: 900; text-transform: uppercase; text-align: center; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; width: 100%; max-width: 1300px; margin: 0 auto; }
.product-card { width: 100%; height: 100%; display: flex; flex-direction: column; border: none; overflow: hidden; background-color: #ffffff; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer;}
.product-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }

.discount-badge { position: absolute; top: 10px; left: 10px; background-color: #ff0000; color: #ffffff; padding: 6px 12px; font-size: 12px; font-weight: 700; z-index: 10; border-radius: 3px; text-transform: uppercase; }
.sale-tag { position: absolute; top: 12px; right: 12px; background: linear-gradient(45deg, #ff0000, #cc0000); color: #ffffff; padding: 5px 12px; font-size: 11px; font-weight: 900; z-index: 10; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(255, 0, 0, 0.4); border: 1px solid #ff3333; }
.out-of-stock-badge { position: absolute; top: 10px; left: 10px; background-color: #111; color: #fff; padding: 6px 12px; font-size: 12px; font-weight: 800; z-index: 10; border-radius: 3px; text-transform: uppercase; border: 1px solid #444; letter-spacing: 1px; }
.is-out-of-stock img { opacity: 0.5; filter: grayscale(80%); }

.product-card img { width: 100%; height: 320px; object-fit: cover; }
.product-info { padding: 15px; text-align: center; display: flex; flex-direction: column; flex-grow: 1; padding-bottom: 25px; }
.product-info h3 { font-size: 18px; margin-bottom: 8px; color: #000000; font-weight: 700; }
.product-reviews { margin-bottom: 12px; font-size: 14px; }
.product-reviews .stars { color: #FFC81E; letter-spacing: 2px; }
.product-reviews .review-count { color: #000000; font-size: 13px; margin-left: 5px; opacity: 0.7; font-weight: 500; }
.price { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 15px; }
.old-price { color: #888; font-size: 14px; text-decoration: line-through; font-weight: 500; }
.new-price { font-size: 20px; color: #ff0000 !important; font-weight: 900; }

.btn-see-all-container { text-align: center; margin-top: 60px; margin-bottom: 30px; }
.btn-see-all { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 18px 50px; background-color: #000; color: #FFC81E; font-size: 17px; font-weight: 900; text-transform: uppercase; text-decoration: none; border: 2px solid #FFC81E; letter-spacing: 2px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; z-index: 1; border-radius: 0; }
.btn-see-all::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 200, 30, 0.4), transparent); transition: all 0.6s; z-index: -1; animation: shimmer-btn 3.5s infinite; }
@keyframes shimmer-btn { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } }
.btn-see-all:hover { background-color: #FFC81E; color: #000; transform: translateY(-5px) scale(1.03); box-shadow: 0 10px 25px rgba(255, 200, 30, 0.4); }

/* =========================================
   4. PRODUCT VIP PAGE
   ========================================= */
.premium-product-container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto 40px auto; padding: 0 20px; }
.left-column { display: flex; flex-direction: column; }
.premium-gallery { display: flex; flex-direction: column !important; }
.main-image-box { order: 1 !important; width: 100%; flex: 1; border-radius: 0; overflow: hidden; border: none; background: transparent; margin-top: 0; }
.main-image-box img { width: 100%; height: 500px; object-fit: contain; display: block; }
.thumbnail-strip { order: 2 !important; display: flex; flex-direction: row !important; width: 100% !important; max-height: none !important; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-right: 0 !important; }
.thumb { width: 75px !important; height: 75px !important; object-fit: cover; border-radius: 0; border: 2px solid transparent; cursor: pointer; transition: 0.3s; opacity: 0.7; flex-shrink: 0; }
.thumb:hover, .thumb.active { border-color: #FFC81E; opacity: 1; }

.sexy-description-box { margin-top: 30px; background: linear-gradient(145deg, #111 0%, #000 100%); padding: 30px; border-radius: 0; border: 1px solid #333; border-left: 5px solid #FFC81E; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.15); position: relative; overflow: hidden; }
.sexy-description-box::after { content: 'PASHA'; position: absolute; right: -10px; bottom: -20px; font-size: 80px; font-weight: 900; color: rgba(255, 200, 30, 0.05); z-index: 0; pointer-events: none; }
.sexy-desc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; position: relative; z-index: 1; }
.sexy-desc-header img { width: 25px; }
.sexy-desc-header h3 { color: #FFC81E; font-size: 20px; font-weight: 700; text-transform: uppercase; margin: 0; letter-spacing: 1px;}
.sexy-desc-content { font-size: 15px; line-height: 1.8; color: #ddd; position: relative; z-index: 1; font-weight: 400; }

.premium-info { display: flex; flex-direction: column; margin-top: 20px; }
.stock-deal-row { display: flex; align-items: center; margin-bottom: 8px; gap:10px; }
.small-stock-status { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; display: inline-block; }
.in-stock-color { color: #28a745; }
.out-stock-color { color: #dc3545; }
.premium-title { font-size: 38px; line-height: 1.2; margin-bottom: 10px; color: #111; font-weight: 650; text-transform: uppercase; }
.review-link { text-decoration: none; display: inline-block; margin-bottom: 15px; }
.premium-stars { display: flex; align-items: center; gap: 8px; }
.stars-gold { color: #FFC81E; font-size: 24px; letter-spacing: 2px; }
.review-count { color: #555; font-size: 15px; text-decoration: underline; margin-left: 5px; font-weight: 500; }

.premium-price-box { margin-bottom: 25px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.old-price-premium { font-size: 20px; color: #999; text-decoration: line-through; font-weight: 500; }
.new-price-premium { font-size: 38px; color: #000; font-weight: 650; }
.limited-sale-badge { background: linear-gradient(90deg, #ff416c, #ff4b2b); color: #fff; padding: 6px 12px; font-size: 13px; border-radius: 4px; font-weight: 650; text-transform: uppercase; letter-spacing: 1px; animation: softPulse 2s infinite alternate; }

.premium-add-form { margin-bottom: 15px; }
.btn-pro { padding: 16px; font-size: 16px; font-weight: 650; text-transform: uppercase; border-radius: 0; cursor: pointer; transition: all 0.4s ease; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-family: inherit; letter-spacing: 1px; position: relative; overflow: hidden; z-index: 1;}
.action-row-1 { display: flex; gap: 15px; margin-bottom: 15px; }
.qty-wrapper-new { display: flex; align-items: center; background: #fff; border: 2px solid #111; padding: 0 15px; border-radius: 4px; font-size: 14px; font-weight: 700; color: #333; }
.qty-wrapper-new span { margin-right: 10px; color: #777;}
.qty-input-new { width: 50px; border: none; background: transparent; text-align: center; font-size: 16px; font-weight: 700; font-family: inherit; outline: none; }
.btn-add-cart-anim { flex: 1; background-color: #000 !important; color: #FFC81E !important; border: 2px solid #FFC81E !important; }
.btn-buy-now-anim { width: 100%; margin-bottom: 15px; background: linear-gradient(45deg, #FFC81E, #ff9900, #FFC81E) !important; color: #000 !important; border: none !important; box-shadow: 0 4px 15px rgba(255, 200, 30, 0.4); }
.btn-buy-now-anim:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 25px rgba(255, 200, 30, 0.6); }
.btn-wa { background-color: #25D366; color: #fff; width: 100%; margin-bottom: 25px !important; border: none !important; }
.btn-wa img { width: 22px; height: 22px; }

.sleek-assurances { display: flex; flex-direction: column; gap: 18px; margin-bottom: 25px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 25px 0; }
.sleek-item { display: flex; align-items: flex-start; gap: 15px; }
.sleek-item img { width: 32px; height: 32px; opacity: 0.8; }
.sleek-text strong { font-size: 15px; font-weight: 800; color: #111; text-transform: uppercase; margin-bottom: 4px; }
.sleek-text p { font-size: 14px; color: #555; margin: 0; }

.reviews-container { max-width: 1200px; margin: 20px auto 30px auto; padding: 0 20px; }
.reviews-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #eee; padding-bottom: 15px; margin-bottom: 30px; }
.reviews-content { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.write-review-box { background: #fafafa; padding: 25px; border-radius: 8px; border: 1px solid #eee; height: fit-content; }
.review-form input, .review-form select, .review-form textarea { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }
.btn-submit-review { width: 100%; padding: 14px; background: #000; color: #FFC81E; border: none; border-radius: 4px; cursor: pointer; font-weight: 700; text-transform: uppercase; }

/* =========================================
   5. CART & CHECKOUT
   ========================================= */
.checkout-navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 50px; background-color: #000; border-bottom: 3px solid #FFC81E; }
.checkout-navbar .logo { font-size: 26px; font-weight: 900; letter-spacing: 2px; color: #FFC81E; }
.back-shop { color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; padding: 8px 15px; border: 1px solid #333; border-radius: 4px; }
.back-shop:hover { background-color: #FFC81E; color: #000; border-color: #FFC81E; }

.cart-wrapper, .checkout-container { display: grid; grid-template-columns: 1.8fr 1fr; gap: 30px; max-width: 1200px; margin: 40px auto; padding: 0 20px; align-items: flex-start; }
.cart-items-section, .checkout-form-section { background: #ffffff !important; padding: 30px !important; border-radius: 12px !important; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03) !important; border: 1px solid #eaeaea !important; color: #000; }
.cart-summary-section, .order-summary { background: #000; color: #fff; padding: 30px; border-radius: 8px; position: sticky; top: 20px; border: 1px solid #333; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.cart-summary-section h3, .order-summary h3 { color: #FFC81E; font-size: 22px; font-weight: 900; margin-top: 0; margin-bottom: 20px; border-bottom: 2px solid #222; padding-bottom: 15px; text-transform: uppercase; }
.cart-page-title { font-size: 26px; font-weight: 900; text-transform: uppercase; margin-bottom: 25px; border-bottom: 3px solid #FFC81E; display: inline-block; padding-bottom: 8px; color: #000; }

.cart-item-card { display: flex !important; align-items: center !important; gap: 25px !important; padding: 20px !important; margin-bottom: 15px !important; background: #fafafa !important; border-radius: 8px !important; border: 1px solid #f5f5f5 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.cart-item-card:hover { background: #ffffff !important; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05) !important; border-color: #FFC81E !important; }
.cart-item-card img, .summary-card img { width: 85px !important; height: 105px !important; object-fit: cover !important; border-radius: 6px !important; border: 1px solid #e5e5e5 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important; }
.summary-card { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #222; margin-bottom: 20px; padding-bottom: 20px; }
.summary-card img { width: 70px !important; height: 90px !important; border: 1px solid #333 !important; }

.cart-item-details, .summary-details { flex: 1; min-width: 0; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.cart-item-name, .summary-details h4 { font-size: 16px !important; font-weight: 800 !important; color: #000000 !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 5px; display: block; word-wrap: break-word; transition: color 0.2s ease !important; }
.cart-item-name:hover { color: #FFC81E !important; }
.summary-details h4 { color: #fff !important; margin: 0 0 5px 0; }
.summary-details p { margin: 0; color: #aaa; font-size: 14px; font-weight: 600; }

.cart-item-price { font-size: 13px !important; color: #444 !important; font-weight: 700 !important; background: #ffffff !important; padding: 4px 12px !important; border-radius: 20px !important; display: inline-block !important; width: max-content !important; border: 1px solid #eaeaea !important; }
.cart-item-details div a.cart-remove-link:first-child { background: #ffffff !important; color: #444 !important; border: 1px solid #dcdcdc !important; padding: 5px 12px !important; border-radius: 4px !important; text-decoration: none !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; transition: 0.2s !important; }
.cart-item-details div a.cart-remove-link:first-child:hover { background: #f0f0f0 !important; color: #000000 !important; }
.cart-item-details div a.cart-remove-link:last-child { background: #fff5f5 !important; color: #dc3545 !important; border: 1px solid #fecdd3 !important; padding: 5px 12px !important; border-radius: 4px !important; text-decoration: none !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; transition: 0.2s !important; }
.cart-item-details div a.cart-remove-link:last-child:hover { background: #dc3545 !important; color: #ffffff !important; border-color: #dc3545 !important; }

.cart-item-subtotal { font-size: 18px !important; font-weight: 900 !important; color: #000000 !important; text-align: right !important; letter-spacing: 0.5px !important; min-width: 100px; }

/* Forms & Payments */
.checkout-form-section h3, .order-summary h3 { font-size: 20px; font-weight: 900; margin-bottom: 20px; margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 10px; text-transform: uppercase; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; color: #333; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit; font-size: 15px; background: #fff; color: #000; max-width: 100%; box-sizing: border-box; }
.form-group input:focus, .form-group textarea:focus { border-color: #FFC81E; outline: none; }
.payment-method-section { background: #fdfdfd; padding: 20px; border-radius: 8px; border: 1px solid #eee; margin: 25px 0; }
.payment-method-section h4 { margin-top: 0; margin-bottom: 15px; font-size: 16px; font-weight: 800; text-transform: uppercase; color: #000; }
.container-radio { display: block; position: relative; padding-left: 35px; margin-bottom: 15px; cursor: pointer; font-size: 15px; user-select: none; color: #000; }
.container-radio input { position: absolute; opacity: 0; cursor: pointer; }
.checkmark { position: absolute; top: 0; left: 0; height: 22px; width: 22px; background-color: #eee; border-radius: 50%; border: 1px solid #ccc; }
.container-radio:hover input ~ .checkmark { background-color: #ddd; }
.container-radio input:checked ~ .checkmark { background-color: #FFC81E; border-color: #FFC81E; }
.checkmark:after { content: ""; position: absolute; display: none; }
.container-radio input:checked ~ .checkmark:after { display: block; }
.container-radio .checkmark:after { top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%; background: white; }
.option-text strong { display: block; font-size: 15px; margin-bottom: 3px;}
.promo-text { font-size: 12px; font-weight: 700; }
.highlight-red { color: #dc3545 !important; font-weight:bold; }
.highlight-green { color: #28a745 !important; font-weight:bold; }
.easypaisa-box { background: #fff; color: #000; padding: 20px; border-radius: 8px; margin-top: 20px; border: 2px solid #FFC81E; display: block; }

.calc-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; font-size: 15px; font-weight: 500; }
.calc-row span:last-child { text-align: right; line-height: 1.4; }
.grand-total { font-size: 24px; font-weight: 900; color: #FFC81E; margin-top: 15px; border-top: 2px solid #333; padding-top: 20px; }
.btn-place-order { background: #FFC81E; color: #000; width: 100%; padding: 18px; border: none; border-radius: 6px; font-size: 18px; font-weight: 900; text-transform: uppercase; cursor: pointer; margin-top: 20px; transition: 0.3s; }
.btn-place-order:hover { background: #e0b01a; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255,200,30,0.3); }

/* =========================================
   6. POLICY PAGES (New Clean Integration)
   ========================================= */
.policy-container { max-width: 900px; margin: 50px auto; padding: 40px; background: #fff; border: 1px solid #eaeaea; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); line-height: 1.8; color: #333; }
.policy-container h1 { color: #000; font-size: 32px; font-weight: 900; text-transform: uppercase; border-bottom: 3px solid #FFC81E; padding-bottom: 15px; margin-bottom: 30px; text-align: center; }
.policy-section { margin-bottom: 30px; }
.policy-section h3 { color: #000; font-size: 20px; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.policy-section h3::before { content: ''; width: 5px; height: 20px; background: #FFC81E; display: inline-block; }
.policy-section p, .policy-section ul li { font-size: 16px; margin-bottom: 10px; }
.policy-section ul { padding-left: 20px; }
.address-box { background: #fdfdfd; border: 2px dashed #FFC81E; padding: 20px; border-radius: 6px; margin-top: 20px; }
.highlight-text { color: #000; font-weight: 700; }

/* =========================================
   7. FOOTER, PAGINATION & RELATED
   ========================================= */
.trust-features-section { display: flex; justify-content: center; gap: 40px; padding: 40px 20px; background-color: #ffffff; color: #000000; text-align: center; width: 100%; border-top: 1px solid #eee; }
.trust-feature-block { flex: 1; max-width: 33.33%; text-align: center; }
.icon { display: block; width: 100%; max-height: 80px; margin-bottom: 15px; }
.icon img { height: auto; width: auto; max-height: 100%; object-fit: contain; }
.feature-title { font-size: 16px; font-weight: 700; color: #000; margin-bottom: 10px; text-transform: uppercase; }
.feature-text { font-size: 14px; color: #555; line-height: 1.6; margin: 0; font-weight: 500; }

.main-footer { background: linear-gradient(135deg, #FFC81E 0%, #ffbb00 100%); color: #000000; padding: 60px 20px 20px 20px; box-shadow: 0 -5px 15px rgba(0,0,0,0.05); }
.footer-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; }
.footer-grid h3 { font-size: 18px; font-weight: 800; margin-bottom: 25px; position: relative; padding-bottom: 8px; text-transform: uppercase; }
.footer-grid h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background-color: #000000; }
.brand-info-grid { text-align: center; }
.footer-logo { height: 60px; display: block; margin: 0 auto 15px auto; }
.social-icons { display: flex; justify-content: center; gap: 15px; }
.social-icons a img { width: 35px; height: 35px; transition: transform 0.3s ease; }
.social-icons a:hover img { transform: scale(1.15) translateY(-5px); filter: brightness(0.5); }
.policies-list ul { list-style: none; }
.policies-list ul li { margin-bottom: 12px; }
.policies-list ul li a { text-decoration: none; color: #000000; font-size: 14px; font-weight: 600; display: flex; align-items: center; transition: all 0.3s ease; }
.policies-list ul li a:hover { color: #ff0000; transform: translateX(5px); }
.contact-item { display: flex; align-items: center; margin-bottom: 15px; gap: 15px; }
.contact-item img { width: 30px; height: 30px; opacity: 0.9; }
.contact-item p { font-size: 14px; margin: 0; line-height: 1.5; font-weight: 500; }
.footer-bottom { text-align: center; margin-top: 50px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.15); font-size: 13px; font-weight: 600; letter-spacing: 1px; }

.pagination-wrapper { text-align: center; margin-top: 50px; margin-bottom: 30px; width: 100%; }
.pagination-info { font-size: 14px; font-weight: 800; color: #555; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.pagination-container { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-btn { padding: 10px 18px; background: #fff; color: #000; border: 2px solid #eaeaea; text-decoration: none; font-weight: 800; font-size: 15px; border-radius: 4px; transition: 0.3s; }
.page-btn:hover { border-color: #FFC81E; background: #fafafa; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.page-btn.active { background: #FFC81E; color: #000; border-color: #FFC81E; }
.page-dots { font-weight: 900; color: #888; padding: 0 5px; }
.related-grid { grid-template-columns: repeat(5, 1fr) !important; }

/* =========================================
   8. MEDIA QUERIES (DESKTOP/TABLET)
   ========================================= */
.desktop-desc { display: block; }
.mobile-desc { display: none; }
.footer-toggle-icon { display: none; float: right; }

@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); } 
    .related-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .premium-product-container { gap: 30px; }
    .reviews-content { grid-template-columns: 1fr; }
    .cart-wrapper, .checkout-container { gap: 30px; }
}

@media (max-width: 900px) {
    .cart-wrapper, .checkout-container { grid-template-columns: 1fr; }
    .cart-summary-section, .order-summary { position: relative; top: 0; }
}

/* =========================================
   9. MOBILE VIEW VIP FIXES (768px & BELOW)
   ========================================= */
@media (max-width: 768px) {
    /* Global Anti-Overflow */
    body, html, main { overflow-x: hidden !important; max-width: 100vw !important; }

    /* Policy Pages fix */
    .policy-container { margin: 20px !important; padding: 20px !important; }

    /* Navbar & Policy Nav Fix */
    .navbar { padding: 10px 20px !important; }
    .mobile-menu-btn { display: block; flex: 1; }
    .brand-link { flex: 2; display: flex; justify-content: center; }
    .nav-logo-icon { margin-left: 0 !important; height: 40px !important; }
    .nav-right { flex: 1; justify-content: flex-end; gap: 15px !important; }
    .navbar nav, .search-form { display: none !important; } 
    .mobile-search-toggle { display: block; }

    /* PRODUCT PAGE GAPS & LAYOUT FIX */
    .premium-product-container { padding: 10px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; }
    .left-column { margin-bottom: 0 !important; padding-bottom: 0 !important; width: 100% !important; max-width: 100% !important;}
    
    /* Image and Thumbnails Gap Fix */
    .premium-gallery { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 100% !important; gap: 5px !important; }
    .main-image-box { order: 1 !important; width: 100% !important; max-width: 100% !important; margin-bottom: 0 !important; text-align: center !important; }
    .main-image-box img { max-width: 100% !important; height: auto !important; max-height: 350px !important; object-fit: contain !important; }
    .thumbnail-strip { order: 2 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; gap: 8px !important; margin-top: 8px !important; margin-bottom: 0px !important; padding: 0 !important; }
    .thumb { width: 60px !important; height: 60px !important; flex-shrink: 0 !important; }
    
    /* In stock gap fix */
    .premium-info { margin-top: 0 !important; padding-top: 5px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;}
    .stock-deal-row { margin-top: 0 !important; margin-bottom: 8px !important; }
    .btn-wa { margin-bottom: 10px !important; }
    .sexy-description-box.mobile-desc { margin-top: 10px !important; } /* Gap fixed below WA button */
    .action-row-1 { display: flex; flex-direction: row !important; justify-content: space-between; gap: 10px !important; align-items: center; margin-bottom: 10px !important;}

    /* Miscellenous Product Info Resizing */
    .mobile-deal-badge { display: inline-block !important; font-size: 10px !important; padding: 5px 8px !important; margin: 0 !important; }
    .desktop-deal-badge { display: none !important; }
    .premium-title { font-size: 26px; margin-bottom: 8px; line-height: 1.2; }
    .new-price-premium { font-size: 30px; }
    .premium-price-box { margin-bottom: 15px; }
    .qty-wrapper-new { width: auto !important; flex: 0.35; padding: 12px 10px !important; justify-content: center !important; }
    .qty-input-new { text-align: center !important; width: 35px; font-size: 16px; }
    .btn-add-cart-anim { flex: 0.65; padding: 14px !important; font-size: 14px !important; }
    .desktop-desc { display: none; }
    .mobile-desc { display: block; }

    /* CART ITEM REDESIGN - MOBILE SPECIFIC (IMAGE TOP, NAME BELOW) */
    .cart-wrapper, .checkout-container { width: 100% !important; max-width: 100% !important; padding: 10px !important; margin: 10px auto !important; box-sizing: border-box !important; overflow: hidden !important; }
    .cart-items-section, .checkout-form-section, .cart-summary-section, .order-summary { padding: 15px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
    
    .checkout-navbar { padding: 15px; flex-direction: column; gap: 12px; justify-content: center; align-items: center; }
    .checkout-navbar .logo { font-size: 22px; text-align: center; }
    .back-shop { font-size: 13px; margin: 0; padding: 8px 12px; }

    .cart-item-card {
        display: flex !important;
        flex-direction: column !important; /* Image on top, details below */
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .cart-item-card img {
        width: 100px !important;
        height: 120px !important;
        margin: 0 auto 5px auto !important; /* Center the image */
    }

    .cart-item-details {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .cart-item-name {
        order: 1 !important; /* Name first */
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important; /* Forces Name to fit in exactly 4 lines */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
    }

    /* Buttons row moved ABOVE the price */
    .cart-item-details div[style*="display: flex"] {
        order: 2 !important; /* Buttons second */
        display: flex !important;
        width: 100% !important;
        gap: 10px !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
        margin-top: 0 !important;
    }

    /* Proper Button Styling for Remove 1 and Remove All */
    .cart-item-details div a.cart-remove-link {
        flex: 1 !important; /* Makes both buttons equal width */
        text-align: center !important;
        font-size: 12px !important;
        padding: 10px 5px !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        font-weight: 800 !important;
    }
    .cart-item-details div a.cart-remove-link:first-child { background: #f0f0f0 !important; border: 1px solid #ddd !important; color: #333 !important; }
    .cart-item-details div a.cart-remove-link:last-child { background: #dc3545 !important; border: 1px solid #c82333 !important; color: #fff !important; }

    .cart-item-price {
        order: 3 !important; /* Price shifted below buttons */
        font-size: 14px !important;
        padding: 4px 10px !important;
        margin: 5px auto 0 auto !important;
        background: #fff !important;
    }

    .cart-item-subtotal { font-size: 18px !important; text-align: center !important; margin-top: 10px !important; width: 100% !important; }

    /* Other Adjustments */
    .easypaisa-box { padding: 15px !important; }
    .payment-method-section { padding: 12px !important; }
    .calc-row { font-size: 14px !important; }
    .grand-total { font-size: 20px !important; }

    .trust-features-section { flex-direction: column; align-items: center; padding: 40px 20px; }
    .trust-feature-block { width: 100%; max-width: 100%; }
    .footer-container { grid-template-columns: 1fr; }
    .footer-grid h3 { border-bottom: 1px solid rgba(0,0,0,0.15); padding-bottom: 12px; margin-bottom: 12px; cursor: pointer; }
    .footer-grid h3::after { display: none !important; }
    .footer-toggle-icon { display: block; font-size: 12px; transition: 0.3s; }
    .footer-content { display: none; }
    .footer-content.active { display: block; }
    
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } 
    .related-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .product-card img { height: 220px; }
    .product-info { padding: 10px; }
    .product-info h3 { font-size: 14px; margin-bottom: 5px;}
    .new-price { font-size: 15px; }
    .discount-badge { padding: 3px 6px; font-size: 9px; top: 6px; left: 6px; }
    .sale-tag { padding: 2px 6px; font-size: 8px; top: 6px; right: 6px; border-width: 0.5px; }
    .btn-see-all { padding: 11px 30px; font-size: 10px; }

    .page-btn { padding: 8px 14px; font-size: 13px; }
    .pagination-wrapper { margin-top: 30px; }
}

@media (max-width: 480px) {
    .premium-product-container { padding: 5px 10px !important; }
    .main-image-box img { max-height: 300px !important; }
    
}

/* =========================================
   10. SAFE CHECKOUT MOBILE CENTER FIX
   ========================================= */
@media (max-width: 768px) {
    .safe-checkout {
        text-align: center !important;
        width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        display: flex !important;
        justify-content: center !important;
    }
    .safe-checkout p {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #555 !important;
        margin: 0 !important;
    }
}

/* =========================================
   11. PRODUCT CARD IMAGE SLIDER (VIP FEATURE)
   ========================================= */
.card-slider-container {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}
.card-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}
.card-slider::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.card-slider img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: center;
}

/* VIP Dots for Mobile & Desktop */
.slider-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}
.slider-dots .dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.slider-dots .dot.active {
    background: #ffffff;
    transform: scale(1.4);
}

/* VIP Arrows for Laptop/Desktop */
.slider-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 8px;
    z-index: 3;
    opacity: 0; /* Hover hone tak hide rahega */
    transition: 0.3s ease-in-out;
    pointer-events: none;
}
.product-card:hover .slider-arrows {
    opacity: 1; /* Mouse ane par show hoga */
}
.slider-arrow {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: none;
    transition: 0.2s;
}
.slider-arrow:hover {
    background: #FFC81E;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .card-slider-container { height: 220px; }
    .slider-arrows { display: none !important; } /* Mobile par arrows hamesha gayab */
    .slider-dots { bottom: 8px; gap: 5px; }
    .slider-dots .dot { width: 5px; height: 5px; }
}

/* VIP Mobile Centering for Product Page */
@media (max-width: 768px) {
    .premium-info .premium-title {
        text-align: center !important;
    }
    .premium-info .review-link {
        display: flex;
        justify-content: center;
    }
    .premium-info .premium-stars {
        justify-content: center !important;
    }
    .premium-info .premium-price-box {
        justify-content: center !important;
    }
    .premium-info .stock-deal-row {
        justify-content: center !important;
    }
}

/* VIP Mobile Main Image 3:4 Perfect Fit */
@media (max-width: 768px) {
    .main-image-box {
        margin: 10px 0 !important; 
        width: 100% !important;
    }
    .main-image-box img {
        width: 100% !important;
        height: auto !important;
        /* Yeh aapki 3x4 size ki demand ko exactly handle karega */
        aspect-ratio: 3 / 4 !important; 
        /* Pehle wali choti height limit hata di taake box bada ho sake */
        max-height: 550px !important; 
        /* contain ka matlab hy image poori fit hogi, ek inch bhi cut nahi hogi */
        object-fit: contain !important; 
        /* Purana zoom in wala masla khatam kar diya */
        transform: none !important; 
    }
}