/* =========================================================================
   HAPPY TASTE — RESPONSIVIDADE
   Base (style.css) = celular. Aqui ficam os ajustes para telas maiores.
   ========================================================================= */

/* ---------- Celulares pequenos ---------- */
@media (max-width: 400px) {
  .store-switch__btn { padding-right: 8px; font-size: 0.7rem; gap: 4px; }
  .store-switch__btn img { width: 26px; height: 26px; }
  .btn--cart { padding: 8px 10px; }
  .navbar__actions { gap: 6px; }
  .nav-toggle { width: 40px; height: 40px; }
}

@media (max-width: 359px) {
  .store-switch__btn span { display: none; }
  .store-switch__btn { padding: 4px; }
  .logo__text { font-size: 1rem; }
  .card:not(.card--compact):not(.card--sobremesas) { grid-template-columns: 94px 1fr; }
  .card:not(.card--compact):not(.card--sobremesas) .card__media { width: 84px; height: 84px; }
  .grid--bebidas, .grid--sobremesas { gap: 10px; }
  .hero__stats { grid-template-columns: 1fr; }
  .pm__add span { display: none; }
}

/* ---------- Celular grande ---------- */
@media (min-width: 480px) and (max-width: 639px) {
  .card:not(.card--compact):not(.card--sobremesas) { grid-template-columns: 144px 1fr; }
  .card:not(.card--compact):not(.card--sobremesas) .card__media { width: 134px; height: 134px; }
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .container { padding-inline: 24px; }
  .btn--cart__label { display: inline; }

  /* cards verticais em 2 colunas */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .card { grid-template-columns: 1fr; }
  .card__media { aspect-ratio: 4 / 3; width: 100%; height: auto; margin: 0; border-radius: 0; }
  .card__media .badge { left: 10px; top: 10px; font-size: 0.7rem; padding: 5px 10px; }
  .card__media .discount { right: 10px; top: 10px; bottom: auto; font-size: 0.8rem; }
  .card__body { padding: 16px; gap: 6px; }
  .card__title { font-size: 1.08rem; }
  .card__desc { font-size: 0.88rem; }
  .grid--bebidas, .grid--sobremesas { grid-template-columns: repeat(3, 1fr); }

  .offers__grid { grid-template-columns: repeat(2, 1fr); }
  .features, .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .info-cards { grid-template-columns: 1fr 1fr; }
  .info-cards .info-card:first-child { grid-column: span 2; }
  .footer__inner { grid-template-columns: 2fr 1fr 1fr; }
  .hero__stats { display: flex; flex-wrap: wrap; }
  .hero__stats li { white-space: nowrap; }

  /* modais centralizados */
  .modal__dialog {
    left: 50%; top: 50%; bottom: auto; right: auto;
    width: min(560px, calc(100vw - 48px)); max-height: 90vh; max-height: 90dvh;
    border-radius: var(--radius-lg);
    transform: translate(-50%, -46%) scale(0.96); opacity: 0;
    transition: transform 0.3s var(--ease), opacity 0.25s;
  }
  .modal.is-open .modal__dialog { transform: translate(-50%, -50%); opacity: 1; }
  .modal__dialog--small { width: min(440px, calc(100vw - 48px)); }
  .modal__dialog--checkout { width: min(640px, calc(100vw - 48px)); }
}

/* ---------- Notebook ---------- */
@media (min-width: 960px) {
  :root { --nav-h: 76px; }
  .section { padding: 90px 0; }

  /* navbar horizontal */
  .nav {
    position: static; inset: auto; padding: 0; background: none; border: 0;
    transform: none; opacity: 1; visibility: visible;
  }
  .nav__list { display: flex; gap: 4px; }
  .nav__link { position: relative; padding: 10px 14px; border: 0; }
  .nav__link::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
    background: var(--accent); transform: scaleX(0); transition: transform 0.25s var(--ease);
  }
  .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
  .nav-toggle { display: none; }
  .navbar__inner { gap: 12px; }
  .store-switch__btn { font-size: 0.85rem; }

  .hero { padding: calc(var(--nav-h) + 50px) 0 60px; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; }
  .other-store { margin-top: 44px; }
  .hero__inner { grid-template-columns: 1.05fr 1fr; gap: 48px; }
  .hero__actions .btn { flex: 0 0 auto; }
  .hero__float--1 { left: -30px; }
  .hero__float--2 { right: -20px; }

  .grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .grid--bebidas, .grid--sobremesas { grid-template-columns: repeat(4, 1fr); }

  /* cards premium maiores (trufado / pro max) */
  .grid--trufado, .grid--promax { grid-template-columns: repeat(2, 1fr); }
  .card--trufado, .card--promax { grid-template-columns: 44% 1fr; }
  .card--trufado .card__media, .card--promax .card__media { aspect-ratio: auto; height: 100%; min-height: 200px; }
  .card--trufado .card__body, .card--promax .card__body { padding: 22px; }
  .card--trufado .card__title, .card--promax .card__title { font-size: 1.25rem; }
  .card--trufado .card__desc, .card--promax .card__desc { -webkit-line-clamp: 3; }

  .offers__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .offer { grid-template-columns: 1fr 1fr; }
  .offer__media { aspect-ratio: auto; height: 100%; min-height: 260px; }
  .offer__body { padding: 24px; }

  .about__inner { grid-template-columns: 1fr 1.3fr; align-items: center; gap: 48px; }
  .features { grid-template-columns: 1fr; }
  .feature { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
  .feature__icon { grid-row: span 2; margin: 0; }

  .location__inner { grid-template-columns: 1.1fr 1fr; gap: 24px; }
  .info-cards { grid-template-columns: 1fr; }
  .info-cards .info-card:first-child { grid-column: auto; }
  .location__map, .map-placeholder { min-height: 360px; }
  .offers__grid:has(> .offer:only-child) { grid-template-columns: minmax(0, 620px); justify-content: center; }

  /* no desktop o carrinho fica no botão da navbar */
  .cart-bar { display: none !important; }
  body.has-cart .footer { padding-bottom: 20px; }

  /* modal do produto lado a lado */
  .modal__dialog--product { width: min(920px, calc(100vw - 64px)); height: min(640px, 90vh); flex-direction: row; }
  .pm__media { aspect-ratio: auto; max-height: none; width: 46%; height: 100%; }
  .pm__body { width: 54%; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .grid--gourmet, .grid--acai, .grid--gold, .grid--vitaminas, .grid--caldos { grid-template-columns: repeat(4, 1fr); }
  .grid--bebidas, .grid--sobremesas { grid-template-columns: repeat(5, 1fr); }
  .grid--trufado, .grid--promax { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Dispositivos sem hover (toque) ---------- */
@media (hover: none) {
  .card:hover, .offer:hover, .feature:hover, .btn:hover { transform: none; }
  .card:hover .card__media img, .offer:hover .offer__media img { transform: none; }
}

@media (max-width: 479px) {
  .other-store { padding: 12px; gap: 12px; }
  .other-store img { width: 48px; height: 48px; }
  .other-store__cta { font-size: 0; }
  .other-store__cta::after { content: "→"; font-size: 1.5rem; }
}