/* ==========================================================================
   RESPONSIVE.CSS — Mobile First Breakpoints
   ========================================================================== */

/* ≤1200px — Tablet Landscape */
@media (max-width: 1200px) {
    :root { --container-pad: 1.25rem; }
    .categories-grid { grid-template-columns: repeat(4, 1fr); }
    .featured-products-scroll { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
    .footer-grid .footer-newsletter { grid-column: 1 / -1; }
    .footer-trust-bar__grid { grid-template-columns: repeat(2, 1fr); }

    /* Hero: tighten overlay fade so more bg image shows */
    .hero-banner__overlay {
        background: linear-gradient(
            to right,
            rgba(232,248,245,0.97) 0%,
            rgba(232,248,245,0.90) 40%,
            rgba(232,248,245,0.55) 62%,
            transparent 85%
        );
    }
}

/* ≤992px — Tablet */
@media (max-width: 992px) {
    :root { --header-height: auto; }

    /* Header */
    .header-main__search { display: none; }
    .header-main__search--mobile { display: block; }
    .header-main__nav { display: none; }
    .hide-mobile  { display: none !important; }
    .hide-desktop { display: flex !important; }

    /* Hero — full-bg layout on tablet: tighter content, stronger overlay */
    .hero-banner {
        padding: 48px 0 40px;
        min-height: 360px;
        background-position: right -60px center;
    }
    .hero-banner__overlay {
        background: linear-gradient(
            to right,
            rgba(232,248,245,0.98) 0%,
            rgba(232,248,245,0.95) 50%,
            rgba(232,248,245,0.70) 70%,
            transparent 100%
        );
    }
    .hero-banner__content { max-width: 420px; }

    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .featured-products-scroll { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .offers-grid { grid-template-columns: repeat(2, 1fr); }

    /* Consultation CTA */
    .consultation-cta__layout { grid-template-columns: 240px 1fr; }

    /* Product */
    .product-archive__layout { grid-template-columns: 1fr; }
    .product-archive__sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100vh;
        background: var(--color-white);
        box-shadow: var(--shadow-xl);
        z-index: 1001;
        overflow-y: auto;
        padding: var(--space-6) var(--space-5);
        transition: transform var(--transition-base) ease, visibility var(--transition-base);
        visibility: hidden;
    }
    .product-archive__sidebar.active {
        transform: translateX(320px);
        visibility: visible;
    }
    .product-archive__sidebar .widget,
    .product-archive__sidebar .filter-widget {
        border: none;
        padding: 0;
        margin-bottom: var(--space-6);
        box-shadow: none;
    }
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: var(--space-4) !important; }
    .single-product-layout { grid-template-columns: 1fr; gap: var(--space-8); }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
    .footer-brand { grid-column: 1 / -1; }
    .mobile-bottom-nav { display: flex; }
    .site-footer { padding-bottom: 60px; } /* Clearance for fixed mobile bottom nav */
    .whatsapp-float { bottom: 80px; }
}

/* ≤768px — Mobile */
@media (max-width: 768px) {
    :root { --container-pad: 1rem; }

    /* Typography */
    .section-title { font-size: var(--text-xl); }

    /* Hero — on mobile use strong overlay so text is always readable */
    .hero-banner {
        padding: 40px 0 36px;
        min-height: 320px;
        background-position: right -120px center;
    }
    .hero-banner__overlay {
        background: linear-gradient(
            to right,
            rgba(232,248,245,0.99) 0%,
            rgba(232,248,245,0.97) 55%,
            rgba(232,248,245,0.85) 80%,
            rgba(232,248,245,0.60) 100%
        );
    }
    .hero-banner__content { max-width: 100%; }
    .hero-banner__title { font-size: var(--text-3xl); }
    .hero-banner__subtitle { font-size: var(--text-sm); max-width: 100%; }
    .hero-banner__cta { flex-direction: column; align-items: flex-start; }
    .hero-banner__trust { display: none; }

    .categories-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
    .category-card { padding: var(--space-4) var(--space-3); }
    .category-card__icon { width: 52px; height: 52px; font-size: 22px; }

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

    .testimonials-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .offers-grid { grid-template-columns: 1fr; }

    .consultation-cta__layout { grid-template-columns: 1fr; }
    .consultation-cta__image { display: none; }
    .consultation-cta__body { padding: var(--space-8) var(--space-5); }
    .consultation-cta__features { flex-wrap: wrap; gap: var(--space-4); }
    .consultation-cta__buttons { flex-direction: column; align-items: flex-start; }

    /* Products */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .footer-trust-bar__grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom__inner { flex-direction: column; text-align: center; gap: var(--space-3); }

    /* Header top bar — hide on mobile */
    .header-top-bar { display: none; }
}

/* ≤480px — Small Mobile */
@media (max-width: 480px) {
    .categories-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
    .category-card { padding: var(--space-3) var(--space-2); }
    .category-card__icon { width: 44px; height: 44px; font-size: 20px; }
    .category-card__count { display: none; }

    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-2) !important; }

    .hero-banner { padding: 36px 0 48px; }
    .hero-banner__badge { font-size: 10px; }

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

    .whatsapp-float__btn { width: 48px; height: 48px; font-size: 24px; }
}