/**
 * Bella Flor — Página de produto
 */

.bf-single__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
  gap: var(--bf-space-9);
  padding-block: var(--bf-space-5) var(--bf-space-9);
}

/* ==========================================================================
   Galeria
   ========================================================================== */

.bf-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-space-3);
  /*
   * A galeria acompanha a rolagem enquanto a coluna de compra é lida.
   * Em telas baixas o sticky é desligado (ver media query no fim).
   */
  position: sticky;
  top: calc(var(--bf-header-h) + var(--bf-space-4));
}

.bf-gallery--multi {
  grid-template-columns: 88px 1fr;
}

.bf-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-2);
  max-height: 640px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.bf-gallery__thumb {
  overflow: hidden;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-xs);
  background-color: var(--bf-surface-alt);
  aspect-ratio: var(--bf-ratio-product);
  transition: border-color var(--bf-duration-fast) var(--bf-ease);
}

.bf-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bf-gallery__thumb:hover,
.bf-gallery__thumb.is-active {
  border-color: var(--bf-brand-strong);
}

.bf-gallery__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--bf-radius-sm);
  background-color: var(--bf-surface-alt);
  aspect-ratio: var(--bf-ratio-product);
}

.bf-gallery__viewport {
  position: relative;
  height: 100%;
}

.bf-gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--bf-duration-base) var(--bf-ease),
    visibility var(--bf-duration-base) var(--bf-ease);
}

.bf-gallery__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.bf-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bf-duration-base) var(--bf-ease-out);
}

/* Zoom: o transform-origin é definido pelo JS conforme a posição do cursor. */
.bf-gallery__stage.is-zooming {
  cursor: zoom-in;
}

.bf-gallery__stage.is-zooming .bf-gallery__slide.is-active .bf-gallery__img {
  transform: scale(2);
}

.bf-gallery__badges {
  position: absolute;
  top: var(--bf-space-4);
  left: var(--bf-space-4);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bf-space-1);
}

.bf-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--bf-text);
  border-radius: var(--bf-radius-pill);
  opacity: 0;
  transition: opacity var(--bf-duration-base) var(--bf-ease);
}

.bf-gallery__stage:hover .bf-gallery__arrow,
.bf-gallery__arrow:focus-visible {
  opacity: 1;
}

.bf-gallery__arrow--prev { left: var(--bf-space-3); }
.bf-gallery__arrow--next { right: var(--bf-space-3); }

.bf-gallery__hint {
  position: absolute;
  bottom: var(--bf-space-3);
  right: var(--bf-space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-1);
  padding: 6px var(--bf-space-3);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--bf-radius-pill);
  font-size: var(--bf-text-2xs);
  color: var(--bf-text-muted);
  opacity: 1;
  transition: opacity var(--bf-duration-fast) var(--bf-ease);
}

.bf-gallery__stage.is-zooming .bf-gallery__hint {
  opacity: 0;
}

/* ==========================================================================
   Coluna de compra
   ========================================================================== */

.bf-summary__cat {
  font-size: var(--bf-text-xs);
  letter-spacing: var(--bf-tracking-wide);
  text-transform: uppercase;
  color: var(--bf-brand-soft);
}

.bf-summary__title {
  margin-top: var(--bf-space-2);
  font-size: var(--bf-text-2xl);
}

.bf-summary__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-4);
  margin-top: var(--bf-space-3);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-muted);
}

.bf-summary__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-1);
}

.bf-summary__rating-count {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bf-summary__pricing {
  margin-top: var(--bf-space-5);
  padding-block: var(--bf-space-5);
  border-block: 1px solid var(--bf-line);
}

.bf-summary__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bf-space-3);
  font-size: var(--bf-text-xl);
  font-weight: var(--bf-weight-medium);
}

.bf-summary__price del {
  font-size: var(--bf-text-md);
  font-weight: var(--bf-weight-regular);
  color: var(--bf-text-subtle);
}

.bf-summary__price ins {
  text-decoration: none;
  color: var(--bf-brand-strong);
}

.bf-summary__price .bf-price__installments {
  flex: 0 0 100%;
  font-size: var(--bf-text-sm);
}

.bf-summary__pix {
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-2);
  margin-top: var(--bf-space-3);
  padding: var(--bf-space-2) var(--bf-space-3);
  background-color: var(--bf-success-tint);
  border-radius: var(--bf-radius-xs);
  font-size: var(--bf-text-sm);
  color: var(--bf-success);
}

.bf-summary__pix strong {
  font-size: var(--bf-text-md);
}

.bf-summary__excerpt {
  margin-top: var(--bf-space-5);
  color: var(--bf-text-muted);
  font-size: var(--bf-text-base);
}

.bf-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-2);
  margin-top: var(--bf-space-5);
}

/*
 * Com rótulo o botão deixa de ser um quadrado de ícone: `.bf-icon-btn` é um
 * grid de altura fixa, então ícone e texto caíam em duas linhas e o rótulo
 * vazava para fora da caixa de 44px.
 */
.bf-wishlist-btn--labeled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  gap: var(--bf-space-2);
  min-height: 38px;
  padding-inline: var(--bf-space-4);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-medium);
  letter-spacing: var(--bf-tracking-wide);
  text-transform: uppercase;
}

.bf-summary__trust {
  display: grid;
  gap: var(--bf-space-3);
  margin-top: var(--bf-space-6);
  padding-top: var(--bf-space-5);
  border-top: 1px solid var(--bf-line);
  list-style: none;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-muted);
}

.bf-summary__trust li {
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
}

.bf-summary__trust .bf-icon {
  color: var(--bf-brand-strong);
}

/* ==========================================================================
   Formulário do WooCommerce (variações e compra)
   ========================================================================== */

.bf-single form.cart {
  margin-top: var(--bf-space-5);
}

.bf-single .variations {
  display: grid;
  gap: var(--bf-space-4);
  margin-bottom: var(--bf-space-5);
}

.bf-single .variations tr {
  display: grid;
  gap: var(--bf-space-2);
}

.bf-single .variations th,
.bf-single .variations td {
  display: block;
  padding: 0;
  text-align: left;
}

.bf-single .variations label {
  margin: 0;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  letter-spacing: var(--bf-tracking-wide);
  text-transform: uppercase;
}

.bf-single .reset_variations {
  display: inline-block;
  margin-top: var(--bf-space-2);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-muted);
  text-decoration: underline;
}

.bf-single .woocommerce-variation-price {
  margin-bottom: var(--bf-space-4);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-medium);
}

.bf-single .woocommerce-variation-availability {
  margin-bottom: var(--bf-space-3);
  font-size: var(--bf-text-sm);
}

.bf-single .quantity {
  display: inline-flex;
  margin-right: var(--bf-space-3);
}

.bf-single .quantity input[type="number"] {
  width: 84px;
  height: 48px;
  text-align: center;
}

/*
 * O botão de compra do WooCommerce recebe o visual do tema.
 *
 * O prefixo `.woocommerce` não é decorativo: o plugin pinta `.button.alt` com
 * o roxo dele por um seletor de especificidade (0,3,1). Sem o prefixo esta
 * regra fica em (0,2,1) e perde — o CTA principal saía lilás.
 */
.woocommerce .bf-single button.single_add_to_cart_button,
.woocommerce .bf-qv button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--bf-space-3) var(--bf-space-8);
  background-color: var(--bf-brand-strong);
  color: var(--bf-text-inverse);
  border: 1px solid var(--bf-brand-strong);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  letter-spacing: var(--bf-tracking-wide);
  text-transform: uppercase;
  transition: background-color var(--bf-duration-fast) var(--bf-ease);
}

.bf-single button.single_add_to_cart_button {
  flex: 1;
  min-width: 220px;
}

.woocommerce .bf-single button.single_add_to_cart_button:hover,
.woocommerce .bf-qv button.single_add_to_cart_button:hover {
  background-color: var(--bf-brand-hover);
  border-color: var(--bf-brand-hover);
}

/*
 * O plugin repinta o roxo dele no estado desabilitado por seletores que chegam
 * a (0,5,1) — incluindo `:disabled[disabled]`. Para o CTA continuar na cor da
 * marca enquanto a variação não é escolhida, cobrimos as três variantes.
 */
.woocommerce .bf-single button.single_add_to_cart_button.disabled,
.woocommerce .bf-single button.single_add_to_cart_button:disabled,
.woocommerce .bf-single button.single_add_to_cart_button:disabled[disabled] {
  background-color: var(--bf-brand-strong);
  border-color: var(--bf-brand-strong);
  opacity: 0.55;
  cursor: not-allowed;
}

.bf-single form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-3);
}

.bf-single .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-3);
}

/* ==========================================================================
   Frete
   ========================================================================== */

.bf-shipping {
  margin-top: var(--bf-space-6);
  padding: var(--bf-space-5);
  background-color: var(--bf-bg);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-sm);
}

.bf-shipping__title {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  letter-spacing: var(--bf-tracking-wide);
  text-transform: uppercase;
}

.bf-shipping__form {
  display: flex;
  gap: var(--bf-space-2);
  margin-top: var(--bf-space-3);
}

.bf-shipping__input {
  max-width: 160px;
  height: 38px;
}

.bf-shipping__help {
  display: inline-block;
  margin-top: var(--bf-space-2);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-muted);
  text-decoration: underline;
}

.bf-shipping__rates {
  display: grid;
  gap: var(--bf-space-2);
  margin-top: var(--bf-space-4);
  padding-top: var(--bf-space-3);
  border-top: 1px solid var(--bf-line);
  list-style: none;
  font-size: var(--bf-text-sm);
}

.bf-shipping__rates li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-4);
}

.bf-shipping__error {
  margin-top: var(--bf-space-3);
  font-size: var(--bf-text-sm);
  color: var(--bf-danger);
}

.bf-shipping__loading {
  margin-top: var(--bf-space-3);
  font-size: var(--bf-text-sm);
  color: var(--bf-text-muted);
}

.bf-shipping__note {
  margin-top: var(--bf-space-3);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-muted);
}

/* ==========================================================================
   Abas
   ========================================================================== */

.bf-tabs__nav {
  display: flex;
  gap: var(--bf-space-6);
  border-bottom: 1px solid var(--bf-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.bf-tabs__nav::-webkit-scrollbar {
  display: none;
}

.bf-tabs__tab {
  position: relative;
  padding-block: var(--bf-space-4);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-medium);
  letter-spacing: var(--bf-tracking-wide);
  text-transform: uppercase;
  color: var(--bf-text-muted);
  white-space: nowrap;
  transition: color var(--bf-duration-fast) var(--bf-ease);
}

.bf-tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--bf-brand-strong);
  transform: scaleX(0);
  transition: transform var(--bf-duration-base) var(--bf-ease-out);
}

.bf-tabs__tab.is-active {
  color: var(--bf-brand-strong);
}

.bf-tabs__tab.is-active::after {
  transform: scaleX(1);
}

.bf-tabs__panel {
  padding-top: var(--bf-space-6);
  max-width: 78ch;
}

.bf-tabs__panel[hidden] {
  display: none;
}

/* Tabela de atributos do WooCommerce. */
.bf-tabs__panel .woocommerce-product-attributes th,
.bf-tabs__panel .woocommerce-product-attributes td {
  padding: var(--bf-space-3) var(--bf-space-4);
  border-bottom: 1px solid var(--bf-line);
  text-align: left;
  font-size: var(--bf-text-sm);
}

.bf-tabs__panel .woocommerce-product-attributes th {
  width: 200px;
  font-weight: var(--bf-weight-medium);
}

/* ==========================================================================
   Quick view
   ========================================================================== */

.bf-qv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bf-space-6);
}

.bf-qv__media {
  position: relative;
  background-color: var(--bf-surface-alt);
}

.bf-qv__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: var(--bf-ratio-product);
}

.bf-qv__badges {
  position: absolute;
  top: var(--bf-space-3);
  left: var(--bf-space-3);
}

.bf-qv__body {
  padding: var(--bf-space-7) var(--bf-space-7) var(--bf-space-7) 0;
}

.bf-qv__title {
  font-size: var(--bf-text-xl);
}

.bf-qv__price {
  margin-top: var(--bf-space-3);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-medium);
}

.bf-qv__price ins { text-decoration: none; color: var(--bf-brand-strong); }
.bf-qv__price del { font-size: var(--bf-text-sm); color: var(--bf-text-subtle); }

.bf-qv__pix {
  margin-top: var(--bf-space-2);
  font-size: var(--bf-text-sm);
  color: var(--bf-success);
}

.bf-qv__excerpt {
  margin-top: var(--bf-space-4);
  font-size: var(--bf-text-sm);
  color: var(--bf-text-muted);
}

.bf-qv__full {
  margin-top: var(--bf-space-5);
}

.bf-quick-view__skeleton {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bf-space-6);
}

.bf-quick-view__skeleton-text {
  display: grid;
  align-content: start;
  gap: var(--bf-space-3);
  padding: var(--bf-space-7) var(--bf-space-7) 0 0;
}

/* ==========================================================================
   Produtos relacionados
   ========================================================================== */

.related.products,
.upsells.products {
  padding-block: var(--bf-space-8);
  border-top: 1px solid var(--bf-line);
}

.related.products > h2,
.upsells.products > h2 {
  margin-bottom: var(--bf-space-6);
  font-size: var(--bf-text-xl);
}

/*
 * O WooCommerce imprime <ul class="products"> nos relacionados; damos a ela
 * a mesma grade dos nossos blocos sem precisar sobrescrever o template.
 */
.related.products ul.products,
.upsells.products ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bf-space-5) var(--bf-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.related.products,
.upsells.products {
  max-width: var(--bf-container);
  margin-inline: auto;
  padding-inline: var(--bf-gutter);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1024px) {
  .bf-single__grid {
    grid-template-columns: 1fr;
    gap: var(--bf-space-6);
  }

  .bf-gallery {
    position: static; /* Sticky não faz sentido em coluna única. */
  }

  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bf-qv {
    grid-template-columns: 1fr;
  }

  .bf-qv__body {
    padding: 0 var(--bf-space-5) var(--bf-space-6);
  }
}

@media (max-width: 768px) {
  /* Miniaturas passam para baixo, em linha rolável. */
  .bf-gallery--multi {
    grid-template-columns: 1fr;
  }

  .bf-gallery__thumbs {
    flex-direction: row;
    order: 2;
    max-height: none;
    overflow-x: auto;
  }

  .bf-gallery__thumb {
    flex: 0 0 64px;
  }

  .bf-gallery__hint {
    display: none;
  }

  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-single button.single_add_to_cart_button {
    width: 100%;
    min-width: 0;
  }
}