/* ===== BASE ===== */
body { font-family: "Segoe UI", sans-serif; background: #f8f9fa; }

/* ===== PRODUCT CARDS ===== */
.product-card { transition: transform 0.2s; border: none; border-radius: 12px; overflow: hidden; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important; }
.price-mrp { text-decoration: line-through; color: #999; font-size: 0.9em; }
.price-offer { color: #dc3545; font-weight: 700; font-size: 1.1em; }
.discount-badge { position: absolute; top: 10px; left: 10px; background: #dc3545; color: #fff; padding: 3px 8px; border-radius: 20px; font-size: 0.75em; font-weight: 700; }
.product-img { height: 200px; object-fit: contain; background: #fff; padding: 15px; }
.btn-cart { background: #dc3545; color: #fff; border: none; border-radius: 25px; padding: 8px 20px; font-weight: 600; }
.btn-cart:hover { background: #b02a37; color: #fff; }

/* ===== HERO SECTION ===== */
.hero-section { background: linear-gradient(135deg, #c0392b 0%, #922b21 50%, #7b241c 100%); color: #fff; padding: 60px 0 50px 0; position: relative; overflow: hidden; }
.hero-section::before { content: ''; position: absolute; top: -50%; right: -10%; width: 500px; height: 500px; background: rgba(255,255,255,0.05); border-radius: 50%; pointer-events: none; }
.hero-section .container { position: relative; z-index: 1; }
.hero-sub { letter-spacing: 2px; }
.hero-section .btn-outline-light { border: 2px solid #fff; color: #fff; font-weight: 600; }
.hero-section .btn-outline-light:hover { background: #fff; color: #dc3545; }
.hero-section .btn-light { background: #fff; color: #dc3545; font-weight: 700; }
.hero-section .btn-light:hover { background: #f8d7da; }

/* ===== BRAND STRIP ===== */
.brand-strip { background: #fff; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; padding: 12px 0; }
.brand-strip-inner { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; overflow-x: auto; gap: 0; scrollbar-width: none; }
.brand-strip-inner::-webkit-scrollbar { display: none; }
.brand-strip-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #aaa; padding: 0 16px 0 0; white-space: nowrap; border-right: 1px solid #eee; margin-right: 4px; }
.brand-logo-item { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px; opacity: 0.7; transition: all 0.2s; font-size: 0.9rem; font-weight: 700; color: #555; border-right: 1px solid #f0f0f0; white-space: nowrap; }
.brand-logo-item:last-child { border-right: none; }
.brand-logo-item:hover { opacity: 1; color: #dc3545; background: #fff8f8; }

/* ===== CATEGORY CARDS ===== */
.category-card { border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.category-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(220,53,69,0.2) !important; }

/* ===== TRUST BADGES ===== */
.trust-badge { border-radius: 12px; transition: transform 0.2s; }
.trust-badge:hover { transform: translateY(-3px); }

/* ===== SECTION HEADERS ===== */
.section-title { font-weight: 700; position: relative; padding-bottom: 10px; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: #dc3545; border-radius: 2px; }

/* ===== BRANCH CARDS ===== */
.branch-card { border-left: 4px solid #dc3545; border-radius: 8px; }

/* ===== CART ===== */
.qty-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #dc3545; background: #fff; color: #dc3545; font-weight: 700; cursor: pointer; }
.coupon-box { background: #fff3cd; border: 2px dashed #ffc107; border-radius: 10px; padding: 15px; }
.upi-qr { max-width: 200px; border: 3px solid #28a745; border-radius: 10px; padding: 10px; }

/* ===== FLOATING WHATSAPP BUTTON ===== */
.whatsapp-float { position: fixed; bottom: 28px; right: 28px; z-index: 9999; background: #25d366; color: #fff; border-radius: 50px; padding: 12px 20px 12px 16px; display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 0.95rem; box-shadow: 0 4px 20px rgba(37,211,102,0.5); transition: all 0.3s; animation: waPulse 2.5s infinite; }
.whatsapp-float i { font-size: 1.5rem; }
.whatsapp-float:hover { background: #128c3a; color: #fff; transform: scale(1.05); }
.wa-label { white-space: nowrap; }
@keyframes waPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.5); } 50% { box-shadow: 0 4px 30px rgba(37,211,102,0.9); } }
@media (max-width: 576px) { .wa-label { display: none; } .whatsapp-float { padding: 14px; border-radius: 50%; } }