/* ============================================================
   product-action-bar.css — Barra de ação fixa (páginas de detalhe)
   Visível apenas no mobile (< 768px). Espelha product-info__actions.
   ============================================================ */

.product-action-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--ecom-z-sticky);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--ecom-space-2);
  padding: var(--ecom-space-3) var(--ecom-space-4);
  padding-bottom: calc(var(--ecom-space-3) + env(safe-area-inset-bottom));
  background-color: var(--ecom-bg-surface);
  border-top: 1px solid var(--ecom-border-default);
  box-shadow: 0 -4px 12px -4px rgb(0 0 0 / 0.12);
}

/* Botão principal ocupa o espaço restante */
.product-action-bar__buy {
  width: 100%;
}

/* Botão WhatsApp — apenas ícone nesta barra.
   display explícito vence a regra que oculta .btn--whatsapp no header mobile. */
.product-action-bar__whats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--ecom-space-3);
}

.product-action-bar__whats svg {
  width: 1.375rem;
  height: 1.375rem;
}

/* Botão favoritar — ícone quadrado com borda */
.product-action-bar__fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background-color: transparent;
  color: var(--ecom-text-secondary);
  border: 1px solid var(--ecom-border-default);
  border-radius: var(--ecom-radius-lg);
  cursor: pointer;
  transition:
    color var(--ecom-duration-fast) var(--ecom-ease-default),
    border-color var(--ecom-duration-fast) var(--ecom-ease-default),
    background-color var(--ecom-duration-fast) var(--ecom-ease-default);
}

.product-action-bar__fav svg {
  width: 1.375rem;
  height: 1.375rem;
}

.product-action-bar__fav:hover {
  color: var(--ecom-action-primary);
  border-color: var(--ecom-action-primary);
}

/* Estado ativo — reaproveita aria-pressed do wishlist-manager */
.product-action-bar__fav[aria-pressed="true"] {
  color: var(--ecom-color-error);
  border-color: var(--ecom-color-error);
}

.product-action-bar__fav[aria-pressed="true"] svg {
  fill: var(--ecom-color-error);
}

/* Reserva espaço no fim da página para o conteúdo não ficar coberto */
@media (max-width: 767px) {
  body.has-action-bar {
    padding-bottom: 5rem;
  }
}

/* Some no desktop — barra é exclusiva do mobile */
@media (min-width: 768px) {
  .product-action-bar {
    display: none;
  }
}