/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Ultra-Premium Dry Fruit Palette */
    --primary-color: #2b4a3c;
    /* Deep Majestic Emerald - Nature & Luxury */
    --secondary-color: #c5a47e;
    /* Champagne Gold/Almond Skin - Elegance */
    --accent-color: #d4af37;
    /* Metallic Gold - Wealth & High Quality */
    --dark-color: #1a1a1a;
    /* Pure Black/Charcoal for high contrast */
    --text-color: #444444;
    /* Dark Grey text for readability */
    --light-color: #fcfbf9;
    /* Pearl White/Off-white background */
    --white: #ffffff;

    --success-color: #27ae60;
    --danger-color: #c0392b;
    --warning-color: #f39c12;

    --border-radius: 0px;
    /* Sharp corners = High-end/Luxury fashion feel */
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Soft, diffused luxury shadow */
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    --heading-font: 'Playfair Display', serif;
    --body-font: 'Poppins', sans-serif;
}

body {
    font-family: var(--body-font);
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--light-color);
    font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    color: var(--dark-color);
    margin-bottom: 20px;
    font-weight: 700;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* Container */
.container {
    max-width: 1300px;
    /* Slightly wider for modern look */
    margin: 0 auto;
    padding: 0 30px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 35px;
    border: none;
    border-radius: 50px;
    /* Pill shape for buttons only */
    cursor: pointer;
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    transition: var(--transition);
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(43, 74, 60, 0.2);
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--dark-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(197, 164, 126, 0.4);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-3px);
}

.btn-block {
    width: 100%;
    display: block;
}

.btn-large {
    padding: 18px 45px;
    font-size: 16px;
}

.btn-sm {
    padding: 10px 25px;
    font-size: 13px;
}

/* Header */
.header {
    background-color: var(--white);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-bar {
    background-color: var(--dark-color);
    color: #e0d0b0;
    padding: 12px 0;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info span {
    margin-right: 25px;
    display: inline-flex;
    align-items: center;
}

.contact-info i {
    margin-right: 8px;
    color: var(--accent-color);
}

.top-links a {
    color: #e0d0b0;
    margin-left: 25px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.8;
}

.top-links a:hover {
    color: var(--white);
    opacity: 1;
}

.main-header {
    padding: 30px 0;
    background-color: var(--white);
    transition: all 0.3s ease;
}

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

.logo a.image-logo-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    text-decoration: none;
}

.main-logo-img {
    height: 60px;
    width: auto;
    object-fit: contain;
    margin-right: -25px;
}

.title-logo-text {
    height: 65px;
    width: auto;
    object-fit: contain;
    margin-top: 5px;
    margin-left: -5px;
}

@media (max-width: 768px) {
    /* Styles are now handled in the global mobile header block at bottom of file to ensure override */
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 40px;
}

.main-nav a {
    color: var(--dark-color);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 8px;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

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

.main-nav a:hover::after {
    width: 100%;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 150%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-width: 240px;
    display: none;
    flex-direction: column;
    padding: 15px 0;
    border-radius: 4px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-top: 3px solid var(--primary-color);
}

/* Show dropdown ONLY on active class (click only) */
.dropdown.active .dropdown-menu {
    display: flex;
    opacity: 1;
    visibility: visible;
    top: 100%;
}

.dropdown-menu a {
    padding: 12px 25px;
    color: var(--text-color);
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0.5px;
    display: block;
}

.dropdown-menu a:hover {
    background-color: #f9f5f0;
    color: var(--primary-color);
    padding-left: 30px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.search-box {
    position: relative;
}

.search-box input {
    padding: 12px 20px;
    padding-right: 45px;
    border: 1px solid #eee;
    background-color: #fcfcfc;
    border-radius: 50px;
    width: 250px;
    font-family: var(--body-font);
    font-size: 13px;
    transition: all 0.3s ease;
}

.search-box input:focus {
    width: 280px;
    border-color: var(--secondary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    outline: none;
}

.search-box button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    transition: transform 0.3s ease;
}

.search-box button:hover {
    transform: translateY(-50%) scale(1.1);
}

.cart-icon {
    position: relative;
    font-size: 22px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.cart-icon:hover {
    transform: translateY(-2px);
    color: var(--secondary-color);
}

.cart-count {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: var(--secondary-color);
    color: var(--white);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    z-index: 2000;
    transition: var(--transition);
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header {
    padding: 20px;
    background-color: var(--primary-color);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-mobile-menu {
    background: none;
    border: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
}

.mobile-nav ul {
    list-style: none;
}

.mobile-nav a {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

/* Hero Banner Slider - Normal Website Style */
.hero-banner-slider {
    padding: 30px 0;
    background-color: transparent;
}

.banner-container {
    position: relative;
    width: 100%;
    padding-bottom: 35%;
    /* 2.85:1 aspect ratio */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    /* Better shadow */
    background-color: var(--white);
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease-in-out;
    transform: scale(1.05);
}

.banner-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transform: scale(1);
}

.banner-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Banner Navigation Arrows */
.banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border: none;
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
}

.banner-container:hover .banner-nav {
    opacity: 1;
}

.banner-nav:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 25px rgba(43, 74, 60, 0.4);
}

.banner-nav.prev {
    left: 20px;
}

.banner-nav.next {
    right: 20px;
}

/* Banner Dots */
.banner-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.banner-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.banner-dots .dot:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

.banner-dots .dot.active {
    background: var(--secondary-color);
    width: 12px;
    /* Keep circle */
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

/* Responsive Banner */
@media (max-width: 1200px) {
    .banner-container {
        padding-bottom: 45%;
        /* Slightly taller on medium screens */
    }
}

@media (max-width: 968px) {
    .hero-banner-slider {
        padding: 20px 0;
    }

    .banner-container {
        padding-bottom: 50%;
        border-radius: 12px;
    }

    .banner-slide img {
        border-radius: 12px;
    }

    .banner-nav {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .banner-nav.prev {
        left: 10px;
    }

    .banner-nav.next {
        right: 10px;
    }
}

@media (max-width: 576px) {
    .hero-banner-slider {
        padding: 0;
    }

    .hero-banner-slider .container {
        padding: 0;
        max-width: 100%;
    }

    .banner-container {
        padding-bottom: 100%;
        /* Tall banner on mobile like reference */
        border-radius: 0;
    }

    .banner-slide img {
        border-radius: 0;
    }

    /* Mobile: Horizontal carousel — real strip slide */
    .banner-container {
        padding-bottom: 0;
        height: 100vw;
    }

    .banner-track {
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform 0.45s ease-in-out;
    }

    .banner-track .banner-slide {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .banner-track .banner-slide.active {
        transform: none;
    }

    .banner-track .banner-slide.exit-left,
    .banner-track .banner-slide.exit-right,
    .banner-track .banner-slide.enter-left,
    .banner-track .banner-slide.enter-right {
        transform: none;
        visibility: visible;
    }

    .banner-nav {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .banner-dots {
        bottom: 15px;
    }

    .banner-dots .dot {
        width: 8px;
        height: 8px;
    }

    .banner-dots .dot.active {
        width: 22px;
    }
}

/* Mobile: Reduce vertical spacing between home sections */
@media (max-width: 768px) {
    .features-section {
        padding: 25px 0;
    }

    .categories-section {
        padding: 20px 0 25px;
    }

    .recently-added-section {
        padding: 15px 0 20px;
    }

    .products-section {
        padding: 25px 0;
    }

    .trusted-videos-section {
        padding: 20px 0;
    }

    .testimonials-section {
        padding: 25px 0;
    }

    .newsletter-section {
        padding: 25px 0;
    }

    .section-header {
        margin-bottom: 15px;
    }

    .section-header h2 {
        font-size: 20px;
    }
}

/* Features Section */
.features-section {
    padding: 60px 0;
    background-color: var(--white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-card {
    text-align: center;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card i {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.feature-card h3 {
    margin-bottom: 5px;
    font-size: 18px;
}

.feature-card p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

/* Mobile Features Section Optimization */
@media (max-width: 768px) {
    .features-section {
        padding: 20px 0;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 items per row */
        gap: 15px;
        /* Smaller gap */
    }

    .feature-card {
        padding: 15px 10px;
        /* Compact padding */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid #eee;
        /* Outline for separation */
    }

    .feature-card i {
        font-size: 28px;
        /* Smaller icon */
        margin-bottom: 10px;
    }

    .feature-card h3 {
        font-size: 13px;
        /* Smaller title */
        font-weight: 700;
        margin-bottom: 3px;
    }

    .feature-card p {
        font-size: 11px;
        /* Smaller description */
        line-height: 1.3;
    }
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.section-header p {
    color: #777;
    font-size: 18px;
}

/* Categories Section - Horizontal Scroll */
.categories-section {
    padding: 30px 0 50px;
    background-color: transparent;
}

.categories-section .section-header {
    margin-bottom: 30px;
}

.categories-scroll-container {
    position: relative;
    margin: 0 auto;
    max-width: 100%;
}

.categories-horizontal {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 15px 5px 25px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    justify-content: flex-start;
    /* Or center if you prefer centered when few items */
}

/* Optional: center items if they don't overflow */
@media (min-width: 1200px) {
    .categories-horizontal {
        justify-content: center;
    }
}

.categories-horizontal::-webkit-scrollbar {
    display: none;
}

.category-item {
    flex: 0 0 auto;
    width: 110px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.category-item a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.category-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 3px solid var(--white);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

.category-item:hover .category-circle {
    box-shadow: 0 8px 20px rgba(43, 74, 60, 0.25);
    border-color: var(--secondary-color);
    transform: scale(1.05);
}

.category-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--primary-color);
    background: linear-gradient(135deg, #fff8f0 0%, #ffe8d6 100%);
}

.category-item h3 {
    font-size: 13px;
    color: var(--dark-color);
    font-weight: 600;
    margin: 0;
    padding: 0;
    font-family: var(--body-font);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.category-item:hover h3 {
    color: var(--primary-color);
}

/* Scroll Buttons */
.scroll-btn {
    position: absolute;
    top: 45%;
    /* Slightly up to align with circles */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
}

.categories-scroll-container:hover .scroll-btn {
    opacity: 1;
}

.scroll-btn:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 5px 15px rgba(43, 74, 60, 0.4);
}

.scroll-left {
    left: -15px;
}

.scroll-right {
    right: -15px;
}

/* Responsive Categories */
@media (max-width: 968px) {
    .categories-section {
        padding: 20px 0 40px;
    }

    .category-item {
        width: 100px;
    }

    .category-circle {
        width: 100px;
        height: 100px;
    }

    .category-icon {
        font-size: 35px;
    }

    .category-item h3 {
        font-size: 12px;
    }

    .scroll-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
        opacity: 1;
        /* Always show on tablets/mobile or rely on touch */
    }
}

@media (max-width: 576px) {
    .categories-horizontal {
        gap: 15px;
        padding: 10px 10px 20px;
        justify-content: flex-start;
    }

    .category-item {
        width: 85px;
    }

    .category-circle {
        width: 85px;
        height: 85px;
        border-width: 2px;
    }

    .category-icon {
        font-size: 28px;
    }

    .category-item h3 {
        font-size: 11px;
    }

    .scroll-btn {
        display: none;
        /* Hide buttons on mobile, swipe is better */
    }
}

/* Recently Added Section */
.recently-added-section {
    padding: 30px 0;
    background-color: #fff;
}

.recently-added-scroll-wrapper {
    position: relative;
}

.recently-added-scroll-wrapper .scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #2b4a3c;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.2s;
}

.recently-added-scroll-wrapper .scroll-btn:hover {
    background: #1e3a2e;
}

.recently-added-scroll-wrapper .scroll-left-btn {
    left: -16px;
}

.recently-added-scroll-wrapper .scroll-right-btn {
    right: -16px;
}

.recently-added-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0 20px;
}

.recently-added-scroll::-webkit-scrollbar {
    display: none;
}

.recent-product-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.recent-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.recent-product-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.recent-product-image {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    background: #f5f5f5;
}

.recent-product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

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

.recent-product-image .discount-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #e74c3c;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.recent-product-info {
    padding: 12px;
}

.recent-product-info h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #2b4a3c;
    margin-bottom: 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recent-product-card .product-price {
    display: flex;
    align-items: center;
    gap: 6px;
}

.recent-product-card .product-actions {
    padding: 0 12px 12px;
}

.recent-product-card .product-actions .btn {
    width: 100%;
    padding: 8px;
    font-size: 13px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .recently-added-section {
        padding: 25px 0;
    }

    .recently-added-scroll-wrapper .scroll-btn {
        display: none !important;
    }

    .recent-product-card {
        flex: 0 0 160px;
    }

    .recent-product-info {
        padding: 10px;
    }

    .recent-product-info h3 {
        font-size: 13px;
    }

    .recent-product-card .product-actions .btn {
        font-size: 12px;
        padding: 6px;
    }
}

/* Products Section */
.products-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 40px;
    padding: 20px 0;
}

.product-card {
    background-color: var(--white);
    border-radius: 4px;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(43, 74, 60, 0.15);
    border-color: transparent;
}

.product-image {
    position: relative;
    height: 300px;
    overflow: hidden;
    background-color: #f8f8f8;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

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

.product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
    font-size: 50px;
    color: #e0d0b0;
}

.discount-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product-info {
    padding: 25px 20px 20px;
    text-align: center;
}

.product-info h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--dark-color);
    font-family: var(--body-font);
    font-weight: 500;
}

.product-info h3 a {
    color: inherit;
    transition: color 0.3s ease;
}

.product-info h3 a:hover {
    color: var(--primary-color);
}

.product-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
}

.original-price {
    text-decoration: line-through;
    color: #aaa;
    font-size: 14px;
    font-weight: 400;
}

.current-price {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
    font-family: var(--body-font);
}

.product-actions {
    padding: 0 20px 25px;
}

.add-to-cart {
    width: 100%;
    background-color: var(--white);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-size: 13px;
    letter-spacing: 1px;
    padding: 12px;
}

.add-to-cart:hover {
    background-color: var(--primary-color);
    color: var(--white);
    box-shadow: 0 5px 15px rgba(43, 74, 60, 0.3);
}

/* Testimonials */
.testimonials-section {
    padding: 60px 0;
    background-color: var(--white);
}

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

.testimonial-card {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.stars {
    color: #f39c12;
    margin-bottom: 15px;
}

.testimonial-card p {
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.8;
}

.customer-info h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

/* Newsletter */
.newsletter-section {
    padding: 60px 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
}

.newsletter-content {
    text-align: center;
}

.newsletter-content h2 {
    font-size: 36px;
    margin-bottom: 10px;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 600px;
    margin: 30px auto 0;
}

.newsletter-form input {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: var(--border-radius);
}

/* Footer */
.footer {
    background-color: #201a18;
    color: #e0d0b0;
    font-family: var(--body-font);
    border-top: 5px solid var(--primary-color);
}

.footer-top {
    padding: 80px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
}

.footer-col h3,
.footer-col h4 {
    margin-bottom: 20px;
    color: var(--white);
    font-family: var(--heading-font);
    font-size: 22px;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 15px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--secondary-color);
}

.footer-col p {
    margin-bottom: 25px;
    line-height: 1.8;
    color: #bbb;
    font-size: 14px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
    color: var(--secondary-color);
    border: 1px solid rgba(197, 164, 126, 0.4);
}

.social-links a:hover {
    background-color: var(--secondary-color);
    color: var(--dark-color);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(197, 164, 126, 0.4);
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #bbb;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.footer-col ul li a::before {
    content: '›';
    margin-right: 8px;
    color: var(--secondary-color);
    font-size: 18px;
    line-height: 1;
}

.footer-col ul li a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

.contact-list li {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    color: #bbb;
    font-size: 14px;
}

.contact-list i {
    margin-right: 15px;
    margin-top: 5px;
    color: var(--secondary-color);
    font-size: 16px;
}

.footer-bottom {
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #1a1514;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #888;
}

.payment-methods {
    display: flex;
    gap: 20px;
    font-size: 24px;
    color: #888;
}

/* Page Header */
.page-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    padding: 40px 0;
    text-align: center;
}

.page-header h1 {
    font-size: 36px;
    margin-bottom: 15px;
}

.breadcrumb {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Products Page */
.products-page {
    padding: 60px 0;
}

.products-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
}

.products-sidebar {
    background-color: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: fit-content;
}

.filter-section {
    margin-bottom: 30px;
}

.filter-section h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

.category-filter {
    list-style: none;
}

.category-filter li {
    margin-bottom: 10px;
}

.category-filter a {
    display: block;
    padding: 10px;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.category-filter a:hover,
.category-filter a.active {
    background-color: var(--light-color);
    color: var(--primary-color);
}

.price-filter {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-inputs input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--white);
    border-radius: var(--border-radius);
}

.sort-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-filter select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.page-link {
    padding: 10px 15px;
    background-color: var(--white);
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.page-link:hover,
.page-link.active {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.no-products {
    text-align: center;
    padding: 60px 20px;
    background-color: var(--white);
    border-radius: var(--border-radius);
}

.no-products i {
    font-size: 64px;
    color: #ccc;
    margin-bottom: 20px;
}

/* Product Detail Page */
.product-detail {
    padding: 80px 0;
    background-color: #fdfcf8;
}

.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
}

.product-images .main-image {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 25px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.product-images .main-image img {
    width: 100%;
    height: 550px;
    object-fit: cover;
}

.thumbnail-images {
    display: flex;
    gap: 15px;
}

.thumbnail {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
    opacity: 0.7;
}

.thumbnail:hover,
.thumbnail.active {
    border-color: var(--primary-color);
    opacity: 1;
    transform: translateY(-2px);
}

.product-info-detail {
    padding-top: 20px;
}

.product-info-detail h1 {
    font-size: 42px;
    margin-bottom: 20px;
    font-family: var(--heading-font);
    color: var(--dark-color);
    line-height: 1.2;
}

.product-short-desc {
    color: #666;
    margin-bottom: 30px;
    font-size: 18px;
    background-color: transparent;
    line-height: 1.8;
}

.product-price-detail {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.product-price-detail .current-price {
    font-size: 36px;
    color: var(--primary-color);
    font-family: var(--body-font);
}

.discount-percent {
    background-color: var(--accent-color);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.product-meta {
    margin-bottom: 40px;
    padding: 0;
    background-color: transparent;
}

.meta-item {
    margin-bottom: 12px;
    font-size: 15px;
    color: #555;
}

.meta-item strong {
    color: var(--dark-color);
    margin-right: 8px;
}

.in-stock {
    color: #27ae60;
    font-weight: 600;
}

.out-of-stock {
    color: #c0392b;
    font-weight: 600;
}

.product-actions-detail {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.quantity-selector {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 30px;
    overflow: hidden;
    height: 50px;
    align-items: center;
    background-color: var(--white);
}

.qty-btn {
    padding: 0 20px;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
    color: var(--dark-color);
    font-size: 18px;
}

.qty-btn:hover {
    background-color: #f5f5f5;
    color: var(--primary-color);
}

.quantity-selector input {
    width: 60px;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-color);
    padding: 0;
}

.product-actions-detail .btn {
    flex: 1;
    min-width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    letter-spacing: 1px;
}

.product-features {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 0;
}

.feature-item i {
    color: var(--secondary-color);
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(197, 164, 126, 0.1);
    border-radius: 50%;
}

.product-tabs {
    margin-top: 60px;
}

.tabs-header {
    display: flex;
    gap: 5px;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
}

.tab-btn {
    padding: 15px 30px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #777;
    position: relative;
    transition: var(--transition);
}

.tab-btn.active {
    color: var(--primary-color);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary-color);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
}

.info-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.related-products {
    margin-top: 60px;
}

.related-products h2 {
    margin-bottom: 30px;
}

/* Auth Pages */
.auth-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.auth-box {
    max-width: 500px;
    margin: 0 auto;
    background-color: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.auth-box h2 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.auth-box>p {
    text-align: center;
    color: #777;
    margin-bottom: 30px;
}

.auth-form .form-group {
    margin-bottom: 20px;
}

.auth-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-size: 16px;
}

.form-group-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
}

@media (max-width: 480px) {
    .form-group-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.checkbox-label span {
    color: #555;
}

.checkbox-label a {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 600;
}

.auth-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.auth-footer a {
    color: var(--primary-color);
    font-weight: 600;
}

/* Cart Page */
.cart-section {
    padding: 60px 0;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
}

.cart-items {
    background-color: var(--white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.cart-header {
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cart-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.cart-item-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.cart-item-details {
    flex: 1;
}

.cart-item-details h3 {
    margin-bottom: 10px;
}

.cart-item-price {
    margin-bottom: 10px;
}

.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.cart-item-total {
    font-size: 20px;
}

.btn-remove {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 18px;
    transition: var(--transition);
}

.btn-remove:hover {
    color: #c0392b;
}

.cart-summary {
    background-color: var(--white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: fit-content;
}

.cart-summary h3 {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.summary-row.total {
    font-size: 20px;
    font-weight: bold;
    padding-top: 15px;
    border-top: 2px solid #eee;
    margin-top: 15px;
}

.shipping-info {
    background-color: #fff3cd;
    padding: 15px;
    border-radius: var(--border-radius);
    margin: 15px 0;
    font-size: 14px;
    display: flex;
    gap: 10px;
}

.empty-cart {
    text-align: center;
    padding: 100px 20px;
    background-color: var(--white);
    border-radius: var(--border-radius);
}

.empty-cart i {
    font-size: 80px;
    color: #ccc;
    margin-bottom: 20px;
}

/* Profile Page */
.profile-section {
    padding: 80px 0;
    background-color: #fdfcf8;
}

.profile-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 50px;
}

.profile-sidebar {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 30px;
    height: fit-content;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.profile-user {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
}

.user-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar i {
    font-size: 80px;
    color: var(--secondary-color);
}

.profile-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-nav a {
    padding: 14px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition);
    font-weight: 500;
    color: var(--text-color);
}

.profile-nav a:hover,
.profile-nav a.active {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateX(5px);
    box-shadow: 0 4px 10px rgba(43, 74, 60, 0.3);
}




.profile-main {
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 40px;
}

.profile-tab {
    display: none;
}

.profile-tab.active {
    display: block;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    padding: 30px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-card i {
    font-size: 48px;
}

.stat-card h3 {
    font-size: 32px;
    margin-bottom: 5px;
}

.order-card {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.order-number {
    font-weight: bold;
    color: var(--primary-color);
}

.status-badge {
    padding: 5px 15px;
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.status-processing {
    background-color: #cfe2ff;
    color: #084298;
}

.status-shipped {
    background-color: #d1ecf1;
    color: #0c5460;
}

.status-delivered {
    background-color: #d4edda;
    color: #155724;
}

.status-cancelled {
    background-color: #f8d7da;
    color: #721c24;
}

.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.addresses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.address-card {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: var(--border-radius);
    position: relative;
}

.default-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--success-color);
    color: var(--white);
    padding: 5px 10px;
    border-radius: var(--border-radius);
    font-size: 12px;
}

.address-type {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.address-card h4 {
    margin-bottom: 5px;
}

.address-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.address-form {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
}

/* Alerts */
.alert {
    padding: 15px 20px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/* Scroll to Top */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    z-index: 999;
}

.scroll-to-top:hover {
    background-color: var(--secondary-color);
    transform: translateY(-3px);
}

.scroll-to-top.show {
    display: flex;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .products-layout {
        grid-template-columns: 1fr;
    }

    .products-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }

    .header-content {
        flex-wrap: wrap;
    }

    .main-nav {
        display: none;
    }

    .search-box input {
        width: 200px;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .product-detail-layout {
        grid-template-columns: 1fr;
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 24px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 5px;
        /* Prevent shadow cutout */
    }

    .product-card {
        margin-bottom: 0;
        border-radius: 8px;
        /* Better rounded corners */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        /* distinct shadow to separate from bg */
        border: 1px solid #eaeaea;
        /* clear boundary */
    }

    .product-image {
        height: 150px;
        /* Reduced height for mobile */
    }

    .product-info {
        padding: 10px;
    }

    .product-info h3 {
        font-size: 13px;
        margin-bottom: 5px;
        height: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-price {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .product-card .btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .search-box {
        display: none;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.no-data {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    justify-content: space-around;
    padding: 8px 0;
    height: 60px;
}

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #777;
    font-size: 10px;
    position: relative;
    flex: 1;
    transition: color 0.3s;
}

.mobile-bottom-nav .nav-item i {
    font-size: 18px;
    margin-bottom: 4px;
}

.mobile-bottom-nav .nav-item.active {
    color: var(--primary-color);
    font-weight: 600;
}

.cart-count-badge {
    position: absolute;
    top: -2px;
    right: calc(50% - 15px);
    background-color: #ff4757;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
}

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

    body {
        padding-bottom: 70px;
    }
}


/* Mobile Footer Visibility Control */
@media (max-width: 768px) {

    /* Hide regular footer on specific pages in mobile view */
    body.cart-page .footer,
    body.checkout-page .footer,
    body.products-page .footer,
    body.profile-page .footer {
        display: none;
    }

    /* Ensure bottom nav is always visible on top of everything */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        background-color: #fff !important;
        z-index: 2147483647 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        transform: none !important;
    }
}


/* Mobile Cart Page Optimizations */
@media (max-width: 768px) {

    /* Hide specific elements on Mobile Cart */
    body.cart-page .page-header,
    body.cart-page .cart-header,
    body.cart-page .scroll-to-top,
    body.cart-page .cart-summary .btn-outline {
        display: none !important;
    }

    /* Reduce spacing */
    body.cart-page .cart-section {
        padding: 15px 0 80px 0;
    }

    body.cart-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Remove standard table-like styling */
    body.cart-page .cart-items {
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Slick Mobile Cart Card Style */
    body.cart-page .cart-item {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        border-radius: 16px;
        padding: 15px;
        margin-bottom: 15px;
        border: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        position: relative;
        overflow: hidden;
    }

    body.cart-page .cart-item-image {
        width: 85px;
        height: 85px;
        margin-right: 15px;
        border-radius: 12px;
        overflow: hidden;
        background-color: #f8f8f8;
    }

    body.cart-page .cart-item-details {
        width: calc(100% - 100px);
        padding-right: 25px;
        /* Space for delete button */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body.cart-page .cart-item-details h3 {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 6px;
        line-height: 1.3;
        color: #333;
    }

    /* Styling Price in details */
    body.cart-page .cart-item-price {
        margin-bottom: 0px;
    }

    body.cart-page .current-price {
        font-size: 14px;
        font-weight: 600;
        color: #666;
    }

    /* Stock Info positioned next to Quantity on Mobile */
    body.cart-page .stock-info {
        display: block;
        position: absolute;
        bottom: 23px;
        left: 155px;
        /* Increased from 130px to prevent overlap */
        font-size: 11px;
        margin: 0;
        z-index: 2;
    }

    body.cart-page .in-stock {
        color: #27ae60;
        background-color: #eafaf1;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
    }

    body.cart-page .out-of-stock {
        color: #c0392b;
        background-color: #fadbd8;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
    }

    /* Actions row with slicker look */
    body.cart-page .cart-item-actions {
        width: 100%;
        margin-top: 15px;
        padding-top: 0;
        border-top: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

    /* Modern Minimal Remove Button */
    body.cart-page .btn-remove {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        background-color: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ddd;
        transition: color 0.2s;
    }

    body.cart-page .btn-remove:hover,
    body.cart-page .btn-remove:active {
        color: #ff4757;
        background-color: #fff0f0;
    }

    body.cart-page .btn-remove i {
        margin: 0;
        font-size: 14px;
    }

    /* Pill Shaped Quantity Controller */
    body.cart-page .quantity-selector {
        margin: 0;
        background-color: #f5f5f5;
        border-radius: 20px;
        padding: 2px;
        display: flex;
        align-items: center;
    }

    body.cart-page .qty-btn {
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        color: #333;
        border: none;
        margin: 0;
    }

    body.cart-page .quantity-selector input {
        height: 32px;
        width: 35px;
        font-size: 14px;
        font-weight: 600;
        background: transparent;
        border: none;
        padding: 0;
        text-align: center;
        color: #333;
    }

    body.cart-page .cart-item-total {
        font-size: 18px;
        font-weight: 700;
        color: var(--primary-color);
        letter-spacing: -0.5px;
    }

    body.cart-page .cart-summary {
        margin-bottom: 20px;
        border-radius: 16px;
        border: none;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.04);
        padding: 20px;
    }

    body.cart-page .summary-row {
        font-size: 14px;
        margin-bottom: 12px;
    }

    body.cart-page .summary-row.total {
        font-size: 18px;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed #eee;
    }
}

body.cart-page .cart-summary {
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.03);
}


/* Mobile Header Search & Layout Changes */
.mobile-search-trigger,
.mobile-search-bar {
    display: none;
}

@media (max-width: 768px) {

    /* Hide top cart icon on mobile */
    .header-actions .cart-icon {
        display: none;
    }

    /* Show search trigger */
    .mobile-search-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        font-size: 20px;
        color: var(--secondary-color);
        margin: 0;
        /* Removed margin */
        cursor: pointer;
        width: 40px;
        height: 40px;
        padding: 0;
    }

    /* Reduce gap in header actions for mobile */
    .header-actions {
        gap: 5px;
    }

    /* Mobile Search Bar overlay */
    .mobile-search-bar {
        display: none;
        /* Toggled via JS */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 100;
        padding: 0 15px;
        align-items: center;
    }

    .mobile-search-bar.active {
        display: flex;
    }

    .mobile-search-bar form {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 10px;
    }

    .mobile-search-bar input {
        flex: 1;
        height: 40px;
        border: 1px solid #eee;
        background-color: #f9f9f9;
        border-radius: 20px;
        padding: 0 15px;
        font-size: 14px;
        outline: none;
    }

    .mobile-search-bar button {
        background: none;
        border: none;
        font-size: 18px;
        color: #555;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Ensure header container is relative for absolute search bar */
    .header-content {
        position: relative;
    }
}

/* Mobile Global Header Fixes (Flipkart Style) */
@media (max-width: 768px) {

    /* globally hide top bar */
    .top-bar {
        display: none !important;
    }

    /* Offset for sticky header to prevent overlap */
    .main-content {
        padding-top: 70px !important;
    }

    /* Global Compact Header */
    .header {
        height: auto;
        min-height: 60px;
        padding: 0;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        /* Slight shadow */
    }

    /* FORCE header container to be full width with no padding on mobile */
    .header .container {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .main-header {
        padding: 5px 0 !important;
        /* Force tight padding everywhere */
    }

    /* Consistent Header Content Alignment */
    .header-content {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap !important;
        padding: 0 15px !important;
        /* This provides the consistent spacing */
    }

    /* Consistent Logo Sizing */
    .logo {
        flex-shrink: 0;
    }

    .logo a.image-logo-link {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .main-logo-img {
        height: 40px;
        /* Slightly smaller to fit tight space */
        width: auto;
        margin-right: -10px;
        object-fit: contain;
    }

    .title-logo-text {
        height: 45px;
        width: auto;
        margin-left: -5px;
        margin-top: 3px;
        object-fit: contain;
    }

    /* Mobile Category Page Specifics (Flipkart Style) */
    /* Hide Page Header */
    body.products-page .page-header {
        display: none !important;
    }

    /* Reset Container padding */
    body.products-page .container {
        padding: 0;
        max-width: 100%;
        margin: 0;
        height: 100%;
        /* Ensure container takes full height */
    }

    body.products-page {
        overflow: hidden;
        /* Prevent body scroll on mobile */
        position: fixed;
        /* Lock body in place */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body.products-page .products-page {
        padding: 0;
        height: calc(100vh - 70px);
        overflow: hidden;
        margin-top: 0;
    }

    body.products-page .products-layout {
        display: grid !important;
        grid-template-columns: 90px 1fr;
        /* Slightly wider sidebar */
        gap: 0;
        height: 100%;
        margin: 0;
        align-items: stretch;
    }

    /* Left Sidebar Styling */
    body.products-page .products-sidebar {
        display: block !important;
        background-color: #f0f2f5;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
        height: 100%;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        width: 100%;
        overscroll-behavior: contain;
        /* Prevent scroll chaining */
        -webkit-overflow-scrolling: touch;
    }

    /* Sidebar Links (Categories) */
    body.products-page .products-sidebar .category-filter {
        display: flex;
        flex-direction: column;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        padding-bottom: 80px;
        /* Scroll space */
    }

    body.products-page .products-sidebar .category-filter li {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    body.products-page .products-sidebar .category-filter a {
        display: flex;
        flex-direction: column;
        /* Stack image and text */
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 15px 5px;
        color: #555;
        text-decoration: none;
        background: transparent;
        width: 100%;
        transition: all 0.2s ease;
    }

    /* Sidebar Category Image (Circle) */
    body.products-page .sidebar-cat-img {
        width: 55px;
        /* Size of the circle */
        height: 55px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 8px;
        /* Space between image and text */
        border: 2px solid #ddd;
        /* Neutral border */
        background-color: #fff;
        padding: 2px;
        /* Whitespace inside border */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.products-page .sidebar-cat-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    body.products-page .sidebar-cat-img .placeholder-icon {
        font-size: 20px;
        font-weight: bold;
        color: #999;
        text-transform: uppercase;
    }

    body.products-page .sidebar-cat-link span {
        font-size: 11px;
        line-height: 1.2;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* Limit to 2 lines */
        -webkit-box-orient: vertical;
    }

    /* Active Category Style */
    body.products-page .products-sidebar .category-filter a.active {
        background-color: #fff;
        color: var(--primary-color);
        font-weight: 700;
        border-right: none;
        position: relative;
    }

    /* Active Indicator (Bar on Left) NOT on the link, but maybe style the circle */
    body.products-page .products-sidebar .category-filter a.active .sidebar-cat-img {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.1);
        /* Primary color glow */
    }

    /* Remove the old left border active style */
    body.products-page .products-sidebar .category-filter a.active {
        border-left: 4px solid var(--primary-color);
    }

    /* Right Content Area */
    body.products-page .products-main {
        padding: 0;
        height: 100%;
        overflow-y: auto;
        background-color: #fff;
        padding-bottom: 80px;
        /* Space for bottom nav */
        overscroll-behavior: contain;
        /* Prevent scroll chaining */
        -webkit-overflow-scrolling: touch;
    }

    body.products-page .products-header {
        margin-bottom: 5px;
        padding: 10px;
        border-radius: 0;
        background-color: transparent;
        border-bottom: 1px solid #f0f0f0;
    }

    body.products-page .products-header .sort-filter label {
        display: none;
        /* Hide 'Sort by' text to save space if needed, or keep small */
    }

    body.products-page .products-header .sort-filter select {
        padding: 5px;
        font-size: 12px;
        border: 1px solid #ddd;
    }

    /* Improve Product Grid - 2x2 */
    body.products-page .products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 10px;
        margin-top: 0;
    }

    /* Restore Standard Home Card Styling */
    body.products-page .product-card {
        border: 1px solid #eaeaea;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        /* Home page shadow */
        border-radius: 8px;
        /* Home page radius */
        background: #fff;
        margin-bottom: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Ensure elements hidden previously are visible if they exist in home card */
    body.products-page .product-card .btn,
    body.products-page .product-card .product-rating {
        display: inline-block !important;
        /* Restore Rating & Button if needed, or matched exactly to home */
    }

    /* Match Home Card Image */
    body.products-page .product-image {
        height: 150px;
        /* Home card mobile height */
        width: 100%;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f9f9f9;
    }

    /* Match Home Card Info Padding */
    body.products-page .product-info {
        padding: 10px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    /* Match Home Card Title */
    body.products-page .product-info h3 {
        font-size: 13px;
        margin-bottom: 5px;
        height: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
        color: #333;
    }

    /* Match Home Card Price */
    body.products-page .product-price {
        font-size: 13px;
        margin-bottom: 8px;
        color: var(--primary-color);
        font-weight: 700;
    }

    /* Match Home Card Button */
    body.products-page .product-card .btn {
        padding: 6px 10px;
        font-size: 11px;
        width: 100%;
        text-align: center;
        border-radius: 4px;
        margin-top: auto;
    }

    /* Left Sidebar Styling - Ensuring Visibility */
    body.products-page .products-sidebar {
        display: block !important;
        background-color: #fff;
        /* Changed to white for better contrast if needed, or stick to grey */
        width: 100%;
        height: 100%;
        overflow-y: auto;
        border-right: 1px solid #ddd;
        z-index: 10;
        position: relative;
    }

    /* Sidebar Links - Fix Visibility */
    body.products-page .products-sidebar .category-filter li {
        display: block;
        /* Ensure list items are block */
        width: 100%;
    }

    body.products-page .products-sidebar .category-filter a {
        color: #333 !important;
        /* Force color to be visible */
        opacity: 1 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 12px;
        line-height: normal;
    }

    body.products-page .products-sidebar .category-filter {
        display: block !important;
        /* Ensure ul is block */
    }

    /* Hide unnecessary sidebar elements */
    body.products-page .products-sidebar h3,
    body.products-page .products-sidebar .filter-section:not(:first-child) {
        display: none !important;
    }

    body.products-page .products-sidebar .filter-section {
        margin: 0;
        padding: 0;
        border: none;
        display: block !important;
        /* Ensure container is displayed */
    }
}


/* Mobile Categories Grid View */
.mobile-categories-grid {
    display: none;
}

@media (max-width: 768px) {

    /* Show only on mobile when explicitly added */
    .mobile-categories-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .category-circle-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        text-align: center;
    }

    .category-circle-card .cat-image {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #f5f5f5;
        overflow: hidden;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .category-circle-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .category-circle-card .placeholder-icon {
        font-size: 24px;
        font-weight: 700;
        color: var(--primary-color);
        text-transform: uppercase;
    }

    .category-circle-card p {
        font-size: 11px;
        color: #333;
        line-height: 1.2;
        max-width: 80px;
        font-weight: 500;
    }
}

@media (max-width: 768px) {

    /* Hide Breadcrumb Header (The Golden Card) */
    body.product-detail-page .page-header {
        display: none !important;
    }

    body.product-detail-page .product-detail {
        padding: 0 0 80px 0;
        background-color: #fff;
    }

    body.product-detail-page .product-detail-layout {
        display: block;
        gap: 0;
    }

    /* Image Gallery */


    body.product-detail-page .product-detail .container {
        padding: 0 10px !important;
        /* Restore some padding */
        width: 100% !important;
        max-width: 100% !important;
    }

    body.product-detail-page .product-image-overlays {
        position: absolute;
        top: 10px;
        left: 10px;
        /* Adjusted spacing */
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 10;
    }

    body.product-detail-page .btn-overlay {
        width: 38px;
        /* Restored size */
        height: 38px;
        /* Restored size */
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #878787;
        font-size: 16px;
        /* Larger icon */
    }

    body.product-detail-page .btn-overlay.wishlist-btn {
        color: #878787;
    }

    body.product-detail-page .product-images {
        margin-bottom: 0;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;
        padding-bottom: 10px;
        position: relative;
        /* Context for overlays */
    }

    body.product-detail-page .product-images .main-image {
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 10px;
        height: 350px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background-color: #fff;
    }

    body.product-detail-page .product-images .main-image img {
        height: 100%;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    body.product-detail-page .thumbnail-images {
        overflow-x: auto;
        padding: 0 15px;
        gap: 10px;
        scroll-behavior: smooth;
        justify-content: flex-start;
        display: flex;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    body.product-detail-page .thumbnail {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        border-radius: 4px;
        border: 1px solid #ddd;
    }

    /* Product Info */
    body.product-detail-page .product-info-detail {
        padding: 15px 15px 0;
    }

    body.product-detail-page .product-info-detail h1 {
        font-size: 16px;
        font-weight: 500;
        font-family: var(--body-font);
        color: #212121;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    body.product-detail-page .product-short-desc {
        font-size: 13px;
        color: #878787;
        margin-bottom: 15px;
        line-height: 1.5;
    }

    /* Price Section */
    body.product-detail-page .product-price-detail {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 15px;
        margin-bottom: 15px;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        border-bottom: none;
        /* Looks cleaner without */
    }

    body.product-detail-page .product-price-detail .current-price {
        font-size: 28px;
        font-weight: 600;
        color: #212121;
    }

    body.product-detail-page .product-price-detail .original-price {
        font-size: 14px;
        color: #878787;
        text-decoration: line-through;
    }

    body.product-detail-page .product-price-detail .discount-percent {
        font-size: 13px;
        color: #388e3c;
        background: none;
        padding: 0;
        font-weight: 700;
    }

    /* Actions Bar (Static in page) */
    body.product-detail-page .product-actions-detail {
        position: relative;
        /* Changed from fixed */
        bottom: auto;
        left: auto;
        width: 100%;
        background-color: transparent;
        padding: 0;
        box-shadow: none;
        z-index: 1;
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin: 15px 0;
        height: auto;
    }

    /* Hide Qty Selector in mobile detail if needed, or show it. 
       User said "add to cart or buy now", usually qty is separate. 
       Let's keep Qty hidden for simplicity or show it? 
       Let's keep it hidden as per previous logic unless requested. */
    body.product-detail-page .quantity-selector {
        display: none;
    }

    body.product-detail-page .add-to-cart-detail,
    body.product-detail-page .buy-now-btn {
        flex: 1;
        border-radius: var(--border-radius);
        /* Rounded corners */
        font-size: 14px;
        font-weight: 600;
        height: 45px;
        /* Standard height */
        padding: 0;
        margin: 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: none;
        text-transform: uppercase;
    }

    body.product-detail-page .add-to-cart-detail {
        background-color: var(--white);
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
    }

    body.product-detail-page .buy-now-btn {
        background-color: var(--primary-color);
        /* Theme Color */
        color: var(--white);
    }

    /* Remove the padding-bottom hack since we aren't fixed anymore */
    body.product-detail-page {
        padding-bottom: 70px;
        /* Keep for bottom nav clearance */
    }





    /* Product Meta (Stock/Category) */
    body.product-detail-page .product-meta {
        padding: 15px;
        background-color: #f1f3f6;
        /* Subtle separator bg */
        margin: 0 -15px 15px;
        /* Full width */
    }

    body.product-detail-page .meta-item {
        font-size: 13px;
        margin-bottom: 5px;
    }

    /* Hide scroll to top on detailed page mobile */
    body.product-detail-page .scroll-to-top {
        display: none !important;
    }

    /* Features Grid */
    body.product-detail-page .product-features {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        background-color: #fff;
        margin: 0;
        border-top: 5px solid #f1f3f6;
        /* Separator */
    }

    body.product-detail-page .feature-item {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
        color: #212121;
    }

    body.product-detail-page .feature-item i {
        width: 24px;
        height: 24px;
        font-size: 18px;
        color: var(--primary-color);
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border-radius: 0;
    }

    body.product-detail-page .feature-item span {
        flex: 1;
    }


}

/* Reviews Section - Professional Mobile Style */
.product-reviews-section {
    padding: 20px 0;
    background-color: #fff;
    margin-top: 10px;
    border-top: 8px solid #f1f3f6;
    /* Separator like Flipkart */
}

.product-reviews-section h3.section-title {
    font-size: 24px;
    /* Matches standard h2 size or larger */
    font-weight: 700;
    margin: 0 15px 15px;
    color: #212121;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Add Review Form Area */
.add-review-form {
    background: #fff;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin: 0 15px 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.add-review-form h4 {
    font-size: 15px;
    margin-bottom: 12px;
    color: #333;
    font-weight: 600;
}

/* Star Rating Input - Improved */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    /* Align left */
    gap: 8px;
    margin-bottom: 15px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 24px;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s;
}

.star-rating input:checked~label,
.star-rating label:hover,
.star-rating label:hover~label {
    color: #ff9f00;
    /* Flipkart Orange/Gold */
}

.add-review-form textarea {
    width: 100%;
    height: 80px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 15px;
    resize: none;
    font-family: inherit;
    font-size: 14px;
}

.add-review-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Reviews List */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Flush list */
}

.review-card {
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
    background: #f1f3f6;
    /* Matching the product meta background */
    border-radius: 8px;
    /* Slight rounded appearance */
    margin: 0 15px 15px 15px;
    /* Spaced out from edges */
    border: none;
    /* Removed border as background is enough contrast */
}

.review-card:last-child {
    border-bottom: none;
}

.review-header {
    display: flex;
    align-items: flex-start;
    /* Align top */
    margin-bottom: 8px;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.reviewer-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #888;
    overflow: hidden;
    flex-shrink: 0;
}

.reviewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviewer-detail-col {
    display: flex;
    flex-direction: column;
}

.reviewer-name {
    font-weight: 600;
    font-size: 13px;
    color: #212121;
}

.review-rating-badge {
    background-color: #388e3c;
    /* Green Badge */
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
    width: fit-content;
    margin-top: 2px;
}

.review-rating-badge.low-rating {
    background-color: #ff4343;
    /* Red for low ratings */
}

.review-rating-badge.mid-rating {
    background-color: #ff9f00;
    /* Orange for mid */
}

.review-date {
    font-size: 11px;
    color: #878787;
    margin-left: auto;
    /* Push to right */
    white-space: nowrap;
}

.review-content {
    margin-top: 8px;
    margin-left: 42px;
    /* Align with text, clear of avatar */
}

.review-content p {
    font-size: 13px;
    line-height: 1.5;
    color: #212121;
    margin: 0;
}

/* Hide Footer on Product Detail Page (Mobile) */
body.product-detail-page .footer {
    display: none !important;
}

@media (max-width: 768px) {
    .product-reviews-section {
        padding: 0;
        /* Reset padding for full bleed */
    }

    .product-reviews-section h3.section-title {
        padding: 15px 15px 5px;
        margin: 0;
    }
}


/* Checkout Mobile Optimization */
.mobile-summary-wrapper {
    display: none;
}

@media (max-width: 968px) {

    /* Hide distraction elements */
    body.checkout-page .mobile-bottom-nav,
    body.checkout-page .page-header,
    body.checkout-page .checkout-sidebar,
    body.checkout-page .footer {
        display: none !important;
    }

    body.checkout-page {
        padding-bottom: 80px;
        /* Space for fixed buttons */
        background-color: #f5f5f5;
    }

    .checkout-section {
        padding: 0;
        background: transparent;
    }

    .checkout-section .container {
        padding: 0;
    }

    /* Horizontal Steps Bar */
    .checkout-steps {
        flex-direction: row;
        padding: 15px 20px;
        gap: 0;
        border-radius: 0;
        margin-bottom: 10px;
        justify-content: center;
        position: sticky;
        top: 60px;
        /* Header height */
        z-index: 999;
        background: white;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        border-bottom: 1px solid #eee;
    }

    .step {
        flex-direction: row;
        gap: 10px;
        align-items: center;
        opacity: 0.5;
        transition: all 0.3s ease;
    }

    .step.active {
        opacity: 1;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
        margin: 0;
        background: #eee;
        color: #999;
    }

    .step.active .step-number {
        background: var(--primary-color);
        color: white;
        box-shadow: 0 4px 10px rgba(139, 69, 19, 0.3);
    }

    .step-line {
        width: 40px;
        height: 2px;
        background-color: #ddd;
        margin: 0 15px;
    }

    .step-title {
        font-size: 14px;
        font-weight: 600;
        display: block !important;
    }

    /* Mobile Summary */
    .mobile-summary-wrapper {
        display: block;
        margin: 10px;
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .mobile-order-items {
        max-height: 180px;
        overflow-y: auto;
        padding: 0 5px;
    }

    .mobile-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f9f9f9;
    }

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

    .mobile-item-img {
        position: relative;
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        border-radius: 8px;
        overflow: visible;
        background: #f8f8f8;
    }

    .mobile-item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        mix-blend-mode: multiply;
    }

    .mobile-item-img .item-qty {
        position: absolute;
        top: -6px;
        right: -6px;
        background: #8B4513;
        color: white;
        font-size: 10px;
        font-weight: 700;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 2;
    }

    .mobile-item-info {
        flex: 1;
        margin-left: 15px;
    }

    .mobile-item-info h4 {
        font-size: 14px;
        margin: 0 0 4px 0;
        color: #333;
        font-weight: 500;
    }

    .mobile-item-info p {
        font-size: 14px;
        margin: 0;
        color: #8B4513;
        font-weight: 700;
    }

    .mobile-total-row {
        display: flex;
        justify-content: space-between;
        padding-top: 15px;
        margin-top: 5px;
        border-top: 1px dashed #eee;
        font-size: 16px;
        color: #333;
    }

    /* Cards Styling */
    .checkout-card {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin: 10px;
        overflow: hidden;
        border: none;
    }

    .checkout-card .card-header {
        padding: 15px;
        background: white;
        border-bottom: 1px solid #f5f5f5;
    }

    .checkout-card .card-header h2 {
        font-size: 16px;
        margin: 0;
    }

    .checkout-card .card-body {
        padding: 15px;
    }

    /* Selection Lists */
    .addresses-grid,
    .payment-methods {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .address-card,
    .payment-option {
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 10px;
        background: #fff;
    }

    .address-card.selected,
    .payment-option input:checked+label {
        border-color: #8B4513;
        background-color: #fff8f0;
    }

    /* Fixed Bottom Actions */
    .step-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        padding: 10px 15px 15px 15px;
        /* Extra bottom padding for safe area */
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        z-index: 1000;
        display: flex;
        gap: 12px;
        margin: 0;
        border-top: 1px solid #f0f0f0;
    }

    .step-actions .btn {
        flex: 1;
        padding: 14px;
        font-size: 15px;
        border-radius: 50px;
        /* Pill shape */
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .step-actions .btn-secondary {
        flex: 0.3;
        /* Smaller back button */
        background-color: #f1f2f6;
        color: #333;
        border: none;
    }

    .step-actions .btn-primary,
    .step-actions .btn-success {
        background-color: #8B4513;
        /* Primary Color */
        box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
        border: none;
    }

    /* Hide redundant icons in buttons on mobile to save space */
    .step-actions .btn i {
        display: none;
    }
}


/* Mobile Checkout Slick Enhancements */

@media (max-width: 968px) {

    /* Horizontal Sticky Steps - Ensuring Override */
    .checkout-steps {
        flex-direction: row !important;
        /* Force Row */
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 60px;
        background: white;
        z-index: 999;
        margin-bottom: 20px;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .step-line {
        width: 40px !important;
        height: 2px !important;
        margin: 0 10px !important;
    }

    /* Slick Horizontal Address Scroll */
    .addresses-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll iOS */
    }

    .address-card {
        min-width: 85%;
        /* Shows part of next card to encourage scroll */
        scroll-snap-align: center;
        border: 2px solid #eee;
        background: #fff;
    }

    /* Make the selected one pop */
    .address-card input[type='radio']:checked+label .address-header {
        color: var(--primary-color);
    }

    /* Slick Payment Grid */
    .payment-methods {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .payment-option {
        padding: 15px 10px;
        text-align: center;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .payment-option label {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .payment-icon {
        margin: 0 auto;
        font-size: 20px;
        width: 40px;
        height: 40px;
    }

    .payment-info span {
        display: none;
        /* Hide description on mobile grid for cleanliness, unless selected? No, keep it clean */
    }

    .payment-info strong {
        font-size: 12px;
    }
}


/* Ultra-Tight Mobile Header Integration */
@media (max-width: 968px) {

    /* Force Checkout Container to be Full Width */
    .checkout-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Refined Checkout Steps Positioning */
    .checkout-steps {
        padding: 10px 0 !important;
        margin: 0 !important;
        width: 100%;
        border-radius: 0 0 16px 16px !important;
        /* Only bottom rounded */
        border: none;
        border-bottom: 1px solid #f0f0f0;
        top: 60px;
        /* Assuming 60px header */
    }

    /* Pull content up if needed to stick to header */
    .checkout-section {
        margin-top: -1px;
        /* Remove any sub-pixel gaps */
    }
}


/* FORCE REMOVAL OF GAP - High Priority */
@media (max-width: 968px) {
    body.checkout-page .checkout-section {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.checkout-page .checkout-section .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.checkout-page .checkout-steps {
        margin-top: 0 !important;
        background: white;
        /* Ensure it covers anything behind */
    }

    /* Ensure no other element is creating space */
    body.checkout-page .page-header {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}


/* Add Address Card Styling */
.add-new-address-card {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #fff;
    border: 2px dashed #ddd;
    /* Dashed by default for desktop too */
}

.add-address-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    text-align: center;
    width: 100%;
}

.add-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff8f0;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

.add-new-address-card:hover .add-icon {
    transform: scale(1.1);
    background-color: var(--primary-color);
    color: white;
}

.add-address-content span {
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 968px) {

    /* Override width for the add card in the slick slider */
    .add-new-address-card {
        min-width: 140px !important;
        /* Make it smaller than the address cards so it looks like an action */
        border-color: var(--secondary-color) !important;
        opacity: 0.8;
    }

    .add-new-address-card .add-address-content {
        flex-direction: column;
    }
}


/* Revert Payment to Vertical List View on Mobile */
@media (max-width: 968px) {
    .payment-methods {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 12px !important;
    }

    .payment-option {
        flex-direction: row !important;
        /* Icon left, text right */
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 15px !important;
        text-align: left !important;
        height: auto !important;
    }

    .payment-option label {
        flex-direction: row !important;
        gap: 15px !important;
        text-align: left !important;
        align-items: center !important;
        width: 100%;
    }

    .payment-icon {
        margin: 0 !important;
        /* Reset margin from auto */
        width: 45px !important;
        height: 45px !important;
        flex-shrink: 0;
        background: #f8f8f8;
        border-radius: 8px;
    }

    .payment-info {
        display: flex !important;
        flex-direction: column !important;
    }

    .payment-info span {
        display: block !important;
        /* Show description again */
        font-size: 11px;
        color: #888;
        margin-top: 2px;
    }

    .payment-info strong {
        font-size: 14px !important;
    }
}


/* Mobile Order Confirmation - Professional Slick UI */
@media (max-width: 968px) {

    /* Hide Footer */
    body.order-confirmation-page .footer {
        display: none !important;
    }

    /* Clean Page Layout */
    body.order-confirmation-page .confirmation-section {
        padding: 0 !important;
        background: #fff;
        min-height: 100vh;
    }

    body.order-confirmation-page .container {
        padding: 0 !important;
    }

    /* Success Card Transformation */
    .confirmation-card {
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 40px 20px 100px 20px !important;
        /* Bottom padding for fixed buttons */
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* Animated Success Icon */
    .success-icon {
        font-size: 80px !important;
        margin-bottom: 20px !important;
        color: #27ae60 !important;
    }

    .success-icon i {
        background: #e8f5e9;
        border-radius: 50%;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(39, 174, 96, 0.2);
    }

    /* Typography */
    .confirmation-card h1 {
        font-size: 24px !important;
        color: #2c3e50;
        margin-bottom: 10px !important;
    }

    .confirmation-card .subtitle {
        font-size: 15px !important;
        color: #7f8c8d;
        line-height: 1.5;
        margin-bottom: 30px !important;
    }

    /* Order Number Badge */
    .order-number {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 30px;
        border: 1px dashed #ced4da;
    }

    /* Details Grid */
    .detail-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 15px !important;
    }

    .detail-item {
        background: #fff;
        border: 1px solid #eee;
        padding: 15px;
        border-radius: 10px;
        align-items: flex-start !important;
    }

    .detail-item i {
        color: var(--primary-color) !important;
        background: #fff8f0;
        padding: 8px;
        border-radius: 8px;
        margin-bottom: 8px;
        display: inline-block;
    }

    /* Items List */
    .confirmation-items {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }

    .confirmation-item {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 12px;
        border: none !important;
    }

    .confirmation-item img {
        border-radius: 8px;
        width: 60px !important;
        height: 60px !important;
    }

    /* Fixed Bottom Actions */
    .confirmation-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        padding: 15px;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
        display: flex !important;
        flex-direction: row !important;
        /* Standard row for 2 buttons */
        gap: 10px !important;
        z-index: 100;
        margin: 0 !important;
        border-top: 1px solid #f0f0f0;
    }

    .confirmation-actions .btn {
        flex: 1;
        border-radius: 50px;
        padding: 14px;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 600;
        margin: 0 !important;
    }

    .confirmation-note {
        margin: 20px 0;
        border-radius: 12px;
    }
}


/* Refinements for Mobile Order Confirmation */
@media (max-width: 968px) {

    /* Hide icons to save space in the fixed bottom bar */
    .confirmation-actions .btn i {
        display: none;
    }

    /* Adjust button text size if needed */
    .confirmation-actions .btn {
        font-size: 13px !important;
        padding: 12px 5px !important;
        white-space: nowrap;
    }

    /* Ensure no double padding at top */
    .page-header {
        display: none !important;
        /* Hide page titles on this page for mobile */
    }
}


/* Mobile Order Confirmation - One Button & Clean Up */
@media (max-width: 968px) {

    /* Hide FAB / Scroll to top on this page specifically */
    body.order-confirmation-page .scroll-to-top,
    body.order-confirmation-page .whatsapp-float,
    /* Just in case */
    body.order-confirmation-page .fab {
        display: none !important;
    }

    /* Single Track Order Button Styling */
    .confirmation-actions {
        padding: 12px 15px !important;
        background: white !important;
    }

    .confirmation-actions .btn {
        width: 100% !important;
        font-size: 16px !important;
        /* Make it readable */
        padding: 14px !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4) !important;
        /* Greenish glow or Primary override */
        background-color: var(--primary-color) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .confirmation-actions .btn i {
        display: inline-block !important;
        /* Show icon for this single important button */
        font-size: 18px !important;
    }
}


/* Mobile Order Confirmation - Move Button Inline & Smaller */
@media (max-width: 968px) {

    /* Unset fixed positioning */
    .confirmation-actions {
        position: static !important;
        /* Move back to document flow */
        box-shadow: none !important;
        border-top: none !important;
        padding: 20px 0 !important;
        background: transparent !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }

    /* Make button smaller and thinner */
    .confirmation-actions .btn {
        width: auto !important;
        /* Not full width */
        min-width: 200px;
        font-size: 14px !important;
        padding: 10px 20px !important;
        /* Thinner padding */
        height: auto !important;
        box-shadow: 0 4px 10px rgba(139, 69, 19, 0.2) !important;
    }

    /* Remove bottom padding on card */
    .confirmation-card {
        padding-bottom: 40px !important;
    }
}


/* Mobile Profile Page Redesign */

/* Hide unwanted elements on desktop/mobile appropriately */
.mobile-subpage-header,
.mobile-edit-btn,
.nav-text small,
.olc-arrow,
.od-header {
    display: none;
}

@media (max-width: 968px) {

    /* Main Layout Reset */
    .profile-layout {
        display: block;
        /* Remove grid */
        margin-top: 0;
        overflow: visible !important;
        /* Allow sticky to work */
    }

    .profile-sidebar {
        width: 100%;
        max-width: 100%;
        background: transparent;
        border: none;
        padding: 0;
        box-sizing: border-box;
    }

    .profile-main {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        display: none;
        /* Sub-pages hidden initially */
        background: #fff;
        min-height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* Add right constraint */
        z-index: 2000;
        /* Cover everything */
        overflow-y: auto;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
        padding: 0;
        /* Remove default padding on mobile */
        box-sizing: border-box;
    }

    /* Clean Page Header */
    body.profile-page .page-header {
        display: none;
        /* Hide default breadcrumb header */
    }

    /* User Profile Header Section */
    .profile-user {
        background: #fff;
        padding: 24px;
        margin-bottom: 0;
        text-align: left;
        border-bottom: 1px solid #f0f0f0;
    }

    .user-header-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
        background: #f0f0f0;
        font-size: 24px;
        margin: 0;
        /* Reset centering */
    }

    .mobile-edit-btn {
        display: block;
        background: transparent;
        color: var(--primary-color);
        border: 1px solid #eee;
        padding: 8px;
        border-radius: 50%;
    }

    .user-info-text h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #2c3e50;
    }

    .user-info-text p {
        margin: 5px 0 0;
        color: #7f8c8d;
        font-size: 14px;
    }

    /* Menu Navigation List */
    .profile-nav {
        background: #fff;
        margin-top: 10px;
        padding: 0;
    }

    .profile-nav a {
        display: flex;
        align-items: center;
        padding: 20px;
        border-radius: 0;
        margin: 0;
        border-bottom: 1px solid #f9f9f9;
        color: #2c3e50;
    }

    .profile-nav a.active {
        background: #fff !important;
        color: #2c3e50 !important;
        /* No active state highlight on menu list */
    }

    .nav-icon {
        width: 40px;
        height: 40px;
        background: #f8f9fa;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        color: var(--primary-color);
        font-size: 16px;
    }

    .nav-text {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .nav-text span {
        font-weight: 500;
        font-size: 16px;
    }

    .nav-text small {
        display: block;
        font-size: 12px;
        color: #999;
        margin-top: 2px;
    }

    .arrow {
        color: #ccc;
        font-size: 14px;
    }

    .logout-link .nav-icon {
        background: #fff0f0;
        color: #e74c3c;
    }

    .logout-link .nav-text span {
        color: #e74c3c;
    }

    /* Sub Page Headers */
    .mobile-subpage-header {
        display: flex;
        align-items: center;
        padding: 15px;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .mobile-subpage-header button {
        background: none;
        border: none;
        font-size: 18px;
        padding: 10px;
        margin-right: 10px;
        color: #333;
    }

    .mobile-subpage-header h2 {
        font-size: 18px;
        margin: 0;
    }

    /* Content Areas */
    .profile-tab {
        display: none !important;
        /* Managed by JS */
        padding: 0;
    }

    .profile-tab.active {
        display: block !important;
    }

    .profile-tab h2 {
        display: none;
        /* Hide default headers */
    }

    /* Orders List View */
    .orders-list-view {
        padding: 15px 0;
        /* Vertical padding only for desktop, horizontal removed */
    }

    .order-list-card {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    }

    .olc-icon {
        width: 50px;
        height: 50px;
        background: #f0f8ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        color: var(--primary-color);
    }

    .olc-info {
        flex: 1;
    }

    .olc-info h4 {
        margin: 0 0 5px;
        font-size: 15px;
    }

    .olc-info span {
        font-size: 13px;
        color: #666;
    }

    .olc-date {
        font-size: 12px;
        color: #aaa;
        margin-top: 5px !important;
    }

    .olc-arrow {
        display: block;
        color: #ccc;
    }

    /* Tracking View */
    .od-header {
        display: none;
        /* We use the main subpage header */
    }

    .od-tracking {
        padding: 30px 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
    }

    .tracking-step {
        text-align: center;
        z-index: 2;
        width: 33%;
    }

    .tracking-step .dot {
        width: 20px;
        height: 20px;
        background: #ddd;
        border-radius: 50%;
        margin: 0 auto 10px;
        border: 4px solid #fff;
        box-shadow: 0 0 0 1px #ddd;
    }

    .tracking-step.completed .dot,
    .tracking-step.active .dot {
        background: var(--primary-color);
        box-shadow: 0 0 0 1px var(--primary-color);
    }

    .tracking-step p {
        font-size: 12px;
        color: #999;
        margin: 0;
    }

    .tracking-step.completed p,
    .tracking-step.active p {
        color: var(--primary-color);
        font-weight: 600;
    }

    .tracking-line {
        position: absolute;
        top: 40px;
        /* Dot center */
        height: 2px;
        background: #eee;
        width: 100%;
        left: 0;
        z-index: 1;
    }

    /* Order Details Items */
    .od-items {
        padding: 20px;
        border-top: 10px solid #f9f9f9;
    }

    .od-item {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }

    .od-total {
        padding: 20px;
        background: #f8f9fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #eee;
    }

    /* Payments & Addresses Mockup */
    .payment-card-item {
        display: flex;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .pc-icon {
        font-size: 24px;
        color: #444;
        width: 50px;
    }

    .pc-info {
        flex: 1;
    }

    .pc-info h4 {
        margin: 0;
        font-size: 15px;
    }

    .pc-info p {
        margin: 2px 0 0;
        font-size: 13px;
        color: #888;
    }

    .desktop-only {
        display: none !important;
    }
}


@media (max-width: 968px) {
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0);
        }
    }

    .profile-main {
        animation: slideInRight 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .order-detail-view {
        animation: slideInRight 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }
}


/* Fix for Profile Page Mobile spacing and full-width layout */
@media (max-width: 968px) {

    /* Lock down viewport to prevent zoom effects */
    html {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        /* Allow scrolling for sticky */
    }

    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        /* Allow scrolling for sticky */
    }

    /* Ensure header stays sticky on profile page */
    body.profile-page .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: #fff !important;
        will-change: transform;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    /* Remove the large padding from the section wrapper */
    .profile-section {
        padding: 20px 0 0 0 !important;
        background: #fff !important;
        margin-top: 0 !important;
        /* Changed from -1px to 0 for consistency */
        width: 100% !important;
        max-width: 100% !important;
        overflow-y: visible !important;
        /* Critical for sticky */
        overflow-x: hidden !important;
    }

    /* Force container to be full width with no padding */
    .profile-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }

    /* Reset the sidebar styles to not look like a floating card */
    .profile-sidebar {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: #fff !important;
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        /* Explicit zero padding */
        transition: none !important;
        /* No transitions to prevent zoom effects */
        overflow-y: visible !important;
        /* Critical for sticky */
        overflow-x: hidden !important;
    }

    /* Ensure sidebar display is block by default on mobile */
    body:not(.show-mobile-header) .profile-sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure header is visible and sticky in default state */
    body:not(.show-mobile-header).profile-page .header {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1000 !important;
        background: #fff !important;
        width: 100% !important;
    }

    body:not(.show-mobile-header) .header {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
    }

    /* Ensure main is hidden by default */
    body:not(.show-mobile-header) .profile-main {
        display: none !important;
    }

    /* Ensure the user header section touches the top and sides */
    .profile-user {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 8px solid #f5f5f5 !important;
        /* separator */
        box-shadow: none !important;
    }

    /* Remove margins from profile navigation links */
    .profile-nav {
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }
}


/* Duplicate block removed - styles consolidated above */


/* Recently Viewed Styles */
.recently-viewed-mobile {
    display: none;
    /* Hidden by default on desktop */
}

@media (max-width: 968px) {
    .recently-viewed-mobile {
        display: block;
        padding: 20px 15px;
        background: #fff;
        border-top: 8px solid #f5f5f5;
        margin-bottom: 30px;
        /* Space at bottom */
    }

    .recently-viewed-mobile h3 {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 15px 0;
        color: #2c3e50;
    }

    .rv-scroller {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .rv-scroller::-webkit-scrollbar {
        display: none;
    }

    .rv-item {
        flex: 0 0 auto;
        width: 110px;
        text-align: left;
        /* Card style usually aligns left or center */
        text-decoration: none;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        /* Defined card shape */
        overflow: hidden;
    }

    .rv-img {
        width: 100%;
        height: 110px;
        /* Square Image */
        border-radius: 0;
        border: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
        background: #f9f9f9;
        box-shadow: none;
    }

    .rv-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }

    .rv-name {
        font-size: 11px;
        color: #333;
        margin: 0;
        padding: 8px;
        /* Padding for text inside card */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: #fff;
        display: block;
        font-weight: 500;
    }
}


/* Updated Recently Viewed Cards (Mini Product Card) */
@media (max-width: 968px) {
    .rv-scroller {
        padding-bottom: 0px !important;
        gap: 12px;
    }

    .rv-card {
        flex: 0 0 auto;
        width: 140px;
        /* Slightly wider to fit details */
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .rv-img-wrapper {
        width: 100%;
        height: 120px;
        position: relative;
        background: #f9f9f9;
    }

    .rv-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .rv-badge {
        position: absolute;
        top: 5px;
        left: 5px;
        background: #e74c3c;
        color: white;
        font-size: 9px;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
    }

    .rv-details {
        padding: 8px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .rv-name {
        font-size: 13px;
        font-weight: 500;
        color: #2c3e50;
        margin: 0 0 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        background: none;
        padding: 0;
    }

    .rv-price {
        margin-bottom: 8px;
        font-size: 13px;
    }

    .rv-current {
        font-weight: 700;
        color: #2c3e50;
        margin-right: 4px;
    }

    .rv-old {
        font-size: 11px;
        color: #999;
        text-decoration: line-through;
    }

    .rv-btn {
        width: 100%;
        font-size: 12px !important;
        padding: 4px 0 !important;
        border-radius: 4px;
        text-transform: uppercase;
        font-weight: 600;
        display: block;
        text-align: center;
        background: #fff;
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
    }

    .rv-btn:active {
        background: var(--primary-color);
        color: #fff;
    }

    /* Hide the old rv-item styles if they conflict */
    .rv-item {
        display: none;
    }

    .rv-img {
        display: none;
    }
}


/* Fix: Ensure Profile Main Content doesn't cover Global Header */
@media (max-width: 968px) {
    .profile-main {
        position: static !important;
        /* Reset from fixed */
        z-index: auto !important;
        min-height: auto !important;
        /* Let content dictate height */
        overflow-y: visible !important;
        background: #fff;
        width: 100%;
        display: none;
        /* Initially hidden */
    }

    /* Ensure Layout Wrapper allows header */
    .profile-layout {
        position: relative;
    }
}


/* Consistent Profile Header on all views */
@media (max-width: 968px) {

    /* Style for the standalone profile header inside content view */
    .mobile-subpage-user-header {
        background: #fff;
        padding: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        gap: 15px;
        position: relative;
    }

    .mobile-subpage-user-header .user-avatar-small {
        width: 45px;
        height: 45px;
        background: #f0f0f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #555;
    }

    .mobile-subpage-user-header .user-info-text-small h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #2c3e50;
    }

    .mobile-subpage-user-header .user-info-text-small p {
        margin: 2px 0 0;
        font-size: 12px;
        color: #7f8c8d;
    }

    .mobile-subpage-header {
        display: none !important;
        /* Hide old generic header */
    }

    /* Back button style within User Header context */
    .header-back-btn {
        background: none;
        border: none;
        font-size: 18px;
        color: #333;
        margin-right: 5px;
        padding: 5px;
    }
}


/* Order Detail Header Fix */
.od-header {
    background: #fff;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.od-header h3 {
    margin: 0;
    font-size: 16px;
    margin-left: 15px;
}

.back-to-list {
    border: none;
    background: none;
    font-size: 16px;
    color: #333;
}

.order-detail-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f1f3f6;
    /* App style background */
    z-index: 3000;
    overflow-y: auto;
    padding-bottom: 50px;
}

/* Tracking Timeline App Style */
.od-tracking {
    background: #fff;
    padding: 20px 15px;
    margin-bottom: 8px;
    /* App style gap */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    border-bottom: 1px solid #e0e0e0;
}

.tracking-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
}

.tracking-step .dot {
    width: 24px;
    height: 24px;
    background: #f0f0f0;
    border-radius: 50%;
    margin: 0 auto 8px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tracking-step.completed .dot {
    background: #4caf50;
    box-shadow: 0 0 0 1px #4caf50;
}

.tracking-step.completed .dot:after {
    content: '\2713';
    /* Unicode checkmark */
    color: #fff;
    font-size: 12px;
}

.tracking-step.active .dot {
    background: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

.tracking-step p {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px;
}

.tracking-step small {
    font-size: 11px;
    color: #888;
    display: block;
}

.tracking-line {
    position: absolute;
    top: 32px;
    left: 16%;
    width: 34%;
    height: 2px;
    background: #e0e0e0;
    z-index: 1;
}

.tracking-line:nth-of-type(4) {
    left: 50%;
}

.tracking-step.completed+.tracking-line {
    background: #4caf50;
}

/* Order Details Items App Style */
.od-items {
    background: #fff;
    padding: 15px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.od-items h4 {
    margin: 0 0 15px;
    font-size: 15px;
    color: #212121;
}

.od-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee;
}

.od-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.od-item-info strong {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.od-item-info p {
    margin: 0;
    font-size: 12px;
    color: #777;
}

.od-item-price {
    font-weight: 600;
    font-size: 14px;
    color: #212121;
}

/* Order Total App Style */
.od-total {
    background: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.od-total span {
    color: #555;
}

.od-total strong {
    color: #212121;
    font-size: 18px;
}


/* Ensure Order List is visible */
.orders-list-view {
    padding: 15px 0;
    /* Vertical padding only */
    padding-bottom: 80px;
    /* Space for bottom nav/footer if any */
}

.order-list-card {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #f5f5f5;
    transition: transform 0.2s;
    cursor: pointer;
}

.order-list-card:active {
    transform: scale(0.98);
}

.olc-icon {
    width: 45px;
    height: 45px;
    background: #eef2f7;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 18px;
    margin-right: 15px;
    flex-shrink: 0;
}

.olc-info {
    flex: 1;
    min-width: 0;
    /* Text truncation fix */
}

.olc-info h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
}

.olc-info span {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-right: 5px;
    text-transform: capitalize;
}

/* Status Colors */
.status-pending {
    background: #fff3cd;
    color: #856404;
}

.status-processing {
    background: #cce5ff;
    color: #004085;
}

.status-shipped {
    background: #d4edda;
    color: #155724;
}

.status-delivered {
    background: #d1e7dd;
    color: #0f5132;
}

.status-cancelled {
    background: #f8d7da;
    color: #721c24;
}

.olc-date {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #95a5a6;
}

.olc-arrow {
    color: #bdc3c7;
    font-size: 14px;
    padding-left: 10px;
}


/* Updated Order List Card Styles */
.olc-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.olc-info h4 {
    margin-bottom: 2px;
}

.olc-date {
    margin-top: 0 !important;
    margin-bottom: 6px;
    font-size: 11px;
}

.status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    width: fit-content;
}

/* Status Colors applied to badge */
.status-badge.status-pending {
    background: #fff3cd;
    color: #856404;
}

.status-badge.status-processing {
    background: #cce5ff;
    color: #004085;
}

.status-badge.status-shipped {
    background: #d4edda;
    color: #155724;
}

.status-badge.status-delivered {
    background: #d1e7dd;
    color: #0f5132;
}

.status-badge.status-cancelled {
    background: #f8d7da;
    color: #721c24;
}

/* Status Colors applied to Icon too */
.olc-icon.status-pending {
    color: #856404;
    background: #fff3cd;
}

.olc-icon.status-processing {
    color: #004085;
    background: #cce5ff;
}

.olc-icon.status-shipped {
    color: #155724;
    background: #d4edda;
}

.olc-icon.status-delivered {
    color: #0f5132;
    background: #d1e7dd;
}

.olc-icon.status-cancelled {
    color: #721c24;
    background: #f8d7da;
}


/* Updated Order Card with Image */
.olc-image-wrapper {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
}

.olc-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.olc-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.olc-header-row {
    margin-bottom: 2px;
}

.olc-info h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #333;
}

.more-items {
    font-size: 10px;
    color: #888;
    background: #f0f0f0;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 5px;
}

.olc-price {
    font-weight: 700;
    font-size: 14px;
    color: #2c3e50;
    margin: 2px 0 4px;
}

.olc-meta {
    display: flex;
    align-items: center;
}

.olc-dot {
    margin: 0 5px;
    color: #ccc;
    font-size: 10px;
}

/* Custom Header for Orders Page */
.my-orders-active-header,
.mobile-subpage-header {
    display: none;
    /* Default hidden */
}

@media (max-width: 968px) {

    /* When viewing sub-page (body class toggled), hide main header and show custom header */
    /* Header Replacement - Matching Global Header Style */
    body.show-mobile-header .page-header,
    body.show-mobile-header header,
    body.show-mobile-header .main-header {
        display: none !important;
    }

    body.show-mobile-header .my-orders-active-header,
    body.show-mobile-header .mobile-subpage-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        /* Exact match to global header padding */
        background: #fff;
        height: 60px;
        /* Exact match to global header height */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2001;
        border-bottom: 1px solid #e0e0e0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        /* Match global shadow */
    }

    body.show-mobile-header .my-orders-active-header h2 {
        font-size: 18px;
        margin: 0;
        font-weight: 600;
        color: #212121;
        line-height: 1;
        /* Tighter line height for better alignment */
    }

    .header-left {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .header-back-btn {
        background: none;
        border: none;
        font-size: 20px;
        color: #333;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 30px;
        margin-right: 5px;
        /* Small gap between arrow and text */
    }

    body.show-mobile-header .my-orders-active-header h2 {
        font-size: 18px;
        margin: 0;
        font-weight: 600;
        color: #212121;
        line-height: 1;
    }

    /* Right side uses global header-actions class with same styling */
    .my-orders-active-header .header-actions {
        display: flex;
        align-items: center;
        gap: 5px;
        /* Match global header-actions gap on mobile */
    }

    /* Icons inherit from global .mobile-search-trigger and .mobile-menu-toggle */
    /* No additional styling needed - they automatically match */

    /* Content Area Adjustment */
    body.show-mobile-header .profile-main {
        padding-top: 70px !important;
        background: #f1f3f6 !important;
        min-height: 100vh;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Lock body dimensions when in orders view */
    body.show-mobile-header {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        min-height: 100vh;
    }

    body.show-mobile-header .profile-sidebar {
        display: none !important;
    }

    /* Maintain consistent backgrounds and dimensions when switching views */
    body.show-mobile-header .profile-section {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: none !important;
        /* Prevent animation flicker */
    }

    body.show-mobile-header.profile-page {
        background: var(--light-color) !important;
        /* Match default body background */
        transition: none !important;
    }

    body.show-mobile-header .profile-layout {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: none !important;
        overflow: visible !important;
        /* Allow sticky/fixed headers to work */
    }

    /* Ensure default state (no show-mobile-header) also has explicit dimensions */
    body:not(.show-mobile-header) .profile-section {
        padding: 10px 0 0 0 !important;
        margin: 0 !important;
        background: #fff !important;
        transition: none !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-y: visible !important;
        /* Critical for sticky */
        overflow-x: hidden !important;
    }

    body:not(.show-mobile-header) .profile-layout {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        /* Allow sticky header to work */
    }

    body:not(.show-mobile-header) .profile-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: none !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }

    /* Lock body dimensions in default state too */
    body:not(.show-mobile-header) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        min-height: 100vh;
    }

    /* Explicitly handle profile page body */
    body.profile-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Amazon/Flipkart Style Full Width List - Edge to Edge */
    body.show-mobile-header .orders-list-view {
        padding: 0 !important;
        /* Zero padding for edge-to-edge */
        background: #f1f3f6 !important;
        /* Gray background for gaps between cards */
    }

    body.show-mobile-header .order-list-card {
        margin: 0 0 6px 0 !important;
        /* Bottom gap only */
        padding: 16px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        width: 100% !important;
        background: #fff !important;
    }
}


/* Fix for header back button size */
.my-orders-active-header .header-back-btn {
    font-size: 20px;
    margin-right: 15px;
    background: none;
    border: none;
    color: #333;
}


/* Fix for header text visibility */
body.show-mobile-header .my-orders-active-header h2 {
    color: #333 !important;
    display: block !important;
    font-size: 18px !important;
    margin: 0 !important;
    font-weight: 600 !important;
    visibility: visible !important;
}

body.show-mobile-header .my-orders-active-header {
    justify-content: flex-start;
    /* Align start to keep back arrow left */
}


/* Fix for Order Card Alignment and Layout */
.order-list-card {
    display: flex !important;
    align-items: flex-start !important;
    /* Align top for better multiline handling */
    padding: 12px !important;
    gap: 0 !important;
    /* Reset default gap, use specific margins */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.olc-image-wrapper {
    margin-right: 12px !important;
    height: 70px !important;
    /* Slightly larger */
    width: 70px !important;
}

.olc-info {
    flex: 1 !important;
    width: auto !important;
    /* Let flex handle width */
    padding-right: 10px !important;
}

.olc-arrow {
    align-self: center !important;
    /* Keep arrow centered vertically */
}


/* Fix: Remove Slide Animation */
@media (max-width: 968px) {
    .profile-main {
        animation: none !important;
    }
}

/* Fix: Order List full width on mobile */
@media (max-width: 968px) {
    .orders-list-view {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .order-list-card {
        border-radius: 0 !important;
        /* Full width feel */
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        background: #fff !important;
        margin-bottom: 0 !important;
        /* Stack without gap */
    }
}

/* Fix: My Orders Header Icons */
.my-orders-active-header {
    justify-content: space-between !important;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icon {
    font-size: 18px;
    color: #333;
    text-decoration: none;
}

/* Hide Scroll to Top on My Orders Page */
body.show-mobile-header .scroll-to-top {
    display: none !important;
}

/* Ensure header text adjustment logic still works with new structure */
body.show-mobile-header .header-left h2 {
    color: #333 !important;
    display: block !important;
    font-size: 18px !important;
    margin: 0 !important;
    font-weight: 600 !important;
    visibility: visible !important;
}


/* Fix: My Orders Header to match Global Header Style */
.my-orders-active-header,
.mobile-subpage-header {
    height: 70px !important;
    /* Match Global Header */
    padding: 0 15px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Match global shadow if any */
    background: #fff;
}

.my-orders-active-header .header-left h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 5px !important;
}

.my-orders-active-header .header-right {
    gap: 15px !important;
    /* Consistent spacing */
}

/* Match Header Action Icons */
.my-orders-active-header .header-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 50%;
    /* Circular touch targets like typical mobile headers */
    color: #333;
    font-size: 16px;
    transition: all 0.2s;
}

.my-orders-active-header .header-icon:active {
    background: #eee;
}

/* Fix: Order List Card Spacing - Eliminate unwanted side gaps but keep it beautiful */
@media (max-width: 968px) {
    .orders-list-view {
        padding: 0 8px !important;
        /* Tiny padding for aesthetic gap */
        padding-top: 10px !important;
        background: #f5f5f5 !important;
        min-height: calc(100vh - 70px) !important;
    }

    .order-list-card {
        border-radius: 8px !important;
        /* Gentle curves */
        margin-bottom: 10px !important;
        /* Distinct cards */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        border: none !important;
        width: 100% !important;
        /* Full available width */
        padding: 12px !important;
        background: #fff !important;
    }

    .olc-image-wrapper {
        border-radius: 6px !important;
        border: 1px solid #f0f0f0;
    }

    /* Ensure no container limits inside orders tab */
    #orders {
        padding: 0 !important;
    }
}


/* ===== Slim Desktop Header ===== */
@media (min-width: 769px) {
    .top-bar {
        padding: 6px 0;
    }

    .main-header {
        padding: 10px 0;
    }

    .main-logo-img {
        height: 40px;
    }

    .title-logo-text {
        height: 44px;
    }

    .main-nav ul {
        gap: 30px;
    }

    .main-nav a {
        font-size: 13px;
        padding-bottom: 4px;
    }

    .search-box input {
        padding: 8px 16px;
        padding-right: 40px;
        width: 220px;
        font-size: 12.5px;
    }

    .search-box input:focus {
        width: 250px;
    }

    .cart-icon {
        font-size: 20px;
    }

    .header-actions {
        gap: 20px;
    }

    .dropdown-menu {
        padding: 10px 0;
    }

    .dropdown-menu a {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* Exact Header Icon Match */
.mobile-icon-btn {
    background: none;
    border: none;
    font-size: 22px;
    /* Standard size */
    color: #333;
    /* Standard color */
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Amazon/Flipkart Style Full Width List */
@media (max-width: 968px) {

    /* Container Reset */
    .orders-list-view {
        padding: 0 !important;
        /* Zero padding around container */
        padding-top: 85px !important;
        /* Header height + spacing */
        background: #f1f3f6 !important;
        /* The 'gap' color */
        min-height: 100vh;
    }

    /* The Card/Item Itself */
    .order-list-card {
        margin: 0 0 6px 0 !important;
        /* Bottom margin only for the 'gap' */
        padding: 16px !important;
        border-radius: 0 !important;
        /* Square corners */
        box-shadow: none !important;
        /* Flat */
        border: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
        /* Subtle separator if margin fails */
        width: 100% !important;
        background: #fff !important;
    }

    /* Layout Logic inside the card */
    .olc-image-wrapper {
        width: 75px !important;
        /* Defined size */
        height: 75px !important;
        margin-right: 15px !important;
        border: 1px solid #f0f0f0;
        border-radius: 4px !important;
        background: #fff;
    }

    /* Text Typography update */
    .olc-info h4 {
        font-size: 15px !important;
        color: #212121 !important;
        margin-bottom: 4px !important;
    }

    .olc-price {
        font-size: 16px !important;
    }

    /* Remove profile header spacing issues */
    .my-orders-active-header,
    .mobile-subpage-header {
        border-bottom: 1px solid #f0f0f0;
    }
}

/* Unified Mobile Header */
.mobile-subpage-header {
    display: none;
}

@media (max-width: 968px) {
    body.show-mobile-header .mobile-subpage-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 15px;
        background: #fff;
        height: 70px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2001;
        border-bottom: 1px solid #e0e0e0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .mobile-only-header-action {
        border-bottom: 1px solid #eee;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    }
}

.mobile-only {
    display: none;
}

/* ========================================= */
/* MOBILE APP-LIKE UI: ADDRESSES & PAYMENTS  */
/* ========================================= */
@media (max-width: 968px) {

    /* Addresses Tab */
    body.show-mobile-header #addresses {
        padding: 0 !important;
        background: #f1f3f6 !important;
        min-height: calc(100vh - 70px);
        /* Adjust for header height */
        padding-top: 70px !important;
        /* Start below fixed header */
        padding-bottom: 80px !important;
        box-sizing: border-box !important;
    }

    body.show-mobile-header .addresses-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        /* Small gap between cards */
        padding: 0;
    }

    body.show-mobile-header .address-card {
        background: #fff !important;
        border-radius: 0 !important;
        padding: 18px 15px !important;
        position: relative;
        box-shadow: none !important;
        border: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
        display: block;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    body.show-mobile-header .address-card:active {
        background-color: #f9f9f9 !important;
    }

    body.show-mobile-header .address-card .default-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: #e8f5e9;
        color: #2e7d32;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        border: 1px solid #c8e6c9;
        display: inline-block;
    }

    body.show-mobile-header .address-type {
        font-size: 12px !important;
        color: #7f8c8d !important;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 8px !important;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.show-mobile-header .address-card h4 {
        margin: 0 0 6px 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #212121 !important;
    }

    body.show-mobile-header .address-card p {
        margin: 0 !important;
        color: #555 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    body.show-mobile-header .address-actions {
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px dashed #eee !important;
        display: flex;
        gap: 15px;
    }

    body.show-mobile-header .address-actions .btn {
        flex: 1;
        text-align: center;
        padding: 8px 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
        background: #fff !important;
    }

    body.show-mobile-header .address-actions .btn:active {
        background: #f0f0f0 !important;
    }

    body.show-mobile-header .mobile-only-header-action {
        background: #fff !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid #e0e0e0 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
        margin-bottom: 8px !important;
    }

    body.show-mobile-header .mobile-only-header-action .btn {
        border-radius: 6px !important;
        font-weight: 600 !important;
        padding: 12px !important;
    }

    /* Payments Tab */
    body.show-mobile-header #payments {
        padding: 0 !important;
        background: #f1f3f6 !important;
        min-height: calc(100vh - 70px);
        padding-top: 70px !important;
        /* Start below fixed header */
        box-sizing: border-box !important;
    }

    body.show-mobile-header .saved-payments {
        padding: 0 0 80px 0 !important;
    }

    body.show-mobile-header .payment-card-item {
        display: flex !important;
        align-items: center !important;
        background: #fff !important;
        padding: 16px 15px !important;
        border-bottom: 1px solid #e0e0e0 !important;
        margin-bottom: 8px !important;
        /* App style gap */
        border-radius: 0 !important;
    }

    body.show-mobile-header .payment-card-item:active {
        background-color: #f9f9f9 !important;
    }

    body.show-mobile-header .pc-icon {
        width: 45px !important;
        height: 32px !important;
        background: #f5f5f5 !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        color: #1a1a1a !important;
        margin-right: 15px !important;
        flex-shrink: 0 !important;
    }

    /* Specific Colors for payment icons */
    body.show-mobile-header .pc-icon .fa-cc-visa {
        color: #1a1f71 !important;
    }

    body.show-mobile-header .pc-icon .fa-cc-mastercard {
        color: #eb001b !important;
    }

    body.show-mobile-header .pc-icon .fa-google-pay {
        color: #5f6368 !important;
    }

    body.show-mobile-header .pc-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    body.show-mobile-header .pc-info h4 {
        margin: 0 0 2px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #212121 !important;
    }

    body.show-mobile-header .pc-info p {
        margin: 0 !important;
        font-size: 13px !important;
        color: #757575 !important;
    }

    body.show-mobile-header .payment-card-item .btn-text {
        color: #e53935 !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        background: none !important;
        border: none !important;
        padding: 5px !important;
        margin-left: 10px !important;
    }

    /* Add payment button styling in payments tab */
    body.show-mobile-header .saved-payments .btn-block {
        display: none !important;
        /* Hide inline button, replace with FAB */
    }

    /* Floating Action Button */
    .mobile-fab {
        position: fixed;
        bottom: 85px;
        /* Moved up to clear bottom navigation */
        right: 20px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--primary-color);
        color: #fff;
        display: none;
        /* Default hidden, shown via JS or specific tab classes */
        align-items: center;
        justify-content: center;
        font-size: 24px;
        border: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        z-index: 2000;
        cursor: pointer;
        transition: transform 0.2s, background 0.2s;
    }

    .mobile-fab:active {
        transform: scale(0.95);
        background: #0056b3;
        /* Or slightly darker primary */
    }

    body.show-mobile-header #addresses.active~.mobile-fab.fab-address,
    body.show-mobile-header #payments.active~.mobile-fab.fab-payment {
        display: flex;
        animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes popIn {
        0% {
            transform: scale(0);
            opacity: 0;
        }

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

    /* Bottom Sheet Modal Styles */
    .mobile-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 4000;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-modal-overlay.show {
        display: block;
        opacity: 1;
    }

    .mobile-bottom-sheet {
        position: fixed;
        bottom: -100%;
        /* Start off-screen */
        left: 0;
        width: 100%;
        background: #fff;
        border-radius: 20px 20px 0 0;
        z-index: 4001;
        padding: 25px 20px 80px 20px;
        /* Added bottom padding to avoid overlap with bottom nav */
        box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.1);
        transition: bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        max-height: 90vh;
        overflow-y: auto;
    }

    .mobile-bottom-sheet.show {
        bottom: 0;
    }

    /* Modal Drag Handle for Aesthetics */
    .mobile-bottom-sheet::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background: #e0e0e0;
        border-radius: 5px;
    }

    .mobile-bottom-sheet h3 {
        margin: 10px 0 20px;
        font-size: 18px;
        color: #212121;
        text-align: center;
    }

    /* Reset form styles for modal context */
    .mobile-bottom-sheet form .form-group {
        margin-bottom: 15px;
    }

    .mobile-bottom-sheet form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .mobile-bottom-sheet button[type="submit"] {
        width: 100%;
        margin-bottom: 10px;
        padding: 14px;
        font-size: 16px;
        border-radius: 8px;
    }

    .mobile-bottom-sheet .btn-outline {
        width: 100%;
        padding: 14px;
        font-size: 16px;
        border-radius: 8px;
        margin: 0;
    }
}

/* Mobile Testimonial Marquee Styles */
@media (max-width: 768px) {
    .testimonials-grid.marquee-active {
        display: block !important;
        overflow: hidden;
        position: relative;
        width: 100%;
        mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    }

    /* Note: JS uses this class or just direct children? JS uses .marquee-track */

    .marquee-track {
        display: flex;
        /* gap: 20px; Removed to fix loop math */
        width: max-content;
        animation: marquee-scroll 20s linear infinite;
        padding: 10px 0;
    }

    .marquee-track .testimonial-card {
        flex: 0 0 85vw;
        /* Almost full width with peek */
        width: 85vw;
        max-width: 350px;
        margin: 0;
        margin-right: 20px;
        /* Use margin instead of gap for perfect 1/3 division */
        white-space: normal;
        /* Ensure text wraps inside card */
    }

    /* Pause on hover */
    .marquee-track:hover {
        animation-play-state: paused;
    }

    @keyframes marquee-scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-33.33%);
        }

        /* Since content is tripled (3 sets), moving 1/3 shifts one whole set */
    }
}


/* Fix footer-bottom hidden behind mobile-bottom-nav */
@media (max-width: 768px) {
    .footer-bottom {
        padding-bottom: 80px;
        /* 60px nav height + 20px breathing room */
    }

    .footer-bottom-content {
        text-align: center;
    }

    .payment-methods {
        justify-content: center !important;
        display: flex !important;
        flex-direction: row !important;
        width: 100%;
        gap: 15px;
        /* Add some spacing if needed */
    }
}

/* Fix for Scroll to Top Button on Mobile */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 90px !important;
        /* Above the 70px bottom nav */
    }
}


/* Search Page Styles */
.search-page-header {
    background: #f8f9fa;
    padding: 30px 0;
    margin-bottom: 20px;
    text-align: center;
}

.search-header-content h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}

.search-header-content p {
    color: #666;
    margin: 0;
}

.search-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.mobile-sort-filter {
    position: relative;
    display: flex;
    align-items: center;
}

.mobile-sort-filter i {
    position: absolute;
    right: 10px;
    pointer-events: none;
    color: #555;
    font-size: 14px;
}

.sort-select {
    padding: 8px 35px 8px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    font-size: 14px;
    appearance: none;
    cursor: pointer;
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.no-products-found {
    text-align: center;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    /* Center vertically in the viewport */
}

.no-products-found img {
    max-width: 200px;
    margin-bottom: 20px;
    opacity: 0.6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .search-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .search-page-header {
        padding: 20px 0;
    }

    .search-header-content h1 {
        font-size: 20px;
    }

    .sort-select {
        padding: 8px 30px 8px 12px;
        font-size: 13px;
    }

    /* Ensure product cards look good in 2-col layout */
    .search-grid .product-card {
        margin-bottom: 0;
    }

    .search-grid .product-image {
        height: 160px;
        /* Adjust as needed */
    }

    .search-grid .product-actions {
        display: none;
        /* Often hidden on mobile grid to save space, or keep generic styles */
    }

    .search-controls {
        justify-content: space-between;
        /* If we add filter button later */
        justify-content: flex-end;
        padding: 0 5px;
    }
}


/* New Search Page Styles */
.search-meta-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.search-meta-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-query-text {
    font-size: 14px;
    color: #333;
}

.search-query-text strong {
    font-weight: 600;
    color: var(--primary-color);
}

.search-query-text small {
    color: #777;
    margin-left: 5px;
    font-size: 13px;
}

.sort-action-wrapper {
    display: flex;
    align-items: center;
}

.mobile-sort-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #ddd;
    color: #555;
    font-size: 13px;
    cursor: pointer;
}

.sort-select-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Mobile Specific Search Page */
@media (max-width: 768px) {

    /* Hide Footer on Search Page */
    body.search-page .footer {
        display: none !important;
    }

    /* Make Search Meta Bar Sticky and Amazon-like */
    .search-meta-bar {
        position: sticky;
        top: 60px;
        /* Below main header */
        z-index: 99;
        margin-bottom: 0px;
        background: #fdfdfd;
        border-bottom: 1px solid #e0e0e0;
        padding: 8px 0;
    }

    .search-meta-flex {
        padding: 0 5px;
    }

    .search-query-text {
        font-size: 13px;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 10px;
    }

    .mobile-sort-trigger {
        border: none;
        background: transparent;
        color: #333;
        font-weight: 500;
        padding: 5px 0;
    }

    .mobile-sort-trigger i {
        color: #666;
    }

    .search-results-section {
        padding-top: 15px;
        /* Add space below sticky bar */
        min-height: 100vh;
        background: #fff;
        /* Ensure full white background */
    }

    /* Polish the Grid for Mobile */
    .search-grid {
        gap: 10px !important;
        background: transparent;
        border-top: none;
        width: 100%;
        /* Reset to normal width */
        margin: 0;
        /* Reset margins */
    }

    .search-grid .product-card {
        background: #fff;
        border-radius: 8px;
        /* Slightly rounded corners */
        padding: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        /* Subtle shadow */
        border: none;
        margin: 0;
    }

    .search-grid .product-image {
        padding: 5px;
        margin-bottom: 8px;
        height: auto;
        aspect-ratio: 1/1;
    }

    .search-grid .product-title {
        font-size: 13px;
        /* Restored size */
        line-height: 1.4;
        height: auto;
        /* Allow natural height */
        max-height: 2.8em;
        /* Limit 2 lines */
        overflow: hidden;
        margin-bottom: 5px;
        padding: 0;
        font-weight: 500;
        color: #333;
    }

    .search-grid .product-rating {
        display: flex !important;
        /* Show rating */
        font-size: 11px;
        margin-bottom: 5px;
        color: #ffc107;
    }

    .search-grid .product-rating i {
        margin-right: 1px;
    }

    .search-grid .product-rating span {
        color: #777;
        margin-left: 4px;
    }

    .search-grid .product-price {
        font-size: 15px;
        padding: 0;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .search-grid .current-price {
        font-weight: 700;
        color: #B12704;
        /* Amazon price color */
    }

    /* Hide Discount Badge on Search Grid to cleaner look or make it smaller */
    .search-grid .discount-badge {
        font-size: 10px;
        padding: 2px 4px;
        top: 5px;
        left: 5px;
    }
}


/* Extra tightening for search result cards */
@media (max-width: 768px) {
    .search-grid .product-info {
        padding: 5px 0 0 0;
        text-align: left;
    }

    .search-grid .product-cat {
        display: none;
        /* Hide category for compactness */
    }

    .search-grid .product-card {
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Remove container padding just for search results to go edge-to-edge */
    .search-results-section .container {
        padding-left: 0;
        padding-right: 0;
    }

    .search-grid {
        width: 100%;
        margin: 0;
    }
}


/* Center 'No Products Found' on Mobile */
@media (max-width: 768px) {
    .no-products-found {
        min-height: calc(100vh - 140px);
        /* Full height minus header & sticky bar */
        margin-top: -20px;
        /* Slight visual adjustment */
    }
}


/* Reset search container margins to handle shadows properly */
@media (max-width: 768px) {
    .search-results-section .container {
        padding-left: 15px;
        padding-right: 15px;
        background: transparent;
    }

    .search-grid .product-card {
        border-right: none;
        border-bottom: none;
    }
}



/* Advanced Product Gallery Layout (Flipkart/Amazon style) */
.product-gallery-wrapper {
    display: flex;
    gap: 20px;
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.gallery-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 60px;
    flex-shrink: 0;
    max-height: 500px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.gallery-thumbnails::-webkit-scrollbar {
    display: none;
}

.gallery-thumb {
    width: 100%;
    height: 70px;
    object-fit: contain;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background-color: #fcfcfc;
    transition: all 0.2s ease;
    padding: 2px;
}

.gallery-thumb:not(.active) {
    border-color: #eee;
}

.gallery-thumb:hover {
    border-color: var(--secondary-color);
}

.gallery-thumb.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.gallery-main-image {
    flex: 1;
    height: 500px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #fdfdfd;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0f0f0;
    cursor: crosshair;
}

.gallery-main-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.1s ease-out;
}

.product-gallery-wrapper .product-image-overlays {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-images {
    display: none;
}

@media screen and (max-width: 900px) {
    .product-detail-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .product-gallery-wrapper {
        flex-direction: column-reverse;
        padding: 5px;
        box-shadow: none;
    }

    .gallery-main-image {
        height: 350px;
        border: none;
        cursor: default;
    }

    .gallery-thumbnails {
        flex-direction: row !important;
        width: 100%;
        height: 60px;
        overflow-x: auto;
        gap: 8px;
    }

    .gallery-thumb {
        width: 60px;
        height: 100%;
    }
}

/* ===================================================================
   TRUSTED CHOICES — VIDEO REELS SECTION
   =================================================================== */
.trusted-videos-section {
    padding: 50px 0;
    background: linear-gradient(180deg, #faf9f6 0%, #f5f0ea 100%);
}

.videos-scroll-wrapper {
    position: relative;
    margin-top: 10px;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

.videos-horizontal {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 20px 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.videos-horizontal::-webkit-scrollbar {
    display: none;
}

/* Marquee mode — CSS animation like testimonials */
.videos-horizontal.videos-marquee-active {
    overflow: hidden;
    width: max-content;
    animation: videos-marquee-scroll 30s linear infinite;
    padding: 10px 0 20px;
}

.videos-horizontal.videos-marquee-active:hover {
    animation-play-state: paused;
}

.videos-horizontal.videos-marquee-active .reel-card {
    margin-right: 14px;
}

@keyframes videos-marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.33%);
    }
}

/* Reel Card — Big vertical card matching reference */
.reel-card {
    flex: 0 0 240px;
    height: 420px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #111;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s;
}

.reel-card:hover {
    transform: translateY(-4px);
}

.reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Discount badge top-left */
.reel-discount-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    background: #e74c3c;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
    line-height: 1;
}

/* Product overlay at bottom of card */
.reel-product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    text-decoration: none;
    color: #fff;
}

.reel-product-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

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

.reel-product-img i {
    color: #aaa;
    font-size: 16px;
}

.reel-product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reel-product-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.reel-product-price {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reel-product-price del {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}

/* ===================================================================
   VIDEO DETAIL MODAL
   =================================================================== */
.video-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.video-modal-overlay.active {
    display: flex;
}

.video-modal {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: modalSlideUp 0.3s ease;
}

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

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

.video-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.video-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.video-modal-layout {
    display: flex;
    height: 80vh;
    max-height: 600px;
}

/* Left: Video Player */
.video-modal-player {
    flex: 0 0 340px;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal-player video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-modal-product {
    position: absolute;
    bottom: 54px;
    left: 0;
    width: 340px;
    padding: 0 12px;
    z-index: 15;
    pointer-events: auto;
    box-sizing: border-box;
}

.video-modal-product a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: #2b4a3c;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.video-modal-product a:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.video-modal-product a img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e0e0;
    flex-shrink: 0;
    background: #f5f5f5;
}

.video-modal-product .vmp-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.video-modal-product .vmp-info span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-modal-product .vmp-info span:first-child {
    font-size: 13px;
    font-weight: 600;
    color: #2b4a3c;
}

.video-modal-product .vmp-info span:last-child {
    font-size: 12px;
    color: #555;
    font-weight: 700;
}

.video-modal-product .vmp-info span:last-child del {
    color: #bbb;
    margin-left: 4px;
    font-weight: 400;
    font-size: 11px;
}

/* Right: Interaction Panel */
.video-modal-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.video-modal-title {
    padding: 20px 20px 12px;
    font-size: 16px;
    font-weight: 600;
    color: #222;
    border-bottom: 1px solid #f0f0f0;
}

.video-modal-actions {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.vm-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.vm-action-btn:hover {
    background: #f5f5f5;
}

.vm-action-btn.liked {
    color: #ff4757;
    border-color: #ffcdd2;
    background: #fff5f5;
}

/* Comment toggle button — hidden on desktop, shown on mobile */
.vm-comment-toggle {
    display: none;
}

.vm-action-btn.liked i {
    animation: likePopReel 0.3s ease;
}

@keyframes likePopReel {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

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

/* Comments Area */
.video-modal-comments {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.video-modal-comments h4 {
    padding: 14px 20px 10px;
    font-size: 14px;
    color: #444;
    margin: 0;
}

.vm-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 10px;
}

.vm-comment {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f8f8f8;
}

.vm-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b4a3c, #c5a47e);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vm-comment-body {
    flex: 1;
    min-width: 0;
}

.vm-comment-body strong {
    font-size: 13px;
    color: #333;
}

.vm-comment-body p {
    font-size: 13px;
    color: #555;
    margin: 3px 0;
    line-height: 1.4;
    word-break: break-word;
}

.vm-comment-body small {
    font-size: 11px;
    color: #aaa;
}

/* Comment Form */
.vm-comment-form {
    border-top: 1px solid #f0f0f0;
    padding: 12px 20px;
}

.vm-comment-form form {
    display: flex;
    gap: 8px;
}

.vm-comment-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.vm-comment-form input:focus {
    border-color: #2b4a3c;
}

.vm-comment-form button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2b4a3c;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
}

.vm-comment-form button:hover {
    background: #1e3a2c;
}

/* ===== MOBILE-ONLY ELEMENTS (hidden on desktop) ===== */
.mobile-video-title,
.mobile-video-actions,
.mobile-comments-sheet {
    display: none;
}

.mobile-video-title {
    position: absolute;
    bottom: 20px;
    left: 12px;
    right: 70px;
    z-index: 50;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}

.mobile-video-actions {
    position: absolute;
    right: 10px;
    bottom: 120px;
    z-index: 50;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.mobile-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    padding: 0;
}

.mobile-action-btn i {
    font-size: 26px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.mobile-action-btn.liked {
    color: #ff4757;
}

.mobile-action-btn.liked i {
    animation: likePopReel 0.3s ease;
}

/* Mobile comments bottom sheet */
.mobile-comments-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    z-index: 10000;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.25);
}

.mobile-comments-sheet.open {
    transform: translateY(0);
}

.mobile-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.mobile-sheet-header button {
    background: none;
    border: none;
    font-size: 18px;
    color: #888;
    cursor: pointer;
    padding: 4px;
}

.mobile-sheet-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px;
    -webkit-overflow-scrolling: touch;
}

.mobile-sheet-form {
    padding: 10px 16px;
    border-top: 1px solid #eee;
    background: #fff;
}

.mobile-sheet-form form {
    display: flex;
    gap: 8px;
}

.mobile-sheet-form input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 24px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    -webkit-appearance: none;
}

.mobile-sheet-form input:focus {
    border-color: #2b4a3c;
}

.mobile-sheet-form button[type="submit"] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2b4a3c;
    color: #fff;
    border: none;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Desktop-only helper */
.desktop-only {}

/* ===== VIDEO SECTION — MOBILE ===== */
@media (max-width: 768px) {
    .trusted-videos-section {
        padding: 20px 0;
    }

    .trusted-videos-section .section-header h2 {
        font-size: 20px;
        white-space: nowrap;
    }

    .reel-card {
        flex: 0 0 170px;
        height: 300px;
        border-radius: 12px;
    }

    .reel-discount-badge {
        width: 36px;
        height: 36px;
        font-size: 10px;
        top: 8px;
        left: 8px;
    }

    .reel-product-overlay {
        padding: 10px 8px;
        gap: 8px;
    }

    .reel-product-img {
        width: 32px;
        height: 32px;
    }

    .reel-product-name {
        font-size: 11px;
    }

    .reel-product-price {
        font-size: 11px;
    }

    .reel-product-price del {
        font-size: 10px;
    }

    .videos-horizontal {
        padding: 10px 0 20px;
        gap: 10px;
    }

    .videos-horizontal.videos-marquee-active {
        animation-duration: 20s;
    }

    /* ===== REELS / SHORTS STYLE MODAL ===== */
    .video-modal-overlay {
        padding: 0;
        background: #000;
    }

    .video-modal {
        border-radius: 0;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        background: #000;
        animation: none;
        overflow: visible;
    }

    .video-modal-layout {
        position: absolute;
        inset: 0;
        max-height: none;
    }

    /* Video fills full screen */
    .video-modal-player {
        position: absolute;
        inset: 0;
        flex: none;
        height: 100%;
        width: 100%;
    }

    .video-modal-player video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
    }

    /* Hide desktop panel entirely on mobile */
    .video-modal-panel {
        display: none !important;
    }

    /* Close button — top left */
    .video-modal-close {
        z-index: 50;
        top: 14px;
        left: 14px;
        right: auto;
        width: 36px;
        height: 36px;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(8px);
    }

    /* Mobile title overlay — bottom left */
    .mobile-video-title {
        display: block;
    }

    /* Mobile action buttons — right side vertical */
    .mobile-video-actions {
        display: flex;
    }

    /* Product bar */
    .video-modal-product {
        position: absolute;
        bottom: 75px;
        left: 12px;
        right: 70px;
        width: auto;
        padding: 0;
        z-index: 50;
    }

    .video-modal-product a {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 12px;
        font-size: 12px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .video-modal-product a img {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .video-modal-product .vmp-info span:first-child {
        font-size: 12px;
        color: #1a1a1a;
    }

    .video-modal-product .vmp-info span:last-child {
        font-size: 13px;
        color: #2b4a3c;
        font-weight: 700;
    }

    .video-modal-product a .fa-chevron-right {
        color: #999;
        font-size: 12px;
    }

    /* Mobile comments sheet */
    .mobile-comments-sheet {
        display: flex;
    }
}

/* Premium Cart Toast Notification */
.cart-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    padding: 8px 12px; /* Slimmer padding */
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    transform: translateY(150%) scale(0.9);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.4);
    min-width: 280px;
    max-width: 350px;
}

.cart-toast.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.cart-toast-img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    background: #f5f5f5;
    flex-shrink: 0;
}

.cart-toast-content {
    flex: 1;
    overflow: hidden;
}

.cart-toast-content h4 {
    font-size: 13px;
    margin-bottom: 0;
    color: var(--dark-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-toast-content p {
    font-size: 11px;
    color: #666;
    margin: 0;
    white-space: nowrap;
}

.cart-toast-btn {
    color: var(--primary-color);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-left: 1px solid #eee;
    margin-left: 5px;
}

@media (max-width: 768px) {
    .cart-toast {
        left: 50%;
        right: auto;
        transform: translate(-50%, 150%) scale(0.9);
        bottom: 80px; /* Above mobile bottom nav */
        width: calc(100% - 30px);
        min-width: auto;
    }
    
    .cart-toast.show {
        transform: translate(-50%, 0) scale(1);
    }
}