:root {
            --black: #1a1a1a;
            --dark-grey: #2d2d2d;
            --grey: #4a4a4a;
            --light-grey: #e0e0e0;
            --earth: #8c7a6b;
            --earth-light: #c4b6a9;
            --accent: #d4af37;
            --white: #ffffff;
            --success: #4caf50;
            --error: #ff5252;
            --dark-green: #006400;
            --navy-blue: #000080;
            --maroon: #800000;
            --discount: #ff3d3d;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background-color: #f8f8f8;
            color: var(--dark-grey);
            overflow-x: hidden;
        }
        
        /* Header & Navigation */
        header {
            background-color: var(--black);
            color: var(--white);
            padding: 1rem 5%;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: transform 0.3s ease;
        }

        /* Only apply header hiding on desktop */
        /* Apply header hiding on all devices */
header.hide {
    transform: translateY(-100%);
}

/* Ensure smooth transition for the slide effect */
header {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}
        
        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            position: relative;
            display: inline-block;
            cursor: pointer;
        }
        
        nav ul {
            display: flex;
            list-style: none;
            gap: 2rem;
        }
        
        nav a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
        }
        
        nav a:hover {
            color: var(--accent);
        }
        
        nav a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--accent);
            transition: width 0.3s;
        }
        
        nav a:hover::after {
            width: 100%;
        }
        
        .nav-icons {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }
        
        .cart-icon {
            position: relative;
            cursor: pointer;
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--accent);
            color: var(--black);
            font-size: 0.65rem;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 700;
            border: 2px solid var(--black);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .nav-icons i {
            font-size: 1.2rem;
            cursor: pointer;
            transition: color 0.3s;
        }
        
        .nav-icons i:hover {
            color: var(--accent);
        }
        
        .mobile-menu-btn {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://i.postimg.cc/BnbBmvfY/20250704-123615.jpg');
            background-size: cover;
            background-position: center;
            height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--white);
            padding: 0 5%;
        }
        
        .hero-content {
            max-width: 800px;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            font-weight: 700;
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--accent);
            color: var(--black);
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }
        
        .btn:hover {
            background-color: var(--white);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        /* Featured Products */
        .featured-products, .collections-page {
            padding: 5rem 5%;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--black);
            display: inline-block;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 3px;
            background-color: var(--accent);
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
        }
        
        .product-card {
            background: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
        }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        
        .product-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background: var(--accent);
            color: var(--black);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 2;
        }

        .discount-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--discount);
            color: var(--white);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 2;
        }
        
        .product-img {
            position: relative;
            height: 280px;
            overflow: hidden;
        }
        
        .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .product-card:hover .product-img img {
            transform: scale(1.05);
        }
        
        .quick-view {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.7);
            color: var(--white);
            text-align: center;
            padding: 10px;
            transform: translateY(100%);
            transition: transform 0.3s;
        }
        
        .product-card:hover .quick-view {
            transform: translateY(0);
        }
        
        .product-info {
            padding: 1.5rem;
        }
        
        .product-info h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
        
        .price-container {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }
        
        .original-price {
            font-size: 1rem;
            color: var(--grey);
            text-decoration: line-through;
        }
        
        .discounted-price {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--black);
        }
        
        .discount-percentage {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--discount);
            background: rgba(255, 61, 61, 0.1);
            padding: 3px 8px;
            border-radius: 4px;
        }
        
        .colors-link {
            display: block;
            color: var(--accent);
            font-weight: 500;
            margin-bottom: 1rem;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .colors-link:hover {
            color: var(--black);
            text-decoration: underline;
        }
        
        .product-actions {
            display: flex;
            gap: 0.5rem;
        }
        
        .add-to-cart, .checkout-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .add-to-cart {
            background: var(--black);
            color: var(--white);
        }
        
        .add-to-cart:hover {
            background: var(--grey);
        }
        
        .checkout-btn {
            background: var(--accent);
            color: var(--black);
        }
        
        .checkout-btn:hover {
            background: var(--earth-light);
        }
        
        /* Product Page */
        .product-page {
            display: none;
            padding: 5rem 5%;
        }
        
        .product-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            background: var(--white);
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        
        .product-gallery {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        /* The .main-image rule is already correct, we add the new styles below */

        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.45);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent; /* Disables tap highlight on mobile */
        }

        .prev-arrow {
            left: 15px;
        }

        .next-arrow {
            right: 15px;
        }

        .slider-arrow:hover {
            background: rgba(0, 0, 0, 0.6); /* Subtle hover feedback */
        }

        .slider-arrow:active {
            background: var(--accent); /* Changes color only on click */
            transform: translateY(-50%) scale(0.95); /* Adds a "press" effect */
        }

        .dots-container {
            position: absolute;
            bottom: 25px;         /* Lifted slightly higher off the edge */
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
            z-index: 10;
            padding: 0;
            background-color: transparent; /* Removed the dark background box for a premium look */
            transition: all 0.3s ease;
        }

        /* Hide the container if it has no dots inside */
        .dots-container:empty {
            display: none;
        }

        .dot {
            height: 6px;
            width: 6px;
            margin: 0 4px;
            background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent white */
            border-radius: 50%;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth snap transition */
            box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Ensures dots are visible even on light images */
            cursor: pointer;
        }

        .dot.active {
            width: 24px; /* Stretches it into a pill shape */
            border-radius: 4px;
            background-color: #ffffff; /* Solid bright white */
        }

        /* Responsive adjustments for the gallery */
        @media (max-width: 768px) {
            .main-image {
                height: 350px;
            }
            
            .slider-arrow {
                width: 35px;
                height: 35px;
                font-size: 1rem;
            }
            
            .product-page .thumbnails {
              display: none; /* Explicitly hide any remaining old thumbnail styles */
            }
        }
        
        .main-image {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            height: 500px;
        }
        
        .main-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.3s;
        }
        
        .zoom-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            display: none;
            justify-content: center;
            align-items: center;
            color: var(--white);
            font-size: 1.5rem;
        }
        
        .main-image:hover .zoom-overlay {
            display: flex;
        }
        
        .image-loader {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        
        .image-loader .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0,0,0,0.1);
            border-top: 4px solid var(--accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        .product-details h1 {
            font-size: 1.8rem;
            margin-bottom: 0.8rem;
            color: var(--black);
            font-weight: 600;
        }
        
        .product-price-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }
        
        .product-original-price {
            font-size: 1.4rem;
            color: var(--grey);
            text-decoration: line-through;
        }
        
        .product-discounted-price {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--black);
        }
        
        .product-discount-percentage {
            font-size: 1rem;
            font-weight: 600;
            color: var(--discount);
            background: rgba(255, 61, 61, 0.1);
            padding: 5px 10px;
            border-radius: 4px;
        }
        
        /* Product Description Accordion */
        .product-description-accordion {
            border-bottom: 1px solid var(--light-grey);
            margin: 2rem 0 0 0; /* IMPORTANT: This only applies margin to the TOP of the first accordion */
            overflow: hidden;
        }

        /* NEW rule to connect adjacent accordions seamlessly */
        .product-description-accordion + .product-description-accordion {
            margin-top: 0; /* Removes the gap */
            border-top: 1px solid var(--light-grey); /* Adds a separator line between them */
        }

        .accordion-header {
            display: flex;
            align-items: center;
            padding: 1rem 0.5rem;
            cursor: pointer;
            gap: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark-grey);
            user-select: none; /* Prevents text selection on click */
            -webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
        }

        .accordion-header i:first-of-type {
            color: var(--grey);
        }
        
        .accordion-header .arrow-icon {
            margin-left: auto;
            transition: transform 0.4s ease;
            color: var(--grey);
        }
        
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out; /* Animation for expand/collapse */
        }
        
        /* Active State when Accordion is open */
        .product-description-accordion.active .accordion-content {
            max-height: 500px; /* A value larger than the content will ever be */
        }
        
        .product-description-accordion.active .accordion-header .arrow-icon {
            transform: rotate(180deg);
        }
        
        /* Styles for the description paragraph inside the accordion */
        .accordion-content .description {
            padding: 0 0.5rem 1rem 0.5rem;
            margin: 0;
            line-height: 1.7;
            color: var(--grey);
            font-size: 0.95rem;
        }
        
        .option-group {
            margin-bottom: 1.5rem;
        }
        
        .option-group h3 {
            font-size: 1.1rem;
            margin-bottom: 0.8rem;
            color: var(--black);
        }
        
        .size-options {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
        
        .size-option {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid var(--light-grey);
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .size-option:hover, .size-option.active {
            border-color: var(--black);
            background: var(--black);
            color: var(--white);
        }
        
        .color-options {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
        
        .color-option-large {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s;
            position: relative;
        }
        
        .color-option-large:hover, .color-option-large.active {
            transform: scale(1.1);
        }
        
        .color-option-large.active::after {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border: 2px solid var(--accent);
            border-radius: 50%;
        }
        
        .quantity-selector {
            display:flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .quantity-btn {
            width: 40px;
            height: 40px;
            background: var(--light-grey);
            border: none;
            border-radius: 5px;
            font-size: 1.2rem;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        /* .quantity-btn:hover {
            background: var(--grey);
            color: var(--white);
        } */
        
        .quantity-input {
            width: 60px;
            height: 40px;
            text-align: center;
            border: 2px solid var(--light-grey);
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 500;
        }
        
        .actions {
            display: flex;
            gap: 1rem;
        }
        
        .btn-buy {
            flex: 1;
            background: var(--accent);
            color: var(--black);
            font-weight: 600;
        }
        
        .btn-cart {
            flex: 1;
            background: var(--black);
            color: var(--white);
        }

        /* Reduces the large inner padding on the original product page buttons */
        .product-details .actions .btn {
            padding: 12px 5px;
        }
        
        .size-guide {
            margin-top: 1.5rem;
            color: var(--grey);
            font-size: 0.9rem;
            cursor: pointer;
            text-decoration: underline;
        }
        
        /* Cart Page */
        .cart-page {
            display: none;
            padding: 5rem 5%;
        }
        
        .cart-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .cart-title {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .cart-title h2 {
            font-size: 2.5rem;
            color: var(--black);
            display: inline-block;
        }
        
        .cart-title h2::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 3px;
            background-color: var(--accent);
        }
        
        .cart-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
        }
        
        .cart-items {
            background: var(--white);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            padding: 2rem;
        }
        
        .cart-item {
            display: grid;
            grid-template-columns: 100px 1fr auto;
            gap: 1.5rem;
            padding: 1.5rem 0;
            border-bottom: 1px solid var(--light-grey);
        }
        
        .cart-item:last-child {
            border-bottom: none;
        }
        
        .cart-item-img {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .cart-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .cart-item-details {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .cart-item-details h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
        
        .cart-item-details .color {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        
        .cart-item-details .size {
            font-size: 0.9rem;
            color: var(--grey);
        }
        
        .cart-item-price {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--black);
        }
        
        .cart-item-actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }
        
        .cart-item-actions .quantity {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .cart-item-actions .quantity-btn {
            width: 30px;
            height: 30px;
            font-size: 1rem;
        }
        
        .cart-item-actions .quantity-input {
            width: 40px;
            height: 30px;
            font-size: 0.9rem;
        }
        
        .remove-item {
            background: none;
            border: none;
            color: var(--error);
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.3s;
        }
        
        .remove-item:hover {
            color: #e00000;
        }
        
        .cart-summary {
            background: var(--white);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            padding: 2rem;
            height: fit-content;
            position: sticky;
            top: 100px;
        }
        
        .cart-summary h3 {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--black);
        }
        
        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--light-grey);
        }
        
        .discount-label {
            color: var(--success);
            font-weight: 600;
        }
        
        .summary-total {
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
            padding-top: 1rem;
            font-weight: 700;
            font-size: 1.3rem;
            color: var(--black);
        }
        
        .shipping-timer {
            background: #f0f7ff;
            border-radius: 8px;
            padding: 15px;
            margin-top: 1.5rem;
            text-align: center;
            border: 1px dashed var(--accent);
        }
        
        .shipping-timer h4 {
            margin-bottom: 10px;
            color: var(--black);
        }
        
        .timer-display {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--success);
            display: flex;
            justify-content: center;
            gap: 5px;
        }
        
        .timer-unit {
            background: var(--white);
            padding: 5px 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .empty-cart {
            text-align: center;
            padding: 4rem 0;
        }
        
        .empty-cart i {
            font-size: 4rem;
            color: var(--light-grey);
            margin-bottom: 1.5rem;
        }
        
        .empty-cart h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--black);
        }
        
        .empty-cart p {
            margin-bottom: 2rem;
            color: var(--grey);
        }
        
        /* Order Form */
        .order-form-page {
            display: none;
            padding: 5rem 5%;
        }
        
        .form-container {
            max-width: 700px;
            margin: 0 auto;
            background: var(--white);
            padding: 1rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        
        .form-container h1 {
            text-align: center;
            margin-bottom: 2rem;
            color: var(--black);
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--dark-grey);
        }
        
        .form-group input, 
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--light-grey);
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus, 
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: var(--accent);
            outline: none;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        
        .order-summary {
            background-color: var(--white);
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        /* Specific Modern Styles for Checkout Only */
        .checkout-specific .checkout-product-card {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }

        .checkout-specific .checkout-product-img {
            width: 65px;
            height: 80px;
            flex-shrink: 0;
            border-radius: 6px;
            overflow: hidden;
        }

        .checkout-specific .checkout-product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .checkout-specific .checkout-product-name {
            font-size: 0.9rem;
            font-weight: 600;
        }

        .checkout-specific .checkout-product-meta {
            font-size: 0.75rem;
            color: #666;
            margin: 2px 0;
        }

        .checkout-specific .checkout-product-qty {
            font-size: 0.75rem;
            background: #f0f0f0;
            padding: 2px 8px;
            border-radius: 4px;
        }

        /* Tighten the Subtotal, Shipping, and Saved bars */
        .checkout-specific .summary-item {
            margin-bottom: 0.4rem !important; /* Reduced space */
            font-size: 0.9rem;
        }

        .checkout-specific .discount-text {
            background: rgba(76, 175, 80, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        .order-summary h3 {
            margin-bottom: 1rem;
            color: var(--black);
            border-bottom: 1px solid var(--light-grey);
            padding-bottom: 0.5rem;
        }
        
        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.8rem;
            color: var(--grey);
        }
        
        .summary-total {
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--light-grey);
            font-weight: 700;
            color: var(--black);
            font-size: 1.2rem;
        }
        
        .btn-submit {
            width: 100%;
            padding: 15px;
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .loader {
            display: none;
            text-align: center;
            margin-top: 1rem;
        }
        
        .loader-spinner {
            border: 4px solid rgba(0,0,0,0.1);
            border-top: 4px solid var(--accent);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Thank You Page */
        .thank-you-page {
            display: none;
            padding: 5rem 5%;
            text-align: center;
        }
        
        .thank-you-container {
            max-width: 700px;
            margin: 0 auto;
            background: var(--white);
            padding: 3rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        
        .thank-you-container i {
            font-size: 5rem;
            color: var(--success);
            margin-bottom: 1.5rem;
        }
        
        .thank-you-container h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--black);
        }
        
        .thank-you-container p {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: var(--grey);
        }
        
        .order-id {
            font-weight: 700;
            color: var(--accent);
            font-size: 1.3rem;
        }
        
        .delivery-time {
            background: var(--light-grey);
            padding: 15px;
            border-radius: 10px;
            margin: 2rem 0;
            font-weight: 500;
        }
        
        /* Track Order Page */
        .track-order-page {
            display: none;
            padding: 5rem 5%;
        }
        
        .track-container {
            max-width: 700px;
            margin: 0 auto;
            background: var(--white);
            padding: 2.5rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        
        .track-container h1 {
            text-align: center;
            margin-bottom: 2rem;
            color: var(--black);
        }
        
        .track-form {
            margin-bottom: 2rem;
        }
        
        .order-status {
            display: none;
            margin-top: 2rem;
            border-top: 1px solid var(--light-grey);
            padding-top: 2rem;
        }
        
        .status-timeline {
            position: relative;
            margin: 2rem 0;
            padding-left: 2rem;
        }
        
        .status-timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 2px;
            background: var(--light-grey);
        }
        
        .status-step {
            position: relative;
            margin-bottom: 2rem;
            padding-left: 2rem;
        }
        
        .status-step::before {
            content: '';
            position: absolute;
            left: -9px;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--light-grey);
            border: 3px solid var(--white);
        }
        
        .status-step.active::before {
            background: var(--accent);
        }
        
        .status-step.completed::before {
            background: var(--success);
        }
        
        .status-step h4 {
            margin-bottom: 0.5rem;
            color: var(--black);
        }
        
        .status-step p {
            color: var(--grey);
            font-size: 0.9rem;
        }
        
        /* Footer */
        footer {
            background: var(--black);
            color: var(--white);
            padding: 4rem 5% 2rem;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        
        .footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
            position: relative;
            display: inline-block;
        }
        
        .footer-col h3::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 40px;
            height: 3px;
            background: var(--accent);
        }
        
        .footer-col ul {
            list-style: none;
        }
        
        .footer-col ul li {
            margin-bottom: 0.8rem;
        }
        
        .footer-col ul li a {
            color: var(--light-grey);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-col ul li a:hover {
            color: var(--accent);
        }
        
        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: var(--dark-grey);
            color: var(--white);
            border-radius: 50%;
            transition: all 0.3s;
        }
        
        .social-links a:hover {
            background: var(--accent);
            color: var(--black);
            transform: translateY(-3px);
        }
        
        .copyright {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid var(--dark-grey);
            color: var(--light-grey);
            font-size: 0.9rem;
        }
        
        /* Mobile Cart Button */
        .mobile-cart-btn {
            position: fixed;
            bottom: 105px;
            right: 20px;
            background: var(--accent);
            color: var(--black);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 90;
            cursor: pointer;
            transition: transform 0.3s;
            display: none; /* Hidden by default */
        }

        .mobile-cart-btn:hover {
            transform: scale(1.05);
        }

        .mobile-cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: var(--black);
            color: var(--accent);
            font-size: 0.65rem;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 700;
            border: 2px solid var(--accent);
        }

        /* Always show on mobile */
        @media (max-width: 768px) {
            .mobile-cart-btn {
                display: flex;
            }
            
            /* Disable header hiding on mobile */
            /* header.hide {
                transform: none !important;
            } */
        }
        
        /* Responsive Design */
        @media (max-width: 992px) {
            .product-container {
                grid-template-columns: 1fr;
            }
            
            .hero h1 {
                font-size: 2.8rem;
            }
            
            .cart-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }
            
            nav {
                position: fixed;
                top: 70px;
                right: -100%;
                background: var(--black);
                width: 80%;
                height: calc(100vh - 70px);
                padding: 2rem;
                transition: right 0.3s;
                z-index: 99;
            }
            
            nav.active {
                right: 0;
            }
            
            nav ul {
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .nav-icons {
                display: none;
            }
            
            .hero {
                height: 70vh;
            }
            
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .cart-item {
                grid-template-columns: 80px 1fr;
                grid-template-rows: auto auto;
            }
            
            .cart-item-actions {
                grid-column: span 2;
                flex-direction: row;
                justify-content: space-between;
                margin-top: 1rem;
            }
        }
        
        @media (max-width: 576px) {
            .hero {
                height: 60vh;
            }
            
            .hero h1 {
                font-size: 1.8rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .btn {
                padding: 10px 25px;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .thank-you-container {
                padding: 2rem 1.5rem;
            }
            
            .thank-you-container h1 {
                font-size: 2rem;
            }
            
            .product-actions {
                flex-direction: column;
            }
        }
        
        /* Animation for form submission */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.6s ease-out forwards;
        }
        
        /* Color variables */
        .color-black { background-color: #1a1a1a; }
        .color-white { background-color: #ffffff; border: 1px solid #e0e0e0; }
        .color-dark-green { background-color: #006400; }
        .color-navy-blue { background-color: #000080; }
        .color-maroon { background-color: #800000; }

        /* Payment css*/
        .razorpay-container {
        font-family: 'Poppins', sans-serif !important;
        }

        .razorpay-container button {
            background-color: var(--accent) !important;
            color: var(--black) !important;
            border-radius: 30px !important;
            padding: 12px 30px !important;
            transition: all 0.3s !important;
        }

        .razorpay-container button:hover {
            background-color: var(--white) !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
        }

        .order-summary .summary-item {
            padding-bottom: 0.8rem;
            margin-bottom: 0.8rem;
            border-bottom: 1px solid var(--light-grey);
        }

        .order-summary .order-summary:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .return-policy {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 1rem 0;
            padding: 8px 12px;
            background-color: rgba(76, 175, 80, 0.1);
            border-radius: 4px;
            color: var(--success);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .return-policy i {
            color: var(--success);
        }

       /* Related Products Section - Enhanced with Professional Scrollbar */
        .related-products {
            margin-top: 4rem;
            padding: 0 5%;
        }

        .related-products h2 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--black);
            position: relative;
            display: inline-block;
            font-weight: 600;
            letter-spacing: -0.5px;
        }

        .related-products h2::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 60px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
        }

        .related-products-grid {
            display: flex;
            overflow-x: auto;
            gap: 1.8rem;
            padding: 1.5rem 0.5rem 2.5rem;
            scrollbar-width: thin;
            scrollbar-color: var(--accent) rgba(0,0,0,0.08);
        }

        /* Professional scrollbar styling */
        .related-products-grid::-webkit-scrollbar {
            height: 8px;
        }

        .related-products-grid::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.04);
            border-radius: 8px;
            margin: 0 10%;
        }

        .related-products-grid::-webkit-scrollbar-thumb {
            background: var(--accent);
            border-radius: 8px;
            border: 2px solid rgba(255,255,255,0.5);
            background-clip: padding-box;
        }

        .related-products-grid::-webkit-scrollbar-thumb:hover {
            background: var(--accent-dark);
        }

        /* Firefox scrollbar */
        .related-products-grid {
            scrollbar-width: thin;
            scrollbar-color: var(--accent) rgba(0,0,0,0.08);
        }

        .related-product-card {
            flex: 0 0 250px;
            background: var(--white);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(0,0,0,0.08);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(0,0,0,0.05);
            position: relative;
        }

        .related-product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.12);
        }

        .related-product-img {
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .related-product-img::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.1) 100%);
            z-index: 1;
        }

        .related-product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s ease;
        }

        .related-product-card:hover .related-product-img img {
            transform: scale(1.08);
        }

        .related-product-info {
            padding: 1.2rem;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .related-product-info h3 {
            font-size: 1.05rem;
            margin-bottom: 0.6rem;
            color: var(--dark-grey);
            line-height: 1.4;
            font-weight: 600;
            min-height: 44px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .related-product-info .price {
            font-weight: 700;
            color: var(--black);
            margin-bottom: 0.8rem;
            font-size: 1.1rem;
            letter-spacing: -0.5px;
        }

        .related-view-btn {
            display: block;
            width: 100%;
            padding: 10px;
            background: var(--black);
            color: var(--white);
            text-align: center;
            border-radius: 6px;
            text-decoration: none;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            font-weight: 500;
            letter-spacing: 0.3px;
            margin-top: auto;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .related-view-btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: var(--accent);
            transition: all 0.4s ease;
            z-index: -1;
        }

        .related-view-btn:hover {
            background: transparent;
            color: var(--white);
            transform: translateY(-2px);
        }

        .related-view-btn:hover::after {
            width: 100%;
        }

        @media (max-width: 768px) {
            .related-product-card {
                flex: 0 0 220px;
            }
            
            .related-product-img {
                height: 180px;
            }
            
            .related-products h2 {
                font-size: 1.6rem;
            }
            
            .related-products-grid {
                gap: 1.2rem;
            }
            
            /* Adjust scrollbar for mobile */
            .related-products-grid::-webkit-scrollbar {
                height: 6px;
            }
        }

        @media (max-width: 480px) {
            .related-product-card {
                flex: 0 0 200px;
            }
            
            .related-product-img {
                height: 160px;
            }
            
            .related-product-info h3 {
                font-size: 0.95rem;
                min-height: 40px;
            }
            
            .related-view-btn {
                padding: 8px;
                font-size: 0.9rem;
            }
            
            .related-products-grid {
                padding-bottom: 2rem;
            }
        }

        /* Discount styling */
        .discount-label {
            color: var(--success);
            font-weight: 600;
        }

        .cart-item-price-container {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 0.5rem;
        }
        
        .cart-item-original-price {
            text-decoration: line-through;
            color: var(--grey);
            font-size: 0.9rem;
        }
        
        .cart-item-final-price {
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--black);
        }
        
        .cart-item-discount {
            color: var(--discount);
            font-size: 0.9rem;
        }
        :root {
            --black: #1a1a1a;
            --dark-grey: #2d2d2d;
            --grey: #4a4a4a;
            --light-grey: #e0e0e0;
            --earth: #8c7a6b;
            --earth-light: #c4b6a9;
            --accent: #d4af37;
            --accent-dark: #b8972e;
            --white: #ffffff;
            --success: #4caf50;
            --error: #ff5252;
            --dark-green: #006400;
            --navy-blue: #000080;
            --maroon: #800000;
            --discount: #ff3d3d;
            --bg-light: #f9f9f9;
            --card-shadow: 0 10px 30px rgba(0,0,0,0.08);
            --transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background-color: var(--bg-light);
            color: var(--dark-grey);
            overflow-x: hidden;
            line-height: 1.6;
        }
        
        /* Header & Navigation */
        header {
            background-color: var(--black);
            color: var(--white);
            padding: 1.2rem 5%;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            position: relative;
            display: inline-block;
            cursor: pointer;
            letter-spacing: 1px;
        }
        
        .logo span {
            color: var(--accent);
        }
        
        nav ul {
            display: flex;
            list-style: none;
            gap: 2.2rem;
        }
        
        nav a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            position: relative;
            font-size: 1.05rem;
        }
        
        nav a:hover {
            color: var(--accent);
        }
        
        nav a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--accent);
            transition: var(--transition);
        }
        
        nav a:hover::after {
            width: 100%;
        }
        
        .nav-icons {
            display: flex;
            gap: 1.8rem;
            align-items: center;
        }
        
        .cart-icon {
            position: relative;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .cart-icon:hover {
            transform: translateY(-2px);
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--accent);
            color: var(--black);
            font-size: 0.7rem;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 700;
            border: 2px solid var(--black);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        
        .nav-icons i {
            font-size: 1.3rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .nav-icons i:hover {
            color: var(--accent);
            transform: translateY(-2px);
        }
        
        .mobile-menu-btn {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .mobile-menu-btn:hover {
            color: var(--accent);
        }
        
        /* Hero Section */
        .hero {
            background: linear-gradient(105deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.75) 100%), 
            url('https://i.postimg.cc/BnbBmvfY/20250704-123615.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--white);
            padding: 0 5%;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--accent);
            transform: translateY(-100%);
            animation: slideIn 1.2s 0.3s forwards;
        }
        
        .hero-content {
            max-width: 900px;
            transform: translateY(30px);
            opacity: 0;
            animation: fadeUp 0.8s 0.5s forwards;
        }
        
        .hero h1 {
            font-size: 3.8rem;
            margin-bottom: 1.5rem;
            font-weight: 800;
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .hero h1 span {
            color: var(--accent);
            position: relative;
        }
        
        .hero h1 span::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--accent);
            animation: underlineGrow 1.2s 1.2s forwards;
            transform: scaleX(0);
            transform-origin: left;
        }
        
        .hero p {
            font-size: 1.3rem;
            margin-bottom: 3rem;
            opacity: 0.9;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .btn {
            display: inline-block;
            padding: 14px 38px;
            background-color: var(--accent);
            color: var(--black);
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            font-weight: 700;
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--accent-dark);
            z-index: -1;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.4s ease;
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
        }
        
        .btn:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }
        
        .btn:active {
            transform: translateY(-2px);
        }
        
        /* Featured Products */
        .featured-products {
            padding: 6rem 5% 3rem; /* Reduced bottom padding from 6rem to 3rem */
        }
        .collections-page {
            padding: 6rem 5%; /* Kept original padding for collections page */
        }
        .section-title {
            text-align: center;
            margin-bottom: 4rem;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2.8rem;
            color: var(--black);
            display: inline-block;
            position: relative;
            padding-bottom: 15px;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--accent);
            border-radius: 2px;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2.5rem;
        }
        
        .product-card {
            background: var(--white);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            cursor: pointer;
        }
        
        .product-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.12);
        }
        
        .product-badge {
    position: absolute;
    top: 20px;
    left: -35px;
    background: var(--accent);
    color: var(--black);
    padding: 5px 0;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 2;
    width: 130px;
    text-align: center;
    transform: rotate(-45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

        .discount-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--discount);
            color: var(--white);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 700;
            z-index: 2;
            letter-spacing: 0.5px;
        }
        
        .product-img {
            position: relative;
            height: 320px;
            overflow: hidden;
        }
        
        .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
        
        .product-card:hover .product-img img {
            transform: scale(1.08);
        }
        
        .quick-view {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.8);
            color: var(--white);
            text-align: center;
            padding: 14px;
            transform: translateY(100%);
            transition: var(--transition);
            font-weight: 600;
            cursor: pointer;
            z-index: 2;
        }
        
        .product-card:hover .quick-view {
            transform: translateY(0);
        }
        
        .product-info {
            padding: 1.8rem;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        
        .product-info h3 {
            font-size: 1.3rem;
            margin-bottom: 0.8rem;
            color: var(--black);
            font-weight: 600;
            line-height: 1.3;
        }
        
        .price-container {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.2rem;
            flex-wrap: wrap;
        }
        
        .original-price {
            font-size: 1.1rem;
            color: var(--grey);
            text-decoration: line-through;
        }
        
        .discounted-price {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--black);
        }
        
        .discount-percentage {
            font-size: 1rem;
            font-weight: 700;
            color: var(--discount);
            background: rgba(255, 61, 61, 0.1);
            padding: 5px 12px;
            border-radius: 20px;
        }
        
        .colors-link {
            display: block;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 1.5rem;
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .colors-link:hover {
            color: var(--accent-dark);
        }
        
        .product-actions {
            display: flex;
            gap: 0.8rem;
            margin-top: auto;
        }
        
        .add-to-cart, .checkout-btn {
            flex: 1;
            padding: 4.5px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .add-to-cart {
            background: var(--black);
            color: var(--white);
        }
        
        .add-to-cart:hover {
            background: var(--grey);
            transform: translateY(-3px);
        }
        
        .checkout-btn {
            background: var(--accent);
            color: var(--black);
        }
        
        .checkout-btn:hover {
            background: var(--accent-dark);
            transform: translateY(-3px);
        }
        
        /* Categories Section */
        .categories {
            padding: 6rem 5%;
            background: linear-gradient(to bottom, #f8f8f8, #ffffff);
        }
        
        .categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
        }
        
        .category-card {
            background: var(--white);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            position: relative;
            height: 280px;
        }
        
        .category-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        }
        
        .category-img {
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .category-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
        
        .category-card:hover .category-img img {
            transform: scale(1.1);
        }
        
        .category-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            display: flex;
            align-items: flex-end;
            padding: 2rem;
        }
        
        .category-title {
            color: var(--white);
            font-size: 1.6rem;
            font-weight: 700;
            position: relative;
            padding-bottom: 10px;
            width: 100%;
        }
        
        .category-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: var(--accent);
        }
        
        /* Benefits Section */
        .benefits {
            padding: 6rem 5%;
            background: var(--black);
            color: var(--white);
        }
        
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
        }
        
        .benefit-card {
            text-align: center;
            padding: 0.5rem;
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            transition: var(--transition);
        }
        
        /* .benefit-card:hover {
            transform: translateY(-10px);
            background: rgba(255,255,255,0.08);
        } */
        
        .benefit-icon {
            font-size: 3rem;
            color: var(--accent);
            margin-bottom: 1.5rem;
        }
        
        .benefit-title {
            font-size: 1.4rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }
        
        .benefit-desc {
            opacity: 0.8;
        }
        
        /* Footer */
        footer {
            background: var(--black);
            color: var(--white);
            padding: 5rem 5% 2rem;
            position: relative;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
            margin-bottom: 3rem;
        }
        
        .footer-col h3 {
            font-size: 1.5rem;
            margin-bottom: 1.8rem;
            position: relative;
            display: inline-block;
            padding-bottom: 10px;
        }
        
        .footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--accent);
        }
        
        .footer-col p {
            opacity: 0.8;
            margin-bottom: 1.5rem;
            max-width: 300px;
        }
        
        .footer-col ul {
            list-style: none;
        }
        
        .footer-col ul li {
            margin-bottom: 1rem;
        }
        
        .footer-col ul li a {
            color: var(--light-grey);
            text-decoration: none;
            transition: var(--transition);
            display: block;
            padding: 5px 0;
        }
        
        .footer-col ul li a:hover {
            color: var(--accent);
            transform: translateX(5px);
        }
        
        .social-links {
            display: flex;
            gap: 1.2rem;
            margin-top: 1.5rem;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background: rgba(255,255,255,0.1);
            color: var(--white);
            border-radius: 50%;
            transition: var(--transition);
            font-size: 1.2rem;
        }
        
        .social-links a:hover {
            background: var(--accent);
            color: var(--black);
            transform: translateY(-5px);
        }
        
        .copyright {
            text-align: center;
            padding-top: 3rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: var(--light-grey);
            font-size: 0.95rem;
            opacity: 0.7;
        }
        
        /* Animations */
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes slideIn {
            from {
                transform: translateY(-100%);
            }
            to {
                transform: translateY(0);
            }
        }
        
        @keyframes underlineGrow {
            from {
                transform: scaleX(0);
            }
            to {
                transform: scaleX(1);
            }
        }
        
        /* Responsive Design */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 3.2rem;
            }
            
            .section-title h2 {
                font-size: 2.4rem;
            }
        }
        
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }
            
            nav {
                position: fixed;
                top: 80px;
                right: -100%;
                background: var(--black);
                width: 280px;
                height: calc(100vh - 80px);
                padding: 2rem;
                transition: right 0.4s ease;
                z-index: 99;
            }
            
            nav.active {
                right: 0;
            }
            
            nav ul {
                flex-direction: column;
                gap: 1.8rem;
            }
            
            .nav-icons {
                display: none;
            }
            
            .hero {
                height: 80vh;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            .btn {
                padding: 12px 26px;
            }
            
            .categories-grid,
            .benefits-grid {
                grid-template-columns: 1fr;
            }
            
            .product-actions {
                flex-direction: column;
            }

            .add-to-cart, .checkout-btn {
                padding: 7px;
            }
        }
        
        @media (max-width: 576px) {
    header {
        padding: 1rem 5%;
    }
    
    .hero {
        height: 50vh;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .section-title h2 {
        font-size: 2rem;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    /* --- Final polished rules for compact mobile cards --- */
    .product-badge,
    .discount-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
        font-weight: 600;
    }

    .product-img {
        height: 270px;
    }

    .product-info {
        padding: 0.75rem;
    }

    .product-info h3 {
        font-size: 0.9rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
        min-height: 2.4em;
    }

    .price-container {
        margin-bottom: 0.6rem;
        gap: 0.3rem;
        flex-wrap: nowrap;
        align-items: baseline;
    }

    .discounted-price {
        font-size: 1rem;
    }

    .original-price,
    .discount-percentage {
        font-size: 0.75rem;
    }
    
    .discount-percentage {
        padding: 2px 6px;
        border-radius: 4px;
        white-space: nowrap;    /* ISSUE 1 FIX: Prevents "Save ₹X" from wrapping */
    }

    .colors-link {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }
    
    .product-actions {
        align-items: flex-start;
    }
    
    .add-to-cart, .checkout-btn {
        padding: 7px 5px;
        font-size: 0.7rem;      /* ISSUE 2 FIX: Slightly smaller font to ensure buttons fit */
        gap: 4px;
        white-space: nowrap;
    }
    
    .add-to-cart i, .checkout-btn i {
        font-size: 0.7rem;
    }
}

         @media (max-width: 768px) {
            #cart {
            display: inline-block;
            padding: 12px 2.4px;
            background-color: var(--accent);
            color: var(--black);
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            } 
        }

        .trust-review {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0.5rem 0 1.2rem;
        font-family: Arial, sans-serif;
        font-size: 0.95rem;
        flex-wrap: wrap;
    }

    .trust-label {
        font-weight: bold;
        color: #000;
    }

    .trust-stars {
        color: #FFD700;  /* Rich gold color */
        text-shadow: 0 0 1px rgba(0,0,0,0.3); /* Subtle outline */
        font-size: 1.2rem; /* Slightly larger */
        letter-spacing: 1px;
        position: relative;
        display: inline-block;
        text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000; /* Creates outline effect */
    }

    .trust-stars::before {
        content: "★★★★★";
        position: absolute;
        color: rgba(0,0,0,0.1); /* Shadow effect */
        top: 1px;
        left: 1px;
        z-index: -1;
    }

    .trust-rating {
        color: #333;
        font-weight: 600; /* Slightly bolder */
    }
/* MODIFIED CSS - SAFE FOR HERO HEADING */
@media (max-width: 768px) {
  .product-page {
    padding: 0 !important; /* Removes top gap so it sits flush below the header */
  }

  .product-page .price-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  .product-page .product-container {
    grid-template-columns: 1fr;
    padding: 0 !important; /* Removes padding so the image touches the screen edges */
    border-radius: 0;
    gap: 0; /* Eliminates the large grid gap */
  }

 .product-page .main-image {
    height: 60vh; /* Makes the image much taller like a native app */
    border-radius: 0; /* Sharp edges for full-width layout */
    margin-bottom: 10px; /* Reduced gap for a tighter look */
  }
  
  .product-page .product-details {
    padding: 0 1.2rem 1.2rem 1.2rem; /* Adds padding back to text/buttons so they don't touch the edges */
  }

  /* ADDED SCOPE TO PREVENT LEAKING */
  .product-page .product-details h1 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .product-page .product-price-container {
    flex-wrap: wrap;
  }

  .product-page .product-discounted-price {
    font-size: 1.5rem;
  }

  .product-page .product-original-price {
    font-size: 1.1rem;
  }

.product-page .actions {
    flex-direction: row; /* This puts the buttons back to side-by-side */
  }

  .product-page .btn-cart,
  .product-page .btn-buy {
    flex: 1;             /* This makes both buttons share the space equally */
    width: auto;         /* Allows flexbox to handle the sizing */
    margin-bottom: 0;
  }

  .product-page .product-info h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 3.6em;
    line-height: 1.8rem;
  }
  
  /* NEW RULE TO PROTECT HERO HEADING */
  .hero h1 {
    font-size: 2.2rem !important; /* Maintain original size */
    line-height: 1.2 !important; /* Original line-height */
}
}

@media (max-width: 768px) {
  .product-page {
    padding: 1rem;
  }
  
  .product-page .thumbnails {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 10px;
  }
  
  .product-page .thumbnail {
    flex: 0 0 70px;
  }
}

@media (max-width: 480px) {
  .product-page .price-container {
    flex-wrap: wrap;
  }
  
  .product-page .discount-percentage {
    flex-basis: 100%;
  }
}

/* This CSS handle home button right left */
/* This CSS handles home button layout */
/* This CSS handles home button layout */
.product-card .product-actions {
  flex-direction: row; /* Sets the default to side-by-side */
  gap: 0.5rem;
}

/* New rule to shrink buttons to fit side-by-side on mobile */
@media (max-width: 576px) {
  .product-card .product-actions {
    flex-direction: row; /* Keep buttons side-by-side */
    gap: 0.4rem;         /* Reduce space BETWEEN the buttons */
  }

  .product-card .add-to-cart,
  .product-card .checkout-btn {
    padding: 7px 4px;   /* Make buttons less wide */
    font-size: 0.65rem; /* Make button text smaller */
    gap: 3px;           /* Reduce space between icon and text */
  }
}

.product-card .add-to-cart, 
.product-card .checkout-btn {
  flex: 1 !important; /* Equal width */
  padding: 8px !important; /* Original padding */
  margin-bottom: 0 !important; /* Remove any vertical spacing */
}

/* Mobile-specific button adjustments */
@media (max-width: 768px) {
  .product-card .product-actions {
    flex-direction: row !important; /* Still horizontal on mobile */
  }
  
  .product-card .add-to-cart, 
  .product-card .checkout-btn {
    padding: 9px !important; /* Slightly smaller on mobile */
  }
}
/*css ends heare*/

/* Top tittle */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }
    .hero-content h1 span {
    /* margin-top: 0.2em !important; */
    display:block;
    margin-top: 0.2rem;
  }
  .hero-content h1 span::after {
    left: 50%;
    transform: translate(-100%);
    width: 100px;
     content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 85%;
            height: 3px;
            background: var(--accent);
            animation: underlineGrow 1.2s 1.2s forwards;
            transform: scaleX(0);
            transform-origin: left;
  }
}

/* Fix for product page buttons on mobile */
/* This CSS handle home button right left */
.product-card .product-actions {
  flex-direction: row; /* Sets the default to side-by-side */
  gap: 0.5rem;
}

/* New rule to stack buttons ONLY on small mobile screens */
@media (max-width: 576px) {
  .product-card .product-actions {
    flex-direction: column; /* Stacks the buttons vertically */
    gap: 0.5rem;
  }

  .product-page .btn-cart,
  .product-page .btn-buy {
    width: auto;
    margin-bottom: 0;
    flex: 1;
  }
}

/* Find this in your main.css */
/* Replace with this optimized CSS */
/* Categories Section - Compact & Non-Intrusive */
.categories-section {
    padding: 0.8rem 5% 0.5rem;
    background: #fff;
    margin-bottom: 0.3rem; /* Reduced gap below categories */
    position: relative;
}

.categories-container {
    display: flex;
    overflow-x: auto;
    gap: 0.8rem;
    padding: 0.3rem 0 0.8rem;

    /* Hide scrollbar initially */
    scrollbar-width: none;               /* Firefox */
    -ms-overflow-style: none;            /* IE/Edge */
}

/* Hide scrollbar in Chrome/Safari */
.categories-container::-webkit-scrollbar {
    height: 0px;
}

/* Show scrollbar on hover */
.categories-container:hover {
    scrollbar-width: thin;               /* Firefox */
}

.categories-container:hover::-webkit-scrollbar {
    height: 4px;                         /* Chrome/Safari */
}

.categories-container:hover::-webkit-scrollbar-thumb {
    background-color: #d4af37;
    border-radius: 2px;
}

.category {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 75px; /* Slightly smaller */
    cursor: pointer;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
@media screen and (min-width: 1024px) {
    .category {
        min-width: 170px; /*on PC */
    }
}

.category-icon {
    width: 75px; /* circle size */
    height: 75px; /* circle size */
    border-radius: 50%;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.3rem;
    border: 2px solid #eee;
    transition: all 0.3s ease;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
@media screen and (min-width:1024px){
    .category-icon {
        width: 85px; /* circle size */
        height: 85px; /* circle size */
    }
}
.featured-products {
    padding-top: 0.2rem !important; /* Reduced top padding */
}

.category-icon img {
    width: 100%; /* Full circle coverage */
    height: 100%; /* Full circle coverage */
    object-fit: cover; /* Fill entire circle */
    display: block;
}

.category span {
    font-size: 0.85rem; /* Slightly smaller text */
    font-weight: 500;
    text-align: center;
}

/* Safe product animation - Won't affect card dimensions */
.product-card {
    transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.products-grid .product-card.hidden {
    opacity: 0;
    transform: translateY(20px);
    height: 0;
    min-height: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    border: none;
    pointer-events: none;
}
.section-title {
    pointer-events: none; /*Hide Shop By Category due to error */
}

/*===============Disable text selection and image long-press globally=============== */
body, img, h1, h2, h3, h4, h5, h6, p, div {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  user-drag: none;
}

img {
  -webkit-user-drag: none;
}

body {
  -webkit-touch-callout: none;
}
/* Category outline */
.category.active .category-icon { 
    background-color: #fef4d9;
    border: 2px solid #000;
    box-shadow: 0 0 6px rgb(0,0,0,0.05);
    transition: all 0.3s ease;

}
.category {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Styling for the enhanced order summary */
.order-item-block {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--light-grey);
}

.order-summary .order-item-block:last-of-type {
    border-bottom: 1px solid var(--dark-grey); /* Solid line after the last item */
}

.summary-item-details {
    font-size: 0.9rem;
    color: var(--grey);
    padding-left: 5px; /* Slight indent for the details block */
    margin-top: 0.5rem;
}

.summary-item-details div {
    margin-bottom: 0.3rem; /* Space between each detail line (Qty, Color, Size) */
}

.summary-item-details div:last-child {
    margin-bottom: 0;
}
/* Styling for the payment methods image on the order form */
.payment-methods-img {
    width: 100%;
    max-width: 400px; /* Prevents it from being too large on wide screens */
    display: block;
    margin: 1.5rem auto 0; /* Adds space above the image and centers it */
    border-radius: 8px;
    pointer-events: none;
}

/* ========== Sliding Text Bar (Corrected) ========== */
.sliding-text-container {
    background-color: #111;
    color: #fff;
    padding: 1rem 0;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}

.sliding-text-wrapper {
    display: inline-block;
    animation: slide-left 25s linear infinite;
}

.sliding-text {
    display: inline-block;
}

.sliding-text span {
    margin: 0 2.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

.sliding-text span i {
    margin-right: 0.6rem;
    color: #d4af37;
    font-size: 1.1rem;
}

@keyframes slide-left {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .sliding-text-container { padding: 0.8rem 0; }
    .sliding-text span { font-size: 0.8rem; margin: 0 1.5rem; }
}

/* ========== Sticky Sliding Bar Logic (Simplified) ========== */
.sliding-text-sticky {
    position: fixed;
    top: 80px; /* This should match your header's height */
    left: 0;
    width: 100%;
    z-index: 998;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.categories-section {
    transition: padding-top 0.3s ease;
}
/* --- START: Zoom Button & Lightbox Styles --- */
#main-product-img {
    cursor: zoom-in; /* Indicates the image is clickable for zooming */
}

.zoom-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.4); /* Professional semi-transparent white */
    color: var(--black);
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    backdrop-filter: blur(1px); /* Frosted glass effect */
    opacity: 0.5px;
}

.zoom-btn:hover {
    transform: scale(1.1);
}

/* Lightbox Overlay */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.lightbox.show {
    display: flex;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    display: block;
    object-fit: contain;
    animation: zoomIn 0.3s ease;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.3s ease;
}

.lightbox-close:hover {
    transform: scale(1.1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.8); }
    to { transform: scale(1); }
}
/* --- END: Zoom Button & Lightbox Styles --- */

/* Quality Guarantee Image Styling */
.quality-guarantee-img {
    display: block;
    width: 100%; /* This helps with responsiveness on smaller screens */
    max-width: 800px; /* This sets a limit for how large the image can get on desktops */
    height: auto;
    margin: 2.5rem auto 1rem auto; /* This centers the image and adds vertical space */
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    pointer-events: none;
}

@media (max-width: 768px) {
    .quality-guarantee-img {
        margin-top: 2rem;
        border-radius: 8px;
    }
}

/* --- Trust Banner Image on Home Page --- */
.trust-banner {
    padding: 2rem 5%;
    background: var(--bg-light);
}

.trust-banner-img {
    display: block;
    width: 100%;
    max-width: 1200px; /* Prevents the image from being too wide on large screens */
    height: auto;
    margin: 0 auto; /* Centers the image */
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    pointer-events: none;
}
/* --- Product Highlights Accordion Styles --- */
.highlight-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0.5rem;
}

.highlight-image {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
}

.highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.highlight-text h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--black);
}

.highlight-text p {
    font-size: 0.95rem;
    color: var(--grey);
    line-height: 1.6;
}

/* Ensure consistent icon styling */
.accordion-header i:first-of-type {
    color: var(--grey);
    width: 20px; /* Align icons */
    text-align: center;
}
/* FIX: Remove side gaps on mobile for the ratings section */
/* FIX: Consistent padding on mobile for the ratings section */
@media (max-width: 768px) {
  .ratings-section {
    padding: 30px 1rem; /* This sets a nice, consistent 1rem side padding for the whole section */
  }

  /* Remove individual padding from titles, as the parent section now handles it */
  .ratings-section .section-title,
  .ratings-section .distribution-title,
  .review-photos h3 {
    padding-left: 0;
    padding-right: 0;
  }

  /* Reduce the gap around the vertical separator line to bring the content closer */
  .overall-rating {
    padding-right: 0.75rem; 
  }
  .ratings-distribution {
    padding-left: 0.75rem;
  }
}
/* FIX: Remove side gaps on mobile for the related products section */
@media (max-width: 768px) {
  .related-products {
    padding-left: 0;
    padding-right: 0;
  }

  /* Add margin to the title to keep it from the screen edge */
  .related-products h2 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
        .ratings-section {
            padding: 50px 40px 40px;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            margin-bottom: 35px;
            gap: 15px;
        }
        
        .section-title h2 {
            font-size: 1.8rem;
            color: var(--black);
        }
        
        .section-title .divider {
            flex-grow: 1;
            height: 2px;
            background: var(--light-grey);
        }
        
        .ratings-overview {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            margin-bottom: 30px;
        }
        
        .overall-rating {
            flex: 1;
            min-width: 280px;
            background: #f9f9f9;
            padding: 25px;
            border-radius: 10px;
            text-align: center;
        }
        
        .rating-label {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark-grey);
        }
        
        .star-rating {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--success);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        
        .star-rating .star {
            font-size: 2rem;
            color: #ffc107;
        }
        
        .total-reviews {
            font-size: 1.1rem;
            color: var(--grey);
            margin-bottom: 25px;
        }
        
        .rating-badge {
            display: inline-block;
            background: #e8f5e9;
            color: var(--success);
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .ratings-distribution {
            flex: 1;
            min-width: 280px;
        }
        
        .distribution-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--dark-grey);
        }
        
        .rating-bar {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .rating-bar .stars {
            width: 50px;
            font-weight: 500;
            color: var(--dark-grey);
        }
        
        .rating-bar .bar-container {
            flex: 1;
            height: 10px;
            background: #f0f0f0;
            border-radius: 5px;
            overflow: hidden;
            margin: 0 15px;
        }
        
        .rating-bar .bar {
            height: 100%;
            background: var(--success);
            border-radius: 5px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 1s ease-out;
        }
        
        .rating-bar .count {
            width: 40px;
            text-align: right;
            font-weight: 500;
            color: var(--grey);
        }
        
        /* ASPECT RATINGS - MODIFIED FOR SINGLE LINE */
        .aspect-ratings {
            display: flex;
            gap: 15px;
            margin: 40px 0 35px;
            overflow-x: auto;
            padding-bottom: 20px;
            scrollbar-width: thin;
        }
        
        .aspect-ratings::-webkit-scrollbar {
            height: 6px;
        }
        
        .aspect-ratings::-webkit-scrollbar-thumb {
            background: var(--light-grey);
            border-radius: 3px;
        }
        
        .aspect-item {
            flex: 0 0 auto;
            text-align: center;
            min-width: 100px;
        }
        
        .aspect-meter {
            position: relative;
            width: 80px;
            height: 80px;
            margin: 0 auto 10px;
        }
        
        .aspect-meter svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }
        
        .aspect-meter circle {
            fill: none;
            stroke-width: 8;
            stroke-linecap: round;
        }
        
        .aspect-meter .bg {
            stroke: #f0f0f0;
        }
        
        .aspect-meter .progress {
            stroke: var(--success);
            stroke-dasharray: 283;
            stroke-dashoffset: 283;
            transition: stroke-dashoffset 1.5s ease-out;
        }
        
        .aspect-value {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--black);
        }
        
        .aspect-label {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--dark-grey);
        }
        
        .review-photos {
            margin-top: 40px;
        }
        
        .review-photos h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: var(--black);
        }
        
        .photos-container {
            display: flex;
            gap: 15px;
            overflow-x: auto;
            padding: 5px 0 20px;
            margin: none;
        }
        
        .photo-item {
            flex: 0 0 120px;
            aspect-ratio: 1/1;
            background: #f8f8f8;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .no-photos {
            width: 100%;
            text-align: center;
            padding: 40px;
            color: var(--grey);
            font-size: 1.1rem;
            display: none; /* Hidden by default */
        }
        
        /* Responsive Styles */
        @media (max-width: 992px) {
            .aspect-ratings {
                gap: 12px;
            }
        }
        
        @media (max-width: 768px) {
            .ratings-overview {
                flex-direction: column;
                gap: 30px;
            }
            
            .overall-rating {
                padding: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .product-header {
                padding: 40px 20px;
            }
            
            .product-header h1 {
                font-size: 2.2rem;
            }
            
            .ratings-section {
                padding: 30px 20px;
            }
            
            .section-title h2 {
                font-size: 1.5rem;
            }
            
            .aspect-item {
                min-width: 90px;
            }
            
            .aspect-meter {
                width: 70px;
                height: 70px;
            }
            
            .aspect-value {
                font-size: 1.1rem;
            }
            
            .aspect-label {
                font-size: 0.85rem;
            }
        }
/* =================================================================
   CORRECTED STYLES FOR REVIEW CARDS & LIGHTBOX
   ================================================================== */

/* --- Review Cards on Product Page (Layout Fix) --- */
.review-card {
    flex: 0 0 280px; /* This is the critical line that fixes the layout */
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.review-card:hover { transform: translateY(-5px); }
.review-card-image { width: 100%; height: 250px; background-color: #f0f0f0; }
.review-card-image img { width: 100%; height: 100%; object-fit: cover; }
.review-card-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.review-stars { color: #ffc107; font-size: 1rem; margin-bottom: 10px; }
.review-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.reviewer-name { font-weight: 600; }
.verified-purchase { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--success); }
.review-text {
    font-size: 0.9rem; line-height: 1.6; margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; flex-grow: 1;
}
.see-more { color: var(--accent); text-decoration: none; font-weight: 600; margin-top: auto; }
.review-product-info { display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: #f9f9f9; border-top: 1px solid #eee; }
.review-product-info img { width: 40px; height: 40px; border-radius: 6px; }

/* --- Default DP with Initial Styles --- */
.reviewer-initial-dp {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 90px; font-weight: 700;
    color: rgba(255, 255, 255, 0.85); text-transform: uppercase;
}
.reviewer-initial-dp.bg-1 { background-color: #e57373; }
.reviewer-initial-dp.bg-2 { background-color: #81c784; }
.reviewer-initial-dp.bg-3 { background-color: #64b5f6; }
.reviewer-initial-dp.bg-4 { background-color: #ffb74d; }
.reviewer-initial-dp.bg-5 { background-color: #9575cd; }

/* --- Final Professional Lightbox Styles --- */
.review-lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 1002; display: none; flex-direction: column;
}
.review-lightbox.show { display: flex; }
.review-lightbox-slider { display: flex; height: 100%; transition: transform 0.4s ease; }
.review-lightbox-slide { flex: 0 0 100vw; width: 100vw; height: 100%; display: flex; flex-direction: column; position: relative; }
.review-lightbox-image-wrapper { flex-grow: 1; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.review-lightbox-image { width: 100%; height: 100%; object-fit: contain; }

.review-details-sheet {
    background: white; width: 100%; padding: 1.5rem;
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    flex-shrink: 0; max-height: 45vh; display: flex; flex-direction: column;
}
.review-sheet-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.review-sheet-header .reviewer-avatar { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 600; color: white; flex-shrink: 0; }
.review-sheet-header .reviewer-meta { flex-grow: 1; }
.review-sheet-header .reviewer-name { font-weight: 600; font-size: 1.1rem; }
.review-sheet-header .review-date { font-size: 0.85rem; color: var(--grey); }
.review-sheet-text {
    overflow-y: auto; flex-grow: 1; padding-right: 10px;
    font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem;
    scrollbar-width: thin; scrollbar-color: var(--grey) #f0f0f0;
}
.review-sheet-text::-webkit-scrollbar { width: 6px; }
.review-sheet-text::-webkit-scrollbar-track { background: #f0f0f0; }
.review-sheet-text::-webkit-scrollbar-thumb { background: var(--grey); border-radius: 3px; }
.review-sheet-product { display: flex; align-items: center; gap: 15px; padding-top: 1rem; border-top: 1px solid var(--light-grey); }
.review-sheet-product img { width: 50px; height: 50px; border-radius: 8px; }
.review-sheet-product .product-title { flex-grow: 1; font-weight: 500; }
.review-sheet-product .shop-now-btn {
    padding: 12px 22px;
    background: var(--accent);
    color: var(--black);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700; /* Bolder */
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Subtle shadow */
    font-size: 1rem;
}
.review-sheet-product .shop-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    background: var(--accent-dark); /* Slightly darker on hover */
}
/* FIX: Styles for individual floating controls */
.review-lightbox-counter {
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 10;
    font-weight: 500;
    background: rgba(0,0,0,0.4);
    border-radius: 20px;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    padding: 5px 12px;
    font-size: 0.9rem;
}

.review-lightbox-close {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10;
    font-size: 1.5rem;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border: none;
    color: white;
    transition: transform 0.3s;
}
.review-lightbox-close:hover {
    transform: scale(1.1);
}

/* FIX: Visible and correctly placed arrows */
.review-lightbox-arrow {
    position: absolute; top: 45%; transform: translateY(-50%);
    width: 50px; height: 50px;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
    color: white; border-radius: 50%; font-size: 1.5rem;
    cursor: pointer; z-index: 5;
    transition: background 0.3s ease;
    display: flex; align-items: center; justify-content: center;
}
.review-lightbox-arrow:hover { background: rgba(0,0,0,0.5); }
.review-lightbox-arrow.prev { left: 20px; }
.review-lightbox-arrow.next { right: 20px; }
/* --- Home Page Reviews Section --- */
.home-reviews {
    padding: 2rem 5% 2rem; /* Reduced top padding from 4rem to 2rem */
    background: var(--white);
}

.home-reviews .section-title h2 i {
    color: var(--accent);
    font-size: 85%;
    margin-left: 10px;
}
/* --- START: Responsive Ratings Overview Adjustment --- */
@media (max-width: 768px) {

  /* 1. Force side-by-side layout on the main container */
  .ratings-overview {
    flex-direction: row; /* Overrides the default "column" on mobile */
    align-items: center; /* Vertically align the two columns */
    gap: 1rem;           /* Reduce the gap between columns */
    flex-wrap: nowrap;   /* Prevent columns from stacking */
  }

  /* 2. Adjust the left column (Excellent, 4.5, etc.) */
  .overall-rating {
    flex: 1;             /* Allow this column to take up proportional space */
    min-width: 0;        /* IMPORTANT: Removes the minimum width constraint */
    padding: 1rem;       /* Reduce padding to make it smaller */
  }

  /* Make the text inside the left column smaller */
  .overall-rating .rating-label {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  .overall-rating .star-rating {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }
  .overall-rating .star-rating .star {
    font-size: 1.3rem;
  }
  .overall-rating .total-reviews {
    font-size: 0.8rem;
    margin-bottom: 1rem;
    line-height: 1.4;
  }
  .overall-rating .rating-badge {
    font-size: 0.75rem;
    padding: 6px 10px;
  }

  /* 3. Adjust the right column (Rating Distribution) */
  .ratings-distribution {
    flex: 1.5;           /* Give this column a bit more space for the bars */
    min-width: 0;        /* IMPORTANT: Removes the minimum width constraint */
  }
  
  /* Make the rating bars and text inside them smaller */
  .ratings-distribution .rating-bar {
    margin-bottom: 8px; /* Reduce space between bars */
    gap: 0.5rem;
  }
  .ratings-distribution .rating-bar .stars,
  .ratings-distribution .rating-bar .count {
    font-size: 0.8rem;
  }
  .ratings-distribution .rating-bar .bar-container {
    height: 8px; /* Make bars thinner */
  }

}
/* --- END: Responsive Ratings Overview Adjustment --- */

/* --- START: Final Professional Ratings Layout --- */

/* This rule applies to all screen sizes for a consistent base */
.ratings-overview {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Align items to the top */
  flex-wrap: nowrap;
  gap: 0; /* Remove the gap, we will use padding for spacing */
  background: none;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* --- Left Column (Excellent) --- */
.overall-rating {
  flex: 1;
  min-width: 0;
  text-align: left; /* Align text to the left */
  background: none;
  padding: 0;
  padding-right: 1.5rem; /* Space BEFORE the separator line */
  border-right: 1px solid var(--light-grey); /* The vertical separator line */
}

/* Professional Heading Style */
.overall-rating .rating-label {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--black);
}

.overall-rating .star-rating {
  justify-content: flex-start; /* Align stars to the left */
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.overall-rating .total-reviews {
  font-size: 0.9rem;
  margin-bottom: 0;
}
/* Hide the "Top Rated" badge for a cleaner look like the reference */
.overall-rating .rating-badge {
  display: none;
}

/* --- Right Column (Rating Distribution) --- */
.ratings-distribution {
  flex: 1.5; /* Give this side more space */
  min-width: 0;
  padding-left: 1.5rem; /* Space AFTER the separator line */
}

/* Professional Heading Style */
.ratings-distribution .distribution-title {
  display: block; /* Make sure the title is visible */
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--black);
}

/* --- Mobile-Specific Adjustments --- */
@media (max-width: 768px) {
  .ratings-overview {
    align-items: center; /* Center the columns vertically on smaller screens */
  }
  .overall-rating {
    padding-right: 1rem;
  }
  .ratings-distribution {
    padding-left: 1rem;
  }

  /* Adjusting the Circular Meters on Mobile to match */
  .aspect-item {
    min-width: 80px; /* Make each item smaller */
  }
  .aspect-meter {
    width: 60px; /* Reduce circle size */
    height: 60px;
  }
  .aspect-meter circle {
    stroke-width: 7; /* Thinner stroke for the circle */
  }
  .aspect-value {
    font-size: 1rem; /* Smaller text inside circle */
  }
  .aspect-label {
    font-size: 0.8rem; /* Smaller label below circle */
  }
}
/* --- END: Final Professional Ratings Layout --- */
/* --- START: Final Polished Ratings Layout --- */

/* The main container for the two columns */
.ratings-overview {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Aligns columns to the top */
  flex-wrap: nowrap;
  gap: 0;
  background: none;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* --- Left Column Styling (Excellent) --- */
.overall-rating {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  padding: 0;
  padding-right: 1.5rem;
  border-right: 1px solid var(--light-grey);
}

/* --- Right Column Styling (Distribution) --- */
.ratings-distribution {
  flex: 1.8; /* Give this side more space to prevent wrapping */
  min-width: 0;
  padding-left: 1.5rem;
}

/* --- Professional Heading Styles (For BOTH columns) --- */
/* This new unified rule aligns both headings perfectly */
.overall-rating .rating-label,
.ratings-distribution .distribution-title {
  display: block;
  font-size: 1rem;         /* Unified font size */
  font-weight: 600;
  margin-bottom: 0.75rem;  /* Unified margin */
  color: var(--black);
  white-space: nowrap;     /* FIX: Prevents the title from wrapping to a new line */
}

/* Specific styles for the rest of the left column's content */
.overall-rating .star-rating {
  justify-content: flex-start;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.overall-rating .total-reviews {
  font-size: 0.9rem;
  margin-bottom: 0;
}
.overall-rating .rating-badge {
  display: none;
}

/* FIX: Reduce vertical space between the rating bars */
.ratings-distribution .rating-bar {
  margin-bottom: 4px; /* Reduced from 8px for a tighter look */
}

/* --- Mobile-Specific Adjustments --- */
@media (max-width: 768px) {
  .ratings-overview {
    align-items: center;
  }
  .overall-rating {
    padding-right: 1rem;
  }
  .ratings-distribution {
    padding-left: 1rem;
  }
  .aspect-item {
    min-width: 80px;
  }
  .aspect-meter {
    width: 60px;
    height: 60px;
  }
  .aspect-meter circle {
    stroke-width: 7;
  }
  .aspect-value {
    font-size: 1rem;
  }
  .aspect-label {
    font-size: 0.8rem;
  }
}
/* --- END: Final Polished Ratings Layout --- */
/* =============================================================== */
/* FINAL FIX FOR MOBILE RATING DISTRIBUTION GAPS                   */
/* Paste this entire block at the VERY END of your style.css file  */
/* =============================================================== */

@media (max-width: 768px) {
  /* 1. Set a consistent padding for the entire ratings section */
  .ratings-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* 2. Reduce the empty space around the vertical line */
  .ratings-overview .overall-rating {
    padding-right: 0.75rem; /* Reduces gap on the left of the line */
  }

  .ratings-overview .ratings-distribution {
    padding-left: 0.75rem; /* Reduces gap on the right of the line */
  }

  /* 3. Make the elements inside the rating bars more flexible */
  .ratings-distribution .rating-bar {
    gap: 0.5rem; /* Adds a small, consistent space between the star rating, the bar, and the count */
  }

  .ratings-distribution .rating-bar .stars {
    flex-basis: 40px; /* Gives a flexible base width */
    flex-shrink: 0;
  }

  .ratings-distribution .rating-bar .count {
    flex-basis: 30px; /* Gives a flexible base width */
    text-align: right;
    flex-shrink: 0;
  }
  
  .ratings-distribution .rating-bar .bar-container {
    margin: 0; /* Removes any default horizontal margins */
  }
}
/* =============================================================== */
/* FINAL OVERRIDE FOR MOBILE PRODUCT CARDS                         */
/* Paste this at the VERY END of your style.css file               */
/* =============================================================== */

@media (max-width: 576px) {
  
  /* 1. Force buttons to stack vertically */
  .products-grid .product-card .product-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* 2. Reset button sizes for the new stacked layout */
  .products-grid .product-card .add-to-cart,
  .products-grid .product-card .checkout-btn {
    flex: auto !important;     /* Prevents uneven stretching */
    padding: 8px !important;   /* Sets a comfortable, consistent padding */
  }

  /* 3. Make the badges smaller */
  .products-grid .product-card .product-badge,
  .products-grid .product-card .discount-badge {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
  }

  /* 4. Ensure the 'Save' amount does not wrap */
  .products-grid .product-card .discount-percentage {
    white-space: nowrap !important;
  }
}
/* ==================================================================== */
/* FINAL OVERRIDE FOR STACKED & FULL-WIDTH MOBILE BUTTONS           */
/* Paste this entire block at the VERY END of your style.css file   */
/* ==================================================================== */

@media (max-width: 576px) {
  
  /* 1. Force the button container to stack vertically and remove all gaps */
  .products-grid .product-card .product-actions {
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* 2. Make buttons full-width and center their content */
  .products-grid .product-card .add-to-cart,
  .products-grid .product-card .checkout-btn {
    flex: auto !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: center !important; /* This centers the text and icon */
  }

  /* 3. Adjust border-radius for a seamless, no-gap appearance */
  .products-grid .product-card .add-to-cart {
    border-radius: 8px 8px 0 0 !important; /* Rounds the top corners only */
  }

  .products-grid .product-card .checkout-btn {
    border-radius: 0 0 8px 8px !important; /* Rounds the bottom corners only */
  }
}
/* =============================================================== */
/* FINAL FIX: WELL-ADJUSTED SIDE-BY-SIDE MOBILE BUTTONS            */
/* Paste this at the VERY END of your style.css file               */
/* =============================================================== */

@media (max-width: 576px) {
    .featured-products {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  /* 1. Ensure the button container is side-by-side */
  .products-grid .product-card .product-actions {
    flex-direction: row !important;
    gap: 0.4rem !important; /* A minimal gap between the buttons */
  }

  /* 2. Hide the icons inside buttons on mobile to save space */
  .products-grid .product-card .add-to-cart i,
  .products-grid .product-card .checkout-btn i {
    display: none !important;
  }

  /* 3. Adjust button text and padding to fit */
  .products-grid .product-card .add-to-cart,
  .products-grid .product-card .checkout-btn {
    padding: 8px 4px !important;    /* Minimal horizontal padding */
    font-size: 0.75rem !important;   /* A small but legible font size */
    justify-content: center !important;
    text-align: center;
  }
}
 @media (max-width: 576px) {
      .products-grid .product-card .discount-badge {
        font-size: 0.5rem !important;
        padding: 1px 4px !important;
        font-weight: 600 !important;
      }
      .products-grid .product-card .product-badge {
        font-size: 0.5rem !important;
        padding: 1px 4px !important;
        font-weight: 600 !important;

      }
    }
/* Reduces the gap below the "Shop by Category" title */
.categories-section .section-title {
  margin-bottom:0.5rem;
}
/* ==================================================================== */
/* FAQ SECTION STYLES (REVISED DESIGN)                                */
/* ==================================================================== */

.faq-section {
    padding: 2rem 0; /* Reduced vertical padding */
    background-color: var(--white);
    border-top: 1px solid var(--light-grey);
    margin-top: 0.7rem;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--light-grey);
}

.faq-item:first-of-type {
    border-top: 1px solid var(--light-grey);
}

.faq-question {
    padding: 1rem 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1rem;
}

.faq-question::-webkit-details-marker {
    display: none;
}

/* Custom checkbox icon (always visible) */
.faq-question::before {
    content: '\f14a'; /* Font Awesome solid check-square */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--dark-grey);
    font-size: 1.2rem;
}

.faq-question:hover,
.faq-item[open] > .faq-question {
    color: var(--accent);
}

.faq-item[open] > .faq-question {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Arrow icon */
.faq-question::after {
    content: '▾';
    margin-left: auto;
    transition: transform 0.3s ease;
}

.faq-item[open] > .faq-question::after {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 0 1rem 2rem; /* Aligns answer with question text */
    color: var(--grey);
    line-height: 1.7;
    animation: fadeInAnswer 0.4s ease;
}

@keyframes fadeInAnswer {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ========== Let Your Back Talk Section (Professional Style) ========== */
.back-talk-section {
    padding: 2.5rem 0; /* Adds clean vertical spacing */
    background-color: #f9e2e2; /* The new, distinct background color */
    grid-column: 1 / -1;
    border: none; /* Removes all borders for a modern look */
}

.back-talk-header {
    padding: 0 5%;
    margin-bottom: 1rem;
}

.back-talk-title-group h2 {
    font-size: 2rem;
    color: var(--black);
    margin: 0;
}

.back-talk-title-group p {
    font-size: 1rem;
    color: var(--grey);
    margin-top: 0.25rem;
}

/* This wrapper creates the container for the fade effect */
.back-talk-grid-wrapper {
    position: relative;
}

/* This is the transparent gradient on the right edge */
.back-talk-grid-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70px; /* How wide the fade effect is */
    background: linear-gradient(to right, rgba(249, 249, 249, 0), #f9f9f9 80%);
    pointer-events: none; /* Allows you to click/scroll through the gradient */
}

.back-talk-grid {
    display: flex;
    overflow-x: auto;
    gap: 1.2rem;
    /* Aligns the start of the scroll with page content */
    padding: 0.5rem 0 1.5rem 5%;
    /* Hides the scrollbar on all browsers */
    scrollbar-width: none;  
    -ms-overflow-style: none; 
}

.back-talk-grid::-webkit-scrollbar {
    display: none;
}

/* This ensures the last card can scroll fully into view past the fade */
.back-talk-grid .back-talk-card:last-child {
    margin-right: 5%;
}

/* Original White Card Style (for "Let Your Back Talk") */
.back-talk-card {
    flex: 0 0 200px; 
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.back-talk-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.back-talk-card .product-img {
    height: 160px; 
}

.back-talk-card .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.back-talk-card .product-info {
    padding: 0.8rem; 
}

.back-talk-card .product-info h3 {
    font-size: 0.9rem; 
    margin-bottom: 0.5rem;
    color: var(--dark-grey);
    line-height: 1.4;
    font-weight: 600;
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.back-talk-card .price-container {
    gap: 8px;
    align-items: baseline;
}
.back-talk-card .discounted-price {
    font-size: 1.1rem;
}
.back-talk-card .original-price {
    font-size: 0.85rem;
}
.back-talk-card .discount-percentage {
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 15px;
}

/* NEW Black Card Style (for "Winter Sale") */
.winter-sale-card {
    flex: 0 0 200px; 
    display: block;
    text-decoration: none;
    color: var(--white);
    background: var(--black);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid var(--dark-grey);
}

.winter-sale-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.3);
}

.winter-sale-card .product-img {
    height: 160px; 
}

.winter-sale-card .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.winter-sale-card .product-info {
    padding: 0.8rem; 
}

.winter-sale-card .product-info h3 {
    font-size: 0.9rem; 
    margin-bottom: 0.5rem;
    color: var(--white);
    line-height: 1.4;
    font-weight: 600;
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.winter-sale-card .price-container {
    gap: 8px;
    align-items: baseline;
}
.winter-sale-card .discounted-price {
    font-size: 1.1rem;
    color: var(--white);
}
.winter-sale-card .original-price {
    font-size: 0.85rem;
    color: var(--light-grey);
}
.winter-sale-card .discount-percentage {
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 15px;
    background: var(--discount);
    color: var(--white);
    font-weight: 600;
}

/* ==================================================================== */
/* WINTER SALE SECTION STYLES                                         */
/* ==================================================================== */

.winter-sale-section {
    position: relative;
    padding: 0.5rem 0; /* DECREASED: Height reduced by 40% */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://ik.imagekit.io/goqjn9nvn/Urban%20-%20Image%20Kit/background%20winter%20Sell.jpg?updatedAt=1755016475470');
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* CHANGED: This makes the image static */
    grid-column: 1 / -1;
    overflow: hidden;
}

.winter-sale-header {
    padding: 0 5%;
    margin-bottom: 1rem; /* Matched to the section above */
    position: relative; 
    z-index: 2;
}

.winter-sale-title-group h2 {
    font-size: 2rem; /* DECREASED: Matches previous section's title size */
    color: var(--white);
    font-weight: 700;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    margin: 0;
    white-space: nowrap; 
}

.winter-sale-title-group p {
    font-size: 1rem; /* DECREASED: Matches previous section's subtitle size */
    color: #eee;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    margin-top: 0.25rem;
}

/* --- Horizontal Carousel (copied from back-talk) --- */
.winter-sale-grid-wrapper {
    position: relative;
    z-index: 2;
}

.winter-sale-grid {
    display: flex;
    overflow-x: auto;
    gap: 1.2rem;
    padding: 0.5rem 5% 1.5rem 5%;
    scrollbar-width: none;  
    -ms-overflow-style: none; 
}

.winter-sale-grid::-webkit-scrollbar {
    display: none;
}

/* We can reuse the back-talk-card style for consistency */
.winter-sale-grid .back-talk-card {
    border: 1px solid rgba(255,255,255,0.1);
}

/* --- Snow Animation --- */
.snow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

@keyframes snowfall {
    0% { transform: translateY(-10vh) translateX(0); }
    100% { transform: translateY(110vh) translateX(10vw); }
}

.snowflake {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: snowfall linear infinite;
}

/* Creating different sizes and speeds for a realistic effect */
.snowflake:nth-child(5n) { width: 4px; height: 4px; animation-duration: 12s; }
.snowflake:nth-child(5n+1) { width: 6px; height: 6px; animation-duration: 9s; animation-delay: 1s; }
.snowflake:nth-child(5n+2) { width: 3px; height: 3px; animation-duration: 15s; animation-delay: 2s; }
.snowflake:nth-child(5n+3) { width: 5px; height: 5px; animation-duration: 8s; animation-delay: 3s; }
.snowflake:nth-child(5n+4) { width: 7px; height: 7px; animation-duration: 10s; animation-delay: 4s; }
/* ==================================================================== */
/* STICKY MOBILE ACTION BUTTONS (PRODUCT PAGE)                          */
/* ==================================================================== */

/* By default, the new sticky bar is hidden on desktop */
.sticky-actions {
    display: none;
}

/* On mobile devices (768px and below), these styles will apply */
@media (max-width: 768px) {

    /* 2. Style and show the new sticky container */
    .sticky-actions {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--white);
        padding: 0.75rem;
        /* This is the key for avoiding system navigation bars (like Android's 3-button nav) */
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 10px));
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 10;
        gap: 0.75rem;
    }

    /* 3. Make sure the buttons inside look great */
    .sticky-actions .btn {
        flex: 1; /* Make both buttons share the space equally */
        padding: 14px;
        font-size: 1rem;
        font-weight: 600;
    }
    
    /* 4. Add space at the bottom of the page so content isn't hidden by the new sticky bar */
    .product-page .faq-section {
        padding-bottom: 100px; 
    }
}
/* //quick view ajustment */
.ratings-section{
    padding: 1px;
}
.ratings-overview{
    padding: 4px;
}
.overall-rating {
    padding: 10px;
}
.card {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex; /* Added to control internal layout */
    flex-direction: column; /* Stacks image and content vertically */
    height: 100%; /* Ensures all cards in a row are the same height */
}
.card-content {
    padding: 20px;
    flex-grow: 1; /* This forces the text area to expand to the bottom of the card */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Keeps title and price at the top */
}
/* Make the link cover the entire card area */
.main-card-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* This puts the invisible layer over the whole card */
}

/* Remove default link styling */
.main-card-link {
    text-decoration: none;
    color: inherit;
}
.product-description-icon {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    pointer-events: none;
}
/* The Eye Icon Container */
.quick-view-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.9); /* Subtle white background */
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Makes it a perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10; /* Ensures it sits above the image but below the stretched link */
    opacity: 0; /* Hidden by default */
    transform: translateY(-10px); /* Slight animation start point */
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.quick-view-icon i {
    color: #1a1a1a;
    font-size: 16px;
}

/* Show the icon when the card is hovered */
.card:hover .quick-view-icon {
    opacity: 1;
    transform: translateY(0);
}

/* Hover effect for the icon itself */
.quick-view-icon:hover {
    background: #1a1a1a;
}

.quick-view-icon:hover i {
    color: #ffffff;
}
.quick-view-icon {
    z-index: 5; /* Sit it higher than the stretched link z-index */
    pointer-events: auto; /* Ensure it stays clickable */
}
/* ==================================================================== */
/* FINAL FIX: SINGLE LINE TITLES & NO-GAP GRID                          */
/* Paste this at the VERY END of your style.css file                    */
/* ==================================================================== */

/* 1. Force Titles to One Line (with ...) */
.product-info h3,
.back-talk-card .product-info h3,
.winter-sale-card .product-info h3,
.related-product-info h3 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    min-height: auto !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    margin-bottom: 0.5rem !important;
}

/* 2. Remove Gaps in Main Product Grid */
.products-grid {
    gap: 0 !important;            /* Removes space between cards */
    padding: 0 !important;        /* Removes container padding so cards touch screen edges */
    row-gap: 0 !important;        /* Ensures vertical stacking matches horizontal */
}

/* 3. Style Adjustments for Gapless Grid */
/* Since cards are now touching, we remove the shadow and add a border 
   so they remain distinct from each other. */
.products-grid .product-card {
    box-shadow: none !important;  /* Remove shadow to prevent muddy overlaps */
    border: 1px solid #f0f0f0;    /* Add very light border for separation */
    border-radius: 0 !important;  /* Ensure corners are sharp for a clean grid */
}

/* Optional: Ensure 2 columns on mobile extend fully */
@media (max-width: 768px) {
    .products-grid {
        /* Ensures exactly 2 columns */
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}
/* //css For image sliding at home */
.product-img {
            position: relative;
            height: 280px;
            overflow: hidden;
        }

        /* Container for the images */
        .card-slider-track {
            width: 100%;
            height: 100%;
            display: flex;
            overflow-x: auto; /* Allow horizontal scroll for mobile */
            scroll-snap-type: x mandatory; /* Enable snap scrolling */
            -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
            scrollbar-width: none; /* Firefox: hide scrollbar */
        }

        .card-slider-track::-webkit-scrollbar {
            display: none; /* Chrome/Safari: hide scrollbar */
        }
        
        .card-slider-track img {
            flex: 0 0 100%; /* Each image takes full width */
            width: 100%;
            height: 100%;
            object-fit: cover;
            scroll-snap-align: start; /* Snap to start of image */
            transition: opacity 0.4s ease, transform 0.5s ease;
        }

        /* --- Desktop Hover Effect (Mouse Users) --- */
        /* Only applies to devices that support hover */
        @media (hover: hover) and (pointer: fine) {
            .card-slider-track {
                overflow: hidden; /* Disable scroll on desktop */
                position: relative;
                display: block; /* Switch to block for absolute positioning logic */
            }

            .card-slider-track img {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0; /* Hide all by default */
                z-index: 1;
            }

            /* Always show the first image */
            .card-slider-track img:first-child {
                opacity: 1; 
                z-index: 2;
                position: relative; /* Keep it in flow */
            }

            /* On hover, show the second image if it exists */
            .product-card:hover .card-slider-track img:nth-child(2) {
                opacity: 1;
                z-index: 3;
            }

            /* Slight zoom effect on hover for the visible image */
            .product-card:hover .card-slider-track img {
                transform: scale(1.05);
            }
        }

        /* --- Mobile Adjustments --- */
        @media (max-width: 768px) {
             /* Disable the zoom effect on mobile to prevent scroll glitches */
             .product-card:hover .product-img img {
                transform: none !important;
            }
            /* Adjust height slightly for mobile if needed */
            .product-img {
                height: 280px; 
            }
        }
/* // End Of css For image sliding at home */
/* === MOBILE HEADER & MENU TRANSFORMATION === */
        @media (max-width: 768px) {
            /* 1. Header Layout: Fries Left | Logo Center | Cart Right */
            header {
                justify-content: space-between;
                padding: 15px 5%;
            }

            .mobile-menu-btn {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 5px;
                width: 30px;
                height: 30px;
                cursor: pointer;
                z-index: 101; /* Above header */
                order: 1; /* First item */
            }

            .logo {
                order: 2; /* Middle item */
                transform: translateX(-15px); /* Optical centering correction */
            }

            .nav-icons {
                display: flex; /* Keep cart visible */
                order: 3; /* Last item */
            }

            /* Hide search/user icons if needed, keep cart */
            .nav-icons i:not(.fa-shopping-bag) {
                display: none;
            }

            /* 2. Asymmetrical "Fries" Icon Styling */
            .fry-line {
                height: 2px;
                background-color: var(--white);
                border-radius: 2px;
                transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }

            .line-1 { width: 100%; align-self: flex-start; }
            .line-2 { width: 70%; align-self: flex-start; }
            .line-3 { width: 40%; align-self: flex-start; }

            /* Fries Animation State */
            .mobile-menu-btn.open .line-1 {
                transform: rotate(45deg) translate(5px, 6px);
                background-color: var(--accent);
                width: 100%;
            }
            .mobile-menu-btn.open .line-2 {
                opacity: 0;
                transform: translateX(-20px);
            }
            .mobile-menu-btn.open .line-3 {
                transform: rotate(-45deg) translate(4px, -5px);
                background-color: var(--accent);
                width: 100%;
            }

            /* 3. Streetwear Menu Drawer */
            /* 3. Streetwear Menu Drawer */
            nav {
                position: fixed;
                top: 50px; /* Push menu down to start below the header */
                left: -100%; /* Slide from left */
                width: 85%;
                max-width: 320px;
                height: calc(100vh - 40px); /* Adjust height to fill remaining screen */
                background: #111; /* Deep black */
                padding: 2rem; /* Reduced top padding since box is moved down */
                transition: cubic-bezier(0.19, 1, 0.22, 1) 0.6s; /* High-end ease */
                z-index: 99; /* Below header (100) but above content */
                display: flex;
                flex-direction: column;
                border-right: 1px solid rgba(255, 255, 255, 0.05);
                box-shadow: 10px 0 30px rgba(0,0,0,0.5);
            }
            
            nav.active {
                left: 0;
            }

            /* Streetwear Typography */
            nav ul {
                flex-direction: column;
                gap: 0;
                width: 100%;
            }

            nav ul li {
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                overflow: hidden;
            }

            nav a {
                display: block;
                font-size: 1.8rem;
                font-weight: 800;
                text-transform: uppercase;
                color: #888;
                padding: 1.2rem 0;
                letter-spacing: -1px;
                transition: all 0.3s ease;
                transform: translateX(0);
            }

            nav a:hover, nav a.active {
                color: var(--white);
                padding-left: 10px;
                color: var(--accent);
            }
            
            /* Remove the default underline animation from desktop */
            nav a::after { display: none; }

            /* 4. Background Blur Overlay */
            .menu-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.3);
                backdrop-filter: blur(8px); /* The Blur Effect */
                -webkit-backdrop-filter: blur(8px);
                z-index: 98; /* Below Nav */
                opacity: 0;
                visibility: hidden;
                transition: all 0.4s ease;
            }

            .menu-overlay.active {
                opacity: 1;
                visibility: visible;
            }
            
            /* Add a decorative watermark */
            nav::before {
                content: 'URBAN';
                position: absolute;
                bottom: -20px;
                right: -20px;
                font-size: 8rem;
                font-weight: 900;
                color: rgba(255,255,255,0.02);
                z-index: -1;
                pointer-events: none;
                transform: rotate(-10deg);
            }
        }
        /* =============================================================== */
/* FINAL FIX: DISABLE ALL HOVER ANIMATIONS ON MOBILE               */
/* Paste this at the VERY END of your style.css file               */
/* =============================================================== */

@media (max-width: 1024px) { /* Increased breakpoint to cover tablets too */
    
    /* 1. Stop the Product Card from lifting (translateY) */
    .product-card:hover {
        transform: none !important;
        box-shadow: var(--card-shadow) !important; /* Resets to default shadow */
    }

    /* 2. Stop the Product Image from zooming (scale) */
    .product-card:hover .product-img img {
        transform: none !important;
    }
    
    /* 3. Stop the Category Cards from lifting/zooming */
    .category-card:hover {
        transform: none !important;
        box-shadow: var(--card-shadow) !important;
    }
    
    .category-card:hover .category-img img {
        transform: none !important;
    }

    /* 4. Disable Quick View icon appearing on tap */
    .card:hover .quick-view-icon {
        opacity: 1 !important; /* Keep visible if you want, or 0 to hide */
        transform: translateY(0) !important;
    }
}

@media (min-width: 1024px) {
    /* This specifically targets .product-img inside the .products-grid */
    .products-grid .product-card .product-img {
        height: 400px !important; 
    }
}
/* =============================================================== */
/* DISTRACTION-FREE CHECKOUT HEADER                                */
/* Paste this at the VERY END of your style.css file               */
/* =============================================================== */

header.checkout-mode {
    justify-content: center !important; /* Center the logo */
    transform: none !important; /* Prevent the header from sliding up */
}

/* Hide navigation, icons, and mobile menu button */
header.checkout-mode nav,
header.checkout-mode .nav-icons,
header.checkout-mode .mobile-menu-btn {
    display: none !important;
}

/* Reset logo positioning */
header.checkout-mode .logo {
    transform: none !important; 
    margin: 0 auto !important;
    order: unset !important;
}

html, body {
    overscroll-behavior-y: none; /* Prevents pull-to-refresh bounce */
}
.logo {
    font-family: 'Bebas Neue', sans-serif; /* The Tall Bold Font */
    font-size: 2rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px; /* Wide spacing */
    text-transform: uppercase;
    font-weight: 400;
    transition: letter-spacing 0.3s ease;
}

.logo:hover {
    letter-spacing: 4px; /* Expands when you hover */
}
header {
     padding: 0.2rem 5%; /* Reduced from 1.2rem */
}
.logo {
            z-index: 101; /* Ensures logo stays visible over mobile menu */
        }
.nav-icons {
    z-index: 101;
}
/* --- FIX: Restore margins for elements below the full-width image --- */
@media (max-width: 768px) {
    /* 1. Quality Guarantee Image */
    .quality-guarantee-img {
        width: calc(100% - 2.4rem) !important; /* Keeps it perfectly aligned with text */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 2, 3 & 4. Ratings, Review Photos, and FAQ Sections */
    .ratings-section,
    .faq-section {
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }
}
/* --- NEW Sticky Quick View Design --- */

    .qv-panel {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    /* Top Row */
    .qv-row-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .qv-product-group {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .qv-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #eee;
    background-color: #f5f5f5; /* Shows a grey box while loading */
    display: block;
}

    .qv-pricing {
        display: flex;
        flex-direction: column;
        line-height: 1.5;
        padding-top: 0rem;
        padding-left: 0.4rem;
    }

    .qv-price-row {
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .qv-current-price {
        font-size: 1.1rem;
        font-weight: 700;
        color: #000;
    }

    .qv-original-price {
        font-size: 0.85rem;
        text-decoration: line-through;
        color: #999;
    }

    .qv-discount-tag {
        font-size: 0.7rem;
        color: #d32f2f;
        font-weight: 600;
        background: #ffebee;
        padding: 0px 6px;
        border-radius: 4px;
        width: fit-content;
    }

    .qv-size-guide {
        font-size: 0.8rem;
        color: #666;
        text-decoration: underline;
    }

    /* Middle Row (Sizes) */
    .qv-row-middle {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .qv-label {
        font-weight: 600;
        font-size: 0.9rem;
        color: #333;
        min-width: 40px;
    }

    .qv-size-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar Firefox */
    }
    .qv-size-scroll::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome */

    .qv-size-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
        font-size: 0.85rem;
        font-weight: 500;
        flex-shrink: 0;
        cursor: pointer;
        transition: all 0.2s;
    }

    .qv-size-btn.active {
        background: #000;
        color: #fff;
        border-color: #000;
        transform: scale(1.05);
    }

    /* Bottom Row (Button) */
    .qv-row-bottom {
        width: 100%;
    }

    .qv-add-btn {
        width: 100%;
        background: #000;
        color: #fff;
        border: none;
        padding: 14px;
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 10px;
        cursor: pointer;
        letter-spacing: 0.5px;
    }
    
    .qv-add-btn:active {
        transform: scale(0.98);
        background: #333;
    }

    /* The Shake Animation */
    @keyframes subtle-shake {
        0% { transform: translateX(0); }
        10% { transform: translateX(-3px); }
        20% { transform: translateX(3px); }
        30% { transform: translateX(-3px); }
        40% { transform: translateX(3px); }
        50% { transform: translateX(0); }
        100% { transform: translateX(0); }
    }

    /* This class will be added/removed by JS */
    .shake-now {
        animation: subtle-shake 0.7s ease-in-out;
    }

    /* Adjust page padding so sticky bar doesn't cover content */
    .product-page {
        padding-bottom: 220px !important;
    }
    .sticky-actions {
        position: fixed !important;
        bottom: 0 !important;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
        z-index: 50;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        
        /* DRASTICALLY REDUCED PADDING */
        padding: 5px 12px; 
        /* Minimal space for iPhone home bar */
        padding-bottom: calc(5px + env(safe-area-inset-bottom, 5px));
        
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        transform: translateY(0) !important;
    }
    /* Initially hide the top and middle rows */
    .qv-row-top, 
    .qv-row-middle {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-bottom: 0;
        transition: all 0.3s ease;
    }

    /* When scrolled: Show the details */
    .sticky-actions.revealed .qv-row-top {
        max-height: 80px;
        opacity: 1;
        margin-bottom: 12px;
    }

    .sticky-actions.revealed .qv-row-middle {
        max-height: 60px;
        opacity: 1;
        margin-bottom: 15px;
    }
    

    /* Make it visible when the 'revealed' class is added by JS */
    .sticky-actions.revealed {
        transform: translateY(0);
    }

    /* 1. Tall Thumbnail covering Title and Sizes */
    .qv-thumb {
        position: absolute;
        left: 15px;
        top: 12px;
        width: 65px !important;
        height: 95px !important; /* Adjust this to cover your title+sizes exactly */
        object-fit: cover;
        border-radius: 8px;
        z-index: 2;
        pointer-events: none;
        -webkit-user-drag: none;
    }

    /* 2. Push content to the right of thumbnail */
    .qv-row-top, .qv-row-middle {
        margin-left: 75px; /* Creates space for the image */
        padding: 0 !important;
        width: auto;
    }

    .qv-size-guide-btn {
        font-size: 0.7rem !important;
        text-decoration: underline;
        color: #666;
        white-space: nowrap;
    }

    .qv-label {
        display: none !important; /* Removed "Size:" text */
    }

    /* 4. Sizes Row */
    .qv-row-middle {
        margin-bottom: 12px !important;
    }

    /* 5. Add to Cart Button (Full Width) */
    .qv-row-bottom {
        width: 100%;
        margin-top: 0px;
        padding: 0;
        z-index: 100;
    }

    .qv-add-btn {
        width: 100%;
        padding: 14px !important;
        border-radius: 12px;
    }
   

    /* Initially hide the top and middle rows with ZERO margin */
    .qv-row-top, 
    .qv-row-middle {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-bottom: 0 !important; /* Important: prevents ghost spacing */
        transition: all 0.3s ease;
    }

    /* Only add margin when revealed */
    .sticky-actions.revealed .qv-row-top {
        max-height: 80px;
        opacity: 1;
        margin-bottom: 8px !important;
    }

    .sticky-actions.revealed .qv-row-middle {
        max-height: 60px;
        opacity: 1;
        margin-bottom: 10px !important;
    }
    /* =============================================================== */
/* DESKTOP VS MOBILE BUTTON LOGIC                                  */
/* =============================================================== */

/* 1. By default (Desktop), show the normal buttons */
.actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem; /* Adds spacing from the element above */
}

/* 2. On Mobile, HIDE the normal buttons so we only see the sticky bar */
@media (max-width: 768px) {
    .actions {
        display: none !important;
    }
    
    /* Ensure the sticky bar is visible on mobile (this matches your existing logic) */
    .sticky-actions {
        display: flex !important;
    }
}

/* 3. On Desktop, ensure sticky bar stays HIDDEN (Safety Check) */
@media (min-width: 769px) {
    .sticky-actions {
        display: none !important;
    }
}
/* Mobile: Hide Size/Qty but ALLOW Colors */
@media (max-width: 768px) {
    /* 1. Specifically hide Size and Quantity groups */
    .option-group:has(.size-options),
    .option-group:has(.quantity-selector) {
        display: none !important;
    }

    /* 2. Ensure Color group is visible by default (JS will hide it if only 1 color exists) */
    .option-group:has(.color-options) {
        display: block !important;
    }

    /* 3. Fallback for inner elements */
    .size-options,
    .quantity-selector {
        display: none !important;
    }
}

/* Ensure they are visible on Desktop */
@media (min-width: 769px) {
    .option-group,
    .size-options {
        display: block; /* or flex, depending on your layout */
    }
    
    .size-options {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
}
/* 1. Hide the social links by default (Desktop) */
.mobile-only-social {
    display: none !important;
}

/* 2. Show the social links only on Mobile */
@media (max-width: 768px) {
    .mobile-only-social {
        display: flex !important;
    }
}
/* Update this for the home page grid */
.products-grid {
    display: grid;
    /* Forces exactly 4 columns on desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 2rem;
    padding: 2rem 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 items on tablets */
    }
}
/* ========================================= */
/* NEW COMPACT PRODUCT HEADER STYLES         */
/* ========================================= */

.product-header-compact {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--light-grey);
    padding-bottom: 1rem;
}

/* Row 1: Meta (Price & Ratings) */
.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem; /* Tight gap between meta and title */
}

/* Force the existing price container to behave inline */
.product-details .compact-price-group {
    margin-bottom: 0 !important; /* Override existing margin */
    gap: 10px;
}

.product-details .compact-price-group .product-discounted-price {
    font-size: 1.4rem; /* Slightly smaller for compact look */
}

/* Cleaner Ratings (Replaces the old text-shadow stars) */
.rating-wrapper-clean {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars-clean {
    color: var(--accent); /* Uses your existing gold variable */
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.review-count-clean {
    font-size: 0.85rem;
    color: var(--grey);
    font-weight: 500;
}

/* Row 2: Title & Share */
.title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns to top in case title wraps */
    gap: 15px;
}

.product-details .title-row h1 {
    margin-bottom: 0; /* Remove default h1 margin */
    font-size: 1.6rem;
    line-height: 1.2;
    margin-top: 0;
}

.share-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--black);
    cursor: pointer;
    padding: 5px;
    flex-shrink: 0; /* Prevents button from squishing */
    transition: transform 0.2s ease, color 0.2s ease;
}

.share-btn:hover {
    color: var(--accent);
    transform: scale(1.1);
}

/* Mobile Adjustments */
@media (max-width: 576px) {
    .product-details .compact-price-group .product-discounted-price {
        font-size: 1.2rem;
    }
    
    .product-details .compact-price-group .product-discount-percentage {
        font-size: 0.8rem;
        padding: 2px 6px;
    }

    .product-details .title-row h1 {
        font-size: 1.3rem;
    }
    
    .review-count-clean {
        font-size: 0.75rem;
    }
}
.products-grid .product-card .product-badge {
        font-size: 0.5rem !important;
        padding: 1px 4px !important;
        font-weight: 600 !important;
    }
/* Reduces the gap below the "Shop by Category" title */
.categories-section .section-title {
  margin-bottom:0.5rem;
}

/* --- Vertical Rotating Trust Bar Styles --- */
.trust-strip {
    height: 36px; /* Fixed height for the bar */
    overflow: hidden;
    background-color: #d6f1f0; /* Very light grey background */
    border-radius: 6px;
    margin-bottom: 0.5rem; /* Space below the bar */
    position: relative;
    border: 1px solid #eaeaea;
}

.trust-strip-track {
    display: flex;
    flex-direction: column;
    /* 6s total duration: 3s per item */
    animation: scrollUpVertical 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.trust-strip-item {
    height: 36px; /* Must match container height */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
    width: 100%;
}

.trust-strip-item img {
    height: 18px;
    width: auto;
    display: block;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none;
    pointer-events: none;
}

/* Keyframes for sliding up, pausing, then sliding again */
@keyframes scrollUpVertical {
    0%, 40% {
        transform: translateY(0); /* Show Item 1 */
    }
    50%, 90% {
        transform: translateY(-36px); /* Slide up to Item 2 & Pause */
    }
    100% {
        transform: translateY(-72px); /* Slide to Duplicate Item 1 (Instant Reset) */
    }
}

/* Mobile Adjustment for Font Size */
@media (max-width: 576px) {
    .trust-strip-item {
        font-size: 0.8rem;
        justify-content: center;
        padding-left: 10px;
    }
}