/*
 * Página de produto no Pillar: ajustes da loja (não é arquivo do tema). A galeria
 * usa as classes do media-gallery do tema sem o Swiper (a troca de imagem é do
 * script da página), e as cores/ofertas são botões e rádios nossos com o visual
 * do variant picker.
 */

/* Imagem principal: as fotos dos fornecedores são quadradas, então 1:1 (o tema usa 3:4 para moda) */
.pdp-gallery__main {
  --aspect-ratio: 1;
  background: rgb(var(--color-secondary-background));
}

.pdp-gallery__main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Miniaturas (swiper do tema sem inicializar): coluna à esquerda no desktop, linha no celular */
.product__media-gallery-thumbails .thumbnail-list {
  display: flex;
  gap: var(--media-item-gap);
}

.pdp-gallery__thumb {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.product__media-gallery-thumbails .pdp-gallery__thumb.swiper-slide {
  margin-inline-end: 0;
}

.pdp-gallery__thumb.swiper-slide {
  display: block;
}

.pdp-gallery__thumb .product__thumbs-container,
.pdp-gallery__thumb .product__thumbs-inner {
  width: 100%;
  aspect-ratio: 1;
}

.pdp-gallery__thumb .product__thumbs-inner {
  position: relative;
  background: rgb(var(--color-secondary-background));
}

.pdp-gallery__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-gallery__thumb.is-active .product__thumbs-container:after {
  opacity: 1;
  border-color: rgb(var(--color-foreground));
}

@media (min-width: 768px) {
  .product--media-has-many.product--vertical-carousel .product__media-gallery-thumbails .thumbnail-list {
    flex-direction: column;
    gap: var(--media-item-gap);
  }

  .product--media-has-many.product--vertical-carousel .product__media-gallery-thumbails .pdp-gallery__thumb {
    margin-bottom: 0;
  }
}

/* Cores: botões com a foto da variante como amostra quadrada */
.pdp-cores .pdp-cor-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.pdp-cor-btn .swatch-color {
  width: var(--swatch-size);
  height: var(--swatch-size);
  background-color: rgb(var(--color-secondary-background));
}

.pdp-cor-btn.is-active .swatch-color {
  --active-shadow-color: rgb(var(--color-foreground));
}

.pdp-cor-btn.is-active .swatch-color:before {
  opacity: 1;
}

/* Ofertas por quantidade: rádio + rótulo no visual dos "pills" do tema, com o preço embaixo */
.pdp-ofertas .pdp-oferta-card {
  display: contents;
}

.pdp-ofertas .pdp-oferta-card__body {
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1.6rem;
  line-height: 1.3;
}

.pdp-oferta-card__preco {
  font-size: 1.3rem;
  opacity: 0.8;
}

/* Quantidade só de leitura (definida pela oferta) na caixa do quantity-input */
.pdp-quantity {
  display: flex;
  align-items: center;
}

.pdp-quantity .quantity__input {
  width: 100%;
  min-height: var(--buttons-height);
  text-align: center;
  pointer-events: none;
}

.product-form__buttons .product-form__submit {
  flex: 1 1 0;
}

.pdp-btn-whatsapp .icon {
  width: 2rem;
  height: 2rem;
}

.pdp-btn-whatsapp.disabled {
  opacity: 0.5;
}

.pe-none {
  pointer-events: none;
}

.d-none {
  display: none !important;
}

.pdp-total {
  margin-top: 0.4rem;
}

.pdp-nav__off {
  opacity: 0.5;
}

.product__blocks-mobile-tabs .product__block--collapsible_tab:first-child {
  margin-top: 1.6rem;
}

/* Aviso "adicionado ao carrinho" (montado pelo loja-carrinho.js com classes do Bootstrap) */
.loja-carrinho-toast {
  position: fixed;
  right: 2rem;
  bottom: 9rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 36rem;
  padding: 1.4rem 1.8rem;
  border-radius: var(--blocks-radius, 0.8rem);
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  box-shadow: 0 0.8rem 3rem rgba(0, 0, 0, 0.15);
  font-weight: var(--font-body-weight-bolder);
}

.loja-carrinho-toast svg {
  color: rgb(var(--color-progress-bar));
  flex-shrink: 0;
}

.loja-carrinho-toast a {
  margin-inline-start: auto;
  text-decoration: underline;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .loja-carrinho-toast {
    left: 1.6rem;
    right: 1.6rem;
    bottom: 8rem;
    max-width: none;
  }
}

/* Trilha com nome longo de produto: quebra a linha em vez de vazar no celular */
.loja-page-produto .breadcrumbs {
  flex-wrap: wrap;
  min-width: 0;
  row-gap: 0.4rem;
}

/* Sem Swiper o tema esconde da 3ª miniatura em diante no celular; aqui todas aparecem */
@media (max-width: 767.98px) {
  .product__media-container #pdpThumbs .pdp-gallery__thumb.swiper-slide {
    display: block;
    width: calc((100% - 4 * var(--media-item-gap)) / 5);
  }

  .product__media-container #pdpThumbs {
    flex-wrap: wrap;
  }
}

/* Quantidade só de leitura não tem os botões −/+, então a caixa é mais estreita */
.product-form__quantity .pdp-quantity {
  width: 9rem;
}

/* Sem os botões −/+ o recuo lateral do tema (45px de cada lado) engolia o número */
.pdp-quantity #pdpQtd {
  padding-inline: 0.8rem;
}