/* ==========================================================================
   Oli Locadora — responsive.css
   Breakpoints: 1024, 900, 768, 560, 400
   ========================================================================== */

/* ---- Desktop menor / tablet grande (<= 1024px) ---- */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  #home-featured { grid-template-columns: repeat(3, 1fr); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .differentials-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .process-grid .process-step::after { display: none; }
}

/* ---- Tablet (<= 900px): ativa menu mobile ---- */
@media (max-width: 900px) {
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: var(--color-surface); color: var(--color-text);
  }
  .menu-toggle i { width: 24px; height: 24px; }

  .primary-nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 84vw);
    background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: calc(var(--header-h) + 20px) 24px 30px; gap: 6px;
    transform: translateX(100%); box-shadow: var(--shadow-lg); z-index: 100; overflow-y: auto;
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav a { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 1.02rem; margin: 0; }
  .primary-nav a:hover { background: var(--color-surface); }

  /* Barra de categorias vira lista rolável dentro do menu; escondida na barra */
  .category-bar { display: none; }
  .header-cta-desktop { display: none; }

  /* Categorias dentro do drawer mobile */
  .mobile-cats-block { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
  .mobile-cats-title { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); padding: 0 16px 8px; }
  .mobile-cats { display: flex; flex-direction: column; }
  .mobile-cats a { padding: 11px 16px; border-radius: var(--radius-sm); font-size: 0.96rem; color: var(--color-text); }
  .mobile-cats a:hover { background: var(--color-surface); color: var(--color-primary); }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split__media { order: -1; }
  .contact-layout { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; gap: 30px; }
  .product-blocks { grid-template-columns: 1fr; }

  /* Catálogo: filtros viram drawer */
  .catalog-layout { grid-template-columns: 1fr; }
  .filters-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: var(--radius-pill);
    border: 1px solid var(--color-border); background: #fff; font-weight: 600; font-size: 0.9rem;
  }
  .filters-toggle i { width: 18px; height: 18px; }
  .filters-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
    border-radius: 0; border: none; z-index: 106; transform: translateX(100%);
    overflow-y: auto; box-shadow: var(--shadow-lg); padding: 24px;
  }
  .filters-panel.is-open { transform: translateX(0); }
  .filters-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: var(--color-surface); position: absolute; top: 16px; right: 16px;
  }
  .filters-close i { width: 22px; height: 22px; }
}

/* ---- Mobile (<= 768px) ---- */
@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  #home-featured { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .brand-chip { width: 128px; height: 66px; padding: 0 14px; }
  .brand-chip img { max-height: 34px; max-width: 96px; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .brand__tag { display: none; }
  .hero { min-height: 460px; padding: 70px 0; }
  .topbar__group--contact { gap: 16px; }
  .product-card__actions { flex-direction: column; }
}

/* Esconde a barra superior de utilidades no celular (contatos ficam no rodapé e no WhatsApp flutuante) */
@media (max-width: 560px) {
  .topbar { display: none; }
}

/* ---- Mobile pequeno (<= 560px) ---- */
@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .products-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .category-grid { grid-template-columns: 1fr; }
  .feature-strip__grid { grid-template-columns: 1fr; }
  .differentials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .process-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .catalog-toolbar { flex-direction: column; align-items: stretch; }
  .catalog-toolbar__right { justify-content: space-between; }
  .footer-bottom { flex-direction: column; }
  .product-card__brand { font-size: 0.7rem; }
  .brand__logo { height: 40px; }
}

/* ---- Mobile bem pequeno (<= 400px) ---- */
@media (max-width: 400px) {
  .products-grid { grid-template-columns: 1fr; }
  #home-featured { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hero h1 { font-size: 2rem; }
  .header-search { right: 12px; }
}