:root {
     --primary-green: #016938;
     /* Polished Exact Match */
     --dark-green: #004d29;
     --light-mint: #DDF7ED;
     --accent-orange: #f97316;
     --text-dark: #000000;
     /* Polished to pure black */
     --text-gray: #6b7280;
     --white: #ffffff;
     --black: #000000;
     --border-color: #e5e7eb;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Hind Siliguri', sans-serif;
 }

 body {
     background-color: #ffffff;
     color: var(--text-dark);
     line-height: 1.6;
     overflow: visible;
 }

 html {
     overflow-y: scroll;
     overflow-x: hidden;
 }

 .container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 1rem;
 }

 /* Polished Button Styles */
 .btn-buy-now {
     background-color: var(--primary-green) !important;
     color: white !important;
     font-size: 15px !important;
     font-weight: 500 !important;
     border-radius: 8px !important;
     padding: 10px 20px 12px !important;
     box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 7px 0px !important;
     text-transform: uppercase;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     transition: transform 0.2s;
 }

 .btn-buy-now:hover {
     transform: translateY(-2px);
     background-color: #01502b !important;
 }

 .btn-add-cart {
     background: white !important;
     color: #11151C !important;
     font-size: 15px !important;
     font-weight: 600 !important;
     border: 1px solid #000000 !important;
     border-radius: 8px !important;
     padding: 10px 20px !important;
     text-transform: uppercase;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     transition: all 0.3s;
 }

 .btn-add-cart:hover {
     background-color: #f3f3f3 !important;
 }

 /* Polished Typography */
 .pdp-title {
     font-size: 26px !important;
     font-weight: 700 !important;
     color: #000000 !important;
     margin-bottom: 0.25rem;
     line-height: 1.2;
 }

 .pdp-price {
     font-size: 20px !important;
     font-weight: 700 !important;
     color: #000000 !important;
 }

 .pdp-old-price {
     font-size: 16px !important;
     font-weight: 700 !important;
     color: #000000 !important;
     /* Changed to black as per findings */
     text-decoration: line-through;
     opacity: 0.6;
 }

 .save-badge {
     background-color: var(--primary-green) !important;
     color: white !important;
     font-size: 14px !important;
     padding: 2px 8px;
     border-radius: 4px;
     font-weight: 600;
 }

 /* Polished Quantity Selector */
 .quantity-control {
     border: 1px solid #000000 !important;
     border-radius: 8px !important;
     height: 48px !important;
     overflow: hidden;
     display: inline-flex;
 }

 .quantity-control button {
     background: transparent !important;
     border: none !important;
     padding: 0 1.5rem !important;
     font-size: 1.5rem !important;
     cursor: pointer;
     color: #000000 !important;
 }

 .quantity-control input {
     border: none !important;
     font-size: 18px !important;
     font-weight: 700 !important;
     color: #000000 !important;
     width: 50px !important;
     text-align: center;
 }

 /* Existing add-to-cart-btn styles expected around here, adding new status styles */

 .product-card.out-of-stock .add-to-cart-btn {
     background-color: #ef4444;
     /* Red color for out of stock */
     cursor: not-allowed;
     opacity: 0.8;
 }

 .product-card.out-of-stock:hover .add-to-cart-btn::after {
     content: "OUT OF STOCK";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #ef4444;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.8rem;
     font-weight: 700;
 }

 .product-card.out-of-stock .add-to-cart-btn span,
 .product-card.out-of-stock .add-to-cart-btn i {
     visibility: visible;
     /* Default visible */
 }

 .product-card.out-of-stock:hover .add-to-cart-btn span,
 .product-card.out-of-stock:hover .add-to-cart-btn i {
     visibility: hidden;
     /* Hide distinct icons/text when hovering to show 'OUT OF STOCK' */
 }


 /* Rest of the file content (keeping existing structural styles) */

 /* Top Bar */
 .top-bar {
     background-color: var(--primary-green);
     color: white;
     padding: 0.2rem 0;
     font-size: 0.75rem;
     text-align: center;
     position: relative;
     z-index: 1001;
 }

 .top-bar marquee {
     font-weight: 500;
 }

 /* Header */
 .header {
     background: white;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     position: -webkit-sticky !important;
     position: sticky !important;
     top: 0 !important;
     z-index: 1000;
     padding: 0;
 }

 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: stretch;
 }

 .logo-section {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     text-decoration: none;
     color: var(--text-dark);
 }

 .logo-section img {
     height: 32px;
     width: auto;
     object-fit: contain;
     border-radius: 4px;
     /* Optional rounded corners */
 }

 .logo-text {
     display: flex;
     flex-direction: row;
     align-items: baseline;
     gap: 6px;
     line-height: 1;
 }

 .brand-name {
     color: var(--primary-green);
     font-size: 1.25rem;
     font-weight: 800;
     line-height: 1;
 }

 .brand-tagline {
     font-size: 0.75rem;
     color: var(--text-gray);
     letter-spacing: 0.5px;
 }

 /* Navigation */
 .nav-links {
     display: none;
     gap: 2rem;
 }

 @media (min-width: 992px) {
     .nav-links {
         display: flex;
         flex: 1;
         justify-content: center;
     }
 }

 .nav-links a {
     display: flex;
     align-items: center;
     text-decoration: none;
     color: var(--text-dark);
     font-weight: 600;
     text-transform: uppercase;
     font-size: 0.9rem;
     transition: color 0.3s;
 }

 .nav-links a:hover {
     color: var(--primary-green);
 }

 .header-icons {
     display: flex;
     gap: 1rem;
     align-items: center;
 }

 .icon-btn {
     width: 32px;
     height: 32px;
     border: 1px solid var(--border-color);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s;
     background: white;
     color: var(--text-dark);
 }

 .icon-btn:hover {
     background: var(--primary-green);
     color: white;
     border-color: var(--primary-green);
 }

 /* Hero Section */
 .hero-wrapper {
     padding: 1rem 0;
     background-color: var(--white);
 }

 .hero-main {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .hero-banner {
     border-radius: 1.5rem;
     overflow: hidden;
     position: relative;
     height: 500px;
     display: flex;
     align-items: center;
     background-size: cover;
     background-position: center;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(2, 6, 23, 0.6) 0%, rgba(2, 6, 23, 0.4) 40%, rgba(2, 6, 23, 0) 100%);
     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     width: 100%;
     max-width: 600px;
     padding: 3rem 4rem;
     color: white;
 }

 .hero-badge {
     display: inline-block;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     padding: 0.5rem 1rem;
     border-radius: 2rem;
     font-size: 0.875rem;
     font-weight: 600;
     color: #4ade80;
     margin-bottom: 1.5rem;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }

 .hero-title {
     font-size: 2.4rem;
     line-height: 1.1;
     font-weight: 800;
     margin-bottom: 0.75rem;
     color: white;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }

 .hero-desc {
     font-size: 0.95rem;
     line-height: 1.5;
     color: #e2e8f0;
     margin-bottom: 1.5rem;
     max-width: 90%;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }

 .hero-slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 1.5rem;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }

 .hero-slides {
     display: flex;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .hero-slide {
     flex-shrink: 0;
     width: 100%;
     border-radius: 0 !important;
     /* Radius handled by container */
     box-shadow: none !important;
 }

 .hero-subtitle {
     font-size: 0.8em;
     opacity: 0.9;
 }

 /* Slider Arrows */
 .slider-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 10;
     transition: all 0.3s;
     opacity: 0;
     visibility: hidden;
 }

 .hero-slider-container:hover .slider-arrow {
     opacity: 1;
     visibility: visible;
 }

 .prev-arrow {
     left: 1.5rem;
 }

 .next-arrow {
     right: 1.5rem;
 }

 .slider-arrow:hover {
     background: rgba(255, 255, 255, 0.9);
     color: var(--primary-green);
     transform: translateY(-50%) scale(1.1);
 }

 /* Slider Dots */
 .hero-dots {
     position: absolute;
     bottom: 2rem;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 0.75rem;
     z-index: 10;
 }

 .hero-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, 0.8);
     background: transparent;
     cursor: pointer;
     transition: all 0.3s;
     padding: 0;
 }

 .hero-dot.active {
     background: rgba(255, 255, 255, 0.9);
     transform: scale(1.2);
     width: 30px;
     border-radius: 10px;
 }

 .btn-shop {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
     color: white;
     font-weight: 700;
     text-decoration: none;
     padding: 0.8rem 1.6rem;
     border-radius: 50px;
     transition: all 0.3s;
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
     border: 2px solid transparent;
     font-size: 0.95rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .btn-shop:hover {
     transform: translateY(-2px);
     box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.4), 0 10px 15px -6px rgba(0, 0, 0, 0.3);
     background: linear-gradient(135deg, var(--dark-green) 0%, var(--primary-green) 100%);
     border: 2px solid rgba(255, 255, 255, 0.2);
 }

 /* Sub Banners */
 .sub-banners {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1rem;
     margin-top: 1.5rem;
 }

 @media (min-width: 768px) {
     .sub-banners {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .sub-banner-item {
     background: #f9f9f9;
     border-radius: 0.75rem;
     padding: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     transition: transform 0.3s;
     cursor: pointer;
     overflow: hidden;
 }

 .sub-banner-content h3 {
     font-size: 1.25rem;
     color: var(--text-dark);
     margin-bottom: 0.5rem;
 }

 .sub-banner-content p {
     color: var(--primary-green);
     font-weight: 600;
 }

 .sub-banner-item img {
     height: 80px;
     width: auto;
     object-fit: contain;
 }

 /* Categories */
 .section-title {
     text-align: center;
     margin: 1.5rem 0 1rem;
     position: relative;
 }

 .section-title h2 {
     font-size: 1.6rem;
     font-weight: 700;
     color: var(--text-dark);
 }

 .categories-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
     margin-bottom: 3rem;
 }

 @media (min-width: 640px) {
     .categories-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (min-width: 992px) {
     .categories-grid {
         grid-template-columns: repeat(6, 1fr);
     }
 }

 .category-card {
     background: var(--light-mint);
     padding: 1.5rem;
     border-radius: 0.75rem;
     text-align: center;
     text-decoration: none;
     color: var(--text-dark);
     transition: all 0.3s;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 1rem;
 }

 .category-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 }

 .category-card.dark {
     background: var(--dark-green);
     color: white;
 }

 .category-card i {
     font-size: 2rem;
     margin-bottom: 0.5rem;
 }

 /* Products Grid */
 .products-wrapper {
     background: #ffffff;
     padding: 2rem 0;
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 1.5rem;
 }

 @media (min-width: 640px) {
     .products-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 992px) {
     .products-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .product-card {
     background: white;
     border: 1px solid var(--border-color);
     border-radius: 1.25rem;
     /* More rounded premium look */
     overflow: hidden;
     position: relative;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     display: flex;
     flex-direction: column;
 }

 .product-card:hover {
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
     border-color: var(--primary-green);
     transform: translateY(-5px);
 }

 .dynamic-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     z-index: 20;
     display: flex;
     flex-direction: column;
     gap: 6px;
     pointer-events: none;
 }

 .badge-item {
     font-size: 0.65rem;
     font-weight: 800;
     padding: 4px 10px;
     border-radius: 6px;
     text-transform: uppercase;
     color: white;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     width: fit-content;
     letter-spacing: 0.5px;
     display: flex;
     align-items: center;
     gap: 4px;
     backdrop-filter: blur(4px);
     line-height: normal;
 }

 .badge-flash {
     background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
     border: 1px solid rgba(255, 255, 255, 0.2);
     animation: badge-pulse 2s infinite;
 }

 .badge-clearance {
     background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .badge-discount {
     background: linear-gradient(135deg, #10b981 0%, #059669 100%);
 }

 .badge-mega {
     background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
     box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
 }

 .badge-best {
     background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
 }

 .badge-new {
     background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
 }

 /* World Class Teardrop Sale Badge */
 .badge-sale-teardrop {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 58px;
     height: 58px;
     background: linear-gradient(135deg, #ff0000 0%, #bd0000 100%);
     border-radius: 50% 50% 50% 0;
     transform: rotate(-45deg);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
     z-index: 30;
     pointer-events: none;
     border: 2px solid #fff;
 }

 .badge-sale-teardrop .badge-inner {
     transform: rotate(45deg);
     text-align: center;
     line-height: 1;
     display: flex;
     flex-direction: column;
 }

 .badge-sale-teardrop .s-top {
     font-size: 0.55rem;
     font-weight: 800;
     letter-spacing: 0.5px;
     opacity: 0.9;
 }

 .badge-sale-teardrop .s-val {
     font-size: 1.2rem;
     font-weight: 900;
     margin: 1px 0;
 }

 .badge-sale-teardrop .s-off {
     font-size: 0.5rem;
     font-weight: 700;
     text-transform: uppercase;
 }

 .badge-low-stock {
     background: #000;
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.3);
 }

 @keyframes badge-pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }

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

 .product-image {
     height: 250px;
     background: #ffffff;
     /* Changed from #f9f9f9 to white for seamless blend */
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .product-image img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     /* Ensures full image is visible */
     transition: transform 0.5s;
     padding: 1rem;
     /* Adds breathing room so product isn't touching edge */
 }

 .product-card:hover .product-image img {
     transform: scale(1.1);
 }

 .product-details {
     padding: 1rem;
     text-align: center;
 }

 .product-title {
     font-size: 0.85rem;
     font-weight: 600;
     margin-bottom: 0.25rem;
     color: var(--text-dark);
     line-height: 1.3;
 }

 .product-price {
     display: flex;
     justify-content: center;
     gap: 0.5rem;
     align-items: center;
 }

 .current-price {
     font-weight: 700;
     color: var(--primary-green);
     /* Updated to green for better visibility */
     font-size: 0.95rem;
     /* Slightly smaller */
 }

 .old-price {
     color: var(--text-gray);
     text-decoration: line-through;
     font-size: 0.75rem;
     /* Smaller and subtle */
 }

 .footer {
     background-color: #0f172a;
     /* Richer dark color */
     color: white;
     padding: 3rem 0 0;
     margin-top: 0;
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;
     padding-bottom: 2rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 @media (min-width: 768px) {
     .footer-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 1024px) {
     .footer-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .footer-col h3 {
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 1rem;
     color: white;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .footer-links {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }

 .footer-links a {
     color: #94a3b8;
     text-decoration: none;
     transition: color 0.2s;
     font-size: 0.85rem;
 }

 .footer-links a:hover {
     color: white;
     transform: translateX(2px);
 }

 .footer-contact p {
     color: #94a3b8;
     margin-bottom: 0.5rem;
     font-size: 0.85rem;
     display: flex;
     gap: 0.75rem;
     align-items: center;
 }

 .social-icons {
     display: flex;
     gap: 0.75rem;
     margin-top: 1rem;
 }

 .social-icon {
     width: 32px;
     height: 32px;
     background: rgba(255, 255, 255, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     color: white;
     text-decoration: none;
     transition: all 0.3s;
     font-size: 0.9rem;
 }

 .social-icon:hover {
     background: var(--primary-green);
     transform: translateY(-2px);
 }

 .footer-bottom {
     padding: 0.75rem 0 0;
     background: #020617;
     /* Very dark/black bottom */
     text-align: center;
     font-size: 0.8rem;
     color: #64748b;
 }

 .footer-bottom p {
     margin: 0;
     padding: 0.5rem 0;
 }



 .payment-strip {
     background: white;
     padding: 1rem 0;
     text-align: center;
 }

 .payment-strip img {
     height: 30px;
     width: auto;
     opacity: 0.8;
 }

 .mobile-nav-toggle {
     display: block;
     font-size: 1.5rem;
     cursor: pointer;
     background: none;
     border: none;
     color: var(--text-dark);
 }

 @media (min-width: 992px) {
     .mobile-nav-toggle {
         display: none;
     }
 }

 .order-section {
     padding: 4rem 0;
     background-color: #f9fffb;
 }

 .order-form-container {
     background: white;
     border-radius: 1rem;
     padding: 2rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     border: 1px solid var(--light-mint);
 }

 .btn-submit {
     width: 100%;
     background: var(--primary-green);
     color: white;
     padding: 1rem;
     font-weight: 700;
     border: none;
     border-radius: 0.5rem;
     cursor: pointer;
     font-size: 1.1rem;
     margin-top: 2rem;
     transition: background 0.3s;
 }

 .btn-submit:hover {
     background: var(--dark-green);
 }

 /* Floating Contact Button */
 .floating-contact-btn {
     position: fixed;
     bottom: 80px;
     right: 20px;
     height: 48px;
     padding: 0 1.25rem;
     background: #25D366;
     color: white;
     border-radius: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     font-size: 1rem;
     font-weight: 600;
     box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
     z-index: 1000;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .floating-contact-btn i {
     font-size: 1.25rem;
 }

 .floating-contact-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
 }

 @keyframes float {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-10px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 /* Accordion Box Styles */
 .accordion-item {
     border: 1px solid #e5e7eb;
     border-radius: 8px;
     margin-bottom: 1rem;
     overflow: hidden;
 }

 .accordion-header {
     background: white;
     padding: 1rem;
     font-weight: 700;
     color: var(--text-dark);
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
 }

 .accordion-title-group {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .accordion-icon {
     width: 32px;
     height: 32px;
     background: #DDF7ED;
     /* Exact Mint Green */
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 5px;
     /* Box shape */
     color: var(--primary-green);
 }

 .accordion-content {
     padding: 1rem;
     background: white;
     border-top: 1px solid #e5e7eb;
     display: none;
     color: var(--text-gray);
     line-height: 1.6;
 }

 .accordion-content.active {
     display: block;
 }

 /* Related Products */
 .related-products {
     margin-top: 3rem;
 }

 .related-products h2 {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
     color: var(--text-dark);
 }

 /* Trust Badges in PDP */
 .trust-points {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
     margin-top: 1.5rem;
 }

 .trust-item {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.9rem;
     color: var(--text-dark);
     font-weight: 500;
 }

 .trust-item i {
     color: var(--primary-green);
 }

 /* Sticky Bottom Bar for Mobile */
 .sticky-bottom-bar {
     display: none;
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: white;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
     z-index: 999;
     padding: 0.5rem;
     align-items: center;
     justify-content: space-around;
 }

 .sticky-nav-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 0.7rem;
     color: var(--text-gray);
     text-decoration: none;
 }

 .sticky-nav-item i {
     font-size: 1.25rem;
     margin-bottom: 2px;
     color: var(--text-dark);
 }

 @media (max-width: 768px) {
     .sticky-bottom-bar {
         display: flex;
     }

     .footer {
         padding-bottom: 70px;
     }

     .floating-contact-btn {
         bottom: 70px;
     }
 }

 /* Product Detail Page Specifics - Migrated from Inline Styles */

 .product-detail-page {
     padding: 1rem 0;
     background-color: #f9f7f2;
 }

 .breadcrumbs {
     margin-bottom: 2rem;
     color: #666;
     font-size: 0.9rem;
 }

 .breadcrumbs a {
     text-decoration: none;
     color: #666;
 }

 .product-detail-grid {
     display: grid;
     grid-template-columns: 1fr;
     /* Mobile First */
     gap: 1.5rem;
 }

 @media (min-width: 992px) {
     .product-detail-grid {
         grid-template-columns: 1fr 1fr;
         /* Desktop 2 Column */
     }
 }

 .product-gallery .main-image {
     background: white;
     border: 1px solid #e5e7eb;
     border-radius: 1rem;
     overflow: hidden;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .pdp-price-box {
     margin-bottom: 1rem;
     display: flex;
     align-items: baseline;
     gap: 1rem;
 }

 .stock-status {
     margin-bottom: 1.5rem;
     color: #166534;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.95rem;
 }

 .quantity-wrapper {
     margin-bottom: 2rem;
 }

 .quantity-label {
     display: block;
     font-weight: 700;
     margin-bottom: 0.5rem;
     color: #374151;
     font-size: 0.9rem;
 }

 .pdp-actions {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
     margin-bottom: 2rem;
 }

 /* Ensure buttons flex properly */
 .pdp-actions button {
     flex: 1;
     min-width: 160px;
 }

 /* Pro Update: Exact Font Matching and Refined Styles */

 /* 1. Global Font Imports Updates in style.css are handled by variable overrides mostly */

 :root {
     --font-heading: 'Reem Kufi Fun', sans-serif;
     --font-body: 'Poppins', sans-serif;
     --font-bengali: 'Hind Siliguri', sans-serif;
 }

 /* 2. Specific Typography Assignments */

 .pdp-title {
     font-family: var(--font-heading) !important;
     font-size: 34px !important;
     /* Slightly adjusted to look cleaner */
     letter-spacing: -0.5px;
     line-height: 1.1;
     margin-bottom: 0.75rem !important;
 }

 .pdp-price {
     font-family: var(--font-heading) !important;
     font-size: 26px !important;
     letter-spacing: -0.5px;
 }

 .pdp-old-price {
     font-family: var(--font-heading) !important;
     opacity: 0.5;
 }

 .btn-buy-now,
 .btn-add-cart {
     font-family: var(--font-body) !important;
     letter-spacing: 0.5px;
 }

 /* 3. Refined Layout & Spacing */

 .product-gallery .main-image {
     background: #fdfdfd !important;
     border: none !important;
     /* Cleaner look */
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
 }

 .quantity-control {
     border: 1px solid #e5e7eb !important;
     /* Softer border for "Pro" feel */
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }

 .quantity-control button:hover {
     background-color: #f9fafb !important;
 }

 /* 4. Accordion Polish */

 .accordion-header {
     border-bottom: 1px solid #f3f4f6;
     padding: 1.25rem 1rem !important;
 }

 .accordion-icon {
     font-size: 14px !important;
     /* Smaller icon inside box */
 }

 /* 5. Mobile Sticky Bar Update to match "Pro" */
 .sticky-bottom-bar {
     border-top: 1px solid #e5e7eb;
     padding: 0.75rem 0.5rem;
 }

 /* Cart Count Badge */
 .icon-btn {
     position: relative;
 }

 .cart-count {
     position: absolute;
     top: -5px;
     right: -5px;
     background: #ef4444;
     color: white;
     font-size: 0.75rem;
     font-weight: 700;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid white;
 }

 /* Mega Menu Styles */
 .nav-links {
     position: relative;
     /* Context for mega menu */
 }

 .nav-item-dropdown {
     position: relative;
     display: flex;
     align-items: center;
     height: 100%;
 }

 .nav-item-dropdown:hover .mega-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .nav-item-dropdown>a {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .mega-menu {
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%) translateY(10px);
     width: 900px;
     /* Fixed width for the mega container */
     background: white;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     border-top: 3px solid var(--primary-green);
     padding: 2rem;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 2rem;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     z-index: 1000;
     border-radius: 0 0 8px 8px;
 }

 /* Center mega menu specifically under the wrapper if needed, 
   but since nav-links is flex, we might need a better positioning strategy.
   Simpler: Make nav-links position static and header relative? 
   Let's try a full-width strategy constrained by container.
*/

 .header .container {
     position: relative;
 }

 .mega-menu-column h4 {
     font-family: 'Poppins', sans-serif;
     /* Matching the pro font */
     font-size: 0.95rem;
     font-weight: 700;
     text-transform: uppercase;
     color: var(--text-dark);
     margin-bottom: 1rem;
     letter-spacing: 0.5px;
 }

 .mega-menu-column ul {
     list-style: none;
     padding: 0;
 }

 .mega-menu-column ul li {
     margin-bottom: 0.75rem;
 }

 .mega-menu-column ul li a {
     color: #1f2937;
     /* Darker Gray/Black */
     text-decoration: none;
     font-size: 0.9rem;
     font-weight: 500;
     transition: color 0.2s;
     text-transform: capitalize;
     /* Ensure nice casing */
 }

 .mega-menu-column ul li a:hover {
     color: var(--primary-green);
     padding-left: 5px;
     /* Slight movement on hover */
 }

 /* Responsive Handling */
 @media (max-width: 992px) {
     .mega-menu {
         display: none;
         /* Hide on mobile for now, requires different mobile menu logic */
     }
 }

 /* Category Grid Polish - Based on User Design */
 .categories-section {
     padding: 1rem 0;
     background: white;
 }

 .categories-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     /* Mobile default */
     gap: 1.5rem;
 }

 @media (min-width: 640px) {
     .categories-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (min-width: 992px) {
     .categories-grid {
         grid-template-columns: repeat(6, 1fr);
         /* 6 across for desktop to match image */
     }
 }

 .category-card {
     background: #dcfce7 !important;
     /* The light mint green from image */
     padding: 2rem 1rem !important;
     border-radius: 0.75rem !important;
     text-align: center;
     text-decoration: none;
     color: var(--text-dark);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     height: 100%;
 }

 .category-card i {
     font-size: 2rem;
     color: #000000;
     /* Standard black icon */
     margin-bottom: 0px !important;
 }

 .category-card span {
     font-family: 'Poppins', sans-serif;
     font-weight: 600;
     font-size: 0.9rem;
     color: #000000;
 }

 .category-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
     background: #bbf7d0 !important;
     /* Slightly darker mint on hover */
 }

 /* New Category Circle Section */
 .new-category-section {
     padding: 1rem 0 3rem 0;
     /* Reduced top padding significantly */
     text-align: center;
     background: #fff;
 }

 .new-cat-header {
     margin-bottom: 3rem;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 .new-cat-header h2 {
     font-family: 'Poppins', sans-serif;
     font-size: 2.5rem;
     font-weight: 700;
     color: #000;
     margin-bottom: 1rem;
 }

 .new-cat-header h2 span {
     color: var(--primary-green);
 }

 .new-cat-header p {
     color: #666;
     font-size: 1rem;
     line-height: 1.6;
 }

 .new-cat-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 2rem;
     justify-items: center;
 }

 @media (min-width: 640px) {
     .new-cat-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (min-width: 992px) {
     .new-cat-grid {
         grid-template-columns: repeat(6, 1fr);
         /* 6 items in a row */
     }
 }

 .new-cat-item {
     text-decoration: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1.5rem;
     transition: transform 0.3s ease;
 }

 .new-cat-item:hover {
     transform: translateY(-5px);
 }

 .new-cat-img-box {
     width: 160px;
     height: 160px;
     border-radius: 50%;
     overflow: hidden;
     border: 2px solid #e5e7eb;
     padding: 5px;
     /* White gap between border and image if needed */
     background: #fff;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 .new-cat-img-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
     transition: transform 0.5s ease;
 }

 .new-cat-item:hover .new-cat-img-box img {
     transform: scale(1.1);
 }

 .new-cat-title {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     font-size: 1.1rem;
     color: #000;
     text-transform: capitalize;
 }

 /* Mega Menu Fix - Container Relative */

 /* 1. Reset positioning on the immediate parents to prevent them from trapping the absolute mega-menu */
 .nav-links,
 .nav-item-dropdown {
     position: static !important;
 }

 /* 2. Ensure the main header container works as the reference anchor */
 .header .container {
     position: relative !important;
 }

 /* 3. Position the mega menu full-width relative to the main container */
 .mega-menu {
     top: 100% !important;
     /* Start right below the header container */
     left: 0 !important;
     width: 100% !important;
     transform: none !important;
     /* Remove previous centering transforms */
     border-radius: 0 0 8px 8px;
     /* Round bottom corners */
     margin-top: 0px;
     /* Adjust if gap exists */

     /* Ensure grid centers nicely within */
     padding: 2rem 1rem !important;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     justify-content: center;
 }

 /* Optional: If 100% is too wide and touches screen edges on large screens, 
   we can match the container width behavior inside or constrain max-width */

 /* Adjust hover trigger since we changed position:static */
 .nav-item-dropdown:hover .mega-menu {
     display: grid;
     /* Ensure display is grid on hover */
     opacity: 1;
     visibility: visible;
 }

 /* Ensure Logo/Nav alignment doesn't break due to static */
 .header-content {
     /* Main flex container inside header .container */
     display: flex;
     justify-content: space-between;
     align-items: stretch;
     /* CHANGED from center to stretch to ensure full height nav */
     position: static;
     width: 100%;
     min-height: 50px;
     /* Ensure a minimum height for the header */
 }

 /* Ensure Logo and Nav stay in check */
 .nav-links {
     display: flex;
     align-items: stretch;
     /* CHANGED from center to stretch */
     gap: 2rem;
     margin-left: auto;
 }

 /* Make the dropdown container full height so hover persists */
 .nav-item-dropdown {
     display: flex;
     align-items: center;
     position: static !important;
     height: 100%;
 }

 /* Add padding to the link itself to center it but keep hit area large */
 .nav-item-dropdown>a {
     display: flex;
     align-items: center;
     gap: 5px;
     height: 100%;
     padding: 0 10px;
     /* Horizontal padding for hit area */
 }

 /* Final Navigation Alignment Fix */
 .nav-links {
     margin-left: auto;
     /* Push nav to the right if needed, or keep centered with justify-content: space-between */
     gap: 3rem;
     /* Increase gap for better spacing */
 }

 .header-icons {
     display: flex;
     align-items: center;
     gap: 1.5rem;
 }

 /* Ensure dropdown arrows are aligned */
 .nav-item-dropdown>a {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 /* Search Overlay */
 .search-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.98);
     z-index: 2000;
     display: none;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }

 .close-search {
     position: absolute;
     top: 2rem;
     right: 2rem;
     background: none;
     border: none;
     font-size: 2rem;
     cursor: pointer;
     color: var(--text-dark);
 }

 .search-form {
     position: relative;
     width: 80%;
     max-width: 600px;
     border-bottom: 2px solid var(--text-dark);
 }

 .search-form input {
     width: 100%;
     border: none;
     background: transparent;
     font-size: 2rem;
     padding: 1rem 3rem 1rem 0;
     color: var(--text-dark);
     outline: none;
     font-family: inherit;
 }

 .search-form button {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
     color: var(--primary-green);
 }

 /* Product Card Hover Add to Cart */
 .product-card {
     position: relative;
     display: block;
     background: white;
     border-radius: 12px;
     overflow: hidden;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     height: 100%;
     border: 1px solid #f1f5f9;
 }

 .product-card:hover {
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
     transform: translateY(-4px);
     border-color: transparent;
 }

 .product-image {
     position: relative;
     overflow: hidden;
     background: #f1f2f4;
 }

 .add-to-cart-btn {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: var(--primary-green);
     color: white;
     border: none;
     padding: 12px;
     font-weight: 600;
     cursor: pointer;
     transform: translateY(100%);
     transition: transform 0.3s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-size: 0.9rem;
     z-index: 10;
 }

 .product-card:hover .add-to-cart-btn {
     transform: translateY(0);
 }

 .add-to-cart-btn:hover {
     background: #156633;
 }

 /* Sub Banner Styling matching requested design */
 .sub-banners {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 1.5rem;
     margin-top: 5rem;
 }

 @media (min-width: 768px) {
     .sub-banners {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .sub-banner-item {
     position: relative;
     height: 250px;
     /* Reduced specific height */
     border-radius: 1.5rem;
     overflow: hidden;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     display: flex;
     align-items: flex-end;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     padding: 0;
 }

 .sub-banner-overlay {
     width: 100%;
     padding: 1.5rem;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;
 }

 .sub-banner-overlay h3 {
     color: white;
     text-transform: uppercase;
     font-weight: 800;
     font-size: 1.5rem;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
     margin: 0;
 }

 .btn-show-all {
     background: white;
     color: black;
     padding: 8px 24px;
     font-weight: 700;
     font-size: 0.9rem;
     text-transform: uppercase;
     text-decoration: none;
     border-radius: 6px;
     transition: all 0.3s ease;
     display: inline-block;
 }

 .btn-show-all:hover {
     background: var(--primary-green);
     color: white;
     transform: translateY(-2px);
 }

 /* Flash Sale Section */
 .flash-sale-section {
     padding: 2rem 0;
     background: #fff0f0;
     /* Light reddish background */
     border-top: 1px solid #ffecec;
 }

 .flash-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 2rem;
     flex-wrap: wrap;
     gap: 1rem;
 }

 .flash-title {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .flash-title h2 {
     font-size: 1.5rem;
     color: #ef4444;
     font-weight: 800;
     text-transform: uppercase;
     margin: 0;
 }

 .countdown-timer {
     display: flex;
     gap: 0.5rem;
     align-items: center;
 }

 .timer-block {
     background: #ef4444;
     color: white;
     padding: 0.5rem 0.75rem;
     border-radius: 6px;
     font-weight: 700;
     font-size: 1.1rem;
     min-width: 40px;
     text-align: center;
 }

 .timer-separator {
     font-weight: 700;
     color: #ef4444;
     font-size: 1.2rem;
 }

 .flash-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
 }

 @media (min-width: 768px) {
     .flash-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 /* Professional Discount & Badge Styles */
 .pro-discount-badge {
     position: absolute;
     top: 10px;
     right: 10px;
     background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
     color: white;
     padding: 0.25rem 0.75rem;
     border-radius: 4px;
     font-weight: 700;
     font-size: 0.85rem;
     box-shadow: 0 4px 6px rgba(220, 38, 38, 0.4);
     z-index: 10;
     clip-path: polygon(100% 0, 100% 100%, 50% 85%, 0 100%, 0 0);
     padding-bottom: 0.5rem;
     min-width: 45px;
     text-align: center;
 }

 .flash-header {
     background: white;
     padding: 1rem;
     border-radius: 0.5rem;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     border: 1px solid #fee2e2;
 }

 .product-card.flash-deal {
     border: 2px solid #fee2e2;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .product-card.flash-deal:hover {
     border-color: #ef4444;
     transform: translateY(-5px);
     box-shadow: 0 15px 30px -10px rgba(239, 68, 68, 0.2);
 }

 .savings-label {
     display: inline-block;
     background: #fef2f2;
     color: #dc2626;
     font-size: 0.75rem;
     font-weight: 600;
     padding: 0.15rem 0.5rem;
     border-radius: 1rem;
     margin-top: 0.25rem;
     border: 1px solid #fca5a5;
 }

 /* Search Overlay Styles matching HT Bazar */
 .search-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.85);
     /* Darker backdrop */
     z-index: 9999;
     display: none;
     justify-content: center;
     align-items: flex-start;
     /* Start from top */
     padding-top: 15vh;
     /* Push down slightly */
     backdrop-filter: blur(5px);
 }

 .search-form-container {
     position: relative;
     width: 100%;
     max-width: 600px;
     padding: 0 1rem;
     animation: slideDown 0.3s ease-out;
 }

 @keyframes slideDown {
     from {
         transform: translateY(-30px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 .search-form {
     display: flex;
     background: white;
     padding: 0.5rem;
     border-radius: 50px;
     /* Full pill shape */
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     width: 100%;
 }

 .search-form input {
     flex: 1;
     border: none;
     padding: 1rem 1.5rem;
     font-size: 1.1rem;
     outline: none;
     background: transparent;
     color: #333;
 }

 .search-form button {
     background: var(--primary-green);
     color: white;
     border: none;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     cursor: pointer;
     font-size: 1.2rem;
     transition: background 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .search-form button:hover {
     background: #044225;
 }

 .close-search-btn {
     position: absolute;
     top: -50px;
     right: 0;
     color: white;
     font-size: 2rem;
     background: none;
     border: none;
     cursor: pointer;
     opacity: 0.8;
     transition: opacity 0.2s;
 }

 .close-search-btn:hover {
     opacity: 1;
 }

 /* AJAX Search Results Styles */
 .ajax-search-results {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background: white;
     border-radius: 0 0 1.5rem 1.5rem;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     max-height: 400px;
     overflow-y: auto;
     z-index: 10000;
     display: none;
     /* Hidden by default */
     padding: 0.5rem 0;
 }

 .search-result-item {
     display: flex;
     align-items: center;
     padding: 0.75rem 1.5rem;
     text-decoration: none;
     color: var(--text-dark);
     transition: background 0.2s;
     border-bottom: 1px solid #f1f5f9;
 }

 .search-result-item:last-child {
     border-bottom: none;
 }

 .search-result-item:hover {
     background: #f8fafc;
 }

 .search-result-img {
     width: 50px;
     height: 50px;
     object-fit: cover;
     border-radius: 6px;
     margin-right: 1rem;
     border: 1px solid #e2e8f0;
 }

 .search-result-info {
     flex: 1;
 }

 .search-result-title {
     font-weight: 600;
     font-size: 0.95rem;
     display: block;
     margin-bottom: 0.25rem;
 }

 .search-result-price {
     font-size: 0.85rem;
     color: var(--primary-green);
     font-weight: 700;
 }

 /* Scrollbar for results */
 .ajax-search-results::-webkit-scrollbar {
     width: 6px;
 }

 .ajax-search-results::-webkit-scrollbar-track {
     background: #f1f5f9;
 }

 .ajax-search-results::-webkit-scrollbar-thumb {
     background: #cbd5e1;
     border-radius: 3px;
 }

 /* =========================================
   FINAL ROBUST MEGA MENU FIX
   ========================================= */

 @media (min-width: 992px) {

     /* 1. Reset positioning for Full-Width Menu */
     .header .container {
         position: relative !important;
     }

     .nav-links,
     .nav-item-dropdown {
         position: static !important;
     }

     /* 2. Mega Menu Positioning */
     .mega-menu {
         position: absolute !important;
         top: 100% !important;
         left: 0 !important;
         width: 100% !important;
         background: white;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         border-top: 3px solid var(--primary-green);
         padding: 2rem !important;
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 2rem;
         opacity: 0;
         visibility: hidden;
         transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
         transform: translateY(10px);
         z-index: 1000;
         border-radius: 0 0 8px 8px;
         margin-top: 0 !important;
         /* Eliminate gap */
     }

     /* 3. Hover Trigger & Gap Bridge */
     .nav-item-dropdown {
         height: 100% !important;
         display: flex;
         align-items: center;
     }

     .nav-item-dropdown>a {
         height: 100% !important;
         display: flex;
         align-items: center;
     }

     .nav-item-dropdown:hover .mega-menu {
         opacity: 1 !important;
         visibility: visible !important;
         transform: translateY(0) !important;
         display: grid !important;
     }
 }

 /* Features Section */
 .testimonials-section {
     padding-bottom: 0 !important;
     margin-bottom: 0 !important;
     padding-top: 0 !important;
     margin-top: 0 !important;
 }

 .testimonials-section .section-title {
     margin-top: 0.5rem !important;
     margin-bottom: 0.5rem !important;
 }

 #best-selling {
     padding-bottom: 0 !important;
     margin-bottom: 0 !important;
 }

 #products .section-title {
     margin-top: 0.5rem !important;
     margin-bottom: 0.5rem !important;
 }

 #new-collection {
     padding-bottom: 0 !important;
 }

 #new-collection .section-title {
     margin-top: 0.5rem !important;
     margin-bottom: 0.5rem !important;
 }

 #new-collection .section-title p {
     margin-bottom: 1rem !important;
 }

 #new-category .section-title {
     margin-top: 0.5rem !important;
     margin-bottom: 0.5rem !important;
 }

 #best-selling .section-title {
     margin-top: 0.5rem !important;
     margin-bottom: 1rem !important;
 }

 .features-section {
     padding: 0 0 3rem 0;
     background: white;
     border-top: 1px solid #f3f4f6;
 }

 .features-section .section-title {
     margin-top: 1.5rem !important;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
 }

 .feature-card {
     text-align: center;
     padding: 2rem;
     border-radius: 1.5rem;
     border: 1px solid #f1f5f9;
     transition: all 0.3s ease;
     background: #ffffff;
 }

 .feature-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
     border-color: var(--primary-green);
 }

 .feature-icon {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
 }

 .feature-icon i {
     font-size: 1.5rem;
 }

 .icon-truck {
     background: var(--light-mint);
 }

 .icon-truck i {
     color: var(--primary-green);
 }

 .icon-shield {
     background: var(--light-mint);
 }

 .icon-shield i {
     color: var(--primary-green);
 }

 .icon-headset {
     background: var(--light-mint);
 }

 .icon-headset i {
     color: var(--primary-green);
 }

 .feature-card h3 {
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     color: #1e293b;
 }

 .feature-card p {
     color: #64748b;
     line-height: 1.4;
     font-size: 0.9rem;
 }

 /* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================= */

 @media (max-width: 991px) {

     /* --- Header & Navigation --- */
     .top-bar {
         font-size: 0.75rem;
         padding: 0.25rem 0;
     }

     .header {
         padding: 0.75rem 0;
         position: -webkit-sticky !important;
         position: sticky !important;
         top: 0 !important;
         z-index: 1000;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     }

     /* Hide Desktop Nav Links */
     /* Hide Desktop Nav Links */
     .nav-links {
         display: none;
     }

     .nav-links.active {
         display: flex !important;
         flex-direction: column;
         position: absolute;
         top: 100%;
         left: 0;
         width: 100%;
         background: white;
         padding: 1rem;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         z-index: 1001;
     }

     /* Mobile Header - Logo Fix Only */
     .header-content {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 0.5rem;
         position: relative;
     }

     .header-content .logo-section {
         flex: 1;
         display: flex;
         align-items: center;
         justify-content: center;
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
     }

     /* Make logo image visible on mobile */
     .logo-section img,
     .header-logo-img {
         display: block !important;
         visibility: visible !important;
         height: 40px !important;
         width: auto !important;
         max-width: 100px;
     }

     /* Logo text smaller on mobile */
     .logo-text span {
         font-size: 1.3rem !important;
     }

     .brand-tagline {
         display: none;
     }

     /* Mobile Icons */
     .header-icons {
         gap: 0.5rem;
     }

     .icon-btn {
         width: 36px;
         height: 36px;
         font-size: 0.9rem;
     }

     /* --- Hero Section --- */
     .hero-wrapper {
         padding: 0.5rem 0 !important;
     }

     .hero-main {
         gap: 0.5rem !important;
     }

     .hero-slider-container {
         height: 240px;
         /* Reverted to 240px as requested */
         border-radius: 1rem;
         margin-top: 0.1rem;
         position: relative;
     }

     .hero-slides {
         height: 100%;
         /* Ensure slides wrapper fills container height */
     }

     .hero-banner {
         height: 100%;
         border-radius: 0 !important;
         align-items: center;
     }

     .hero-content {
         padding: 0.75rem 0.5rem !important;
         /* Extremely tight padding */
         max-width: 100%;
         text-align: center;
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         height: 100%;
     }

     .hero-title {
         font-size: 1.1rem !important;
         /* Smaller title to fit */
         margin-bottom: 0.1rem !important;
         line-height: 1.2;
     }

     .hero-dots {
         bottom: 0.5rem !important;
         /* Move dots lower to avoid overlapping button */
     }

     .hero-badge {
         margin-bottom: 0.35rem !important;
         font-size: 0.7rem !important;
         padding: 0.2rem 0.6rem !important;
     }

     .hero-desc {
         font-size: 0.75rem;
         margin-bottom: 0.75rem;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
     }

     .btn-shop {
         padding: 0.4rem 1.25rem !important;
         font-size: 0.85rem !important;
     }

     /* --- Sub Banners (3 Columns in Single Line) --- */
     .sub-banners {
         display: grid !important;
         grid-template-columns: repeat(3, 1fr) !important;
         gap: 0.5rem !important;
         overflow-x: visible !important;
         padding: 0 0.5rem !important;
         margin-top: 1rem !important;
         scroll-snap-type: none !important;
     }

     .sub-banner-item {
         min-width: 0 !important;
         height: 160px !important;
         flex: none !important;
         border-radius: 0.5rem !important;
     }

     .sub-banner-overlay {
         padding: 0.5rem !important;
         gap: 4px !important;
     }

     .sub-banner-overlay h3 {
         font-size: 0.8rem !important;
         font-weight: 700 !important;
     }

     .sub-banner-overlay p {
         font-size: 0.6rem !important;
         margin-bottom: 0.2rem !important;
         display: -webkit-box;
         -webkit-line-clamp: 1;
         line-clamp: 1;
         -webkit-box-orient: vertical;
         overflow: hidden;
     }

     .btn-show-all {
         padding: 4px 8px !important;
         font-size: 0.6rem !important;
         border-radius: 4px !important;
         width: 100% !important;
         text-align: center !important;
     }

     /* --- Products Grid (2 Column Fixed) --- */
     .products-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr) !important;
         /* Force 2 columns */
         gap: 0.75rem !important;
         /* Tighter gap */
     }

     .product-image {
         height: 160px;
         /* Smaller image height */
     }

     .product-details {
         padding: 0.75rem;
     }

     .product-title {
         font-size: 0.85rem;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }

     .product-price .current-price {
         font-size: 0.9rem;
     }

     .product-price .old-price {
         font-size: 0.8rem;
     }

     /* Hide "Add to Cart" text on mobile, likely show icon only or smaller button */
     .add-to-cart-btn {
         padding: 0.4rem 0.5rem;
         font-size: 0.75rem;
     }

     .add-to-cart-btn span {
         display: none;
         /* Icon only for space */
     }

     .add-to-cart-btn::after {
         content: " ADD";
     }

     /* --- Why Choose Us (Ultra Compact) --- */
     .features-section {
         padding: 1rem 0 !important;
     }

     .features-grid {
         grid-template-columns: repeat(3, 1fr) !important;
         gap: 0.5rem !important;
     }

     .feature-card {
         padding: 0.75rem 0.5rem !important;
         border-radius: 0.75rem !important;
     }

     .feature-icon {
         width: 36px !important;
         height: 36px !important;
         margin-bottom: 0.5rem !important;
     }

     .feature-icon i {
         font-size: 0.9rem !important;
     }

     .feature-card h3 {
         font-size: 0.75rem !important;
         margin-bottom: 0.2rem !important;
         white-space: nowrap;
     }

     .feature-card p {
         font-size: 0.6rem !important;
         line-height: 1.2 !important;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
     }

     /* --- Section Titles --- */
     .section-title {
         margin: 1.25rem 0 0.5rem !important;
         padding: 0 !important;
         text-align: center;
     }

     .section-title h2 {
         font-size: 1.1rem;
         font-weight: 700;
         margin: 0;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         color: #1e293b;
         position: relative;
         display: block;
         /* Changed from inline-block */
         padding-left: 0;
         /* Removed padding */
     }

     /* Removed vertical bar ::before pseudo-element */

     /* --- Footer --- */
     .footer {
         padding-bottom: 80px;
         /* Space for Bottom Nav */
     }

     .footer-grid {
         grid-template-columns: 1fr;
         /* Stack footer */
         text-align: left;
     }

     .footer-contact p {
         justify-content: flex-start;
     }

     .social-icons {
         justify-content: flex-start;
     }

     /* --- Bottom Sticky Nav (Mobile Only) --- */
     .mobile-bottom-nav {
         display: flex !important;
         /* Enable on mobile */
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
         background: white;
         box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
         z-index: 9999;
         justify-content: space-around;
         padding: 0.75rem 0;
         height: 60px;
         align-items: center;
     }

     .mobile-nav-item {
         display: flex;
         flex-direction: column;
         align-items: center;
         text-decoration: none;
         color: var(--text-gray);
         font-size: 0.7rem;
         gap: 2px;
     }

     .mobile-nav-item i {
         font-size: 1.25rem;
         margin-bottom: 2px;
     }

     .mobile-nav-item.active {
         color: var(--primary-green);
         position: relative;
     }

     .mobile-nav-item.active i {
         transform: translateY(-2px);
         transition: transform 0.2s;
     }

     .mobile-nav-item.active::after {
         content: '';
         width: 4px;
         height: 4px;
         background: var(--primary-green);
         border-radius: 50%;
         position: absolute;
         bottom: -2px;
     }

     /* Hide the old desktop sticky bar if it exists */
     .sticky-bottom-bar {
         display: none !important;
     }

     /* --- Mobile Menu Drawer (Mega Menu Adaptation) --- */
     /* By default hide the desktop mega menu dropdown logic */
     /* Compact Newsletter for Mobile */
     .newsletter-section {
         padding: 1.5rem 0 !important;
     }

     /* Compact Badge */
     .newsletter-badge {
         padding: 0.3rem 0.8rem !important;
         margin-bottom: 0.5rem !important;
     }

     .newsletter-badge span {
         font-size: 0.7rem !important;
     }

     .newsletter-heading {
         font-size: 1.1rem !important;
         margin-bottom: 0.5rem !important;
     }

     .newsletter-text {
         font-size: 0.75rem !important;
         margin-bottom: 1rem !important;
         line-height: 1.4 !important;
     }

     /* Form: Flex Row on Mobile */
     #subscribeForm {
         display: flex !important;
         flex-direction: row !important;
         flex-wrap: nowrap !important;
         gap: 0.5rem !important;
         padding: 0 0.5rem;
     }

     .newsletter-input {
         padding: 0.5rem 1rem !important;
         font-size: 0.85rem !important;
         height: 42px !important;
         min-width: 0 !important;
         /* Allow shrinking */
         flex: 1 !important;
     }

     .newsletter-btn {
         padding: 0 1rem !important;
         font-size: 0.85rem !important;
         height: 42px !important;
         white-space: nowrap !important;
         width: auto !important;
     }

     .privacy-text {
         font-size: 0.7rem !important;
         margin-top: 0.75rem !important;
     }

     /* Products Page Header Mobile */
     .products-page-header {
         flex-direction: column !important;
         align-items: flex-start !important;
         gap: 1rem !important;
     }

     .products-page-header .section-title {
         text-align: left !important;
         width: 100% !important;
     }

     .sort-box {
         width: 100% !important;
         justify-content: space-between !important;
     }

     .mega-menu {
         position: static !important;
         opacity: 1 !important;
         visibility: visible !important;
         transform: none !important;
         display: none;
         /* Hidden by default */
         box-shadow: none;
         border-top: none;
         padding: 0 !important;
     }
 }

 @media (min-width: 992px) {
     .mobile-bottom-nav {
         display: none !important;
     }

 }

 /* --- Circular Category Scroll (HT Bazar Style) --- */
 .category-circle-scroll {
     width: 100%;
     overflow-x: auto;
     /* Enable manual scrolling */
     padding: 1rem 0;
     position: relative;
     scrollbar-width: none;
     /* Hide scrollbar */
     -ms-overflow-style: none;
     cursor: grab;
     user-select: none;
     -webkit-user-drag: none;
 }

 .category-circle-scroll::-webkit-scrollbar {
     display: none;
 }

 .category-scroll-track {
     display: flex;
     gap: 0.75rem;
     width: max-content;
     /* Ensure it expands beyond container */
 }

 .category-circle-item {
     flex: 0 0 auto;
     width: 140px;
     text-align: center;
     text-decoration: none;
     scroll-snap-align: start;
     transition: transform 0.2s;
 }

 .category-circle-item:hover {
     transform: translateY(-5px);
 }

 .category-circle-item .img-wrap {
     width: 130px;
     /* Increased from 110px */
     height: 130px;
     /* Increased from 110px */
     border-radius: 50%;
     background: white;
     border: 2px solid #e2e8f0;
     padding: 2px;
     margin: 0 auto 0.5rem auto;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .category-circle-item:hover .img-wrap {
     border-color: var(--primary-green);
     box-shadow: 0 8px 15px rgba(22, 163, 74, 0.2);
 }

 .category-circle-item .img-wrap img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
 }

 .category-circle-item span {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     font-size: 0.95rem;
     /* Increased text size */
     font-weight: 600;
     color: #334155;
 }

 /* Scale icons if present */
 .category-circle-item .img-wrap i {
     font-size: 2.5rem;
     /* Big icons */
     color: #64748b;
 }

 @media (max-width: 767px) {
     .category-circle-item {
         width: 90px;
         /* Reduced for mobile */
     }

     .category-circle-item .img-wrap {
         width: 80px;
         height: 80px;
     }

     .category-circle-item span {
         font-size: 0.75rem;
     }
 }



 @media (min-width: 992px) {
     .category-circle-item {
         margin-bottom: 1rem;
     }
 }

 /* --- Quick Links Grid (HT Bazar Style) --- */
 .quick-links-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 1rem;
     padding: 0;
 }

 .quick-link-card {
     background: #ecfdf5;
     /* Very light mint background */
     border-radius: 0.75rem;
     padding: 1.5rem 0.5rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     text-decoration: none;
     color: #000;
     /* Black text */
     transition: transform 0.2s, background 0.2s;
     min-height: 120px;
 }

 .quick-link-card:hover {
     transform: translateY(-3px);
     background: #d1fae5;
     /* Slightly darker on hover */
 }

 .quick-link-card i {
     font-size: 2rem;
     margin-bottom: 0.75rem;
     color: #000;
     /* Black Icon */
 }

 .quick-link-card span {
     font-size: 0.9rem;
     font-weight: 600;
     letter-spacing: 0.5px;
     line-height: 1.2;
 }

 /* Mobile optimizations */
 @media (max-width: 768px) {
     .quick-links-grid {
         gap: 0.5rem;
         grid-template-columns: repeat(3, 1fr);
     }

     .quick-link-card {
         padding: 0.75rem;
     }

     .quick-link-card i {
         font-size: 1.5rem;
     }

     .quick-link-card span {
         font-size: 0.75rem;
     }
 }

 /* --- Dynamic Mobile Drawer Menu --- */
 .mobile-drawer-menu {
     display: none;
     flex-direction: column;
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background: white;
     padding: 1rem;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
     z-index: 1002;
     border-top: 1px solid #f3f4f6;
 }

 .mobile-drawer-menu.active {
     display: flex;
     animation: slideDownMenu 0.3s ease-out;
 }

 @keyframes slideDownMenu {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .drawer-link {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.75rem 1rem;
     text-decoration: none;
     color: var(--text-dark);
     font-weight: 600;
     font-size: 0.95rem;
     border-radius: 0.5rem;
     transition: all 0.2s;
     border-bottom: 1px solid #f8fafc;
 }

 .drawer-link:last-child {
     border-bottom: none;
 }

 .drawer-link i {
     color: var(--primary-green);
     width: 20px;
     text-align: center;
 }

 .drawer-link:hover,
 .drawer-link.active {
     background: #f0fdf4;
     color: var(--primary-green);
     padding-left: 1.25rem;
 }

 /* --- Mobile Off-Canvas Menu (HT Bazar Style) --- */
 .mobile-menu-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 2000;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .mobile-menu-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .mobile-menu-sidebar {
     position: fixed;
     top: 0;
     left: 0;
     width: 85%;
     max-width: 320px;
     height: 100%;
     background: white;
     z-index: 2001;
     transform: translateX(-100%);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
 }

 .mobile-menu-sidebar.active {
     transform: translateX(0);
 }

 .mobile-menu-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem 1.5rem;
     border-bottom: 1px solid #f1f5f9;
 }

 .drawer-logo {
     display: flex;
     align-items: center;
     gap: 0.75rem;
 }

 .close-menu-btn {
     background: none;
     border: none;
     font-size: 1.5rem;
     color: #db2777;
     /* Set to Pink to match screenshot */
     /* Match typical X color or use plain black */
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
 }

 .mobile-menu-links {
     padding: 1rem 0;
     overflow-y: auto;
     flex: 1;
 }

 .drawer-link-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem 1.5rem;
     text-decoration: none;
     color: #1f2937;
     /* Dark gray/Black */
     font-weight: 600;
     font-size: 1rem;
     border-bottom: 1px solid #f3f4f6;
     transition: background 0.2s;
 }

 .drawer-link-item:hover,
 .drawer-link-item.active {
     background: #f9fafb;
     color: var(--primary-green);
 }

 /* --- Testimonials Section (Compact Mobile) --- */
 .testimonials-section {
     padding: 2rem 0;
     background: linear-gradient(180deg, #f9fafc 0%, #ffffff 100%);
 }

 .testimonials-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
 }

 .testimonial-card {
     background: white;
     padding: 2rem;
     border-radius: 1rem;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     border: 1px solid #e5e7eb;
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .testimonial-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }

 .testimonial-header {
     display: flex;
     gap: 0.75rem;
     margin-bottom: 1rem;
 }

 .testimonial-text {
     color: #4b5563;
     line-height: 1.6;
     font-style: italic;
     margin: 0;
 }

 @media (max-width: 768px) {
     .testimonials-section {
         padding: 0 !important;
     }

     .testimonials-section .container {
         padding-right: 0 !important;
     }

     .testimonials-grid {
         display: flex;
         overflow-x: auto;
         gap: 1rem;
         padding: 0.5rem 1rem 1.5rem 1rem;
         scroll-snap-type: x mandatory;
         scrollbar-width: none;
         margin-right: -1rem;
     }

     .testimonials-grid::-webkit-scrollbar {
         display: none;
     }

     .testimonial-card {
         min-width: 85%;
         scroll-snap-align: center;
         padding: 1rem;
         border-radius: 0.75rem;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     }

     .testimonial-text {
         font-size: 0.9rem;
         line-height: 1.4;
     }
 }

 /* Specific Override for Testimonials Title Spacing on Mobile */
 @media (max-width: 768px) {
     .testimonials-section .section-title {
         margin-top: 0.25rem !important;
     }
 }

 /* Fix New Collection Section Overlap on Mobile */
 @media (max-width: 768px) {
     #new-collection {
         margin-top: 0 !important;
         padding-top: 2rem !important;
     }
 }

 /* --- Footer Mobile Accordion & Styles --- */
 @media (max-width: 768px) {

     /* Align everything to the left as requested */
     .footer {
         text-align: left !important;
     }

     .footer-col {
         text-align: left !important;
         margin-bottom: 0 !important;
         padding-bottom: 0 !important;
     }

     .footer-col p {
         text-align: left !important;
     }

     .footer-contact p {
         justify-content: flex-start !important;
         gap: 1rem;
         margin-bottom: 0.5rem;
     }

     .footer-contact i {
         width: 25px;
         text-align: center;
         display: inline-block;
     }

     .footer .logo-section {
         text-align: left !important;
         display: flex !important;
         flex-direction: column !important;
         align-items: flex-start !important;
         margin-bottom: 1rem !important;
     }

     .footer .brand-name {
         color: white !important;
         font-size: 1.25rem !important;
         font-weight: 700 !important;
         display: block !important;
         margin-bottom: 0.75rem !important;
     }

     .footer-bottom p {
         text-align: center !important;
         /* Keep copyright centered typically */
     }

     /* Accordion Header */
     .footer-heading {
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
         margin: 0 !important;
         padding: 0.5rem 0 !important;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         font-size: 0.95rem;
         user-select: none;
     }

     /* Hide content by default */
     .footer-links,
     .footer-contact {
         display: none;
         padding-top: 0.5rem;
         padding-bottom: 1rem;
         padding-left: 0.5rem;
     }

     /* Active State (Expanded) */
     /* Active State (Expanded) */
     .footer-links.active,
     .footer-contact.active {
         display: block;
         animation: slideDown 0.3s ease;
     }

     .footer-links a {
         display: block;
         padding: 0.5rem 0;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         color: #cbd5e1;
         text-decoration: none;
     }

     /* Icon Rotation */
     .icon-arrow {
         transition: transform 0.3s ease;
         font-size: 0.8rem;
         color: #94a3b8;
     }

     .footer-heading.active .icon-arrow {
         transform: rotate(90deg);
         color: #fff;
     }

     @keyframes slideDown {
         from {
             opacity: 0;
             transform: translateY(-5px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }
 }

 /* Desktop: Hide Switch Icon */
 @media (min-width: 769px) {
     .icon-arrow {
         display: none;
     }

     .footer-heading {
         cursor: default;
     }
 }

 /* Wishlist Button Active State */
 .ali-wish-btn.active i {
     color: #ef4444 !important;
 }

 .ali-wish-btn.active {
     border-color: #ef4444 !important;
     background: #fff0f0 !important;
 }