/* ==========================================================================
   EzC Copos — Componentes
   Cada classe aqui corresponde 1:1 a um componente do arquivo Figma
   "EzCommerce — Tema da Loja (Design System)". Mudou lá, muda aqui.
   ========================================================================== */

/* Button — variantes Style=Primary/Secondary/Ghost, State=Default/Disabled */
.ezc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ezc-space-sm);
  padding: 10px 20px;
  border-radius: var(--ezc-radius-md);
  border: none;
  font-family: var(--ezc-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.ezc-btn:disabled,
.ezc-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
.ezc-btn--primary {
  background: var(--ezc-accent);
  color: var(--ezc-on-accent);
}
.ezc-btn--primary:hover:not(:disabled) { opacity: 0.9; }
.ezc-btn--secondary {
  background: var(--ezc-accent-soft);
  color: var(--ezc-text);
}
.ezc-btn--secondary:hover:not(:disabled) { opacity: 0.85; }
.ezc-btn--ghost {
  background: transparent;
  color: var(--ezc-text);
  border: 1px solid var(--ezc-border-strong);
}
.ezc-btn--ghost:hover:not(:disabled) { background: var(--ezc-field-bg); }
.ezc-btn--full { width: 100%; }
.ezc-btn--sm { padding: 6px 12px; font-size: 12px; }

/* Badge — Style=Success/Warning/Danger/Info/Neutral */
.ezc-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.ezc-badge--success { background: var(--ezc-success-bg); color: var(--ezc-success); }
.ezc-badge--warning { background: var(--ezc-warning-bg); color: var(--ezc-warning); }
.ezc-badge--danger  { background: var(--ezc-danger-bg);  color: var(--ezc-danger); }
.ezc-badge--info    { background: var(--ezc-info-bg);    color: var(--ezc-info); }
.ezc-badge--neutral { background: var(--ezc-accent-soft); color: var(--ezc-text-muted); }

/* Input — State=Default/Disabled/Error */
.ezc-field { display: flex; flex-direction: column; gap: 6px; }
.ezc-field__label { font-size: 12px; font-weight: 500; color: var(--ezc-text-muted); }
.ezc-field__control {
  background: var(--ezc-field-bg);
  border: 1px solid var(--ezc-border-strong);
  border-radius: var(--ezc-radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--ezc-font);
  color: var(--ezc-text);
}
.ezc-field__control::placeholder { color: var(--ezc-text-soft); }
.ezc-field--error .ezc-field__control { border-color: var(--ezc-danger); }
.ezc-field--disabled { opacity: 0.5; pointer-events: none; }
.ezc-field__error { font-size: 12px; color: var(--ezc-danger); }

/* Card — produto */
.ezc-card {
  background: var(--ezc-surface);
  border-radius: var(--ezc-radius-lg);
  padding: var(--ezc-space-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ezc-card__image {
  position: relative;
  background: var(--ezc-field-bg);
  border-radius: var(--ezc-radius-md);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  touch-action: pan-y;
}
.ezc-card__image img { width: 100%; height: 100%; object-fit: cover; }
.ezc-card__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ezc-card__img.is-active { opacity: 1; }
.ezc-card__dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 1;
}
.ezc-card__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.ezc-card__dot.is-active { background: #fff; }
.ezc-card__badge { position: absolute; top: 10px; left: 10px; }
.ezc-card__name { font-size: 15px; font-weight: 500; color: var(--ezc-text); margin: 0; }
.ezc-card__price { font-size: 18px; font-weight: 600; color: var(--ezc-text); margin: 0; }

/* Header — navegação da loja */
.ezc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ezc-space-md);
  height: var(--ezc-header-h);
  padding: 0 var(--ezc-space-xl);
  background: var(--ezc-surface);
  border-bottom: 1px solid var(--ezc-border);
  position: relative;
}
.ezc-header__logo { display: flex; align-items: center; font-size: 18px; font-weight: 600; color: var(--ezc-text); text-decoration: none; }
.ezc-header__logo-img { height: 36px; width: auto; display: block; }
.ezc-header__nav { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.ezc-header__nav a { font-size: 14px; color: var(--ezc-text-muted); text-decoration: none; }
.ezc-header__nav a:hover { color: var(--ezc-text); }
.ezc-header__actions { display: flex; gap: 20px; align-items: center; }
.ezc-header__actions a { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ezc-text); text-decoration: none; }
.ezc-header__action-label { }
.ezc-header__social { display: flex; align-items: center; gap: 14px; padding-right: 4px; border-right: 1px solid var(--ezc-border); margin-right: 2px; }
.ezc-header__social a { color: var(--ezc-text-muted); }
.ezc-header__social a:hover { color: var(--ezc-text); }

/* Botão hambúrguer — só existe visualmente a partir do breakpoint mobile */
.ezc-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ezc-text);
  padding: 8px;
  margin: -8px;
  cursor: pointer;
}

@media (max-width: 880px) {
  .ezc-header { padding: 0 var(--ezc-space-md); }
  .ezc-header__menu-toggle { display: flex; order: -1; }
  .ezc-header__social { display: none; } /* fica disponível no rodapé em qualquer tamanho de tela */
  .ezc-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--ezc-surface);
    border-bottom: 1px solid var(--ezc-border);
    box-shadow: var(--ezc-shadow-md);
    padding: var(--ezc-space-sm) 0;
    z-index: 40;
  }
  .ezc-header__nav.is-open { display: flex; }
  .ezc-header__nav a { padding: 12px var(--ezc-space-md); }
  .ezc-header__nav a:hover { background: var(--ezc-field-bg); }
}
@media (max-width: 560px) { .ezc-header__action-label { display: none; } }

/* Barra de promoção — opcional, acima do header */
.ezc-promo-bar {
  background: var(--ezc-accent);
  color: var(--ezc-on-accent);
  overflow: hidden;
}
.ezc-promo-bar__inner {
  display: flex;
  justify-content: center;
  padding: 8px var(--ezc-space-xl);
  white-space: nowrap;
}
.ezc-promo-bar__content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
  padding: 0 32px;
}
.ezc-promo-bar__content span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ezc-promo-bar__inner.is-animated {
  justify-content: flex-start;
  width: max-content;
  animation: ezc-promo-marquee 18s linear infinite;
}
@keyframes ezc-promo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ezc-promo-bar__inner.is-animated { animation: none; width: auto; justify-content: center; }
  .ezc-promo-bar__inner.is-animated .ezc-promo-bar__content:last-child { display: none; }
}
@media (max-width: 560px) {
  .ezc-promo-bar__inner { padding: 7px var(--ezc-space-md); }
  .ezc-promo-bar__content { font-size: 12px; max-width: 100%; }
}

/* Páginas padrão do WooCommerce (PLP, carrinho, checkout, minha conta) —
   usamos os wrappers nativos (#primary) que add_theme_support('woocommerce')
   já registra, só damos a largura e o respiro do container. */
.woocommerce #primary,
.woocommerce-page #primary {
  max-width: var(--ezc-container);
  margin: 0 auto;
  padding: var(--ezc-space-xl);
}
.woocommerce-breadcrumb { font-size: 13px; color: var(--ezc-text-soft); margin-bottom: var(--ezc-space-sm); }
.woocommerce-breadcrumb a { color: var(--ezc-text-soft); }
.page-title, .woocommerce-products-header__title {
  font-size: 24px; font-weight: 600; color: var(--ezc-text); margin: 0 0 var(--ezc-space-lg);
}
.woocommerce-ordering select {
  font-family: var(--ezc-font);
  border: 1px solid var(--ezc-border-strong);
  border-radius: var(--ezc-radius-sm);
  padding: 8px 12px;
}

/* Layout utilitário */
.ezc-container { max-width: var(--ezc-container); margin: 0 auto; padding: 0 var(--ezc-space-xl); }
.ezc-grid,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ezc-space-lg);
  list-style: none;
  margin: 0 0 var(--ezc-space-2xl);
  padding: 0;
}
.ezc-grid li,
ul.products li {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}
@media (max-width: 1024px) { .ezc-grid, ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ezc-grid, ul.products { grid-template-columns: 1fr; } }

/* Rodapé --------------------------------------------------------------- */

.ezc-footer {
  margin-top: var(--ezc-space-2xl);
  background: var(--ezc-surface);
  border-top: 1px solid var(--ezc-border);
}

.ezc-footer__trust { border-bottom: 1px solid var(--ezc-border); }
.ezc-footer__trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ezc-space-lg) var(--ezc-space-xl);
  padding: var(--ezc-space-md) var(--ezc-space-xl);
}
.ezc-footer__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ezc-text-muted);
}
.ezc-footer__trust-item .ezc-icon { color: var(--ezc-accent); }

.ezc-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--ezc-space-2xl);
  padding: var(--ezc-space-2xl) var(--ezc-space-xl);
}
.ezc-footer__logo { font-size: 17px; font-weight: 600; color: var(--ezc-text); margin: 0 0 10px; }
.ezc-footer__desc { font-size: 13.5px; color: var(--ezc-text-muted); line-height: 1.6; margin: 0 0 16px; max-width: 320px; }
.ezc-footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ezc-text);
  text-decoration: none;
}
.ezc-footer__whatsapp:hover { color: var(--ezc-accent); }

.ezc-footer__col-title { font-size: 13px; font-weight: 600; color: var(--ezc-text); margin: 0 0 14px; }
.ezc-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ezc-footer__links a { font-size: 13.5px; color: var(--ezc-text-muted); text-decoration: none; }
.ezc-footer__links a:hover { color: var(--ezc-text); }

.ezc-footer__bottom {
  border-top: 1px solid var(--ezc-border);
  padding: var(--ezc-space-md) var(--ezc-space-xl);
}
.ezc-footer__bottom p { font-size: 12.5px; color: var(--ezc-text-soft); margin: 0; }

@media (max-width: 720px) {
  .ezc-footer__top { grid-template-columns: 1fr; gap: var(--ezc-space-xl); }
  .ezc-footer__trust-row { padding: var(--ezc-space-md); }
}

.ezc-footer__social { display: flex; gap: 14px; margin-top: 14px; }
.ezc-footer__social a { color: var(--ezc-text-muted); }
.ezc-footer__social a:hover { color: var(--ezc-text); }