/* ==========================================================================
   Prime Automation — Responsive Styles
   Mobile-first refinements across breakpoints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large tablets / small desktops (≤ 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .features-strip { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .product-detail { gap: 36px; }
}

/* --------------------------------------------------------------------------
   Tablets (≤ 992px) — collapse the header into a drawer
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .header-search input { width: 120px; }

    .nav-toggle { display: flex; }

    .main-nav {
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        width: min(320px, 86vw);
        background: #fff;
        border-left: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        padding: 24px;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s var(--ease), visibility 0.3s;
        overflow-y: auto;
        z-index: 1001;
    }
    .main-nav.open { transform: translateX(0); visibility: visible; }
    .main-nav .nav-list { flex-direction: column; align-items: stretch; gap: 6px; }
    .main-nav .nav-link { display: flex; justify-content: space-between; padding: 13px 14px; font-size: 1.02rem; }
    .has-dropdown .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        padding: 0 0 0 12px;
        display: none;
    }
    .has-dropdown.open .dropdown { display: block; }
    .mobile-cta { display: block; margin-top: 20px; }

    .shop-layout { grid-template-columns: 1fr; }
    .filter-sidebar { display: none; }
    .filter-sidebar.open { display: block; }

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

/* --------------------------------------------------------------------------
   Phones (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .section { padding: 60px 0; }
    .hero { padding: 84px 0 96px; }

    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .blog-grid { grid-template-columns: 1fr; }

    .reviews-grid { grid-template-columns: 1fr; }
    .features-strip { grid-template-columns: 1fr 1fr; gap: 14px; }
    .feature-item { padding: 22px 16px; }

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

    .footer-top { grid-template-columns: 1fr; gap: 28px; }

    .hero-cta { flex-direction: column; align-items: center; }
    .hero-cta .btn { width: min(100%, 320px); }

    .newsletter-form { flex-direction: column; align-items: stretch; }
    .newsletter-form input { max-width: none; }
}

/* --------------------------------------------------------------------------
   Small phones (≤ 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .categories-grid { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .features-strip { grid-template-columns: 1fr; }

    .brand-tagline { display: none; }
    .header-actions { gap: 8px; }
    .header-search input { width: 90px; }
    .search-submit { padding: 7px 10px; font-size: 0.78rem; }

    .hero-stats { gap: 28px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-legal { justify-content: center; flex-wrap: wrap; }
}