/* Ajuste fino com o V2 (betelprojeto.grupodomu.com.br), medido lado a lado
   em 1440 px e 390 px: alturas de linha, tamanhos e espaçamentos que ainda
   diferiam. Carregado por último, no topo. Quebra do V2: 900 px. */

/* Rótulos em caixa alta (eyebrows): no V2 a altura de linha é a normal. */
html body .usage-lines__eyebrow,
html body .catalog-home__eyebrow,
html body .catalog-v2__eyebrow,
html body .product-related__eyebrow,
html body .betel-line .eyebrow,
html body .product-page .eyebrow,
html body .product-information .eyebrow {
    line-height: normal;
}

html body .home-kits__eyebrow {
    display: block;
    line-height: 18px;
}

/* Faixa "25 anos elevando o padrão do uso único". */
html body .home-trust-band.home-trust-band {
    gap: 18px;
    margin-top: 26px;
}

/* body.storefront-body na frente: vence ".storefront-body .home-trust-band p"
   do storefront-marketing-layout.css. */
html body.storefront-body .home-trust-band.home-trust-band > span {
    flex: 0 1 140px;
    width: 140px;
    min-width: 0;
    max-width: 140px;
}

html body.storefront-body .home-trust-band p,
html body.storefront-body .home-trust-band p strong {
    font-size: 13px;
    line-height: normal;
    letter-spacing: 0.16em;
}

html body.storefront-body .home-trust-band p {
    font-weight: 600;
}

/* Compre por linha de uso. */
html body .usage-lines {
    padding-top: 80px;
    padding-bottom: 80px;
}

html body .usage-lines__header {
    margin-bottom: 48px;
}

html body .usage-lines__list .usage-lines__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* Kits prontos para cada segmento. */
html body .home-kits {
    padding-top: 10px;
}

html body .home-kits__tag,
html body .home-kits__cta {
    line-height: normal;
}

/* Produtos por categoria e listas. */
html body .catalog-home__all,
html body .product-related__all {
    line-height: normal;
}

html body .catalog-card__subtitle {
    font-weight: 500;
}

html body .catalog-v2__chips a,
html body .chips a {
    line-height: normal;
}

html body .betel-line__list-title {
    line-height: normal;
}

/* Página de produto. */
html body .product-page .product-description .product-description__heading h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
}

html body .product-page .product-description__body h3,
html body .product-page .product-description__body h4 {
    line-height: 1.75;
}

html body .product-page .product-best,
html body .product-page .product-availability,
html body .product-page .product-related__header h2 {
    line-height: normal;
}

/* Busca no computador: mesmo corpo de texto do V2. */
@media (min-width: 901px) {
    html body.storefront-body .store-header .store-header__search input {
        font-size: 14px;
        font-weight: 500;
    }
}

@media (max-width: 900px) {
    /* Topo do celular com 64 px (V2), igual ao espaço que a página reserva
       (92 px com a faixa de cima). Com 68 px tudo começava 4 px por baixo. */
    html body.storefront-body .store-header .store-header__main {
        height: 64px;
    }

    /* Breadcrumb das linhas: 12 px em cima e 10 px embaixo, como no V2.
       O storefront-polish-v2.css zerava o espaço de cima e o texto ficava
       atrás do topo. */
    html body.storefront-line-page .betel-line nav.odcrumb {
        padding-top: 12px;
        padding-bottom: 10px;
        margin-bottom: 0;
    }

    html body .home-trust-band.home-trust-band {
        gap: 10px;
        margin-top: 23px;
    }

    html body.storefront-body .home-trust-band.home-trust-band > span {
        flex: 1 1 0;
        width: auto;
        max-width: 40px;
    }

    html body.storefront-body .home-trust-band p,
    html body.storefront-body .home-trust-band p strong {
        font-size: 10.5px;
        letter-spacing: 0.12em;
    }

    html body .usage-lines {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    html body .usage-lines__header {
        margin-bottom: 22px;
    }

    html body .usage-lines__list .usage-lines__link {
        gap: 0;
    }

    html body .product-page .product-description .product-description__heading h2 {
        font-size: 22px;
    }

    html body .product-page .product-information {
        margin-top: 0;
    }

    html body .product-page .product-related {
        margin-top: 60px;
    }

    html body .product-page .product-related__header {
        padding-bottom: 18px;
    }

    html body .product-page .product-related__header h2 {
        font-size: 26px;
        line-height: normal;
    }
}

/* Página sem rolagem para o lado no celular. O banner da home cresce um pouco
   na troca de slide e passava 2 px da tela; no iPhone isso deixava arrastar a
   página inteira para o lado e aparecia uma faixa vazia. Só as laterais são
   cortadas (os pontinhos do banner ficam embaixo e continuam visíveis). */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
}

html body .home-carousel .home-carousel__viewport {
    overflow-x: clip;
}

/* Cards de produto: preço e "Adicionar" sempre no pé do card, alinhados na
   mesma linha mesmo quando um card tem bolinhas de cor ou tamanho (G/M). */
html body .catalog-card {
    height: 100%;
}

html body .catalog-card .catalog-card__content {
    flex: 1 1 auto;
}

html body .catalog-card .catalog-card__content .catalog-card__purchase {
    margin-top: auto;
    padding-top: 8px;
}