/* ============================================
   PIMBA AÍ — Responsive Breakpoints
   320, 375, 390, 414, 768, 1024, 1280, 1440
   ============================================ */

/* ---- Large Desktop (1440px+) ---- */
@media (min-width: 1440px) {
  .products-grid { gap: var(--space-6); }
}

/* ---- Desktop (1024px - 1279px) ---- */
@media (max-width: 1279px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- Tablet (768px - 1023px) ---- */
@media (max-width: 1023px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid--3 { grid-template-columns: repeat(2, 1fr); }

  .product-page__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .product-page__gallery {
    position: static;
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* ---- Mobile Large (max 768px) ---- */
@media (max-width: 768px) {
  :root {
    --header-height: var(--header-height-mobile);
  }

  .header__inner {
    height: var(--header-height-mobile);
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .header__logo img {
    height: 32px;
  }

  .header__logo-text {
    font-size: var(--text-lg);
  }

  /* Search: hidden by default, shown on toggle */
  .search-bar {
    display: none;
  }
  .search-bar.mobile-open {
    display: block;
    position: absolute;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--gray-200);
    max-width: 100%;
    z-index: var(--z-sticky);
  }
  .search-bar.mobile-open .search-bar__input {
    font-size: 16px; /* Prevent iOS zoom */
  }

  .header__search-toggle { display: block; }

  .header__channel-btn span { display: none; }
  .header__channel-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }

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

  .hero {
    padding: var(--space-8) var(--space-4) var(--space-10);
  }
  .hero__title { font-size: var(--text-3xl); }
  .hero__subtitle { font-size: var(--text-base); }
  .hero__search input {
    padding: var(--space-3) var(--space-4) var(--space-3) 44px;
    font-size: var(--text-base);
  }

  .banner__img { height: 180px; }
  .banner__overlay { padding: var(--space-5); }
  .banner__title { font-size: var(--text-2xl); }
  .banner { padding: 0 var(--space-3); }

  .section__title { font-size: var(--text-xl); }

  .main {
    padding: var(--space-5) var(--space-3) var(--space-16);
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-2);
  }
  .category-card { padding: var(--space-3) var(--space-2); }
  .category-card__icon { font-size: var(--text-2xl); }
  .category-card__name { font-size: var(--text-xs); }

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

  .product-page {
    padding: 0;
  }
  .product-page__grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .product-page__gallery .gallery__main {
    border-radius: 0;
    aspect-ratio: 4/3;
  }
  .product-page__details {
    padding: var(--space-5) var(--space-4);
  }
  .product-page__title { font-size: var(--text-2xl); }
  .product-page__price .price-current { font-size: var(--text-2xl); }

  .page-content {
    padding: var(--space-6) var(--space-4);
  }

  .share-panel {
    gap: var(--space-2);
  }
  .share-btn span {
    display: none;
  }
  .share-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
  }

  .toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    max-width: none;
  }

  .back-to-top {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
  }

  .channel-float {
    left: var(--space-4);
    bottom: var(--space-4);
    width: 48px;
    height: 48px;
  }

  body.has-channel-float .back-to-top {
    bottom: calc(var(--space-4) + 56px);
  }

  .filter-drawer__panel {
    max-height: 85vh;
  }
}

/* ---- Mobile Medium (max 480px) ---- */
@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .product-card__info {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
  .product-card__name { font-size: var(--text-sm); }
  .price-current { font-size: var(--text-lg); }
  .product-card__action {
    padding: var(--space-2);
    font-size: var(--text-xs);
  }

  .section--featured { padding: var(--space-4); }

  .hero__title { font-size: var(--text-2xl); }

  .breadcrumbs { font-size: var(--text-xs); }
}

/* ---- Mobile Small (max 375px) ---- */
@media (max-width: 375px) {
  .header__logo-text { font-size: var(--text-base); }

  .hero { padding: var(--space-6) var(--space-3) var(--space-8); }
  .hero__title { font-size: var(--text-xl); }

  .product-card__name { font-size: var(--text-xs); }
  .price-current { font-size: var(--text-base); }
  .price-old { font-size: var(--text-xs); }
}

/* ---- Extra Small (max 320px) ---- */
@media (max-width: 320px) {
  .products-grid { gap: var(--space-2); }
  .product-card__info { padding: var(--space-2); }
  .product-card__name {
    font-size: 0.72rem;
    -webkit-line-clamp: 1;
  }

  .header__inner { gap: 4px; }
  .header__logo-text { font-size: var(--text-sm); }
}

/* ---- Touch Devices ---- */
@media (hover: none) and (pointer: coarse) {
  .product-card:hover {
    transform: none;
    box-shadow: none;
  }
  .product-card:active {
    transform: scale(0.98);
  }
}

/* ---- Prefers reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Print ---- */
@media print {
  .header,
  .cat-nav,
  .hero,
  .footer,
  .back-to-top,
  .channel-float,
  .cookie-banner,
  .toast,
  .share-panel {
    display: none !important;
  }
  .main { padding: 0; }
  .product-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}