/**
 * Ajuste da coluna de informações do produto após a saída do provador virtual.
 *
 * O tema tinha um CSS só para encaixar o botão do FittingBox ao lado do de
 * compra. Com ele removido, os espaçamentos ficaram irregulares (15/18/12/20/24).
 * Aqui a gente aplica um ritmo vertical em múltiplos de 4 e deixa o botão de
 * compra ocupando a largura toda, que é o que faz a coluna parecer simétrica.
 */

/* ---- ritmo vertical da coluna ---- */
.product__info-container > .product__title {
  margin-bottom: 8px;
}

.product__info-container > .product-page-price,
.product__info-container > .no-js-hidden.product-page-price {
  margin-bottom: 20px !important;
}

.product__info-container > .bys-swatches--pdp {
  margin-bottom: 12px !important;
}

.product__info-container > .sg-color-info {
  margin-bottom: 20px !important;
}

.product__info-container > .sg-badges-row {
  margin-bottom: 20px !important;
}

/* separação maior aqui de propósito: fecha a área de compra
   antes do conteúdo informativo (acordeões) */
.product__info-container > .product-form,
.product__info-container > div:has(> .product-form) {
  margin-bottom: 24px !important;
}

.product__info-container > .sg-accordions {
  margin-bottom: 0 !important;
}

/* ---- botão de compra ocupa a linha inteira ---- */
.product-form__buttons {
  display: block;
}

.product-form__quantity-and-btn {
  display: flex;
  gap: 10px;
  align-items: stretch;
  width: 100%;
}

.product-form__quantity-and-btn > .product-form__submit,
.product-form__quantity-and-btn > .atc-button {
  flex: 1 1 auto;
  width: 100%;
  min-height: 52px;
}

/* ---- selos de garantia: três colunas iguais ---- */
.sg-badges-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: stretch;
}

.sg-badges-row > * {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---- swatches alinhados à esquerda, com respiro igual ---- */
.bys-swatches--pdp {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ---- acordeões encostados uns nos outros ---- */
.sg-accordions .sg-accordion + .sg-accordion {
  margin-top: 8px;
}

@media (max-width: 749px) {
  .product__info-container > .sg-badges-row {
    margin-bottom: 16px !important;
  }
  .product-form__quantity-and-btn > .product-form__submit,
  .product-form__quantity-and-btn > .atc-button {
    min-height: 54px; /* alvo de toque confortável no celular */
  }
}