/* ╔══════════════════════════════════════════════════════════════════════╗
 * ║ FILE: backend/public/index/index.mobile.css                         ║
 * ║ MODULE: Ecommerce Home Mobile Responsive                            ║
 * ║ BH3 Distribuidora | CONSART ERP                                     ║
 * ║ MOBILE: busca visível + 2 banners visíveis + produtos 2 por linha   ║
 * ║ CARD: somente foto + nome + código                                  ║
 * ╚══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.c-page--ecommerce-products {
    background: #f3f4f6;
  }

  .ecom-main {
    width: 100%;
    max-width: 100vw;
    padding: 0 0 24px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  /* ==========================================================
     FILTROS — MOSTRAR SOMENTE BUSCA
     ========================================================== */

  .ecom-filters {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px 10px 12px !important;
    margin: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .ecom-filters__left {
    display: block !important;
    width: 100% !important;
  }

  .ecom-filters__right,
  .ecom-filters__left > .ecom-filters__group:not(.ecom-filters__group--search) {
    display: none !important;
  }

  .ecom-filters__group--search {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .ecom-filters__group--search .ecom-filters__label {
    display: block !important;
    font-size: 11px !important;
    letter-spacing: 0.11em !important;
    margin-left: 2px !important;
  }

  .ecom-filters__search-wrapper {
    display: flex !important;
    width: 100% !important;
    height: 42px !important;
  }

  .ecom-filters__search-input {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 14px !important;
    padding: 0 12px !important;
  }

  .ecom-filters__search-btn {
    display: flex !important;
    width: 58px !important;
    min-width: 58px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ==========================================================
     ÁREA DE PRODUTOS
     ========================================================== */

  .ecom-products {
    width: 100%;
    max-width: 100vw;
    padding: 0 8px !important;
    margin-top: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
  }

  .ecom-products__panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 8px 18px !important;
    margin-top: 0 !important;
    border-radius: 20px;
    overflow: hidden !important;
  }

  /* ==========================================================
     GRID — PRODUTOS 2 POR LINHA
     ========================================================== */

  .ecom-products__grid,
  .ecom-products__skeleton-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .ecom-products__grid--list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ==========================================================
     CARD — SOMENTE FOTO + NOME + CÓDIGO
     ========================================================== */

  .ecom-product-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    justify-self: stretch !important;
    overflow: hidden !important;
  }

  .ecom-product-card:hover {
    transform: none !important;
  }

  .ecom-product-card__top {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .ecom-product-card__info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .ecom-product-card__category,
  .ecom-product-card__details,
  .ecom-product-card__tags,
  .ecom-tag,
  .ecom-product-card__bottom,
  .ecom-product-card__price-group,
  .ecom-product-card__price-label,
  .ecom-product-card__price,
  .ecom-product-card__actions,
  .ecom-product-card__qty-wrapper,
  .ecom-product-card__qty-input,
  .ecom-product-card__qty-label,
  .ecom-product-card__btn,
  .ecom-product-card__btn-label,
  .ecom-product-card__btn-icon,
  .ecom-product-card__stock,
  .ecom-product-card__availability {
    display: none !important;
  }

  .ecom-product-card__image-wrapper {
    width: 100% !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    padding: 6px !important;
    margin: 0 0 4px 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  .ecom-product-card__image {
    width: 100% !important;
    height: 100% !important;
    max-width: 85px !important;
    max-height: 85px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .ecom-product-card__image-placeholder {
    font-size: 28px !important;
  }

  .ecom-product-card__name,
  .ecom-product-card__title {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    color: #1e293b !important;
  }

  .ecom-product-card__code,
  .ecom-product-card__sku {
    display: block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: #64748b !important;
    margin: 2px 0 0 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ==========================================================
     PAGINAÇÃO
     ========================================================== */

  .ecom-pagination {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 0 10px !important;
    margin-top: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .ecom-pagination__btn,
  .ecom-pagination__info {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    text-align: center;
  }

  .ecom-pagination__info {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
  }
}

/* ==========================================================
   CELULARES PEQUENOS
   ========================================================== */

@media (max-width: 420px) {
  .ecom-products {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .ecom-products__panel {
    padding: 10px 6px 16px !important;
    border-radius: 18px !important;
  }

  .ecom-banner-boxes {
    gap: 7px !important;
  }

  .ecom-products__grid,
  .ecom-products__skeleton-grid,
  .ecom-products__grid--list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .ecom-product-card {
    padding: 8px !important;
    border-radius: 14px !important;
  }

  .ecom-product-card__image-wrapper {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
  }

  .ecom-product-card__image {
    max-width: 78px !important;
    max-height: 78px !important;
  }

  .ecom-product-card__name,
  .ecom-product-card__title {
    font-size: 10px !important;
    min-height: 26px !important;
    max-height: 26px !important;
  }

  .ecom-product-card__code,
  .ecom-product-card__sku {
    font-size: 10px !important;
  }
}

/* ==========================================================
   MOBILE — MOSTRAR SOMENTE banner3.png SEM ESPAÇO VAZIO
   ========================================================== */

@media (max-width: 768px) {
  .ecom-banner-boxes {
    display: block !important;
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 0 !important;
    margin: 0 0 10px 0 !important;

    overflow: visible !important;
  }

  .ecom-banner-card {
    display: none !important;
  }

  .ecom-banner-card--mobile-main {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 0 !important;
    margin: 0 !important;

    aspect-ratio: unset !important;

    border-radius: 14px !important;
    overflow: hidden !important;

    background: transparent !important;
    box-shadow: none !important;
  }

  .ecom-banner-card--mobile-main img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: none !important;

    object-fit: contain !important;

    border-radius: 14px !important;
  }
}

/* ==========================================================
   MOBILE — REMOVER ALTURA VAZIA DO BANNER
   ========================================================== */

@media (max-width: 768px) {
  .ecom-banner-boxes {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
  }

  .ecom-banner-card,
  .ecom-banner-card--mobile-main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .ecom-banner-card--mobile-main img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  .ecom-products__panel {
    padding-top: 8px !important;
  }

  .ecom-products__grid {
    margin-top: 0 !important;
  }
}