/* ============================================================
   TRAPE ZAPE v84 — cartao dos carrosseis da home
   Arquivo NOVO de proposito: o stylesheet.css principal esta
   preso num cache de servidor e nao entrega bloco no fim do
   arquivo (mesmo bumpando o ?v=). Caminho que nunca existiu
   nao tem copia velha. Mesma saida do tz-checkout.css.

   O que este bloco resolve, na ordem do que doia mais:
   1) preco desalinhado entre cards vizinhos — o nome tinha
      `height:auto;min-height:0` la no v81, entao nome de 1 linha
      subia o preco e nome de 2 linhas descia. Caixa fixa de 2
      linhas em TODA largura (antes so <=576px tinha reserva);
   2) parcelamento (3x sem juros) — o dado que mais pesa numa
      saida de maternidade de R$248 e nao aparecia em lugar
      nenhum do card;
   3) fotos coladas — 3px de vao nao separava um produto do
      outro, virava parede de foto;
   4) sem CTA — o botao COMPRAR so existia para produto
      esgotado (o {% if product.aviseme %} do twig). Agora ele
      entra sobre a foto no hover, sem sujar a grade parada.
   ============================================================ */

/* ---- 1. vao entre as fotos -------------------------------- */
#common-home .product-carousel-rows .item { padding: 0 9px !important; }
#common-home .product-carousel-rows .slick-slide > div > div { padding-bottom: 26px !important; }

@media (max-width: 576px) {
  #common-home .product-carousel-rows .item { padding: 0 5px !important; }
  #common-home .product-carousel-rows .slick-slide > div > div { padding-bottom: 18px !important; }
}

/* ---- 2. nome: caixa fixa de 2 linhas ---------------------- */
/* precisa de ID: o v81 declarou `height:auto!important` para o
   mesmo elemento e sem ID a altura fixa perde a disputa. */
#common-home .product-carousel-rows .item .product-thumb .caption h4,
#common-home .product-carousel-rows .item .product-thumb .caption h4 a {
  font-size: 12.5px !important;
  line-height: 18px !important;
  letter-spacing: .6px !important;
}
#common-home .product-carousel-rows .item .product-thumb .caption h4 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 0 7px !important;
}
#common-home .product-carousel-rows .item .product-thumb .caption h4 a { color: #6B6158 !important; }
#common-home .product-carousel-rows .item .product-thumb:hover .caption h4 a { color: #2D2520 !important; }

@media (max-width: 576px) {
  #common-home .product-carousel-rows .item .product-thumb .caption h4,
  #common-home .product-carousel-rows .item .product-thumb .caption h4 a {
    font-size: 11.5px !important;
    line-height: 16px !important;
  }
  #common-home .product-carousel-rows .item .product-thumb .caption h4 {
    height: 32px !important; min-height: 32px !important; max-height: 32px !important;
    margin: 0 0 5px !important;
  }
}

/* ---- 3. preco + parcelamento ------------------------------ */
#common-home .product-carousel-rows .item .product-thumb .caption .price {
  margin: 0 !important;
  min-height: 0 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
/* card com promocao reservava 42px fixos (o `:has(.price-old)` do
   v81) e desalinhava a linha do parcelamento contra o card ao
   lado; o preco antigo agora corre na mesma linha do novo. */
#common-home .product-carousel-rows .item .product-thumb .caption .price:has(.price-old) {
  min-height: 0 !important;
  margin-bottom: 0 !important;
}
#common-home .product-carousel-rows .item .product-thumb .caption .price-old {
  font-size: 13px !important;
  color: #A79C90 !important;
  font-weight: 400 !important;
}

#common-home .tz-parcelas {
  display: block;
  margin-top: 4px;
  font-family: 'Questrial', sans-serif;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .2px;
  color: #8C8279;
}

@media (max-width: 576px) {
  #common-home .product-carousel-rows .item .product-thumb .caption .price { font-size: 15px !important; }
  #common-home .tz-parcelas { font-size: 10.5px; margin-top: 3px; }
}

/* ---- 3b. alinhamento a esquerda de verdade ---------------- */
/* o v79 ja mandava `text-align:left`, mas .caption e .price sao
   `display:flex` com justify/align central herdado do tema —
   em flex o text-align nao decide nada. Preco e parcelamento
   continuavam centralizados debaixo de um nome alinhado a
   esquerda, que e' o que deixava a coluna torta. */
#common-home .product-carousel-rows .item .product-thumb .caption {
  align-items: flex-start !important;
}
#common-home .product-carousel-rows .item .product-thumb .caption .price {
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 8px !important;
}

/* ---- 4. foto: zoom no hover ------------------------------- */
#common-home .product-carousel-rows .item .product-thumb .image {
  position: relative;
  overflow: hidden;
  background: #FBF4EA;
}
#common-home .product-carousel-rows .item .product-thumb .image > a > img {
  transition: transform .5s ease;
}

/* ---- 5. COMPRAR sobre a foto ------------------------------ */
#common-home .product-carousel-rows .item .product-thumb .image .button-group {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 3;
  margin: 0 !important;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
#common-home .product-carousel-rows .item .product-thumb .image .btn-add-cart {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 11px 10px;
  background: #F39C44;
  color: #fff;
  font-family: 'Questrial', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(46, 42, 38, .22);
  transition: background .2s ease;
}
#common-home .product-carousel-rows .item .product-thumb .image .btn-add-cart:hover { background: #E0851F; }

/* so onde existe cursor de verdade: no toque o card inteiro ja
   leva ao produto e o botao fixo cobriria o pe do macacao. */
@media (hover: hover) and (pointer: fine) {
  #common-home .product-carousel-rows .item .product-thumb:hover .image > a > img { transform: scale(1.05); }
  #common-home .product-carousel-rows .item .product-thumb:hover .image .button-group {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
@media (max-width: 992px) {
  #common-home .product-carousel-rows .item .product-thumb .image .button-group { display: none !important; }
}

/* ---- 6. coracao da lista de desejos ----------------------- */
/* aparecia so em parte dos cards porque o branco do icone sumia
   contra foto clara; agora tem pastilha propria. */
#common-home .product-carousel-rows .btn-wishlist-corner {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid #F0E4D6 !important;
  box-shadow: 0 2px 8px rgba(46, 42, 38, .10);
  color: #6B6158 !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  top: 10px !important;
  right: 10px !important;
  z-index: 4;
}
#common-home .product-carousel-rows .btn-wishlist-corner:hover { color: #E0851F !important; }