/* =====================================================================
   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;
    }

    /* (o anti-zoom do iOS — `font-size: 16px` nos campos — saiu daqui para a
       seção 9. Estava restrito a 480px e por isso não valia no iPad nem no
       iPhone em paisagem; agora vale em todo aparelho de toque.) */

    /* 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.

   Esta media query é também onde ficam as correções de iPHONE/iPAD que NÃO
   dependem da largura da tela: `(hover: none) and (pointer: coarse)` casa
   com qualquer aparelho de toque — iPhone em retrato ou paisagem, iPad em
   qualquer largura — e NUNCA com um desktop, mesmo de janela estreita. É a
   condição certa para tudo que trata do dedo e do teclado virtual, e não do
   tamanho do layout.
   ===================================================================== */
@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);
    }

    /* SP20-MOB 2.1: ANTI-ZOOM DO SAFARI (iPHONE **E iPAD**)
       ---------------------------------------------------
       O Safari (iOS e iPadOS) amplia a página ao focar um campo com fonte
       menor que 16px e NÃO desfaz o zoom ao sair dele — o usuário termina o
       checkout com a tela deslocada e com rolagem horizontal.

       A regra existia, mas dentro do bloco de `max-width: 480px`: não pegava
       o iPad (768-1024px) nem o iPhone em paisagem, que são justamente as
       larguras em que o formulário mostra mais campos por linha. Aqui vale
       em todo aparelho de toque e em nenhum desktop.

       16px é o limiar exato do Safari: não usar 15.9px nem `1rem` (que pode
       ser reduzido por um `font-size` no <html>). Checkbox/radio/range ficam
       de fora: neles a fonte não abre teclado e o tamanho deformaria o
       controle. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* SP20-MOB 5.2: FOLGA AO ROLAR ATÉ O CAMPO FOCADO
       ----------------------------------------------
       Ao avançar de campo pelo botão "próximo" do teclado do iPhone, o
       Safari rola o campo para a BORDA da área visível e o rótulo fica
       escondido atrás do header. `scroll-margin` reserva a folga.
       Propriedade de rolagem apenas: não desloca nada no layout. */
    input,
    select,
    textarea {
        scroll-margin-top: 96px;
        scroll-margin-bottom: 24px;
    }

    /* SP20-MOB 2.3: <select> E <input type="date"> NATIVOS NO iOS
       ----------------------------------------------------------
       O Safari impõe aparência própria nesses controles: altura ~34px,
       fundo cinza e, no `date`, texto à esquerda. A linha do formulário de
       endereço/pagamento fica desalinhada, com o select mais baixo que os
       campos de texto ao lado.

       ESCOPO RESTRITO DE PROPÓSITO: só dentro dos containers de formulário.
       O `jquery.nice-select` esconde o <select> original e desenha um
       `<div class="nice-select">` — um seletor global mexeria nos dois.
       `background-color: inherit` NÃO é usado aqui: o marketplace tem tema
       claro/escuro por variável, e forçar a cor quebraria o dark mode. */
    .form-wrapper-custom select,
    .form-wrapper-custom input[type="date"],
    .form-wrapper-custom input[type="time"],
    .txt_field select,
    .txt_field input[type="date"],
    .form-group select,
    .form-group input[type="date"],
    .all-cart-content select,
    .all-cart-content input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        min-height: 44px;
    }

    .form-wrapper-custom select,
    .txt_field select,
    .form-group select,
    .all-cart-content select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M8 11 3 6h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px;
        padding-right: 34px;
    }

    /* O widget desenhado pelo nice-select e o <select> nativo que ele
       esconde não podem herdar a seta nem o appearance acima. */
    .nice-select,
    .nice-select .list,
    .nice-select .option,
    .pmethod-native-select {
        -webkit-appearance: auto;
        appearance: auto;
        background-image: none;
    }

    /* SP20-MOB 2.4: ÁREA DE TOQUE DOS BOTÕES PEQUENOS
       ----------------------------------------------
       Os ícones de editar/excluir de endereço e de método de pagamento são
       menores que o mínimo de 44px do HIG da Apple: no iPhone o dedo acerta
       o card em vez do botão.

       Aumentar o desenho ficaria desproporcional; cresce só a área que
       responde ao toque, via `::after`. Pseudo-elemento absoluto não ocupa
       espaço no fluxo — nada se desloca. */
    .payment-actions button,
    .address-actions button,
    .card-actions button,
    .upload-box .remove-btn {
        position: relative;
    }

    .payment-actions button::after,
    .address-actions button::after,
    .card-actions button::after,
    .upload-box .remove-btn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    /* O flash cinza do iOS num card inteiro dá a impressão de que o card
       foi selecionado, e não o botão dentro dele. */
    .payment-card,
    .address-card,
    .product-card,
    .upload-box {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    /* SP20-MOB 7.3: FOCO VISÍVEL
       -------------------------
       Em toque não existe hover: o foco é a ÚNICA pista de onde o usuário
       está no formulário. Vários CSS por página zeram o `outline`.
       `:focus-visible` evita pintar o campo em toques que não abrem
       teclado. */
    .form-wrapper-custom input:focus-visible,
    .form-wrapper-custom select:focus-visible,
    .form-wrapper-custom textarea:focus-visible,
    .txt_field input:focus-visible,
    .all-cart-content input:focus-visible,
    .all-cart-content select:focus-visible {
        outline: 2px solid #0b93f2;
        outline-offset: 1px;
    }
}


/* =====================================================================
   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;
    }
}


/* =====================================================================
   9. AJUSTES TRANSVERSAIS DO MARKETPLACE
   Este arquivo é o ÚLTIMO stylesheet do <head>, então é daqui que se
   corrige, num lugar só, o que estava divergindo entre styleHome.css,
   styleMarketplaceCategories.css, styleMyShowcase.css e styleUserProducts.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   9.1 Imagem do card preenchendo o container em TODAS as viewports
   O `object-fit: contain` que valia a partir de 768px deixava a foto
   inteira dentro da altura fixa do container, sobrando faixas vazias nas
   laterais. Nas telas maiores a imagem volta a ocupar 100% da largura e
   da altura do `.product-image-container` (`cover`), como no celular.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
    .product-card .product-image,
    .products-grid .product-image,
    .product-grid .product-image,
    .carousel-track .product-image {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
        padding: 0;
        background-color: transparent;
    }

    /* A regra de home fixa `object-position: left center` nos carrosséis de
       categoria/empresa — centralizar mantém o recorte no meio da arte. */
    #carousel-categories .product-image,
    #carousel-business .product-image {
        -o-object-position: center;
        object-position: center;
    }
}

/* ---------------------------------------------------------------------
   9.2 Cards de produto sempre com a MESMA altura
   Na grade, cards com título curto ficavam mais baixos que os vizinhos;
   no carrossel, o `flex: 0 0 auto` deixava cada card com a altura do
   próprio conteúdo. `stretch` + `height: 100%` iguala os dois casos, e o
   `margin-top: auto` das ações mantém os botões alinhados na base.
   --------------------------------------------------------------------- */
.products-grid,
.product-grid {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.carousel-track {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.products-grid > .product-card,
.product-grid > .product-card,
.carousel-track > .product-card {
    height: 100%;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.product-card > .product-info {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.product-card .product-actions {
    margin-top: auto;
}

/* ---------------------------------------------------------------------
   9.3 address-card ocupa toda a largura disponível
   Em "My Account" e em "Manage Your Addresses" o card do endereço nascia
   com a largura do conteúdo, sobrando uma faixa vazia à direita dentro do
   card que o contém.
   --------------------------------------------------------------------- */
.address-card,
.new-address-card {
    width: 100%;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.addresses-grid > .address-card,
.address-label,
.new-address-label {
    display: block;
    width: 100%;
}

/* ---------------------------------------------------------------------
   9.4 A drawer nunca sobrepõe o footer
   A `.sidebar` é `position: fixed` sem `top`/`height` e com `z-index:
   1010`; o `.sidebar-content` tem `height: 78vh`. Em telas de pouca
   altura o painel estourava a viewport e, ao rolar até o fim da página,
   pintava por cima do rodapé. Agora ela é limitada à altura útil (com
   folga para o footer) e rola por dentro; o footer, que já é
   `position-relative`, passa a ficar acima dela na pilha.
   --------------------------------------------------------------------- */
:root {
    /* Altura aproximada do header sticky + o `margin-top: 10px` da drawer.
       Não é usado como `top` de propósito: a drawer é `position: fixed` sem
       `top`, então ela fica na posição estática (logo abaixo do header) e
       só a ALTURA precisa ser limitada — mexer no `top` deslocaria a drawer
       de onde ela sempre esteve. */
    --mtm-drawer-top-offset: 150px;
    --mtm-drawer-bottom-gap: 24px;    /* folga para o rodapé */
}

.sidebar {
    max-height: calc(100vh - var(--mtm-drawer-top-offset) - var(--mtm-drawer-bottom-gap));
    max-height: calc(100dvh - var(--mtm-drawer-top-offset) - var(--mtm-drawer-bottom-gap));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-content {
    /* `height: 78vh` ignorava o tamanho real disponível; aqui o conteúdo
       ocupa o que sobra da drawer e rola por dentro dela. */
    height: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

footer {
    position: relative;
    z-index: 1011;   /* .sidebar = 1010 */
}

/* Telas muito baixas (celular deitado): reduz o topo para a drawer não
   virar uma faixa de poucos pixels. */
@media (max-height: 560px) {
    :root {
        --mtm-drawer-top-offset: 110px;
        --mtm-drawer-bottom-gap: 12px;
    }
}


/* =====================================================================
   10. FORMULÁRIOS EM CELULAR: MODAIS, ENDEREÇO E PAGAMENTO  (SP20-MOB)
   ===================================================================== */

/* SP20-MOB 6.3: ALTURA DOS MODAIS NO SAFARI iOS
   ---------------------------------------------
   `vh` no Safari é calculado com a barra de endereço RECOLHIDA. Com ela
   visível — que é o estado ao abrir a página — 85vh é mais alto que a área
   real, e o botão de confirmar do modal ficava fora de alcance no iPhone.
   `dvh` acompanha a barra. A linha `vh` vem ANTES, como fallback para
   navegadores sem suporte a `dvh`: a ordem das duas importa.

   FICA DENTRO DE `(hover: none) and (pointer: coarse)` DE PROPÓSITO: no
   desktop nenhum modal tem teto de altura hoje, e impor um aqui criaria
   barra de rolagem interna em telas que nunca precisaram dela — mudança de
   comportamento fora do escopo desta entrega. O problema do `vh` é do
   Safari de iPhone/iPad, então a correção mora onde o problema existe. */
@media (hover: none) and (pointer: coarse) {
    .mtm-modal__content,
    .modal-content,
    .custom-modal-content,
    .ppm-card {
        max-height: 85vh;
        max-height: 85dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Cards de endereço/pagamento têm `min-width: 300px` no CSS das telas.
   Num iPhone SE sobram ~295px de conteúdo útil: o card vazava. Piso vira
   teto, e no desktop a medida continua a mesma. */
.address-card,
.payment-card {
    min-width: 0 !important;
}

@media only screen and (max-width: 767px) {
    /* SP20-MOB 4.2: DROPDOWN DE MÉTODO DE PAGAMENTO NO iPHONE
       ------------------------------------------------------
       `.pmethod-menu` abre em `position: absolute` logo abaixo do gatilho.
       Com o gatilho já na metade de baixo da tela, a lista abria FORA da
       área visível e o usuário concluía que o toque não funcionou.
       Teto de altura + rolagem interna garantem que ela sempre caiba.
       `dvh` porque a barra do Safari aparece e some durante a rolagem. */
    .pmethod-menu,
    .custom-card-select .options,
    .payment-dropdown-menu {
        max-height: 50vh;
        max-height: 50dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cada opção com alvo de toque confortável. */
    .pmethod-option {
        min-height: 44px;
    }

    /* SP20-MOB 5.1: SUGESTÕES DE ENDEREÇO COM O TECLADO ABERTO
       -------------------------------------------------------
       No iPhone o teclado ocupa ~45% da tela: a lista do autocomplete
       (Nominatim) abria por baixo dele e as opções ficavam inalcançáveis.

       `position: fixed` NÃO serve aqui: no Safari iOS o elemento fixo se
       desloca junto com o zoom do foco. Teto de altura + rolagem interna é
       o que se comporta de forma previsível. */
    .suggestions-list {
        max-height: 40vh;
        max-height: 40dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Endereços são linhas longas e próximas umas das outras: sem alvo de
       toque mínimo o usuário seleciona a sugestão de cima por engano. */
    .suggestions-list li,
    .suggestions-list .suggestion-item {
        min-height: 44px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px 12px;
    }
}

@media only screen and (max-width: 480px) {
    /* iPHONE — "4111 1111 1111 1111" são 19 caracteres. Num campo de ~300px
       os últimos dígitos saíam da vista durante a digitação e o usuário não
       conseguia conferir o número antes de salvar.
       `tabular-nums` dá largura igual a todo dígito (o "1" deixa de ser mais
       estreito que o "8"), o que estabiliza o campo; o letter-spacing menor
       completa. Nada disso reduz a fonte, que precisa seguir em 16px por
       causa do anti-zoom do iOS. */
    #cardNumber,
    input[name="cardNumber"] {
        letter-spacing: .02em;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }
}

@media only screen and (max-width: 340px) {
    /* iPHONE SE 1ª GERAÇÃO / GALAXY FOLD FECHADO — validade e CVV ficam
       lado a lado. Até 360px a linha cabe; em 320px cada campo fica com
       ~140px e o rótulo "Expiry Date (MM/YY)" quebra em três linhas.
       Só aqui os dois empilham: acima disso continuam juntos de propósito,
       por serem curtos e de preenchimento sequencial. */
    .card-row,
    .expiry-cvv-row,
    .form-row-half {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ===================================================================
   NOME DO USUÁRIO NO HEADER  (SP20-054)
   -------------------------------------------------------------------
   O rótulo "Hi there, <nome>" era o único item da barra sem limite de
   largura: um nome (ou e-mail) longo empurrava o endereço e o carrinho
   e quebrava o header em duas linhas. O corte em 27 caracteres é feito
   no servidor (UserDisplayAdvice); aqui fica a garantia visual — uma
   linha só, com reticências se ainda assim faltar espaço.

   Fora de media query de propósito: o limite existente só valia no
   celular, e a quebra acontecia justamente no desktop.
   =================================================================== */
#loginUserMessage {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#loginUserMessageUnderline {
    text-decoration: underline;
}

/* ===================================================================
   LINHA OCULTA DO RESUMO DO PEDIDO  (SP20-056)
   -------------------------------------------------------------------
   A linha da taxa de processamento é escondida com o atributo `hidden`
   enquanto a forma de pagamento não foi escolhida. Só que ela usa a
   `.d-flex` do Bootstrap, que é `display: flex !important` — e isso
   vence o `display: none` que o navegador dá a [hidden]. Sem esta
   regra, o `hidden` não esconderia nada.
   =================================================================== */
#marketplaceFeesRow[hidden],
#deliveryFeesRow[hidden],
#processingFeeRow[hidden] {
    display: none !important;
}