/* Fonte Figtree Bold nos títulos da home e no nome dos produtos */
.s-title,
.name-product,
.product-infor-name {
    font-family: "Figtree", sans-serif;
    font-weight: 700;
}

/* Banner da home: altura proporcional à largura da tela (mesma proporção
   do 1770x620 / 800x280 recomendado), calculada como valor fixo em vez de
   "auto" — o Swiper não está em modo autoHeight, então precisa de uma
   altura numérica de verdade pra não travar a troca automática de slides. */
@media (max-width: 1439px) {
    .tf-slideshow .slideshow-wrap {
        height: calc(100vw * 620 / 1770);
    }
}

/* Botões de WhatsApp/Saiba Mais */
.tf-btn.tf-btn-whatsapp {
    background: #21ad34;
    color: #fff;
}

.tf-btn.tf-btn-whatsapp:hover {
    background: #1b8f2b;
    color: #fff;
}

/* Breadcrumb (Início > Categoria > Produto) só aparece a partir do
   tablet/desktop na página de detalhe do produto — no celular fica
   apertado e sobrepõe outros elementos. Especificidade igual à regra
   original do tema (.section-page-title .breadcrumbs), senão a
   original ganha e o display:none nunca aplica. */
.product-page-title .breadcrumbs {
    display: none;
}

@media (min-width: 768px) {
    .product-page-title .breadcrumbs {
        display: flex;
    }
}

/* Opções de variação de produto (voltagem, cor, etc.) */
.variation-option {
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--text);
    border-radius: 999px;
    padding: 6px 18px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.variation-option:hover {
    border-color: #25d366;
}

.variation-option.is-active {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
    font-weight: 600;
}

/* No celular, nome de produto e de categoria muito grandes quebram o
   layout do card — corta em 2 linhas com reticências. */
@media (max-width: 767px) {
    .name-product {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .box-image_content .title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }
}