/* ============================================
   Responsive Styles - Thiên Long Shop
   ============================================ */

/* Tablet Landscape */
@media (max-width: 1200px) {
    :root {
        --tl-container: 100%;
    }
    
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .product-detail-3col {
        grid-template-columns: 360px 1fr 240px;
        gap: var(--tl-space-lg);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .product-detail-layout {
        gap: var(--tl-space-xl);
    }
    
    .product-detail-3col {
        grid-template-columns: 1fr 1fr;
    }
    
    .product-coupon-sidebar {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .header-actions {
        gap: var(--tl-space-md);
    }
    
    .nav-menu-item > a {
        padding: 12px 10px;
        font-size: 12px;
    }

    /* Mega menu adjustments for tablets */
    .mega-dropdown-inner {
        padding: 20px 16px;
        gap: 16px;
    }
    
    .mega-dropdown-banner {
        width: 240px;
    }
    
    .mega-dropdown-content {
        gap: 20px;
    }
}

/* Tablet Portrait */
@media (max-width: 768px) {
    :root {
        --tl-container-padding: 12px;
    }
    
    /* Header */
    .header-search { max-width: none; order: 3; flex-basis: 100%; }
    .header-inner { flex-wrap: wrap; position: relative; }
    .header-hotline { display: none; }
    .action-text { display: none; }
    .mobile-menu-toggle {
        display: flex;
        position: absolute;
        right: 10px;
        top: 14px;
        transform: none;
    }
    
    /* Navigation */
    .main-navigation { display: none; }
    
    /* Products */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    
    /* Categories - horizontal scroll on mobile */
    .quick-categories-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding-bottom: 8px;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .quick-categories-grid::-webkit-scrollbar { display: none; }
    .quick-category-item { width: 70px; min-width: 70px; flex-shrink: 0; }
    .category-circle { width: 56px; height: 56px; }
    .category-circle i { font-size: 22px; }
    
    /* Flash Sale */
    .flash-sale-title { flex-wrap: wrap; }
    
    /* Promo */
    .promo-grid { grid-template-columns: 1fr; }
    .promo-banner-image { height: 160px; }
    
    /* Blog */
    .blog-layout-tl { grid-template-columns: 1fr; gap: 24px; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: var(--tl-space-md); }
    
    /* Footer */
    .footer-features { grid-template-columns: repeat(2, 1fr); gap: var(--tl-space-md); }
    .footer-grid { grid-template-columns: 1fr; gap: var(--tl-space-xl); }
    
    /* Sections */
    section { padding: var(--tl-space-xl) 0; }
    .section-title { font-size: var(--tl-font-size-lg); }
    .section-tabs { gap: 4px; }
    .tab-btn { padding: 6px 12px; font-size: var(--tl-font-size-xs); }
    
    /* Product Detail */
    .product-detail-layout { grid-template-columns: 1fr; }
    .product-detail-3col { grid-template-columns: 1fr; }
    .product-gallery { position: static; }
    .product-coupon-sidebar { grid-template-columns: 1fr; }
    .product-buy-buttons { grid-template-columns: 1fr; }
    
    /* Blog archive & single */
    .blog-archive-layout { grid-template-columns: 1fr; }
    .single-layout { grid-template-columns: 1fr; }
    .blog-sidebar, .single-sidebar { position: static; }
    .blog-list-card { flex-direction: column; }
    .blog-list-card-image { width: 100%; height: 200px; }
    
    /* Side actions */
    .product-side-actions { display: none; }
}

/* Mobile */
@media (max-width: 480px) {
    .header-inner { gap: var(--tl-space-sm); }
    .header-cart .action-text { display: none; }
    
    .quick-categories-grid { gap: 12px; }
    .quick-category-item { width: 60px; }
    .category-circle { width: 48px; height: 48px; }
    .category-circle i { font-size: 18px; }
    .category-name { font-size: 10px; }
    
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-info { padding: 10px; }
    .product-name { font-size: 12px; min-height: auto; }
    .price-current { font-size: var(--tl-font-size-base); }
    .price-original { font-size: var(--tl-font-size-xs); }
    .product-quickview-btn { padding: 7px; font-size: 10px; }
    
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card-image { height: 150px; }
    
    .footer-features { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    
    .floating-actions { bottom: 16px; right: 16px; }
    .float-btn { width: 42px; height: 42px; font-size: 18px; }
    
    .countdown-value { font-size: var(--tl-font-size-sm); padding: 3px 6px; min-width: 30px; }
    
    .product-summary .price-current { font-size: var(--tl-font-size-xl); }
    .product-quantity-wrapper { flex-wrap: wrap; }
    .product-buy-buttons { grid-template-columns: 1fr; }
    
    /* Hide discount percentage in small cards */
    .price-discount { display: none; }
}