/* ============================================================
   responsive.css — Media queries y ajustes por breakpoint
   TechZone Guatemala · Desarrollado por Péndulo (penduloabc.com)
   ============================================================ */

/* ── Tablet landscape (≤ 1100px) ───────────────────────────── */
@media (max-width: 1100px) {
  .grid-cats {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: span 2;
  }
}

/* ── Tablet portrait (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {

  :root {
    --header-h: auto;
  }

  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-3);
    height: auto;
  }

  .search-bar {
    max-width: 100%;
    order: 3;
    flex: 0 0 100%;
  }

  .site-nav {
    position: static;
  }

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

  .hero {
    height: 420px;
  }

  .hero__title {
    font-size: 40px;
  }

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

  .banner-offer {
    margin-inline: var(--space-4);
    height: auto;
    min-height: 220px;
  }

  .banner-offer__body {
    padding-inline: var(--space-6);
  }

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

  .mayoreo-img {
    height: 220px;
  }

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

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

  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-brand { grid-column: span 1; }

  .cart-drawer { width: 100%; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }
}

/* ── Mobile (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {

  .container {
    padding-inline: var(--space-4);
  }

  .hero {
    height: 360px;
  }

  .hero__sub { display: none; }

  .grid-cats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .grid-products,
  .grid-liq {
    grid-template-columns: 1fr;
  }

  .section {
    padding-block: var(--space-10);
  }

  .section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .trust-bar__grid {
    grid-template-columns: 1fr;
  }

  .header-actions .btn--wa span:last-child {
    display: none;
  }

  .banner-offer {
    margin-inline: var(--space-3);
  }

  .cart-drawer__head,
  .cart-drawer__body,
  .cart-drawer__foot {
    padding-inline: var(--space-4);
  }
}