/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first, principal foco: celular
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .hero-section { grid-template-columns: 1fr; }
  .banner-sidebar { flex-direction: row; max-height: 160px; }
  .sidebar-banner { min-height: 75px; }
  .products-grid { grid-template-columns: repeat(4, 1fr); }
  .category-icons-grid { grid-template-columns: repeat(6, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .trust-items { grid-template-columns: repeat(2, 1fr); }
  .category-page-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Mobile Grande (≤ 768px) ── */
@media (max-width: 768px) {
  :root {
    --font-size-xl: 17px;
    --font-size-2xl: 20px;
    --header-h: 50px;
    --nav-h: 38px;
  }

  /* Header */
  .header-main { gap: 8px; padding: 0 10px; }
  .logo-text span { display: none; }
  .logo-text strong { font-size: 13px; }
  .logo-icon { width: 30px; height: 30px; font-size: 16px; }
  .header-search { max-width: none; }
  .search-btn span { display: none; }
  .search-btn { padding: 0 14px; }
  .header-search input { padding: 8px 12px; font-size: 13px; }
  .header-icons .header-icon span { display: none; }
  .header-icon { padding: 4px 8px; }
  .announcement-bar { font-size: 10px; padding: 4px 12px; }

  /* Nav */
  .category-nav-inner { padding: 0 10px; }
  .nav-link { padding: 0 10px; font-size: 12px; }

  /* Hero */
  .banner-sidebar { display: none; }
  .hero-section { padding: 0 10px; margin: 8px auto; }
  .banner-slider-wrap { border-radius: var(--radius); }

  /* Category icons — mantém 6 cols mas diminui o tamanho */
  .category-icons-grid { grid-template-columns: repeat(6, minmax(0, 90px)); gap: 4px; }
  .cat-icon-circle { width: 44px; height: 44px; }
  .cat-icon-circle i { font-size: 18px; }
  .cat-icon-label { font-size: 10px; }

  /* Flash sale */
  .flash-product-card { width: 148px; }
  .flash-sale-section { padding: 14px 0; }
  .flash-sale-header { gap: 8px; }
  .flash-title h2 { font-size: 16px; }
  .time-box { width: 38px; height: 38px; font-size: 15px; }
  .countdown-label { font-size: 12px; }

  /* Products */
  .products-section { padding: 14px 0; }
  .products-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .section-header { margin-bottom: 10px; }
  .section-title { font-size: 15px; }

  /* Category page */
  .category-page-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .category-page-title { font-size: 18px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { order: -1; }
  .footer-col:nth-child(2),
  .footer-col:nth-child(3) { display: none; }
  .trust-items { grid-template-columns: repeat(2, 1fr); }
  .float-action { right: 12px; bottom: 60px; }

  /* Container padding reduzido */
  .container { padding: 0 10px; }
  .category-icons-section .container,
  .flash-sale-section .container,
  .products-section .container { padding: 0 10px; }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  :root {
    --header-h: 48px;
    --nav-h: 36px;
  }

  .container { padding: 0 8px; }

  /* Header mais compacto */
  .header-main { padding: 0 8px; gap: 6px; }
  .logo-text strong { font-size: 12px; }

  /* Banner */
  .banner-slide { padding: 16px 16px; }
  .banner-slide-content h2 { font-size: 16px; }
  .banner-slide-content p { font-size: 12px; margin-bottom: 10px; }
  .banner-cta { padding: 8px 16px; font-size: 12px; }
  .banner-dots { bottom: 8px; }

  /* Flash sale */
  .flash-products { gap: 8px; }
  .flash-product-card { width: 136px; }
  .flash-product-card .flash-product-info { padding: 6px 8px; }
  .flash-price { font-size: 14px; }
  .flash-discount-badge { font-size: 10px; padding: 1px 5px; }
  .flash-sale-header { gap: 6px; flex-wrap: wrap; }
  .time-box { width: 34px; height: 34px; font-size: 13px; }
  .colon { font-size: 17px; }
  .countdown-label { display: none; } /* economiza espaço no celular pequeno */

  /* Category icons — 3 por linha em mobile, centralizado */
  .category-icons-grid { grid-template-columns: repeat(3, minmax(0, 100px)); gap: 4px; }
  .cat-icon-circle { width: 40px; height: 40px; }
  .cat-icon-circle i { font-size: 16px; }
  .category-icons-section { padding: 12px 0; }

  /* Product grid: 2 colunas — padrão celular */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .category-page-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .products-section { padding: 12px 0; }
  .section-title { font-size: 14px; }

  /* Trust bar simplificada */
  .trust-items { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .trust-icon { width: 36px; height: 36px; font-size: 16px; }
  .trust-text strong { font-size: 12px; }
  .trust-text span { font-size: 10px; }

  /* Footer */
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 6px; }
  .newsletter-form { flex-direction: column; }
  .footer-links-section { padding: 20px 0; }

  /* Busca */
  .section-header { gap: 6px; }
  .ver-todos-btn { font-size: 11px; }
}

/* ── Mobile Pequeno (≤ 360px) ── */
@media (max-width: 360px) {
  .products-grid { gap: 6px; }
  .category-page-grid { gap: 6px; }
  .flash-product-card { width: 128px; }
  .category-icons-grid { grid-template-columns: repeat(3, minmax(0, 90px)); gap: 2px; }
  .cat-icon-label { font-size: 9px; }
  .nav-link { padding: 0 8px; font-size: 11px; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Safe area (iPhone com notch) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .site-footer { padding-bottom: env(safe-area-inset-bottom); }
  .float-action { bottom: calc(60px + env(safe-area-inset-bottom)); }
}