/* =====================================================================
   styleResponsiveBase.css  —  frontMarketplace
   Camada responsiva compartilhada de TODAS as telas do marketplace.

   COMO FUNCIONA
   -------------
   Este arquivo é o ÚLTIMO stylesheet do documento (fim do
   templates/fragments/head.html, depois do tema light/dark e do cssFile da
   página). Os CSS por tela foram escritos desktop-first e repetem entre si
   os mesmos blocos com medidas fixas (`.all-cart-content { width: 1300px }`
   aparece em 13 arquivos, por exemplo). Corrigir tela a tela significaria
   replicar a mesma correção dezenas de vezes.

   A estratégia é manter o desktop EXATAMENTE como está e adicionar por cima
   o comportamento mobile-first que falta. Fora umas poucas regras de
   segurança que só agem quando o conteúdo já estouraria, tudo vive dentro
   de media queries `max-width` — acima de 1400px este arquivo praticamente
   não existe.

   ESCALA DE DISPOSITIVOS
   ----------------------
     <=340   celular muito pequeno (Galaxy Fold fechado, iPhone SE 1ª ger.)
     <=380   celular pequeno
     <=480   celular
     <=767   celular grande / phablet
     <=991   tablet retrato  (aqui a navbar do Bootstrap colapsa)
     <=1399  notebook
     >=1400  desktop  -> layout original preservado

   OBSERVAÇÃO IMPORTANTE SOBRE `overflow-x: hidden`
   ------------------------------------------------
   `light.css`/`dark.css` já aplicam `overflow-x: hidden` em `html, body`.
   Isso escondia a barra de rolagem, mas NÃO resolvia nada: o conteúdo largo
   demais continuava lá, apenas cortado e inalcançável (o corpo do carrinho,
   por exemplo, tinha 1300px fixos dentro de uma tela de 390px). As regras
   abaixo atacam a largura em si, não o sintoma.
   ===================================================================== */


/* =====================================================================
   1. BASE — sem efeito visual no desktop
   ===================================================================== */

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
video,
svg,
canvas,
iframe,
embed,
object {
    max-width: 100%;
}

/* <textarea> usa o atributo `cols` (não a largura do container) e
   <input type="file"> tem largura intrínseca grande. */
textarea,
input[type="file"] {
    max-width: 100%;
}

/* CAUSA-RAIZ Nº 1 DO CONTEÚDO CORTADO NO MOBILE
   ---------------------------------------------
   `.all-cart-content` (13 arquivos) e `.all-cart-content-page` são o
   invólucro do conteúdo de carrinho, pedidos, aprovações e preferências, e
   estavam com `width: 1300px` fixo. Virar teto em vez de medida fixa não
   muda nada acima de 1300px. */
.all-cart-content,
.all-cart-content-page {
    width: 100% !important;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* O invólucro da index (`<div class="flex-grow-1">` ao lado do drawer) é um
   item flex e herda `min-width: auto`, então nunca encolhia. */
#content > .d-flex > .flex-grow-1,
#content > .d-flex > #flex-drawer-sidebar {
    min-width: 0;
}

/* Drawer recolhido: 40px de largura com ~120px de conteúdo dentro. O
   conteúdo já rola internamente, mas ainda vazava alguns pixels para a
   largura da página. */
.sidebar.collapsed {
    overflow: hidden;
}

/* A navbar é Bootstrap 5 no HTML, mas o bootstrap.min.css local (v4) é
   carregado DEPOIS do CDN v5 e vence. Em BS4 `.row` tem `margin: 0 -15px`
   fixo, então os utilitários de calha do BS5 (`g-0`, `gx-0`) não têm efeito
   e a linha vaza 15px de cada lado. */
.row.g-0,
.row.gx-0 {
    margin-left: 0;
    margin-right: 0;
}

.row.g-0 > *,
.row.gx-0 > * {
    padding-left: 0;
    padding-right: 0;
}

/* Campo de busca do header: tem `width: 480px` inline. Como é inline, só um
   `!important` de folha de estilo consegue transformá-lo em fluido. */
.navbar .form-control[type="search"],
.navbar input[type="search"] {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* SP20-057: a cor dos botões-ícone do header é do TEMA, e de mais ninguém.
   -------------------------------------------------------------------
   Carrinho e pessoa são <a>, e o CSS da tela de login tinha um
   `a { color: #0b93f2 !important }` global — na tela de login os dois
   apareciam azuis ao mesmo tempo, como se houvesse duas ações ativas.
   A causa foi corrigida na origem (as regras lá agora são `#content a`);
   esta é a garantia de que nenhum outro CSS de página volte a repintá-los:
   como esta é a ÚLTIMA folha carregada, o `!important` daqui vence.

   O hover/foco continua sendo do tema (uma cor diferente por vez, e só no
   botão sob o dedo), então também vem de variável em vez de ser engessado.
   Ver `--mtm-header-icon` em light.css / dark.css. */
.navbar .mtm-icon-btn {
    color: var(--mtm-header-icon, #ffffff) !important;
}

.navbar .mtm-icon-btn:hover,
.navbar .mtm-icon-btn:focus-visible {
    color: var(--mtm-header-icon-hover, #ffffff) !important;
}

/* Itens da navbar precisam poder encolher/quebrar. Sem isso o menu expandido
   media 1046px e furava a tela já num notebook de 1024px. */
.navbar-collapse,
.navbar-nav,
.navbar .form-control,
.navbar form {
    min-width: 0;
}

.navbar-nav {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Cartões de método de pagamento com piso de 420px. */
.pmethod-trigger,
.custom-card-select {
    min-width: 0 !important;
    max-width: 100%;
}

/* Tabelas rolam dentro do próprio wrapper, nunca na página. */
.table-container,
.table-responsive {
    overflow-x: auto;
    max-width: 100%;
}

/* `1fr` é atalho de `minmax(auto, 1fr)`: o `auto` impede a trilha de
   encolher abaixo do min-content do conteúdo. Nas telas de produto, a
   grade já caía para 1 coluna no mobile e mesmo assim vazava 90px, porque
   a galeria de imagens segurava a trilha. */
.product-detail-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-detail-container > * {
    min-width: 0;
}

/* Linhas horizontais montadas com utilitários do Bootstrap, com classes
   próprias ou com `style="display: flex"` inline. Sem `flex-wrap` elas
   empurram o conteúdo para fora: a linha de itens do carrinho media 792px
   dentro de um cartão de 681px num iPad, e a linha do cupom estourava a
   coluna já num notebook de 1024px.
   Fica sem media query de propósito — `flex-wrap: wrap` só muda alguma
   coisa quando a linha JÁ não cabe, então no desktop é inócuo.
   O seletor de atributo é necessário porque o `display: flex` está inline
   no HTML (com e sem espaço depois dos dois-pontos); restrito a containers
   para não afetar botões e links com ícone. */
.d-flex.align-items-center,
.d-flex.justify-content-between,
.d-flex.justify-content-end,
.error-container,
.empty-container,
.payment-header,
.address-header,
.card-header,
div[style*="display: flex"],
div[style*="display:flex"],
section[style*="display: flex"],
section[style*="display:flex"],
main[style*="display: flex"],
form[style*="display: flex"] {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap !important;
}

/* Animações/GIFs decorativos com medida própria. */
.animationCart,
.animationCart img {
    max-width: 100%;
    height: auto;
}

/* Campos com largura fixa herdada do atributo `size` do <input>: o
   `.txt_field` já limita a 120px, mas o input dentro media 215px e
   transbordava a caixa. */
.txt_field,
.form-group {
    min-width: 0;
}

.txt_field input,
.txt_field select,
.form-group input,
.form-group select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}


/* =====================================================================
   2. NOTEBOOK  (<=1399px)
   Faixa em que a navbar ainda está expandida (`navbar-expand-lg` = >=992px)
   mas o conjunto logo + menu + busca de 480px + área do usuário não cabe.
   ===================================================================== */
@media only screen and (max-width: 1399px) {

    .navbar .form-control[type="search"],
    .navbar input[type="search"] {
        width: 100% !important;
    }

    .navbar form.d-flex,
    .navbar form[role="search"] {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 240px;
        flex: 1 1 240px;
        min-width: 0;
    }

    .navbar .container-fluid {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8px;
    }
}


/* =====================================================================
   3. TABLET RETRATO  (<=991px)
   A navbar do Bootstrap colapsa aqui (botão hambúrguer).
   ===================================================================== */
@media only screen and (max-width: 991px) {

    /* `.logo-img` era `height: 70px; width: auto`. Com a proporção do logo
       (~5,6:1) isso dá 393px de largura — mais que a tela inteira de
       qualquer celular. Passa a ser limitado pela largura. */
    .logo-img {
        height: auto !important;
        /* Teto em px puro, não `min(180px, 100%)`. O percentual se resolvia
           contra o .navbar-brand, cuja largura vem justamente do conteúdo —
           circular. Na medida do item flex o navegador descarta o percentual
           e usa a largura intrínseca da imagem (275px), então a marca era
           dimensionada por ela e só depois cortada pelo próprio teto,
           sobrando espaço vazio ao lado da logo. */
        max-width: 180px;
    }

    .navbar-brand {
        /* A marca precisa medir exatamente a logo. Duas coisas a inchavam:
           o `max-width` era um percentual da navbar (não tinha relação com a
           imagem), e o <a> guarda as DUAS variantes de tema — a oculta some
           com `display:none`, mas o whitespace entre os dois <img> continuava
           sendo um nó de texto medindo `font-size: 1.75rem`.
           Como flex container, o whitespace some; `font-size: 0` cobre o caso
           de a caixa voltar a ter conteúdo inline. */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 0;
        padding-top: 0;
        padding-bottom: 0;
        /* Sem teto próprio em px: a marca mede o conteúdo, e o conteúdo é a
           logo. Assim ela acompanha automaticamente os tetos de `.logo-img`
           de cada breakpoint (180 / 140 / 112 / 96) sem repeti-los aqui. */
        max-width: 100%;
        margin-right: 8px !important;
        /* pode encolher; sem `min-width: 0` um item flex nunca fica menor
           que o conteúdo e a barra de ícones era empurrada para a linha de
           baixo */
        -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* SP20-046/047/048: lupa, localização, carrinho e hambúrguer ficam SEMPRE
       na mesma linha da logo — nunca quebram para uma segunda faixa. */
    .mtm-mobile-actions {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .navbar-collapse .navbar-nav {
        margin-left: 0 !important;
    }

    .navbar-collapse .nav-link {
        margin-left: 0 !important;
    }

    .navbar .form-control[type="search"],
    .navbar input[type="search"] {
        width: 100% !important;
    }

    /* O drawer lateral é `position: fixed` e some no colapso; o conteúdo
       ocupa a largura toda. */
    #flex-drawer-sidebar {
        min-height: 0 !important;
    }

    /* `.row` do BS4 tem margem -15px contando com 15px de padding no
       container — que nem sempre existe aqui. */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row > [class*="col-"],
    .row > .col {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Grades de cartões viram colunas fluidas. */
    .products-grid,
    .product-grid,
    .cards-grid,
    .orders-grid,
    .business-grid,
    .showcase-grid,
    .favorites-grid,
    .addresses-grid,
    .payment-methods-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
    }

    .product-detail-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* =====================================================================
   4. CELULAR GRANDE / PHABLET  (<=767px)
   ===================================================================== */
@media only screen and (max-width: 767px) {

    .logo-img {
        max-width: 140px;
    }

    .navbar {
        padding-top: 12px !important;
    }

    .navbar .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Área direita do header (endereço, saudação, carrinho) quebra. */
    .navbar .d-flex.align-items-center {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    #loginUserMessage {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* --- conteúdo -------------------------------------------------- */
    .all-cart-content,
    .all-cart-content-page,
    .main-content,
    .container,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* SP20-061: `.center-content-style` deixa de existir no celular.
       -------------------------------------------------------------------
       Ele é um invólucro de CENTRALIZAÇÃO para telas largas
       (`max-width: 1600px; margin: auto`) e os temas ainda lhe dão
       `padding: 50px`. Num celular não há o que centralizar: o que sobra é
       um recuo de 50px por lado que estreita o conteúdo, empurra o h1 da
       tela de produtos para longe da drawer e faz essa tela parecer menor
       que todas as outras — que não têm este invólucro.

       Zerado, `.main-content` volta a medir a coluna inteira, igual às
       demais telas. */
    .center-content-style {
        max-width: none;
        margin: 0;
        padding: 0;
        background: none;
    }

    /* Nenhum fundo próprio no celular: o `.main-content` é transparente e
       quem pinta é o tema, no <body>. */
    .main-content {
        background-color: transparent;
    }

    /* `.row` do BS4 tem margem -15px e conta com 15px de padding no
       container para compensar. No marketplace nem toda `.row` está dentro
       de um `.container`, então a margem negativa vazava para fora da tela.
       No celular a calha é zerada e o recuo passa a ser das colunas. */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row > [class*="col-"],
    .row > .col {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* --- ilustração dos cards de estado vazio (carrinho vazio, sem pedidos,
       sem favoritos, produto não encontrado...) ---
       O .animationCart não tinha NENHUMA regra de CSS: o GIF era exibido no
       tamanho natural dentro de um flex, espremendo o texto e o botão
       "Continue Shopping" contra a borda no celular.

       No celular ele sai. É ilustração decorativa e, na largura disponível,
       compete com a única coisa que importa ali — a mensagem e a ação de
       saída. A mesma classe é usada por todos os cards de estado vazio, então
       a regra vale para todos eles. */
    .animationCart {
        display: none !important;
    }

    /* Sem a ilustração o conteúdo passa a ocupar a largura inteira e
       centralizado, em vez de ficar espremido à esquerda. */
    .empty-container {
        -ms-flex-direction: column;
        flex-direction: column !important;
        text-align: center;
    }

    /* --- passos do checkout (Cart > Stock > Address > ... > Review) ---
       Os 7 itens `flex: 1` não cabem numa linha no celular: cada rótulo
       ("Stock Confirmation") segura o min-content e a régua saía da tela.

       A tentativa anterior foi quebrar em 3 por linha, mas isso desfaz a
       leitura de PERCURSO — os traços que ligam um step ao seguinte tinham de
       ser escondidos, porque cruzariam linhas, e o usuário perdia a noção de
       onde está na sequência.

       Agora a régua fica em UMA linha com rolagem horizontal. Os traços
       voltam, e o JS posiciona a rolagem no step atual (ver checkoutSteps.js),
       que é o ponto que interessa a quem chega na tela. */
    .checkout-steps {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap !important;
        gap: 8px;
        padding: 0.6rem !important;

        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        /* Sem barra visível: o conteúdo já indica que corre (os steps são
           cortados na borda), e a barra roubaria altura da régua. */
        scrollbar-width: none;
    }

    .checkout-steps::-webkit-scrollbar {
        display: none;
    }

    .step {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        /* Largura fixa: com `flex: 1` os steps se espremeriam para caber e a
           rolagem nunca aconteceria. */
        flex: 0 0 88px !important;
        min-width: 88px !important;
        scroll-snap-align: center;
    }

    /* Os traços voltam a fazer sentido agora que a régua é uma linha só —
       a regra que os escondia no mobile vive em styleCheckoutSteps.css. */
    .checkout-steps .step:not(:last-child)::after {
        display: block !important;
    }

    .step-label {
        font-size: 11px !important;
    }

    .step-icon {
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 15px !important;
    }

    /* Paginação e filtros em linha quebram em vez de vazar. */
    .pagination,
    .inline-select-filter {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* A paginação continua centralizada. */
    .pagination {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center !important;
    }

    /* O filtro de ordenação fica à ESQUERDA da sua linha.
       A SP20-062 pedia à direita e era isto que este bloco garantia; o
       cliente reviu: à esquerda ele alinha com o título e com a coluna de
       cards, em vez de ficar solto no canto oposto ao resto do conteúdo.

       O `!important` continua necessário — sem ele, o `justify-content:
       center` que vem de carona no ajuste de `flex-wrap` logo acima venceria,
       porque esta é a última folha carregada. */
    .inline-select-filter {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start !important;
        /* Linha própria, abaixo do título. Sem isto o filtro continua inline
           na .header-bar e encostado na borda direita entre 601px e 767px —
           e ali a lista aberta VAZAVA da tela, porque abre para a esquerda a
           partir de um controle já colado na margem direita. */
        width: 100% !important;
    }

    /* Permite que o filtro caia para a linha de baixo em vez de disputar a
       linha do título. */
    .header-bar {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    /* O ícone de filtro sai no celular: só decora (o próprio seletor já diz
       o que faz) e comia largura de uma linha estreita. */
    .inline-select-filter i {
        display: none !important;
    }

    /* A lista aberta ancora na ESQUERDA do controle. Com o controle agora
       nesse lado, ela cresce para dentro da tela — o corte que a SP20-052
       tratava acontecia com o controle colado na borda DIREITA. */
    .inline-select-filter .nice-select .list {
        left: 0 !important;
        right: auto !important;
    }

    /* Linhas utilitárias do Bootstrap usadas como barras de ação. */
    .d-flex.align-items-center,
    .d-flex.justify-content-between,
    .d-flex.justify-content-end {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .input-group {
        max-width: 100% !important;
    }

    /* `.userAccountFormGroup` é `width: 100%` COM `margin: 15px`: a margem
       não entra no box-sizing, então o bloco sempre mediu 30px a mais que o
       pai. No desktop sobrava folga e não aparecia; no celular vaza. */
    .userAccountFormGroup {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Blocos "vazio / sem resultados": texto + ilustração lado a lado. */
    .error-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center !important;
    }

    .error-container > * {
        min-width: 0;
    }

    /* Colunas lado a lado dos fluxos de carrinho/checkout empilham. */
    .cart-columns,
    .checkout-columns,
    .cart-layout,
    .checkout-layout,
    .product-layout,
    .two-columns {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .products-grid,
    .product-grid,
    .cards-grid,
    .orders-grid,
    .business-grid,
    .showcase-grid,
    .favorites-grid,
    .addresses-grid,
    .payment-methods-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)) !important;
    }

    /* SP20-060: no celular são DOIS produtos por linha, exatamente.
       `auto-fill` decidia o número de colunas pela largura disponível, então
       o mesmo aparelho mostrava 2, 3 ou 4 cartões por linha conforme a
       drawer, o gutter e a orientação — e com 4 o cartão ficava estreito
       demais para o título e os botões. Contagem fixa acaba com isso.
       Restrito às grades de PRODUTO: pedidos, endereços e pagamentos têm
       cartões de texto, que continuam fluidos. */
    .products-grid,
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Itens de flex/grid precisam poder encolher. */
    .all-cart-content > *,
    .all-cart-content-page > *,
    .main-content > *,
    .product-info > *,
    .card > * {
        min-width: 0;
    }

    /* Linhas horizontais de ação. */
    .btn-group,
    .action-buttons,
    .card-actions,
    .order-actions,
    .product-actions,
    .payment-actions,
    .address-actions {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap !important;
    }

    /* Títulos sem estilo próprio (padrão Bootstrap h1 = 2.5rem) não cabem
       numa linha de 320px. Sem `!important`: qualquer regra de página
       continua tendo precedência. */
    h1 {
        font-size: clamp(22px, 7vw, 34px);
    }

    h2 {
        font-size: clamp(20px, 6vw, 28px);
    }

    h3 {
        font-size: clamp(17px, 5vw, 22px);
    }

    h1, h2, h3, h4, h5, p, span, a, label, li, td, th {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Modais ocupam a tela quase toda. */
    .modal-dialog {
        margin: 12px !important;
        max-width: calc(100% - 24px) !important;
    }

    .modal-content {
        max-height: 88vh;
        max-height: 88dvh;
        overflow-y: auto;
    }
}


/* =====================================================================
   5. CELULAR  (<=480px)
   ===================================================================== */
@media only screen and (max-width: 480px) {

    /* SP20-046/047/048 exigem logo e ícones SEMPRE na mesma faixa. A partir
       daqui a soma (logo + margem + 4 botões + gaps) começa a passar da
       largura útil do container, então logo e ícones encolhem juntos. Os
       tetos de cada faixa foram medidos no Chrome contra a largura útil real
       do `.navbar .container-fluid`. */
    .logo-img {
        max-width: 100px;
    }

    .navbar-brand {
        margin-right: 4px !important;
    }

    .mtm-mobile-actions {
        gap: 4px;
    }

    .mtm-icon-btn {
        width: 40px;
        height: 40px;
    }

    .navbar .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .row {
        margin-left: -10px;
        margin-right: -10px;
    }

    .row > [class*="col-"],
    .row > .col {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* iOS dá zoom automático ao focar campo com fonte < 16px e não volta
       ao zoom original depois. */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Alvos de toque de ~44px (WCAG 2.5.5). Restrito a botões de ação —
       botões-ícone pequenos ficam de fora de propósito. */
    .btn,
    a.btn,
    button[type="submit"],
    input[type="submit"],
    .navbar-toggler {
        min-height: 44px;
    }

    #loginUserMessage {
        max-width: 110px;
        font-size: 0.85rem;
    }

    .products-grid,
    .product-grid,
    .cards-grid,
    .orders-grid,
    .business-grid,
    .showcase-grid,
    .favorites-grid,
    .addresses-grid,
    .payment-methods-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)) !important;
    }

    /* =================================================================
       CARD DE PRODUTO HORIZONTAL (imagem à esquerda)
       -----------------------------------------------------------------
       Substitui o "dois por linha" da SP20-060 NESTA faixa (<=480px).
       A decisão anterior evitava 3 ou 4 cartões por linha, que ficavam
       estreitos demais; mas dois numa tela de 360px ainda deixam ~150px
       úteis por cartão — a foto de 200px de altura sobre 150px de
       largura vira uma tarja, o título quebra em quatro linhas e os
       botões empilham.

       Em vez de encolher, o cartão DEITA: foto à esquerda, informações
       à direita, um por linha. De 481px a 767px continuam os dois por
       linha da SP20-060.
       ================================================================= */
    .products-grid,
    .product-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .products-grid > .product-card,
    .product-grid > .product-card {
        -ms-flex-direction: row;
        flex-direction: row !important;
        height: auto;
    }

    .products-grid > .product-card > .product-image-container,
    .product-grid > .product-card > .product-image-container {
        /* largura fixa e altura livre: a foto acompanha o texto ao lado,
           sem deixar vão branco quando as informações são curtas */
        -ms-flex: 0 0 132px;
        flex: 0 0 132px !important;
        width: 132px;
        height: auto !important;
        min-height: 124px;
    }

    .products-grid > .product-card > .product-info,
    .product-grid > .product-card > .product-info {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;  /* deixa o texto encolher em vez de estourar o cartão */
    }

    /* No formato deitado os botões ficam lado a lado, o que economiza a
       altura que a foto passou a exigir. `nowrap`: são só dois (View Details
       e carrinho) e têm de dividir UMA linha — com `wrap`, o carrinho caía
       para baixo assim que o texto do primeiro apertava. */
    .products-grid > .product-card .product-actions,
    .product-grid > .product-card .product-actions {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .card,
    .product-card,
    .order-card,
    .address-card,
    .payment-card {
        padding: 12px !important;
        min-width: 0 !important;
    }
}


/* =====================================================================
   6. CELULAR PEQUENO  (<=380px)
   Faixa praticamente inexistente no projeto (só styleHome.css e
   styleLoginAndSignup.css tinham alguma regra abaixo de 480px).
   ===================================================================== */
@media only screen and (max-width: 380px) {

    .logo-img {
        max-width: 88px;
    }

    .mtm-mobile-actions {
        gap: 3px;
    }

    .mtm-icon-btn {
        width: 38px;
        height: 38px;
    }

    .navbar .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .row > [class*="col-"],
    .row > .col {
        padding-left: 8px;
        padding-right: 8px;
    }

    .all-cart-content,
    .all-cart-content-page,
    .main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Blocos "sem resultados" têm 40px de recuo de cada lado: numa tela de
       280px sobravam 41px de área útil e o texto interno (flex: 1) não
       cabia de jeito nenhum. */
    .error-container,
    .empty-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Só `min-width` aqui: forçar `flex-basis: 100%` em tudo dentro de
       `.error-container` faz o <form> do myAccount ocupar exatamente a
       largura do pai, e aí o `.userAccountFormGroup` (width: 100% mais
       15px de margem de cada lado) passa a estourar. Deixar o item
       encolher já resolve o caso que motivou a regra. */
    .error-container > *,
    .empty-container > * {
        min-width: 0 !important;
    }

    #loginUserMessage {
        display: none !important;
    }

    /* Uma coluna: dois cartões lado a lado já não cabem sem cortar texto. */
    .products-grid,
    .product-grid,
    .cards-grid,
    .orders-grid,
    .business-grid,
    .showcase-grid,
    .favorites-grid,
    .addresses-grid,
    .payment-methods-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Dois passos por linha em vez de três. */
    .step {
        -ms-flex: 0 0 calc(50% - 8px);
        flex: 0 0 calc(50% - 8px) !important;
    }

    .card,
    .product-card,
    .order-card,
    .address-card,
    .payment-card {
        padding: 10px !important;
    }

    label,
    .form-label {
        font-size: 13px !important;
    }

    input,
    select,
    textarea {
        padding: 9px 10px !important;
    }
}


/* =====================================================================
   7. CELULAR MUITO PEQUENO  (<=340px)
   Galaxy Fold fechado (280px) e iPhone SE 1ª geração (320px).
   ===================================================================== */
@media only screen and (max-width: 340px) {

    /* Faixa mais apertada (Galaxy Fold fechado, 280px): a largura útil cai
       para ~221px e os 4 botões sozinhos já ocupavam 188px. Aqui a logo cede
       mais que nas outras faixas para o conjunto caber numa linha só. */
    .logo-img {
        max-width: 64px;
    }

    /* a marca não precisa de teto próprio aqui: ela mede a `.logo-img` acima */

    .mtm-mobile-actions {
        gap: 2px;
    }

    /* abaixo do alvo de toque de 44px recomendado, mas é o que cabe: sem isso
       os ícones caem para uma segunda faixa e o header dobra de altura */
    .mtm-icon-btn {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .navbar .container-fluid,
    .container,
    .container-fluid {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .row {
        margin-left: -6px;
        margin-right: -6px;
    }

    .row > [class*="col-"],
    .row > .col {
        padding-left: 6px;
        padding-right: 6px;
    }

    .btn,
    a.btn,
    button[type="submit"] {
        font-size: 14px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .card *,
    .product-card *,
    .order-card * {
        min-width: 0 !important;
    }
}


/* =====================================================================
   8. CELULAR DEITADO (paisagem, pouca altura)
   ===================================================================== */
@media only screen and (orientation: landscape) and (max-height: 500px) {

    #flex-drawer-sidebar,
    .sidebar {
        min-height: 0 !important;
    }

    .modal-content {
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto;
    }

    .navbar {
        padding-top: 8px !important;
    }
}


/* =====================================================================
   9. DISPOSITIVOS DE TOQUE (sem hover)
   No toque não existe :hover — o que existe é o estado "grudado" depois do
   tap. Aqui os efeitos de elevação são neutralizados.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {

    .card:hover,
    .product-card:hover,
    .theme-toggle:hover,
    .btn:hover {
        -webkit-transform: none;
        transform: none;
    }

    a,
    button {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
    }
}


/* =====================================================================
   10. ÁREA SEGURA DO iPHONE (notch / barra inferior)
   Depende do `viewport-fit=cover` do fragments/head.html.
   ===================================================================== */
@supports (padding: env(safe-area-inset-bottom)) {

    @media only screen and (max-width: 767px) {
        footer {
            padding-bottom: calc(12px + env(safe-area-inset-bottom));
        }

        .mtm-fab {
            bottom: calc(12px + env(safe-area-inset-bottom)) !important;
            right: calc(12px + env(safe-area-inset-right)) !important;
        }
    }
}


/* =====================================================================
   11. MOVIMENTO REDUZIDO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================================
   12. CARDS x DRAWER  (SP20-045 / 050 / 051 / 053 / 054 / 055)
   ---------------------------------------------------------------------
   CAUSA-RAIZ COMUM DAS SEIS ISSUES
   A drawer é `position: fixed` (light.css/dark.css) e mora dentro de
   `#flex-drawer-sidebar`, que é apenas um placeholder flex. Como um
   elemento `fixed` sai do fluxo, o placeholder fica com largura ZERO —
   então a faixa de 40px da drawer recolhida (mais o botão de expandir,
   que ainda sobra 5px à direita dela) fica POR CIMA da borda esquerda do
   conteúdo.

   É isso que aparece nas capturas da homologação: o card branco cortado
   à esquerda, a aba azul da drawer invadindo o card, e o segundo card de
   produto empurrado para fora da viewport.

   A correção é reservar a largura da drawer no fluxo, num único lugar,
   em vez de compensar com margens em cada CSS de página.
   ===================================================================== */

:root {
    /* Largura da drawer recolhida (light.css: .sidebar.collapsed { width: 40px })
       + a folga do botão de expandir (.toggle-btn { right: 5px; width: 30px }). */
    --mtm-drawer-collapsed: 40px;
    --mtm-drawer-gutter: 12px;   /* "faixa fina" pedida entre drawer e card */
    --mtm-drawer-top: 10px;      /* .sidebar { margin-top: 10px } */
}

/* Reserva a faixa da drawer: o conteúdo nunca mais começa embaixo dela. */
#content > .d-flex > #flex-drawer-sidebar {
    /* o `fixed` de dentro não ocupa espaço, então o placeholder precisa
       ganhar a largura explicitamente */
    width: var(--mtm-drawer-collapsed);
    min-width: var(--mtm-drawer-collapsed);
}

/* SP20-045/054/055: faixa fina entre a drawer e o card, e topo do card
   alinhado ao topo da drawer.

   O respiro é SIMÉTRICO: só styleHome.css declarava `padding-right`, então
   nas telas que não carregam esse CSS (myAccount, addresses, payments...)
   o card encostava na borda direita da viewport enquanto sobrava a faixa
   da esquerda. Aqui a faixa direita passa a valer para todas as telas. */
#content > .d-flex > .flex-grow-1 {
    min-width: 0; /* deixa a coluna encolher em vez de estourar a viewport */
    padding-left: var(--mtm-drawer-gutter);
    padding-right: var(--mtm-drawer-gutter);
}

/* ---------------------------------------------------------------------
   SP20-050 / 051 / 053: estados vazios e card de payments centralizados
   na tela, com o meio na altura do botão de expandir da drawer (que é
   `top: 50%` da drawer, ou seja, o meio vertical).

   Antes: `margin: 200px auto` (empty-container) e `margin: 2rem auto`
   (error-container) — o card ficava colado no topo ou empurrado para
   fora em telas baixas, nunca centralizado.
   --------------------------------------------------------------------- */
.empty-container {
    /* o auto do eixo vertical + min-height do wrapper faz a centralização */
    margin: auto !important;
    max-width: 700px;
}

/* O wrapper precisa ter altura para o `margin: auto` vertical funcionar.

   Escopo importa: `all-cart-content` é usado por páginas que SÓ existem no
   estado vazio (cartEmpty, ordersEmpty, checkoutCancelled, orderCancelled),
   então ali a centralização pode ser incondicional.

   Já orders/businessOrders/myFavorites/userProducts mostram o card vazio sob
   th:if e têm conteúdo real no caso cheio — centralizar sempre entortaria a
   grade de produtos. Nessas, o template marca o wrapper com
   `.mtm-empty-state` apenas quando o estado vazio é renderizado. */
main.all-cart-content,
.mtm-empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 160px);
    min-height: calc(100dvh - 160px);
}

/* ---------------------------------------------------------------------
   SP20-054 / 055: cards de formulário (Manage Your Addresses, My Account,
   Manage Your Payment Methods) alinhados pelo TOPO com a drawer, com a
   faixa fina de distância — e não centralizados verticalmente.
   --------------------------------------------------------------------- */
.error-container {
    margin-top: var(--mtm-drawer-top) !important;
    margin-bottom: 24px !important;
}

/* Mesmo alinhamento para o card transparente da home do marketplace: ele
   começa na mesma altura em que a drawer começa (`.sidebar { margin-top:
   10px }`). styleHome.css variava esse topo por breakpoint (10px no
   desktop, 8px em ≤575px, 0 em ≤380px), então em telas pequenas o card
   subia acima da drawer. */
/* SP20-059: o container do marketplace começa onde a drawer começa.
   `.main-content` (styleHome.css, styleMarketplaceCategories.css) tem
   `margin: 3% 1%` — um recuo proporcional que, além de descer o container
   ~3% da altura, o afastava mais da drawer do que a faixa fina combinada.
   Aqui o topo passa a ser o mesmo da drawer (`.sidebar { margin-top: 10px }`)
   e a lateral fica com a própria faixa do gutter, sem recuo extra.
   `margin-bottom` continua vindo do CSS da página.

   O seletor é por DESCENDÊNCIA (e não `> .flex-grow-1 >`) porque entre a
   coluna e o `.main-content` existem os invólucros do fragmento de conteúdo
   (o `<div th:switch>` e o `<div th:case>` do content.html) — e, na tela de
   produtos, também o `.center-content-style`. */
#content > .d-flex .main-content {
    margin-top: var(--mtm-drawer-top);
    margin-left: 0;
    margin-right: 0;
}

/* Na tela de produtos o `.main-content` ainda vem dentro do
   `.center-content-style`, cujo `padding: 50px` (light.css/dark.css) empurrava
   o conteúdo mais 50px para baixo — o título começava 53px abaixo da drawer.
   Só o topo é zerado: o recuo lateral continua sendo o respiro do desktop
   (no celular o invólucro inteiro é neutralizado, na faixa de 767px). */
#content > .d-flex .center-content-style {
    padding-top: 0;
}

.welcome-transparent-container {
    margin-top: var(--mtm-drawer-top) !important;
    /* styleHome.css zerava o raio em ≤380px (o card virava uma faixa de canto
       a canto). Como agora existe respiro dos dois lados, o card continua
       sendo um card também no celular. */
    border-radius: 8px !important;
}

@media only screen and (min-width: 576px) {
    /* acima do celular volta o raio original do styleHome.css */
    .welcome-transparent-container {
        border-radius: 12px !important;
    }
}

@media only screen and (max-width: 767px) {
    /* No mobile a drawer flutua sobre o conteúdo de propósito (com backdrop),
       então não faz sentido reservar a faixa inteira — só o suficiente para o
       botão de expandir não cobrir o card. */
    :root {
        --mtm-drawer-gutter: 8px;
    }

    #content > .d-flex > #flex-drawer-sidebar {
        width: var(--mtm-drawer-collapsed);
        min-width: var(--mtm-drawer-collapsed);
    }

    /* -----------------------------------------------------------------
       Cards de login e de carrinho começam onde a drawer começa.

       Os dois desciam por motivos diferentes, e nenhum deles alinhava com
       a aba da drawer:

       - login: `.main-container-index` é um flex com `align-items: center`
         e `padding: 2rem 1rem`, ou seja, o card era centralizado
         verticalmente e ainda ganhava 32px de topo;
       - carrinho: `.all-cart-content-page` usa `margin: auto` e a régua de
         steps herda `section { margin-top: 25px }`.

       No celular a drawer é uma faixa fixa no alto da lateral, então um
       card que começa mais abaixo dela deixa um vão morto e faz a tela
       parecer desalinhada. Aqui os dois passam a começar em
       --mtm-drawer-top, o mesmo topo já usado pelos cards de formulário
       (.error-container) e pelo .main-content.
       ----------------------------------------------------------------- */
    .main-container-index {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start !important;
        padding-top: var(--mtm-drawer-top) !important;
        min-height: 0 !important;
    }

    main.all-cart-content-page {
        margin-top: var(--mtm-drawer-top) !important;
    }

    /* O `section { margin-top: 25px }` do CSS do carrinho é um seletor de
       elemento e atinge a régua de steps, empurrando o conteúdo para baixo
       do topo que acabamos de alinhar. */
    main.all-cart-content-page > .checkout-steps {
        margin-top: 0 !important;
    }

    .empty-container {
        /* empilha texto e ilustração, como no card de erro */
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 20px !important;
        padding: 24px 18px !important;
        text-align: center;
    }

    .empty-container > * {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
        flex: 1 1 100% !important;
    }

    .empty-container .animationCart img {
        max-width: 150px;
    }

    /* O título dos estados vazios ("No favorites yet") quebrava palavra a
       palavra porque o card ficava estreito demais. */
    .empty-title {
        overflow-wrap: normal;
        word-break: normal;
    }
}