/* ================================================================
   Flora Nobilis — Responsive Mobile
   Carregado em último: sobrescreve regras de desktop quando necessário.
   Breakpoints: 768px (tablet/mobile), 480px (smartphones pequenos)
   ================================================================ */

/* ================================================================
   1. HAMBURGER BUTTON — invisível no desktop
   ================================================================ */

.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
}

.nav-hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--cor-primaria, #2d5016);
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.22s ease;
    transform-origin: center center;
    will-change: transform, opacity;
    pointer-events: none;
}

/* Animação: 3 barras → X quando aberto */
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ================================================================
   2. MOBILE DRAWER — overlay + painel deslizante
   ================================================================ */

.nav-mobile-drawer {
    display: none; /* ativado só no mobile via @media */
    position: fixed;
    inset: 0;
    z-index: 998; /* abaixo do header (1000), acima do conteúdo */
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.nav-mobile-drawer.is-open {
    opacity: 1;
    pointer-events: auto;
}

.nav-mobile-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-bottom: 1px solid rgba(45, 80, 22, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    transform: translateY(-110%);
    transition: transform 0.38s cubic-bezier(0.32, 0, 0.15, 1);
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

.nav-mobile-drawer.is-open .nav-mobile-drawer__panel {
    transform: translateY(0);
}

.nav-mobile-drawer__social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(45, 80, 22, 0.08);
}

.nav-mobile-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-mobile-drawer__link {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cor-primaria, #2d5016);
    text-decoration: none;
    border-radius: 12px;
    transition: background 0.15s ease;
    letter-spacing: 0.01em;
    font-family: var(--font-principal, 'Cormorant Garamond', Georgia, serif);
    -webkit-tap-highlight-color: transparent;
}

.nav-mobile-drawer__link:hover,
.nav-mobile-drawer__link:active {
    background: rgba(45, 80, 22, 0.07);
}

.nav-mobile-drawer__sep {
    height: 1px;
    background: rgba(45, 80, 22, 0.08);
    margin: 4px 0;
}

/* ================================================================
   3. HEADER — @media <= 768px
   ================================================================ */

@media (max-width: 768px) {

    /* Mostra hamburger */
    .nav-hamburger {
        display: flex;
    }

    /* Mostra overlay do drawer */
    .nav-mobile-drawer {
        display: block;
    }

    /* Esconde navs desktop */
    .nav.nav--left,
    .nav.nav--right {
        display: none !important;
    }

    /* Header: fixo no topo em qualquer página do mobile */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 0 0 12px 12px !important;
        z-index: 1000 !important;
    }

    /* Checkout: header relativo (scroll com a página — comportamento original) */
    .checkout-page .header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        border-radius: 0 !important;
    }

    /* Header content: logo absolutamente centrado */
    .header__content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 6px 0 4px;
        gap: 0;
    }

    /* Espaçador esquerdo para balancear o logo (espelha largura dos ícones à direita) */
    .header__content::before {
        content: '';
        display: block;
        width: 118px; /* 3 × 38px + 2 × 2px gap + margem */
        flex-shrink: 0;
    }

    /* Logo: posição absoluta e centrado horizontalmente */
    .header__content .logo.logo--home-link {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        pointer-events: auto;
    }

    .logo__text {
        white-space: nowrap;
        font-size: clamp(1.0rem, 4.5vw, 1.3rem) !important;
    }

    /* Actions: cart + user + hamburger em linha */
    .header__actions {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
        z-index: 2;
    }

    /* Botões touch-friendly */
    .carrinho-btn,
    .user-menu-btn,
    .user-menu-btn--link {
        min-width: 38px !important;
        min-height: 38px !important;
        width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    /* ================================================================
       4. HERO — corrige posicionamento absoluto
       ================================================================ */

    .hero {
        height: auto !important;
        min-height: 72vh;
        padding-top: 80px !important;
        padding-bottom: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Remove posicionamento absoluto do row.
       column-reverse: o texto (.hero__right) sobe pra CIMA dos botões
       (.hero__left), que continuam embaixo — pedido do cliente. */
    .hero__row {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px;
        padding: 0 20px;
        text-align: center;
    }
    /* Texto fixo/animado do hero: legível e acima dos botões */
    .hero__aside-text {
        background: rgba(0, 0, 0, 0.32);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        padding: 10px 16px;
        border-radius: 14px;
        color: #fff !important;
        font-size: clamp(0.95rem, 4vw, 1.15rem) !important;
        line-height: 1.4;
        max-width: 92%;
    }

    .hero__left,
    .hero__right {
        width: 100% !important;
        flex: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero__title {
        font-size: clamp(1.85rem, 9vw, 2.75rem) !important;
        text-align: center !important;
        line-height: 1.15;
    }

    .hero__subtitle {
        font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
        text-align: center !important;
    }

    .hero__cta {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100%;
    }

    /* ================================================================
       5. HOME — seções internas
       ================================================================ */

    /* Descricao feature cards */
    .descricao__grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* About / Sobre — classes reais do HTML: .sobre__text / .sobre__midia / .sobre__video */
    .sobre__content {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    .sobre__text,
    .sobre__midia {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Vídeo grande e proporcional no mobile (antes ficava pequeno/cortado) */
    .sobre__midia {
        order: 2;
        position: relative;
    }
    .sobre__video {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 16px;
        display: block;
    }

    /* Catalog CTA section */
    .descricao--catalogo-cta .descricao__grid {
        grid-template-columns: 1fr !important;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ================================================================
       6. LOJA
       ================================================================ */

    /* Filtros: scroll horizontal */
    .loja-page .filtros {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.25rem 0.9rem !important;
        margin-bottom: 1.25rem;
    }
    .loja-page .filtros::-webkit-scrollbar { display: none; }
    .loja-page .filtro-btn {
        flex-shrink: 0;
        font-size: 0.8rem !important;
        padding: 6px 14px !important;
        white-space: nowrap;
    }
    /* Hamburger sempre clicável acima de qualquer overlay/cena */
    .nav-hamburger { z-index: 1002 !important; position: relative; }

    /* Section title */
    .loja-page .secao-titulo {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    /* Cart dock: embaixo no mobile */
    .loja-cart-dock {
        top: auto !important;
        bottom: 12px !important;
        left: 8px !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-height: 55vh !important;
        border-radius: 18px !important;
    }
    .loja-page--cart-dock-right .loja-cart-dock,
    .loja-page--cart-dock-left .loja-cart-dock {
        left: 8px !important;
        right: 8px !important;
    }

    /* Padding superior na loja (header fixo + widgets) */
    .loja-page .arranjos.arranjos--pagina {
        padding-top: clamp(4.5rem, 12vh, 6rem) !important;
        padding-bottom: clamp(1.5rem, 4vh, 3rem) !important;
    }

    /* ================================================================
       7. CHECKOUT
       ================================================================ */

    .checkout-main {
        padding-top: var(--espacamento-lg, 1.5rem) !important;
        padding-bottom: 80px !important;
    }

    /* Layout 1 coluna */
    .checkout-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .checkout-row-cards {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .checkout-row-cards--top {
        grid-template-columns: 1fr !important;
    }

    .checkout-address-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Mapa menor */
    .checkout-map-frame {
        height: 140px !important;
    }

    /* Cards de informação */
    .checkout-info-card {
        padding: 16px 18px !important;
    }

    /* Login card */
    .login-card {
        border-radius: 12px;
        margin: 0 12px;
        padding: 22px 16px 36px;
    }

    /* Auth tabs (abas de login/cadastro) */
    .auth-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .auth-tabs::-webkit-scrollbar { display: none; }

    /* Header do checkout: logo + nav + slot */
    .header.header--checkout-page {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        z-index: 1000 !important;
    }

    /* Nav do checkout esconde no mobile */
    .header--checkout-page .header__nav {
        display: none !important;
    }

    /* Checkout header: logo + slot em linha */
    .header__wrapper--checkout {
        justify-content: space-between !important;
    }

    /* ================================================================
       8. CLIENTE
       ================================================================ */

    .cliente-main {
        padding-top: 80px !important;
    }

    .cliente-hero {
        padding: 20px 0 16px !important;
        margin-bottom: 14px !important;
    }
    .cliente-hero h1 {
        font-size: 22px !important;
    }
    .cliente-hero__content {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    /* 3 colunas → 1 coluna */
    .cliente-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Perfil: sem sticky */
    .cliente-profile {
        position: static !important;
        top: auto !important;
    }

    /* Esconde carrossel de produtos (coluna direita) */
    .cliente-carrossel-card {
        display: none !important;
    }

    /* Abas: scroll horizontal */
    .cliente-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 5px !important;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 14px;
    }
    .cliente-tabs::-webkit-scrollbar { display: none; }
    .cliente-tab {
        flex-shrink: 0;
        font-size: 12px !important;
        padding: 7px 12px !important;
        white-space: nowrap;
    }

    /* Avatar menor */
    .profile-avatar-wrap {
        width: 110px !important;
        height: 110px !important;
    }

    /* Formulário do perfil: 1 coluna */
    .profile-form .form-row,
    .profile-form .form-row--cols-2,
    .profile-form .form-row:first-of-type:not(.form-row--cols-2):not(.form-row--cols-3) {
        grid-template-columns: 1fr !important;
    }

    /* Header do cliente: altura fixa no mobile */
    .header--cliente {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        z-index: 1000 !important;
    }

    /* Layout do header do cliente no mobile */
    .header__wrapper--cliente {
        grid-template-columns: auto 1fr auto auto !important;
        grid-template-rows: auto !important;
        padding: 8px 12px !important;
        gap: 6px !important;
        align-items: center;
    }

    .header__logo--center {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-content: center;
    }

    .header__logo--center span {
        font-size: 15px !important;
    }

    /* Header do cliente: esconde links laterais e botão Sair (ficam no drawer) */
    .header--cliente .nav__link--side {
        display: none !important;
    }
    .header--cliente .header__logout {
        display: none !important;
    }

    /* Header do cliente: flexbox simples com logo + hamburger */
    .header__wrapper--cliente {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: unset !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 14px !important;
        gap: 8px !important;
    }

    .header--cliente .header__logo--center {
        position: static !important;
        transform: none !important;
        grid-column: unset !important;
        grid-row: unset !important;
        flex: 1;
        justify-content: center;
    }

    /* Hamburger do cliente: branco (fundo escuro do header) */
    .header--cliente .nav-hamburger__bar {
        background: var(--cor-primaria, #2d5016);
    }

    /* Cart dock do cliente */
    .cliente-page--cart-dock.loja-page--cart-dock-left .loja-cart-dock,
    .cliente-page--cart-dock .loja-cart-dock {
        top: auto !important;
        bottom: 12px !important;
        left: 8px !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
    }

    /* ================================================================
       9. MODAIS — bottom-sheet no mobile
       ================================================================ */

    .modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal__content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        overflow-y: auto;
    }

    .modal__content--extra-grande,
    .modal__content--produto {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
    }

    /* Produto: layout vertical */
    .produto-detalhes {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .produto-detalhes__coluna-img {
        width: 100% !important;
        max-width: 100% !important;
    }
    .produto-detalhes__coluna-info {
        width: 100% !important;
    }
    .produto-detalhes__descricao-bloco {
        width: 100% !important;
    }

    .modal__header h2 {
        font-size: 1.1rem !important;
    }

    /* ================================================================
       10. GLOBAIS
       ================================================================ */

    /* Previne zoom automático no iOS ao focar inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }

    /* Container padding lateral */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Títulos de seção */
    .secao-titulo {
        font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
    }

    /* Cookie banner */
    .fn-cookie-banner__panel {
        flex-direction: column !important;
        padding: 16px !important;
        gap: 12px !important;
        border-radius: 20px 20px 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .fn-cookie-banner {
        padding: 0 !important;
    }
    .fn-cookie-banner__actions {
        width: 100% !important;
    }
    .fn-cookie-banner__accept {
        width: 100% !important;
        text-align: center;
    }

    /* Rosa pop (balãozinho da loja) */
    .fn-rosa-pop {
        width: 92px !important;
        left: 8px !important;
        bottom: 80px !important; /* evitar sobreposição com cart dock no mobile */
    }

    /* Evita overflow horizontal */
    .loja-page .container,
    .checkout-page .container {
        max-width: 100% !important;
    }

    /* ================================================================
       ANTI-OVERFLOW GLOBAL — telas "gigantes" no mobile vêm de algum
       elemento mais largo que a viewport. Trava a largura.
       ================================================================ */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    img, video, table, iframe, .container, .cliente-grid, .profile-form {
        max-width: 100% !important;
    }

    /* ================================================================
       RODAPÉ — centralizar tudo no mobile (de "Nossa floricultura" pra baixo)
       ================================================================ */
    .site-footer__intro {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 28px !important;
    }
    .site-footer__brand,
    .site-footer__info-col,
    .site-footer__map-col {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .site-footer__contact-row,
    .site-footer__nav-flow,
    .site-footer__nav-mini,
    .fn-social-rodape,
    .site-footer__bottom {
        justify-content: center !important;
        text-align: center !important;
    }
    .site-footer__address,
    .fn-horario,
    .site-footer__tagline {
        text-align: center !important;
        width: 100%;
    }
    /* Mapa e CTA centralizados e sem estourar a largura */
    .site-footer__map-wrap,
    .site-footer__pop-cta {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }

} /* fim @media (max-width: 768px) */


/* ================================================================
   11. SMARTPHONES PEQUENOS — @media <= 480px
   ================================================================ */

@media (max-width: 480px) {

    .hero {
        min-height: 65vh;
        padding-top: 70px !important;
        padding-bottom: 36px !important;
    }

    .hero__title {
        font-size: clamp(1.65rem, 9vw, 2.25rem) !important;
    }

    .logo__text {
        font-size: clamp(0.92rem, 4.5vw, 1.1rem) !important;
    }

    .header__actions {
        gap: 0 !important;
    }

    /* Cart dock menor */
    .loja-cart-dock {
        max-height: 50vh !important;
    }

    /* Checkout cards compactos */
    .checkout-info-card {
        padding: 14px 14px !important;
        border-radius: 12px !important;
    }

    /* Modal quase full screen */
    .modal__content {
        max-height: 93vh !important;
    }

    /* Seção de entrega */
    .entrega-tipo-card {
        padding: 10px 12px !important;
    }

    /* Títulos menores */
    .secao-titulo {
        font-size: clamp(1.35rem, 8vw, 1.8rem) !important;
    }

    /* Login card sem margin lateral */
    .login-card {
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh;
        box-shadow: none !important;
    }

    /* Testemunhos */
    .testemunho-card {
        width: min(78vw, 280px) !important;
    }

    /* Rastreio cliente: tela pequena */
    #rastreio-cliente,
    #rastreio-pill {
        right: 8px !important;
        top: 70px !important;
    }

    /* Padding cliente hero */
    .cliente-hero {
        padding: 14px 0 12px !important;
    }
    .cliente-hero h1 {
        font-size: 19px !important;
    }

} /* fim @media (max-width: 480px) */


/* ================================================================
   12. CORREÇÕES FINAIS MOBILE (vêm por último — vencem style.css)
   ================================================================ */
@media (max-width: 768px) {

    /* ---- HEADER: estava virando "filete". O style.css põe flex-wrap:wrap
       no .header__content, que colapsa a altura. Forçamos linha única + altura. */
    .header__content {
        flex-wrap: nowrap !important;
        min-height: 56px !important;
        padding: 8px 10px !important;
        gap: 4px !important;
    }
    .header {
        min-height: 56px !important;
    }
    /* Hamburger sempre visível e tocável */
    .nav-hamburger {
        display: flex !important;
        z-index: 1003 !important;
    }

    /* ---- HERO: título (com a palavra animada) SEMPRE acima dos botões.
       O style.css deixa .hero__content height:100% e .hero__row absolute;
       aqui forçamos empilhamento limpo: título → texto → botões. */
    .hero__content {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        width: 100% !important;
    }
    .hero__title {
        position: static !important;
        order: 1 !important;
        width: 100% !important;
        margin: 0 !important;
        /* CRÍTICO: o desktop usa translate(-50%,-50%) que, com width:100%,
           jogava o título pra fora da tela à esquerda. Resetar tudo. */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }
    .hero__row {
        order: 2 !important;
        position: relative !important;
        top: auto !important; left: auto !important; transform: none !important;
        flex-direction: column-reverse !important;  /* aside-text acima, botões abaixo */
    }

    /* ================================================================
       PERFIL / CLIENTE — eliminar overflow horizontal de vez.
       Causa clássica: itens de grid/flex têm min-width:auto e não encolhem.
       ================================================================ */
    .cliente-main,
    .cliente-grid,
    .cliente-content,
    .cliente-profile,
    .profile-form,
    .cliente-content .card,
    .cliente-tabs {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    /* TODOS os form-rows viram 1 coluna no celular */
    .profile-form .form-row,
    .profile-form .form-row--cols-2,
    .profile-form .form-row--cols-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    /* Itens de grid/flex podem encolher (sem isso, estouram a tela) */
    .form-group,
    .form-row > * {
        min-width: 0 !important;
    }
    .form-group input,
    .form-group select,
    .form-group textarea,
    .profile-form input,
    .profile-form select,
    .profile-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    /* Camada de fundo do cliente usava 100vw (inclui scrollbar → overflow) */
    .fundo-cliente-layer {
        width: 100% !important;
    }

    /* ---- LOJA: hambúrguer estava colado na borda direita (difícil abrir).
       Dá respiro só na loja (a home já está com espaçamento bom). ---- */
    .loja-page .header__content {
        padding-right: 16px !important;
        padding-left: 12px !important;
    }
    .loja-page .header__actions {
        gap: 6px !important;
        margin-right: 4px !important;
    }

    /* ---- LOJA: categorias caberem SEM cortar. Em vez de scroll lateral
       (que cortava o "Outros"), deixamos quebrar em linhas, centralizado. ---- */
    .loja-page .filtros {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 8px 4px !important;
        max-width: 100% !important;
    }
    .loja-page .filtro-btn {
        font-size: 0.78rem !important;
        padding: 6px 13px !important;
    }

    /* ---- HERO: o título (com a palavra animada nowrap) cortava nas laterais.
       Usa toda a largura com leve padding e pode quebrar linha. ---- */
    .hero__title {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    .hero__title-static,
    .hero__title-dynamic {
        white-space: normal !important;
    }

    /* ---- CLIENTE: abas de seção (Endereços, Pagamentos, Preferências,
       Meus Pedidos, Avaliação...) sem scroll lateral escondido. Quebram em
       linhas, todas visíveis de uma vez, centralizadas. ---- */
    .cliente-tabs {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        justify-content: center !important;
        gap: 8px !important;
        padding-bottom: 0 !important;
    }
    .cliente-tab {
        flex: 0 1 auto !important;
        font-size: 12.5px !important;
        padding: 8px 12px !important;
        white-space: normal !important;
        text-align: center;
    }

} /* fim correções finais mobile */