/* ===================================
   PREMIUM SHOP TEMPLATE - MOBILE STYLES
   =================================== */
/* ===================================
   ENHANCED MOBILE HEADER STYLES
   Search Overlay & Mobile Menu
   =================================== */

/* ===================================
   BASE MOBILE SAFEGUARDS
   =================================== */
body {
    overflow-x: hidden;
}

#shop-content {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

@media (max-width: 768px) {
    .categories-container,
    .products-container,
    .gallery-container,
    .about-container,
    .contact-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 480px) {
    .categories-container,
    .products-container,
    .gallery-container,
    .about-container,
    .contact-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ===================================
   ENHANCED MOBILE MENU STYLES
   =================================== */
@media (max-width: 992px) {
    :root {
        --header-height: 70px;
        --announcement-height: 35px;
    }

    .header-container {
        padding: 0 1.5rem;
        gap: 1.5rem;
    }

    /* Enhanced Mobile Navigation Drawer */
    .main-navigation {
        display: none;
        position: fixed;
        top: calc(var(--header-height) + var(--announcement-height));
        left: 0;
        width: 100%;
        height: calc(100vh - (var(--header-height) + var(--announcement-height)));
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        padding: 0;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    .main-navigation.active {
        display: flex;
        transform: translateX(0);
    }

    /* Mobile Menu Header with Shop Tagline */
    .main-navigation::before {
        content: '';
        display: block;
        width: 100%;
        padding: 1.5rem 2rem;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        color: white;
        font-size: 0.875rem;
        font-weight: 500;
        text-align: center;
        letter-spacing: 0.05em;
        box-shadow: 0 2px 10px rgba(37, 99, 235, 0.2);
    }

    /* Add shop tagline to mobile menu */
    .main-navigation.active::before {
        content: attr(data-tagline);
    }

    .nav-menu {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        align-items: stretch;
        padding: 1.5rem 1rem;
    }

    .nav-item {
        width: 100%;
        opacity: 0;
        transform: translateX(-20px);
        animation: slideInNav 0.3s ease forwards;
    }

    .main-navigation.active .nav-item:nth-child(1) { animation-delay: 0.1s; }
    .main-navigation.active .nav-item:nth-child(2) { animation-delay: 0.15s; }
    .main-navigation.active .nav-item:nth-child(3) { animation-delay: 0.2s; }
    .main-navigation.active .nav-item:nth-child(4) { animation-delay: 0.25s; }

    @keyframes slideInNav {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .nav-link {
        padding: 1.25rem 1.5rem;
        font-size: 1rem;
        font-weight: 500;
        justify-content: flex-start;
        width: 100%;
        border-radius: 16px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        border: 1px solid var(--gray-200);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .nav-link::before {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        opacity: 0;
    }

    .nav-link:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .nav-item.active .nav-link {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        color: white;
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
        border-color: transparent;
    }

    .nav-link span {
        position: relative;
        z-index: 2;
    }

    .nav-indicator {
        display: none;
    }

    /* Mobile Menu Toggle Enhanced */
    .mobile-menu-toggle {
        display: flex;
        order: -1;
        position: relative;
        z-index: 1001;
    }

    .mobile-menu-toggle.active {
        position: relative;
    }

    /* Menu Overlay Background */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 998;
    }

    body.menu-open::before {
        opacity: 1;
        visibility: visible;
    }

    .logo-section {
        flex-grow: 1;
        justify-content: center;
    }

    .header-actions {
        order: 1;
    }
}

/* ===================================
   ENHANCED SEARCH OVERLAY - MOBILE
   =================================== */
@media (max-width: 768px) {
    .search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 2000;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

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

    /* Enhanced backdrop with blur */
    .search-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: opacity 0.3s ease;
    }

    /* Mobile-optimized search container */
    .search-container {
        position: relative;
        width: 100%;
        height: 100%;
        max-width: none;
        background: white;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
    }

    .search-overlay.active .search-container {
        transform: translateY(0);
    }

    /* Search Header Bar */
    .search-container::before {
        content: 'Search Products';
        display: block;
        padding: 1.25rem 1rem;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        color: white;
        font-size: 1.125rem;
        font-weight: 600;
        text-align: center;
        box-shadow: 0 2px 10px rgba(37, 99, 235, 0.2);
    }

    /* Enhanced Close Button */
    .search-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 44px;
        height: 44px;
        border: none;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .search-close i {
        font-size: 1.25rem;
        color: var(--gray-700);
        transition: transform 0.3s ease;
    }

    .search-close:active {
        transform: scale(0.9);
        background: rgba(255, 255, 255, 1);
    }

    .search-close:hover i {
        transform: rotate(90deg);
    }

    /* Mobile Search Form */
    .search-form-container {
        padding: 2rem 1rem;
        flex: 1;
        overflow-y: auto;
    }

    .premium-search-form {
        margin-bottom: 2rem;
    }

    .search-input-wrapper {
        position: relative;
        background: var(--gray-50);
        border-radius: 16px;
        border: 2px solid var(--gray-200);
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .search-input-wrapper:focus-within {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
        background: white;
    }

    .search-icon {
        position: absolute;
        left: 1.25rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-500);
        font-size: 1.125rem;
        pointer-events: none;
    }

    .search-input {
        width: 100%;
        padding: 1rem 3.5rem 1rem 3rem;
        border: none;
        background: transparent;
        font-size: 1rem;
        color: var(--gray-900);
        outline: none;
    }

    .search-input::placeholder {
        color: var(--gray-400);
    }

    .search-submit {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border: none;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        color: white;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-submit:active {
        transform: translateY(-50%) scale(0.95);
    }

    /* Mobile Search Suggestions */
    .search-suggestions {
        padding: 0 0.5rem;
    }

    .search-suggestions h4 {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--gray-600);
        margin-bottom: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .suggestion-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .suggestion-tag {
        padding: 0.625rem 1rem;
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        border-radius: 25px;
        font-size: 0.875rem;
        color: var(--gray-700);
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .suggestion-tag::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        transition: left 0.3s ease;
        z-index: -1;
    }

    .suggestion-tag:active {
        transform: scale(0.95);
    }

    .suggestion-tag:hover {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
    }

    /* Recent Searches Section (Optional) */
    .recent-searches {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--gray-200);
    }

    .recent-searches h4 {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--gray-600);
        margin-bottom: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .recent-search-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        margin-bottom: 0.5rem;
        background: var(--gray-50);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .recent-search-item:active {
        transform: scale(0.98);
        background: var(--gray-100);
    }

    .recent-search-text {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--gray-700);
        font-size: 0.9375rem;
    }

    .recent-search-text i {
        color: var(--gray-400);
        font-size: 0.875rem;
    }

    .remove-search {
        color: var(--gray-400);
        font-size: 0.875rem;
        padding: 0.25rem;
        transition: color 0.3s ease;
    }

    .remove-search:hover {
        color: var(--gray-600);
    }
}

/* ===================================
   TABLET & MOBILE HEADER LAYOUT
   =================================== */
@media (max-width: 768px) {
    .header-container {
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        padding: 0 1rem;
        gap: 1rem;
    }

    .logo-section {
        padding: 0;
        gap: 0.75rem;
    }

    .header-actions {
        justify-self: end;
    }

    .shop-name {
        font-size: 1rem;
    }

    .favorites-toggle {
        display: none;
    }

    /* Action Buttons Mobile Optimization */
    .action-button {
        width: 42px;
        height: 42px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .action-button:active {
        transform: scale(0.95);
        background: white;
    }

    .contact-supplier-btn span {
        display: none;
    }

    .contact-supplier-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
    }

    .announcement-content {
        animation-duration: 15s;
    }

    /* Header Scroll Effect on Mobile */
    .premium-header.scrolled {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .premium-header.scrolled .header-glass-bg {
        background: rgba(255, 255, 255, 0.98);
    }
}

/* ===================================
   SMALL MOBILE ADJUSTMENTS
   =================================== */
@media (max-width: 480px) {
    .logo-section {
        gap: 0.6rem;
    }

    .logo-container {
        width: 40px;
        height: 40px;
    }
    
    .shop-name {
        font-size: 1.2rem;
    }

    .shop-tagline {
        display: block;
        font-size: 0.75rem;
    }

    .action-button,
    .contact-supplier-btn {
        width: 40px;
        height: 40px;
    }

    .action-button i {
        font-size: 1rem;
    }

    .cart-count {
        top: -6px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        font-size: 0.65rem;
    }

    /* Search Container Adjustments */
    .search-form-container {
        padding: 1.5rem 1rem;
    }

    .search-input {
        font-size: 0.9375rem;
        padding: 0.875rem 3rem 0.875rem 2.75rem;
    }

    .suggestion-tag {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }

    /* Mobile Menu Adjustments */
    .nav-link {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
    }
}

/* ===================================
   ACCESSIBILITY & STATES
   =================================== */
@media (max-width: 768px) {
    /* Focus visible states for keyboard navigation */
    .nav-link:focus-visible,
    .search-input:focus-visible,
    .search-submit:focus-visible,
    .search-close:focus-visible,
    .suggestion-tag:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        .main-navigation,
        .search-container,
        .nav-item,
        .search-overlay {
            transition: none;
            animation: none;
        }
    }

    /* High contrast mode */
    @media (prefers-contrast: high) {
        .nav-link,
        .suggestion-tag {
            border: 2px solid var(--gray-800);
        }

        .search-input-wrapper {
            border-width: 3px;
        }
    }
}

/* ===================================
   JAVASCRIPT HELPER CLASSES
   =================================== */
.menu-open {
    overflow: hidden;
}

.search-open {
    overflow: hidden;
}

/* Prevent body scroll when menu or search is open */
.menu-open body,
.search-open body {
    position: fixed;
    width: 100%;
    overflow: hidden;
}


/* ===================================
   2. HERO SECTION - MOBILE
   =================================== */
@media (max-width: 992px) {
    .premium-hero {
        /* Adjust padding for tablet view */
        padding-top: calc(var(--header-height) + var(--announcement-height) + 2rem);
        padding-bottom: 4rem;
        min-height: auto; /* Allow height to be determined by content */
    }

    .hero-container {
        /* Switch to a single-column layout */
        grid-template-columns: 1fr;
        gap: 3rem; /* Increase gap for stacked layout */
        text-align: center;
    }

    .shop-info-card {
        max-width: 500px;
        margin: 0 0; /* Center the card */
        padding: 2rem;
        /* Ensure animation is visible */
        animation: none; /* Reset animation for JS re-trigger if needed */
        opacity: 1;
        transform: translateY(0);
    }

    .hero-content {
        /* Ensure animation is visible */
        animation: none; /* Reset animation for JS re-trigger if needed */
        opacity: 1;
        transform: translateX(0);
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-description {
        font-size: 1.125rem;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-features {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .premium-hero {
        padding-top: calc(var(--header-height) + var(--announcement-height) + 2rem);
        padding-bottom: 3rem;
    }

    .hero-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .shop-stats {
        /* Stack stats in a single column on smaller cards */
        grid-template-columns: 1fr;
    }

    .stat-item {
        justify-content: center; /* Center content within each stat item */
    }

    .hero-title {
        font-size: 2.5rem; /* Further reduce font size for readability */
        line-height: 1.2;
    }

    .hero-features {
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem; /* Optimize for small phone screens */
    }

    .hero-description {
        font-size: 1rem;
    }

    .shop-info-card {
        padding: 1.5rem; /* Reduce padding on the card */
    }

    .shop-verification {
        flex-direction: column; /* Stack verification badges */
        align-items: center;
    }

    .hero-actions {
        gap: 0.75rem;
    }

    .hero-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem;
    }

    .hero-features {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .floating-shape {
        /* Hide floating elements on small screens to reduce clutter */
        display: none;
    }
}

/* ===================================
   SHOP MOBILE STYLES
   Mobile-First Responsive Design
   Categories Section
   =================================== */

/* ===================================
   MOBILE VARIABLES & RESET
   =================================== */
@media (max-width: 768px) {
    :root {
        /* Mobile-optimized spacing */
        --mobile-padding: 1rem;
        --mobile-margin: 1rem;
        --mobile-gap: 0.75rem;
        
        /* Touch-friendly sizes */
        --touch-target: 44px;
        --mobile-radius: 12px;
        
        /* Adjusted typography for mobile */
        --mobile-font-xl: 1.75rem;
        --mobile-font-lg: 1.5rem;
        --mobile-font-md: 1.125rem;
        --mobile-font-base: 1rem;
        --mobile-font-sm: 0.875rem;
        --mobile-font-xs: 0.75rem;
    }
}

/* ===================================
   PREMIUM CATEGORIES - MOBILE
   =================================== */

/* Tablet View (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .premium-categories {
        padding: 4rem 0;
    }
    
    .categories-container {
        padding: 0 1.5rem;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .category-card {
        border-radius: 16px;
    }
    
    .category-image {
        height: 180px;
    }
}

/* Mobile View (max-width: 768px) */
@media (max-width: 768px) {
    .premium-categories {
        padding: 3rem 0;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        position: relative;
    }
    
    /* Remove decorative elements on mobile for performance */
    .premium-categories::before,
    .premium-categories::after {
        display: none;
    }
    
    .categories-container {
        padding: 0 var(--mobile-padding);
        max-width: 100%;
    }
    
    /* Mobile-optimized section header */
    .section-header {
        margin-bottom: 2rem;
        text-align: center;
        padding: 0 0.5rem;
    }
    
    .section-header-content {
        min-width: unset;
    }
    
    .section-subtitle {
        font-size: var(--mobile-font-xs);
        letter-spacing: 0.08em;
        margin-bottom: 0.375rem;
        color: var(--primary-color);
        font-weight: 700;
    }
    
    .section-title {
        font-size: var(--mobile-font-xl);
        line-height: 1.2;
        margin-bottom: 0.75rem;
        font-weight: 800;
        background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .section-description {
        font-size: var(--mobile-font-sm);
        line-height: 1.5;
        color: var(--gray-600);
        max-width: 100%;
        padding: 0 1rem;
    }
    
    /* Mobile Categories Grid - Single Column with Cards */
    .categories-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0;
    }
    
    /* Enhanced Mobile Category Card */
    .category-card {
        background: white;
        border-radius: var(--mobile-radius);
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--gray-200);
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        animation: none; /* Remove animation for better performance */
        opacity: 1;
        transform: none;
        
        /* Card as flex container for horizontal layout on mobile */
        display: flex;
        align-items: center;
        min-height: 120px;
    }
    
    /* Active/Pressed state for mobile */
    .category-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Hover effects only for devices with hover capability */
    @media (hover: hover) {
        .category-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
            border-color: var(--primary-color);
        }
    }
    
    /* Mobile Category Image */
    .category-image {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
    }
    
    .category-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    /* Simplified overlay for mobile */
    .category-overlay {
        display: none; /* Hide overlay on mobile for cleaner look */
    }
    
    /* Mobile Category Info */
    .category-info {
        flex: 1;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .category-name {
        font-size: var(--mobile-font-md);
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
        line-height: 1.3;
    }
    
    .category-description {
        font-size: var(--mobile-font-sm);
        color: var(--gray-600);
        line-height: 1.4;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .category-stats {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    
    .product-count {
        font-size: var(--mobile-font-xs);
        font-weight: 600;
        color: var(--gray-700);
        background: var(--gray-100);
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }
    
    .category-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    
    /* Add arrow indicator for mobile */
    .category-card::after {
        content: '\f054'; /* Font Awesome arrow */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-400);
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }
    
    .category-card:active::after {
        transform: translateY(-50%) translateX(2px);
        color: var(--primary-color);
    }
}

/* Small Mobile View (max-width: 480px) */
@media (max-width: 480px) {
    .premium-categories {
        padding: 2.5rem 0;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .section-description {
        font-size: 0.875rem;
        padding: 0;
    }
    
    /* Even more compact card layout */
    .category-card {
        min-height: 100px;
    }
    
    .category-image {
        width: 100px;
        height: 100px;
    }
    
    .category-info {
        padding: 0.75rem;
    }
    
    .category-name {
        font-size: 1rem;
    }
    
    .category-description {
        font-size: 0.8125rem;
        -webkit-line-clamp: 1;
    }
    
    .product-count {
        font-size: 0.6875rem;
    }
    
    .category-badge {
        font-size: 0.5625rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Alternative Grid View for Categories (Optional Toggle) */
@media (max-width: 768px) {
    /* Grid view option - 2 columns on mobile */
    .categories-grid.grid-view {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .categories-grid.grid-view .category-card {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }
    
    .categories-grid.grid-view .category-image {
        width: 100%;
        height: 120px;
    }
    
    .categories-grid.grid-view .category-info {
        padding: 0.75rem;
    }
    
    .categories-grid.grid-view .category-description {
        display: none; /* Hide description in grid view */
    }
    
    .categories-grid.grid-view .category-card::after {
        display: none;
    }
    
    .categories-grid.grid-view .category-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Horizontal Scroll View (Alternative Layout) */
@media (max-width: 768px) {
    .categories-grid.scroll-view {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 var(--mobile-padding);
        margin: 0 calc(-1 * var(--mobile-padding));
    }
    
    .categories-grid.scroll-view .category-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
    
    /* Hide scrollbar but keep functionality */
    .categories-grid.scroll-view::-webkit-scrollbar {
        display: none;
    }
    
    .categories-grid.scroll-view {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Loading State for Categories */
@media (max-width: 768px) {
    .category-card.loading {
        position: relative;
        overflow: hidden;
    }
    
    .category-card.loading::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent
        );
        animation: shimmer 2s infinite;
    }
    
    @keyframes shimmer {
        0% { left: -100%; }
        100% { left: 100%; }
    }
}

/* Accessibility Improvements */
@media (max-width: 768px) {
    /* Ensure touch targets meet minimum size */
    .category-card {
        min-height: var(--touch-target);
    }
    
    /* Focus styles for keyboard navigation */
    .category-card:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .category-card {
            border: 2px solid var(--gray-800);
        }
        
        .category-card:active,
        .category-card:focus-visible {
            border-color: var(--primary-color);
        }
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        .category-card,
        .category-img {
            transition: none;
        }
        
        .category-card.loading::before {
            animation: none;
        }
    }
}


/* ===================================
   PREMIUM PRODUCTS SECTION - MOBILE
   2-Column Grid Layout with Filtering
   =================================== */

/* Tablet View (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .premium-products {
        padding: 4rem 0;
    }
    
    .products-container {
        padding: 0 1.5rem;
    }
    
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    
    .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile View (max-width: 768px) */
@media (max-width: 768px) {
    .premium-products {
        padding: 3rem 0;
        background: var(--gray-50);
        position: relative;
    }

    
    /* Remove decorative elements for performance */
    .premium-products::before,
    .premium-products::after {
        display: none;
    }
    
    .products-container {
        padding: 0 var(--mobile-padding);
        max-width: 100%;
    }
    
    /* Mobile Section Header */
    .premium-products .section-header {
        margin-bottom: 1.5rem;
        padding: 0;
    }
    
    .premium-products .section-header-content {
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .premium-products .section-title {
        font-size: var(--mobile-font-xl);
        margin-bottom: 0.5rem;
    }
    
    .premium-products .section-description {
        font-size: var(--mobile-font-sm);
        padding: 0 1rem;
    }
    
    /* Mobile Section Controls */
    .section-controls {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }
    
    /* Mobile Filter Tabs - Horizontal Scroll */
    .filter-tabs {
        display: flex;
        background: white;
        border-radius: 10px;
        padding: 0.25rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--gray-200);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 0.25rem;
    }
    
    /* Hide scrollbar but keep functionality */
    .filter-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .filter-tabs {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .filter-tab {
        flex: 0 0 auto;
        padding: 0.625rem 1.25rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: var(--mobile-font-sm);
        white-space: nowrap;
        scroll-snap-align: start;
        transition: all 0.2s ease;
        border: none;
        background: transparent;
        color: var(--gray-600);
    }
    
    .filter-tab.active {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        color: white;
        transform: none;
    }
    
    .filter-tab:active:not(.active) {
        background: var(--gray-100);
        transform: scale(0.98);
    }
    
    /* View Controls - Simplified for Mobile */
    .view-controls {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
    }
    
    .view-btn {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        font-size: 1rem;
    }
    
    /* ===================================
       PRODUCTS GRID - 2 COLUMN LAYOUT
       =================================== */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-bottom: 2rem;
    }
    
    /* Mobile Product Card */
    .product-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--gray-200);
        position: relative;
        cursor: pointer;
        transition: all 0.2s ease;
        animation: none; /* Remove animations for performance */
        opacity: 1;
        transform: none;
        display: flex;
        flex-direction: column;
    }
    
    .product-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Product Badges - Compact */
    .product-badges {
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        z-index: 10;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        max-width: calc(100% - 1rem);
    }
    
    .product-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        backdrop-filter: blur(8px);
        line-height: 1;
    }
    
    /* Product Image - Square Aspect Ratio */
    .product-image {
        position: relative;
        width: 100%;
        padding-top: 100%; /* 1:1 Aspect Ratio */
        overflow: hidden;
        background: var(--gray-100);
    }
    
    .product-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    /* Simplified Product Overlay for Mobile */
    .product-overlay {
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 30rem;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    
    /* Show overlay on active/touch */
    .product-card:active .product-overlay {
        opacity: 1;
    }
    
    /* Compact Product Actions */
    .product-actions {
        display: flex;
        gap: 0.5rem;
        opacity: 1;
        transform: translateY(15px);
    }
    
    .action-btn {
        width: 36px;
        height: 36px;
        background: white;
        border-radius: 50%;
        font-size: 0.875rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    
    /* Product Info - Compact */
    .product-info {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    .product-category {
        font-size: 0.625rem;
        font-weight: 700;
        color: var(--primary-color);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .product-name {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.6em;
    }
    
    .product-description {
        display: none; /* Hide description on mobile */
    }
    
    /* Compact Rating */
    .product-rating {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin-bottom: 0.5rem;
        flex-wrap: wrap;
    }
    
    .stars {
        display: flex;
        gap: 0;
    }
    
    .stars i {
        font-size: 0.625rem;
        color: #fbbf24;
    }
    
    .rating-text {
        font-weight: 600;
        font-size: 0.625rem;
        color: var(--gray-700);
    }
    
    .review-count {
        font-size: 0.625rem;
        color: var(--gray-500);
    }
    
    /* Compact Price Display */
    .product-price {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.75rem;
        margin-top: auto; /* Push to bottom */
    }
    
    .current-price {
        font-size: 1.125rem;
        font-weight: 800;
        color: var(--gray-900);
        line-height: 1;
    }
    
    .original-price {
        font-size: 0.75rem;
        color: var(--gray-500);
        text-decoration: line-through;
        line-height: 1;
    }
    
    .save-amount {
        font-size: 0.625rem;
        font-weight: 600;
        color: #059669;
        background: rgba(16, 185, 129, 0.1);
        padding: 0.125rem 0.375rem;
        border-radius: 4px;
        align-self: flex-start;
    }
    
    /* Compact Product Footer */
    .product-footer {
        display: flex;
        gap: 0.5rem;
    }
    
    .add-to-cart-btn,
    .buy-now-btn {
        flex: 1;
        padding: 0.625rem 0.5rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.6875rem;
        gap: 0.25rem;
        min-height: 36px;
    }
    
    .add-to-cart-btn i,
    .buy-now-btn i {
        font-size: 0.75rem;
    }
    
    .add-to-cart-btn span,
    .buy-now-btn span {
        display: none; /* Hide text, show only icons */
    }
    
    /* Show full button on larger mobiles */
    @media (min-width: 375px) {
        .add-to-cart-btn span,
        .buy-now-btn span {
            display: inline;
        }
        
        .add-to-cart-btn,
        .buy-now-btn {
            font-size: 0.75rem;
        }
    }
    
    /* Load More Section */
    .load-more-section {
        text-align: center;
        padding: 1.5rem 0;
    }
    
    .load-more-btn {
        padding: 0.875rem 2rem;
        font-size: var(--mobile-font-sm);
        border-radius: 10px;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .load-more-btn i {
        font-size: 0.875rem;
    }
    
    .showing-text {
        font-size: var(--mobile-font-xs);
        color: var(--gray-600);
    }
    
    /* List View for Mobile - Single Column */
    .products-grid.list-view {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .products-grid.list-view .product-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        min-height: 100px;
    }
    
    .products-grid.list-view .product-image {
        width: 100px;
        height: 100px;
        padding-top: 0;
        flex-shrink: 0;
    }
    
    .products-grid.list-view .product-info {
        flex: 1;
        padding: 0.75rem;
    }
    
    .products-grid.list-view .product-description {
        display: block;
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
    }
    
    .products-grid.list-view .product-footer {
        margin-top: 0.5rem;
    }
}

/* Small Mobile View (max-width: 480px) */
@media (max-width: 480px) {
    .premium-products {
        padding: 2.5rem 0;
    }
    
    .products-container {
        padding: 0 0.75rem;
    }
    
    /* Even tighter grid spacing */
    .products-grid {
        gap: 0.5rem;
    }
    
    .product-card {
        border-radius: 10px;
    }
    
    .product-info {
        padding: 0.625rem;
    }
    
    .product-name {
        font-size: 0.8125rem;
    }
    
    .current-price {
        font-size: 1rem;
    }
    
    .product-badges {
        top: 0.375rem;
        left: 0.375rem;
    }
    
    .product-badge {
        font-size: 0.5625rem;
        padding: 0.2rem 0.375rem;
    }
    
    /* Single column below 375px */
    @media (max-width: 374px) {
        .products-grid {
            grid-template-columns: 1fr;
        }
        
        .product-card {
            max-width: 300px;
            margin: 0 auto;
        }
    }
}

/* Quick Add to Cart Animation */
@media (max-width: 768px) {
    @keyframes quickAdd {
        0% { transform: scale(1); }
        50% { transform: scale(0.95); background: #10b981; }
        100% { transform: scale(1); }
    }
    
    .add-to-cart-btn.adding {
        animation: quickAdd 0.3s ease;
    }
    
    .add-to-cart-btn.added {
        background: #10b981;
        border-color: #10b981;
        color: white;
    }
}

/* Skeleton Loading for Products */
@media (max-width: 768px) {
    .product-card.skeleton {
        pointer-events: none;
    }
    
    .product-card.skeleton .product-image {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }
    
    .product-card.skeleton .product-name,
    .product-card.skeleton .current-price {
        background: #e0e0e0;
        color: transparent;
        border-radius: 4px;
    }
    
    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
}

/* Filter Drawer for Mobile (Alternative Layout) */
@media (max-width: 768px) {
    .filter-drawer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(100%);
        transition: transform 0.3s ease;
        z-index: 1000;
        padding: 1.5rem;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .filter-drawer.active {
        transform: translateY(0);
    }
    
    .filter-drawer-handle {
        width: 40px;
        height: 4px;
        background: var(--gray-300);
        border-radius: 2px;
        margin: 0 auto 1rem;
    }
    
    .filter-trigger-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        border: none;
        border-radius: 50%;
        color: white;
        font-size: 1.25rem;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Swipe Actions for Product Cards (Optional) */
@media (max-width: 768px) {
    .product-card {
        position: relative;
        overflow: hidden;
    }
    
    .swipe-actions {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        display: flex;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    
    .product-card.swiped .swipe-actions {
        transform: translateX(0);
    }
    
    .swipe-action {
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.25rem;
    }
    
    .swipe-action.wishlist {
        background: #ec4899;
    }
    
    .swipe-action.compare {
        background: #8b5cf6;
    }
}

/* Accessibility for Mobile Products */
@media (max-width: 768px) {
    .product-card:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    .filter-tab:focus-visible,
    .view-btn:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: -2px;
    }
    
    /* Ensure minimum touch targets */
    .add-to-cart-btn,
    .buy-now-btn,
    .action-btn {
        min-width: 44px;
        min-height: 36px;
    }
}

/* Performance Optimizations */
@media (max-width: 768px) {
    /* Use will-change sparingly */
    .product-card:active {
        will-change: transform;
    }
    
    /* Hardware acceleration for smooth scrolling */
    .products-grid {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        .product-card,
        .filter-tab,
        .product-img {
            transition: none;
        }
    }
}

/* ===================================
   PREMIUM GALLERY SECTION - MOBILE
   Preserving Dark Elegant Design
   Focus on Item Display & Layout Only
   =================================== */

/* Tablet View (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .gallery-container {
        padding: 0 1.5rem;
    }
    
    /* Gallery Tabs - Tablet */
    .gallery-tabs {
        gap: 1rem;
        margin-bottom: 3rem;
    }
    
    .gallery-tab {
        padding: 0.875rem 2rem;
        font-size: 0.9rem;
    }
    
    /* Gallery Grid - 3 Columns */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    
    /* Reset aspect ratios for tablets */
    .gallery-item:nth-child(4n+1),
    .gallery-item:nth-child(4n+2),
    .gallery-item:nth-child(4n+3),
    .gallery-item:nth-child(4n+4) {
        aspect-ratio: 4/3;
    }
}

/* Mobile View (max-width: 768px) */
@media (max-width: 768px) {
    /* Container adjustments only */
    .gallery-container {
        padding: 0 var(--mobile-padding);
        max-width: 100%;
    }
    
    /* Section Header - Mobile Optimized */
    .premium-gallery .section-header {
        margin-bottom: 2.5rem;
        text-align: center;
    }
    
    .premium-gallery .section-header::after {
        bottom: -15px;
        width: 60px;
        height: 3px;
    }
    
    .premium-gallery .section-title {
        font-size: var(--mobile-font-xl);
    }
    
    .premium-gallery .section-description {
        font-size: var(--mobile-font-sm);
        padding: 0 1rem;
    }
    
    /* ===================================
       GALLERY TABS - MOBILE OPTIMIZED
       Maintaining Premium Dark Style
       =================================== */
    .gallery-tabs {
        display: flex;
        gap: 0.75rem;
        margin-bottom: 2.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.5rem;
        /* Preserve the premium look */
        justify-content: flex-start;
    }
    
    /* Hide scrollbar for cleaner look */
    .gallery-tabs::-webkit-scrollbar {
        height: 3px;
    }
    
    .gallery-tabs::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
    }
    
    .gallery-tabs::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
    }
    
    .gallery-tab {
        flex: 0 0 auto;
        min-width: 120px;
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
        scroll-snap-align: start;
        /* Maintain premium styling */
        border-radius: 50px;
        white-space: nowrap;
    }
    
    .gallery-tab i {
        font-size: 1rem;
        margin-right: 0.5rem;
    }
    
    .gallery-tab span {
        font-size: 0.875rem;
    }
    
    /* Active tab maintains gradient */
    .gallery-tab.active {
        transform: translateY(-2px) scale(1);
    }
    
    /* ===================================
       GALLERY GRID - MOBILE 2 COLUMN
       Preserving Dark Elegant Style
       =================================== */
    .gallery-content {
        min-height: 400px;
    }
    
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        /* Keep positioning for tab switching */
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
    
    .gallery-grid.active {
        opacity: 1;
        visibility: visible;
        position: relative;
    }
    
    /* Gallery Items - Mobile Optimized */
    .gallery-item {
        border-radius: 16px;
        overflow: hidden;
        cursor: zoom-in;
        /* Maintain premium shadows and effects */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        /* Simplified animation for performance */
        animation-duration: 0.5s;
        aspect-ratio: 1/1; /* Square for mobile */
    }
    
    /* Staggered animations - faster for mobile */
    .gallery-grid.active .gallery-item:nth-child(1) { animation-delay: 0.05s; }
    .gallery-grid.active .gallery-item:nth-child(2) { animation-delay: 0.1s; }
    .gallery-grid.active .gallery-item:nth-child(3) { animation-delay: 0.15s; }
    .gallery-grid.active .gallery-item:nth-child(4) { animation-delay: 0.2s; }
    .gallery-grid.active .gallery-item:nth-child(5) { animation-delay: 0.25s; }
    .gallery-grid.active .gallery-item:nth-child(6) { animation-delay: 0.3s; }
    .gallery-grid.active .gallery-item:nth-child(7) { animation-delay: 0.35s; }
    .gallery-grid.active .gallery-item:nth-child(8) { animation-delay: 0.4s; }
    
    /* Remove featured items on mobile */
    .gallery-item.featured {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    /* Mobile hover/touch effects */
    .gallery-item:active {
        transform: scale(0.98);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    @media (hover: hover) {
        .gallery-item:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
        }
    }
    
    /* Gallery Overlay - Mobile Optimized */
    .gallery-overlay {
        /* Keep the beautiful gradient overlay */
        background: linear-gradient(135deg, 
            rgba(37, 99, 235, 0.9) 0%, 
            rgba(16, 185, 129, 0.8) 50%,
            rgba(236, 72, 153, 0.9) 100%);
        /* Simplify for mobile */
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    /* Show overlay on touch/active */
    .gallery-item:active .gallery-overlay {
        opacity: 1;
    }
    
    .gallery-overlay-content {
        transform: translateY(10px);
    }
    
    .gallery-item:active .gallery-overlay-content {
        transform: translateY(0);
    }
    
    .gallery-overlay-content i {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    }
    
    .gallery-overlay-content span {
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    
    /* Gallery Item Metadata - Mobile */
    .gallery-item-meta {
        padding: 1rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    }
    
    .gallery-item-title {
        font-size: 0.875rem;
        font-weight: 600;
    }
    
    .gallery-item-date {
        font-size: 0.75rem;
    }
    
    /* ===================================
       LIGHTBOX - MOBILE OPTIMIZED
       Maintaining Dark Premium Feel
       =================================== */
    .gallery-lightbox {
        padding: 1rem;
    }
    
    .lightbox-backdrop {
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
    
    .lightbox-content {
        max-width: 95%;
        max-height: 85%;
    }
    
    .lightbox-image {
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }
    
    /* Mobile Lightbox Controls */
    .lightbox-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .lightbox-close i {
        font-size: 1rem;
    }
    
    .lightbox-controls {
        left: 10px;
        right: 10px;
    }
    
    .lightbox-prev,
    .lightbox-next {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    .lightbox-prev i,
    .lightbox-next i {
        font-size: 1rem;
    }
    
    /* Hide thumbnails on mobile for cleaner view */
    .lightbox-thumbnails {
        display: none;
    }
    
    /* Touch gestures hint */
    .lightbox-content::after {
        content: 'Swipe to navigate';
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.5rem 1rem;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        font-size: 0.75rem;
        border-radius: 20px;
        opacity: 0;
        animation: fadeInOut 3s ease-out;
    }
    
    @keyframes fadeInOut {
        0%, 100% { opacity: 0; }
        50% { opacity: 1; }
    }
    
    /* Gallery Loading State */
    .gallery-item::before {
        width: 30px;
        height: 30px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-top-color: rgba(255, 255, 255, 0.6);
    }
    
    /* ===================================
       ALTERNATIVE LAYOUTS
       =================================== */
    
    /* Single Column Option for Very Small Screens */
    .gallery-grid.single-column {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .gallery-grid.single-column .gallery-item {
        aspect-ratio: 16/9;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Masonry Layout - Mobile */
    .gallery-grid.masonry {
        columns: 2 150px;
        column-gap: 0.75rem;
    }
    
    .gallery-grid.masonry .gallery-item {
        break-inside: avoid;
        margin-bottom: 0.75rem;
        /* Random heights for masonry effect */
    }
    
    .gallery-grid.masonry .gallery-item:nth-child(3n+1) { aspect-ratio: 3/4; }
    .gallery-grid.masonry .gallery-item:nth-child(3n+2) { aspect-ratio: 1/1; }
    .gallery-grid.masonry .gallery-item:nth-child(3n+3) { aspect-ratio: 4/3; }
    
    /* Gallery View Toggle - Mobile */
    .gallery-view-toggle {
        position: absolute;
        top: -50px;
        right: 0;
        display: flex;
        gap: 8px;
    }
    
    .view-toggle-btn {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.7);
    }
    
    .view-toggle-btn.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
    }
}

/* Small Mobile View (max-width: 480px) */
@media (max-width: 480px) {
    .premium-gallery {
        padding: 3rem 0;
    }
    
    .gallery-container {
        padding: 0 0.75rem;
    }
    
    .premium-gallery .section-title {
        font-size: 1.5rem;
    }
    
    /* Smaller tabs for very small screens */
    .gallery-tabs {
        gap: 0.5rem;
        margin-bottom: 2rem;
    }
    
    .gallery-tab {
        min-width: 100px;
        padding: 0.75rem 1.25rem;
        font-size: 0.8125rem;
        border-radius: 40px;
    }
    
    .gallery-tab i {
        font-size: 0.875rem;
    }
    
    /* Tighter grid spacing */
    .gallery-grid {
        gap: 0.5rem;
    }
    
    .gallery-item {
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }
    
    /* Smaller overlay icons */
    .gallery-overlay-content i {
        font-size: 1.5rem;
    }
    
    .gallery-overlay-content span {
        font-size: 0.75rem;
    }
    
    /* Single column below 400px */
    @media (max-width: 400px) {
        .gallery-grid {
            grid-template-columns: 1fr;
        }
        
        .gallery-item {
            aspect-ratio: 4/3;
        }
    }
}

/* Touch-specific optimizations */
@media (max-width: 768px) and (pointer: coarse) {
    /* Larger touch targets */
    .gallery-tab {
        min-height: 44px;
    }
    
    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .gallery-item:hover {
        transform: none;
    }
    
    .gallery-item:hover .gallery-overlay {
        opacity: 0;
    }
}

/* Performance optimizations */
@media (max-width: 768px) {
    /* Reduce animations on scroll */
    .gallery-scrolling .gallery-item {
        animation: none !important;
    }
    
    /* Hardware acceleration */
    .gallery-grid {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        .gallery-item,
        .gallery-overlay,
        .gallery-tab {
            animation: none;
            transition: opacity 0.2s ease;
        }
    }
}

/* Accessibility enhancements */
@media (max-width: 768px) {
    .gallery-tab:focus-visible,
    .gallery-item:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    .lightbox-close:focus-visible,
    .lightbox-prev:focus-visible,
    .lightbox-next:focus-visible {
        outline: 2px solid white;
        outline-offset: -2px;
    }
    
    /* Screen reader text */
    .gallery-item[aria-label]::after {
        content: attr(aria-label);
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
}

/* Maintain elegant transitions */
@media (max-width: 768px) {
    .gallery-item,
    .gallery-overlay,
    .gallery-tab,
    .lightbox-content {
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ===================================
   PREMIUM ABOUT SECTION - MOBILE
   Maintaining Elegant Professional Style
   Focus on Layout & Content Display
   =================================== */

/* Tablet View (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .about-container {
        padding: 0 1.5rem;
    }
    
    .about-main {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .policies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile View (max-width: 768px) */
@media (max-width: 768px) {
    /* Container adjustments only */
    .about-container {
        padding: 0 var(--mobile-padding);
        max-width: 100%;
    }
    
    /* ===================================
       ABOUT HEADER - MOBILE
       =================================== */
    .about-header {
        text-align: center;
        margin-bottom: 2.5rem;
    }
    
    .about-header .section-subtitle {
        font-size: var(--mobile-font-xs);
        letter-spacing: 0.08em;
        margin-bottom: 0.375rem;
        color: var(--primary-color);
        font-weight: 700;
    }
    
    .about-header .section-title {
        font-size: var(--mobile-font-xl);
        line-height: 1.2;
        margin-bottom: 0;
    }
    
    /* ===================================
       ABOUT MAIN CONTENT - MOBILE
       =================================== */
    .about-main {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 3rem;
    }
    
    /* About Text Content */
    .about-text {
        gap: 1.5rem;
    }
    
    /* About Description - Mobile Optimized */
    .about-description {
        font-size: var(--mobile-font-base);
        line-height: 1.7;
        position: relative;
    }
    
    .about-description-dynamic {
        font-size: var(--mobile-font-base);
        line-height: 1.7;
        margin-bottom: 1rem;
    }
    
    .about-description p {
        font-size: var(--mobile-font-base);
        line-height: 1.7;
        margin-bottom: 1rem;
    }
    
    .about-description p:first-child {
        font-size: 1.125rem;
        font-weight: 500;
        color: var(--gray-900);
        position: relative;
        padding-left: 1rem;
    }
    
    /* Add decorative quote mark */
    .about-description p:first-child::before {
        content: '"';
        position: absolute;
        left: -0.25rem;
        top: -0.5rem;
        font-size: 3rem;
        font-family: 'Playfair Display', serif;
        color: var(--primary-color);
        opacity: 0.2;
        line-height: 1;
    }
    
    /* Business Info Cards - Mobile */
    .business-info {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .business-type,
    .established-year {
        flex: 1;
        background: var(--white);
        padding: 1.25rem;
        border-radius: 14px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--gray-200);
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: all 0.3s ease;
    }
    
    .business-type:active,
    .established-year:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    
    .business-type i,
    .established-year i {
        font-size: 1.25rem;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.05));
        border-radius: 10px;
        color: var(--primary-color);
    }
    
    .business-type h4,
    .established-year h4 {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--gray-600);
        margin-bottom: 0.125rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .business-type p,
    .established-year p {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--gray-900);
    }
    
    /* ===================================
       ABOUT FEATURES - MOBILE 2x2 GRID
       =================================== */
    .about-features {
        margin-bottom: 3rem;
    }
    
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .about-feature {
        background: var(--white);
        padding: 1.25rem;
        border-radius: 14px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--gray-200);
        text-align: center;
        transition: all 0.3s ease;
        opacity: 0;
        transform: translateY(20px);
        /* Remove hover lift on mobile */
    }
    
    .about-feature.animate-in {
        opacity: 1;
        transform: translateY(0);
        animation: slideInUp 0.5s ease-out;
    }
    
    .about-feature:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    
    .feature-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.75rem;
        color: white;
        font-size: 1.25rem;
    }
    
    .about-feature h4 {
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.375rem;
        line-height: 1.2;
    }
    
    .about-feature p {
        font-size: 0.8125rem;
        color: var(--gray-600);
        line-height: 1.4;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* ===================================
       SERVICES SECTION - MOBILE GRID
       =================================== */
    .services-section {
        margin-bottom: 3rem;
    }
    
    .services-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--gray-900);
        text-align: center;
        margin-bottom: 1.5rem;
        position: relative;
        padding-bottom: 0.75rem;
    }
    
    .services-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        border-radius: 2px;
    }
    
    .services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .service-item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.875rem;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        opacity: 0;
        transform: translateY(15px);
    }
    
    .service-item.animate-in {
        opacity: 1;
        transform: translateY(0);
        animation: slideInUp 0.4s ease-out;
    }
    
    .service-item:active {
        border-color: var(--primary-color);
        background: rgba(37, 99, 235, 0.03);
        transform: scale(0.98);
    }
    
    .service-item i {
        font-size: 1rem;
        color: var(--primary-color);
        width: 24px;
        text-align: center;
    }
    
    .service-item span {
        font-weight: 500;
        color: var(--gray-700);
        font-size: 0.8125rem;
        line-height: 1.2;
    }
    
    /* Optional: Service Content for expandable items */
    .service-content {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }
    
    .service-title {
        font-weight: 600;
        color: var(--gray-800);
        font-size: 0.875rem;
    }
    
    .service-description {
        font-size: 0.75rem;
        color: var(--gray-600);
        line-height: 1.3;
    }
    
    /* ===================================
       POLICIES SECTION - MOBILE CARDS
       =================================== */
    .policies-section {
        margin-top: 2rem;
    }
    
    .policies-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .policy-card {
        background: var(--white);
        padding: 1.75rem;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--gray-200);
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: translateY(20px);
    }
    
    .policy-card.animate-in {
        opacity: 1;
        transform: translateY(0);
        animation: slideInUp 0.5s ease-out;
    }
    
    .policy-card:active {
        transform: scale(0.98);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    }
    
    /* Top gradient bar animation */
    .policy-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        transform: scaleX(0);
        transition: transform 0.3s ease;
        transform-origin: left;
    }
    
    .policy-card:active::before {
        transform: scaleX(1);
    }
    
    .policy-icon {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        color: white;
        font-size: 1.5rem;
    }
    
    .policy-card h4 {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.75rem;
    }
    
    .policy-card p {
        font-size: 0.875rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin: 0;
    }
    
    /* Highlight important text in policies */
    .policy-card p strong {
        color: var(--gray-800);
        font-weight: 600;
    }
    
    .policy-card p em {
        color: var(--primary-color);
        font-style: normal;
        font-weight: 500;
    }
}

/* Small Mobile View (max-width: 480px) */
@media (max-width: 480px) {
    .premium-about {
        padding: 2.5rem 0;
    }
    
    .about-container {
        padding: 0 0.75rem;
    }
    
    .about-header {
        margin-bottom: 2rem;
    }
    
    .about-header .section-title {
        font-size: 1.5rem;
    }
    
    /* Smaller text for very small screens */
    .about-description,
    .about-description-dynamic,
    .about-description p {
        font-size: 0.9375rem;
        line-height: 1.6;
    }
    
    .about-description p:first-child {
        font-size: 1rem;
    }
    
    /* More compact business info */
    .business-type,
    .established-year {
        padding: 1rem;
    }
    
    /* Features - maintain 2 columns but smaller */
    .feature-grid {
        gap: 0.75rem;
    }
    
    .about-feature {
        padding: 1rem;
    }
    
    .feature-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .about-feature h4 {
        font-size: 0.875rem;
    }
    
    .about-feature p {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
    }
    
    /* Services - still 2 columns but tighter */
    .services-grid {
        gap: 0.5rem;
    }
    
    .service-item {
        padding: 0.75rem 0.625rem;
        gap: 0.5rem;
    }
    
    .service-item i {
        font-size: 0.875rem;
        width: 20px;
    }
    
    .service-item span {
        font-size: 0.75rem;
    }
    
    /* Policies more compact */
    .policies-grid {
        gap: 1rem;
    }
    
    .policy-card {
        padding: 1.5rem;
    }
    
    .policy-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .policy-card h4 {
        font-size: 1rem;
    }
    
    .policy-card p {
        font-size: 0.8125rem;
    }
}

/* Extra Small Mobile (max-width: 360px) */
@media (max-width: 360px) {
    /* Single column for features on very small screens */
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    .about-feature {
        max-width: 280px;
        margin: 0 auto;
    }
    
    /* Services can stay 2 columns but with smaller text */
    .service-item span {
        font-size: 0.6875rem;
    }
}

/* Accessibility Improvements */
@media (max-width: 768px) {
    /* Focus states for interactive elements */
    .business-type:focus-visible,
    .established-year:focus-visible,
    .about-feature:focus-visible,
    .service-item:focus-visible,
    .policy-card:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    /* Ensure minimum touch targets */
    .service-item {
        min-height: 44px;
    }
}

/* Performance Optimizations */
@media (max-width: 768px) {
    /* Stagger animations for better performance */
    .about-feature:nth-child(1) { animation-delay: 0.05s; }
    .about-feature:nth-child(2) { animation-delay: 0.1s; }
    .about-feature:nth-child(3) { animation-delay: 0.15s; }
    .about-feature:nth-child(4) { animation-delay: 0.2s; }
    
    .service-item:nth-child(1) { animation-delay: 0.05s; }
    .service-item:nth-child(2) { animation-delay: 0.1s; }
    .service-item:nth-child(3) { animation-delay: 0.15s; }
    .service-item:nth-child(4) { animation-delay: 0.2s; }
    .service-item:nth-child(5) { animation-delay: 0.25s; }
    .service-item:nth-child(6) { animation-delay: 0.3s; }
    
    .policy-card:nth-child(1) { animation-delay: 0.1s; }
    .policy-card:nth-child(2) { animation-delay: 0.2s; }
    .policy-card:nth-child(3) { animation-delay: 0.3s; }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        .about-feature,
        .service-item,
        .policy-card {
            animation: none;
            transition: opacity 0.2s ease;
        }
        
        .about-feature.animate-in,
        .service-item.animate-in,
        .policy-card.animate-in {
            opacity: 1;
            transform: none;
        }
    }
}

/* High Contrast Mode Support */
@media (max-width: 768px) and (prefers-contrast: high) {
    .business-type,
    .established-year,
    .about-feature,
    .service-item,
    .policy-card {
        border-width: 2px;
        border-color: var(--gray-700);
    }
    
    .business-type:active,
    .established-year:active,
    .about-feature:active,
    .service-item:active,
    .policy-card:active {
        border-color: var(--primary-color);
    }
}

/* Print styles for About section */
@media print and (max-width: 768px) {
    .about-features,
    .services-section,
    .policies-section {
        page-break-inside: avoid;
    }
    
    .about-feature,
    .policy-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ===================================
   PREMIUM CONTACT SECTION - MOBILE
   Preserving Elegant Glass Design
   Focus on Layout & Form Optimization
   =================================== */

/* Tablet View (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .contact-container {
        padding: 0 1.5rem;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .contact-form-card {
        max-width: 700px;
        margin: 0 auto;
    }
    
    .contact-info-section {
        max-width: 700px;
        margin: 0 auto;
    }
}

/* Mobile View (max-width: 768px) */
@media (max-width: 768px) {
    .premium-contact {
        padding: 4rem 0;
        /* Preserve beautiful gradient background */
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }
    
    .contact-container {
        padding: 0 var(--mobile-padding);
    }
    
    /* Section Header - Mobile */
    .premium-contact .section-header {
        margin-bottom: 2.5rem;
    }
    
    .premium-contact .section-title {
        font-size: var(--mobile-font-xl);
    }
    
    .premium-contact .section-description {
        font-size: var(--mobile-font-sm);
        padding: 0 1rem;
    }
    
    /* ===================================
       CONTACT LAYOUT - SINGLE COLUMN
       =================================== */
    .contact-content {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-top: 3rem;
    }
    
    /* ===================================
       CONTACT FORM CARD - MOBILE
       Preserving Glass Effect
       =================================== */
    .contact-form-card {
        padding: 2rem 1.5rem;
        border-radius: 20px;
        /* Maintain premium shadows and glass */
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        margin-bottom: 2rem;
    }
    
    .contact-form-card .card-glass-bg {
        /* Keep glass morphism effect */
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    
    .form-header {
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .form-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .form-subtitle {
        font-size: 0.875rem;
        color: var(--text-secondary);
    }
    
    /* Form Grid - Single Column on Mobile */
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 1.25rem;
    }
    
    .form-group {
        position: relative;
    }
    
    .form-label {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .form-input {
        padding: 0.875rem 1rem;
        font-size: 1rem;
        border-radius: 10px;
        border: 2px solid #e2e8f0;
        /* Ensure proper sizing on mobile */
        width: 100%;
        -webkit-appearance: none;
        appearance: none;
    }
    
    /* Larger touch area for select */
    .form-select {
        min-height: 48px;
        background-position: right 1rem center;
        padding-right: 2.5rem;
    }
    
    .form-textarea {
        min-height: 100px;
        resize: vertical;
    }
    
    /* Form Footer - Mobile */
    .form-footer {
        flex-direction: column;
        gap: 1.25rem;
        align-items: stretch;
        margin-top: 2rem;
    }
    
    .submit-btn {
        width: 100%;
        padding: 1rem 2rem;
        font-size: 1rem;
        border-radius: 10px;
        min-height: 48px;
        /* Maintain gradient */
        background: linear-gradient(135deg, var(--primary-color, #2563eb), var(--accent-color, #ec4899));
    }
    
    .form-note {
        text-align: center;
        font-size: 0.8125rem;
        order: 2;
    }
    
    /* Decorative circles - smaller on mobile */
    .decoration-circle.circle-1 {
        width: 120px;
        height: 120px;
        top: -60px;
        right: -60px;
    }
    
    .decoration-circle.circle-2 {
        width: 100px;
        height: 100px;
        bottom: -50px;
        left: -50px;
    }
    
    /* ===================================
       WHATSAPP CARD - MOBILE
       Maintaining Premium Glass Look
       =================================== */
    .contact-info-card.primary-card {
        padding: 2rem;
        border-radius: 20px;
        text-align: center;
        margin-bottom: 1.5rem;
        /* Keep premium shadow */
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    }
    
    .primary-card .card-glass-bg {
        /* Maintain gradient glass effect */
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(236, 72, 153, 0.1));
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    
    .primary-card .card-icon {
        width: 60px;
        height: 60px;
        font-size: 30px;
        margin: 0 auto 1rem;
        border-radius: 16px;
    }
    
    .primary-card .card-title {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }
    
    .primary-card .card-description {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }
    
    .whatsapp-btn {
        padding: 0.875rem 2rem;
        font-size: 0.9375rem;
        border-radius: 10px;
        /* Keep WhatsApp gradient */
        background: linear-gradient(135deg, #25d366, #128c7e);
    }
    
    .card-badge {
        top: 1rem;
        right: 1rem;
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
    }
    
    /* ===================================
       CONTACT DETAILS GRID - MOBILE
       2x2 Grid Layout
       =================================== */
    .contact-details-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .contact-detail-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.25rem 0.75rem;
        border-radius: 12px;
        gap: 0.75rem;
        /* Maintain elegant shadow */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }
    
    .detail-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border-radius: 10px;
        /* Keep gradient background */
        background: linear-gradient(135deg, var(--primary-color, #2563eb), var(--accent-color, #ec4899));
    }
    
    .detail-content h5 {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
    
    .contact-value {
        font-size: 0.875rem;
        word-break: break-word;
    }
    
    .contact-note {
        font-size: 0.6875rem;
    }
    
    /* ===================================
       OPERATING HOURS CARD - MOBILE
       =================================== */
    .operating-hours-card {
        padding: 2rem 1.5rem;
        border-radius: 16px;
        margin-bottom: 1.5rem;
        /* Maintain premium shadow */
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }
    
    .operating-hours-card .card-glass-bg {
        /* Keep glass effect */
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.95));
    }
    
    .hours-title {
        font-size: 1.125rem;
        margin-bottom: 1.25rem;
        gap: 0.5rem;
    }
    
    .hours-title i {
        font-size: 1.125rem;
    }
    
    .hours-list {
        margin-bottom: 1.25rem;
    }
    
    .hours-item {
        padding: 0.75rem 0;
        font-size: 0.875rem;
    }
    
    .hours-status {
        padding: 0.75rem 1rem;
        border-radius: 10px;
        font-size: 0.875rem;
        /* Keep success gradient background */
        background: rgba(16, 185, 129, 0.1);
    }
    
    .status-indicator {
        width: 8px;
        height: 8px;
    }
    
    /* ===================================
       MAP CARD - MOBILE
       =================================== */
    .map-card {
        height: 250px;
        border-radius: 16px;
        margin-bottom: 1.5rem;
        /* Maintain shadow */
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }
    
    .map-placeholder {
        /* Keep gradient background */
        background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    }
    
    .map-overlay {
        /* Maintain glass effect */
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 1.5rem;
    }
    
    .map-overlay i {
        font-size: 36px;
        margin-bottom: 1rem;
    }
    
    .map-overlay h4 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }
    
    .map-overlay p {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    
    .directions-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
        border-radius: 8px;
    }
    
    /* ===================================
       PAYMENT & SOCIAL CARDS - MOBILE
       =================================== */
    .payment-methods-card {
        padding: 1.5rem;
        border-radius: 16px;
        margin-bottom: 1.5rem;
        /* Keep shadow */
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }
    
    .payment-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .payment-icons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }
    
    .payment-icon {
        width: auto;
        height: 36px;
        font-size: 20px;
        border-radius: 6px;
        padding: 0.5rem;
    }
    
    /* Social Links Card - Mobile */
    .social-links-card {
        padding: 1.5rem;
        border-radius: 16px;
        /* Keep gradient background */
        background: linear-gradient(135deg, var(--primary-color, #2563eb), var(--accent-color, #ec4899));
    }
    
    .social-title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .social-icons {
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    
    .social-link {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border-radius: 10px;
        /* Maintain glass effect */
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* Keep floating elements but smaller */
    .contact-floating-elements .shape-1 {
        width: 200px;
        height: 200px;
        top: -100px;
        right: -100px;
    }
    
    .contact-floating-elements .shape-2 {
        width: 150px;
        height: 150px;
        bottom: -75px;
        left: -75px;
    }
    
    .contact-floating-elements .shape-3 {
        display: none; /* Hide middle shape on mobile */
    }
}

/* Small Mobile View (max-width: 480px) */
@media (max-width: 480px) {
    .premium-contact {
        padding: 3rem 0;
    }
    
    .contact-container {
        padding: 0 0.75rem;
    }
    
    /* Smaller form card padding */
    .contact-form-card {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }
    
    .form-title {
        font-size: 1.25rem;
    }
    
    .form-subtitle {
        font-size: 0.8125rem;
    }
    
    /* Form inputs */
    .form-input {
        padding: 0.75rem 0.875rem;
        font-size: 0.9375rem;
    }
    
    .form-label {
        font-size: 0.8125rem;
    }
    
    /* Contact details - single column on very small screens */
    @media (max-width: 360px) {
        .contact-details-grid {
            grid-template-columns: 1fr;
        }
        
        .contact-detail-card {
            flex-direction: row;
            text-align: left;
            padding: 1rem;
        }
    }
    
    /* Smaller WhatsApp card */
    .contact-info-card.primary-card {
        padding: 1.5rem;
    }
    
    .primary-card .card-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    
    .primary-card .card-title {
        font-size: 1.125rem;
    }
    
    /* Smaller operating hours */
    .operating-hours-card {
        padding: 1.5rem 1rem;
    }
    
    .hours-title {
        font-size: 1rem;
    }
    
    .hours-item {
        font-size: 0.8125rem;
        padding: 0.625rem 0;
    }
    
    /* Smaller map */
    .map-card {
        height: 200px;
    }
    
    .map-overlay i {
        font-size: 30px;
    }
    
    .map-overlay h4 {
        font-size: 1.125rem;
    }
    
    /* Payment icons - 3 columns on very small screens */
    .payment-icons {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .payment-icon {
        height: 32px;
        font-size: 18px;
    }
    
    /* Social links */
    .social-link {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* Form States & Interactions */
@media (max-width: 768px) {
    /* Focus states for inputs */
    .form-input:focus {
        border-color: var(--primary-color, #2563eb);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        outline: none;
    }
    
    /* Input with floating label effect (optional) */
    .form-group.focused .form-label {
        color: var(--primary-color, #2563eb);
        font-size: 0.75rem;
    }
    
    /* Loading state for submit button */
    .submit-btn.loading {
        position: relative;
        color: transparent;
    }
    
    .submit-btn.loading::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 50%;
        margin-left: -10px;
        margin-top: -10px;
        border: 2px solid white;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    
    /* Success state */
    .submit-btn.success {
        background: linear-gradient(135deg, #10b981, #059669);
    }
}

/* Touch Optimizations */
@media (max-width: 768px) and (pointer: coarse) {
    /* Ensure all interactive elements are 44px+ */
    .form-input,
    .form-select,
    .submit-btn,
    .whatsapp-btn,
    .directions-btn {
        min-height: 44px;
    }
    
    .social-link,
    .payment-icon {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Active states for touch feedback */
    .submit-btn:active,
    .whatsapp-btn:active,
    .directions-btn:active {
        transform: scale(0.98);
    }
    
    .contact-detail-card:active {
        transform: scale(0.98);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
}

/* Accessibility */
@media (max-width: 768px) {
    /* Focus visible states */
    .form-input:focus-visible,
    .form-select:focus-visible,
    .submit-btn:focus-visible,
    .whatsapp-btn:focus-visible {
        outline: 2px solid var(--primary-color, #2563eb);
        outline-offset: 2px;
    }
    
    .social-link:focus-visible {
        outline: 2px solid white;
        outline-offset: 2px;
    }
    
    /* High contrast support */
    @media (prefers-contrast: high) {
        .form-input,
        .form-select {
            border-width: 3px;
        }
        
        .contact-detail-card {
            border: 2px solid var(--gray-800);
        }
    }
}

/* Performance */
@media (max-width: 768px) {
    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
        .decoration-circle,
        .contact-floating-elements .floating-shape,
        .status-indicator.active {
            animation: none;
        }
        
        .form-input,
        .submit-btn,
        .contact-detail-card {
            transition: none;
        }
    }
    
    /* Hardware acceleration */
    .contact-content {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}


/* ===================================
   PREMIUM FOOTER SECTION - MOBILE
   Preserving Dark Elegant Design
   Focus on Layout & Display Only
   =================================== */

/* Tablet View (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .footer-container {
        padding: 0 1.5rem;
    }
    
    .footer-content {
        grid-template-columns: 2fr repeat(3, 1fr);
        gap: 3rem;
        padding: 60px 0 50px;
    }
    
    .footer-column.footer-brand {
        grid-column: span 1;
    }
    
    .footer-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .footer-bottom-section {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }
}

/* Mobile View (max-width: 768px) */
@media (max-width: 768px) {
    /* Container adjustments only */
    .footer-container {
        padding: 0 var(--mobile-padding);
        max-width: 100%;
    }
    
    /* ===================================
       FOOTER CONTENT - MOBILE LAYOUT
       Maintaining Dark Premium Style
       =================================== */
    .footer-content {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        padding: 3rem 0 2.5rem;
    }
    
    /* Footer Brand Section - Mobile */
    .footer-column.footer-brand {
        text-align: center;
        animation: none; /* Remove animation for performance */
    }
    
    .footer-logo {
        display: inline-block;
        margin-bottom: 1rem;
    }
    
    .footer-logo-img {
        width: 50px;
        height: 50px;
        border-radius: 10px;
    }
    
    .footer-logo .logo-glow {
        filter: blur(15px);
        opacity: 0.6;
    }
    
    .footer-brand-name {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .footer-brand-tagline {
        font-size: 0.875rem;
        color: #94a3b8;
        margin-bottom: 1rem;
    }
    
    .footer-description {
        font-size: 0.875rem;
        line-height: 1.6;
        color: #cbd5e1;
        margin-bottom: 1.5rem;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Newsletter Section - Mobile Optimized */
    .newsletter-section {
        padding: 1.5rem;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .newsletter-title {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .newsletter-subtitle {
        font-size: 0.75rem;
        color: #94a3b8;
        margin-bottom: 1rem;
    }
    
    .newsletter-input-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .newsletter-input {
        width: 100%;
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    .newsletter-btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
        background: linear-gradient(135deg, var(--primary-color, #2563eb), var(--accent-color, #ec4899));
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .newsletter-btn:active {
        transform: scale(0.98);
    }
    
    .newsletter-note {
        font-size: 0.6875rem;
        justify-content: center;
    }
    
    /* ===================================
       FOOTER COLUMNS - ACCORDION STYLE
       =================================== */
    .footer-column:not(.footer-brand) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 1rem;
    }
    
    .footer-column:last-child {
        border-bottom: none;
    }
    
    .footer-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        padding: 0.5rem 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: white;
    }
    
    .footer-title::after {
        content: '\f078'; /* Font Awesome chevron-down */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.75rem;
        color: #94a3b8;
        transition: transform 0.3s ease;
        margin-left: auto;
        display: inline-block;
        width: unset;
        height: unset;
        position: static;
        background: none;
        border-radius: 0;
    }
    
    /* Accordion toggle functionality (requires JS) */
    .footer-column.collapsed .footer-links,
    .footer-column.collapsed .footer-contact-list,
    .footer-column.collapsed .footer-social {
        display: none;
    }
    
    .footer-column.collapsed .footer-title::after {
        transform: rotate(-90deg);
    }
    
    /* Footer Links - Mobile */
    .footer-links {
        padding: 0;
        margin: 0 0 0.5rem 0;
    }
    
    .footer-links li {
        margin-bottom: 0.75rem;
    }
    
    .footer-link {
        font-size: 0.875rem;
        color: #cbd5e1;
        padding: 0.25rem 0;
        display: block;
    }
    
    .footer-link:active {
        color: var(--primary-color, #2563eb);
    }
    
    /* Footer Contact List - Mobile */
    .footer-contact-list {
        margin-bottom: 1.5rem;
    }
    
    .footer-contact-item {
        font-size: 0.875rem;
        margin-bottom: 1rem;
        align-items: flex-start;
    }
    
    .footer-contact-item i {
        font-size: 0.875rem;
        margin-top: 2px;
        min-width: 20px;
    }
    
    /* Footer Social Links - Mobile */
    .footer-social {
        margin-top: 1.5rem;
    }
    
    .footer-social-title {
        font-size: 0.875rem;
        margin-bottom: 1rem;
        text-align: center;
    }
    
    .footer-social-links {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .footer-social-link {
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        font-size: 1.125rem;
    }
    
    .footer-social-link:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.12);
    }
    
    /* ===================================
       FOOTER FEATURES - MOBILE GRID
       =================================== */
    .footer-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 2rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .footer-feature {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
        animation: none;
    }
    
    .footer-feature i {
        font-size: 1.75rem;
        color: var(--primary-color, #2563eb);
        margin-bottom: 0.25rem;
    }
    
    .feature-content h5 {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    
    .feature-content p {
        font-size: 0.75rem;
        color: #94a3b8;
        line-height: 1.3;
    }
    
    /* ===================================
       FOOTER BOTTOM SECTION - MOBILE
       =================================== */
    .footer-bottom-section {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem 0;
        align-items: center;
    }
    
    /* Payment Methods - Mobile */
    .footer-payment {
        text-align: center;
        width: 100%;
    }
    
    .footer-payment .payment-title {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    
    .payment-methods {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .payment-img {
        height: 24px;
        filter: brightness(0) invert(1);
        opacity: 0.6;
    }
    
    /* Trust Badges - Mobile */
    .footer-trust-badges {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    
    .trust-badge {
        flex: 1;
        min-width: 100px;
        max-width: 150px;
        padding: 0.625rem 0.875rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        font-size: 0.75rem;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .trust-badge i {
        font-size: 0.875rem;
        color: #10b981;
    }
    
    /* ===================================
       FOOTER BOTTOM - MOBILE
       =================================== */
    .footer-bottom {
        background: rgba(0, 0, 0, 0.3);
        padding: 1.5rem 0;
    }
    
    .footer-bottom-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        align-items: center;
    }
    
    .copyright p {
        font-size: 0.75rem;
        color: #94a3b8;
        margin: 0;
    }
    
    .footer-bottom-links {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .bottom-link {
        font-size: 0.75rem;
        color: #94a3b8;
        padding: 0.25rem 0.5rem;
    }
    
    .bottom-link:active {
        color: var(--primary-color, #2563eb);
    }
    
    .powered-by p {
        font-size: 0.75rem;
        color: #94a3b8;
    }
    
    .brand-highlight {
        color: var(--primary-color, #2563eb);
        font-weight: 600;
    }
    
    /* ===================================
       BACK TO TOP BUTTON - MOBILE
       =================================== */
    .back-to-top {
        bottom: 100px;
        right: 80px; /* Moved left to avoid chat widget */
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, var(--primary-color, #2563eb), var(--accent-color, #ec4899));
        border-radius: 12px;
        font-size: 1.125rem;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }
    
    .back-to-top:active {
        transform: scale(0.95);
    }
    
    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
    }
}

/* Small Mobile View (max-width: 480px) */
@media (max-width: 480px) {
    .footer-container {
        padding: 0 0.75rem;
    }
    
    .footer-content {
        gap: 2rem;
        padding: 2.5rem 0 2rem;
    }
    
    /* Smaller brand section */
    .footer-brand-name {
        font-size: 1.25rem;
    }
    
    .footer-brand-tagline {
        font-size: 0.75rem;
    }
    
    .footer-description {
        font-size: 0.8125rem;
    }
    
    /* Compact newsletter */
    .newsletter-section {
        padding: 1.25rem;
    }
    
    .newsletter-title {
        font-size: 0.875rem;
    }
    
    .newsletter-input {
        padding: 0.75rem 0.875rem;
        font-size: 0.8125rem;
    }
    
    .newsletter-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.8125rem;
    }
    
    /* Single column features */
    .footer-features {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1.5rem 0;
    }
    
    .footer-feature {
        flex-direction: row;
        text-align: left;
        padding: 0.875rem;
    }
    
    .footer-feature i {
        font-size: 1.5rem;
        min-width: 40px;
    }
    
    /* Smaller trust badges */
    .trust-badge {
        font-size: 0.6875rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Payment methods */
    .payment-img {
        height: 20px;
    }
    
    /* Footer links */
    .footer-link {
        font-size: 0.8125rem;
    }
    
    /* Copyright section */
    .copyright p,
    .bottom-link,
    .powered-by p {
        font-size: 0.6875rem;
    }
    
    /* Back to top button */
    .back-to-top {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        bottom: 90px;
        right: 80px; /* Moved left to avoid chat widget */
    }
}

/* Very Small Mobile (max-width: 360px) */
@media (max-width: 360px) {
    .footer-brand-name {
        font-size: 1.125rem;
    }
    
    .newsletter-section {
        padding: 1rem;
    }
    
    .footer-features {
        gap: 0.5rem;
    }
    
    .footer-feature {
        padding: 0.75rem;
    }
    
    .footer-bottom-links {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Touch-specific optimizations */
@media (max-width: 768px) and (pointer: coarse) {
    /* Ensure all interactive elements meet minimum touch target */
    .footer-link,
    .bottom-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .footer-social-link,
    .newsletter-btn,
    .back-to-top {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Performance optimizations */
@media (max-width: 768px) {
    /* Remove animations for better performance */
    .footer-column,
    .footer-feature {
        animation: none !important;
    }
    
    /* Hardware acceleration */
    .footer-container {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        .footer-social-link,
        .newsletter-btn,
        .back-to-top {
            transition: opacity 0.2s ease;
        }
    }
}

/* Accessibility enhancements */
@media (max-width: 768px) {
    .footer-link:focus-visible,
    .bottom-link:focus-visible,
    .footer-social-link:focus-visible,
    .newsletter-btn:focus-visible,
    .back-to-top:focus-visible {
        outline: 2px solid white;
        outline-offset: 2px;
    }
    
    .newsletter-input:focus-visible {
        outline: 2px solid var(--primary-color, #2563eb);
        outline-offset: -2px;
    }
}

/* Maintain elegant dark theme */
@media (max-width: 768px) {
    /* All backgrounds and gradients preserved from original */
    .premium-footer {
        /* Dark gradient background maintained */
    }
    
    .footer-gradient-bg {
        /* Gradient overlay maintained */
    }
    
    /* Glass morphism effects preserved */
    .newsletter-section,
    .footer-social-link,
    .trust-badge {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}



/* =======================================================
   OPTIMIZED & COMPACT SHOP INFO CARD - MOBILE STYLES
   ======================================================= */

/* --- Targeting general mobile devices (max-width: 768px) --- */
@media (max-width: 768px) {

    /*Adjust the bottom margin of the stats section to compensate for removed buttons */
    .shop-stats {
        margin-bottom: 0; 
    }

    /* Make badges smaller */
    .verification-badge,
    .years-badge {
        padding: 5px 10px;    /* Reduced padding */
        font-size: 11px;      /* Smaller font size */
        gap: 4px;             /* Less space between icon and text */
        border-radius: 8px;   /* Adjusted corner rounding */
    }

    /* Adjust stats layout to stack vertically and reduce gaps */
    .shop-stats {
        grid-template-columns: 1fr; /* Ensure proper stacking */
        gap: 0.75rem; 
    }

    /* Make each stat item more compact */
    .stat-item {
        padding: 0.6rem;
        gap: 0.75rem;
    }

    /* Reduce the size of the icon container and the icon itself */
    .stat-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    /* Reduce font sizes for stat values and labels */
    .stat-value {
        font-size: 1.3rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }
}

/* --- Targeting smaller mobile screens (max-width: 480px) for even more reduction --- */
@media (max-width: 480px) {
   

    /* Optional: Adjust the bottom margin of the stats section to compensate for removed buttons */
    .shop-stats {
        margin-bottom: 1rem; 
    }

    /* Make badges even more compact */
    .verification-badge,
    .years-badge {
        padding: 4px 8px;
        font-size: 15px;
    }

    /* Stack verification badges and center them */
    .shop-verification {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    /* Reduce the gap between stats further */
    .shop-stats {
        gap: 0.5rem;
    }

    /* Make stat items much smaller */
    .stat-item {
        padding: 0.1rem;
        gap: 0.5rem;
    }
    
    /* Significantly reduce the icon size */
    .stat-icon {
        width: 4px;
        height: 4px;
        font-size: 0.85rem;
        display: none;
    }

    /* Further reduce font sizes for stats */
    .stat-value {
        font-size: 1.15rem;
    }

    .stat-label {
        font-size: 0.65rem;
    }
}


/* =================================================================
   HERO SECTION - MOBILE IMAGE FIT & LAYOUT (NO CROPPING)
   ================================================================= */

@media (max-width: 768px) {
    /* Change the hero section to stack content vertically */
    .premium-hero {
        min-height: auto; /* Remove the full-screen height */
        display: flex;
        flex-direction: column; /* Stack image and content vertically */
        padding-top: calc(var(--header-height) + var(--announcement-height));
        padding-bottom: 0; /* Remove bottom padding as content will have its own */
    }

    /* Reset the absolute positioning of the background containers */
    .hero-background,
    .hero-image-container {
        position: static; /* Change from 'absolute' to flow like normal content */

         min-height: 280px;
        max-height: 80vh; 
        margin-bottom: -6rem; /* Add some space below the image */
    }

    /* The key change for the image itself */
    .hero-image {
      
        object-fit: contain;

        /* Ensure the image doesn't overflow its container */
        max-width: 100%;
        height: 100%;
        padding-bottom: -5rem;

        /* Remove the absolute positioning */
        position: static;
        
    }

    /* Remove the overlay, as it will cover the content below it */
    .hero-overlay {
        display: none;
    }
    
    /* Adjust the main content container to sit nicely below the image */
    .hero-container {
        position: static; /* Remove absolute positioning */
        z-index: 1;
        width: 100%;
        min-height: auto; /* Let content define its height */
        padding: 2rem 1rem 3rem 1rem; /* Add padding for spacing */
        
        /* We need to give it a background since the image is no longer behind it */
        background: linear-gradient(135deg, 
            rgba(102, 126, 234, 0.95) 0%, 
            rgba(118, 75, 162, 0.85) 100%
        );
    }
}

@media (max-width: 480px) {
    .hero-image {
        max-height: 40vh; /* Further reduce max height on very small screens */
    }

    .hero-container {
        padding: 1.5rem 1rem 2.5rem 1rem; /* Adjust padding for small devices */
    }
}