/* ============================================================
   TechMartSE - Responsive Styles
   Version: 1.0.0
   ============================================================ */

/* Tablet Landscape (1024px)
   ============================================================ */
@media (max-width: 1024px) {
    :root {
        --font-size-5xl: 2.25rem;
        --font-size-4xl: 1.875rem;
        --font-size-3xl: 1.5rem;
    }

    .container { padding: 0 var(--space-lg); }

    /* Header */
    .header-inner { gap: var(--space-md); }
    .header-search { max-width: 400px; }

    /* Hide category dropdown on tablet */
    .search-category-select { display: none; }
    .search-form--header .search-field { padding-left: 1rem; }
    .search-field-icon { display: none; }

    /* Navigation */
    .primary-menu > li > a { padding: var(--space-md) var(--space-sm); font-size: var(--font-size-xs); }

    /* Categories */
    .categories-grid { grid-template-columns: repeat(3, 1fr); }

    /* Products */
    .products-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

    /* Promotions */
    .promotions-grid { grid-template-columns: repeat(2, 1fr); }
    .promotions-grid .promo-card:last-child { grid-column: 1 / -1; }

    /* News */
    .news-grid { grid-template-columns: 1fr; }
    .news-item { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

    /* Footer */
    .footer-widgets { grid-template-columns: 1fr 1fr; }

    /* Content with sidebar */
    .content-area.with-sidebar { grid-template-columns: 1fr 250px; gap: var(--space-xl); }

    /* Shop */
    .shop-layout { grid-template-columns: 220px 1fr; gap: var(--space-lg); }

    /* Single Product */
    .product-single { grid-template-columns: 1fr; gap: var(--space-xl); }
    .product-gallery { position: static; }

    /* Checkout */
    .checkout-grid { grid-template-columns: 1fr; }

    /* Account */
    .account-dashboard { grid-template-columns: 220px 1fr; gap: var(--space-lg); }
    .dashboard-stats { grid-template-columns: repeat(3, 1fr); }

    /* About */
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }

    /* Contact */
    .contact-layout { grid-template-columns: 1fr; }

    /* Auth */
    .auth-page-wrapper { grid-template-columns: 1fr; }
    .auth-sidebar { display: none; }

    /* Badges */
    .badges-grid { grid-template-columns: repeat(2, 1fr); }

    /* Post Grid */
    .post-grid { grid-template-columns: 1fr; }

    /* Related Posts */
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet Portrait (768px)
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.625rem;
        --font-size-3xl: 1.375rem;
        --font-size-2xl: 1.25rem;
        --header-height: 64px;
    }

    .container { padding: 0 var(--space-md); }

    /* Top Bar */
    .top-bar-left { display: none; }
    .top-bar-right { font-size: 11px; gap: var(--space-sm); }

    /* Header */
    .site-header { position: relative; }
    .header-inner { height: auto; padding: var(--space-sm) 0; flex-wrap: wrap; }
    .site-branding { flex: 1; }
    .site-title { font-size: var(--font-size-xl); }
    .header-search { max-width: 100%; flex-basis: 100%; order: 3; margin-top: var(--space-sm); }
    .header-actions { display: none; }

    /* Mobile Menu */
    .mobile-menu-toggle { display: flex; }
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .mobile-icons { display: flex; }
    .main-navigation { display: none; }
    .mobile-navigation.active + .main-navigation { display: block; }
    .mobile-navigation { display: none; }
    .mobile-navigation.active { display: block; }
    .primary-menu { flex-direction: column; }
    .primary-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding-left: var(--space-lg);
    }

    /* Hero */
    .carousel-slide { padding: var(--space-xl) 0; }
    .slide-content {
        grid-template-columns: 1fr;
        text-align: center;
        min-height: auto;
        gap: var(--space-lg);
    }
    .slide-image { display: none; }
    .slide-buttons { justify-content: center; }
    .carousel-btn { width: 36px; height: 36px; }

    /* Categories */
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
    .category-card { padding: var(--space-md); }
    .category-image { width: 80px; height: 80px; }

    /* Products */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }

    /* Promotions */
    .promotions-grid { grid-template-columns: 1fr; gap: var(--space-md); }
    .promotions-grid .promo-card:last-child { grid-column: auto; }
    .promo-card { min-height: auto; }

    /* News */
    .news-item { grid-template-columns: 1fr; }

    /* Newsletter */
    .newsletter-inner { grid-template-columns: 1fr; text-align: center; gap: var(--space-lg); }

    /* Content with sidebar */
    .content-area.with-sidebar { grid-template-columns: 1fr; }
    .widget-area { margin-top: var(--space-2xl); }

    /* Shop */
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { position: static; }
    .shop-toolbar { flex-direction: column; gap: var(--space-md); }
    .toolbar-left { width: 100%; text-align: center; }
    .toolbar-right { width: 100%; justify-content: center; }

    /* Single Product */
    .gallery-thumbnails { justify-content: center; }

    /* Product tabs */
    .woocommerce-tabs ul.tabs { flex-wrap: wrap; }
    .woocommerce-tabs ul.tabs li { flex: 1; min-width: 50%; }
    .woocommerce-tabs ul.tabs li a { text-align: center; padding: var(--space-sm); }

    /* Cart */
    .cart-actions { flex-direction: column; }
    .cart-actions-left, .cart-actions-right { width: 100%; }
    .coupon { flex-direction: column; }
    .coupon .input-text { width: 100%; }
    .cart_totals { max-width: 100%; }

    /* Account */
    .account-dashboard { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
    .account-nav ul { display: flex; flex-wrap: wrap; }
    .account-nav li { flex: 1; min-width: 50%; }
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); }

    /* About */
    .about-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .about-grid.reverse { direction: ltr; }
    .values-grid { grid-template-columns: 1fr 1fr; }
    .team-grid { grid-template-columns: 1fr 1fr; }

    /* Blog */
    .blog-categories-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-sm); }
    .filter-link { white-space: nowrap; }

    /* Related */
    .related-grid { grid-template-columns: 1fr; }

    /* Single post */
    .single-post .entry-title { font-size: var(--font-size-2xl); }

    /* Footer */
    .footer-widgets { grid-template-columns: 1fr; gap: var(--space-xl); }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links { justify-content: center; flex-wrap: wrap; }

    /* Search */
    .search-result-item { flex-direction: column; }

    /* Badges */
    .badges-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }

    /* CTA */
    .cta-buttons { flex-direction: column; align-items: center; }
}

/* Mobile (480px)
   ============================================================ */
@media (max-width: 480px) {
    :root {
        --font-size-5xl: 1.75rem;
        --font-size-4xl: 1.5rem;
        --font-size-3xl: 1.25rem;
        --font-size-2xl: 1.125rem;
        --space-3xl: 2rem;
        --space-2xl: 1.5rem;
    }

    section { padding: var(--space-2xl) 0; }
    .container { padding: 0 var(--space-sm); }

    /* Top Bar */
    .top-bar-shipping { display: none; }
    .top-bar-right { justify-content: center; width: 100%; }
    .language-switcher .lang-label { display: none; }
    .top-bar-currency { display: none; }

    /* Hero */
    .slide-title { font-size: var(--font-size-3xl); }
    .slide-subtitle { font-size: var(--font-size-sm); }
    .slide-buttons { flex-direction: column; align-items: center; }
    .slide-buttons .btn { width: 100%; max-width: 280px; }

    /* Categories */
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
    .category-card { padding: var(--space-sm); }
    .category-image { width: 64px; height: 64px; }
    .category-name { font-size: var(--font-size-sm); }

    /* Products */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
    .product-info { padding: var(--space-sm); }
    .product-title { font-size: var(--font-size-xs); }

    /* Product actions - always visible on mobile */
    .product-actions { transform: translateY(0); background: transparent; padding: var(--space-xs); }
    .action-btn {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
        background: rgba(255,255,255,0.9);
    }

    /* Promo cards */
    .promo-card { padding: var(--space-lg); }
    .promo-title { font-size: var(--font-size-xl); }

    /* Countdown */
    .countdown-item { min-width: 50px; padding: var(--space-xs) var(--space-sm); }
    .countdown-value { font-size: var(--font-size-xl); }

    /* Trust badges */
    .badges-grid { grid-template-columns: 1fr; }

    /* Newsletter */
    .newsletter-input-group { flex-direction: column; gap: var(--space-sm); }
    .newsletter-input { border-right: 2px solid var(--color-gray-200); border-radius: var(--radius-md); }
    .newsletter-submit { border-radius: var(--radius-md) !important; }

    /* Blog */
    .entry-title { font-size: var(--font-size-lg); }
    .entry-meta { flex-wrap: wrap; gap: var(--space-sm); }

    /* Single Product */
    .product-price-wrapper { font-size: var(--font-size-2xl); }
    .woocommerce-variation-add-to-cart,
    .product-add-to-cart .cart { flex-direction: column; }
    .quantity .qty { width: 100%; }

    /* Product tabs */
    .woocommerce-tabs ul.tabs li { min-width: 100%; }

    /* Checkout */
    .checkout-section { padding: var(--space-md); }

    /* Account nav */
    .account-nav li { min-width: 100%; }
    .dashboard-stats { grid-template-columns: 1fr; }
    .addresses-grid { grid-template-columns: 1fr; }

    /* Auth forms */
    .auth-form { padding: var(--space-md); }
    .form-row { grid-template-columns: 1fr; }

    /* About */
    .values-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr 1fr; }

    /* Page hero */
    .page-hero { padding: var(--space-2xl) var(--space-md); }
    .hero-title { font-size: var(--font-size-2xl); }

    /* 404 */
    .error-title { font-size: 5rem; }
    .error-actions { flex-direction: column; align-items: center; }

    /* Back to top */
    .back-to-top { bottom: 1rem; right: 1rem; width: 40px; height: 40px; }

    /* Cart table - card layout */
    .cart-table thead { display: none; }
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td {
        display: block;
    }
    .cart-table tr {
        padding: var(--space-md);
        margin-bottom: var(--space-md);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-md);
        background: var(--color-white);
    }
    .cart-table td {
        border: none;
        padding: var(--space-xs) 0;
        text-align: right;
    }
    .cart-table td::before {
        content: attr(data-title);
        float: left;
        font-weight: 600;
        color: var(--color-gray-700);
    }
    .product-remove { text-align: right !important; }
    .product-thumbnail img { width: 60px; height: 60px; margin: auto; }
    .product-name { text-align: left !important; }
    .product-name::before { display: none; }

    /* Shop sidebar */
    .shop-widget { padding: var(--space-md); }

    /* Order table */
    .orders-table thead { display: none; }
    .orders-table, .orders-table tbody, .orders-table tr, .orders-table td {
        display: block;
    }
    .orders-table tr {
        padding: var(--space-md);
        margin-bottom: var(--space-sm);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-md);
    }
    .orders-table td {
        border: none;
        padding: var(--space-xs) 0;
    }

    /* Section tabs */
    .section-tabs { flex-wrap: wrap; }
    .tab-btn { font-size: var(--font-size-xs); padding: 0.375rem 0.75rem; }

    /* Post grid */
    .post-grid { gap: var(--space-md); }
}