@media (max-width: 1024px) {
    .desktop-nav {
        display: none;
    }

    .menu-button {
        display: block;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
    }

    .main-nav {
        justify-content: space-between;
    }

    .header-search,
    .header-actions a:first-of-type {
        display: none;
    }

    .topbar-inner > span:nth-child(n + 3),
    .topbar-links {
        display: none;
    }

    .mobile-menu.is-open {
        position: absolute;
        top: 88px;
        left: 0;
        right: 0;
        display: grid;
        gap: 18px;
        padding: 20px 32px;
        border-bottom: 1px solid #244a5e;
        background: #02131e;
    }

    .trust-grid {
        grid-template-columns: repeat(5, 180px);
        overflow-x: auto;
        scrollbar-width: none;
    }

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

    .brand-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-brand {
        grid-column: span 3;
    }
}

/* Phase 12: keep All Products as a true responsive grid instead of the mobile product carousel. */
@media (max-width: 1024px) and (min-width: 601px) {
    #all-products .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .wrap,
    .section {
        width: calc(100% - 36px);
    }

    .promotional-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .promotional-card {
        min-height: clamp(220px, 38vw, 290px);
        padding: 28px;
    }

    .hero-foreground {
        right: -12%;
        width: 66vw;
        opacity: 0.78;
    }
}

@media (max-width: 600px) {
    body {
        padding-bottom: 67px;
    }

    .wrap,
    .section {
        width: calc(100% - 28px);
    }

    .topbar {
        display: none;
    }

    .main-nav {
        min-height: 68px;
    }

    .brand-logo {
        width: 110px;
    }

    .brand-logo strong {
        font-size: 21px;
    }

    .header-actions {
        gap: 15px;
        font-size: 18px;
    }

    .header-actions a:first-of-type {
        display: block;
    }

    .mobile-menu.is-open {
        top: 68px;
    }

    .hero {
        height: 535px;
    }

    .hero-overlay {
        background:
            linear-gradient(90deg, rgba(1, 8, 13, 0.84), rgba(1, 8, 13, 0.18));
    }

    .hero-copy {
        padding-top: 78px;
    }

    .eyebrow {
        font-size: 9px;
    }

    .hero h1 {
        max-width: 300px;
        font-size: 43px;
    }

    .hero-description {
        max-width: 270px;
        font-size: 12px;
    }

    .hero-buttons .button-outline {
        display: none;
    }

    .hero-foreground {
        right: -28%;
        width: 88vw;
        opacity: 0.65;
    }

    .hero-dots {
        left: 20px;
    }

    .trust-strip {
        padding-block: 10px;
    }

    .trust-grid {
        width: 100%;
        grid-template-columns: repeat(5, 112px);
        gap: 10px;
        padding-inline: 14px;
    }

    .trust-card {
        display: grid;
        padding: 12px 5px;
        border: 1px solid #21475a;
        border-radius: 8px;
        text-align: center;
    }

    .trust-card i {
        font-size: 22px;
    }

    .trust-card strong {
        font-size: 9px;
    }

    .trust-card small {
        font-size: 8px;
    }

    .section {
        padding-block: 34px;
    }

    .section-heading h2 {
        font-size: 23px;
    }

    .section-heading p {
        font-size: 10px;
    }

    .category-grid {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .category-card {
        min-width: calc(50% - 6px);
        scroll-snap-align: start;
    }

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

    .brand-grid a {
        min-height: 58px;
        border: 1px solid #183b4e;
        font-size: 17px;
    }

    .promotional-card {
        min-height: 190px;
        padding: 22px;
    }

    .promotional-shade {
        background: linear-gradient(90deg, rgba(1, 10, 15, 0.9), rgba(1, 10, 15, 0.1));
    }

    .promotional-copy h2 {
        max-width: 200px;
        font-size: 28px;
    }

    .product-grid {
        display: flex;
        overflow-x: auto;
    }

    .product-card {
        min-width: 72%;
    }

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

    .footer-brand {
        grid-column: span 2;
    }

    .footer-newsletter {
        grid-column: span 2;
    }

    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: 67px;
        border-top: 1px solid #274b5d;
        background: #020b11;
    }

    .mobile-bottom-nav a {
        display: grid;
        place-items: center;
        padding: 8px 0 5px;
        font-size: 17px;
    }

    .mobile-bottom-nav span {
        font-size: 8px;
    }

    .mobile-bottom-nav a:first-child {
        color: var(--gold);
    }
}


/* Phase 12: two All Products cards per row on phones. Existing Featured/New Arrivals behavior is unchanged. */
@media (max-width: 600px) {
    #all-products .section-heading {
        align-items: flex-end;
        gap: 10px;
    }
    #all-products .section-view-all {
        font-size: 9px;
        gap: 5px;
    }
    #all-products .product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
    }
    #all-products .product-card {
        min-width: 0;
        width: 100%;
    }
    #all-products .product-content {
        padding: 10px;
    }
    #all-products .product-card h3 {
        margin-bottom: 7px;
        font-size: 14px;
        line-height: 1.15;
    }
    #all-products .product-price {
        font-size: 10px;
    }
    #all-products .product-price del {
        display: block;
        margin: 0 0 2px;
    }
    #all-products .product-card-bottom {
        margin-top: 10px;
        font-size: 8px;
    }
    #all-products .product-icon {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
    #all-products .discount-badge {
        top: 6px;
        left: 6px;
        padding: 4px 6px;
        font-size: 8px;
    }
    #all-products .product-media > .product-icon {
        top: 6px;
        right: 6px;
    }
}