/* ==========================================================================
   TechZone — Responsive breakpoints
   ========================================================================== */

/* ---- Large desktop tweak ---- */
@media (max-width: 1200px) {
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Tablet ---- */
@media (max-width: 992px) {
  section { padding: 44px 0; }

  .topbar-center { display: none; }

  .header-search { order: 3; max-width: 100%; flex: 1 1 100%; margin-top: 12px; }
  .site-header .container { flex-wrap: wrap; }
  .header-actions { gap: 18px; }

  .sub-nav .main-nav { display: none; }
  .nav-toggle { display: flex; }

  .hero-slide { grid-template-columns: 1fr; text-align: center; min-height: 0; padding: 32px 0; }
  .hero-copy { order: 2; max-width: 100%; margin: 0 auto; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-visual { order: 1; }
  .hero-visual img { max-width: 380px; }
  .hero-title { font-size: 28px; }
  .hero-nav { display: none; }

  .product-grid,
  .shop-product-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .reason-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }

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

  .shop-layout,
  .cart-layout,
  .news-layout,
  .contact-layout { grid-template-columns: 1fr; }

  .shop-sidebar,
  .cart-summary { position: static; }

  .pd-layout { grid-template-columns: 1fr; gap: 28px; }

  .support-cards { grid-template-columns: repeat(2, 1fr); }
  .contact-info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

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

  .newsletter-band { justify-content: center; text-align: center; }
  .newsletter-copy { flex-direction: column; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  section { padding: 36px 0; }

  .topbar .container { justify-content: center; }
  .topbar-left { display: none; }

  .site-header { padding: 12px 0; }
  .brand-logo { width: 36px; height: 36px; }
  .brand-name { font-size: 18px; }
  .brand-tag { display: none; }

  .header-actions { gap: 14px; }
  .header-action-link span { display: none; }

  .category-toggle span { display: none; }
  .category-panel { width: 240px; }

  .hero-slide { padding: 24px 0; }
  .hero-visual img { max-width: 260px; }
  .hero-title { font-size: 22px; }
  .hero-eyebrow { font-size: 11.5px; }
  .hero-desc { font-size: 13px; max-width: 300px; }
  .hero-copy { max-width: 100%; }
  .hero-dots { bottom: 14px; }

  .section-head-row { flex-direction: column; align-items: flex-start; }

  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .category-card { padding: 14px 8px; }
  .category-card .icon-wrap { width: 44px; height: 44px; }
  .category-card span { font-size: 11.5px; }

  .product-grid,
  .shop-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-body { padding: 10px 12px 12px; gap: 6px; }
  .product-name { font-size: 13px; min-height: 36px; }
  .product-price-row .price { font-size: 14.5px; }

  .news-grid { grid-template-columns: 1fr; }
  .news-list-grid { grid-template-columns: 1fr; }

  .promo-card { flex-direction: column; text-align: center; padding: 26px 20px; }
  .promo-card-body { max-width: 100%; }
  .promo-card-media { order: -1; }
  .promo-card-media img { width: 120px; height: 120px; }

  .reason-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }

  .newsletter-band { padding: 26px 20px; }
  .newsletter-form { flex-direction: column; max-width: 100%; }
  .newsletter-form button { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom .container { flex-direction: column; text-align: center; }

  .page-banner { padding: 24px 0; }
  .page-banner .container { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-banner h1 { font-size: 20px; }

  .breadcrumb {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .breadcrumb::-webkit-scrollbar { display: none; }

  .breadcrumb a,
  .breadcrumb .sep { flex-shrink: 0; }

  .breadcrumb .current {
    flex-shrink: 0;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .support-cards { grid-template-columns: 1fr; }

  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tbody tr { border-top: 1px solid var(--border-color); padding: 14px 16px; }
  .cart-table tbody td { padding: 6px 0; border-top: none; }
  .cart-product { margin-bottom: 6px; }

  .pd-actions-row { flex-direction: column; align-items: stretch; }
  .pd-actions-row .btn { width: 100%; }
  .pd-policies { grid-template-columns: 1fr; }

  .promo-hero h1 { font-size: 24px; }
  .countdown .box { min-width: 40px; }

  .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}