/*
  THE PHONE SHELL (owner, 02/10/2026: "no celular a navegação não está boa... estilo tipo PWA... o
  shell flutuante embaixo ficaria bem, melhore ele como um todo para celular").

  Below the desktop breakpoint:
    * a floating bottom bar — Início, Loja, Academy, Sobre, Conta — within the thumb's reach, clear
      of the phone's home indicator (safe-area);
    * NO top bar (owner, 02/10/2026: "suma com a barra lá de cima nessa versão celular"): the page
      starts at the top of the screen, and sign-in, the account and the cart live in the bar's last
      tab, a small menu that opens above the bar ("Conta", carrying the cart count);
    * the "Falar com a Nathy" button lifted above the bar and reduced to the mascot;
    * the page padded at the bottom so nothing is ever hidden behind the bar.
  On a wide screen the bar does not exist and the header is unchanged.
*/
.tabbar { display: none; }

@media (max-width: 61.9375rem) {
    :root { --tabbar-height: 4rem; --tabbar-gap: 0.625rem; }

    .tabbar {
        display: block;
        position: fixed;
        inset-inline: max(var(--tabbar-gap), env(safe-area-inset-left));
        inset-block-end: max(var(--tabbar-gap), env(safe-area-inset-bottom));
        z-index: calc(var(--z-drawer, 50) - 1);
        border-radius: 1.25rem;
        background: color-mix(in srgb, var(--cg-black) 92%, transparent);
        -webkit-backdrop-filter: saturate(1.4) blur(14px);
        backdrop-filter: saturate(1.4) blur(14px);
        box-shadow: 0 12px 32px -10px rgb(20 14 12 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.06) inset;
    }

    .tabbar__list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin: 0;
        padding: 0.25rem;
        list-style: none;
    }

    .tabbar__item { min-inline-size: 0; }

    .tabbar__link {
        position: relative;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 0.2rem;
        block-size: calc(var(--tabbar-height) - 0.5rem);
        border-radius: 1rem;
        color: rgb(255 255 255 / 0.66);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

    .tabbar__link:active { background: rgb(255 255 255 / 0.08); }

    .tabbar__link[aria-current="page"] {
        color: var(--cg-white);
        background: rgb(255 255 255 / 0.1);
    }

    .tabbar__link[aria-current="page"] .tabbar__icon { color: var(--color-accent-on-deep); }

    .tabbar__link:focus-visible { outline: 2px solid var(--color-accent-on-deep); outline-offset: -2px; }

    .tabbar__icon { position: relative; display: grid; place-items: center; line-height: 0; }

    .tabbar__label {
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.6875rem;
        font-weight: var(--weight-semibold, 600);
        letter-spacing: 0.02em;
    }

    .tabbar__badge {
        position: absolute;
        inset-block-start: -0.35rem;
        inset-inline-end: -0.6rem;
        min-inline-size: 1.15rem;
        block-size: 1.15rem;
        padding: 0 0.3rem;
        border-radius: 999px;
        background: var(--color-accent);
        color: var(--cg-white);
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1.15rem;
        text-align: center;
    }

    .tabbar__badge.is-empty { display: none; }

    /* Nothing hides behind the bar. */
    body:has(.tabbar) { padding-block-end: calc(var(--tabbar-height) + var(--tabbar-gap) * 2 + env(safe-area-inset-bottom)); }

    /* "Falar com a Nathy": above the bar, the mascot alone. */
    body:has(.tabbar) .mascot-help {
        bottom: calc(var(--tabbar-height) + var(--tabbar-gap) * 2 + env(safe-area-inset-bottom));
        right: max(var(--tabbar-gap), env(safe-area-inset-right));
    }
    body:has(.tabbar) .mascot-help__trigger { padding: 3px; }
    body:has(.tabbar) .mascot-help__trigger-text {
        position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }

    /* NO TOP BAR on a phone: the bottom bar carries the destinations and the "Conta" tab the account
       and the cart. Sticky offsets that cleared the header clear nothing now; the status bar of an
       installed app (black-translucent) still gets its room. */
    :root { --header-height: 0px; }
    .site-header { display: none; }
    body:has(.tabbar) { padding-block-start: env(safe-area-inset-top); }

    /* THE "CONTA" TAB: a disclosure whose summary looks like the other tabs. */
    .tabbar__menu > summary { list-style: none; cursor: pointer; }
    .tabbar__menu > summary::-webkit-details-marker { display: none; }
    .tabbar__menu[open] > summary { color: var(--cg-white); background: rgb(255 255 255 / 0.1); }
    /* The mascot button sits where the menu opens: it steps aside while the menu is open. */
    body:has(.tabbar__menu[open]) .mascot-help { visibility: hidden; }

    .tabbar__avatar {
        display: grid;
        place-items: center;
        inline-size: 1.6rem;
        block-size: 1.6rem;
        border-radius: 999px;
        border: 1.5px solid currentColor;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1;
    }

    /* The menu opens above the bar, on the right, under the thumb. */
    .tabbar__sheet {
        position: absolute;
        inset-inline-end: 0;
        inset-block-end: calc(100% + 0.5rem);
        inline-size: min(17rem, calc(100vw - var(--tabbar-gap) * 2));
        max-block-size: calc(100svh - var(--tabbar-height) - 3rem - env(safe-area-inset-top));
        overflow: auto;
        padding: var(--space-2xs);
        border: 1px solid var(--color-border);
        border-radius: 1.25rem;
        background: var(--color-surface);
        box-shadow: var(--shadow-md);
        animation: tabbar-sheet-in 0.16s ease-out;
    }

    .tabbar__sheet .account-menu__list { margin: 0; padding: 0; background: none; border: 0; }
    .tabbar__sheet .account-menu__list a,
    .tabbar__sheet .account-menu__signout { padding-block: 0.7rem; font-size: var(--text-base, 1rem); }

    .tabbar__sheet .tabbar__sheet-cart {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xs);
        font-weight: var(--weight-semibold, 600);
    }

    .tabbar__sheet-count {
        min-inline-size: 1.4rem;
        block-size: 1.4rem;
        padding: 0 0.4rem;
        border-radius: 999px;
        background: var(--color-accent);
        color: var(--cg-white);
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.4rem;
        text-align: center;
    }

    .tabbar__sheet-count.is-empty { display: none; }

    .tabbar__sheet .language-selector {
        margin-block-start: var(--space-2xs);
        padding: var(--space-xs) var(--space-sm) var(--space-2xs);
        border-block-start: 1px solid var(--color-border);
    }
}

@keyframes tabbar-sheet-in {
    from { opacity: 0; transform: translateY(0.4rem); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tabbar__sheet { animation: none; }
}