/*
 * Componente global de logomarca.
 * Mantem a proporcao original da imagem, sem corte ou deformacao.
 */
:root {
    --logo-ratio: 3 / 1;
    --logo-max-desktop: 260px;
    --logo-max-mobile: 190px;
    --logo-pad: clamp(4px, 1vw, 10px);
    --store-inner-logo-width: min(180px, 50vw);
    --store-inner-logo-height: 60px;
}

.brand > a,
.logo-loja > a,
.logo-link,
.logo-global,
.top-painel .brand > a,
.widget.estabelecimento .logo-loja > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, var(--logo-max-desktop)) !important;
    max-width: 100% !important;
    aspect-ratio: var(--logo-ratio);
    height: auto !important;
    min-height: 0 !important;
    padding: var(--logo-pad) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.brand > a > img,
.logo-loja > a > img,
.logo-link > img,
.logo-global > img,
.top-painel .brand > a > img,
.widget.estabelecimento .logo-loja > a > img,
.logo-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: auto !important;
    transform: none !important;
}

/*
 * Cabecalho interno das lojas (categorias, subcategorias, pedido e checkout).
 * O CSS legado criava um circulo de 90px; combinado ao link 3:1 ele virava
 * uma elipse branca. Este slot replica o encaixe do topo da pagina inicial.
 */
.body-estabelecimento .header-interna .locked-bar .avatar {
    width: var(--store-inner-logo-width) !important;
    height: var(--store-inner-logo-height) !important;
    max-width: calc(100vw - 160px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-top: 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.body-estabelecimento .header-interna .locked-bar .avatar .holder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.body-estabelecimento .header-interna .locked-bar .avatar .holder > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 3px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.body-estabelecimento .header-interna .locked-bar .avatar .holder > a > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
}

.e2-hero-image > img {
    width: min(46%, 240px) !important;
    height: auto !important;
    aspect-ratio: 3 / 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #fff !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 14px !important;
}

.image-preview[id*="image-preview"] {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.produto.estabelecimento .perfil .holder,
.rounded-thumb-holder .rounded-thumb {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.produto.estabelecimento .perfil .holder img,
.rounded-thumb-holder .rounded-thumb img:not(.blurred) {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

@media (max-width: 768px) {
    :root {
        --logo-pad: 4px;
    }

    .brand > a,
    .logo-loja > a,
    .logo-link,
    .logo-global,
    .top-painel .brand > a {
        width: min(100%, var(--logo-max-mobile)) !important;
        margin-inline: auto !important;
    }

    .logo-text,
    .logo-nome {
        display: none !important;
    }
}

@media (max-width: 360px) {
    :root {
        --store-inner-logo-width: min(150px, 44vw);
        --store-inner-logo-height: 52px;
    }
}