/* =========================================================
   ACABAMENTOS DO V2
   - Barra do menu com 49px, como no V2. Com isso o topo fica com a mesma
     altura do espaço reservado na página e some a faixa branca de 7px
     entre o menu e a capa azul das páginas de linha.
   - Caminho do topo das páginas de linha ("Início / Produtos / ...").
   - Celular: bolinhas do carrossel embaixo da imagem e círculos das linhas
     sem o fundo retangular.
   ========================================================= */

@media (min-width: 901px) {
    .store-header__navigation {
        box-sizing: border-box;
        min-height: 49px;
    }
}

body.storefront-line-page .betel-line .odcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 34px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
    color: rgb(255 255 255 / 65%);
    font-size: 12.5px;
    line-height: normal;
}

body.storefront-line-page .betel-line .odcrumb a {
    color: inherit;
    text-decoration: none;
}

body.storefront-line-page .betel-line .odcrumb a:hover {
    color: #ffffff;
}

@media (max-width: 900px) {
    body.storefront-line-page .betel-line .odcrumb {
        margin-bottom: 22px;
        padding-bottom: 12px;
    }

    body.storefront-home .home-carousel {
        margin-bottom: 42px;
        overflow: visible;
    }

    body.storefront-home .home-carousel__viewport {
        overflow: visible;
        clip-path: inset(0 0 -23px 0);
    }

    body.storefront-home .home-carousel__controls {
        position: absolute;
        top: 100%;
        right: 0;
        bottom: auto;
        left: 0;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        width: auto;
        height: 23px;
        margin: 0;
        padding: 14px 0 0;
        border: 0;
        border-radius: 0;
        background: #ffffff;
        box-shadow: none;
        transform: none;
        backdrop-filter: none;
    }

    body.storefront-home .home-carousel__dots {
        display: flex;
        gap: 9px;
    }

    body.storefront-home .home-carousel__dot {
        width: 9px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #c9d3e0;
        box-shadow: none;
        opacity: 1;
    }

    body.storefront-home .home-carousel__dot[aria-current="true"] {
        width: 30px;
        background: #061c40;
    }

    body.storefront-home .usage-lines__list {
        grid-auto-flow: row;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        margin-top: 22px;
        padding: 0 0 6px;
        overflow: visible;
        scroll-snap-type: none;
    }

    body.storefront-home .usage-lines__item {
        width: auto;
        min-width: 0;
    }

    body.storefront-home .usage-lines__media {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    body.storefront-home .usage-lines__name {
        margin-top: 10px;
    }
}