/* ==========================================================================
   1. GLOBAL RESET & CORE TYPOGRAPHY MIGRATIONS
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { 
    font-size: 14px; /* Hard-locks text scaling from being too zoomed in */
    -webkit-text-size-adjust: 100%; /* Prevents mobile systems from auto-magnifying text */
    -ms-text-size-adjust: 100%;
}

body { 
    font-family: 'Helvetica', sans-serif; 
    overflow-x: hidden; 
    color: #333; 
    background-color: #fff; 
    font-size: 1rem;
    line-height: 1.4;
}
a { text-decoration: none; color: inherit; }

/* Marquee */
.marquee { width: 100%; background: #000; color: #fff; height: 40px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.marquee-inner { display: inline-block; padding-left: 100%; animation: scroll 15s linear infinite; font-size: 0.85rem; }
@keyframes scroll { from { transform: translateX(0%); } to { transform: translateX(-100%); } }

/* ==========================================================================
   2. NAVBAR HEADER RIGID MEASUREMENTS
   ========================================================================== */
.navbar { position: relative; background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 15px 5%; border-bottom: 1px solid #eee; z-index: 2000; }
.nav-left, .nav-right { display: flex; gap: 20px; align-items: center; }
.nav-right a { color: #333; font-size: 1.2rem; position: relative; display: inline-block; }
.menu-btn { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #333; display: flex; align-items: center; }
.logo { font-weight: bold; font-size: 1.4rem; color: #000; letter-spacing: 2px; text-transform: uppercase; display: inline-block; }

/* Cart Count Badge */
.cart-icon-wrapper { position: relative; display: inline-block; }
.cart-count-badge { position: absolute; top: -8px; right: -8px; background: #d32f2f; color: #fff; font-size: 0.65rem; font-weight: bold; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; border-radius: 50%; }

/* Search Overlay Dropdown */
.search-overlay { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; z-index: 1500; padding: 20px 5%; box-shadow: 0 4px 6px rgba(0,0,0,0.05); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease-in-out; border-bottom: 1px solid #eee; }
.search-overlay.active { opacity: 1; visibility: visible; transform: translateY(0); }
.search-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.search-form { display: flex; flex-grow: 1; border-bottom: 2px solid #000; padding-bottom: 5px; }
.search-form input { width: 100%; border: none; padding: 10px 5px; font-size: 1rem; outline: none; background: transparent; }
.search-form button { background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 0 10px; color: #000; }
.close-search { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #333; }

/* Offscreen Side Drawer */
.side-menu { position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: #fff; z-index: 3000; transition: 0.3s; padding: 20px; }
.side-menu.active { left: 0; }
.menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-weight: bold; }
.close-menu { background: none; border: none; font-size: 1.5rem; cursor: pointer; }
.menu-links a { display: block; padding: 20px 0; border-bottom: 1px solid #eee; color: #000; font-size: 1.1rem; }

/* ==========================================================================
   3. COMPACT SIDE CART DRAWER OVERLAYS
   ========================================================================== */
.cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 3500; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.cart-overlay.active { opacity: 1; visibility: visible; }

.cart-drawer { 
    position: fixed; 
    top: 0; 
    right: -100%; 
    width: 85vw !important; 
    max-width: 340px !important; 
    height: 100%; 
    background: #fff; 
    z-index: 4000; 
    transition: right 0.35s cubic-bezier(0.25, 1, 0.5, 1); 
    display: flex; 
    flex-direction: column; 
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); 
}
.cart-drawer.active { right: 0; }
.cart-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eee; }
.cart-drawer-header h3 { font-size: 1.1rem; font-weight: bold; }
.close-cart { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #333; }
.cart-drawer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 20px; }
.empty-cart-message { text-align: center; margin: 40px 0; color: #777; }
.empty-cart-message i { font-size: 3rem; margin-bottom: 15px; color: #ccc; }
.shop-now-btn { background: #000; color: #fff; border: none; padding: 10px 20px; margin-top: 15px; cursor: pointer; font-weight: bold; }

/* Active Cart Rows */
.cart-items { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
.cart-item { display: flex; gap: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; position: relative; }
.cart-item-img { width: 70px; height: 70px; background: #eee; border-radius: 5px; flex-shrink: 0; }
.cart-item-details { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; padding-right: 35px; }
.cart-item-title { font-size: 0.9rem; font-weight: bold; color: #333; }
.cart-item-price { font-size: 0.9rem; color: #d32f2f; font-weight: bold; margin-top: 5px; }
.qty-controls { display: flex; align-items: center; border: 1px solid #ddd; width: fit-content; border-radius: 3px; margin-top: 10px; }
.qty-btn { background: none; border: none; padding: 3px 10px; cursor: pointer; font-size: 1rem; }
.qty-input { width: 30px; text-align: center; border: none; border-left: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 0.9rem; pointer-events: none; }
.remove-item, .remove-btn { position: absolute; top: 0; right: 0; background: none; border: none; color: #999; cursor: pointer; font-size: 1.1rem; padding: 10px; transition: color 0.2s; }
.remove-item:hover, .remove-btn:hover { color: #d32f2f; }

/* Cart Subtotal Footer Panel */
.cart-drawer-footer { border-top: 2px solid #eee; padding-top: 20px; margin-bottom: 30px; }
.coupon-box { display: flex; margin-bottom: 15px; }
.coupon-box input { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-right: none; outline: none; font-size: 0.9rem; }
.coupon-box button { background: #333; color: #fff; border: none; padding: 8px 15px; cursor: pointer; font-size: 0.9rem; }
.subtotal-row { display: flex; justify-content: space-between; font-size: 1rem; font-weight: bold; margin-bottom: 15px; }
.checkout-btn { width: 100%; background: #000; color: #fff; border: none; padding: 12px; font-size: 0.95rem; font-weight: bold; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; }

/* Explore More Suggestions Split-Row Format Configuration */
.explore-more-section { margin-top: 35px; border-top: 1px solid #eee; padding-top: 25px; }
.explore-more-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; width: 100%; }
.explore-more-section h4 { font-size: 0.9rem; color: #333; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0; }

.explore-view-all-link {
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 1px;
    text-decoration: none;
    cursor: pointer;
}
.explore-view-all-link:hover { opacity: 0.7; }

.mini-product-card { display: flex; align-items: center; gap: 15px; background: #f9f9f9; padding: 12px; border-radius: 6px; margin-bottom: 12px; border: 1px solid #f0f0f0; }
.mini-product-img { width: 50px; height: 50px; border-radius: 4px; flex-shrink: 0; }
.mini-product-info { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; }
.mini-product-info p { font-size: 0.85rem; font-weight: bold; color: #333; margin: 0; }
.mini-product-info span { font-size: 0.85rem; color: #000; font-weight: bold; }
.add-mini { margin-left: auto; background: #000; color: #fff; border: none; width: 32px !important; height: 32px !important; padding: 0 !important; margin-top: 0 !important; border-radius: 50%; cursor: pointer; font-weight: bold; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ==========================================================================
   4. RESTORED HOMEPAGE STRUCTURAL SECTIONS (ORIGINAL COMPACT DIMENSIONS)
   ========================================================================== */
.hero-slider { width: 100%; height: 300px; position: relative; overflow: hidden; background: #eee; }
.slide { width: 100%; height: 100%; position: absolute; background-size: cover; opacity: 0; animation: fade 12s infinite; }
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }
@keyframes fade { 0% { opacity: 0; } 10% { opacity: 1; } 33% { opacity: 1; } 43% { opacity: 0; } }

.concern-section, .trending-section, .bestselling-section, .offer-banners, .instagram-section { padding: 20px 5%; }
.section-title { margin-bottom: 15px; font-size: 1.05rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: #111; }

/* Shop by Concern Carousel */
.concern-carousel { display: flex; gap: 15px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.concern-carousel::-webkit-scrollbar { display: none; }
.concern-item { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.concern-item .circle { width: 70px; height: 70px; border-radius: 50%; background-color: #ddd; margin-bottom: 5px; }
.concern-item p { font-size: 0.8rem; color: #333; }

/* Clean Horizontal Scrolling Carousel Track */
.product-carousel { 
    display: flex !important; 
    flex-direction: row !important;
    gap: 15px; 
    overflow-x: auto !important; 
    scrollbar-width: none; 
    padding-bottom: 10px; 
    width: 100%; 
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.product-carousel::-webkit-scrollbar { display: none; }

/* Hard-locks uniform dynamic sizes for all horizontal mobile sliders */
.product-carousel .product-card { 
    min-width: 165px !important; 
    max-width: 165px !important; 
    flex-shrink: 0 !important; 
    display: flex;
    flex-direction: column;
}

/* Product Cards Style Configs */
.product-card { border: 1px solid #eee; padding: 10px; border-radius: 5px; position: relative; background: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.product-img { width: 100%; height: 140px; background: #eee; margin-bottom: 10px; }
.badge { position: absolute; top: 10px; left: 10px; font-size: 0.6rem; background: #000; color: #fff; padding: 2px 5px; z-index: 10; font-weight: bold; }

/* ENHANCED WISHLIST ICON FRAME WITH MASSIVE TOUCH-TARGET INTERACTION HITBOX */
.wishlist { 
    position: absolute; 
    top: 2px; 
    right: 2px; 
    z-index: 100; 
    cursor: pointer; 
    color: #666; 
    padding: 12px; /* Expands interactive hot zone target fields without ballooning real layout sizes */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wishlist i {
    font-size: var(--wishlist-icon-size, 1.1rem); /* Dynamic payload alignment from management arrays */
    pointer-events: none; /* Passes click tracking transparently into the structural link stack */
}
.wishlist:active {
    transform: scale(0.85); /* Snappy tactile tap response feedback loop hook */
}
.wishlist.active i { font-weight: 900; color: #d32f2f; }

.rating { font-size: 0.7rem; color: #ff9800; margin: 5px 0; }
.rating span { color: #666; margin-left: 4px; font-weight: bold; }
.product-name { font-size: 0.85rem; font-weight: bold; margin: 4px 0; color: #000; line-height: 1.3; white-space: normal; }
.price-container { margin: 5px 0; }
.mrp { text-decoration: line-through; color: #888; font-size: 0.75rem; margin-right: 5px; }
.selling-price { color: #d32f2f; font-weight: bold; font-size: 0.9rem; }
.add-to-cart { width: 100%; background: #000; color: #fff; border: none; padding: 8px; cursor: pointer; margin-top: auto; font-weight: bold; font-size: 0.75rem; text-transform: uppercase; }

.banner-carousel { display: flex; gap: 15px; overflow-x: auto; scrollbar-width: none; }
.banner-carousel::-webkit-scrollbar { display: none; }

/* CONNECT THE OFFER BANNER HEX COLOR PROPERTIES DIRECTLY TO INJECTED SYSTEM ROOT PARAMETERS */
.banner-item { min-width: 280px; height: 150px; border-radius: 8px; flex-shrink: 0; }
.banner-item:nth-child(1) { background-color: var(--banner-1-color, #333); }
.banner-item:nth-child(2) { background-color: var(--banner-2-color, #555); }
.banner-item:nth-child(3) { background-color: var(--banner-3-color, #777); }

/* RIGID 9:16 INSTAGRAM COMPONENT RATIO WINDOWS */
.instagram-carousel { display: flex; gap: 15px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; width: 100%; }
.instagram-carousel::-webkit-scrollbar { display: none; }
.instagram-card { min-width: 220px; max-width: 220px; border-radius: 12px; overflow: hidden; background: #fdfdfd; border: 1px solid #eaeaea; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.instagram-frame-ratio-box { width: 100%; position: relative; padding-top: 177.77% !important; background: #f9f9f9; }
.instagram-frame-ratio-box iframe { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; border: none; overflow: hidden; z-index: 10; }

/* ==========================================================================
   5. RESTORED PRODUCT DETAILS PAGE STYLES
   ========================================================================== */
.breadcrumb { padding: 15px 5%; font-size: 0.8rem; color: #666; }
.pdp-container { display: flex; flex-direction: column; padding: 20px 5% 10px; gap: 30px; }
.pdp-gallery { flex: 1; }
.main-image { width: 100%; height: 350px; border-radius: 8px; margin-bottom: 15px; transition: background-color 0.3s; }
.thumbnail-list { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.thumbnail-list::-webkit-scrollbar { display: none; }
.thumbnail { width: 70px; height: 70px; border-radius: 5px; flex-shrink: 0; cursor: pointer; border: 2px solid transparent; opacity: 0.6; transition: 0.3s; }
.thumbnail.active { border-color: #000; opacity: 1; }
.pdp-info { flex: 1; display: flex; flex-direction: column; }
.pdp-title { font-size: 1.6rem; margin-bottom: 10px; font-weight: bold; color: #000; }
.pdp-rating { font-size: 0.85rem; color: #ff9800; margin-bottom: 15px; display: flex; align-items: center; gap: 5px; }
.pdp-rating span { color: #666; font-size: 0.8rem; }
.pdp-pricing { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.pdp-selling-price { font-size: 1.4rem; font-weight: bold; color: #000; }
.pdp-mrp { text-decoration: line-through; color: #888; font-size: 0.95rem; }
.pdp-discount { background: #D32F2F; color: #fff; padding: 4px 8px; font-size: 0.75rem; font-weight: 800; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(211,47,47,0.35); }
.pdp-short-desc { font-size: 0.9rem; line-height: 1.4; color: #555; margin-bottom: 20px; }

/* HORIZONTALLY SCROLLABLE OFFERS PANEL TRACK */
.offers-carousel-container { margin: 15px 0 25px; width: 100%; overflow: hidden; }
.offers-title { font-size: 0.85rem; font-weight: bold; color: #000; margin-bottom: 10px; text-transform: uppercase; }
.offers-carousel { display: flex; gap: 15px; overflow-x: auto !important; scrollbar-width: none; padding-bottom: 8px; width: 100%; -webkit-overflow-scrolling: touch; }
.offers-carousel::-webkit-scrollbar { display: none; }
.offer-coupon-card { min-width: 260px !important; max-width: 260px !important; background: #000; color: #fff; border-radius: 12px; padding: 15px; position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 110px; flex-shrink: 0; }
.offer-coupon-card::before, .offer-coupon-card::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 12px; height: 24px; background: #fff; z-index: 5; }
.offer-coupon-card::before { left: -1px; border-radius: 0 12px 12px 0; }
.offer-coupon-card::after { right: -1px; border-radius: 12px 0 0 12px; }
.coupon-tag { border: 1px dashed #fff; padding: 3px 10px; font-size: 0.75rem; font-weight: bold; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: rgba(255,255,255,0.05);  width: max-content; margin-bottom: 8px; }
.coupon-desc { font-size: 0.75rem; line-height: 1.3; color: #ddd; margin-top: 10px; }

/* Variant Choice Chips */
.pdp-options-wrapper { margin-bottom: 20px; width: 100%; }
.options-title { font-size: 0.8rem; font-weight: bold; color: #666; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 0.5px; }
.pdp-options { display: inline-flex; gap: 10px; width: 100%;  width: max-content; margin-bottom: 8px; }
.option-chip { flex: 1; background: #fff; border: 1px solid #ddd; padding: 10px 5px; font-size: 0.8rem; font-weight: bold; border-radius: 4px; cursor: pointer; text-align: center; white-space: nowrap; }
.option-chip.active { border-color: #000; background: #f9f9f9; box-shadow: inset 0 0 0 1px #000; }

.pdp-actions { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; width: 100%; }
.pdp-qty-wrapper { display: flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; height: 42px; flex-shrink: 0; }
.pdp-qty-btn { width: 38px; height: 100%; background: #f9f9f9; border: none; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pdp-qty-wrapper input { width: 35px; height: 100%; text-align: center; border: none; border-left: 1px solid #ddd; border-right: 1px solid #ddd; font-weight: bold; font-size: 0.95rem; background: #fff; }
.pdp-add-btn { flex: 1; height: 42px; background: #fff; color: #000; border: 2px solid #000; font-weight: bold; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; margin-top: 0; text-transform: uppercase; }
.pdp-wishlist-btn { width: 42px; height: 42px; background: #fff; border: 1px solid #ddd; border-radius: 4px; font-size: 1.1rem; color: #666; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pdp-wishlist-btn.active { color: #d32f2f; border-color: #d32f2f; }

.pdp-buy-btn { width: 100%; height: 42px; background: #000; color: #fff; border: none; font-weight: bold; font-size: 0.9rem; cursor: pointer; margin-bottom: 20px; border-radius: 4px; text-transform: uppercase; }
.pdp-perks { display: flex; justify-content: space-between; font-size: 0.75rem; color: #666; border-top: 1px solid #eee; padding-top: 20px; }
.pdp-perks span { display: flex; align-items: center; gap: 5px; }

/* Tabs Layout Block */
.pdp-tabs-section { padding: 30px 5% 20px; border-bottom: 1px solid #eee; }
.tab-headers { display: flex; gap: 20px; border-bottom: 1px solid #eee; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tab-headers::-webkit-scrollbar { display: none; }
.tab-btn { background: none; border: none; padding: 10px 0; font-size: 0.9rem; font-weight: bold; color: #888; cursor: pointer; white-space: nowrap; position: relative; }
.tab-btn.active { color: #000; }
.tab-btn.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #000; }

.tab-content { display: none !important; font-size: 0.85rem; line-height: 1.5; color: #444; }
.tab-content.active { display: block !important; animation: fadeIn 0.4s; }
.tab-content h3 { margin-top: 15px; margin-bottom: 10px; color: #000; font-size: 1rem; font-weight: bold; }
.tab-content h3:first-of-type { margin-top: 0; }
.tab-content ul { padding-left: 20px; margin-bottom: 15px; }

.delivery-checker-container { padding: 25px 5%; border-bottom: 1px solid #eee; }
.pincode-title { font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; color: #000; }
.pincode-form-row { display: flex; max-width: 400px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; height: 42px; }
.pincode-form-row input { flex: 1; border: none; padding: 0 15px; font-size: 0.9rem; outline: none; }
.pincode-form-row button { background: #222; color: #fff; border: none; padding: 0 20px; font-weight: bold; cursor: pointer; font-size: 0.85rem; }
.pincode-response { font-size: 0.8rem; margin-top: 8px; font-weight: bold; display: none; }
.pincode-response.success { color: #2e7d32; }
.pincode-response.error { color: #c62828; }

.related-products-section { padding: 30px 5% 20px; border-bottom: 1px solid #eee; }

/* Testimonials Slide Frame */
.testimonials-section { padding: 35px 5%; background: #fafafa; overflow: hidden; position: relative; }
.testimonials-window { width: 100%; position: relative; overflow: hidden; }
.testimonials-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); width: 100%; }
.testimonial-slide-card { min-width: 100%; box-sizing: border-box; padding: 10px 5px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.testimonial-stars { color: #000; font-size: 0.85rem; margin-bottom: 10px; }
.testimonial-quote { font-size: 1rem; font-style: italic; color: #222; max-width: 600px; line-height: 1.5; margin-bottom: 12px; }
.testimonial-user { font-size: 0.8rem; font-weight: bold; color: #666; text-transform: uppercase; letter-spacing: 1px; }

/* ==========================================================================
   6. INLINE COLLAPSIBLE ACCORDION LAYOUT (NO POPUPS)
   ========================================================================== */
.shop-page-wrapper { display: flex; padding: 20px 5%; gap: 30px; position: relative; align-items: flex-start; }

/* Desktop Persistent Sidebar styling */
.shop-filter-sidebar { 
    width: 250px; 
    flex-shrink: 0; 
    position: sticky; 
    top: 20px; 
    background: #fff; 
    border: 1px solid #eee; 
    padding: 20px; 
    border-radius: 8px; 
    display: block; 
    z-index: 100; 
}
.sidebar-filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.sidebar-filter-header h3 { font-size: 0.95rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.accordion-arrow-icon { display: none; }

.filter-group-block { margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.filter-group-title { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: #888; margin-bottom: 4px; }
.filter-checkbox-label { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: #333; cursor: pointer; }
.filter-checkbox-label input[type="checkbox"] { width: 15px; height: 16px; accent-color: #000; cursor: pointer; }

.shop-content-grid-field { flex-grow: 1; display: flex; flex-direction: column; gap: 20px; }
.catalog-controls-toolbar { display: flex; justify-content: space-between; align-items: center; background: #fafafa; padding: 10px 15px; border-radius: 6px; border: 1px solid #eee; }
.results-counter-log { font-size: 0.85rem; color: #666; font-weight: bold; }
.sorting-selector-dropdown-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: bold; }
.sorting-selector-dropdown-row select { padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; outline: none; background: #fff; cursor: pointer; font-size: 0.8rem; }

/* Dedicated Grid for Catalog pages */
.shop-products-fluid-grid { display: grid; grid-template-columns: repeat(3, 1fr) !important; gap: 20px; width: 100%; }

/* ==========================================================================
   7. ORDER LIFECYCLE TRACKER FORM LAYOUT VIEW DESIGN
   ========================================================================== */
.track-order-page-container { padding: 30px 5%; max-width: 600px; margin: 0 auto; width: 100%; }
.category-hero-header-block { text-align: center; margin-bottom: 25px; }
.category-hero-header-block h1 { font-size: 1.6rem; font-weight: bold; margin-bottom: 10px; color: #000; }
.category-hero-header-block p { font-size: 0.9rem; color: #666; line-height: 1.4; }

.tracking-forms-card-box { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); margin-bottom: 25px; }
.tracking-input-form-layout { display: flex; flex-direction: column; gap: 15px; }
.tracking-field-input-wrapper { display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; }
.tracking-field-input-wrapper label { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: #444; }

.tracking-field-input-wrapper input { 
    width: 100% !important; height: 42px !important; border: 1px solid #ccc !important; 
    border-radius: 4px !important; padding: 0 12px !important; font-size: 0.9rem !important; 
    outline: none !important; background-color: #fff !important; color: #000 !important; 
    box-shadow: none !important; display: block !important; -webkit-appearance: none; font-family: inherit;
}
.tracking-field-input-wrapper input:focus { border-color: #000 !important; box-shadow: inset 0 0 0 1px #000 !important; }

.tracking-query-submit-btn { width: 100% !important; height: 42px !important; background: #000 !important; color: #fff !important; border: none !important; font-weight: bold !important; cursor: pointer !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; display: block !important; font-size: 0.85rem !important; }
.tracking-query-submit-btn:hover { background: #222 !important; }

.tracking-invoice-summary-card { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.invoice-meta-header-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: #555; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.tracking-milestones-visual-bar { display: flex; justify-content: space-between; position: relative; margin: 15px 0; width: 100%; }
.tracking-milestones-visual-bar::before { content: ''; position: absolute; top: 16px; left: 0; width: 100%; height: 2px; background: #e0e0e0; z-index: 1; }
.milestone-step-node { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 5; flex: 1; }
.milestone-step-node .step-circle { width: 30px; height: 32px; border-radius: 50%; background: #e0e0e0; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; border: 2px solid #fff; }
.milestone-step-node .step-label-text { font-size: 0.7rem; font-weight: bold; color: #888; text-transform: uppercase; }
.milestone-step-node.completed .step-circle { background: #000; }
.milestone-step-node.completed .step-label-text { color: #000; }
.carrier-particulars-box-block { background: #fff; border: 1px solid #eee; border-radius: 4px; padding: 12px; font-size: 0.9rem; line-height: 1.5; }

/* ==========================================================================
   8. SITE FOOTER MATRIX
   ========================================================================== */
.site-footer { background: #000; color: #fff; padding: 45px 8% 30px; text-align: center; border-top: 1px solid #222; margin-top: 40px; }
.brand-info h3 { font-size: 1.3rem; letter-spacing: 2px; margin-bottom: 10px; font-weight: bold; }
.brand-info p { font-size: 0.85rem; color: #bbb; line-height: 1.5; max-width: 500px; margin: 0 auto 25px; }
.newsletter-section h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.newsletter-form { display: flex; max-width: 320px; margin: 0 auto 30px; border: 1px solid #333; border-radius: 4px; overflow: hidden; height: 40px; }
.newsletter-form input { flex: 1; padding: 0 12px; border: none; background: #fff; color: #000; font-size: 0.85rem; outline: none; }
.newsletter-form button { padding: 0 20px; background: #fff; color: #000; border: none; cursor: pointer; font-weight: bold; font-size: 0.85rem; }
.footer-links-grid { display: flex; flex-direction: column; gap: 25px; margin-bottom: 30px; }
.footer-col h4 { margin-bottom: 10px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #fff; font-weight: bold; }
.footer-col a { display: block; color: #aaa !important; text-decoration: none !important; font-size: 0.85rem; margin-bottom: 8px; }
.footer-col a:hover { color: #fff !important; }
.social-links { display: flex; justify-content: center; gap: 20px; }
.social-links a { color: #aaa !important; font-size: 1.3rem; }
.footer-bottom { border-top: 1px solid #222; padding-top: 20px; margin-top: 20px; }
.footer-bottom p { font-size: 0.75rem; color: #666; }

/* ==========================================================================
   9. RESPONSIVE VIEWPORT INLINE ACCORDION MEDIA QUERIES
   ========================================================================== */
@media (min-width: 768px) {
    .pdp-container { flex-direction: row; align-items: flex-start; }
    .pdp-gallery { width: 50%; position: sticky; top: 20px; }
    .main-image { height: 450px; }
    .pdp-info { width: 50%; }
    .cart-drawer { width: 350px !important; }
    
    /* FIX: Fits exactly 4 full-width scrollable cards inside desktop view rows cleanly */
    .product-carousel .product-card { 
        min-width: calc((100% - (3 * 15px)) / 4) !important; 
        max-width: calc((100% - (3 * 15px)) / 4) !important; 
        flex-shrink: 0 !important;
    }

    .shop-products-fluid-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px; }
    .footer-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .filter-accordion-content { display: block !important; }
    
    /* Desktop Checkout configuration split side-by-side */
    .checkout-grid-layout { flex-direction: row-reverse !important; align-items: flex-start; }
    .checkout-form-column { flex: 1; }
    .checkout-summary-column { width: 380px !important; flex-shrink: 0; position: sticky; top: 20px; }
}

@media (max-width: 767px) {
    .shop-page-wrapper { flex-direction: column; padding: 15px 5%; gap: 15px; }
    
    /* Transforms the modal layout layout into a clean inline block accordion wrapper */
    .shop-filter-sidebar { 
        position: static !important; 
        width: 100% !important; 
        box-shadow: none !important; 
        padding: 12px 15px !important; 
        border: 1px solid #eee !important; 
        background: #fff !important; 
        border-radius: 6px !important;
        margin-bottom: 5px;
        display: block !important;
    }
    
    .sidebar-filter-header { margin-bottom: 0; border-bottom: none; padding-bottom: 0; cursor: pointer; user-select: none; }
    .accordion-arrow-icon { display: inline-block; transition: transform 0.25s ease; font-size: 0.9rem; color: #000; }
    
    .filter-accordion-content { display: none; padding-top: 15px; margin-top: 12px; border-top: 1px solid #eee; }
    
    /* Accordion Class hooks managed inside main.js */
    .shop-filter-sidebar.open-accordion .filter-accordion-content { display: block !important; }
    .shop-filter-sidebar.open-accordion .accordion-arrow-icon { transform: rotate(180deg); }

    /* Keeps grids independent of mobile carousels */
    .shop-products-fluid-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    
    .tracking-milestones-visual-bar { flex-direction: column; gap: 20px; align-items: flex-start; padding-left: 20px; margin-left: 10px; border-left: 2px solid #e0e0e0; }
    .tracking-milestones-visual-bar::before { display: none; }
    .milestone-step-node { flex-direction: row; gap: 15px; }
}

/* ==========================================================================
   10. CHECKOUT PAGE DESIGN GRID ARCHITECTURE
   ========================================================================== */
.checkout-page-container { padding: 20px 5% 40px; max-width: 1100px; margin: 0 auto; width: 100%; }
.checkout-grid-layout { display: flex; flex-direction: column; gap: 25px; width: 100%; }
.checkout-section-block { background: #fff; border: 1px solid #eee; padding: 20px; border-radius: 6px; }
.checkout-block-title { font-size: 1rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 15px; color: #000; }

.checkout-form-row-split { display: flex; gap: 15px; width: 100%; }
.checkout-form-row-split .tracking-field-input-wrapper { flex: 1; min-width: 0; }

/* Custom Radio Settings for Payment */
.payment-methods-wrapper { display: flex; flex-direction: column; margin-top: 5px; }
.payment-radio-option { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-size: 0.95rem; font-weight: bold; position: relative; }
.payment-radio-option input[type="radio"] { width: 18px; height: 18px; accent-color: #000; cursor: pointer; }

/* ==========================================================================
   11. AUTO-SLIDING BRAND TRUST BADGES SECTOR
   ========================================================================== */
.trust-badges-section { padding: 30px 5%; width: 100%; overflow: hidden; background: #fff; }
.trust-badges-window { width: 100%; overflow: hidden; position: relative; padding: 10px 0; }
.trust-badges-track { display: flex; gap: 25px; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); width: 100%; }

.trust-badge-node { 
    min-width: calc((100% - (2 * 25px)) / 3);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.trust-badge-node .badge-circle { 
    width: 65px; 
    height: 65px; 
    border-radius: 50%; 
    background: #f9f9f9; 
    border: 1px solid #eaeaea;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 10px; 
    color: #000;
    font-size: 1.4rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.trust-badge-node p { 
    font-size: 0.8rem; 
    font-weight: bold; 
    color: #222; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    line-height: 1.3;
    white-space: normal;
}

@media (min-width: 768px) {
    /* Locks exact 5-column grid flat structure on desktop viewports */
    .trust-badge-node { 
        min-width: calc((100% - (4 * 25px)) / 5) !important; 
    }
}