/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
    --primary-dark:   #1a1614;
    --deep-red:       #8B2635;
    --accent-gold:    #C9A961;
    --soft-beige:     #E8DCC4;
    --cream:          #F5F0E8;
    --white:          #ffffff;
    --gray-light:     #f8f6f3;
    --text-color:     #2d2926;
    --text-muted:     #6b6560;
    --border-light:   rgba(201, 169, 97, 0.15);
    --shadow-soft:    0 4px 20px rgba(139, 38, 53, 0.08);
    --shadow-hover:   0 8px 30px rgba(139, 38, 53, 0.15);
    --transition:     all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--cream);
}

h1, h2, h3, h4, h5 {
    font-family: 'Outfit', sans-serif;
    color: var(--primary-dark);
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.container {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hide mobile elements on desktop */
.mobile-menu-btn,
.mobile-search-btn,
.mobile-menu-overlay,
.mobile-menu-close,
.mobile-bottom-nav {
    display: none !important;
}

/* Mobile menu button base styles (will be shown only on mobile) */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Desktop Navigation - Normal Sticky Behavior */
@media (min-width: 769px) {
    .main-nav {
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Ensure mobile menu button is hidden on desktop */
    .mobile-menu-btn {
        display: none !important;
    }
    
    /* Ensure mobile search row is hidden on desktop */
    .mobile-search-row {
        display: none !important;
    }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 14px 40px;
    background: linear-gradient(135deg, var(--deep-red) 0%, #6d1e2a 100%);
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.8rem;
    transition: var(--transition);
    font-family: 'Outfit', sans-serif;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #6d1e2a 0%, var(--deep-red) 100%);
    transition: var(--transition);
    z-index: -1;
}
.btn:hover::before {
    left: 0;
}
.btn:hover { 
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    color: #fff;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--accent-gold);
    color: var(--primary-dark);
    padding: 10px 24px;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    transition: var(--transition);
}
.btn-outline:hover { 
    background: var(--accent-gold);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

/* ── Flash Messages ────────────────────────────────────────────────────── */
#msg-flash,
.alert {
    padding: 16px 24px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    border-left: 4px solid;
}
.alert-success, #msg-flash {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
    color: #2e7d32;
    border-color: #4caf50;
    box-shadow: 0 2px 10px rgba(76, 175, 80, 0.1);
}
.alert-danger {
    background: linear-gradient(135deg, #ffebee 0%, #fef5f5 100%);
    color: #c62828;
    border-color: #ef5350;
    box-shadow: 0 2px 10px rgba(239, 83, 80, 0.1);
}
.alert-warning {
    background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%);
    color: #f57c00;
    border-color: #ffa726;
    box-shadow: 0 2px 10px rgba(255, 167, 38, 0.1);
}

/* ── Header ────────────────────────────────────────────────────────────── */
header { 
    transition: box-shadow 0.3s;
    backdrop-filter: blur(10px);
}
.top-bar a:hover  { color: var(--accent-gold); }
.header-icons a {
    transition: var(--transition);
}
.header-icons a:hover { 
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.1) 0%, rgba(201, 169, 97, 0.15) 100%);
    transform: translateY(-2px);
}
.main-nav a {
    position: relative;
    transition: var(--transition);
}
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--accent-gold);
    transition: var(--transition);
    transform: translateX(-50%);
}
.main-nav a:hover::after {
    width: 80%;
}
.main-nav a:hover { 
    color: var(--accent-gold) !important;
    background: rgba(201, 169, 97, 0.1);
}
.main-nav li:hover {
    background: rgba(201, 169, 97, 0.05);
}

/* Search bar hover effect */
.search-area:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.2);
    transform: translateY(-1px);
}

.search-area button:hover {
    background: linear-gradient(135deg, #6d1e2a 0%, var(--deep-red) 100%);
}

/* Logo hover effect */
.logo a:hover {
    transform: scale(1.02);
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT CARDS - RESPONSIVE GRID SYSTEM (Maria.B Fashion Style)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── DESKTOP: 4 Cards Per Row ─────────────────────────────────────────── */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    width: 100%;
}

.product-card {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    transition: var(--transition);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    width: 100%;
    margin: 0 auto;
}

/* Product Image Container - Fashion 3:4 Ratio */
.product-card > a > div:first-child,
.product-card-img-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.product-card:hover { 
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

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

.product-card:hover .quick-actions {
    opacity: 1 !important;
}

/* ─── TABLET: 3 Cards Per Row (768px - 1024px) ────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

/* ─── MOBILE: 2 Cards Per Row (< 768px) ───────────────────────────────── */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .product-card {
        border-radius: 10px;
    }
    
    /* Maintain 3:4 aspect ratio on mobile */
    .product-card > a > div:first-child,
    .product-card-img-container {
        aspect-ratio: 3 / 4 !important;
    }
}

/* ─── SMALL MOBILE: 2 Cards Per Row (< 480px) ─────────────────────────── */
@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .product-card {
        border-radius: 8px;
    }
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.1) !important;
}

/* ── Auth Pages ────────────────────────────────────────────────────────── */
.auth-card { 
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    background: var(--white);
}

/* ── Admin Panel ───────────────────────────────────────────────────────── */
.btn-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(44, 82, 130, 0.2);
}
.btn-admin:hover { 
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.3);
    color: #fff;
}

/* ── Pagination ────────────────────────────────────────────────────────── */
.pagination a:hover {
    background: var(--accent-gold) !important;
    color: var(--primary-dark) !important;
    border-color: var(--accent-gold) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

/* ── Scrollbar (webkit) ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { 
    background: linear-gradient(180deg, var(--accent-gold) 0%, #b8935a 100%);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { 
    background: linear-gradient(180deg, #b8935a 0%, var(--accent-gold) 100%);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .search-area { max-width: 500px !important; }
}

@media (max-width: 992px) {
    .search-area { display: none !important; }

    /* Product detail */
    .product-detail { grid-template-columns: 1fr !important; }

    /* Shop page */
    .shop-content  { grid-template-columns: 1fr !important; }
    .filters       { display: none; }
    
    .products-listing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* Cart */
    .cart-section > div { grid-template-columns: 1fr !important; }

    /* Checkout */
    .checkout-section form > div { grid-template-columns: 1fr !important; }

    /* Profile */
    .profile-section > div { grid-template-columns: 1fr !important; }

    /* Hero */
    .hero h1 { font-size: 3rem !important; }
    .categories-grid { grid-template-columns: 1fr !important; }

    /* Related products */
    section[style*="repeat(4,1fr)"] > div { grid-template-columns: repeat(2,1fr) !important; }
}

@media (max-width: 768px) {
    /* Footer Mobile - Accordion Style */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    
    .footer-col {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .footer-col:first-child {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 20px;
        margin-bottom: 0;
    }
    
    /* Footer Accordion Headers */
    .footer-col h4 {
        cursor: pointer;
        position: relative;
        padding: 18px 0;
        margin: 0 !important;
        user-select: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .footer-col h4::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.8rem;
        color: var(--accent-gold);
        transition: transform 0.3s;
    }
    
    .footer-col h4.active::after {
        transform: rotate(180deg);
    }
    
    /* Footer Accordion Content */
    .footer-col ul,
    .footer-col > div:not(:first-child) {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    
    .footer-col.active ul,
    .footer-col.active > div:not(:first-child) {
        max-height: 500px;
        transition: max-height 0.5s ease-in;
    }
    
    .footer-col ul {
        padding-bottom: 15px;
    }
    
    /* Hide first column content on mobile (logo section) */
    .footer-col:first-child img,
    .footer-col:first-child p,
    .footer-col:first-child .social-links {
        display: block !important;
    }
    
    .footer-col:first-child h4 {
        display: none;
    }
    
    /* Footer Bottom - Add padding for mobile nav */
    .footer-bottom {
        padding-bottom: 80px !important;
        margin-bottom: 0 !important;
    }
    
    .footer-bottom > div {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }
    
    .footer-bottom p {
        font-size: 0.75rem !important;
        margin: 0 !important;
    }
    
    .payment-methods {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr !important; }
    .footer-grid   { grid-template-columns: 1fr !important; }
    .main-nav ul   { justify-content: flex-start !important; padding: 0 15px; }
    
    .products-listing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* ── Additional Enhancements ───────────────────────────────────────────── */
.category-card {
    transition: var(--transition);
}
.category-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 12px 40px rgba(139, 38, 53, 0.2) !important;
}

/* Smooth page transitions */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enhanced link styling */
a {
    transition: var(--transition);
}

/* Badge styling */
.badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--deep-red);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
}

/* Icon banner enhancements */
.icon-banner i {
    transition: var(--transition);
}
.icon-banner > div > div:hover i {
    color: var(--deep-red) !important;
    transform: scale(1.15) rotate(5deg);
}
.icon-banner > div > div {
    transition: var(--transition);
}
.icon-banner > div > div:hover {
    transform: translateY(-3px);
}

/* Search button enhancement */
.search-area button {
    transition: var(--transition);
}
.search-area button:hover {
    background: var(--primary-dark) !important;
}

/* Logo hover effect */
.logo a {
    transition: var(--transition);
}
.logo a:hover {
    opacity: 0.8;
}

/* Cart badge pulse animation */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.header-icons a span span {
    animation: pulse 2s infinite;
}

/* Floating animation for hero badges */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.hero-text span:first-child {
    animation: float 3s ease-in-out infinite;
}

/* Shimmer effect for buttons */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: var(--transition);
}

.btn:hover::after {
    left: 100%;
}

/* Product card image zoom effect */
.product-card img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Section title decorative line animation */
@keyframes expandLine {
    from { width: 0; }
    to { width: 80px; }
}

/* Sticky navigation shadow on scroll */
.main-nav.scrolled {
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Enhanced focus states for accessibility */
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--accent-gold);
    outline-offset: 3px;
}

/* Gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, var(--deep-red) 0%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ========================================
   Product Description Content Styling
   ======================================== */

/* Short Description Styling */
.product-description-content h1,
.product-description-content h2,
.product-description-content h3,
.product-description-content h4 {
    font-weight: 600;
    color: var(--primary-dark);
    margin: 12px 0 8px 0;
    line-height: 1.4;
}

.product-description-content h1 { font-size: 1.3rem; }
.product-description-content h2 { font-size: 1.1rem; }
.product-description-content h3 { font-size: 1rem; }
.product-description-content h4 { font-size: 0.95rem; }

.product-description-content p {
    margin: 8px 0;
    line-height: 1.7;
}

.product-description-content ul,
.product-description-content ol {
    margin: 10px 0;
    padding-left: 20px;
}

.product-description-content li {
    margin-bottom: 5px;
    line-height: 1.6;
}

.product-description-content strong {
    font-weight: 600;
    color: var(--primary-dark);
}

.product-description-content em {
    font-style: italic;
}

.product-description-content a {
    color: var(--deep-red);
    text-decoration: underline;
}

.product-description-content a:hover {
    color: var(--accent-gold);
}

/* Long Description Styling */
.product-long-description {
    margin-top: 40px;
    padding: 30px;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}

.product-long-description h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent-gold);
}

.product-long-description h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-top: 25px;
    margin-bottom: 15px;
}

.product-long-description h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-top: 20px;
    margin-bottom: 12px;
}

.product-long-description p {
    line-height: 1.8;
    margin-bottom: 15px;
    color: var(--text-color);
}

.product-long-description ul,
.product-long-description ol {
    margin: 15px 0;
    padding-left: 25px;
}

.product-long-description li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.product-long-description strong {
    font-weight: 600;
    color: var(--primary-dark);
}

.product-long-description em {
    font-style: italic;
}

.product-long-description a {
    color: var(--deep-red);
    text-decoration: underline;
}

.product-long-description a:hover {
    color: var(--accent-gold);
}

.product-long-description table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.product-long-description table td,
.product-long-description table th {
    border: 1px solid var(--border-light);
    padding: 12px 15px;
    text-align: left;
}

.product-long-description table th {
    background: linear-gradient(135deg, var(--deep-red) 0%, #6d1e2a 100%);
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.product-long-description table tr:nth-child(even) {
    background-color: var(--soft-beige);
}


/* ========================================
   MOBILE RESPONSIVE STYLES - HOMEPAGE
   ======================================== */

@media (max-width: 768px) {
    /* Hero Section Mobile */
    .hero {
        height: 500px !important;
        margin-top: 0 !important;
    }
    
    .hero-text {
        max-width: 100% !important;
        padding: 0 20px;
    }
    
    .hero-text h1 {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
    }
    
    .hero-text p {
        font-size: 0.95rem !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
    }
    
    .hero-text > div {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .hero-text a {
        width: 100%;
        text-align: center;
        padding: 14px 30px !important;
        font-size: 0.8rem !important;
    }
    
    /* Icon Banner Mobile - Single Row with 4 Columns */
    .icon-banner {
        padding: 20px 0 !important;
        overflow-x: auto;
    }
    
    .icon-banner .container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 10px !important;
        min-width: max-content;
    }
    
    .icon-banner .container > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 15px 12px !important;
        border-right: 1px solid rgba(201, 169, 97, 0.3) !important;
        min-width: 140px !important;
        flex: 0 0 auto !important;
        background: transparent !important;
    }
    
    /* Remove border from last item */
    .icon-banner .container > div:last-child {
        border-right: none !important;
    }
    
    .icon-banner .container > div i {
        font-size: 1.8rem !important;
        margin: 0 !important;
        display: block !important;
    }
    
    .icon-banner .container > div > div {
        text-align: center !important;
        width: 100% !important;
    }
    
    .icon-banner .container > div h4 {
        font-size: 0.7rem !important;
        margin: 6px 0 3px 0 !important;
        text-align: center !important;
        display: block !important;
        line-height: 1.2 !important;
    }
    
    .icon-banner .container > div p {
        font-size: 0.65rem !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    .icon-banner .container > div p {
        font-size: 0.7rem !important;
        margin: 0 !important;
        text-align: center !important;
        display: block !important;
    }
    
    /* Categories Grid Mobile */
    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .category-card {
        height: 300px !important;
    }
    
    .category-card h3 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }
    
    .category-card > div:last-child {
        padding-left: 30px !important;
    }
    
    /* Products Grid Mobile - 2 Column Grid (Homepage) */
    .new-arrivals .products-grid,
    .category-section .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    
    .new-arrivals .product-card,
    .category-section .product-card {
        flex: none !important;
        width: 100% !important;
        max-width: 185px !important;
        border-radius: 10px !important;
        margin: 0 auto !important;
    }
    
    /* Product image container - 3:4 Fashion Ratio */
    .new-arrivals .product-card > a > div:first-child,
    .new-arrivals .product-card-img-container,
    .category-section .product-card > a > div:first-child,
    .category-section .product-card-img-container {
        aspect-ratio: 3 / 4 !important;
        height: auto !important;
        border-radius: 10px 10px 0 0 !important;
    }
    
    .new-arrivals .product-card img,
    .category-section .product-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .product-card h4 {
        font-size: 0.9rem !important;
        min-height: auto !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    
    .product-card .quick-actions {
        display: none !important;
    }
    
    /* Show floating add-to-cart button on mobile */
    .mobile-add-to-cart-btn {
        display: flex !important;
    }
    
    .product-card > div:last-child {
        padding: 15px !important;
    }
    
    .product-card button {
        padding: 12px !important;
        font-size: 0.85rem !important;
    }
    
    /* Price section */
    .product-card > div:last-child > div {
        margin-bottom: 12px !important;
    }
    
    /* Section Titles Mobile */
    section h2 {
        font-size: 1.2rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 30px !important;
    }
    
    /* Container Padding Mobile */
    .container {
        padding: 0 15px !important;
    }
    
    /* Sections Spacing Mobile */
    .categories,
    .new-arrivals,
    .category-section {
        margin-top: 50px !important;
        margin-bottom: 50px !important;
    }
    
    .category-section {
        padding: 50px 0 !important;
    }
}

@media (max-width: 480px) {
    /* Hero Section Extra Small Mobile */
    .hero {
        height: 450px !important;
    }
    
    .hero-text h1 {
        font-size: 2rem !important;
    }
    
    .hero-text p {
        font-size: 0.85rem !important;
        br {
            display: none;
        }
    }
    
    .hero-text span:first-child {
        font-size: 0.7rem !important;
        padding: 6px 15px !important;
        letter-spacing: 2px !important;
    }
    
    /* Icon Banner Extra Small Mobile - Keep Horizontal */
    .icon-banner .container {
        padding: 0 5px !important;
    }
    
    .icon-banner .container > div {
        min-width: 120px !important;
        padding: 12px 8px !important;
        gap: 6px !important;
    }
    
    .icon-banner .container > div i {
        font-size: 1.5rem !important;
    }
    
    .icon-banner .container > div h4 {
        font-size: 0.65rem !important;
        margin: 5px 0 2px 0 !important;
    }
    
    .icon-banner .container > div p {
        font-size: 0.6rem !important;
    }
    
    /* Products Grid - 2 Columns on Small Mobile */
    .new-arrivals .products-grid,
    .category-section .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .new-arrivals .product-card,
    .category-section .product-card {
        max-width: 175px !important;
        border-radius: 8px !important;
    }
    
    .new-arrivals .product-card > a > div:first-child,
    .category-section .product-card > a > div:first-child {
        border-radius: 8px 8px 0 0 !important;
    }
    
    /* Category Card Mobile */
    .category-card {
        height: 250px !important;
    }
    
    .category-card h3 {
        font-size: 1.3rem !important;
    }
    
    /* Section Titles Extra Small */
    section h2 {
        font-size: 1rem !important;
        letter-spacing: 1.5px !important;
    }
    
    /* Buttons Mobile */
    .btn {
        padding: 12px 30px !important;
        font-size: 0.75rem !important;
    }
}

/* Landscape Mobile Optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        height: 400px !important;
    }
    
    .hero-text h1 {
        font-size: 2rem !important;
    }
    
    .hero-text p {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
    }
}

/* ========================================
   LOGO STYLES
   ======================================== */

/* Desktop Logo - 100px height */
.logo img {
    height: 100px;
    width: auto;
    transition: all 0.3s ease;
}

/* ========================================
   HEADER & NAVIGATION MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* Top Bar Mobile - Compact with icons only */
    .top-bar {
        padding: 10px 0 !important;
    }
    
    .top-bar .container {
        justify-content: space-between !important;
        flex-direction: row !important;
        gap: 0 !important;
    }
    
    /* Welcome text - smaller on mobile */
    .top-bar .container > span:first-child {
        font-size: 0.7rem !important;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .top-bar .container > span:first-child i {
        display: none !important;
    }
    
    /* Contact info - icons only */
    .top-bar .container > div {
        flex-direction: row !important;
        gap: 8px !important;
        flex: 0 0 auto;
    }
    
    .top-bar .container > div a {
        font-size: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        background: rgba(201, 169, 97, 0.15) !important;
        border-radius: 50% !important;
        border: 1px solid rgba(201, 169, 97, 0.3) !important;
        padding: 0 !important;
    }
    
    .top-bar .container > div a i {
        font-size: 0.75rem !important;
        margin: 0 !important;
        color: var(--accent-gold) !important;
    }
    
    /* Main Header Mobile */
    header {
        padding: 10px 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: linear-gradient(135deg, rgb(28, 24, 22) 0%, rgb(35, 30, 28) 100%) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    }
    
    .desktop-search {
        display: none !important;
    }
    
    .mobile-search-row {
        display: block !important;
        margin-top: 10px;
    }
    
    /* Mobile Logo - 55px height */
    .logo img {
        height: 55px !important;
    }
    
    /* Header Icons Container */
    header .container > div:first-child > div:last-child {
        gap: 10px !important;
    }
    
    /* Icon buttons on mobile - smaller */
    header .container > div:first-child > div:last-child > a {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.1rem !important;
        background: rgba(201, 169, 97, 0.12) !important;
        border: 1px solid rgba(201, 169, 97, 0.25) !important;
    }
    
    /* Cart badge on mobile */
    header .container > div:first-child > div:last-child > a span {
        min-width: 16px !important;
        height: 16px !important;
        font-size: 0.55rem !important;
        top: -3px !important;
        right: -3px !important;
        border-width: 1.5px !important;
    }
    
    /* Mobile menu button */
    .mobile-menu-btn {
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        border-width: 1.5px !important;
    }
    
    .mobile-menu-btn span {
        width: 18px !important;
        height: 2px !important;
    }
    
    /* Mobile search bar styling */
    .mobile-search-row form {
        background: rgba(255,255,255,0.08) !important;
        border: 1.5px solid rgba(201, 169, 97, 0.3) !important;
        border-radius: 25px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    }
    
    .mobile-search-row input {
        padding: 11px 18px !important;
        font-size: 0.9rem !important;
    }
    
    .mobile-search-row button {
        padding: 0 18px !important;
        background: linear-gradient(135deg, var(--accent-gold) 0%, #b8935a 100%) !important;
    }
    
    /* Hide desktop header icons on mobile */
    .header-icons {
        display: none !important;
    }
    
    /* Hide mobile search button (we show search bar instead) */
    .mobile-search-btn {
        display: none !important;
    }
    
    /* Navigation Mobile - FORCE SIDEBAR LAYOUT */
    .main-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 10002 !important;
        overflow-y: auto !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        padding: 0 !important;
        display: block !important;
    }
    
    .main-nav.active {
        transform: translateX(0) !important;
    }
    
    .main-nav .container {
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    .main-nav ul {
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        padding-top: 60px !important;
        gap: 0 !important;
    }
    
    .main-nav li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }
    
    .main-nav li a {
        padding: 16px 20px !important;
        font-size: 0.85rem !important;
        display: flex !important;
        align-items: center !important;
        color: var(--primary-dark) !important;
        background: transparent !important;
        border: none !important;
    }
    
    .main-nav li a:hover {
        background: rgba(201, 169, 97, 0.1) !important;
    }
    
    .main-nav li a i {
        font-size: 1rem !important;
        margin-right: 12px !important;
        width: 24px;
    }
    
    .main-nav li a::after {
        display: none !important;
    }
    
    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        z-index: 10001 !important;
    }
    
    .mobile-menu-overlay.active {
        display: block;
    }
    
    /* Close button in mobile menu */
    .mobile-menu-close {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        background: var(--deep-red);
        color: #fff;
        border: none;
        border-radius: 50%;
        font-size: 1.2rem;
        cursor: pointer;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 10003;
    }
}

@media (max-width: 480px) {
    /* Top Bar Extra Small Mobile */
    .top-bar {
        padding: 10px 0 !important;
    }
    
    .top-bar .container > span:first-child {
        font-size: 0.7rem !important;
    }
    
    .top-bar .container > div {
        gap: 10px !important;
    }
    
    .top-bar .container > div span {
        width: 32px !important;
        height: 32px !important;
    }
    
    .top-bar .container > div span i {
        font-size: 0.9rem !important;
    }
    
    /* Logo Extra Small Mobile - 50px height */
    .logo img {
        height: 50px !important;
    }
    
    /* Search bar smaller */
    .search-area input {
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }
    
    .search-area button {
        padding: 0 15px !important;
        font-size: 0.9rem !important;
    }
    
    /* Hamburger button smaller */
    .mobile-menu-btn {
        width: 50px !important;
        height: 50px !important;
    }
    
    .mobile-menu-btn span {
        width: 22px !important;
        height: 2.5px !important;
    }
    
    /* Mobile menu narrower */
    .main-nav {
        width: 260px !important;
    }
    
    /* Product card image height for small mobile */
    .product-card img {
        height: 491px !important;
        object-fit: cover !important;
    }
    
    .product-card > a > div:first-child,
    .product-card > a > div.product-card-img-container {
        height: 487px !important;
    }
    
    /* Show floating add-to-cart button on small mobile */
    .mobile-add-to-cart-btn {
        display: flex !important;
    }
    
    /* Mobile Bottom Navigation */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #1a1614 0%, #2d2624 100%);
        padding: 10px 0 8px 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
    }
    
    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: rgba(255,255,255,0.8) !important;
        font-size: 0.7rem;
        font-weight: 600;
        transition: all 0.3s;
        padding: 5px 10px;
        position: relative;
    }
    
    .mobile-bottom-nav a span {
        color: rgba(255,255,255,0.8) !important;
        display: block !important;
        margin-top: 4px;
    }
    
    .mobile-bottom-nav a i {
        font-size: 1.4rem;
        margin-bottom: 4px;
        transition: all 0.3s;
        color: rgba(255,255,255,0.8) !important;
    }
    
    .mobile-bottom-nav a.active {
        color: var(--accent-gold) !important;
    }
    
    .mobile-bottom-nav a.active i {
        color: var(--accent-gold) !important;
    }
    
    .mobile-bottom-nav a.active span {
        color: var(--accent-gold) !important;
    }
    
    /* Cart button - highlighted */
    .mobile-bottom-nav a.cart-btn {
        background: var(--accent-gold);
        color: var(--primary-dark) !important;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        margin-top: -30px;
        box-shadow: 0 4px 15px rgba(201, 169, 97, 0.5);
    }
    
    .mobile-bottom-nav a.cart-btn i {
        font-size: 1.8rem;
        margin-bottom: 0;
        color: var(--primary-dark) !important;
    }
    
    .mobile-bottom-nav a.cart-btn span {
        display: none !important;
    }
    
    /* Cart badge */
    .mobile-bottom-nav .cart-badge {
        position: absolute;
        top: 0;
        right: 8px;
        background: var(--deep-red);
        color: #fff !important;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        font-size: 0.65rem;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        border: 2px solid #1a1614;
    }
}

/* Tablet Landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    .search-area {
        max-width: 400px !important;
    }
    
    /* Shop Grid Adjustments */
    .products-listing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 5px;
    }
    
    .product-card {
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    }
    
    .product-card h4 {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    
    .product-card .price-row span {
        font-size: 0.95rem !important;
    }
    
    /* Product card image for tablet */
    .product-card img {
        height: 491px !important;
        object-fit: cover !important;
    }
    
    .product-card > a > div:first-child,
    .product-card > a > div.product-card-img-container {
        height: 487px !important;
    }
    
    /* Show floating add-to-cart button on tablet */
    .mobile-add-to-cart-btn {
        display: flex !important;
    }
    
    .product-card .quick-actions {
        display: none !important;
    }
}


/* ========================================
   PRODUCTS PAGE MOBILE & TABLET RESPONSIVE
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    /* Products page layout - sidebar + grid */
    .container > section[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Sidebar filters */
    aside {
        background: var(--white);
        padding: 20px;
        border-radius: 8px;
        box-shadow: var(--shadow-soft);
    }
    
    /* Products grid - 2 columns on tablet */
    .container main > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* Page banner */
    section[style*="background:var(--primary-dark)"] h1 {
        font-size: 1.5rem !important;
    }
    
    /* Products page layout */
    .container > section[style*="grid-template-columns"] {
        margin-top: 20px !important;
        margin-bottom: 40px !important;
    }
    
    /* Sidebar - make it collapsible or move to top */
    aside {
        order: -1;
        margin-bottom: 20px;
    }
    
    aside form > div {
        margin-bottom: 20px !important;
    }
    
    /* Categories list - horizontal scroll on mobile */
    aside ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    aside ul li {
        flex: 0 0 auto;
    }
    
    aside ul li a {
        display: inline-block;
        padding: 8px 16px;
        background: var(--cream);
        border-radius: 20px;
        font-size: 0.85rem !important;
    }
    
    /* Price filter inputs */
    aside input[type="number"] {
        font-size: 0.9rem !important;
        padding: 10px !important;
    }
    
    /* Size filter */
    aside div[style*="flex-wrap"] {
        gap: 6px !important;
    }
    
    /* Apply button */
    aside button[type="submit"] {
        padding: 12px !important;
        font-size: 0.9rem !important;
    }
    
    /* Toolbar */
    main > div[style*="justify-content:space-between"] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    
    main > div[style*="justify-content:space-between"] form {
        width: 100%;
    }
    
    main > div[style*="justify-content:space-between"] select {
        width: 100%;
        padding: 10px !important;
    }
    
    /* Products grid - 2 columns on mobile */
    .container main > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Product card adjustments */
    .product-card {
        font-size: 0.9rem;
    }
    
    .product-card h4 {
        font-size: 0.9rem !important;
        min-height: 40px !important;
    }
    
    .product-card p[style*="font-size: 1.1rem"] {
        font-size: 1rem !important;
    }
    
    .product-card button {
        padding: 10px !important;
        font-size: 0.8rem !important;
    }
    
    /* Quick actions - always visible on mobile */
    .quick-actions {
        opacity: 1 !important;
        position: static !important;
        background: transparent !important;
        padding: 10px !important;
        flex-direction: column !important;
    }
    
    .quick-actions button {
        width: 100% !important;
        flex: none !important;
    }
    
    /* Pagination */
    main > div[style*="justify-content:center"] {
        gap: 5px !important;
    }
    
    main > div[style*="justify-content:center"] a {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.85rem !important;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    /* Products grid - 1 column on small mobile */
    .container main > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Product card image height */
    .product-card > a > div[style*="height: 380px"],
    .product-card > a > div[style*="height: 400px"] {
        height: 350px !important;
    }
    
    /* Sidebar categories - full width buttons */
    aside ul {
        flex-direction: column;
    }
    
    aside ul li {
        width: 100%;
    }
    
    aside ul li a {
        width: 100%;
        text-align: left;
    }
}


/* ========================================
   PRODUCTS PAGE - ADDITIONAL MOBILE FIXES
   ======================================== */

@media (max-width: 768px) {
    /* Category pills - better mobile styling */
    .cat-pill {
        white-space: nowrap;
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
        border-radius: 25px !important;
        background: var(--white) !important;
        border: 2px solid var(--border-light) !important;
        color: var(--text-color) !important;
        font-weight: 600 !important;
        transition: var(--transition) !important;
    }
    
    .cat-pill.active {
        background: var(--primary-dark) !important;
        color: var(--accent-gold) !important;
        border-color: var(--primary-dark) !important;
    }
    
    /* Filters & Sorting button */
    button[style*="FILTERS & SORTING"],
    div[style*="FILTERS & SORTING"] {
        width: 100%;
        padding: 15px !important;
        font-size: 1rem !important;
        margin-bottom: 15px;
        background: var(--primary-dark) !important;
        color: var(--accent-gold) !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px;
    }
    
    /* Product card - better mobile layout */
    .product-card > a > div[style*="height"] {
        height: 320px !important;
    }
    
    .product-card div[style*="padding: 18px"] {
        padding: 15px !important;
    }
    
    .product-card h4 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }
    
    .product-card p[style*="font-size: 0.75rem"] {
        font-size: 0.7rem !important;
    }
    
    /* Wishlist button - smaller on mobile */
    .product-card button[onclick*="addToWishlist"] {
        width: 35px !important;
        height: 35px !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    .product-card button[onclick*="addToWishlist"] i {
        font-size: 1rem !important;
    }
    
    /* Sale badge - smaller on mobile */
    .product-card > div[style*="position:absolute"][style*="top:12px"] {
        top: 10px !important;
        left: 10px !important;
        padding: 4px 10px !important;
        font-size: 0.65rem !important;
    }
    
    /* Buy Now button */
    .product-card button[onclick*="buyNow"] {
        padding: 10px !important;
        font-size: 0.8rem !important;
    }
    
    /* Price display */
    .product-card span[style*="font-size: 1.1rem"] {
        font-size: 1rem !important;
    }
    
    .product-card span[style*="font-size: 0.9rem"] {
        font-size: 0.85rem !important;
    }
    
    /* No products message */
    div[style*="No products found"] {
        padding: 40px 20px !important;
    }
    
    div[style*="No products found"] i {
        font-size: 2rem !important;
    }
    
    div[style*="No products found"] h3 {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    /* Category pills - stack vertically on small mobile */
    div[style*="overflow-x: auto"] {
        overflow-x: visible !important;
    }
    
    .cat-pill {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 8px;
    }
    
    /* Product card - full width on small mobile */
    .product-card > a > div[style*="height"] {
        height: 400px !important;
    }
    
    /* Pagination - smaller on mobile */
    main > div[style*="justify-content:center"] a,
    main > div[style*="justify-content:center"] span {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }
}


/* ========================================
   PRODUCTS PAGE - FORCE MOBILE LAYOUT
   ======================================== */

@media (max-width: 768px) {
    /* Force single column layout */
    section.container[style*="display: grid"][style*="grid-template-columns"] {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Hide sidebar on mobile - show filters button instead */
    section.container > aside {
        display: none !important;
    }
    
    /* Main content full width */
    section.container > main {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Products grid - 2 columns */
    main > div[style*="display:grid"][style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Toolbar - stack vertically */
    main > div[style*="display:flex"][style*="justify-content:space-between"]:first-of-type {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    
    main > div[style*="display:flex"][style*="justify-content:space-between"]:first-of-type > form {
        width: 100% !important;
    }
    
    main > div[style*="display:flex"][style*="justify-content:space-between"]:first-of-type select {
        width: 100% !important;
    }
    
    /* Product card image container */
    .product-card > a > div[style*="height:380px"],
    .product-card > a > div[style*="height:400px"] {
        height: 280px !important;
    }
    
    /* Product card content padding */
    .product-card > a > div[style*="padding:18px"],
    .product-card > div[style*="padding:18px"] {
        padding: 12px !important;
    }
    
    .product-card > div[style*="padding:0 18px 18px"] {
        padding: 0 12px 12px !important;
    }
    
    /* Product title */
    .product-card h4[style*="min-height:48px"] {
        min-height: 40px !important;
        font-size: 0.9rem !important;
    }
    
    /* Category name */
    .product-card p[style*="font-size:0.75rem"] {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
    }
    
    /* Price container */
    .product-card div[style*="display:flex"][style*="gap:10px"] {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    /* Prices */
    .product-card span[style*="font-size:1.1rem"] {
        font-size: 0.95rem !important;
    }
    
    .product-card span[style*="font-size:0.9rem"] {
        font-size: 0.8rem !important;
    }
    
    /* Buttons */
    .product-card button[style*="padding:12px"] {
        padding: 10px !important;
        font-size: 0.75rem !important;
    }
    
    /* Quick actions */
    .quick-actions {
        padding: 10px !important;
    }
    
    .quick-actions button {
        padding: 8px !important;
        font-size: 0.75rem !important;
    }
    
    /* Pagination */
    main > div[style*="display:flex"][style*="justify-content:center"] {
        margin-top: 30px !important;
    }
    
    main > div[style*="display:flex"][style*="justify-content:center"] a[style*="width:38px"] {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    /* Single column on small mobile */
    main > div[style*="display:grid"][style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Larger images on single column */
    .product-card > a > div[style*="height"] {
        height: 350px !important;
    }
}


/* Center products on mobile when single column */
@media (max-width: 480px) {
    /* Center the grid container */
    main > div[style*="display:grid"][style*="grid-template-columns"] {
        justify-items: center !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    
    /* Product card max width */
    .product-card {
        max-width: 380px !important;
        width: 100% !important;
    }
}


/* ========================================
   PRODUCTS PAGE - 2 COLUMN LAYOUT WITH FLOATING BUTTONS
   ======================================== */

@media (max-width: 768px) {
    /* Force 2 columns on mobile */
    main > div[style*="display:grid"][style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        max-width: 100% !important;
        justify-items: stretch !important;
    }
    
    /* Product card adjustments */
    .product-card {
        max-width: 100% !important;
    }
    
    /* Hide wishlist button on top */
    .product-card > button[onclick*="addToWishlist"] {
        display: none !important;
    }
    
    /* Hide quick actions overlay */
    .quick-actions {
        display: none !important;
    }
    
    /* Create floating action buttons */
    .product-card > a {
        position: relative !important;
    }
    
    /* Add floating buttons container */
    .product-card > a::after {
        content: '';
        position: absolute;
        bottom: 15px;
        right: 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 5;
    }
    
    /* Hide Buy Now button, show floating buttons instead */
    .product-card > div[style*="padding:0"] {
        display: none !important;
    }
    
    /* Adjust card padding */
    .product-card > a > div[style*="padding"] {
        padding-bottom: 60px !important;
    }
}

@media (max-width: 480px) {
    /* Keep 2 columns even on small mobile */
    main > div[style*="display:grid"][style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* Smaller images on small screens */
    .product-card > a > div[style*="height"] {
        height: 250px !important;
    }
    
    /* Smaller text */
    .product-card h4 {
        font-size: 0.85rem !important;
        min-height: 36px !important;
    }
    
    .product-card p[style*="font-size"] {
        font-size: 0.65rem !important;
    }
    
    .product-card span[style*="font-size"] {
        font-size: 0.85rem !important;
    }
}


/* ========================================
   PRODUCTS PAGE - COMPLETE MOBILE FIX
   ======================================== */

@media (max-width: 768px) {
    /* Page banner */
    section[style*="background:var(--primary-dark)"] {
        padding: 30px 0 !important;
    }
    
    section[style*="background:var(--primary-dark)"] h1 {
        font-size: 1.3rem !important;
    }
    
    /* Main container section */
    section.container[style*="margin-top:40px"] {
        margin-top: 20px !important;
        margin-bottom: 60px !important;
        padding: 0 15px !important;
    }
    
    /* Force block display for main section */
    section.container[style*="display:grid"] {
        display: block !important;
    }
    
    /* Main content area */
    section.container > main {
        display: block !important;
        width: 100% !important;
    }
    
    /* Toolbar */
    main > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 20px !important;
    }
    
    /* Products grid container */
    main > div[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    /* Product card */
    .product-card {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Product image */
    .product-card > a > div:first-child {
        height: 250px !important;
    }
    
    /* Product info */
    .product-card > a > div:last-child,
    .product-card > div {
        padding: 10px !important;
    }
    
    /* Product title */
    .product-card h4 {
        font-size: 0.85rem !important;
        min-height: 36px !important;
        line-height: 1.2 !important;
    }
    
    /* Category label */
    .product-card p:first-child {
        font-size: 0.65rem !important;
    }
    
    /* Price */
    .product-card span {
        font-size: 0.9rem !important;
    }
    
    /* Buy Now button */
    .product-card button {
        padding: 8px !important;
        font-size: 0.7rem !important;
    }
    
    /* Wishlist button */
    .product-card > button:first-child {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Sale badge */
    .product-card > div:first-child {
        padding: 3px 8px !important;
        font-size: 0.6rem !important;
    }
}

@media (max-width: 480px) {
    /* Single column layout */
    main > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    /* Product card centered */
    .product-card {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Larger image on single column */
    .product-card > a > div:first-child {
        height: 320px !important;
    }
}


/* Reduce card size on mobile */
@media (max-width: 768px) {
    /* Smaller image height */
    .product-card > a > div:first-child {
        height: 200px !important;
    }
    
    /* Reduce padding */
    .product-card > a > div:last-child {
        padding: 8px !important;
    }
    
    .product-card > div:last-child {
        padding: 0 8px 8px !important;
    }
    
    /* Smaller title */
    .product-card h4 {
        font-size: 0.8rem !important;
        min-height: 32px !important;
        margin-bottom: 6px !important;
    }
    
    /* Smaller category */
    .product-card p:first-child {
        font-size: 0.6rem !important;
        margin-bottom: 4px !important;
    }
    
    /* Smaller price */
    .product-card span[style*="font-weight:700"] {
        font-size: 0.85rem !important;
    }
    
    .product-card span[style*="text-decoration:line-through"] {
        font-size: 0.75rem !important;
    }
    
    /* Smaller button */
    .product-card button[onclick*="buyNow"] {
        padding: 8px !important;
        font-size: 0.65rem !important;
    }
    
    /* Reduce gap between cards */
    main > div[style*="grid-template-columns"] {
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    /* Slightly larger on single column */
    .product-card > a > div:first-child {
        height: 280px !important;
    }
}
@media (max-width: 480px) {
    .product-card > a > div:first-child {
        height: 487px !important;
    }
}


/* ========================================
   PRODUCT DETAIL PAGE - MOBILE & TABLET RESPONSIVE
   ======================================== */

/* ─── TABLET STYLES (768px - 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Show mobile breadcrumb at top */
    .mobile-breadcrumb {
        display: block !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 5px !important;
    }
    
    /* Hide desktop breadcrumb inside product-info */
    .product-info > nav {
        display: none !important;
    }
    
    /* Product Detail Grid - Stack on Tablet */
    .product-detail {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        margin-top: 10px !important;
        margin-bottom: 60px !important;
    }
    
    /* Gallery Container */
    .product-gallery > div:first-child {
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Main Image Height */
    .product-gallery > div:first-child > div:last-child {
        height: 420px !important;
    }
    
    /* Thumbnail Gallery */
    .product-gallery > div:first-child > div:first-child {
        width: 90px !important;
    }
    
    .thumbnail-img {
        width: 90px !important;
        height: 110px !important;
    }
    
    /* SM ATTIRE Logo */
    .product-gallery > div:nth-child(2) > div:first-child {
        font-size: 2rem !important;
    }
    
    /* Trust Badges */
    .product-gallery > div:nth-child(3) > div:first-child {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 10px !important;
    }
    
    /* Product Info */
    .product-info {
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Related Products - 3 Columns */
    section[style*="grid-template-columns:repeat(4,1fr)"] > div {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

/* ─── MOBILE STYLES (< 768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Show mobile breadcrumb at top */
    .mobile-breadcrumb {
        display: block !important;
        margin-top: 10px !important;
        margin-bottom: 15px !important;
        font-size: 0.75rem !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 5px !important;
    }
    
    .mobile-breadcrumb i {
        font-size: 0.65rem !important;
        margin: 0 6px !important;
    }
    
    /* Hide desktop breadcrumb inside product-info */
    .product-info > nav {
        display: none !important;
    }
    
    /* Product Detail Section */
    .product-detail {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        margin-top: 0 !important;
        margin-bottom: 50px !important;
        padding: 0 15px !important;
    }
    
    /* ═══ GALLERY SECTION ═══ */
    
    /* HIDE SM ATTIRE Logo and Trust Badges on Mobile - Will show after Buy Now */
    .product-gallery > div:nth-child(2),
    .product-gallery > div:nth-child(3) {
        display: none !important;
    }
    
    /* Gallery Layout - Horizontal Scroll for Thumbnails */
    .product-gallery > div:first-child {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 15px !important;
    }
    
    /* Main Image Container */
    .product-gallery > div:first-child > div:last-child {
        height: 450px !important;
        border-radius: 12px !important;
        width: 100% !important;
    }
    
    /* Thumbnail Gallery - Horizontal Scroll */
    .product-gallery > div:first-child > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 10px !important;
        padding: 5px 0 !important;
        scrollbar-width: thin !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .product-gallery > div:first-child > div:first-child::-webkit-scrollbar {
        height: 4px;
    }
    
    .product-gallery > div:first-child > div:first-child::-webkit-scrollbar-thumb {
        background: var(--accent-gold);
        border-radius: 2px;
    }
    
    /* Thumbnail Images */
    .thumbnail-img {
        flex: 0 0 80px !important;
        width: 80px !important;
        height: 100px !important;
        border-radius: 8px !important;
    }
    
    /* Thumbnail Videos - Same Size as Images on Mobile */
    .thumbnail-video {
        flex: 0 0 80px !important;
        width: 80px !important;
        height: 100px !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
        border: 2px solid var(--border-light) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        cursor: pointer !important;
        opacity: 0.7 !important;
        transition: var(--transition) !important;
    }
    
    .thumbnail-video:hover {
        opacity: 1 !important;
        transform: scale(1.05) !important;
    }
    
    /* Video Play Icon - Smaller on Mobile */
    .thumbnail-video > div > div {
        width: 28px !important;
        height: 28px !important;
        background: rgba(255,255,255,0.9) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
    }
    
    .thumbnail-video > div > div i {
        color: #1a1a1a !important;
        font-size: 0.8rem !important;
        margin-left: 2px !important;
    }
    
    /* Hide scroll indicator */
    .product-gallery > div:first-child > div:first-child > div:last-child {
        display: none !important;
    }
    
    /* Zoom Icon - Smaller on Mobile */
    .product-gallery > div:first-child > div:last-child > div:last-child {
        width: 34px !important;
        height: 34px !important;
        bottom: 12px !important;
        right: 12px !important;
    }
    
    .product-gallery > div:first-child > div:last-child > div:last-child i {
        font-size: 0.85rem !important;
    }
    
    /* SM ATTIRE Logo - Smaller */
    .product-gallery > div:nth-child(2) {
        margin-top: 20px !important;
        padding: 15px !important;
    }
    
    .product-gallery > div:nth-child(2) > div:first-child {
        font-size: 1.8rem !important;
        letter-spacing: 3px !important;
    }
    
    .product-gallery > div:nth-child(2) > div:last-child {
        font-size: 0.7rem !important;
        letter-spacing: 1.5px !important;
        margin-top: 6px !important;
    }
    
    /* Trust Badges - Stack Vertically */
    .product-gallery > div:nth-child(3) {
        margin-top: 12px !important;
        padding: 12px !important;
    }
    
    .product-gallery > div:nth-child(3) > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding-bottom: 12px !important;
    }
    
    /* Products Sold Badge */
    .product-gallery > div:nth-child(3) > div:first-child > div:first-child {
        justify-content: flex-start !important;
    }
    
    .product-gallery > div:nth-child(3) > div:first-child > div:first-child > div:first-child {
        width: 36px !important;
        height: 36px !important;
    }
    
    .product-gallery > div:nth-child(3) > div:first-child > div:first-child > div:first-child i {
        font-size: 0.9rem !important;
    }
    
    .product-gallery > div:nth-child(3) > div:first-child > div:first-child > div:last-child > div:first-child {
        font-size: 0.9rem !important;
    }
    
    .product-gallery > div:nth-child(3) > div:first-child > div:first-child > div:last-child > div:last-child {
        font-size: 0.7rem !important;
    }
    
    /* Trust Icons Row */
    .product-gallery > div:nth-child(3) > div:first-child > div:nth-child(2),
    .product-gallery > div:nth-child(3) > div:first-child > div:nth-child(3) {
        justify-content: flex-start !important;
    }
    
    /* WhatsApp Button */
    .product-gallery > div:nth-child(3) > div:last-child {
        margin-top: 12px !important;
    }
    
    .product-gallery > div:nth-child(3) > div:last-child a {
        padding: 10px 12px !important;
    }
    
    .product-gallery > div:nth-child(3) > div:last-child a i:first-child {
        font-size: 1.2rem !important;
    }
    
    .product-gallery > div:nth-child(3) > div:last-child a > div > div:first-child {
        font-size: 0.85rem !important;
    }
    
    .product-gallery > div:nth-child(3) > div:last-child a > div > div:last-child {
        font-size: 0.7rem !important;
    }
    
    /* ═══ PRODUCT INFO SECTION ═══ */
    .product-info {
        padding: 0 !important;
    }
    
    /* Breadcrumb - Smaller */
    .product-info > nav {
        font-size: 0.75rem !important;
        margin-bottom: 20px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 5px !important;
    }
    
    .product-info > nav i {
        font-size: 0.65rem !important;
        margin: 0 6px !important;
    }
    
    /* Product Title */
    .product-info > h1 {
        font-size: 1.3rem !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }
    
    /* Rating Summary */
    .product-info > div:nth-child(3) {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .product-info > div:nth-child(3) > div i {
        font-size: 0.7rem !important;
    }
    
    .product-info > div:nth-child(3) > span {
        font-size: 0.75rem !important;
    }
    
    .product-info > div:nth-child(3) > a {
        font-size: 0.7rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Price Section */
    .product-info > div:nth-child(4) {
        margin-bottom: 18px !important;
        padding: 12px 14px !important;
    }
    
    .product-info > div:nth-child(4) > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .product-info > div:nth-child(4) > div > span:first-child {
        font-size: 1.6rem !important;
    }
    
    .product-info > div:nth-child(4) > div > span:nth-child(2) {
        font-size: 1rem !important;
    }
    
    .product-info > div:nth-child(4) > div > span:last-child {
        font-size: 0.7rem !important;
        padding: 3px 10px !important;
    }
    
    .product-info > div:nth-child(4) > span {
        font-size: 1.6rem !important;
    }
    
    /* Description */
    .product-info > div:nth-child(5) {
        margin-bottom: 16px !important;
        padding: 12px 14px !important;
    }
    
    .product-info > div:nth-child(5) > h3 {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
    }
    
    .product-info > div:nth-child(5) .product-description-content {
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
    }
    
    /* SKU & Stock */
    .product-info > div:nth-child(6) {
        font-size: 0.75rem !important;
        margin-bottom: 16px !important;
        padding: 8px 12px !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    /* Colors Section */
    .product-info > div:nth-child(7) {
        margin-bottom: 14px !important;
        padding: 10px 12px !important;
    }
    
    .product-info > div:nth-child(7) > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .product-info > div:nth-child(7) h4 {
        font-size: 0.7rem !important;
    }
    
    .product-info > div:nth-child(7) h4 i {
        font-size: 0.75rem !important;
    }
    
    .product-info > div:nth-child(7) > div > div {
        width: 100% !important;
    }
    
    .product-info > div:nth-child(7) .color-btn {
        width: 32px !important;
        height: 32px !important;
    }
    
    .product-info > div:nth-child(7) #selected-color-label {
        font-size: 0.7rem !important;
        text-align: left !important;
        min-width: auto !important;
    }
    
    /* Sizes Section */
    .product-info > div:nth-child(8) {
        margin-bottom: 14px !important;
        padding: 10px 12px !important;
    }
    
    .product-info > div:nth-child(8) > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .product-info > div:nth-child(8) h4 {
        font-size: 0.7rem !important;
    }
    
    .product-info > div:nth-child(8) h4 i {
        font-size: 0.75rem !important;
    }
    
    .product-info > div:nth-child(8) > div > div {
        width: 100% !important;
    }
    
    .product-info > div:nth-child(8) .size-btn {
        min-width: 42px !important;
        height: 42px !important;
        font-size: 0.85rem !important;
    }
    
    /* Add to Cart Form */
    #add-to-cart-form {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }
    
    #add-to-cart-form > div:first-child {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }
    
    /* Quantity Selector */
    #add-to-cart-form > div:first-child > div:first-child {
        width: 100% !important;
        height: 48px !important;
        justify-content: center !important;
    }
    
    #add-to-cart-form > div:first-child > div:first-child button {
        padding: 0 16px !important;
        font-size: 1.3rem !important;
    }
    
    #add-to-cart-form > div:first-child > div:first-child input {
        width: 60px !important;
        font-size: 1.1rem !important;
    }
    
    /* Add to Cart Button */
    #add-to-cart-form > div:first-child > button {
        height: 48px !important;
        font-size: 0.85rem !important;
    }
    
    /* Buy Now Button */
    #add-to-cart-form > button[name="buy_now"] {
        height: 48px !important;
        font-size: 0.85rem !important;
    }
    
    /* SHOW SM ATTIRE Logo and Trust Badges AFTER Buy Now Button */
    #add-to-cart-form::after {
        content: '';
        display: block;
        width: 100%;
    }
    
    /* Move SM ATTIRE section after form */
    .product-info #add-to-cart-form ~ * {
        order: 10;
    }
    
    /* Create mobile trust section after Buy Now */
    .mobile-trust-section {
        display: block !important;
        margin-top: 20px;
    }
    
    .mobile-trust-section .sm-attire-logo {
        text-align: center;
        padding: 15px;
        background: linear-gradient(135deg, var(--cream) 0%, var(--soft-beige) 100%);
        border-radius: 10px;
        border: 1px solid var(--border-light);
        box-shadow: 0 3px 12px rgba(0,0,0,0.05);
        margin-bottom: 12px;
    }
    
    .mobile-trust-section .sm-attire-logo > div:first-child {
        font-family: 'Outfit', sans-serif;
        font-size: 1.8rem;
        font-weight: 900;
        background: linear-gradient(135deg, var(--deep-red) 0%, var(--accent-gold) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: 3px;
        text-transform: uppercase;
        line-height: 1;
    }
    
    .mobile-trust-section .sm-attire-logo > div:last-child {
        font-size: 0.7rem;
        color: var(--text-muted);
        margin-top: 6px;
        letter-spacing: 1.5px;
        font-weight: 500;
    }
    
    .mobile-trust-section .trust-badges {
        background: linear-gradient(135deg, var(--soft-beige) 0%, var(--cream) 100%);
        padding: 12px;
        border: 1px solid var(--border-light);
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }
    
    .mobile-trust-section .trust-badges > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-light);
    }
    
    .mobile-trust-section .products-sold {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .mobile-trust-section .products-sold > div:first-child {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--deep-red) 0%, #6d1e2a 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(139, 38, 53, 0.3);
        flex-shrink: 0;
    }
    
    .mobile-trust-section .products-sold i {
        color: #fff;
        font-size: 0.9rem;
    }
    
    .mobile-trust-section .products-sold > div:last-child > div:first-child {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--deep-red);
        line-height: 1.2;
    }
    
    .mobile-trust-section .products-sold > div:last-child > div:last-child {
        font-size: 0.7rem;
        color: var(--text-muted);
        font-weight: 500;
    }
    
    .mobile-trust-section .trust-icons {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .mobile-trust-section .trust-icons i {
        color: var(--accent-gold);
        font-size: 0.85rem;
    }
    
    .mobile-trust-section .trust-icons span {
        font-size: 0.75rem;
        color: var(--text-color);
        font-weight: 500;
    }
    
    .mobile-trust-section .whatsapp-btn {
        margin-top: 12px;
    }
    
    .mobile-trust-section .whatsapp-btn a {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        padding: 10px 12px;
        border-radius: 6px;
        color: #fff;
        font-weight: 600;
        transition: var(--transition);
        box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
    }
    
    .mobile-trust-section .whatsapp-btn a:active {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    }
    
    .mobile-trust-section .whatsapp-btn i:first-child {
        font-size: 1.2rem;
    }
    
    .mobile-trust-section .whatsapp-btn > a > div {
        flex: 1;
    }
    
    .mobile-trust-section .whatsapp-btn > a > div > div:first-child {
        font-size: 0.85rem;
        line-height: 1.2;
    }
    
    .mobile-trust-section .whatsapp-btn > a > div > div:last-child {
        font-size: 0.7rem;
        opacity: 0.9;
    }
    
    .mobile-trust-section .whatsapp-btn i:last-child {
        font-size: 0.8rem;
    }
    
    /* Out of Stock Message */
    .product-info > div[style*="out of stock"] {
        padding: 18px !important;
        margin-bottom: 18px !important;
    }
    
    .product-info > div[style*="out of stock"] i {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }
    
    /* Wishlist & Share */
    .product-info > div:last-child {
        margin-top: 14px !important;
        padding-top: 14px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .product-info > div:last-child a,
    .product-info > div:last-child button {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
    }
    
    /* ═══ LONG DESCRIPTION SECTION ═══ */
    section[style*="Product Details"] {
        padding: 40px 0 !important;
    }
    
    section[style*="Product Details"] h2 {
        font-size: 1.1rem !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 25px !important;
        padding: 0 15px !important;
    }
    
    section[style*="Product Details"] h2 i {
        margin-right: 8px !important;
        font-size: 1rem !important;
    }
    
    section[style*="Product Details"] > div {
        padding: 0 15px !important;
    }
    
    section[style*="Product Details"] > div > div {
        padding: 18px 16px !important;
        border-radius: 10px !important;
    }
    
    .product-long-description {
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
    }
    
    .product-long-description h3 {
        font-size: 1rem !important;
        margin: 20px 0 12px !important;
        padding-bottom: 8px !important;
    }
    
    .product-long-description h4 {
        font-size: 0.9rem !important;
        margin: 16px 0 10px !important;
    }
    
    .product-long-description p {
        margin: 10px 0 !important;
        font-size: 0.85rem !important;
    }
    
    .product-long-description ul,
    .product-long-description ol {
        padding-left: 20px !important;
        margin: 12px 0 !important;
    }
    
    .product-long-description li {
        margin: 6px 0 !important;
        font-size: 0.85rem !important;
    }
    
    .product-long-description table {
        font-size: 0.75rem !important;
        margin: 15px 0 !important;
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .product-long-description table th,
    .product-long-description table td {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }
    
    .product-long-description table th {
        font-size: 0.7rem !important;
        letter-spacing: 0.5px !important;
        white-space: normal !important;
    }
    
    .product-long-description table td {
        white-space: normal !important;
    }
    
    /* Make tables responsive */
    .product-long-description table {
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    /* Table scroll indicator */
    .product-long-description table::after {
        content: '← Scroll →';
        display: block;
        text-align: center;
        font-size: 0.7rem;
        color: var(--text-muted);
        padding: 8px;
        background: var(--cream);
        border-top: 1px solid var(--border-light);
    }
    
    /* ═══ RELATED PRODUCTS SECTION ═══ */
    section[style*="You May Also Like"] {
        padding: 40px 0 !important;
    }
    
    section[style*="You May Also Like"] h2 {
        font-size: 1.2rem !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 30px !important;
        padding: 0 15px !important;
    }
    
    section[style*="You May Also Like"] > div {
        padding: 0 15px !important;
    }
    
    /* Force single column layout using class */
    .related-products-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 10px 0 !important;
    }
    
    .related-products-grid .product-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    section[style*="You May Also Like"] .product-card > a > div:first-child {
        height: 400px !important;
    }
    
    section[style*="You May Also Like"] .product-card h4 {
        font-size: 0.95rem !important;
        min-height: 42px !important;
    }
    
    section[style*="You May Also Like"] .product-card button {
        padding: 12px !important;
        font-size: 0.85rem !important;
    }
}

/* ─── SMALL MOBILE (< 480px) ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Main Image - Taller */
    .product-gallery > div:first-child > div:last-child {
        height: 400px !important;
    }
    
    /* Thumbnails - Smaller */
    .thumbnail-img {
        flex: 0 0 70px !important;
        width: 70px !important;
        height: 88px !important;
    }
    
    /* SM ATTIRE Logo - Even Smaller */
    .product-gallery > div:nth-child(2) > div:first-child {
        font-size: 1.5rem !important;
        letter-spacing: 2px !important;
    }
    
    .product-gallery > div:nth-child(2) > div:last-child {
        font-size: 0.65rem !important;
        letter-spacing: 1px !important;
    }
    
    /* Product Title */
    .product-info > h1 {
        font-size: 1.1rem !important;
    }
    
    /* Price */
    .product-info > div:nth-child(4) > div > span:first-child,
    .product-info > div:nth-child(4) > span {
        font-size: 1.4rem !important;
    }
    
    /* Product Details Section */
    section[style*="Product Details"] h2 {
        font-size: 1rem !important;
        letter-spacing: 1px !important;
    }
    
    .product-long-description {
        font-size: 0.8rem !important;
    }
    
    .product-long-description h3 {
        font-size: 0.95rem !important;
    }
    
    .product-long-description h4 {
        font-size: 0.85rem !important;
    }
    
    .product-long-description table {
        font-size: 0.7rem !important;
    }
    
    .product-long-description table th,
    .product-long-description table td {
        padding: 6px 8px !important;
        font-size: 0.7rem !important;
    }
    
    .product-long-description table th {
        font-size: 0.65rem !important;
    }
    
    /* Related Products - Single Column */
    section[style*="You May Also Like"] {
        padding: 35px 0 !important;
    }
    
    section[style*="You May Also Like"] h2 {
        font-size: 1.1rem !important;
        letter-spacing: 1px !important;
    }
    
    section[style*="You May Also Like"] .product-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    section[style*="You May Also Like"] .product-card > a > div:first-child {
        height: 380px !important;
    }
    
    section[style*="You May Also Like"] .product-card h4 {
        font-size: 0.9rem !important;
    }
    
    section[style*="You May Also Like"] .product-card button {
        padding: 11px !important;
        font-size: 0.8rem !important;
    }
}

/* ─── LANDSCAPE MOBILE OPTIMIZATION ───────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
    /* Main Image - Shorter in Landscape */
    .product-gallery > div:first-child > div:last-child {
        height: 350px !important;
    }
    
    /* Product Info - More Compact */
    .product-info > h1 {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }
    
    /* Buttons - Smaller */
    #add-to-cart-form > div:first-child > button,
    #add-to-cart-form > button[name="buy_now"] {
        height: 44px !important;
        font-size: 0.8rem !important;
    }
}

/* ─── STICKY ADD TO CART ON MOBILE ────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Make Add to Cart sticky at bottom on scroll */
    .mobile-sticky-cart {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 100%);
        padding: 12px 15px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        z-index: 999;
        display: none;
        border-top: 1px solid var(--border-light);
    }
    
    .mobile-sticky-cart.active {
        display: block;
    }
    
    .mobile-sticky-cart > div {
        display: flex;
        gap: 10px;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .mobile-sticky-cart button {
        flex: 1;
        height: 48px;
        border: none;
        border-radius: 8px;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        transition: var(--transition);
    }
    
    .mobile-sticky-cart button:first-child {
        background: linear-gradient(135deg, var(--primary-dark) 0%, #2d2624 100%);
        color: #fff;
        box-shadow: 0 3px 10px rgba(26, 22, 20, 0.25);
    }
    
    .mobile-sticky-cart button:last-child {
        background: linear-gradient(135deg, var(--deep-red) 0%, #6d1e2a 100%);
        color: #fff;
        box-shadow: 0 3px 10px rgba(139, 38, 53, 0.3);
    }
}

/* ─── REVIEWS SECTION MOBILE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Reviews section adjustments */
    section[style*="Reviews"] {
        padding: 40px 0 !important;
    }
    
    section[style*="Reviews"] h2 {
        font-size: 1.2rem !important;
        margin-bottom: 25px !important;
    }
    
    /* Review cards */
    .review-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .review-card h4 {
        font-size: 0.9rem !important;
    }
    
    .review-card p {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
    }
    
    /* Review form */
    .review-form input,
    .review-form textarea {
        font-size: 0.9rem !important;
        padding: 10px 12px !important;
    }
    
    .review-form button {
        padding: 12px !important;
        font-size: 0.85rem !important;
    }
}


/* ========================================
   PRODUCT DETAILS - ENHANCED MOBILE STYLING
   ======================================== */

@media (max-width: 768px) {
    /* Product Details Section Container */
    section[style*="Product Details"] {
        padding: 30px 0 !important;
        background: var(--white) !important;
    }
    
    section[style*="Product Details"] > div {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    /* Product Details Heading */
    section[style*="Product Details"] h2 {
        font-size: 1.1rem !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    section[style*="Product Details"] h2 i {
        font-size: 1rem !important;
        margin-right: 8px !important;
    }
    
    /* Content Container */
    section[style*="Product Details"] > div > div {
        padding: 20px 16px !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, var(--cream) 0%, var(--soft-beige) 100%) !important;
        border: 1px solid var(--border-light) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
        overflow: visible !important;
        min-height: auto !important;
    }
    
    /* Product Long Description Content */
    .product-long-description {
        background: transparent !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
        color: var(--text-color) !important;
        overflow: visible !important;
        width: 100% !important;
    }
    
    /* Headings inside description */
    .product-long-description h2 {
        font-size: 1.1rem !important;
        color: var(--primary-dark) !important;
        font-weight: 700 !important;
        margin: 0 0 15px 0 !important;
        padding-bottom: 10px !important;
        border-bottom: 2px solid var(--accent-gold) !important;
        text-align: left !important;
        line-height: 1.3 !important;
    }
    
    .product-long-description h3 {
        font-size: 1rem !important;
        color: var(--primary-dark) !important;
        font-weight: 700 !important;
        margin: 18px 0 10px 0 !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid var(--border-light) !important;
        line-height: 1.3 !important;
    }
    
    .product-long-description h4 {
        font-size: 0.9rem !important;
        color: var(--deep-red) !important;
        font-weight: 600 !important;
        margin: 14px 0 8px 0 !important;
        line-height: 1.3 !important;
    }
    
    /* Paragraphs */
    .product-long-description p {
        color: var(--text-color) !important;
        line-height: 1.7 !important;
        margin: 10px 0 !important;
        font-size: 0.85rem !important;
    }
    
    /* Lists */
    .product-long-description ul,
    .product-long-description ol {
        margin: 12px 0 !important;
        padding-left: 22px !important;
    }
    
    .product-long-description li {
        margin: 8px 0 !important;
        line-height: 1.6 !important;
        font-size: 0.85rem !important;
    }
    
    /* Tables - Responsive Design */
    .product-long-description table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        margin: 15px 0 !important;
        background: var(--white) !important;
        border-radius: 8px !important;
        overflow: visible !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        display: table !important;
    }
    
    .product-long-description table thead {
        background: linear-gradient(135deg, var(--deep-red) 0%, #6d1e2a 100%) !important;
        display: table-header-group !important;
    }
    
    .product-long-description table tbody {
        display: table-row-group !important;
    }
    
    .product-long-description table tr {
        display: table-row !important;
    }
    
    .product-long-description table th {
        color: #fff !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        padding: 10px 8px !important;
        font-size: 0.7rem !important;
        text-align: left !important;
        border: none !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        display: table-cell !important;
    }
    
    .product-long-description table td {
        padding: 10px 8px !important;
        font-size: 0.75rem !important;
        color: var(--text-color) !important;
        border-bottom: 1px solid var(--border-light) !important;
        vertical-align: top !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        display: table-cell !important;
    }
    
    .product-long-description table tr:last-child td {
        border-bottom: none !important;
    }
    
    .product-long-description table tbody tr:nth-child(even) {
        background: rgba(201, 169, 97, 0.05) !important;
    }
    
    .product-long-description table tbody tr:hover {
        background: rgba(201, 169, 97, 0.1) !important;
    }
    
    /* Strong and emphasis */
    .product-long-description strong {
        color: var(--primary-dark) !important;
        font-weight: 700 !important;
    }
    
    .product-long-description em {
        font-style: italic !important;
        color: var(--text-muted) !important;
    }
    
    /* Links */
    .product-long-description a {
        color: var(--deep-red) !important;
        text-decoration: underline !important;
        transition: var(--transition) !important;
    }
    
    .product-long-description a:hover {
        color: var(--accent-gold) !important;
    }
    
    /* Blockquotes */
    .product-long-description blockquote {
        border-left: 3px solid var(--accent-gold) !important;
        padding-left: 15px !important;
        margin: 15px 0 !important;
        font-style: italic !important;
        color: var(--text-muted) !important;
    }
}

@media (max-width: 480px) {
    /* Even more compact on small mobile */
    section[style*="Product Details"] {
        padding: 25px 0 !important;
    }
    
    section[style*="Product Details"] h2 {
        font-size: 1rem !important;
        letter-spacing: 1px !important;
        margin-bottom: 18px !important;
    }
    
    section[style*="Product Details"] > div > div {
        padding: 16px 14px !important;
    }
    
    .product-long-description {
        font-size: 0.8rem !important;
    }
    
    .product-long-description h2 {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }
    
    .product-long-description h3 {
        font-size: 0.95rem !important;
        margin: 16px 0 8px 0 !important;
    }
    
    .product-long-description h4 {
        font-size: 0.85rem !important;
        margin: 12px 0 6px 0 !important;
    }
    
    .product-long-description p,
    .product-long-description li {
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
    }
    
    .product-long-description ul,
    .product-long-description ol {
        padding-left: 18px !important;
    }
    
    .product-long-description table th {
        font-size: 0.65rem !important;
        padding: 8px 6px !important;
    }
    
    .product-long-description table td {
        font-size: 0.7rem !important;
        padding: 8px 6px !important;
    }
}

/* Tablet specific adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
    section[style*="Product Details"] {
        padding: 40px 0 !important;
    }
    
    section[style*="Product Details"] > div {
        padding: 0 20px !important;
    }
    
    section[style*="Product Details"] h2 {
        font-size: 1.3rem !important;
    }
    
    section[style*="Product Details"] > div > div {
        padding: 25px 30px !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }
    
    .product-long-description {
        font-size: 0.9rem !important;
    }
    
    .product-long-description table th,
    .product-long-description table td {
        font-size: 0.85rem !important;
        padding: 12px 10px !important;
    }
}


/* ========================================
   CART PAGE - MOBILE & TABLET RESPONSIVE
   ======================================== */

/* ─── TABLET STYLES (768px - 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Cart Container */
    .container > div[style*="grid-template-columns: 1fr 340px"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Order Summary - Full Width on Tablet */
    .container > div[style*="grid-template-columns: 1fr 340px"] > div:last-child {
        position: static !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
}

/* ─── MOBILE STYLES (< 768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Cart Page Container */
    section.container[style*="margin-top:50px"] {
        margin-top: 20px !important;
        margin-bottom: 80px !important;
        padding: 0 15px !important;
    }
    
    /* Page Title */
    section.container > h1 {
        font-size: 1.5rem !important;
        margin-bottom: 25px !important;
    }
    
    /* Empty Cart State */
    section.container > div[style*="text-align:center"] {
        padding: 50px 20px !important;
    }
    
    section.container > div[style*="text-align:center"] i {
        font-size: 3rem !important;
        margin-bottom: 15px !important;
    }
    
    section.container > div[style*="text-align:center"] h2 {
        font-size: 1.2rem !important;
    }
    
    section.container > div[style*="text-align:center"] p {
        font-size: 0.9rem !important;
        margin-bottom: 25px !important;
    }
    
    /* Cart Layout - SINGLE COLUMN */
    .cart-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    /* Cart Items Section - First */
    .cart-items-section {
        order: 1 !important;
        width: 100% !important;
    }
    
    /* Order Summary Section - Second (Below Cart Items) */
    .order-summary-section {
        order: 2 !important;
        position: static !important;
        top: auto !important;
        padding: 20px !important;
        border-radius: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .order-summary-section h3 {
        font-size: 1.1rem !important;
        margin-bottom: 20px !important;
    }
    
    .order-summary-section > div {
        font-size: 0.9rem !important;
    }
    
    .order-summary-section > div:nth-child(5) {
        font-size: 1.1rem !important;
    }
    
    .order-summary-section a.btn {
        padding: 14px !important;
        font-size: 0.85rem !important;
    }
    
    /* Cart Items Table - Card Layout */
    section.container table {
        display: block !important;
        width: 100% !important;
    }
    
    section.container table thead {
        display: none !important;
    }
    
    section.container table tbody {
        display: block !important;
    }
    
    section.container table tr {
        display: block !important;
        background: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 10px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }
    
    section.container table td {
        display: block !important;
        padding: 0 !important;
        text-align: left !important;
        border: none !important;
    }
    
    /* Product Info - First Cell */
    section.container table td:first-child {
        margin-bottom: 12px !important;
    }
    
    section.container table td:first-child > div {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    
    section.container table td:first-child img {
        width: 100% !important;
        height: 450px !important;
        border-radius: 8px !important;
    }
    
    section.container table td:first-child h4 {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }
    
    section.container table td:first-child p {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
    }
    
    section.container table td:first-child a {
        font-size: 0.85rem !important;
    }
    
    /* Price, Qty, Total - Grid Layout */
    section.container table td:nth-child(2),
    section.container table td:nth-child(3),
    section.container table td:nth-child(4) {
        display: inline-block !important;
        width: auto !important;
    }
    
    /* Create a grid for price, qty, total */
    section.container table tr::after {
        content: '';
        display: table;
        clear: both;
    }
    
    section.container table td:nth-child(2) {
        float: left !important;
        width: 33.33% !important;
    }
    
    section.container table td:nth-child(3) {
        float: left !important;
        width: 33.33% !important;
        text-align: center !important;
    }
    
    section.container table td:nth-child(4) {
        float: right !important;
        width: 33.33% !important;
        text-align: right !important;
    }
    
    /* Add labels before values */
    section.container table td:nth-child(2)::before {
        content: 'Price';
        display: block;
        font-size: 0.7rem;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
        font-weight: 600;
    }
    
    section.container table td:nth-child(3)::before {
        content: 'Quantity';
        display: block;
        font-size: 0.7rem;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
        font-weight: 600;
    }
    
    section.container table td:nth-child(4)::before {
        content: 'Total';
        display: block;
        font-size: 0.7rem;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
        font-weight: 600;
    }
    
    section.container table td:nth-child(2) {
        font-size: 0.9rem !important;
    }
    
    section.container table td:nth-child(4) {
        font-size: 1rem !important;
        color: var(--deep-red) !important;
    }
    
    /* Quantity Selector */
    section.container table td:nth-child(3) > div {
        margin: 0 auto !important;
        width: fit-content !important;
    }
    
    section.container table td:nth-child(3) button {
        padding: 8px 12px !important;
        font-size: 1.1rem !important;
    }
    
    section.container table td:nth-child(3) input {
        width: 45px !important;
        font-size: 0.95rem !important;
    }
    
    /* Cart Actions */
    section.container > div > div > div[style*="justify-content:space-between"] {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
        margin-top: 15px !important;
        padding-top: 15px !important;
    }
    
    section.container > div > div > div[style*="justify-content:space-between"] a {
        text-align: center !important;
        padding: 12px !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
    }
    
    section.container > div > div > div[style*="justify-content:space-between"] a:first-child {
        background: var(--primary-dark) !important;
        color: #fff !important;
        border-color: var(--primary-dark) !important;
    }
    
    section.container > div > div > div[style*="justify-content:space-between"] a:last-child {
        background: #fff !important;
        border-color: #dc3545 !important;
    }
}

/* ─── SMALL MOBILE (< 480px) ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Page Title */
    section.container > h1 {
        font-size: 1.3rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Order Summary */
    section.container > div[style*="grid-template-columns: 1fr 340px"] > div:last-child {
        padding: 18px !important;
    }
    
    section.container > div[style*="grid-template-columns: 1fr 340px"] > div:last-child h3 {
        font-size: 1rem !important;
    }
    
    section.container > div[style*="grid-template-columns: 1fr 340px"] > div:last-child > div {
        font-size: 0.85rem !important;
    }
    
    section.container > div[style*="grid-template-columns: 1fr 340px"] > div:last-child > div:nth-child(5) {
        font-size: 1rem !important;
    }
    
    /* Cart Items */
    section.container table tr {
        padding: 12px !important;
    }
    
    section.container table td:first-child img {
        height: 420px !important;
    }
    
    section.container table td:first-child h4 {
        font-size: 0.95rem !important;
    }
    
    /* Price, Qty, Total - Stack on Very Small Screens */
    section.container table td:nth-child(2),
    section.container table td:nth-child(3),
    section.container table td:nth-child(4) {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 10px !important;
    }
    
    section.container table td:nth-child(3) {
        text-align: left !important;
    }
    
    section.container table td:nth-child(3) > div {
        margin: 0 !important;
    }
    
    section.container table td:nth-child(4) {
        text-align: left !important;
        font-size: 1.1rem !important;
    }
}

/* ─── STICKY CHECKOUT BUTTON ON MOBILE ────────────────────────────────────── */
@media (max-width: 768px) {
    /* Make checkout button sticky at bottom */
    .mobile-sticky-checkout {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 100%);
        padding: 12px 15px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        z-index: 999;
        border-top: 1px solid var(--border-light);
        display: none;
    }
    
    .mobile-sticky-checkout.active {
        display: block;
    }
    
    .mobile-sticky-checkout a {
        display: block;
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, var(--deep-red) 0%, #6d1e2a 100%);
        color: #fff;
        text-align: center;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 700;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 4px 15px rgba(139, 38, 53, 0.3);
    }
}


/* ========================================================================
   CHECKOUT PAGE - MOBILE & TABLET REDESIGN
   ======================================================================== */

/* ─── MOBILE & TABLET STYLES (≤ 1024px) ────────────────────────────────── */
@media (max-width: 1024px) {
    
    /* Checkout Layout - Single Column */
    .checkout-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Form Section - Full Width */
    .checkout-form-section {
        width: 100% !important;
        order: 1;
    }
    
    /* Summary Section - Full Width, Not Sticky */
    .checkout-summary-section {
        width: 100% !important;
        position: static !important;
        order: 2;
        padding: 25px !important;
    }
    
    /* Shipping Information Card */
    .checkout-form-section > div:first-child {
        padding: 25px 20px !important;
        margin-bottom: 20px !important;
    }
    
    /* Payment Method Card */
    .checkout-form-section > div:nth-child(2) {
        padding: 25px 20px !important;
        margin-bottom: 20px !important;
    }
    
    /* Delivery Information Card */
    .checkout-form-section > div:last-child {
        padding: 20px !important;
    }
    
    /* Form Fields - Full Width on Mobile */
    .checkout-form-section input[type="text"],
    .checkout-form-section input[type="tel"],
    .checkout-form-section input[type="email"],
    .checkout-form-section select,
    .checkout-form-section textarea {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    /* Payment Options - Better Touch Targets */
    .payment-option {
        padding: 20px 15px !important;
        margin-bottom: 15px !important;
    }
    
    .payment-option input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Order Summary Items - Scrollable */
    .checkout-summary-section > div:first-child {
        max-height: 400px !important;
    }
    
    /* Order Summary Item Images */
    .checkout-summary-section img {
        width: 70px !important;
        height: 85px !important;
    }
    
    /* Place Order Button - Larger Touch Target */
    .checkout-summary-section button[type="submit"] {
        padding: 18px !important;
        font-size: 1rem !important;
    }
    
    /* Trust Badges - Stack on Mobile */
    .checkout-summary-section > div:last-child {
        gap: 20px !important;
    }
}

/* ─── MOBILE ONLY STYLES (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
    
    /* Page Title */
    section.container h1 {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }
    
    /* Back to Cart Link */
    section.container > p {
        font-size: 0.85rem !important;
        margin-bottom: 25px !important;
    }
    
    /* Section Headings */
    .checkout-form-section h3 {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Numbered Badges */
    .checkout-form-section h3 span {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.8rem !important;
    }
    
    /* Form Grid - Stack on Small Mobile */
    .checkout-form-section > div > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Labels */
    .checkout-form-section label {
        font-size: 0.8rem !important;
    }
    
    /* Payment Method Display Name */
    .payment-option span {
        font-size: 0.9rem !important;
    }
    
    /* Payment Method Description */
    .payment-option p {
        font-size: 0.8rem !important;
    }
    
    /* Payment Note */
    #payment-note {
        padding: 12px !important;
        font-size: 0.82rem !important;
    }
    
    /* Delivery Information */
    .checkout-form-section > div:last-child h3 {
        font-size: 0.95rem !important;
    }
    
    .checkout-form-section > div:last-child > div > div {
        font-size: 0.82rem !important;
    }
    
    /* Order Summary Title */
    .checkout-summary-section h3 {
        font-size: 1rem !important;
        margin-bottom: 18px !important;
    }
    
    /* Order Summary Items Container */
    .checkout-summary-section > div:first-child {
        max-height: 350px !important;
        margin-bottom: 18px !important;
    }
    
    /* Order Summary Item */
    .checkout-summary-section > div:first-child > div {
        margin-bottom: 12px !important;
        gap: 10px !important;
    }
    
    /* Order Summary Item Image */
    .checkout-summary-section img {
        width: 65px !important;
        height: 80px !important;
    }
    
    /* Order Summary Item Badge */
    .checkout-summary-section img + span {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.7rem !important;
        top: -6px !important;
        right: -6px !important;
    }
    
    /* Order Summary Item Name */
    .checkout-summary-section > div:first-child > div > div:nth-child(2) p:first-child {
        font-size: 0.85rem !important;
    }
    
    /* Order Summary Item Variant */
    .checkout-summary-section > div:first-child > div > div:nth-child(2) p:last-child {
        font-size: 0.75rem !important;
    }
    
    /* Order Summary Item Price */
    .checkout-summary-section > div:first-child > div > div:last-child span {
        font-size: 0.85rem !important;
    }
    
    /* Order Summary Item Remove Link */
    .checkout-summary-section > div:first-child > div > div:last-child a {
        font-size: 0.72rem !important;
    }
    
    /* Subtotal, Shipping, Total */
    .checkout-summary-section > div[style*="justify-content:space-between"] {
        font-size: 0.88rem !important;
    }
    
    /* Total Amount */
    .checkout-summary-section > div[style*="font-size:1.2rem"] {
        font-size: 1.1rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Terms & Conditions */
    .checkout-summary-section label {
        font-size: 0.8rem !important;
        gap: 8px !important;
        margin-bottom: 18px !important;
    }
    
    .checkout-summary-section label input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Security Message */
    .checkout-summary-section > div[style*="Your information is secure"] {
        padding: 10px !important;
        font-size: 0.72rem !important;
    }
    
    /* Trust Badges */
    .checkout-summary-section > div:last-child {
        margin-top: 12px !important;
        gap: 15px !important;
    }
    
    .checkout-summary-section > div:last-child > div i {
        font-size: 1.3rem !important;
    }
    
    .checkout-summary-section > div:last-child > div p {
        font-size: 0.68rem !important;
    }
}

/* ─── SMALL MOBILE STYLES (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
    
    /* Tighter Spacing */
    section.container {
        margin-top: 30px !important;
        margin-bottom: 60px !important;
    }
    
    /* Cards - Less Padding */
    .checkout-form-section > div {
        padding: 20px 15px !important;
        margin-bottom: 15px !important;
    }
    
    .checkout-summary-section {
        padding: 20px 15px !important;
    }
    
    /* Form Fields - Smaller */
    .checkout-form-section input,
    .checkout-form-section select,
    .checkout-form-section textarea {
        padding: 10px !important;
        font-size: 15px !important;
    }
    
    /* Payment Options - Compact */
    .payment-option {
        padding: 15px 12px !important;
        gap: 12px !important;
    }
    
    .payment-option img {
        height: 25px !important;
    }
    
    /* Order Summary Items - Smaller Images */
    .checkout-summary-section img {
        width: 60px !important;
        height: 75px !important;
    }
    
    /* Place Order Button */
    .checkout-summary-section button[type="submit"] {
        padding: 16px !important;
        font-size: 0.95rem !important;
    }
}

/* ─── TABLET LANDSCAPE (769px - 1024px) ────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Slightly larger spacing for tablets */
    .checkout-layout {
        gap: 30px !important;
    }
    
    /* Cards - More Padding on Tablet */
    .checkout-form-section > div {
        padding: 30px 25px !important;
    }
    
    .checkout-summary-section {
        padding: 30px 25px !important;
    }
    
    /* Keep 2-column grid for some form fields on tablet */
    .checkout-form-section > div > div[style*="grid-template-columns: 1fr 1fr"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Order Summary Items - Larger on Tablet */
    .checkout-summary-section img {
        width: 75px !important;
        height: 90px !important;
    }
}


/* ========================================================================
   WISHLIST PAGE - MOBILE & TABLET REDESIGN
   ======================================================================== */

/* ─── MOBILE & TABLET STYLES (≤ 1024px) ────────────────────────────────── */
@media (max-width: 1024px) {
    
    /* Wishlist Section */
    .wishlist-section {
        margin-top: 30px !important;
        margin-bottom: 60px !important;
    }
    
    /* Wishlist Grid - 2 Columns on Tablet */
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    /* Wishlist Card */
    .wishlist-card {
        border-radius: 16px !important;
    }
    
    /* Wishlist Image */
    .wishlist-image {
        height: 320px !important;
    }
    
    /* Remove Button - Larger Touch Target */
    .wishlist-remove-btn {
        width: 38px !important;
        height: 38px !important;
        top: 12px !important;
        right: 12px !important;
    }
    
    .wishlist-remove-btn i {
        font-size: 1rem !important;
    }
    
    /* Wishlist Info */
    .wishlist-info {
        padding: 15px !important;
    }
    
    .wishlist-info h4 {
        font-size: 0.9rem !important;
        margin-bottom: 8px !important;
    }
    
    /* Wishlist Price */
    .wishlist-price {
        font-size: 0.95rem !important;
    }
    
    /* Add to Cart Form */
    .wishlist-add-form {
        padding: 0 15px 15px !important;
    }
    
    /* Add to Cart Button */
    .wishlist-add-btn {
        padding: 12px !important;
        font-size: 0.85rem !important;
        border-radius: 6px !important;
    }
}

/* ─── MOBILE ONLY STYLES (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
    
    /* Page Title */
    .wishlist-section h1 {
        font-size: 1.6rem !important;
        margin-bottom: 25px !important;
    }
    
    /* Wishlist Grid - 2 Columns on Mobile (like products page) */
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Wishlist Card */
    .wishlist-card {
        max-width: 100% !important;
    }
    
    /* Wishlist Image - Match products page exactly */
    .wishlist-image {
        height: 321px !important;
    }
    
    /* Remove Button - Smaller for compact layout */
    .wishlist-remove-btn {
        width: 34px !important;
        height: 34px !important;
        top: 8px !important;
        right: 8px !important;
        box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3) !important;
    }
    
    .wishlist-remove-btn i {
        font-size: 0.85rem !important;
    }
    
    /* Wishlist Info - Compact padding */
    .wishlist-info {
        padding: 10px !important;
    }
    
    /* Category Label - Smaller */
    .wishlist-info p:first-child {
        font-size: 0.65rem !important;
        margin-bottom: 5px !important;
    }
    
    .wishlist-info h4 {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        min-height: 34px !important;
    }
    
    /* Wishlist Price - Compact */
    .wishlist-price {
        font-size: 0.85rem !important;
        margin-bottom: 8px !important;
        gap: 6px !important;
    }
    
    .wishlist-price span:first-child {
        font-size: 0.9rem !important;
    }
    
    .wishlist-price span:last-child {
        font-size: 0.75rem !important;
    }
    
    /* Add to Cart Form */
    .wishlist-add-form {
        padding: 0 10px 10px !important;
    }
    
    /* Add to Cart Button - Compact for 2 columns */
    .wishlist-add-btn {
        padding: 9px !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
        transition: all 0.3s !important;
        letter-spacing: 0.3px !important;
    }
    
    .wishlist-add-btn i {
        margin-right: 4px !important;
        font-size: 0.7rem !important;
    }
    
    .wishlist-add-btn:hover {
        background: linear-gradient(135deg, var(--deep-red) 0%, #c41e3a 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
    }
    
    /* Empty Wishlist State */
    .wishlist-section > div[style*="text-align: center"] {
        padding: 60px 20px !important;
        border-radius: 12px !important;
    }
    
    .wishlist-section > div[style*="text-align: center"] i {
        font-size: 3rem !important;
        margin-bottom: 15px !important;
    }
    
    .wishlist-section > div[style*="text-align: center"] h2 {
        font-size: 1.3rem !important;
        margin-bottom: 10px !important;
    }
    
    .wishlist-section > div[style*="text-align: center"] p {
        font-size: 0.9rem !important;
        margin-bottom: 25px !important;
    }
    
    .wishlist-section > div[style*="text-align: center"] a {
        padding: 14px 35px !important;
        font-size: 0.9rem !important;
    }
}

/* ─── SMALL MOBILE STYLES (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
    
    /* Tighter Spacing */
    .wishlist-section {
        margin-top: 25px !important;
        margin-bottom: 50px !important;
    }
    
    /* Page Title */
    .wishlist-section h1 {
        font-size: 1.4rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Wishlist Grid - Keep 2 columns with tighter gap */
    .wishlist-grid {
        gap: 10px !important;
    }
    
    /* Wishlist Image - Match products page for small mobile */
    .wishlist-image {
        height: 280px !important;
    }
    
    /* Remove Button */
    .wishlist-remove-btn {
        width: 32px !important;
        height: 32px !important;
        top: 6px !important;
        right: 6px !important;
    }
    
    .wishlist-remove-btn i {
        font-size: 0.8rem !important;
    }
    
    /* Wishlist Info */
    .wishlist-info {
        padding: 8px !important;
    }
    
    /* Category Label */
    .wishlist-info p:first-child {
        font-size: 0.6rem !important;
        margin-bottom: 4px !important;
    }
    
    .wishlist-info h4 {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
        min-height: 32px !important;
    }
    
    /* Wishlist Price */
    .wishlist-price {
        font-size: 0.8rem !important;
        margin-bottom: 6px !important;
        gap: 5px !important;
    }
    
    .wishlist-price span:first-child {
        font-size: 0.85rem !important;
    }
    
    .wishlist-price span:last-child {
        font-size: 0.7rem !important;
    }
    
    /* Add to Cart Form */
    .wishlist-add-form {
        padding: 0 8px 8px !important;
    }
    
    /* Add to Cart Button */
    .wishlist-add-btn {
        padding: 8px !important;
        font-size: 0.65rem !important;
        letter-spacing: 0.2px !important;
    }
    
    .wishlist-add-btn i {
        margin-right: 3px !important;
        font-size: 0.65rem !important;
    }
    
    /* Empty Wishlist State */
    .wishlist-section > div[style*="text-align: center"] {
        padding: 50px 15px !important;
    }
    
    .wishlist-section > div[style*="text-align: center"] i {
        font-size: 2.5rem !important;
    }
    
    .wishlist-section > div[style*="text-align: center"] h2 {
        font-size: 1.2rem !important;
    }
    
    .wishlist-section > div[style*="text-align: center"] p {
        font-size: 0.85rem !important;
    }
    
    .wishlist-section > div[style*="text-align: center"] a {
        padding: 12px 30px !important;
        font-size: 0.85rem !important;
    }
}

/* ─── TABLET LANDSCAPE (769px - 1024px) ────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Keep 2 columns on tablet landscape */
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
    
    /* Wishlist Image */
    .wishlist-image {
        height: 380px !important;
    }
    
    /* Wishlist Info */
    .wishlist-info {
        padding: 18px !important;
    }
    
    .wishlist-info h4 {
        font-size: 1rem !important;
    }
    
    /* Wishlist Price */
    .wishlist-price {
        font-size: 1.05rem !important;
    }
    
    /* Add to Cart Button */
    .wishlist-add-btn {
        padding: 13px !important;
        font-size: 0.88rem !important;
    }
}


/* ========================================================================
   CONTACT PAGE - MOBILE & TABLET REDESIGN
   ======================================================================== */

/* ─── MOBILE & TABLET STYLES (≤ 1024px) ────────────────────────────────── */
@media (max-width: 1024px) {
    
    /* Contact Banner */
    .contact-banner {
        padding: 40px 0 !important;
    }
    
    .contact-banner h1 {
        font-size: 2rem !important;
    }
    
    .contact-banner p {
        font-size: 0.9rem !important;
    }
    
    /* Contact Section */
    .contact-section {
        margin-top: 40px !important;
        margin-bottom: 60px !important;
    }
    
    /* Contact Layout - Single Column */
    .contact-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Contact Info Section - First */
    .contact-info-section {
        order: 1;
        width: 100% !important;
    }
    
    /* Contact Form Section - Second */
    .contact-form-section {
        order: 2;
        width: 100% !important;
        padding: 30px 25px !important;
    }
    
    /* Contact Info Items */
    .contact-info-item {
        margin-bottom: 25px !important;
        gap: 18px !important;
    }
    
    .contact-info-item > div:first-child {
        width: 50px !important;
        height: 50px !important;
    }
    
    .contact-info-item h4 {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
    }
    
    .contact-info-item p {
        font-size: 0.9rem !important;
    }
    
    /* Social Links */
    .contact-social {
        margin-top: 30px !important;
        padding-top: 25px !important;
    }
    
    .contact-social h4 {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
    }
    
    .contact-social > div {
        gap: 10px !important;
    }
    
    .contact-social a {
        width: 44px !important;
        height: 44px !important;
    }
    
    /* Form Heading */
    .contact-form-section h2 {
        font-size: 1.3rem !important;
        margin-bottom: 8px !important;
    }
    
    .contact-form-section > p {
        font-size: 0.85rem !important;
        margin-bottom: 25px !important;
    }
    
    /* Form Fields */
    .contact-form-section input,
    .contact-form-section textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px 14px !important;
    }
    
    .contact-form-section label {
        font-size: 0.8rem !important;
        margin-bottom: 6px !important;
    }
    
    /* Form Button */
    .contact-form-section button {
        padding: 15px 40px !important;
        font-size: 0.9rem !important;
    }
}

/* ─── MOBILE ONLY STYLES (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
    
    /* Contact Banner */
    .contact-banner {
        padding: 35px 0 !important;
    }
    
    .contact-banner h1 {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }
    
    .contact-banner p {
        font-size: 0.85rem !important;
    }
    
    /* Contact Section */
    .contact-section {
        margin-top: 30px !important;
        margin-bottom: 50px !important;
    }
    
    /* Contact Layout */
    .contact-layout {
        gap: 35px !important;
    }
    
    /* Contact Info Section */
    .contact-info-section h2 {
        font-size: 1.3rem !important;
        margin-bottom: 25px !important;
    }
    
    /* Contact Info Items */
    .contact-info-item {
        margin-bottom: 22px !important;
        gap: 15px !important;
    }
    
    .contact-info-item > div:first-child {
        width: 46px !important;
        height: 46px !important;
    }
    
    .contact-info-item h4 {
        font-size: 0.95rem !important;
        margin-bottom: 5px !important;
    }
    
    .contact-info-item p {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
    }
    
    .contact-info-item a {
        font-size: 0.85rem !important;
    }
    
    /* Social Links */
    .contact-social {
        margin-top: 25px !important;
        padding-top: 20px !important;
    }
    
    .contact-social h4 {
        font-size: 0.8rem !important;
    }
    
    .contact-social a {
        width: 42px !important;
        height: 42px !important;
    }
    
    /* Form Section */
    .contact-form-section {
        padding: 25px 20px !important;
    }
    
    .contact-form-section h2 {
        font-size: 1.2rem !important;
    }
    
    .contact-form-section > p {
        font-size: 0.82rem !important;
        margin-bottom: 22px !important;
    }
    
    /* Form Grid - Stack on Mobile */
    .contact-form-section form > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        margin-bottom: 18px !important;
    }
    
    /* Form Fields */
    .contact-form-section input,
    .contact-form-section textarea {
        padding: 11px 13px !important;
    }
    
    .contact-form-section textarea {
        rows: 5 !important;
    }
    
    /* Form Button */
    .contact-form-section button {
        padding: 14px 35px !important;
        font-size: 0.85rem !important;
    }
}

/* ─── SMALL MOBILE STYLES (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
    
    /* Contact Banner */
    .contact-banner {
        padding: 30px 0 !important;
    }
    
    .contact-banner h1 {
        font-size: 1.6rem !important;
    }
    
    .contact-banner p {
        font-size: 0.8rem !important;
    }
    
    /* Contact Section */
    .contact-section {
        margin-top: 25px !important;
        margin-bottom: 40px !important;
    }
    
    /* Contact Layout */
    .contact-layout {
        gap: 30px !important;
    }
    
    /* Contact Info Section */
    .contact-info-section h2 {
        font-size: 1.2rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Contact Info Items */
    .contact-info-item {
        margin-bottom: 20px !important;
        gap: 12px !important;
    }
    
    .contact-info-item > div:first-child {
        width: 44px !important;
        height: 44px !important;
    }
    
    .contact-info-item > div:first-child i {
        font-size: 0.95rem !important;
    }
    
    .contact-info-item h4 {
        font-size: 0.9rem !important;
    }
    
    .contact-info-item p {
        font-size: 0.8rem !important;
    }
    
    .contact-info-item a {
        font-size: 0.8rem !important;
    }
    
    /* Social Links */
    .contact-social {
        margin-top: 20px !important;
        padding-top: 18px !important;
    }
    
    .contact-social h4 {
        font-size: 0.75rem !important;
        margin-bottom: 10px !important;
    }
    
    .contact-social a {
        width: 40px !important;
        height: 40px !important;
    }
    
    .contact-social a i {
        font-size: 0.8rem !important;
    }
    
    /* Form Section */
    .contact-form-section {
        padding: 20px 15px !important;
    }
    
    .contact-form-section h2 {
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
    }
    
    .contact-form-section > p {
        font-size: 0.78rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Form Grid */
    .contact-form-section form > div:first-child {
        gap: 16px !important;
        margin-bottom: 16px !important;
    }
    
    /* Form Labels */
    .contact-form-section label {
        font-size: 0.75rem !important;
        margin-bottom: 5px !important;
    }
    
    /* Form Fields */
    .contact-form-section input,
    .contact-form-section textarea {
        padding: 10px 12px !important;
        font-size: 15px !important;
    }
    
    /* Form Button */
    .contact-form-section button {
        padding: 13px 30px !important;
        font-size: 0.8rem !important;
    }
    
    .contact-form-section button i {
        margin-right: 6px !important;
    }
}

/* ─── TABLET LANDSCAPE (769px - 1024px) ────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Keep single column but with better spacing */
    .contact-layout {
        gap: 45px !important;
    }
    
    /* Form Section - More padding on tablet */
    .contact-form-section {
        padding: 35px 30px !important;
    }
    
    /* Keep 2-column grid for name/email on tablet */
    .contact-form-section form > div:first-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
}


/* ========================================================================
   SHOPPING PROCESS STEPS - MOBILE & TABLET RESPONSIVE
   ======================================================================== */

/* ─── MOBILE & TABLET STYLES (≤ 768px) ─────────────────────────────────── */
@media (max-width: 768px) {
    
    /* Shopping Steps Section - Reduce Padding */
    section > .container > h2 {
        font-size: 1.2rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 35px !important;
    }
    
    /* Shopping Steps Grid */
    .shopping-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Step Cards - Reduce Padding */
    .shopping-steps-grid > div {
        padding: 20px 16px !important;
        border-radius: 10px !important;
    }
    
    /* Step Number Badge - Smaller */
    .shopping-steps-grid > div > div:first-child {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.95rem !important;
        top: -12px !important;
        right: 15px !important;
    }
    
    /* Icon Circle - Smaller */
    .shopping-steps-grid > div > div:nth-child(2) {
        width: 65px !important;
        height: 65px !important;
        margin-bottom: 15px !important;
        border-width: 2px !important;
    }
    
    .shopping-steps-grid > div > div:nth-child(2) i {
        font-size: 1.5rem !important;
    }
    
    /* Title - Smaller */
    .shopping-steps-grid > div h3 {
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
    }
    
    /* Description - Smaller */
    .shopping-steps-grid > div p {
        font-size: 0.78rem !important;
        line-height: 1.6 !important;
    }
}

/* ─── SMALL MOBILE STYLES (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
    
    /* Section Heading - Smaller */
    section > .container > h2 {
        font-size: 0.95rem !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 25px !important;
    }
    
    /* Step Cards - More Compact */
    .shopping-steps-grid {
        gap: 15px !important;
    }
    
    .shopping-steps-grid > div {
        padding: 18px 14px !important;
    }
    
    /* Step Number Badge - Smaller */
    .shopping-steps-grid > div > div:first-child {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
        top: -10px !important;
        right: 12px !important;
    }
    
    /* Icon Circle - Smaller */
    .shopping-steps-grid > div > div:nth-child(2) {
        width: 55px !important;
        height: 55px !important;
        margin-bottom: 12px !important;
    }
    
    .shopping-steps-grid > div > div:nth-child(2) i {
        font-size: 1.3rem !important;
    }
    
    /* Title - Smaller */
    .shopping-steps-grid > div h3 {
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
    }
    
    /* Description - Smaller */
    .shopping-steps-grid > div p {
        font-size: 0.72rem !important;
        line-height: 1.5 !important;
    }
}


/* ========================================================================
   PAGE BANNERS - MOBILE & TABLET RESPONSIVE
   ======================================================================== */

/* ─── MOBILE & TABLET STYLES (≤ 768px) ─────────────────────────────────── */
@media (max-width: 768px) {
    
    /* Page Banners - All Pages */
    section[style*="background:var(--primary-dark)"][style*="text-align:center"] {
        padding: 35px 15px !important;
    }
    
    section[style*="background:var(--primary-dark)"][style*="text-align:center"] h1 {
        font-size: 1.6rem !important;
    }
    
    section[style*="background:var(--primary-dark)"][style*="text-align:center"] p {
        font-size: 0.85rem !important;
    }
}

/* ─── SMALL MOBILE STYLES (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
    
    /* Page Banners - Smaller */
    section[style*="background:var(--primary-dark)"][style*="text-align:center"] {
        padding: 30px 10px !important;
    }
    
    section[style*="background:var(--primary-dark)"][style*="text-align:center"] h1 {
        font-size: 1.4rem !important;
    }
    
    section[style*="background:var(--primary-dark)"][style*="text-align:center"] p {
        font-size: 0.8rem !important;
    }
}


/* ========================================================================
   ABOUT PAGE - MOBILE & TABLET RESPONSIVE
   ======================================================================== */

/* ─── MOBILE & TABLET STYLES (≤ 768px) ─────────────────────────────────── */
@media (max-width: 768px) {
    
    /* Story Section - Single Column */
    .container > section[style*="grid-template-columns:1fr 1fr"],
    section.container[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
    
    /* Story Section Heading */
    section.container[style*="grid-template-columns"] h2 {
        font-size: 1.8rem !important;
    }
    
    /* Story Section Text */
    section.container[style*="grid-template-columns"] p {
        font-size: 0.9rem !important;
    }
    
    /* Stats Container */
    section.container[style*="grid-template-columns"] > div > div[style*="display:flex"][style*="gap:40px"] {
        gap: 20px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    section.container[style*="grid-template-columns"] > div > div[style*="display:flex"] > div {
        flex: 1 1 auto !important;
        min-width: 100px !important;
    }
    
    /* Image/Logo Section */
    section.container[style*="grid-template-columns"] > div[style*="background:#f9f9f9"] {
        height: 350px !important;
        order: -1 !important;
    }
    
    /* Values Section */
    section[style*="background:#fdfaf5"] {
        padding: 50px 0 !important;
    }
    
    section[style*="background:#fdfaf5"] h2 {
        font-size: 1.2rem !important;
        margin-bottom: 35px !important;
    }
    
    /* Values Grid - Single Column */
    section[style*="background:#fdfaf5"] > div > div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    section[style*="background:#fdfaf5"] > div > div > div {
        padding: 20px !important;
    }
    
    section[style*="background:#fdfaf5"] h3 {
        font-size: 1rem !important;
    }
    
    section[style*="background:#fdfaf5"] p {
        font-size: 0.85rem !important;
    }
    
    /* CTA Section */
    section.container[style*="text-align:center"][style*="padding:80px 0"] {
        padding: 50px 20px !important;
    }
    
    section.container[style*="text-align:center"] h2 {
        font-size: 1.5rem !important;
    }
    
    section.container[style*="text-align:center"] p {
        font-size: 0.9rem !important;
    }
}

/* ─── SMALL MOBILE STYLES (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
    
    /* Story Section */
    section.container[style*="grid-template-columns"] {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
        gap: 30px !important;
    }
    
    section.container[style*="grid-template-columns"] h2 {
        font-size: 1.5rem !important;
    }
    
    section.container[style*="grid-template-columns"] span {
        font-size: 0.7rem !important;
    }
    
    /* Stats */
    section.container[style*="grid-template-columns"] > div > div[style*="display:flex"] > div > div:first-child {
        font-size: 2rem !important;
    }
    
    section.container[style*="grid-template-columns"] > div > div[style*="display:flex"] > div > div:last-child {
        font-size: 0.75rem !important;
    }
    
    /* Image Section */
    section.container[style*="grid-template-columns"] > div[style*="background:#f9f9f9"] {
        height: 300px !important;
    }
    
    section.container[style*="grid-template-columns"] > div[style*="background:#f9f9f9"] > div > div > div:first-child {
        font-size: 3.5rem !important;
    }
    
    section.container[style*="grid-template-columns"] > div[style*="background:#f9f9f9"] > div > div > div:last-child {
        font-size: 0.75rem !important;
        letter-spacing: 5px !important;
    }
    
    /* Values Section */
    section[style*="background:#fdfaf5"] {
        padding: 40px 0 !important;
    }
    
    section[style*="background:#fdfaf5"] h2 {
        font-size: 1rem !important;
        letter-spacing: 2px !important;
    }
    
    section[style*="background:#fdfaf5"] > div > div > div > div[style*="width:70px"] {
        width: 60px !important;
        height: 60px !important;
    }
    
    section[style*="background:#fdfaf5"] > div > div > div > div[style*="width:70px"] i {
        font-size: 1.3rem !important;
    }
    
    /* CTA Section */
    section.container[style*="text-align:center"][style*="padding:80px 0"] {
        padding: 40px 15px !important;
    }
    
    section.container[style*="text-align:center"] h2 {
        font-size: 1.3rem !important;
    }
}


/* ========================================================================
   WISHLIST PAGE - HORIZONTAL CARD LAYOUT (CART STYLE)
   ======================================================================== */

/* ─── DESKTOP STYLES ────────────────────────────────────────────────────── */
.wishlist-items-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wishlist-item-card {
    display: flex;
    gap: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.wishlist-item-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* ─── MOBILE & TABLET STYLES (≤ 768px) ─────────────────────────────────── */
@media (max-width: 768px) {
    
    .wishlist-items-container {
        gap: 15px;
    }
    
    .wishlist-item-card {
        flex-direction: column !important;
        padding: 15px !important;
        gap: 15px !important;
    }
    
    /* Image - Full Width on Mobile */
    .wishlist-item-card > a > div {
        width: 100% !important;
        height: 450px !important;
        border-radius: 12px !important;
    }
    
    .wishlist-item-card > a > div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Product Details Container */
    .wishlist-item-card > div {
        padding-right: 0 !important;
    }
    
    .wishlist-item-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }
    
    /* Size & Color Container */
    .wishlist-item-card > div > div:first-child > div {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    /* Price & Button Container - Stack Vertically */
    .wishlist-item-card > div > div:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }
    
    /* Price Section */
    .wishlist-item-card > div > div:last-child > div:first-child {
        text-align: left !important;
    }
    
    .wishlist-item-card > div > div:last-child > div:first-child span {
        font-size: 1.5rem !important;
    }
    
    /* Button Container */
    .wishlist-item-card > div > div:last-child > div:last-child {
        width: 100% !important;
    }
    
    .wishlist-item-card button {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 0.85rem !important;
    }
    
    /* Remove Button */
    .wishlist-item-card > a[href*="remove"] {
        top: 10px !important;
        right: 10px !important;
        font-size: 1.4rem !important;
    }
}

/* ─── SMALL MOBILE STYLES (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
    
    .wishlist-item-card {
        padding: 12px !important;
    }
    
    /* Image - Smaller on Small Mobile */
    .wishlist-item-card > a > div {
        height: 420px !important;
    }
    
    .wishlist-item-card h3 {
        font-size: 1rem !important;
    }
    
    /* Price */
    .wishlist-item-card > div > div:last-child > div:first-child span {
        font-size: 1.3rem !important;
    }
    
    .wishlist-item-card button {
        padding: 12px 18px !important;
        font-size: 0.8rem !important;
    }
}


/* Hide scroll down button in product gallery */
button#scroll-down-btn {
    display: none !important;
}


/* Hide scroll up button in product gallery */
button#scroll-up-btn {
    display: none !important;
}


/* Hide hero section arrows on mobile only */
@media (max-width: 768px) {
    button.slider-prev,
    button.slider-next {
        display: none !important;
    }
}