/* ========================================================================== */
/*  CAMINHO DA SERRA — RESPONSIVE.CSS                                          */
/*  - Somente ajustes responsivos (sem mexer no layout desktop)                */
/*  - Breakpoints: 1180 / 980 / 760 / 520 / 380                                */
/* ========================================================================== */


/* ========================================================================== */
/*  0) Helpers (apenas no responsivo)                                          */
/* ========================================================================== */
@media (max-width: 760px) {
    .container { width: min(var(--container), calc(100% - 28px)); }
  }
  @media (max-width: 520px) {
    .container { width: min(var(--container), calc(100% - 22px)); }
  }
  
  
  /* ========================================================================== */
  /*  1) <= 1180px — notebooks / desktop menor                                   */
  /* ========================================================================== */
  @media (max-width: 1180px) {
    /* PRODUCT GRIDS */
    .products-grid--4 { grid-template-columns: repeat(3, 1fr); }
    .featured-grid { grid-template-columns: repeat(3, 1fr); }
  
    /* CATS */
    .cats__grid { gap: 14px; }
  
    /* HERO */
    .hero-shop__image { height: 380px; }
  }
  
  
  /* ========================================================================== */
  /*  2) <= 980px — tablet / quebra principal                                    */
  /* ========================================================================== */
  @media (max-width: 980px) {
  
    /* ------------------------------ */
    /* HEADER / NAV                   */
    /* ------------------------------ */
    .nav { display: none; }
    .icon-btn { display: inline-grid; place-items: center; }
    .header-cta { display: none; } /* CTA desktop some */
    .wa-fab { display: inline-flex; } /* CTA ícone aparece */
  
    .header__inner { padding: 12px 0; }
    .brand__img { height: 32px; }
  
    /* ------------------------------ */
    /* HERO SHOP                      */
    /* ------------------------------ */
    .hero-shop { padding: 14px 0 0; }
    .hero-shop__image { height: 280px; } /* você já tinha, mantém aqui */
  
    .hero-shop__nav {
      width: 40px;
      height: 40px;
      font-size: 20px;
    }
  
    /* ------------------------------ */
    /* CATS                           */
    /* ------------------------------ */
    .cats__grid {
      grid-template-columns: repeat(2, 1fr);
      padding: 14px;
    }
    .cat { padding: 14px 10px; }
    .cat__icon { width: 64px; height: 64px; }
    .cat__icon img { width: 30px; height: 30px; }
  
    /* ------------------------------ */
    /* SHOP HEAD                      */
    /* ------------------------------ */
    .shop-head {
      align-items: flex-start;
      flex-direction: column;
      gap: 10px;
    }
    .shop-head__left { gap: 10px; }
    .shop-head__wa { width: 100%; justify-content: space-between; }
  
    /* ------------------------------ */
    /* GRIDS                          */
    /* ------------------------------ */
    .products-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .products-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
  
    /* ------------------------------ */
    /* LIST (cards horizontais)       */
    /* ------------------------------ */
    .list-grid { grid-template-columns: 1fr; }
    .list-card { grid-template-columns: 160px 1fr auto; }
    .list-card__action { min-width: 150px; }
  
    /* ------------------------------ */
    /* BILHETERIA (já tem, reforça)   */
    /* ------------------------------ */
    .bilheteria__wrap { grid-template-columns: 1fr; }
    .bilheteria__right { padding: 12px; }
  
    /* ------------------------------ */
    /* FAQ + FOOTER (você já tinha)   */
    /* ------------------------------ */
    .faq-band__inner { grid-template-columns: 1fr; gap: 26px; }
    .footer-bar__inner { grid-template-columns: 1fr; }
    .footer-bar__right { text-align: center; }
  }
  
  
  /* ========================================================================== */
  /*  3) <= 760px — mobile grande                                                */
  /* ========================================================================== */
  @media (max-width: 760px) {
  
    /* ------------------------------ */
    /* HERO SHOP                      */
    /* ------------------------------ */
    .hero-shop__image { height: 240px; }
    .hero-shop__nav--prev { left: 10px; }
    .hero-shop__nav--next { right: 10px; }
    .hero-shop__dots { bottom: 10px; }
  
    /* ------------------------------ */
    /* PRODUCT / FEATURED cards       */
    /* ------------------------------ */
    .product-card__media { height: 160px; }
    .featured-card__media { height: 150px; }
  
    /* ------------------------------ */
    /* LIST (vira “stack” melhor)     */
    /* ------------------------------ */
    .list-card {
      grid-template-columns: 1fr;
    }
    .list-card__media {
      height: 180px;
      min-height: 180px;
    }
    .list-card__body { padding: 14px; }
    .list-card__action {
      min-width: 100%;
      padding: 14px 16px;
      border-left: 0;
      border-top: 1px solid rgba(27, 70, 76, .10);
      background: var(--accent);
      color: #0c2218;
    }
    .list-card__action:hover { background: var(--accent); opacity: .96; }
  
    /* ------------------------------ */
    /* SHOP HEAD                      */
    /* ------------------------------ */
    .shop-head__title { font-size: 20px; }
    .shop-head__link { font-size: 12px; }
  
    /* ------------------------------ */
    /* SECTION spacing                */
    /* ------------------------------ */
    .section { padding: 44px 0; }
    .section-list { padding: 44px 0; }
  
    /* ------------------------------ */
    /* BILHETERIA                     */
    /* ------------------------------ */
    .bilheteria { padding: 28px 0 14px; }
    .bilheteria__left { padding: 16px; }
    .bilheteria__actions { gap: 10px; }
    .bilheteria__btn { width: 100%; }
    .bilheteria__preview { min-height: 250px; }
  }
  
  
  /* ========================================================================== */
  /*  4) <= 520px — mobile padrão                                                */
  /* ========================================================================== */
  @media (max-width: 520px) {
  
    /* ------------------------------ */
    /* HEADER                         */
    /* ------------------------------ */
    .header__inner { gap: 12px; }
    .brand__img { height: 30px; }
  
    /* ------------------------------ */
    /* CATS                           */
    /* ------------------------------ */
    .cats { padding: 14px 0 18px; }
    .cats__grid { gap: 12px; padding: 12px; }
    .cat__label { font-size: 13px; }
  
    /* ------------------------------ */
    /* GRIDS (1 coluna)               */
    /* ------------------------------ */
    .products-grid--4,
    .products-grid--3,
    .featured-grid {
      grid-template-columns: 1fr;
    }
  
    .product-card__media { height: 190px; }
    .featured-card__media { height: 190px; }
  
    /* ------------------------------ */
    /* BILHETERIA pills               */
    /* ------------------------------ */
    .bilheteria__meta { gap: 8px; }
    .bilheteria__pill { width: 100%; justify-content: flex-start; }
  
    /* ------------------------------ */
    /* FAQ                            */
    /* ------------------------------ */
    .faq-band { padding: 64px 0; padding-bottom: 90px; }
    .faq-band .panel { padding: 10px 0 0 26px; }
  
    .faq-band__ctaBtn { width: 100%; justify-content: center; }
  }
  
  
  /* ========================================================================== */
  /*  5) <= 380px — telas muito pequenas                                         */
  /* ========================================================================== */
  @media (max-width: 380px) {
  
    /* HERO */
    .hero-shop__image { height: 210px; }
  
    /* Buttons */
    .btn { padding: 11px 14px; }
  
    /* Footer */
    .footer-bar__left,
    .footer-bar__right {
      font-size: 12px;
    }
  
    /* FAQ */
    .faq-band__q { font-size: 13px; }
  }