/* ============================================================
   TechStyle — Responsive
   ============================================================ */

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }
  .section { padding: 56px 0; }

  .header-search { display: none; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .sub-nav .main-nav { display: none; }
  .category-toggle span { display: none; }

  .hero-title { font-size: 38px; }
  .hero-media { width: 46%; }
  .hero-slide { min-height: 440px; }

  .category-grid { grid-template-columns: repeat(4, 1fr); }

  .promo-split { grid-template-columns: 1fr; }
  .promo-main { min-height: 300px; }

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

  .cta-banner { flex-direction: column; align-items: flex-start; }
  .cta-banner__media { width: 100%; opacity: 0.35; }

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

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }

  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { order: 2; position: static; }
  .shop-product-grid { grid-template-columns: repeat(2, 1fr); }

  .product-detail { grid-template-columns: 1fr; gap: 32px; }

  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }

  .contact-layout { grid-template-columns: 1fr; }
  .contact-info-grid { grid-template-columns: repeat(3, 1fr); }
  .support-grid { grid-template-columns: repeat(2, 1fr); }
  .promo-banner-grid { grid-template-columns: repeat(2, 1fr); }
  .value-props { grid-template-columns: 1fr; }
}

/* ---------- Small tablet / large mobile (≤768px) ---------- */
@media (max-width: 768px) {
  .section-title { font-size: 24px; }
  .hero-title { font-size: 32px; }
  .hero-desc { font-size: 14.5px; }
  .hero-slide { min-height: 400px; padding: 30px 0; }
  .hero-media { width: 55%; }

  .category-grid { grid-template-columns: repeat(3, 1fr); }

  .promo-card__content { max-width: 62%; }

  .bestseller-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .cta-banner__title { font-size: 21px; }

  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .article-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-about { max-width: none; }

  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }

  .contact-info-grid { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .promo-banner-grid { grid-template-columns: 1fr; }
  .promo-hero { padding: 40px 24px; }
  .promo-hero h1 { font-size: 24px; }
}

/* ---------- Mobile (≤560px) ---------- */
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .section { padding: 44px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }

  .site-header .container { height: 70px; gap: 12px; }
  .brand-logo { width: 36px; height: 36px; }
  .brand-name { font-size: 18px; }
  .brand-tag { font-size: 9px; }
  .header-actions { gap: 0; }
  .header-action-link span { display: none; }

  .sub-nav .container { height: 46px; }
  .category-toggle { padding: 9px 12px; }

  .breadcrumb .current { flex-basis: 100%; margin-top: 2px; }

  .hero-slide { min-height: 460px; align-items: flex-end; padding-bottom: 84px; }
  .hero-media { position: relative; width: 100%; top: 0; transform: none; margin-bottom: 22px; }
  .hero-media img { -webkit-mask-image: none; mask-image: none; border-radius: var(--radius-lg); }
  .hero-slide__content { max-width: 100%; }
  .hero-title { font-size: 26px; }
  .hero-nav { display: none; }

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

  .promo-main__content { padding: 28px 24px; max-width: 70%; }
  .promo-main__title { font-size: 21px; }
  .promo-card__content { max-width: 68%; padding: 22px; }
  .promo-card__title { font-size: 16px; }

  .bestseller-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product-card__body { padding: 12px; }
  .product-card__name { font-size: 13.5px; min-height: 38px; }
  .product-card__price { font-size: 15px; }

  .cta-banner { padding: 32px 24px; }
  .cta-banner__title { font-size: 19px; }
  .cta-features { gap: 14px 20px; }
  .cta-play { width: 52px; height: 52px; }

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

  .footer-grid { padding-bottom: 32px; }
  .site-footer { padding-top: 44px; }

  .shop-product-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; }
  .form-card { padding: 24px; }
  .form-grid-2 { 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 tr { border-bottom: 1px solid var(--border-soft); padding: 14px 0; }
  .cart-table td { border: none; padding: 4px 0; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}