/* ==========================================================================
   AEROX RESPONSIVE STYLESHEET
   Desktop → Tablet → Mobile → iPhone 12/13/14 optimization
   ========================================================================== */

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   1. Large Desktop (≤1200px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .container { padding-left: 24px; padding-right: 24px; }

    .cat-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }

    .footer-grid { grid-template-columns: 1.5fr 0.9fr 0.9fr 1.2fr; gap: 32px; }

    .product-detail-container { gap: 32px; padding: 28px; }
}

/* --------------------------------------------------------------------------
   2. Tablets & Small Laptops (≤992px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

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

    .checkout-layout,
    #checkout-form {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .checkout-sidebar { order: -1; position: static; }

    /* Cart page stacks */
    .cart-layout { grid-template-columns: 1fr; }
    .summary-card { position: static; }

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

    /* Shop sidebar becomes inline block above grid */
    .shop-layout { grid-template-columns: 1fr; gap: 20px; }
    .filters-panel { position: static; }

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

/* --------------------------------------------------------------------------
   3. Small Tablets & Mobile (≤768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    :root { --navbar-height: auto; }

    .navbar { padding: 14px 0; }

    .nav-container {
        flex-direction: column;
        gap: 12px;
        padding: 0 16px;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 18px;
    }

    .hero { padding: 64px 0 56px; }

    .page-section { padding: 44px 0 64px; }
    .page-header { padding: 36px 0 4px; }

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

    .perks-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .perk { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }

    .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

    .form-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: span 1; }

    /* Full-page cart rows compact */
    .cart-page-item { grid-template-columns: 84px 1fr; row-gap: 12px; }
    .cpi-img { width: 84px; height: 84px; }
    .cpi-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-top: 1.5px dashed var(--border-hover);
        padding-top: 12px;
    }

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

    .cart-drawer { border-radius: 0; max-width: 100%; }
}

/* --------------------------------------------------------------------------
   4. iPhone 12/13/14 & modern mobile (≤430px)
      Logical viewport 390×844 with iOS safe areas
   -------------------------------------------------------------------------- */
@media screen and (max-width: 430px) {

    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .navbar {
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
    }

    .drawer-footer,
    .footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

    /* Prevent iOS auto-zoom on inputs */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

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

    .product-card { padding: 10px; border-radius: var(--radius-md); }
    .card-title { font-size: 0.86rem; -webkit-line-clamp: 2; }
    .price-current { font-size: 0.95rem; }
    .card-price-row { margin: 6px 0 10px; }
    .card-actions .btn { width: 100%; padding: 9px 10px; font-size: 0.78rem; }

    /* Touch targets ≥ 44px */
    .btn, .icon-btn, .qty-btn, .theme-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    .hero-stats { gap: 20px 28px; }
    .stat-num { font-size: 1.35rem; }

    .perks-grid { grid-template-columns: 1fr 1fr; }
    .perk { padding: 14px; }
    .perk-txt strong { font-size: 0.85rem; }

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

    .shop-toolbar .form-control { min-width: 100%; }
    .shop-toolbar select.form-control { min-width: 100%; }

    #search-suggestions-dropdown {
        max-height: 280px;
        left: 0; right: 0;
    }

    .pd-actions .btn { flex: 1 1 100%; }
    .product-detail-container { padding: 18px; }

    #checkout-form .card { padding: 18px; }

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

    .footer-bottom { flex-direction: column; text-align: center; }

    html, body { -webkit-overflow-scrolling: touch; }
}