@keyframes wa-pulse-anim {
    0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); }
    70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
  .wa-pulse { animation: wa-pulse-anim 2s infinite; }

  /* ============================================
     DESKTOP RESPONSIVE — grid 2/3/4 cols + container
     ============================================ */
  .container-sb { max-width: 100%; margin-left: auto; margin-right: auto; }
  @media (min-width: 768px) {
    .container-sb { max-width: 768px; padding-left: 1.5rem; padding-right: 1.5rem; }
  }
  @media (min-width: 1024px) {
    .container-sb { max-width: 1024px; }
  }
  @media (min-width: 1280px) {
    .container-sb { max-width: 1200px; }
  }

  /* Grid de produtos: 1col mobile, 2col tablet, 3col laptop, 4col desktop grande */
  .product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 640px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  }
  @media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  }
  @media (min-width: 1440px) {
    .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* Cards de produto ficam melhores no desktop com hover */
  @media (min-width: 768px) {
    .product-card {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px -8px rgba(0,0,0,0.12);
    }
  }
  /* Em telas >= sm os cards dentro do grid (não os carrossel destaques) viram coluna */
  @media (min-width: 640px) {
    .product-grid .product-card { flex-direction: column !important; }
    .product-grid .product-card img { width: 100% !important; height: 180px !important; object-fit: cover; }
    .product-grid .product-card .product-info { padding: 1rem; }
  }
  @media (min-width: 1024px) {
    .product-grid .product-card img { height: 200px !important; }
  }

  /* Hero maior no desktop */
  @media (min-width: 1024px) {
    #main-header.premium-header { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  }