/* ============================================================
   TecnoSfera – Responsive Stylesheet (Mobile-First Additions)
   ============================================================ */

/* ------ Laptop: 992px - 1199px ------ */
@media (max-width: 1199px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .value-props-grid { gap: var(--space-3); }
    .hero-headline { font-size: 2.5rem; }
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
    .footer-col:first-child { grid-column: 1 / -1; }
    .about-two-col { gap: var(--space-4); }
    .checkout-layout { grid-template-columns: 1fr 1fr; }
    .progress-line { width: 50px; }
}

/* ------ Tablet: 768px - 991px ------ */
@media (max-width: 991px) {
    :root {
        --space-8: 64px;
    }

    /* Header */
    .main-nav { display: none; }
    .hamburger-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--text-primary); transition: background var(--transition-fast); }
    .hamburger-btn:hover { background: var(--bg-secondary); }
    .hamburger-btn svg { width: 22px; height: 22px; }

    /* Hero */
    .hero-section { min-height: 70vh; }
    .hero-inner { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .hero-headline { font-size: 2.2rem; }
    .hero-image-wrap { height: 55vh; }

    /* Grids */
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .products-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .value-props-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }

    /* Catalog */
    .catalog-layout { grid-template-columns: 1fr; }
    .filter-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 85vw; max-width: 360px; border-radius: 0; z-index: 1300; transform: translateX(-100%); transition: transform var(--transition); overflow-y: auto; }
    .filter-sidebar.open { transform: translateX(0); }

    /* Product page */
    .product-main { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .product-title { font-size: 1.5rem; }

    /* About */
    .about-two-col { grid-template-columns: 1fr; }
    .about-img { order: -1; }
    .about-img img { height: 320px; }
    .values-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .process-steps { grid-template-columns: 1fr; gap: var(--space-3); }
    .process-steps::before { display: none; }

    /* Promo banner */
    .promo-grid { grid-template-columns: 1fr 1fr; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .footer-col:first-child { grid-column: 1 / -1; }

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

    /* Cart */
    .cart-layout { grid-template-columns: 1fr; }
    .order-summary-card { position: static; }

    /* Checkout */
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-progress { gap: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }
    .progress-label { display: none; }
    .progress-line { width: 32px; }

    /* Deal card */
    .deal-card-featured { grid-template-columns: 1fr; }
    .deal-card-img { max-height: 280px; }
}

/* ------ Mobile Large: 576px - 767px ------ */
@media (max-width: 767px) {
    :root {
        --space-8: 48px;
        --space-7: 48px;
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.7rem; }
    h3 { font-size: 1.35rem; }

    /* Hero - stacked */
    .hero-section { min-height: unset; padding: 0; }
    .hero-inner { grid-template-columns: 1fr; gap: 0; padding: 0; }
    .hero-image-wrap {
        height: 50vw;
        min-height: 260px;
        border-radius: 0;
        order: -1;
        max-height: 360px;
    }
    .hero-image-wrap img { border-radius: 0; }
    .hero-content {
        padding: var(--space-5) var(--space-3);
        align-items: center;
        text-align: center;
    }
    .hero-headline { font-size: 2rem; max-width: 100%; }
    .hero-sub { max-width: 100%; }
    .hero-buttons { justify-content: center; }
    .hero-trust { justify-content: center; }

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

    /* Promo */
    .promo-grid { grid-template-columns: 1fr; }
    .promo-card { padding: var(--space-4); }

    /* Value props */
    .value-props-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

    /* Product page */
    .product-main { grid-template-columns: 1fr; gap: var(--space-3); }
    .tab-btn { padding: 12px 16px; font-size: 0.9rem; }

    /* Cart */
    .cart-item { flex-wrap: wrap; gap: var(--space-2); }
    .cart-item-actions { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }

    /* Newsletter form */
    .newsletter-form { flex-direction: column; border-radius: var(--radius-md); }
    .newsletter-input { border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .newsletter-btn { border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 14px; }

    /* Header */
    .header-actions { gap: 12px; }

    /* Section header flex */
    .section-header-flex { flex-direction: column; align-items: flex-start; }

    /* About */
    .values-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    .footer-col:first-child { grid-column: 1 / -1; }

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

    /* Deals hero */
    .countdown-box { width: 60px; }
    .countdown-num { font-size: 1.2rem; }

    /* Catalog */
    .catalog-head { flex-direction: column; align-items: flex-start; }
}

/* ------ Mobile Small: below 576px ------ */
@media (max-width: 575px) {
    :root {
        --space-8: 40px;
        --space-7: 40px;
    }

    body { font-size: 0.9rem; }
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.5rem; }

    .container { padding: 0 16px; }

    /* Products to single column on very small */
    .products-grid { grid-template-columns: 1fr; }
    .categories-grid { grid-template-columns: 1fr 1fr; }

    /* Hero */
    .hero-headline { font-size: 1.7rem; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; text-align: center; }

    /* Scroll row compact */
    .scroll-row .product-card { flex: 0 0 220px; }
    .scroll-btn-prev { left: -8px; }
    .scroll-btn-next { right: -8px; }

    /* Scroll top btn */
    .scroll-top-btn { bottom: 20px; right: 20px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; }
    .footer-col:first-child { grid-column: auto; }

    /* About stats */
    .stat-number { font-size: 2rem; }
    .process-step { flex-direction: column; align-items: flex-start; }

    /* Checkout progress */
    .checkout-progress { justify-content: flex-start; padding: var(--space-3) 0; }
    .progress-line { width: 20px; }

    /* Tab btns */
    .product-tabs-nav { overflow-x: auto; }
    .tab-btn { white-space: nowrap; padding: 12px 16px; }

    /* Qty selector */
    .cart-item-actions { flex-wrap: wrap; }

    /* deals grid */
    .products-grid-4 { grid-template-columns: 1fr 1fr; }

    /* Announcement */
    .announcement-bar { font-size: 0.72rem; height: auto; padding: 8px; }
}

/* ------ Print ------ */
@media print {
    .site-header, .announcement-bar, .site-footer, .scroll-top-btn, .mobile-overlay, .mobile-nav { display: none !important; }
    body { font-size: 12pt; }
    .container { max-width: 100%; padding: 0; }
}