/**
 * NIAL SPORTSWEAR - Responsive Design & Breakpoints
 * Mobile-First, Touch-Optimized, Tablet & Desktop Adaptations
 */

/* -------------------------------------------------------------------------- */
/* TABLETS & SMALL DESKTOPS (<= 1024px)                                       */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .desktop-nav {
        display: none;
    }
    
    .mobile-toggle-btn {
        display: flex;
    }
    
    .top-bar-left span:nth-child(2),
    .top-bar-left span:nth-child(3) {
        display: none;
    }

    .about-preview-grid,
    .product-detail-layout,
    .private-label-hero-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-preview-img {
        height: 380px;
    }

    .product-detail-gallery {
        position: static;
    }

    .cta-global-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .cta-global-actions {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }

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

/* -------------------------------------------------------------------------- */
/* PHONES & SMALL TABLETS (<= 768px)                                          */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }
    .section-sm {
        padding: 40px 0;
    }

    .top-bar {
        display: none; /* Hide top bar on mobile to prioritize screen estate */
    }

    .header-container {
        height: 68px;
    }

    .header-cta-btn {
        display: none; /* Mobile navigation drawer includes the primary quote CTA */
    }

    .hero-section {
        min-height: auto;
        padding: 70px 0 50px 0;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }

    .hero-trust-bar {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding-top: 25px;
    }

    .trust-item {
        gap: 8px;
    }
    .trust-text {
        font-size: 0.78rem;
    }

    .form-grid-2,
    .branding-elements-grid {
        grid-template-columns: 1fr;
    }

    .form-box {
        padding: 24px 18px;
    }

    .cta-global-actions {
        flex-direction: column;
        width: 100%;
    }
    .cta-global-actions .btn {
        width: 100%;
    }

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

    .footer-bottom-container {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }

    .floating-whatsapp {
        left: 16px;
        bottom: 20px;
    }
    .whatsapp-btn {
        width: 50px;
        height: 50px;
    }
    .whatsapp-icon {
        width: 26px;
        height: 26px;
    }
    .whatsapp-tooltip {
        display: none; /* Disable tooltip on touch screens */
    }
}

/* -------------------------------------------------------------------------- */
/* EXTRA SMALL PHONES (<= 480px)                                              */
/* -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .brand-name {
        font-size: 1.35rem;
    }
    .brand-sub {
        font-size: 0.65rem;
    }
    .brand-icon-mark {
        width: 36px;
        height: 36px;
    }

    .hero-trust-bar {
        grid-template-columns: 1fr;
    }

    .category-filter-bar {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 8px;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .filter-btn {
        flex-shrink: 0;
    }

    .product-grid,
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .about-preview-img {
        height: 280px;
    }
    
    .product-main-image-wrap {
        height: 320px;
    }
}