/**
 * iBest Store - Responsive Stylesheet
 * Optimized for Mobile-First, Tablets, Laptops & Desktops
 * Breakpoints: 320px, 375px, 480px, 768px, 1024px, 1280px, 1440px
 */

/* ==========================================================================
   1. LAPTOP & DESKTOP (1024px - 1440px)
   ========================================================================== */
@media (max-width: 1280px) {
    .container {
        max-width: 1140px;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: var(--spacing-md);
    }
}

/* ==========================================================================
   2. TABLET LANDSCAPE & BELOW (1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    :root {
        --spacing-lg: 1.5rem;
        --spacing-xl: 2.25rem;
        --spacing-2xl: 3.5rem;
    }

    .desktop-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .filter-sidebar {
        display: none;
    }

    .btn-filter-mobile {
        display: inline-flex;
    }

    .product-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .product-gallery {
        position: relative;
        top: 0;
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .hero-subtitle {
        margin: 0 auto var(--spacing-xl);
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-search-form {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-badges {
        max-width: 500px;
        margin: 0 auto;
    }

    .hero-image {
        order: -1;
    }

    .hero-product-card {
        max-width: 380px;
    }

    .whatsapp-cta {
        flex-direction: column;
        align-items: flex-start;
    }

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

/* ==========================================================================
   3. TABLET PORTRAIT & MOBILE (768px)
   ========================================================================== */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(64px + var(--safe-bottom));
    }

    .mobile-bottom-nav {
        display: flex;
    }

    .navbar-content {
        height: 62px;
    }

    /* Hide redundant top navbar icons on mobile since bottom bar provides direct access */
    .navbar-account,
    .navbar-wishlist {
        display: none;
    }

    .navbar-actions {
        gap: 0.35rem;
    }

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

    .product-card {
        border-radius: var(--radius-md);
    }

    .product-info {
        padding: 0.85rem;
    }

    .product-name {
        font-size: 0.925rem;
        margin-bottom: 0.35rem;
    }

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

    .btn-add-cart {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
        border-radius: var(--radius-sm);
    }

    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .category-card {
        padding: 1.25rem 0.75rem;
    }

    .category-icon {
        font-size: 2.25rem;
        margin-bottom: 0.5rem;
    }

    .category-name {
        font-size: 0.95rem;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .feature-card {
        padding: 1.25rem 0.85rem;
    }

    .feature-icon {
        font-size: 2rem;
    }

    .feature-title {
        font-size: 1rem;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form .btn {
        width: 100%;
    }

    .footer {
        padding-bottom: calc(var(--spacing-xl) + 70px);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

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

    .footer-bottom-links {
        justify-content: center;
    }

    /* Catalog Toolbar */
    .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .toolbar-left {
        justify-content: space-between;
        width: 100%;
    }

    .toolbar-right {
        width: 100%;
    }

    .sort-wrapper {
        width: 100%;
        justify-content: space-between;
    }

    .sort-select {
        flex: 1;
    }

    /* Product Detail on Mobile */
    .mobile-sticky-action-bar {
        display: flex;
    }

    .product-actions {
        flex-direction: column;
    }

    .product-price-large .price-current {
        font-size: 1.6rem;
    }

    .product-trust-strip {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .unit-inspection-grid {
        grid-template-columns: 1fr;
    }

    .unit-inspection-header {
        flex-direction: column;
    }

    .trust-item {
        padding: 0.65rem 0.85rem;
    }

    .tabs-header {
        border-bottom-width: 1px;
    }

    .tab-btn {
        padding: 0.65rem 1rem;
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   4. MOBILE COMPACT (480px)
   ========================================================================== */
@media (max-width: 480px) {
    .container {
        padding: 0 0.85rem;
    }

    .logo-text {
        font-size: 1.45rem;
    }

    .hero {
        padding: var(--spacing-lg) 0;
    }

    .hero-title {
        font-size: 1.85rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-cta {
        flex-direction: column;
    }

    .hero-cta .btn {
        width: 100%;
    }

    .hero-search-form {
        gap: 0.5rem;
        padding-left: 0.85rem;
    }

    .hero-search-submit {
        padding: 0.65rem 0.85rem;
    }

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

    .promo-banner {
        padding: var(--spacing-xl) 1rem;
        border-radius: var(--radius-lg);
        margin: var(--spacing-md) 0;
    }

    .promo-title {
        font-size: 1.5rem;
    }

    .promo-description {
        font-size: 0.95rem;
    }

    .whatsapp-cta-section {
        padding-bottom: var(--spacing-lg);
    }

    .whatsapp-cta {
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
    }

    .whatsapp-cta-button {
        width: 100%;
    }

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

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

    .shopping-steps {
        grid-template-columns: 1fr;
    }

    .search-container {
        margin-top: 2rem;
    }

    .search-input {
        font-size: 1rem;
    }

    .search-submit-btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.85rem;
    }

    .gallery-thumbnails {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
    }

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

    .pagination-number, .pagination-btn {
        font-size: 0.8rem;
    }

    .toast {
        bottom: calc(70px + var(--safe-bottom));
        right: 1rem;
        left: 1rem;
        max-width: calc(100vw - 2rem);
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   5. MOBILE SMALL (320px - 375px)
   ========================================================================== */
@media (max-width: 375px) {
    .container {
        padding: 0 0.65rem;
    }

    .products-grid {
        gap: 0.5rem;
    }

    .product-info {
        padding: 0.65rem;
    }

    .product-name {
        font-size: 0.85rem;
    }

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

    .badge {
        font-size: 0.65rem;
        padding: 1px 4px;
    }

    .product-wishlist {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    .btn-add-cart {
        padding: 0.5rem 0.5rem;
        font-size: 0.75rem;
    }

    .bottom-nav-label {
        font-size: 0.65rem;
    }
}

/* ==========================================================================
   6. TOUCH DEVICE MICRO-INTERACTIONS
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    .btn:active, .category-card:active, .product-card:active, .bottom-nav-item:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }

    .option-btn:active, .qty-btn:active {
        transform: scale(0.95);
    }
}