/* ============================================================================
   POOD — MINICART (gaveta "Meu carrinho")

   Alvo: card "Componente — Meu carrinho" do design system
   (claude.ai/design, projeto Pood Fitness — Design System, direcao/tela-minicart.html).

   O QUE FOI SEGUIDO E O QUE NAO FOI. O card desenha um painel FLUTUANTE de
   380px ancorado sob o icone, com setinha. A loja usa e continua usando a
   GAVETA LATERAL do Porto (porto_design/header/header_minicart_popup_design = 2,
   "Canvas Popup") — decisao do Will em 20/08/2026. Deste arquivo vale entao a
   linguagem visual do card, nao o formato: fio de 1px, pilula de quantidade,
   foto em bloco de raio 8, acao principal no acento com texto preto, tipografia
   e espacamentos. Posicao, altura e animacao seguem sendo do Porto.

   A largura sobe de 320 para 380px, que e a medida do card — a linha de tres
   colunas (quantidade | preco | Remover) nao cabe em 320. Isso e seguro porque
   o Porto fecha a gaveta com translateX(105%), que acompanha a largura sozinho;
   se um dia virar um valor em pixels, a gaveta passa a vazar pela direita.

   Tres coisas exigiram marcacao de verdade e vivem nos templates do subtema,
   porque CSS nao cria link nem le dado do carrinho:
     - os sinais - e + na pilula de quantidade  (minicart/item/default.html)
     - o estado vazio com icone e botao         (minicart/content.html)
     - o aviso de sob encomenda                 (minicart/content.html)

   ----------------------------------------------------------------------------
   ESPECIFICIDADE — a razao de todo seletor aqui comecar igual.

   O Porto ancora as regras da gaveta em
       .minicart-wrapper.minicart-offcanvas .block-minicart ...     (0,3,0)
   e algumas chegam a (0,5,0). Escrever .block-minicart .foo (0,2,0) NAO vence,
   mesmo com este arquivo carregando por ultimo — foi o que aconteceu no rodape
   (CLAUDE.md §30.2). Por isso a base repetida em tudo:
       .minicart-wrapper.minicart-offcanvas .block-minicart
   que empata com a do Porto e ganha pela ordem de carga.

   ----------------------------------------------------------------------------
   DOM real, medido em producao em 20/08/2026 — a grade do item depende dele:
     .product-item-details > .product-item-name
                           > .product-item-pricing > .price-container
                                                   > .details-qty
                           > .product.actions      > .primary  (a.action.edit)
                                                   > .secondary(a.action.delete)
   .details-qty NAO e irmao de .product.actions: esta um nivel abaixo, dentro de
   .product-item-pricing. Dai o display:contents em .product-item-pricing, para
   que .price-container e .details-qty subam e virem itens da mesma grade.
   ========================================================================= */


/* --- a gaveta ------------------------------------------------------------- */

.minicart-wrapper.minicart-offcanvas .block-minicart,
.minicart-wrapper.minicart-offcanvas .block-minicart *,
.minicart-wrapper.minicart-offcanvas .block-minicart *::before,
.minicart-wrapper.minicart-offcanvas .block-minicart *::after { box-sizing: border-box; }

.minicart-wrapper.minicart-offcanvas .block-minicart {
  width: 380px;
  max-width: 100vw;
  padding: 0;
  background: var(--pood-papel);
  border: 0;
  border-left: 1px solid var(--pood-linha-2);
  border-radius: 0;
  box-shadow: -18px 0 44px -28px rgba(23, 23, 26, .35);
  font-family: var(--pood-fonte);
  font-size: var(--pood-t-corpo);
  /* O Porto deixa a gaveta inteira em 700, e o peso desce por heranca para
     tudo que nao declara o seu: o aviso de encomenda, a nota do frete e o
     rotulo do subtotal saiam em negrito. Quem precisa de peso o declara. */
  font-weight: var(--pood-p-normal);
  line-height: var(--pood-lh-corpo);
  color: var(--pood-tinta);
}

/* A setinha do painel flutuante do Porto (dois triangulos de borda, o de fora
   pintado com #db6060, o acento ANTIGO da loja). Na gaveta nao tem sentido. */
.minicart-wrapper.minicart-offcanvas .block-minicart::before,
.minicart-wrapper.minicart-offcanvas .block-minicart::after { display: none; }

/* O fundo escurecido ja fecha a gaveta ao clique, e o X do cabecalho tambem.
   O terceiro X que o Porto pendura no overlay some: ele esta posicionado em
   right:330px, medida presa a largura antiga de 320, e ficaria por cima da
   gaveta nova. Nenhum caminho de fechar se perde. */
.minicart-wrapper.minicart-offcanvas .minicart-overlay svg { display: none; }
.minicart-wrapper.minicart-offcanvas .minicart-overlay { background: rgba(23, 23, 26, .38); }


/* --- titulo --------------------------------------------------------------- */

.minicart-wrapper.minicart-offcanvas .block-minicart .block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0;
  padding: 17px 20px;
  border-bottom: 1px solid var(--pood-linha-2);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .block-title strong {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: var(--pood-p-medio);
  letter-spacing: -.01em;
  text-transform: none;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .block-title .text {
  font-size: 15px;
  font-weight: var(--pood-p-medio);
}

/* O Porto esconde a contagem na gaveta; o card a mostra, e ela e util —
   e o unico lugar do painel que diz quantos itens ha. So o numero: a linha que
   pluraliza ("1 artigo" / "2 itens") vive noutro ramo do DOM, e CSS nao
   pluraliza. */
.minicart-wrapper.minicart-offcanvas .block-minicart .block-title .qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  margin: 0;
  border: 0;
  border-radius: var(--pood-r);
  background: var(--pood-fundo);
  color: var(--pood-tinta-2);
  font-size: 10.5px;
  font-weight: var(--pood-p-forte);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .block-title .qty.empty { display: none; }


/* --- fechar --------------------------------------------------------------- */

.minicart-wrapper.minicart-offcanvas .block-minicart #btn-minicart-close {
  position: absolute;
  top: 17px;
  right: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pood-r);
  background: transparent;
  color: var(--pood-tinta-2);
  transition: background .15s, color .15s;
  z-index: 2;
}
.minicart-wrapper.minicart-offcanvas .block-minicart #btn-minicart-close:hover {
  background: var(--pood-fundo);
  color: var(--pood-tinta);
}
.minicart-wrapper.minicart-offcanvas .block-minicart #btn-minicart-close span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
/* mask-image e nao background-image: com background a cor fica presa dentro do
   arquivo e nenhum hover a alcanca (mesma razao dos icones do cabecalho, §29.14) */
.minicart-wrapper.minicart-offcanvas .block-minicart #btn-minicart-close::before {
  content: "";
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5.5 5.5l9 9m0-9l-9 9" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5.5 5.5l9 9m0-9l-9 9" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"/></svg>') center/contain no-repeat;
  font-size: 0;
}


/* --- corpo ---------------------------------------------------------------- */

/* O subtitulo "Iten(s) recem adicionado(s)" e o bloco .total-count sairam no
   template do subtema, nao aqui: a contagem ja esta na pilula do titulo e o
   "Ver carrinho" desceu para o rodape. Este arquivo nao os esconde — eles nao
   chegam a existir. */


/* --- lista ---------------------------------------------------------------- */

/* O Porto poe padding lateral de 20px em cada <li> e deixa a lista colada nas
   bordas. Aqui e o contrario: o respiro vai para a lista, e o <li> fica sem
   padding lateral — assim o fio divisorio recua junto com o conteudo, como no
   card, em vez de correr de ponta a ponta. */
.minicart-wrapper.minicart-offcanvas .block-minicart .minicart-items-wrapper {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .minicart-items-wrapper .minicart-items {
  margin: 0;
  padding: 6px 20px;
  list-style: none;
}

.minicart-wrapper.minicart-offcanvas .block-minicart .minicart-items .product-item {
  display: block;
  padding: 16px 0;
  border-top: 0;
  border-bottom: 1px solid var(--pood-linha-2);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .minicart-items .product-item:last-child { border-bottom: 0; }

.minicart-wrapper.minicart-offcanvas .block-minicart .minicart-items > li > .product {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* SEM ESTAS DUAS LINHAS A LINHA DO ITEM SAI INVERTIDA. O Porto declara
   order:2 na foto e order:1 nos detalhes - resquicio de quando este bloco era
   flex. Em grade o `order` tambem vale, e o resultado e a foto na coluna 2 e o
   texto espremido nos 66px da coluna 1. Nao da para ver isso lendo o CSS do
   Porto: as folhas dele vem do CDN e o CSSOM as bloqueia por CORS (§29.5), so
   aparece medindo o computado. */
.minicart-wrapper.minicart-offcanvas .block-minicart .minicart-items > li > .product > .product-item-photo { order: 1; }
.minicart-wrapper.minicart-offcanvas .block-minicart .minicart-items > li > .product > .product-item-details { order: 2; }

.minicart-wrapper.minicart-offcanvas .block-minicart .product-item-photo {
  position: static;
  width: 66px;
  height: 66px;
  /* o Porto reserva min-height:90px para a miniatura maior dele */
  min-height: 0;
  display: grid;
  place-items: center;
  background: var(--pood-bloco);
  border: 0;
  border-radius: var(--pood-r-caixa);
  overflow: hidden;
  transition: background .18s;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .product-item:hover .product-item-photo {
  background: var(--pood-bloco-2);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .product-item-photo .product-image-container { width: 66px !important; }
.minicart-wrapper.minicart-offcanvas .block-minicart .product-item-photo .product-image-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

/* A grade de tres colunas: quantidade | preco | Remover.

   grid-auto-flow:dense e OBRIGATORIO. No DOM entregue .price-container (coluna 2)
   vem ANTES de .details-qty (coluna 1); com o fluxo esparso a pilula de
   quantidade cairia para a linha de baixo e levaria o Remover junto. */
.minicart-wrapper.minicart-offcanvas .block-minicart .product-item-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-auto-flow: dense;
  align-items: center;
  gap: 6px 10px;
  padding: 0;
  min-width: 0;
  /* O Porto poe max-width: calc(100% - 80px) aqui, reservando 80px para o
     bloco de acoes, que na versao dele e absoluto. Aqui as acoes sao a terceira
     coluna da grade, entao a reserva vira 80px de largura perdida: a coluna do
     preco ficava com 0 e o preco vazava por cima do Remover. */
  max-width: none;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .product-item-name {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  font-weight: var(--pood-p-normal);
  line-height: var(--pood-lh-nome);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .product-item-name a { color: var(--pood-tinta); text-decoration: none; }
.minicart-wrapper.minicart-offcanvas .block-minicart .product-item-name a:hover { color: var(--pood-acento); }

/* A variacao do configuravel: uma linha de valores sob o nome, no lugar do
   acordeao "Visualizar Detalhes" do core (ver o comentario no template do item).

   Duas linhas no maximo. Um bundle com muitas opcoes encheria a gaveta; o
   detalhe completo vive na pagina da sacola. */
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-variacao {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: var(--pood-p-normal);
  color: var(--pood-tinta-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* O ponto separador so entre valores, nunca antes do primeiro */
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-variacao span + span::before {
  content: "\00b7";
  margin: 0 6px;
  color: var(--pood-tinta-3);
}


/* --- preco ---------------------------------------------------------------- */

.minicart-wrapper.minicart-offcanvas .block-minicart .product-item-pricing { display: contents; }
.minicart-wrapper.minicart-offcanvas .block-minicart .product-item-pricing .price-container {
  grid-column: 2;
  margin: 0;
  line-height: 1.25;
}

/* Sem flex-wrap nesta linha: com preco promocional o valor antigo sobe para
   cima do atual, e a linha nunca quebra. */
.minicart-wrapper.minicart-offcanvas .block-minicart .price-container .old-price,
.minicart-wrapper.minicart-offcanvas .block-minicart .price-container s {
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: var(--pood-p-normal);
  color: var(--pood-tinta-2);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .price-container .old-price .price {
  font-size: 11px;
  font-weight: var(--pood-p-normal);
  color: var(--pood-tinta-2);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .price-container .price {
  font-size: var(--pood-t-corpo);
  font-weight: var(--pood-p-medio);
  font-variant-numeric: tabular-nums;
  color: var(--pood-tinta);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .price-excluding-tax,
.minicart-wrapper.minicart-offcanvas .block-minicart .price-including-tax { margin: 0; font-size: inherit; }
.minicart-wrapper.minicart-offcanvas .block-minicart .price-excluding-tax::before,
.minicart-wrapper.minicart-offcanvas .block-minicart .price-including-tax::before { display: none; }


/* --- quantidade em pilula -------------------------------------------------- */

.minicart-wrapper.minicart-offcanvas .block-minicart .details-qty {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r);
  background: var(--pood-papel);
  overflow: hidden;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .details-qty .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
/* input.item-qty e nao .item-qty: o Porto ancora a largura do campo com um
   seletor de TIPO, e tipo soma especificidade - sem o `input` aqui a regra
   perde mesmo carregando depois. */
.minicart-wrapper.minicart-offcanvas .block-minicart .details-qty input.item-qty {
  width: 38px;
  flex: 0 0 38px;
  min-width: 0;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-family: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--pood-tinta);
  -moz-appearance: textfield;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .details-qty .item-qty::-webkit-outer-spin-button,
.minicart-wrapper.minicart-offcanvas .block-minicart .details-qty .item-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .details-qty .item-qty:focus { outline: 0; }

/* Os sinais sao marcacao de verdade, no template do subtema. Quem os faz mexer
   e js/minicart-qty.js. O botao Atualizar do Magento continua no DOM e continua
   sendo quem fala com o widget sidebar — so nao aparece. */
.minicart-wrapper.minicart-offcanvas .block-minicart .details-qty button.pood-mc-passo {
  width: 29px;
  flex: 0 0 29px;
  min-width: 0;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--pood-t-corpo);
  line-height: 1;
  color: var(--pood-tinta-2);
  cursor: pointer;
  transition: color .15s;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .details-qty .pood-mc-passo:hover { color: var(--pood-tinta); }
.minicart-wrapper.minicart-offcanvas .block-minicart .details-qty .pood-mc-passo[disabled] {
  color: var(--pood-tinta-3);
  cursor: default;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .details-qty .update-cart-item { display: none !important; }


/* --- acoes do item: so Remover -------------------------------------------- */

/* As larguras fixas abaixo (20px em .actions e em .secondary) sao do Porto, que
   ali mostra so um icone de lixeira. Aqui o Remover e palavra escrita, e sem
   soltar essas larguras a terceira coluna da grade nasce com 20px e o texto
   vaza para fora da gaveta - sem barra de rolagem e sem erro nenhum. */
.minicart-wrapper.minicart-offcanvas .block-minicart .product.actions {
  grid-column: 3;
  position: static;
  margin: 0;
  float: none;
  display: flex;
  justify-content: flex-end;
  width: auto;
  min-width: 0;
}
/* O "Editar" sai: no painel ficam quantidade e Remover, e a edicao completa
   vive na pagina da sacola. */
.minicart-wrapper.minicart-offcanvas .block-minicart .product.actions .primary { display: none; }
/* O .secondary do Porto e uma PASTILHA BRANCA FLUTUANTE: fundo branco mais
   box-shadow rgba(0,0,0,.4) 0 2px 6px, desenhada para segurar o icone de
   lixeira sobre a foto. Aqui ele e so o invólucro do texto "Remover", e a
   sombra aparecia como um retangulo cinza sob a palavra.
   Nao basta olhar o `background` do <a>: ele e transparente, e o cinza vem do
   pai. Sombra sem dono aparente se procura subindo na arvore. */
.minicart-wrapper.minicart-offcanvas .block-minicart .product.actions .secondary {
  position: static;
  margin: 0;
  width: auto;
  min-width: 0;
  right: auto;
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* a.action.delete e nao .action.delete: o Porto usa seletor de tipo, que soma
   especificidade e venceria a regra mais curta. */
.minicart-wrapper.minicart-offcanvas .block-minicart .product.actions .secondary a.action.delete {
  position: static;
  width: auto;
  height: auto;
  float: none;
  display: inline-block;
  overflow: visible;
  text-indent: 0;
  font-size: 11.5px;
  color: var(--pood-tinta-2);
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .product.actions .secondary a.action.delete::before { display: none; }
/* O Porto esconde o texto por clip para deixar so o icone. Aqui o texto E a
   acao, entao ele volta ao fluxo. */
.minicart-wrapper.minicart-offcanvas .block-minicart .product.actions .secondary a.action.delete > span {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  display: inline;
  font-size: 11.5px;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .product.actions .secondary a.action.delete:hover {
  color: var(--pood-acento);
  border-bottom-color: var(--pood-acento);
}


/* --- aviso de sob encomenda ------------------------------------------------
   Mesmo bloco da sacola e do checkout, em versao compacta. O texto vem pronto
   do servidor (PoodModulos_Checkout), porque a redacao do prazo e regra de
   negocio: sempre "ate X dias", e sempre dias CORRIDOS (CLAUDE.md §18). */

.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-encomenda {
  flex: 0 0 auto;
  margin: 16px 20px 0;
  padding: 12px 14px;
  background: var(--pood-fundo);
  border: 1px solid var(--pood-linha-2);
  border-radius: 12px;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-encomenda__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-encomenda__ico {
  display: flex;
  color: var(--pood-tinta-2);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-encomenda strong {
  font-size: 12.5px;
  font-weight: var(--pood-p-medio);
  letter-spacing: -.01em;
  color: var(--pood-tinta);
  text-transform: none;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-encomenda p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pood-tinta-2);
}


/* --- subtotal e rodape ----------------------------------------------------- */

.minicart-wrapper.minicart-offcanvas .block-minicart .subtotal {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 0;
  padding: 18px 20px 0;
  border: 0;
  border-top: 1px solid var(--pood-linha-2);
  text-align: left;
}
/* O Porto poe o rotulo em caixa alta. Neste sistema o unico texto em caixa alta
   e o rotulo de seccao de 9,5px com entreletra larga (pood-tokens.css); um
   "SUBTOTAL DO CARRINHO" de 13,5px nao pertence a lugar nenhum da escala. */
.minicart-wrapper.minicart-offcanvas .block-minicart .subtotal .label,
.minicart-wrapper.minicart-offcanvas .block-minicart .subtotal .label span {
  font-size: 13.5px;
  font-weight: var(--pood-p-normal);
  text-transform: none;
  letter-spacing: 0;
  color: var(--pood-tinta-2);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .subtotal .label::after { display: none; }
.minicart-wrapper.minicart-offcanvas .block-minicart .subtotal .amount { padding: 0; text-align: right; }
.minicart-wrapper.minicart-offcanvas .block-minicart .subtotal .price {
  font-size: 19px;
  font-weight: var(--pood-p-forte);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-nota {
  flex: 0 0 auto;
  margin: 4px 0 0;
  padding: 0 20px;
  font-size: 11.5px;
  color: var(--pood-tinta-2);
}


/* --- botoes ---------------------------------------------------------------
   Altura, raio e corpo saem de pood-tokens.css. O acento leva texto PRETO, nao
   branco: sobre #F65F44 o branco nao passa em contraste. */

.minicart-wrapper.minicart-offcanvas .block-minicart .block-content > .actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 16px 20px 20px;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .block-content > .actions > .primary,
.minicart-wrapper.minicart-offcanvas .block-minicart .block-content > .actions > .secondary {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .actions .action.primary.checkout,
.minicart-wrapper.minicart-offcanvas .block-minicart .actions .action.viewcart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--pood-h);
  padding: 0 22px;
  border-radius: var(--pood-r);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--pood-t-apoio);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .actions .action.primary.checkout {
  background: var(--pood-acento);
  color: var(--pood-tinta);
  font-weight: var(--pood-p-forte);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .actions .action.primary.checkout:hover {
  background: var(--pood-acento-h);
  color: var(--pood-tinta);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .actions .action.viewcart {
  background: var(--pood-papel);
  border-color: var(--pood-linha);
  color: var(--pood-tinta);
  font-weight: var(--pood-p-medio);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .actions .action.viewcart:hover {
  border-color: var(--pood-tinta);
  color: var(--pood-tinta);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .actions .action.viewcart span { text-decoration: none; }


/* --- sacola vazia ---------------------------------------------------------- */

/* Na gaveta o vazio ocupa a altura toda e fica centrado: um bloco de 200px
   grudado no topo de uma coluna de 900px pareceria pagina quebrada. */
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-vazio {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 24px 40px;
  text-align: center;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-vazio__ico {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: var(--pood-r);
  background: var(--pood-fundo);
  display: grid;
  place-items: center;
  color: var(--pood-tinta-3);
}
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-vazio strong {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: var(--pood-p-medio);
  letter-spacing: -.01em;
  color: var(--pood-tinta);
  text-transform: none;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-vazio p {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--pood-tinta-2);
  line-height: 1.55;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-vazio__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--pood-h);
  border-radius: var(--pood-r);
  background: var(--pood-tinta);
  color: var(--pood-papel);
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  text-decoration: none;
  transition: background .15s;
}
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-vazio__btn:hover { background: #000; color: var(--pood-papel); }
.minicart-wrapper.minicart-offcanvas .block-minicart .pood-mc-vazio__btn:focus-visible {
  outline: 2px solid var(--pood-acento);
  outline-offset: 2px;
}

/* O <strong> e o <p> que o Magento renderiza no ramo vazio: o texto que vale
   esta dentro do .pood-mc-vazio, escrito no template do subtema. */
.minicart-wrapper.minicart-offcanvas .block-minicart .subtitle.empty { display: none; }
.minicart-wrapper.minicart-offcanvas .block-minicart p.minicart.empty.text { display: none; }

.minicart-wrapper.minicart-offcanvas .block-minicart .minicart-widgets { flex: 0 0 auto; padding: 0 20px 20px; }
.minicart-wrapper.minicart-offcanvas .block-minicart .minicart-widgets:empty { padding: 0; }


/* --- telas estreitas -------------------------------------------------------
   Abaixo de 380px a gaveta ocupa a largura inteira. Ali o fundo escurecido nao
   sobra para clicar, e quem fecha e o X do cabecalho — por isso ele nunca pode
   sair da tela. */

@media (max-width: 420px) {
  .minicart-wrapper.minicart-offcanvas .block-minicart { width: 100vw; border-left: 0; }
}