/* =========================================================
   HEADER
========================================================= */

.site-header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:1000;

    padding:18px 5vw 0;

    pointer-events:none;

}

/*
   Fundo translúcido (efeito vidro fosco) atrás de todo o cabeçalho
   (login/cadastro, busca, barra de navegação) — sem isso, o conteúdo
   da página aparecia "por trás" desses elementos ao rolar, já que
   muitos deles têm fundo translúcido próprio. O blur forte já basta
   pra deixar o que passa por trás ilegível, sem precisar de um fundo
   quase opaco. Acompanha o tamanho real do .site-header (sem altura
   fixa) e estende um pouco além da borda de baixo, com uma máscara em
   degradê nessa sobra — assim o corte não é uma linha reta, a página
   "dissolve" suavemente ao passar por trás em vez de sumir de vez.
*/
.site-header::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;
    bottom:-14px;

    z-index:-1;

    background:rgba(7,10,25,.45);

    backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);

    mask-image:linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);

}


/* Wrapper posicionado para ancorar o painel do carrinho */
.header-shell{

    position:relative;

    max-width:1200px;

    margin:0 auto;

}


/* =========================================================
   CANTO SUPERIOR (logo+menu à esquerda, ícones+conta à direita)
   Uma única barra pill com tudo — substituiu a antiga barra de
   navegação: os links viraram uma gaveta lateral (ver .nav-links)
   aberta pelo hambúrguer, e os ícones (busca/idioma/carrinho) e a
   logo moraram pra cá.
========================================================= */

.auth-corner{

    position:relative;

    isolation:isolate;

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:12px 16px;

    max-width:1200px;

    margin:0 auto;

    padding:12px 20px;

    border-radius:999px;

    background:rgba(255,255,255,.03);

    border:1px solid transparent;

    pointer-events:auto;

    transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

}

.auth-corner:hover{

    border-color:rgba(69,172,171,.35);

    background:rgba(255,255,255,.05);

}

.auth-corner__left,
.auth-corner__right{

    display:flex;

    align-items:center;

    gap:12px;

}

.auth-corner__right{

    flex:1;

    /* Sem isso o grupo herda `min-width:auto` e nunca fica menor que o
       conteúdo dele — era o que empurrava a busca pra uma segunda
       linha em telas estreitas em vez de simplesmente estreitá-la. */
    min-width:0;

    flex-wrap:wrap;

    justify-content:flex-end;

}

/* Botão do painel admin: só renderizado no HTML quando o servidor
   detecta acesso local (ver show_admin_link em app/__init__.py) —
   não é escondido via CSS, então não existe truque de inspecionar
   a página pra revelar em produção. */
.admin-link{

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:30px;

    border-radius:50%;

    color:var(--cyan);

    background:rgba(69,172,171,.12);

    border:1px solid rgba(69,172,171,.30);

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);

}

.admin-link:hover{

    background:rgba(69,172,171,.22);

    border-color:rgba(69,172,171,.5);

    transform:translateY(-1px);

}


/* =========================================================
   LOGO
========================================================= */

.brand{

    display:flex;

    align-items:center;

    flex-shrink:0;

    text-decoration:none;

    outline:none;

    /* Sem isso, toque em mobile deixa um retângulo azulado "preso" na
       logo por causa do realce padrão de toque do navegador. */
    -webkit-tap-highlight-color:transparent;

}

.brand-logo{

    height:30px;

    width:auto;

    object-fit:contain;

    transition:
        transform .35s ease,
        filter .35s ease;

}

/* :hover só faz sentido com mouse — em touchscreen o navegador aplica
   :hover no toque e soltava esse scale(1.03) por cima do tamanho
   fixo da logo no mobile, dando a impressão de que ela "encolhia" ao
   tocar. */
@media(hover:hover){

    .brand:hover .brand-logo{

        transform:scale(1.03);

        filter:

            drop-shadow(0 0 10px rgba(69,172,171,.28))

            drop-shadow(0 0 18px rgba(110,130,255,.18));

    }

}


/* =========================================================
   HAMBÚRGUER
   Único gatilho da gaveta de navegação no desktop (no mobile a
   barra inferior também tem um, ver .tabbar-link[data-menu-toggle]).
========================================================= */

.hamburger-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:44px;

    height:44px;

    border-radius:50%;

    cursor:pointer;

    color:var(--text);

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.12);

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition);

}

.hamburger-toggle:hover,
.hamburger-toggle[aria-expanded="true"]{

    color:var(--cyan);

    background:rgba(69,172,171,.12);

    border-color:rgba(69,172,171,.40);

}


/* =========================================================
   GAVETA DE NAVEGAÇÃO
   Desliza da direita pra esquerda ao abrir (mesmo lado do
   hambúrguer/carrinho) — em vez do antigo menu inline na barra.
   `position:fixed` porque é sobreposição de tela inteira, não algo
   que deveria empurrar o resto do cabeçalho.
========================================================= */

.nav-links{

    position:fixed;

    top:0;
    right:0;
    bottom:0;

    z-index:1300;

    display:flex;

    flex-direction:column;

    gap:4px;

    width:min(300px, 82vw);

    margin:0;

    padding:100px 20px 32px;

    overflow-y:auto;

    background:var(--bg-dark-strong);

    border-left:1px solid rgba(69,172,171,.18);

    box-shadow:-20px 0 60px rgba(0,0,0,.45);

    pointer-events:auto;

    transform:translateX(100%);

    transition:transform .45s cubic-bezier(.16,1,.3,1);

}

.site-header.nav-open .nav-links{

    transform:translateX(0);

}

.nav-links a{

    display:block;

    padding:14px 16px;

    border-radius:var(--radius-sm);

    text-decoration:none;

    color:rgba(255,255,255,.85);

    font-size:1.02rem;

    font-weight:600;

    transition:
        color var(--transition),
        background var(--transition);

}

.nav-links a:hover{

    color:#fff;

    background:rgba(69,172,171,.10);

}

.nav-drawer-backdrop{

    position:fixed;

    inset:0;

    z-index:1250;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);

    opacity:0;

    pointer-events:none;

    transition:opacity .35s ease;

}

.site-header.nav-open .nav-drawer-backdrop{

    opacity:1;

    pointer-events:auto;

}


/* =========================================================
   BOTÃO ENTRAR
========================================================= */

.login-btn{

    display:flex;

}


/* =========================================================
   SELETOR DE IDIOMA
========================================================= */

.lang-switch{

    position:relative;

    display:flex;

    flex-shrink:0;

    align-items:center;

}

.lang-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    flex-shrink:0;

    height:44px;

    padding:0 14px;

    border-radius:999px;

    cursor:pointer;

    color:var(--text);

    background:linear-gradient(135deg,var(--cyan),var(--cyan-2));

    border:1px solid transparent;

    box-shadow:0 10px 25px rgba(69,172,171,.30);

    font-family:inherit;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.02em;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}

.lang-toggle:hover,
.lang-toggle[aria-expanded="true"]{

    box-shadow:0 12px 30px rgba(69,172,171,.42);

}

.lang-menu{

    position:fixed;

    z-index:1100;

    pointer-events:auto;

    display:flex;

    flex-direction:column;

    gap:6px;

    min-width:190px;

    margin:0;

    padding:8px;

    list-style:none;

    border-radius:var(--radius-sm);

    background:var(--bg-dark-strong);

    border:1px solid rgba(69,172,171,.28);

    box-shadow:0 22px 50px rgba(0,0,0,.45);

    animation:fadeMenu .25s ease;

}

.lang-menu[hidden]{

    display:none;

}

.lang-option{

    display:block;

    padding:10px 14px;

    border-radius:999px;

    cursor:pointer;

    text-decoration:none;

    color:var(--text);

    font-size:.86rem;

    font-weight:600;

    text-align:center;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.12);

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition);

}

.lang-option:hover{

    color:#fff;

    background:rgba(255,255,255,.08);

    border-color:rgba(255,255,255,.22);

}

.lang-option.active{

    color:var(--cyan);

    background:rgba(69,172,171,.14);

    border-color:rgba(69,172,171,.45);

}

@media(max-width:480px){

    .lang-current{

        display:none;

    }

    .lang-toggle{

        width:44px;

        padding:0;

    }

}


/* =========================================================
   BUSCA — barra fixa e flexível (sem painel, sem animação)
   Fica sempre visível à esquerda da lupa, dentro do
   .auth-corner__right. `flex:1` de propósito: ocupa o espaço que
   sobrar entre a logo/hambúrguer e os outros botões, então se adapta
   sozinha se algum deles mudar de tamanho no futuro (ex: a logo).
========================================================= */

.search-box{

    position:relative;

    display:flex;

    align-items:center;

    /* Cresce pra ocupar o espaço que sobrar, mas o piso é relativo
       (`min()`): em telas largas vale 140px; em telas estreitas o
       próprio limite passa a ser o espaço disponível, então a barra
       encolhe em vez de quebrar a linha da logo. */
    flex:1 1 140px;

    min-width:min(140px, 100%);

    border-radius:999px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(69,172,171,.28);

    transition:border-color var(--transition);

}

.search-box:focus-within{

    border-color:rgba(69,172,171,.6);

}

.search-box input{

    flex:1;

    min-width:0;

    padding:11px 6px 11px 16px;

    border:none;

    outline:none;

    background:none;

    font-family:inherit;

    font-size:.9rem;

    color:var(--text);

    /* Em telas bem estreitas o placeholder é maior que o campo —
       reticências em vez de texto cortado no meio da palavra. */
    text-overflow:ellipsis;

}

.search-box input::placeholder{

    color:var(--muted);

}

.search-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:40px;

    height:40px;

    margin-right:3px;

    border-radius:50%;

    cursor:pointer;

    color:var(--text);

    background:none;

    border:none;

    transition:
        color var(--transition),
        background var(--transition);

}

.search-toggle:hover{

    color:var(--cyan);

    background:rgba(69,172,171,.12);

}


/* =========================================================
   CARRINHO — botão do header
========================================================= */

.cart-toggle{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:44px;

    height:44px;

    border-radius:50%;

    cursor:pointer;

    color:var(--text);

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.12);

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition);

}

.cart-toggle:hover,
.cart-toggle[aria-expanded="true"]{

    color:var(--cyan);

    background:rgba(69,172,171,.12);

    border-color:rgba(69,172,171,.40);

}

/* Contador de itens */
.cart-count{

    position:absolute;

    top:-4px;

    right:-4px;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:20px;

    height:20px;

    padding:0 5px;

    border-radius:999px;

    font-size:.68rem;

    font-weight:800;

    color:#0a0a24;

    background:linear-gradient(135deg,var(--cyan),#6e82ff);

    box-shadow:0 4px 12px rgba(69,172,171,.4);

}

.cart-count[hidden]{

    display:none;

}


/* =========================================================
   CARRINHO — painel
========================================================= */

.cart-panel{

    position:absolute;

    top:calc(100% + 12px);

    right:0;

    z-index:1100;

    width:min(360px, calc(100vw - 10vw));

    padding:20px;

    border-radius:var(--radius-md);

    background:var(--bg-dark-strong);

    border:1px solid rgba(69,172,171,.28);

    box-shadow:0 22px 50px rgba(0,0,0,.45);

    pointer-events:auto;

    animation:fadeMenu .25s ease;

}

.cart-panel[hidden]{

    display:none;

}

.cart-panel__head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:16px;

}

.cart-panel__head h2{

    font-size:1.05rem;

    color:#fff;

}

.cart-panel__close{

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:var(--muted);

    background:transparent;

    transition:color var(--transition), background var(--transition);

}

.cart-panel__close:hover{

    color:#fff;

    background:rgba(255,255,255,.06);

}

/* Estado vazio */
.cart-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    padding:26px 0;

    font-size:.9rem;

    color:var(--muted);

}

.cart-empty[hidden]{

    display:none;

}

/* Lista de itens
   Rola a partir do 4º item: a altura máxima é calculada a partir
   da altura de um item, e não de um valor arbitrário em vh. */
.cart-items{

    --cart-item-height:68px;
    --cart-item-gap:12px;
    --cart-visible-items:3;

    display:flex;

    flex-direction:column;

    gap:var(--cart-item-gap);

    margin:0;

    padding:0;

    list-style:none;

    /* 3 itens + os 2 espaçamentos entre eles.
       Em telas baixas, o limite de viewport vence. */
    max-height:min(
        calc(
            var(--cart-visible-items) * var(--cart-item-height)
            + (var(--cart-visible-items) - 1) * var(--cart-item-gap)
        ),
        50vh
    );

    overflow-y:auto;

    /* Evita que a rolagem "vaze" para a página ao chegar no fim */
    overscroll-behavior:contain;

    /* Espaço para a barra não colar no conteúdo */
    padding-right:4px;

    scrollbar-width:thin;

    scrollbar-color:rgba(69,172,171,.45) transparent;

}

/* Barra de rolagem (WebKit) */
.cart-items::-webkit-scrollbar{

    width:6px;

}

.cart-items::-webkit-scrollbar-track{

    background:transparent;

}

.cart-items::-webkit-scrollbar-thumb{

    border-radius:999px;

    background:rgba(69,172,171,.45);

}

.cart-items::-webkit-scrollbar-thumb:hover{

    background:rgba(69,172,171,.70);

}

.cart-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    /* altura previsível: é o que torna o cálculo dos 3 itens exato */
    min-height:var(--cart-item-height);

    padding:12px 14px;

    border-radius:var(--radius-sm);

    background:rgba(255,255,255,.03);

    border:1px solid rgba(69,172,171,.14);

    /* impede que o item encolha dentro do container rolável */
    flex-shrink:0;

}

/* Miniatura à esquerda (~20% do item) — foto do produto, trocando
   sozinha entre as fotos disponíveis a cada 1s (ver startThumbCycle
   em cart.js). */
.cart-item__thumb{

    flex:0 0 20%;

    aspect-ratio:1;

    max-width:64px;

    border-radius:var(--radius-sm);

    overflow:hidden;

    background:rgba(255,255,255,.04);

}

.cart-item__thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    /* Fade suave entre uma foto e outra em vez de um corte seco. */
    transition:opacity .35s ease;

}

.cart-item__thumb--empty{

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--muted);

}

/* Nome + preço à direita da miniatura (~80% do item). */
.cart-item__info{

    display:flex;

    flex:1;

    flex-direction:column;

    gap:3px;

    min-width:0;

}

.cart-item__name{

    color:var(--text);

    font-size:.9rem;

    font-weight:600;

    text-decoration:none;

    overflow-wrap:anywhere;

    transition:color var(--transition);

}

.cart-item__name:hover{

    color:var(--cyan);

}

.cart-item__meta{

    font-size:.8rem;

    color:var(--muted);

}

.cart-item__remove{

    flex-shrink:0;

    width:28px;

    height:28px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:1.2rem;

    line-height:1;

    color:var(--muted);

    background:transparent;

    transition:color var(--transition), background var(--transition);

}

.cart-item__remove:hover{

    color:#ff6b81;

    background:rgba(255,107,129,.12);

}

/* Rodapé: total, checkout e limpar */
.cart-panel__foot{

    margin-top:18px;

    padding-top:16px;

    border-top:1px solid rgba(255,255,255,.08);

}

.cart-panel__foot[hidden]{

    display:none;

}

.cart-total{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:14px;

    font-size:.92rem;

    color:var(--muted);

}

.cart-total strong{

    font-size:1.25rem;

    color:#fff;

}

.cart-checkout{

    width:100%;

    justify-content:center;

}

.cart-clear{

    display:block;

    width:100%;

    margin-top:10px;

    padding:8px;

    border:none;

    background:transparent;

    cursor:pointer;

    font-family:inherit;

    font-size:.82rem;

    color:var(--muted);

    transition:color var(--transition);

}

.cart-clear:hover{

    color:#ff6b81;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:960px){

    /* Altura real (não transform) — fixa, não muda ao tocar/passar o
       mouse. 40px bate com o maior elemento da barra nesse breakpoint
       (.search-toggle), então a logo cresce sem esticar a altura da
       .auth-corner: quem já define essa altura é o botão de busca. */
    .brand-logo{

        height:40px;

    }

    /* Mesma distância usada entre o seletor de idioma e a lupa
       (.auth-corner__right tem gap:12px) — antes a logo ficava mais
       colada na busca por causa do gap maior (16px) entre os dois
       grupos da barra. */
    .auth-corner{

        column-gap:12px;

        /* Uma linha só: logo, busca e idioma dividem a mesma faixa.
           Quem cede espaço é a busca (flexível), então ela nunca
           passa da largura da barra nem empurra a logo pra cima. */
        flex-wrap:nowrap;

    }

    /* Largura de conteúdo (só a logo) — de propósito, sem flex:1
       aqui: ela dividiria o espaço 50/50 com .auth-corner__right e
       sobraria pouco pra busca crescer. Quem deve ganhar o espaço que
       sobra é a busca, do lado direito (ver .search-box logo abaixo). */
    .auth-corner__left{

        min-width:0;

    }

    .auth-corner__right{

        flex-wrap:nowrap;

    }

    /* Sempre visível, igual ao desktop — continua flexível (flex:1
       vem da regra base do .search-box), então se adapta sozinha
       quando a logo mudar de tamanho. Sem piso próprio: o que sobra
       depois da logo e do seletor de idioma é exatamente a largura
       dela, em qualquer tela. */
    .search-box{

        min-width:0;

    }

    .search-box input{

        font-size:.85rem;

    }

    .lang-toggle{

        height:38px;

        padding:0 12px;

        font-size:.8rem;

    }

    /* O hambúrguer do cabeçalho some no mobile — o "Mais" da barra
       inferior já abre a mesma gaveta (ver .tabbar-link[data-menu-toggle]
       em header.html, ambos escutados por header.js). */
    .auth-corner .hamburger-toggle{

        display:none;

    }

    /* O carrinho do cabeçalho também some — a barra inferior tem o
       dela (ver [data-cart-toggle] em header.html). */
    .auth-corner .cart-toggle{

        display:none;

    }

    .nav-links{

        width:min(280px, 82vw);

        padding:90px 18px 28px;

    }

    /* Entrar/Cadastrar entram aqui via header.js — separados do
       menu por uma linha, lado a lado. */
    .nav-links__auth{

        display:flex;

        gap:10px;

        margin-top:12px;

        padding-top:16px;

        border-top:1px solid rgba(255,255,255,.10);

    }

    .nav-links__auth:empty{

        display:none;

    }

    .nav-links__auth .auth-actions{

        flex:1;

        width:100%;

    }

    .nav-links__auth .login-btn,
    .nav-links__auth .signup-btn{

        flex:1;

        justify-content:center;

    }

    .nav-links__auth .auth-greeting{

        flex:1;

    }

}


@media(max-width:480px){

    /* Tudo que tem largura fixa na barra (padding da pill, espaços
       entre os itens, botão da lupa) encolhe um pouco aqui — o que
       sobra vira largura útil da busca, que é o único item flexível. */
    .auth-corner{

        column-gap:10px;

        padding:12px 14px;

    }

    .auth-corner__right{

        gap:8px;

    }

    .search-box input{

        padding:11px 4px 11px 13px;

    }

    .search-toggle{

        width:36px;

        height:36px;

        margin-right:2px;

    }

    .cart-toggle{

        width:40px;

        height:40px;

    }

    .login-btn{

        padding:9px 16px;

        font-size:.9rem;

    }

    .cart-panel{

        width:calc(100vw - 10vw);

    }

}

/* A partir daqui a logo cede altura (e, sendo quadrada no mobile,
   largura) pra busca não virar uma caixinha de duas letras. */
@media(max-width:360px){

    .brand-logo{

        height:32px;

    }

    .lang-toggle{

        width:38px;

    }

}

@media(max-width:300px){

    .brand-logo{

        height:20px;

    }

    .auth-corner{

        padding:10px 12px;

    }

    .login-btn{

        padding:8px 16px;

        font-size:.9rem;

    }

}


/* =========================================================
   BARRA DE NAVEGAÇÃO INFERIOR (MOBILE)
   Início / Categorias / Carrinho / Mais — sempre à mão do polegar,
   no espírito do app da Amazon. Some no desktop.
========================================================= */

.mobile-tabbar{

    display:none;

}

@media(max-width:960px){

    .mobile-tabbar{

        position:fixed;

        left:0;

        right:0;

        bottom:0;

        z-index:1000;

        display:flex;

        align-items:stretch;

        justify-content:space-around;

        padding:6px max(10px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));

        background:rgba(10,10,36,.92);

        backdrop-filter:blur(16px);

        -webkit-backdrop-filter:blur(16px);

        border-top:1px solid rgba(69,172,171,.20);

        box-shadow:0 -10px 30px rgba(0,0,0,.35);

    }

    .tabbar-link{

        position:relative;

        display:flex;

        flex:1;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:3px;

        width:auto;
        height:auto;

        margin:0;
        padding:6px 4px;

        border:none;

        border-radius:14px;

        cursor:pointer;

        background:none;

        box-shadow:none;

        color:var(--muted);

        font-family:inherit;

        font-size:.68rem;

        font-weight:600;

        text-decoration:none;

        transition:color var(--transition), background var(--transition);

        /* Evita o "flash" cinza/realce que alguns navegadores mobile
           deixam preso no botão depois do toque. */
        -webkit-tap-highlight-color:transparent;

        outline:none;

    }

    /* :hover só faz sentido com mouse — em touchscreen ele pode
       ficar "grudado" no botão tocado por último, parecendo um bug
       visual (um item destacado sem motivo). */
    @media(hover:hover){

        .tabbar-link:hover{

            color:var(--cyan);

            background:rgba(69,172,171,.10);

        }

    }

    .tabbar-link[aria-expanded="true"]{

        color:var(--cyan);

        background:rgba(69,172,171,.10);

    }

    .tabbar-link:focus-visible{

        color:var(--cyan);

        outline:2px solid rgba(69,172,171,.6);

        outline-offset:2px;

    }

    .tabbar-link .cart-count{

        position:absolute;

        top:0;

        right:14px;

        min-width:16px;

        height:16px;

        padding:0 4px;

        font-size:.62rem;

    }

}