/* BOND BIGODI - TOP CANÔNICO V0.7.1.9.10 */

.bb-top-canonical,
.bb-top-canonical *{
    box-sizing:border-box;
}

.bb-top-canonical{
    position:relative;
    z-index:9200;
    width:100%;
    background:#030912;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.09);
}

.bb-top-canonical::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg,#1264f2 0 33.33%,#f2f4f7 33.33% 66.66%,#e3132c 66.66% 100%);
}

.bb-top-canonical__inner{
    width:min(1460px,calc(100% - 40px));
    min-height:76px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.bb-top-canonical__brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff !important;
    text-decoration:none !important;
}

.bb-top-canonical__mark{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:#06101f;
}

.bb-top-canonical__mark img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}

.bb-top-canonical__copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.bb-top-canonical__copy small{
    margin:0;
    color:#8f9aac;
    font:900 9px/1 Arial,sans-serif;
    letter-spacing:.18em;
}

.bb-top-canonical__copy strong{
    margin:0;
    color:#fff;
    font:900 16px/1.12 Arial,sans-serif;
    letter-spacing:.01em;
    white-space:nowrap;
}

.bb-top-canonical__nav{
    display:flex;
    align-items:center;
    gap:4px;
}

.bb-top-canonical__nav a{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 11px;
    border:1px solid transparent;
    border-radius:10px;
    color:#c8d0db !important;
    background:transparent;
    text-decoration:none !important;
    font:900 12px/1 Arial,sans-serif;
    white-space:nowrap;
}

.bb-top-canonical__nav a:hover,
.bb-top-canonical__nav a.is-active{
    color:#fff !important;
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.08);
}

.bb-top-canonical__nav .bb-top-canonical__account{
    color:#fff !important;
    background:#0b2e64;
    border-color:rgba(255,255,255,.12);
}

.bb-top-canonical__nav .bb-top-canonical__booking{
    color:#fff !important;
    background:#d9142d;
    border-color:rgba(255,255,255,.10);
}

@media (max-width:900px){
    .bb-top-canonical{
        position:relative;
    }

    .bb-top-canonical__inner{
        width:calc(100% - 28px);
        min-height:68px;
        justify-content:flex-start;
        gap:0;
    }

    .bb-top-canonical__brand{
        width:auto;
        max-width:100%;
        gap:10px;
    }

    .bb-top-canonical__mark{
        width:44px;
        height:44px;
        flex-basis:44px;
    }

    .bb-top-canonical__copy small{
        font-size:8px;
    }

    .bb-top-canonical__copy strong{
        font-size:13px;
        white-space:normal;
    }

    /*
     * REGRA GLOBAL DO MOBILE:
     * O topo é SOMENTE identidade.
     * Toda navegação fica no partial fixo inferior.
     */
    .bb-top-canonical__nav{
        display:none !important;
    }
}

@media (max-width:420px){
    .bb-top-canonical__inner{
        width:calc(100% - 24px);
        min-height:68px;
    }
}

/* BB_LOGO_GRID_PROPORCIONAL_V15_9_2_2_START */

/*
 * BOND BIGODI
 * Correção do GRID/CÉLULA do logotipo.
 *
 * NÃO altera:
 * - texto BARBEARIA BOND BIGODI
 * - font-size
 * - font-weight
 * - line-height
 * - letter-spacing
 */

:root {
    --bb-header-v15922-height-mobile: 112px;
    --bb-header-v15922-height-desktop: 118px;

    --bb-logo-grid-v15922-mobile: 100px;
    --bb-logo-grid-v15922-desktop: 108px;

    --bb-logo-img-v15922-mobile: 92px;
    --bb-logo-img-v15922-desktop: 100px;
}

/*
 * Mantém o mesmo slot global criado pela 15.9.2.1,
 * mas amplia a altura proporcionalmente ao novo logo.
 */
.bb-global-header-slot-v15921 {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: auto !important;

    z-index: 10060 !important;

    width: 100% !important;

    height: var(--bb-header-v15922-height-mobile) !important;
    min-height: var(--bb-header-v15922-height-mobile) !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}

/*
 * Header do partial.
 */
.bb-global-header-slot-v15921 > header:first-of-type,
.bb-global-header-slot-v15921 header:first-of-type {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;

    display: flex !important;
    align-items: center !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}

/*
 * Spacer proporcional ao header fixo.
 */
.bb-global-header-spacer-v15921 {
    height: var(--bb-header-v15922-height-mobile) !important;
    min-height: var(--bb-header-v15922-height-mobile) !important;
}

/*
 * LIBERA overflow de toda a cadeia que envolve o primeiro logo.
 * Isso evita que um wrapper antigo de 40/48/56px corte a imagem.
 */
.bb-global-header-slot-v15921
header:first-of-type
*:has(img:first-of-type) {
    overflow: visible !important;
}

/*
 * GRID/CÉLULA REAL DO LOGO.
 *
 * Seleciona o wrapper cujo filho ELEMENTO é apenas a imagem.
 * Assim ampliamos a célula da figura sem mexer no bloco do texto.
 */
.bb-global-header-slot-v15921
header:first-of-type
*:has(> img:first-of-type):not(:has(> :not(img))) {
    flex: 0 0 var(--bb-logo-grid-v15922-mobile) !important;

    width: var(--bb-logo-grid-v15922-mobile) !important;
    height: var(--bb-logo-grid-v15922-mobile) !important;

    min-width: var(--bb-logo-grid-v15922-mobile) !important;
    min-height: var(--bb-logo-grid-v15922-mobile) !important;

    max-width: var(--bb-logo-grid-v15922-mobile) !important;
    max-height: var(--bb-logo-grid-v15922-mobile) !important;

    margin: 0 12px 0 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;

    box-sizing: border-box !important;

    border-radius: 0 !important;

    transform: none !important;
}

/*
 * IMAGEM DO LOGO.
 * Menor que o grid para existir respiro interno de 4px por lado.
 */
.bb-global-header-slot-v15921
header:first-of-type
img:first-of-type {
    flex: 0 0 var(--bb-logo-img-v15922-mobile) !important;

    width: var(--bb-logo-img-v15922-mobile) !important;
    height: var(--bb-logo-img-v15922-mobile) !important;

    min-width: var(--bb-logo-img-v15922-mobile) !important;
    min-height: var(--bb-logo-img-v15922-mobile) !important;

    max-width: var(--bb-logo-img-v15922-mobile) !important;
    max-height: var(--bb-logo-img-v15922-mobile) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    align-self: center !important;

    overflow: visible !important;

    transform: none !important;
}

/*
 * Se o primeiro wrapper do logo for <picture>, também ganha o grid.
 */
.bb-global-header-slot-v15921
header:first-of-type
picture:has(> img:first-of-type) {
    flex: 0 0 var(--bb-logo-grid-v15922-mobile) !important;

    width: var(--bb-logo-grid-v15922-mobile) !important;
    height: var(--bb-logo-grid-v15922-mobile) !important;

    min-width: var(--bb-logo-grid-v15922-mobile) !important;
    min-height: var(--bb-logo-grid-v15922-mobile) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
}

/*
 * Agrupamento logo + texto.
 * Apenas alinhamento vertical.
 * ZERO alteração tipográfica.
 */
.bb-global-header-slot-v15921
header:first-of-type
a:has(img:first-of-type),

.bb-global-header-slot-v15921
header:first-of-type
.brand:has(img:first-of-type),

.bb-global-header-slot-v15921
header:first-of-type
.bb-brand:has(img:first-of-type),

.bb-global-header-slot-v15921
header:first-of-type
.bb-top-brand:has(img:first-of-type),

.bb-global-header-slot-v15921
header:first-of-type
.bb-public-brand:has(img:first-of-type) {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    min-height: var(--bb-logo-grid-v15922-mobile) !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    overflow: visible !important;
}

html {
    scroll-padding-top:
        calc(var(--bb-header-v15922-height-mobile) + 10px) !important;
}

@media (min-width: 768px) {
    .bb-global-header-slot-v15921 {
        height: var(--bb-header-v15922-height-desktop) !important;
        min-height: var(--bb-header-v15922-height-desktop) !important;
    }

    .bb-global-header-spacer-v15921 {
        height: var(--bb-header-v15922-height-desktop) !important;
        min-height: var(--bb-header-v15922-height-desktop) !important;
    }

    .bb-global-header-slot-v15921
    header:first-of-type
    *:has(> img:first-of-type):not(:has(> :not(img))),

    .bb-global-header-slot-v15921
    header:first-of-type
    picture:has(> img:first-of-type) {
        flex-basis: var(--bb-logo-grid-v15922-desktop) !important;

        width: var(--bb-logo-grid-v15922-desktop) !important;
        height: var(--bb-logo-grid-v15922-desktop) !important;

        min-width: var(--bb-logo-grid-v15922-desktop) !important;
        min-height: var(--bb-logo-grid-v15922-desktop) !important;

        max-width: var(--bb-logo-grid-v15922-desktop) !important;
        max-height: var(--bb-logo-grid-v15922-desktop) !important;
    }

    .bb-global-header-slot-v15921
    header:first-of-type
    img:first-of-type {
        flex-basis: var(--bb-logo-img-v15922-desktop) !important;

        width: var(--bb-logo-img-v15922-desktop) !important;
        height: var(--bb-logo-img-v15922-desktop) !important;

        min-width: var(--bb-logo-img-v15922-desktop) !important;
        min-height: var(--bb-logo-img-v15922-desktop) !important;

        max-width: var(--bb-logo-img-v15922-desktop) !important;
        max-height: var(--bb-logo-img-v15922-desktop) !important;
    }

    .bb-global-header-slot-v15921
    header:first-of-type
    a:has(img:first-of-type),

    .bb-global-header-slot-v15921
    header:first-of-type
    .brand:has(img:first-of-type),

    .bb-global-header-slot-v15921
    header:first-of-type
    .bb-brand:has(img:first-of-type),

    .bb-global-header-slot-v15921
    header:first-of-type
    .bb-top-brand:has(img:first-of-type),

    .bb-global-header-slot-v15921
    header:first-of-type
    .bb-public-brand:has(img:first-of-type) {
        min-height: var(--bb-logo-grid-v15922-desktop) !important;
    }

    html {
        scroll-padding-top:
            calc(var(--bb-header-v15922-height-desktop) + 10px) !important;
    }
}

/* BB_LOGO_GRID_PROPORCIONAL_V15_9_2_2_END */