/* ============================================================
   Card de produto: link esticado.

   O card inteiro era um <a>, o que impede botao dentro dele
   (HTML invalido, e o clique do botao vira clique no link).
   Agora o <a> e uma camada absoluta cobrindo a superficie, e
   os botoes sobem de camada para continuar clicaveis.
   ============================================================ */

.mv-store-card__surface { position: relative; }

/* Bloco de contencao tambem na midia: a Tarefa 9 posiciona o botao "+"
   como position: absolute dentro de .mv-store-card__media (right/bottom).
   Sem isso o botao se posicionaria contra o __surface inteiro e cairia
   abaixo do preco, em vez de sobre a foto. */
.mv-store-card__media { position: relative; }

/* z-index 3: precisa ficar ACIMA da foto e dos selos, que competem no
   mesmo contexto de empilhamento (nem __surface nem __media isolam
   contexto, so tem position:relative com z-index:auto). Sem isso o
   desempate cai na ordem do DOM e a foto (que vem depois do <a> na
   arvore) pinta por cima do link — a foto, que e o alvo natural do
   clique, para de navegar.
   Concorrentes conhecidos:
   - static/css/product_list.css:801 .mv-store-card__media-fg -> z-index: 1
   - static/css/product_list.css:811 .mv-store-card__badges   -> z-index: 2
   Os selos sao decorativos: ficar embaixo de uma camada transparente nao
   tira nada deles.
   ATENCAO Tarefa 9: o botao "+" precisa nascer com z-index: 4 (acima
   deste link esticado), senao o link cobre o botao e o "+" nao clica. */
.mv-store-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Foco visivel: outline-offset NEGATIVO (para dentro), porque
   .mv-store-card__surface tem overflow:hidden (product_list.css:745) — um
   offset positivo desenharia o contorno fora da caixa e o overflow
   recortaria ele inteiro, deixando o foco por teclado invisivel. */
.mv-store-card__link:focus-visible::after {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.mv-store-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Tarefa 9: botao "+" e chips de variacao no card.
   ============================================================ */

/* z-index 4: precisa nascer ACIMA do link esticado (z-index: 3, definido
   em .mv-store-card__link::after acima). Um z-index menor aqui fica
   embaixo do link e o clique no "+" navega para o produto em vez de
   adicionar ao carrinho — sintoma que parece bug de JS mas e empilhamento
   de camadas CSS.
   03/09/2026: subiu para 5 porque o gatilho da virada (.mv-store-card__virar)
   cobre a foto inteira em z-index 4. Com o "+" tambem em 4 o desempate cairia
   na ordem do DOM e o "+" continuaria por cima — mas por acidente, nao por
   regra; um dia alguem reordena o template e o "+" passa a virar o card. */
.mv-store-card__add {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 9999px;
    background: var(--brand-secondary, var(--brand-primary));
    color: var(--brand-on-primary, #ffffff);
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mv-store-card__add-icon {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 auto;
}

.mv-store-card__add[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

.mv-store-card__add--feito { transform: scale(1.15); }

.mv-store-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: var(--mv-space-sm, 0.45rem);
}

.mv-store-card__chip {
    padding: 0.1rem 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.4rem;
    font-size: var(--mv-text-caption, 0.72rem);
}

body[data-store-theme="dark"] .mv-store-card__chip {
    border-color: rgba(255, 255, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .mv-store-card__add { transition: none; }
}

/* ============================================================
   Hover do card no desktop (03/09/2026: reescrito).

   ANTES: o cartao subia 3px, trocava borda/fundo/sombra e ainda ganhava
   aqui uma sombra forte (`0 12px 28px`) so no desktop. Eram tres efeitos
   empilhados para uma acao so.

   AGORA: o cartao nao reage — quem responde e a FOTO, com o mesmo
   `scale(1.025)` da capa de categoria (product_list.css). O comentario
   antigo desta secao dizia que zoom na foto era impossivel por causa do
   `object-fit: contain`; na pratica ele cabe, desde que seja pequeno: o
   corte fica dentro da margem de respiro da foto. Acima de ~3% comeca a
   comer a borda do produto.

   O `transition` de __surface continua declarado por inteiro (nao so uma
   propriedade): o valor original junta border-color, background e
   box-shadow num so `transition:`, e declarar uma so aqui SUBSTITUIRIA a
   lista inteira — as outras parariam de animar, trocando de cor num corte
   seco. ============================================================ */
.mv-store-card__surface {
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.22s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .mv-store-card__surface { transition: none; }
}

/* ============================================================
   Card que vira (03/09/2026).

   Clique na FOTO gira o cartao e mostra a descricao e o botao de comprar
   sem tirar a pessoa da listagem. O resto do cartao (nome, preco, area
   vazia) continua abrindo a pagina do produto pelo link esticado — a
   navegacao nao se perde em lugar nenhum.
   ============================================================ */

.mv-store-card {
    /* Sem `perspective` a rotacao fica chapada, parecendo um corte seco.
       O valor e alto de proposito: card pequeno com perspectiva curta
       distorce a foto nas bordas durante o giro. */
    perspective: 1400px;
}

.mv-store-card__flip {
    position: relative;
    height: 100%;
    border-radius: inherit;
    transform-style: preserve-3d;
    transition: transform 520ms cubic-bezier(0.77, 0, 0.175, 1);
}

.mv-store-card.esta-virado .mv-store-card__flip {
    transform: rotateY(180deg);
}

/* E o `backface-visibility` que faz a face de tras sumir no meio do giro.
   Sem ele as duas aparecem espelhadas uma sobre a outra. */
.mv-store-card__surface,
.mv-store-card__verso {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.mv-store-card__verso {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: var(--mv-space-md, 1rem);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: inherit;
    background: var(--surface-elevated, #fafafa);
    overflow: hidden;
    transform: rotateY(180deg);
    /* Clique em qualquer parte do verso (fora dos botoes) navega para a
       pagina do produto — por isso o cursor de mao. As excecoes ("voltar",
       "Comprar" e "Ver produto") sao tratadas no JS, que ignora cliques
       vindos de `[data-virar-card]`, `[data-add]` e de qualquer <a>. */
    cursor: pointer;
    /* Fora do Tab enquanto o card esta de frente: botao invisivel que
       recebe foco e o jeito mais rapido de perder quem navega por teclado.
       O atraso segura a face ate ela ja ter virado de costas. */
    visibility: hidden;
    transition: visibility 0s linear 260ms;
}

.mv-store-card.esta-virado .mv-store-card__verso {
    visibility: visible;
    transition-delay: 260ms;
}

body[data-store-theme="dark"] .mv-store-card__verso {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f0f0f0;
}

/* Nome importado costuma ser enorme ("Smartphone X 5G - 128GB 12GB..."):
   sem limite ele empurraria a descricao inteira para fora do card. Duas
   linhas identificam o produto; o resto esta na pagina dele. */
.mv-store-card__verso-nome {
    /* `flex: 0 0 auto` e o que impede a descricao de COMER o titulo: num
       flex column todo item encolhe por padrao (`flex-shrink: 1`), e com a
       descricao maior que o card a caixa do nome era comprimida ate sobrar
       uma linha cortada. Aqui ele reserva a propria altura. */
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    padding-right: 2rem;  /* espaco do botao "voltar", no canto */
    font-size: var(--mv-text-body, 0.9375rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary, #0a0a0a);
}

body[data-store-theme="dark"] .mv-store-card__verso-nome { color: #f0f0f0; }

/* A descricao e o motivo do verso existir: ela ganha todo o espaco que
   sobra e corta com reticencias em vez de empurrar o botao para fora. */
/* A descricao e o motivo do verso existir: ocupa TODO o espaco que sobra
   entre o nome e os botoes, no corpo de texto normal (nao no tamanho de
   legenda). O texto vai inteiro no HTML e quem corta e o `overflow`: assim
   card alto mostra mais e card baixo mostra menos, sem numero fixo de
   palavras decidido no template. */
.mv-store-card__verso-descricao {
    flex: 1 1 auto;
    /* `min-height: 0` e obrigatorio: item de flex nasce com `min-height:
       auto` (= altura do conteudo) e, sem isto, ele estufa em vez de rolar —
       a barra de rolagem simplesmente nunca aparece. */
    min-height: 0;
    margin: 0;
    padding-right: 0.35rem;  /* respiro para a barra de rolagem */
    overflow-y: auto;
    /* Ao chegar no fim do texto a rolagem PARA aqui, em vez de continuar na
       pagina atras do card. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    font-size: var(--mv-text-body, 0.875rem);
    line-height: 1.5;
    color: var(--text-secondary, #525252);
}

/* Barra fina e discreta: a de sistema, larga, rouba espaco do texto num
   card estreito. (O esmaecimento da ultima linha saiu junto: com rolagem
   de verdade ele so escondia a linha final quando se chegava ao fim.) */
.mv-store-card__verso-descricao::-webkit-scrollbar {
    width: 5px;
}

.mv-store-card__verso-descricao::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.22);
}

body[data-store-theme="dark"] .mv-store-card__verso-descricao::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.24);
}

body[data-store-theme="dark"] .mv-store-card__verso-descricao { color: #a1a4a5; }

.mv-store-card__verso-rodape {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Os dois botoes do verso compartilham a caixa (largura, altura, raio e
   tipografia) e diferem so na pintura: "Comprar" e a acao principal,
   "Ver produto" e a alternativa. Tamanhos diferentes fariam a segunda
   parecer um link perdido no rodape. */
.mv-store-card__verso-comprar,
.mv-store-card__verso-link {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 0.625rem;
    font-size: var(--mv-text-body, 0.875rem);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.mv-store-card__verso-comprar {
    border: 1px solid transparent;
    background: var(--brand-primary);
    color: var(--brand-on-primary, #ffffff);
}

.mv-store-card__verso-comprar:hover { background: var(--brand-secondary, var(--brand-primary)); }

.mv-store-card__verso-comprar[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mv-store-card__verso-link {
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: transparent;
    color: var(--text-primary, #0a0a0a);
}

.mv-store-card__verso-link:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

body[data-store-theme="dark"] .mv-store-card__verso-link {
    border-color: rgba(255, 255, 255, 0.18);
    color: #f0f0f0;
}

/* O "voltar" sobe para o canto do verso: com o cartao inteiro voltando ao
   clique, ele deixou de ser o unico caminho e virou o sinal de que da para
   voltar — alem de continuar sendo a saida de quem navega por teclado. */
.mv-store-card__verso-voltar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary, #525252);
    font-size: 1rem;
    cursor: pointer;
}

body[data-store-theme="dark"] .mv-store-card__verso-voltar {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

/* Gatilho (24/09/2026, decisao do dono): NAO cobre mais a foto inteira —
   virou um botao pequeno so no canto, do tamanho do "+" (2.75rem = 44px,
   alvo minimo de toque), para o resto da foto ficar livre para o link
   esticado navegar. Continua ACIMA do link esticado (z-index 3) e ABAIXO
   do "+" (z-index 5) — se empatasse com o "+", o desempate cairia na ordem
   do DOM e o "+" um dia passaria a virar o card. */
.mv-store-card__virar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mv-store-card__virar-dica {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.85);
    color: #334155;
    font-size: 1rem;
    opacity: 1;
    transition: opacity 200ms ease;
}

/* A dica so fica escondida por padrao em dispositivo com mouse fino: e la
   que ela aparece so no hover/foco, para nao poluir a foto o tempo todo.
   No toque (sem `pointer: fine`) ela fica sempre visivel — e o UNICO jeito
   de girar o card sem mouse, escondida ela vira um botao invisivel. */
@media (hover: hover) and (pointer: fine) {
    .mv-store-card__virar-dica {
        opacity: 0;
    }

    .mv-store-card:hover .mv-store-card__virar-dica,
    .mv-store-card__virar:focus-visible .mv-store-card__virar-dica {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mv-store-card__flip { transition: none; }
    .mv-store-card__verso { transition-delay: 0s; }
    .mv-store-card.esta-virado .mv-store-card__verso { transition-delay: 0s; }
}

/* ============================================================
   Tarefa 12 (A12.2): card enxuto das faixas de oferta.

   Fica aqui (nao em blocos.css) porque e sobre a MESMA familia de
   interacao do card normal (link esticado + botao "+" acima), so que
   com foto e corpo proprios. Reusa sem alteracao: .mv-store-card (borda,
   fundo, radius, lift do hover), .mv-store-card__surface, .mv-store-card__link
   (link esticado), .mv-store-card__media (position relative + aspect-ratio
   4/5 + overflow hidden, ja bom para uma foto vertical) e .mv-store-card__add
   (botao "+", identico ao do card normal). So a foto (cover, sem o par
   bg/fg desfocado) e o corpo (so nome+preco) sao classes novas.

   Rodada de correcao 1 (Minor #4): os seletores abaixo saem escopados por
   .mv-store-card--enxuto (o modificador que ja vai no <article>, antes sem
   nenhuma regra propria — classe morta) em vez de depender so do prefixo
   -enxuto__* nas classes-filhas. Mesmo padrao ja usado em blocos.css
   (.mv-capa-categoria--cheia .mv-capa-categoria__foto): o modificador do
   bloco pai e quem escopa as pecas proprias da variante. */
/* O card das faixas de oferta tem foto propria (`cover`, sem o par
   bg/fg desfocado do card normal), entao a regra do zoom NAO o alcancava:
   quando a elevacao do cartao saiu, ele ficou sem nenhuma resposta ao
   hover. Aqui ele recebe o mesmo movimento dos outros — mesma escala,
   mesma duracao. */
.mv-store-card--enxuto .mv-store-card-enxuto__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.mv-store-card--enxuto:hover .mv-store-card-enxuto__foto,
.mv-store-card--enxuto:focus-within .mv-store-card-enxuto__foto {
    transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
    .mv-store-card--enxuto .mv-store-card-enxuto__foto {
        transition: none;
        transform: none;
    }
}

.mv-store-card--enxuto .mv-store-card-enxuto__body {
    display: flex;
    flex-direction: column;
    gap: var(--mv-space-sm, 0.75rem);
    padding: var(--mv-space-sm, 0.75rem);
}

.mv-store-card--enxuto .mv-store-card-enxuto__nome {
    margin: 0;
    font-size: var(--mv-text-body, 0.875rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary, #0a0a0a);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    overflow-wrap: break-word;
}

body[data-store-theme="dark"] .mv-store-card--enxuto .mv-store-card-enxuto__nome {
    color: #f0f0f0;
}

.mv-store-card--enxuto .mv-store-card-enxuto__preco {
    font-size: var(--mv-title-sm, 1.05rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary, #0a0a0a);
}

body[data-store-theme="dark"] .mv-store-card--enxuto .mv-store-card-enxuto__preco {
    color: #f0f0f0;
}

/* ============================================================
   Tarefa 10: gaveta de compra. Reusa .mv-sheet (product_list.css:2071) —
   so o conteudo de dentro e novo.
   ============================================================ */

/* Fallback de entrada sem Motion (ver nota em static/js/card_add.js sobre
   por que a biblioteca nao foi vendorizada): classe ligada so durante a
   transicao (subida ou "soltar" do arraste), removida em seguida pelo
   proprio JS antes do proximo movimento — assim o arraste em si (que ajusta
   o transform a cada evento de pointermove) nunca fica com um delay de
   transicao no meio do gesto. */
.mv-gaveta__painel--anim {
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
    .mv-gaveta__painel--anim { transition: none; }
}

.mv-gaveta__topo {
    display: flex;
    align-items: center;
    gap: var(--mv-space-sm, 0.75rem);
}

.mv-gaveta__foto {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    object-fit: cover;
    background: var(--surface-elevated, #f4f4f5);
    flex-shrink: 0;
}

.mv-gaveta__preco {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary, #0a0a0a);
}

body[data-store-theme="dark"] .mv-gaveta__preco {
    color: #f0f0f0;
}

/* Chip selecionado: mesmo visual do par input:checked+span ja usado na
   gaveta de filtro (product_list.css:2200), so que aqui o "checked" e
   controlado pelo Alpine (:class), nao por um <input> de verdade — por
   isso o alvo e o <span> dentro do botao, nao o botao em si (que o reset
   do Tailwind deixa sem borda/fundo proprios). */
.mv-sheet__chip.esta-escolhido span {
    color: #ffffff;
    background: var(--brand-primary, var(--main-color));
    border-color: var(--brand-primary, var(--main-color));
}

.mv-sheet__chip:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }

.mv-gaveta__quantidade {
    display: flex;
    align-items: center;
    gap: var(--mv-space-sm, 0.75rem);
}

.mv-gaveta__quantidade button {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.6rem;
    background: var(--surface-elevated, #f4f4f5);
    color: var(--text-primary, #0a0a0a);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
}

body[data-store-theme="dark"] .mv-gaveta__quantidade button {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #f0f0f0;
}

.mv-gaveta__quantidade span {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 600;
    color: var(--text-primary, #0a0a0a);
}

body[data-store-theme="dark"] .mv-gaveta__quantidade span {
    color: #f0f0f0;
}

.mv-gaveta__erro {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    font-size: var(--mv-text-caption, 0.8125rem);
}

body[data-store-theme="dark"] .mv-gaveta__erro {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

.mv-gaveta__confirmar {
    width: 100%;
    padding: var(--mv-space-md, 1rem);
    border: 0;
    border-radius: 9999px;
    background: var(--brand-primary);
    color: var(--brand-on-primary, #ffffff);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
}

.mv-gaveta__confirmar:disabled { opacity: 0.5; cursor: not-allowed; }

.mv-gaveta__feito {
    align-items: center;
    text-align: center;
    padding-bottom: var(--mv-space-lg, 2rem);
}

.mv-gaveta__feito-icone {
    font-size: 2.75rem;
    color: #16a34a;
}

body[data-store-theme="dark"] .mv-gaveta__feito-icone {
    color: #4ade80;
}

.mv-gaveta__feito-titulo {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary, #0a0a0a);
}

body[data-store-theme="dark"] .mv-gaveta__feito-titulo {
    color: #f0f0f0;
}

.mv-gaveta__feito-resumo {
    margin: 0;
    color: var(--text-secondary, #525252);
    font-size: var(--mv-text-body, 0.875rem);
}

body[data-store-theme="dark"] .mv-gaveta__feito-resumo {
    color: #a1a4a5;
}

.mv-gaveta__link-carrinho {
    color: var(--brand-primary);
    font-weight: 600;
    font-size: var(--mv-text-body, 0.875rem);
    text-decoration: none;
}

.mv-gaveta__link-carrinho:hover { text-decoration: underline; }

/* No desktop a gaveta nao precisa ocupar a tela toda (.mv-sheet base e
   left:0/right:0 em qualquer largura, pensado para o polegar no celular).
   So limita a largura e centraliza — sem usar `transform` para isso, que
   ja e usado pelo JS (subirComMola()/arrastar() em card_add.js) para a
   subida e o arraste; se a centralizacao tambem fosse por transform, a
   troca de translateY(...) pelo JS apagaria a translateX(-50%) daqui. */
@media (min-width: 768px) {
    .mv-gaveta {
        left: 0;
        right: 0;
        bottom: 1.5rem;
        max-width: 26rem;
        margin: 0 auto;
        border-radius: 1.25rem;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
    }
}