.brand-symbol {
    overflow: hidden;
}

/*
 * Cabeçalho integrado v2.
 * Somente a marca e a fita de categorias usam recortes do desenho aprovado.
 * Busca, conta e carrinho são componentes nativos, nítidos e responsivos.
 */
.site-header {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    background: linear-gradient(105deg, #07080a 0%, #160208 55%, #07080a 100%);
}

.site-header .utility {
    position: relative;
    inset: auto;
    height: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(90deg, #090a0c, #17191b 48%, #090a0c);
}

.site-header .utility .shell {
    opacity: 1;
}

.site-header .brand-row {
    position: relative;
    inset: auto;
    left: auto;
    width: var(--shell);
    height: 100px;
    margin-inline: auto;
    transform: none;
    background: radial-gradient(ellipse at 12% 80%, rgba(213, 0, 39, .22), transparent 31%);
}

.site-header .brand-row::before {
    display: block;
    opacity: 1;
    left: -110px;
    top: 2px;
    width: 430px;
    height: 96px;
    border-color: #ee1437;
    background: transparent;
}

.site-header .brand {
    display: block;
    width: 255px;
    height: 82px;
    opacity: 1;
    background: url('../images/home-approved-reference-2x.webp') -52px -25px / 1034px auto no-repeat;
}

.site-header .brand > * {
    visibility: hidden;
}

.site-header .search,
.site-header .quick-links {
    opacity: 1;
}

.site-header .search {
    position: relative;
    inset: auto;
    width: auto;
    height: 54px;
}

.site-header .main-nav,
.site-header .main-nav.open {
    position: relative;
    inset: auto;
    height: clamp(58px, 4.97vw, 96px);
    max-height: none;
    overflow: hidden;
    background: #090a0c url('../images/home-nav-approved.webp') center / 100% 100% no-repeat;
    box-shadow: none;
}

.site-header .main-nav::before,
.site-header .main-nav::after,
.site-header .nav-glow {
    display: none;
}

.site-header .nav-items {
    display: flex;
    width: var(--shell);
    height: 100%;
    padding: 0;
    opacity: 0;
}

@media (max-width: 720px) {
    .site-header {
        height: auto;
        min-height: 0;
        max-height: none;
        background: linear-gradient(115deg, #07080a, #170209 65%, #07080a);
    }

    .site-header .brand-row {
        position: relative;
        inset: auto;
        width: calc(100% - 24px);
        height: 126px;
        margin-inline: auto;
        display: grid;
        grid-template-columns: 150px 1fr;
        grid-template-rows: 68px 48px;
        grid-template-areas:
            "brand quick"
            "search search";
        gap: 5px 8px;
        background: transparent;
    }

    .site-header .brand-row::before {
        display: block;
        left: -42px;
        top: 3px;
        width: 220px;
        height: 65px;
    }

    .site-header .brand {
        grid-area: brand;
        width: 150px;
        height: 64px;
        background-position: -31px -15px;
        background-size: 620px auto;
        opacity: 1;
    }

    .site-header .search {
        grid-area: search;
        position: relative;
        inset: auto;
        width: 100%;
        height: 44px;
        opacity: 1;
    }

    .site-header .search > span {
        display: flex;
        margin-left: 16px;
    }

    .site-header .search button {
        height: 40px;
        width: 60px;
    }

    .site-header .quick-links {
        grid-area: quick;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        opacity: 1;
    }

    .site-header .quick-links i,
    .site-header .quick-links a > span:last-child {
        display: none;
    }

    .site-header .round-icon {
        width: 43px;
        height: 43px;
    }

    .site-header .mobile-menu {
        display: none;
    }

    .site-header .main-nav,
    .site-header .main-nav.open {
        position: relative;
        inset: auto;
        width: 100%;
        height: 50px;
        max-height: none;
        background-size: auto 50px;
        background-position: left center;
    }

    .site-header .nav-items {
        width: 720px;
        height: 50px;
        display: flex;
        opacity: 0;
    }
}

.product-tag.is-new {
    background: #202124;
}

/*
 * Cabeçalho fiel ao PNG aprovado.
 * A arte é usada como recorte de fundo; os controles reais permanecem
 * posicionados sobre ela e transparentes, preservando a navegação.
 */
@media (min-width: 721px) {
    .site-header {
        height: clamp(170px, 13.55vw, 260px);
        min-height: 0;
        background: #07080a url('../images/header-approved-desktop.png') center top / 100% auto no-repeat;
        overflow: hidden;
    }

    .site-header .utility {
        position: absolute;
        inset: 0 0 auto;
        height: 15%;
        border: 0;
        background: transparent;
    }

    .site-header .utility .shell {
        opacity: 0;
    }

    .site-header .brand-row {
        position: absolute;
        top: 15%;
        left: 50%;
        width: var(--shell);
        height: 48%;
        transform: translateX(-50%);
    }

    .site-header .brand-row::before,
    .site-header .brand,
    .site-header .quick-links {
        opacity: 0;
    }

    .site-header .search {
        opacity: 0;
    }

    .site-header .main-nav {
        position: absolute;
        inset: auto 0 0;
        height: 37%;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .site-header .main-nav::before,
    .site-header .main-nav::after,
    .site-header .nav-glow {
        display: none;
    }

    .site-header .nav-items {
        height: 100%;
        opacity: 0;
    }
}

/* Hero antigo da Toru: porto, contêineres e linha de produtos. */
.hero {
    height: 520px;
    background: #050608 url('../images/hero-containers-products.png') center 66% / 100% auto no-repeat;
}

.hero::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 52%);
}

.hero-orb,
.hero-line,
.hero-products {
    display: none;
}

.hero-inner {
    display: block;
    height: 100%;
}

.hero-copy {
    width: 49%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 16px;
}

.hero-copy h1 {
    text-shadow: 0 3px 22px rgba(0, 0, 0, .78);
}

.assurances svg {
    stroke-width: 1.65;
}

@media (max-width: 720px) {
    .site-header {
        height: 50vw;
        min-height: 180px;
        max-height: 220px;
        background: #07080a url('../images/header-approved-mobile.png') center top / 100% auto no-repeat;
        overflow: hidden;
    }

    .site-header .utility {
        display: none;
    }

    .site-header .brand-row {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 67%;
        margin: 0;
        display: block;
    }

    .site-header .brand-row::before,
    .site-header .brand,
    .site-header .quick-links,
    .site-header .mobile-menu {
        opacity: 0;
    }

    .site-header .search {
        position: absolute;
        left: 2%;
        bottom: 0;
        width: 96%;
        height: 35%;
        opacity: 0;
    }

    .site-header .main-nav,
    .site-header .main-nav.open {
        position: absolute;
        inset: auto 0 0;
        height: 33%;
        max-height: none;
        background: transparent;
        box-shadow: none;
        overflow: hidden;
    }

    .site-header .main-nav::before,
    .site-header .main-nav::after,
    .site-header .nav-glow {
        display: none;
    }

    .site-header .nav-items {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 0;
        opacity: 0;
    }

    .site-header .nav-items a,
    .site-header .nav-items a.active {
        flex: 1 1 20%;
        min-width: 0;
        height: 100%;
        padding: 0;
    }

    .hero {
        height: 595px;
        background-size: auto 100%;
        background-position: 63% center;
    }

    .hero::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .18));
    }

    .hero-inner {
        display: block;
    }

    .hero-copy {
        width: 100%;
        height: auto;
        padding-top: 42px;
        justify-content: flex-start;
    }

    .hero-copy h1 {
        font-size: 43px;
        max-width: 350px;
    }

    .hero-copy > span {
        max-width: 355px;
    }
}