/* ==========================================================================
   RESPONSIVE DESIGN & BREAKPOINTS - TRAY 3.0 (CANÔNICO)
   ========================================================================== */

/* Telas Grandes (>= 1920px) */
@media (min-width: 1920px) {
  .container {
    max-width: 1440px;
  }
}

/* Telas Desktop Padrão (1025px - 1919px) - Regra Oficial 75% */
@media (min-width: 1025px) and (max-width: 1919px) {
  .container {
    max-width: 75%;
  }
}

/* Telas Médias / Tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    max-width: 1080px;
    padding: 0 1rem;
  }

  .nav .list > li > a,
  .nav .list > li > span {
    padding: 10px 6px;
    font-size: 0.8125rem;
  }

  .list-product,
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

/* Dispositivos Móveis (<= 767px) */
@media (max-width: 767px) {
  .container {
    padding: 0 0.625rem; /* 10px */
  }

  /* Aplicação & Header Mobile */
  .application.with-message-line {
    padding-top: 190px;
  }

  .application:not(.with-message-line) {
    padding-top: 153px;
  }

  .header {
    top: 42px;
  }

  .header .line {
    height: auto;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .header.fixed .line {
    height: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .header-menu {
    display: flex;
  }

  .block-logo img,
  .header-logo img {
    max-height: 36px;
  }

  .search-wrapper,
  .header-search-wrapper {
    margin: 0.5rem 0 0;
    width: 100%;
  }

  .input-search {
    height: 42px;
    padding: 0 46px 0 16px;
  }

  .account,
  .header-account {
    display: none;
  }

  /* Slideshow Mobile */
  .banner-desktop {
    display: none !important;
  }

  .banner-mobile {
    display: block !important;
  }

  .slide-image-desktop {
    display: none !important;
  }

  .slide-image-mobile {
    display: block !important;
  }

  .section-slideshow .prev,
  .section-slideshow .next,
  .slideshow-nav-btn {
    display: none !important;
  }

  .section-slideshow .swiper-container .dots,
  .section-slideshow .slideshow-dots {
    bottom: 16px;
  }

  /* Seções e Espaçamentos */
  .section-showcase,
  .section-banners-grid,
  .section-news,
  .section-brands,
  .section-newsletter {
    padding: 1.5rem 0;
  }

  /* Vitrines de Produtos Mobile: 2 Colunas */
  .list-product,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .product,
  .product-card {
    padding: 0.35rem;
  }

  .product-info .product-name,
  .product-title {
    font-size: 0.8125rem;
    max-height: 38px;
    margin-bottom: 4px;
  }

  .product-prices,
  .product-price {
    min-height: 50px;
    margin-bottom: 0.5rem;
  }

  .product-price .current-price,
  .price-current {
    font-size: 0.9375rem;
  }

  .product-button,
  .btn-buy,
  .product-btn-buy {
    height: 42px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Banners em Linha (4 Mini) no Mobile: 2x2 */
  .banner-line .container,
  .banners-line-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  /* Mosaico no Mobile: Empilhado */
  .section-banners-grid .\31-big-2-half,
  .section-banners-grid [class*="1-big-2-half"],
  .mosaic-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Notícias no Mobile */
  .news-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}