/* ==========================================================================
   EzC Copos — Home
   ========================================================================== */

.ezc-home > section + section,
.ezc-home > section { margin-bottom: var(--ezc-space-2xl); }
.ezc-home > .ezc-hero { margin-bottom: 0; }
.ezc-home > .ezc-bullets { margin-top: var(--ezc-space-lg); }

/* ---------- Hero / rotativo ---------- */
.ezc-hero {
  position: relative;
  overflow: hidden;
  height: 420px;
  background: var(--ezc-field-bg);
}
.ezc-hero__track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}
.ezc-hero__slide { flex: 0 0 100%; height: 100%; position: relative; }
.ezc-hero__media { display: block; position: relative; width: 100%; height: 100%; text-decoration: none; }
.ezc-hero__img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ezc-hero__img--mobile { display: none; }

.ezc-hero__overlay {
  position: absolute;
  left: var(--ezc-space-2xl);
  bottom: var(--ezc-space-2xl);
  max-width: 420px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--ezc-radius-lg);
  padding: var(--ezc-space-lg);
}
[data-theme="dark"] .ezc-hero__overlay { background: rgba(19, 19, 22, 0.85); }
.ezc-hero__title { font-size: 24px; font-weight: 600; margin: 0 0 6px; color: var(--ezc-text); }
.ezc-hero__desc { font-size: 14px; color: var(--ezc-text-muted); margin: 0 0 14px; }

.ezc-hero__dots {
  position: absolute;
  bottom: var(--ezc-space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.ezc-hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: none; padding: 0; cursor: pointer;
}
.ezc-hero__dot.is-active { background: #fff; }
.ezc-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ezc-text);
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ezc-hero__arrow--prev { left: var(--ezc-space-md); }
.ezc-hero__arrow--next { right: var(--ezc-space-md); }

@media (max-width: 720px) {
  .ezc-hero { height: 460px; }
  .ezc-hero__img--desktop { display: none; }
  .ezc-hero__img--mobile { display: block; }
  .ezc-hero__overlay { left: var(--ezc-space-md); right: var(--ezc-space-md); bottom: var(--ezc-space-md); max-width: none; }
  .ezc-hero__arrow { display: none; }
}

/* ---------- Bullets informativos ---------- */
.ezc-bullets__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ezc-space-lg);
  padding-top: var(--ezc-space-lg);
  padding-bottom: var(--ezc-space-lg);
  border-bottom: 1px solid var(--ezc-border);
}
.ezc-bullet { display: flex; gap: 12px; align-items: flex-start; }
.ezc-bullet__icon { color: var(--ezc-accent); flex-shrink: 0; }
.ezc-bullet__title { font-size: 14px; font-weight: 500; color: var(--ezc-text); margin: 0 0 2px; }
.ezc-bullet__desc { font-size: 13px; color: var(--ezc-text-muted); margin: 0; }
@media (max-width: 1024px) { .ezc-bullets__row { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 720px) {
  .ezc-bullets__row {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ezc-bullets__row::-webkit-scrollbar { display: none; }
  .ezc-bullet {
    flex: 0 0 auto;
    width: 230px;
    scroll-snap-align: start;
  }
}

/* ---------- Banners promocionais ---------- */
.ezc-promo__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ezc-space-lg);
}
.ezc-promo__item { display: block; border-radius: var(--ezc-radius-md); overflow: hidden; }
.ezc-promo__item img { width: 100%; aspect-ratio: 440 / 280; object-fit: cover; }

@media (max-width: 720px) {
  .ezc-promo__row {
    display: flex;
    gap: var(--ezc-space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* esconde a barra de scroll sem esconder a rolagem */
    scrollbar-width: none;
  }
  .ezc-promo__row::-webkit-scrollbar { display: none; }
  .ezc-promo__item {
    flex: 0 0 70%; /* deixa ~30% do próximo banner visível */
    scroll-snap-align: start;
  }
}

/* ---------- Categorias estilo story ---------- */
.ezc-cat-stories__row {
  display: flex;
  gap: var(--ezc-space-lg);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ezc-cat-stories__row::-webkit-scrollbar { display: none; }
.ezc-cat-story {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  width: 84px;
}
.ezc-cat-story__circle {
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ezc-border-strong);
  display: block;
}
.ezc-cat-story__circle img { width: 100%; height: 100%; object-fit: cover; }
.ezc-cat-story__name {
  font-size: 12px;
  color: var(--ezc-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- Lista de produtos ---------- */
.ezc-product-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ezc-space-lg);
}
.ezc-product-list__head h2 { font-size: 20px; font-weight: 600; color: var(--ezc-text); margin: 0; }

/* Quantidade de colunas configurável (Aparência → Home → Lista de
   produtos), via --ezc-pl-cols-desktop / --ezc-pl-cols-mobile definidas
   inline no wrapper (ver template-parts/home/product-list.php). Essa
   regra é mais específica que a genérica `ul.products` de
   components.css, então vence sem precisar de !important. */
.ezc-product-list ul.products {
  grid-template-columns: repeat(var(--ezc-pl-cols-desktop, 4), 1fr);
}
@media (max-width: 1024px) {
  .ezc-product-list ul.products {
    grid-template-columns: repeat(min(var(--ezc-pl-cols-desktop, 4), 3), 1fr);
  }
}
@media (max-width: 560px) {
  .ezc-product-list ul.products {
    grid-template-columns: repeat(var(--ezc-pl-cols-mobile, 2), 1fr);
  }
}