/* ============================================================
   RB Outfitx — Mobile Usability & Performance Optimization
   
   Solves:
   - Mobile header overflow / text-wrapping fixes
   - 60 FPS buttery-smooth scrolling on low-end devices
   - Compact touch-friendly buttons & lookbook grid
   ============================================================ */

@media (max-width: 860px) {
    /* ── Touch Optimization ── */
    a, button, .category-card, .product-card, .size-chip, .filter-btn, .hero-visual-card {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* ── Fixed Mobile Header Geometry (No wrapping, no collision) ── */
    .nav-container {
        padding: 0 1rem;
        height: 3.75rem;
        gap: 0.5rem;
    }

    .brand-logo-nav {
        gap: 0.5rem;
    }

    .brand-logo-nav .logo-img {
        width: 1.75rem;
        height: 1.75rem;
    }

    .brand-logo-nav span {
        font-size: 0.95rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .nav-actions {
        gap: 0.35rem;
    }

    .nav-icon-btn {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.85rem;
    }

    /* Hide long button text on mobile, keep clean WhatsApp icon */
    .nav-wa-btn {
        padding: 0.45rem 0.65rem;
    }

    .nav-wa-btn span {
        display: none;
    }

    .nav-wa-btn i {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    /* ── Hero Section on Mobile ── */
    .hero-section {
        padding: 2.75rem 1rem 2.5rem;
    }

    .hero-eyebrow {
        font-size: 0.75rem;
        margin-bottom: 0.65rem;
    }

    .hero-delivery-subtext {
        font-size: 0.75rem;
        margin-top: 0.85rem;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 100%;
        align-self: center;
        justify-content: center;
    }

    .hero-headline {
        font-size: clamp(1.85rem, 6.8vw, 2.35rem);
        line-height: 1.15;
        letter-spacing: -0.02em;
        margin-bottom: 0.85rem;
    }

    .hero-sub {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    /* Hero Buttons side-by-side on mobile */
    .hero-actions {
        display: flex;
        flex-direction: row;
        gap: 0.65rem;
        width: 100%;
        margin-bottom: 2rem;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-outline {
        flex: 1;
        padding: 0.75rem 0.6rem;
        font-size: 0.8125rem;
        justify-content: center;
        white-space: nowrap;
    }

    .hero-visual-grid {
        gap: 0.65rem;
    }

    .hero-visual-label {
        font-size: clamp(0.58rem, 2.3vw, 0.65rem);
        padding: 0.22rem 0.45rem;
        bottom: 0.45rem;
        left: 0.45rem;
        white-space: nowrap;
        letter-spacing: 0.02em;
        line-height: 1.2;
    }

    /* ── Sections Spacing ── */
    .category-section,
    .products-section,
    .features-section,
    .return-section {
        padding: 3.25rem 1rem;
    }

    .section-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1.75rem;
    }

    .section-title {
        font-size: 1.65rem;
    }

    .section-desc {
        font-size: 0.875rem;
    }

    /* ── Category Cards: Compact Horizontal Swipeable Carousel (<= 768px) ── */
    @media (max-width: 768px) {
        .category-grid {
            display: flex;
            flex-direction: row;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            gap: 0.75rem;
            margin-left: -1rem;
            margin-right: -1rem;
            padding: 0.25rem 1rem 0.65rem 1rem;
            scroll-padding: 0 1rem;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .category-grid::-webkit-scrollbar {
            display: none;
        }

        .category-card {
            flex: 0 0 56%;
            width: 56%;
            min-width: 56%;
            max-width: 235px;
            scroll-snap-align: start;
            scroll-snap-stop: normal;
        }

        .category-img-wrap {
            height: 245px;
            aspect-ratio: 4 / 5;
            width: 100%;
        }

        .category-img-wrap img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .category-info {
            padding: 0.65rem 0.75rem;
        }

        .category-title {
            font-size: 0.9rem;
            line-height: 1.25;
            margin-bottom: 0.15rem;
        }

        .category-sub {
            font-size: 0.75rem;
            line-height: 1.3;
        }

        .category-arrow {
            font-size: 0.8rem;
        }
    }

    /* ── Product Grid: 2 Columns ── */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem 0.6rem;
    }

    .product-details {
        padding: 0.75rem 0.6rem;
    }

    .product-title {
        font-size: 0.8125rem;
        line-height: 1.3;
        margin-bottom: 0.25rem;
    }

    .price-current {
        font-size: 0.9375rem;
    }

    .price-original {
        font-size: 0.75rem;
    }

    .size-selector-row {
        margin-bottom: 0.65rem;
    }

    .size-label {
        font-size: 0.625rem;
        margin-bottom: 0.25rem;
    }

    .size-chips {
        gap: 0.25rem;
    }

    .size-chip {
        min-width: 1.75rem;
        height: 1.65rem;
        font-size: 0.625rem;
        padding: 0 0.25rem;
    }

    .product-wa-btn {
        font-size: 0.75rem;
        padding: 0.55rem 0.4rem;
        gap: 0.35rem;
    }

    .product-wa-btn i {
        font-size: 0.85rem;
    }

    /* ── Compact Floating Action Buttons (No Blocking) ── */
    #floating-whatsapp {
        bottom: 1rem;
        right: 1rem;
        width: 3rem;
        height: 3rem;
    }

    #floating-whatsapp i {
        font-size: 1.5rem;
    }

    #floating-messenger {
        bottom: 4.5rem;
        right: 1rem;
        width: 2.6rem;
        height: 2.6rem;
    }

    #floating-messenger i {
        font-size: 1.25rem;
    }

    /* ── Hardware Acceleration & Smooth Scroll for Low-End Mobile ── */
    #products,
    #features,
    #return-policy,
    .footer {
        content-visibility: auto;
        contain-intrinsic-size: 0 450px;
    }
}