/* ===== RESPONSIVE STYLES ===== */

/* Large Screens (Desktop) */
@media (min-width: 1200px) {
    .container {
        max-width: 1280px;
    }
}

/* Medium Screens (Tablets & Small Laptops) */
@media (max-width: 1024px) {
    :root {
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.75rem;
    }

    .header-inner {
        padding: var(--spacing-3) 0;
    }

    .header-logo .logo-img {
        height: 40px;
    }

    .hero-slider {
        height: 400px;
    }

    .promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Ensure content doesn't overflow horizontally */
    body {
        overflow-x: hidden;
    }

    img,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }
}

/* Small Screens (Tablets) */
@media (max-width: 768px) {
    :root {
        --spacing-12: 3rem;
        --spacing-8: 2rem;
    }

    .header-search {
        display: none;
        /* Hide search on mobile header, maybe show as icon */
    }

    .header-actions {
        gap: var(--spacing-3);
    }

    .lang-switcher {
        display: none;
    }

    .category-nav {
        display: none;
        /* Hide desktop category nav on mobile */
    }

    /* Show category slider in a different way or rely on mobile menu */

    .hero-content {
        padding: var(--spacing-4);
        text-align: center;
        max-width: 100%;
    }

    .hero-title {
        font-size: var(--font-size-3xl);
    }

    .promo-grid {
        grid-template-columns: 1fr;
    }

    .featured-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }

    .collection-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .collection-large {
        grid-row: auto;
    }

    .collection-card {
        min-height: 250px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-about {
        max-width: 100%;
        margin: 0 auto;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-links a:hover {
        padding-right: 0;
    }

    .footer-contact li {
        justify-content: center;
    }

    .product-gallery-wrapper {
        grid-template-columns: 1fr;
    }

    .product-gallery {
        position: static;
        margin-bottom: var(--spacing-6);
    }

    .shop-content {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        display: none;
        /* Consider implementing a filter modal for mobile */
    }

    /* Generic Content Responsiveness */
    table {
        display: block;
        overflow-x: auto;
        width: 100%;
        border-collapse: collapse;
    }

    /* WooCommerce Cart/Checkout Tables */
    .shop_table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        /* Ensure padding doesn't overflow */
    }
}

/* Extra Small Screens (Mobile Phones) */
@media (max-width: 480px) {
    .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .header-logo .logo-img {
        height: 32px;
    }

    .hero-slider {
        height: 300px;
    }

    .hero-title {
        font-size: var(--font-size-2xl);
    }

    .section-header {
        flex-direction: column;
        gap: var(--spacing-2);
        align-items: flex-start;
    }

    .products-grid {
        gap: var(--spacing-2);
    }

    .product-info {
        padding: var(--spacing-3);
    }

    .product-title {
        font-size: var(--font-size-sm);
    }

    .btn-add-to-cart {
        font-size: var(--font-size-xs);
        padding: var(--spacing-2);
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        left: 20px;
    }
}

/* ===== MOBILE HEADER ACCOUNT LINK ===== */
@media (max-width: 768px) {
    .header-actions .account-link-text {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-700);
    }

    .header-actions .account-link-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        gap: 2px;
    }

    .header-actions .account-link-mobile span {
        font-size: 10px;
        color: var(--gray-600);
    }
}

@media (min-width: 769px) {
    .header-actions .account-link-text {
        display: none;
    }
}

/* ===== MOBILE BANNER & LAYOUT FIXES ===== */
@media (max-width: 768px) {

    /* Banner Images - Full clarity */
    .promo-banners img,
    .hero-slider img,
    .collection-card img,
    .promo-banner-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
        max-width: 100%;
    }

    /* Header fixes */
    .header-inner {
        padding: var(--spacing-2) 0;
        gap: var(--spacing-2);
    }

    .header-logo .logo-img {
        height: 35px;
    }

    /* Header actions spacing */
    .header-actions {
        gap: var(--spacing-2);
    }

    .header-action svg {
        width: 20px;
        height: 20px;
    }

    .action-count {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -5px;
        left: -5px;
    }

    /* Sidebar Menu */
    .mobile-menu {
        width: 85%;
        max-width: 320px;
    }

    .mobile-menu-header {
        padding: var(--spacing-3);
    }

    .mobile-menu-content {
        padding: var(--spacing-3);
    }

    .mobile-menu-link {
        padding: var(--spacing-3) var(--spacing-2);
        font-size: var(--font-size-base);
    }

    /* Category nav on mobile */
    .category-nav {
        padding: var(--spacing-2) 0;
    }

    .category-image {
        width: 55px;
        height: 55px;
    }

    .category-name {
        font-size: 10px;
        max-width: 60px;
    }
}

@media (max-width: 480px) {

    /* Extra small screens */
    .header-logo .logo-img {
        height: 30px;
    }

    .header-action svg {
        width: 18px;
        height: 18px;
    }

    .mobile-menu {
        width: 90%;
    }

    .category-image {
        width: 50px;
        height: 50px;
    }

    /* Promo banners full width */
    .promo-banner-item {
        border-radius: 8px;
        overflow: hidden;
    }

    .promo-banner-item img {
        display: block;
    }
}