/* ============================================================================
   POOD — SACOLA (/checkout/cart/)

   Alvo: cards "Tela — Carrinho" e "Tela — Carrinho com frete calculado" do
   design system. As duas telas sao o MESMO layout em dois estados, antes e
   depois de consultar o CEP. Um arquivo cobre os dois.

   ESTRUTURA QUE VIVE FORA DAQUI
     - cabecalho "Sacola / N itens"     cart/titulo.phtml + checkout_cart_index.xml
     - etiqueta "Sob encomenda"          cart/item/default.phtml
     - aviso de encomenda apos a lista   <move> no layout
     - cupom dentro do resumo            <move> no layout
     - linha de frete com logo           web/template/cart/shipping-rates.html

   A TABELA CONTINUA SENDO UMA TABELA. `display:grid` no <tbody> e
   `display:contents` nos <tr>: as <td> sobem e viram itens da mesma grade,
   livres para ir a qualquer coluna. Preserva `cart[<id>][qty]`, o botao
   Atualizar, `getActions()`, as mensagens por item e os renderizadores por tipo
   de produto — tudo que uma reescrita do form.phtml quebraria. E e o que faz o
   "Remover", que mora numa SEGUNDA <tr>, sentar ao lado do preco.

   FORA DO ESCOPO, por medicao e decisao do Will:
   "Inclusos neste item" (o catalogo tem zero bundles) e a etiqueta "Frete
   gratis" no item (a regra da loja e por carrinho e por destino).
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. Moldura da pagina

   A loja assenta o conteudo em BRANCO; o design system assenta tudo sobre
   --pood-fundo, e e isso que faz o cartao branco do resumo ter relevo sem
   sombra nenhuma. Mesmo tratamento que a vitrine ja recebeu.

   O recuo lateral de 40px e o de 88 embaixo saem do `.folha` do modelo. Os 10px
   que o Porto ja poe no .page-main somam por dentro, entao aqui vao 30 — a
   mesma conta do institucional.
--------------------------------------------------------------------------- */

.checkout-cart-index,
.checkout-cart-index .page-main,
.checkout-cart-index .columns { background: var(--pood-fundo); }

.checkout-cart-index .page-main {
  padding-top: 56px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 88px;
}
.checkout-cart-index .column.main { padding-bottom: 0; }


/* ---------------------------------------------------------------------------
   2. Cabecalho

   Fica FORA da grade (no `content`, acima do .cart-container): o container dos
   itens so existe quando ha itens, e com o page.main.title removido a sacola
   vazia ficaria sem cabecalho nenhum.
--------------------------------------------------------------------------- */

.checkout-cart-index .pood-sc-cabecalho { margin: 0; }
.checkout-cart-index .pood-sc-rotulo {
  margin: 0;
  font-size: var(--pood-t-rotulo);
  font-weight: var(--pood-p-forte);
  letter-spacing: var(--pood-ls-rotulo);
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
.checkout-cart-index .pood-sc-titulo {
  margin: 6px 0 0;
  font-size: var(--pood-t-display);
  font-weight: var(--pood-p-normal);
  line-height: var(--pood-lh-display);
  letter-spacing: var(--pood-ls-display);
  color: var(--pood-tinta);
  text-transform: none;
}


/* ---------------------------------------------------------------------------
   3. As duas colunas
--------------------------------------------------------------------------- */

/* 🔴 LINHA EXPLICITA EM CADA FILHO, e nada de `order`.
   Com `order` e um `grid-row: 1 / span 4` no resumo, a colocacao automatica
   jogou a lista de itens para a LINHA 3: o resumo comecava no topo e os
   produtos 187px abaixo, com um vao enorme no meio. `order` mexe na ordem em
   que os itens sao colocados, e o cursor da grade nunca volta atras. Linha
   declarada em cada um acaba com a adivinhacao.

   `row-gap` menor que o `column-gap` de proposito: a coluna dos itens empilha
   blocos que se sucedem (lista, aviso de encomenda), e 44px entre eles abriria
   buracos — ainda mais quando o aviso nao existe. */
.checkout-cart-index .cart-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  column-gap: 44px;
  row-gap: 20px;
  align-items: start;
  margin-top: 34px;
}

/* O Porto monta a sacola com float e largura em porcentagem, e virar a mae em
   grade NAO anula nem um nem outro no filho: a coluna dos itens nascia com
   548px numa faixa de 822, e o nome do produto quebrava em seis linhas com
   espaco vazio ao lado. */
.checkout-cart-index .cart-container > .form.form-cart {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
}
.checkout-cart-index .cart.table-wrapper,
.checkout-cart-index #shopping-cart-table { width: auto; max-width: none; float: none; }

/* Linha 1 tambem, e SEM span: o resumo fica no topo da propria coluna e a
   coluna dos itens segue empilhando nas linhas de baixo, sem que ele reserve
   espaco em nenhuma delas. */
.checkout-cart-index .cart-container > .cart-summary { grid-column: 2; grid-row: 1; }

/* `checkout.cart.form.before` (div.rewards) ficou vazio — o aviso de encomenda
   mudou para depois da lista. Some sem ser removido do layout: outro modulo
   pode passar a usar o container. */
.checkout-cart-index .cart-container > .rewards { grid-column: 1; grid-row: 4; }
.checkout-cart-index .cart-container > .rewards:empty { display: none; }

/* O aviso de sob encomenda cai direto no container: `checkout.cart.widget` nao
   declara htmlTag, entao nao ha wrapper. */
.checkout-cart-index .cart-container > .pood-po {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  background: var(--pood-papel);
  border: 1px solid var(--pood-linha-2);
  border-radius: var(--pood-r-cartao);
}

.checkout-cart-index .cart-container > #gift-options-cart { grid-column: 1; grid-row: 3; }


/* ---------------------------------------------------------------------------
   4. A linha do item
--------------------------------------------------------------------------- */

.checkout-cart-index .cart.table-wrapper { border: 0; margin: 0; }
.checkout-cart-index #shopping-cart-table { display: block; border: 0; }
/* O cabecalho da tabela sai: cada linha do card se explica sozinha, e sem
   colunas fixas nao ha o que rotular. */
.checkout-cart-index #shopping-cart-table > thead,
.checkout-cart-index #shopping-cart-table > caption { display: none; }

.checkout-cart-index #shopping-cart-table > tbody.cart.item {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 20px;
  /* 14px, e nao os 22px do card (Will, 21/08/2026): com 22 em cima e 22
     embaixo somam 44px entre um produto e o proximo, e a lista fica esparsa.
     O card foi desenhado com DOIS itens; a sacola real tem mais. */
  padding: 14px 0;
  border-top: 1px solid var(--pood-linha);
  background: transparent;
}
.checkout-cart-index #shopping-cart-table > tbody.cart.item > tr { display: contents; }
.checkout-cart-index #shopping-cart-table > tbody.cart.item > tr > td { border: 0; padding: 0; vertical-align: middle; }

.checkout-cart-index #shopping-cart-table .col.item {
  grid-column: 1 / 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

/* A FOTO EM BRANCO, e nao no cinza --pood-bloco do card.
   No card a foto e um retangulo cinza cheio, porque ali e um marcador de
   lugar. Nas fotos de verdade da loja o fundo do produto e BRANCO: o cinza
   virava uma moldura em volta da imagem, e foi o que o Will apontou. Papel
   sobre o fundo --pood-fundo da a mesma leitura de bloco, sem a moldura. */
.checkout-cart-index #shopping-cart-table .col.item .product-item-photo {
  width: 118px;
  max-width: 118px;
  /* 3:4, como o resto da loja: 78% do catalogo e retrato nessa proporcao
     exata, e o quadrado obrigava o Magento a preencher a sobra (§view.xml). */
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: var(--pood-papel);
  border: 0;
  border-radius: var(--pood-r-caixa);
  overflow: hidden;
  padding: 0;
}
.checkout-cart-index #shopping-cart-table .col.item .product-image-container { width: 118px !important; }
.checkout-cart-index #shopping-cart-table .col.item .product-image-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.checkout-cart-index #shopping-cart-table .product-item-details { min-width: 0; padding: 0; }
.checkout-cart-index #shopping-cart-table .product-item-name {
  display: block;
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: var(--pood-p-medio);
  line-height: 1.3;
}
.checkout-cart-index #shopping-cart-table .product-item-name a { color: var(--pood-tinta); text-decoration: none; }
.checkout-cart-index #shopping-cart-table .product-item-name a:hover { color: var(--pood-acento); }

/* Variacao: so os VALORES. O rotulo do atributo de cor esta em INGLES neste
   catalogo ("Color"), e colado ao valor saia "ColorVermelho" (CLAUDE.md 37.9). */
.checkout-cart-index #shopping-cart-table .item-options { margin: 0; }
.checkout-cart-index #shopping-cart-table .item-options dt { display: none; }
.checkout-cart-index #shopping-cart-table .item-options dd {
  display: inline;
  margin: 0;
  font-weight: var(--pood-p-normal);
  font-size: 12px;
  color: var(--pood-tinta-2);
}
.checkout-cart-index #shopping-cart-table .item-options dd + dd::before {
  content: "\00b7";
  margin: 0 6px;
  color: var(--pood-tinta-3);
}

.checkout-cart-index #shopping-cart-table .pood-sc-sku {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--pood-tinta-2);
}

.checkout-cart-index .pood-sc-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 9px 0 0;
  padding: 0;
}
.checkout-cart-index .pood-sc-tag {
  display: inline-block;
  white-space: nowrap;
  font-size: 10px;
  font-weight: var(--pood-p-forte);
  line-height: 1.6;
  color: var(--pood-tinta);
  background: transparent;
  border: 1px solid var(--pood-tinta);
  padding: 2px 9px;
  border-radius: var(--pood-r);
}


/* ---------------------------------------------------------------------------
   5. Quantidade em pilula

   O `.qty-changer` com os dois links e MARCACAO do Porto, nao injecao por JS.
   O `order` os poe em volta do campo, que no DOM vem antes dos dois.

   `flex: 0 0 <px>` nos tres, e nao so `width`: sem a base fixa o flex encolhia
   os botoes, a pilula saia com 106px onde precisa de 120 e os sinais ficavam
   espremidos contra o numero — era o "botao estranho".
--------------------------------------------------------------------------- */

.checkout-cart-index #shopping-cart-table .col.qty { grid-column: 3; grid-row: 1; }
.checkout-cart-index #shopping-cart-table .col.qty .field.qty {
  display: inline-flex;
  align-items: center;
  width: 120px;
  height: var(--pood-h);
  margin: 0;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r);
  background: var(--pood-papel);
  overflow: hidden;
}
.checkout-cart-index #shopping-cart-table .col.qty .field.qty > .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.checkout-cart-index #shopping-cart-table .col.qty .control.qty {
  order: 2;
  flex: 0 0 42px;
  margin: 0;
  padding: 0;
}
.checkout-cart-index #shopping-cart-table .col.qty input.input-text.qty {
  width: 42px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--pood-tinta);
  -moz-appearance: textfield;
}
.checkout-cart-index #shopping-cart-table .col.qty input.input-text.qty::-webkit-outer-spin-button,
.checkout-cart-index #shopping-cart-table .col.qty input.input-text.qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.checkout-cart-index #shopping-cart-table .col.qty input.input-text.qty:focus { outline: 0; }

.checkout-cart-index #shopping-cart-table .col.qty .qty-changer { display: contents; }
/* 🔴 `position: static` E O QUE FAZ A PILULA EXISTIR. O Porto empilha as duas
   setinhas ABSOLUTAS dentro do campo, uma em cima da outra, a direita. Fora do
   fluxo, `order` e `flex` nao valem nada: o menos caia por cima do numero e a
   pilula ficava com tres coisas no mesmo lugar. Nao da para ver isso lendo a
   folha do Porto — ela vem do CDN e o CSSOM a bloqueia por CORS (§29.5); so
   medindo o computado de cada link. */
.checkout-cart-index #shopping-cart-table .col.qty .qty-changer a {
  position: static;
  /* 🔴 O Porto poe MOLDURA no link: `border: 1px solid #E7E7E7`, que na tela
     vira um bloco cinza atras de cada sinal — os "botoes estranhos". Nao
     aparecia em medicao nenhuma porque eu media `content`, `order` e
     `width`, e nunca `border`. Quem denunciou foi o screenshot. */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  order: 3;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pood-tinta-2);
  text-decoration: none;
  font-family: var(--pood-fonte);
  font-size: 15px;
  line-height: 1;
  transition: color .15s;
}
.checkout-cart-index #shopping-cart-table .col.qty .qty-changer a:hover { color: var(--pood-tinta); }
.checkout-cart-index #shopping-cart-table .col.qty .qty-changer a.qty-dec { order: 1; }
/* fora a fonte de icone do Porto, entram os sinais */
.checkout-cart-index #shopping-cart-table .col.qty .qty-changer a i { display: none; }

/* 🔴 O ::before TAMBEM e absoluto no Porto, e trocar so o `content` nao o traz
   de volta ao fluxo: os dois sinais continuavam empilhados no MEIO da pilula,
   por cima do numero, enquanto as caixas dos links ficavam vazias nas pontas.
   Media-se tudo certo — largura, ordem, content — e a tela mostrava outra
   coisa. Quem denunciou foi `elementFromPoint` no centro da pilula devolvendo
   `a.qty-dec` em vez do campo. */
.checkout-cart-index #shopping-cart-table .col.qty .qty-changer a::before {
  position: static;
  /* 🔴 A BARRA ACIMA DO SINAL — o "sinal em cima do + e do -" que o Will viu —
     era `border-top: 1px solid` NO PROPRIO ::before. Eu tinha zerado posicao,
     tamanho, fonte, cor e transform deste pseudo, e a borda nunca. A mesma
     omissao aparecia no <a> logo acima: reset de pseudo-elemento do Porto tem
     de incluir `border` e `background`, sempre.

     E nao aparecia em medicao nenhuma porque eu media `content`, `position`
     e `font-size` — nunca `border`. Quem provou foi o screenshot ampliado
     6x sobre fundo cinza; em tamanho natural a barra passa por artefato de
     JPEG. */
  border: 0;
  background: transparent;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  font-family: var(--pood-fonte);
  font-size: 15px;
  line-height: 1;
  color: inherit;
  transform: none;
}
.checkout-cart-index #shopping-cart-table .col.qty .qty-changer a.qty-dec::before { content: "\2212"; }
.checkout-cart-index #shopping-cart-table .col.qty .qty-changer a.qty-inc::before { content: "+"; }

/* 🔴 O SEGUNDO SINAL vinha do ::after, que eu nunca tinha olhado. E uma barra
   ABSOLUTA de 1x9px que o Porto usa de separador, e como `.field.qty` e
   `position: relative` ela se ancora na pilula inteira e cai por cima do
   numero. Ao zerar um pseudo-elemento do Porto, zere OS DOIS — ::before e
   ::after. Medi o ::before tres vezes e o ::after nenhuma. */
.checkout-cart-index #shopping-cart-table .col.qty .qty-changer a::after { content: none; }


/* ---------------------------------------------------------------------------
   6. Preco e Remover
--------------------------------------------------------------------------- */

/* O card mostra UM valor por linha, e ele e o total da linha. A coluna de preco
   unitario sai: com quantidade 1 os dois numeros sao iguais. */
.checkout-cart-index #shopping-cart-table .col.price { display: none; }

.checkout-cart-index #shopping-cart-table .col.subtotal {
  grid-column: 4;
  grid-row: 1;
  text-align: right;
  min-width: 120px;
}
.checkout-cart-index #shopping-cart-table .col.subtotal .price {
  font-size: 15px;
  font-weight: var(--pood-p-medio);
  font-variant-numeric: tabular-nums;
  color: var(--pood-tinta);
}
.checkout-cart-index #shopping-cart-table .col.subtotal .price-including-tax::before,
.checkout-cart-index #shopping-cart-table .col.subtotal .price-excluding-tax::before { display: none; }

.checkout-cart-index #shopping-cart-table > tbody.cart.item > tr.item-actions > td {
  grid-column: 4;
  grid-row: 2;
  text-align: right;
}
.checkout-cart-index #shopping-cart-table .item-actions .actions-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin: 0;
  padding: 0;
}
/* 🔴 "Mover para Lista de Desejos" so existe para quem esta LOGADO, e por isso
   ele nao aparece em teste de convidado — foi assim que passou despercebido.
   O core embrulha as acoes em `.secondary` (e as vezes `.primary`), e um
   wrapper de bloco dentro de um flex vira UM item so: os dois links empilham e
   o desejos cai embaixo do Remover. `display: contents` achata o wrapper e
   devolve os dois a mesma linha — a mesma tecnica da sacola (CLAUDE.md 38.1). */
.checkout-cart-index #shopping-cart-table .item-actions .actions-toolbar > .secondary,
.checkout-cart-index #shopping-cart-table .item-actions .actions-toolbar > .primary { display: contents; }
.checkout-cart-index #shopping-cart-table .item-actions .action-edit { display: none; }
/* a.action-delete e nao .action-delete: o Porto ancora com seletor de tipo, que
   soma especificidade (CLAUDE.md 37.2). */
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-delete {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11.5px;
  color: var(--pood-tinta-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-delete::after { content: none; }
/* o ::before deixa de ser escondido e passa a CARREGAR o icone */
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-delete::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: currentColor;
  -webkit-mask: url("../images/lixeira.svg") no-repeat center / contain;
  mask: url("../images/lixeira.svg") no-repeat center / contain;
}
/* o TEXTO CONTINUA NO DOM, so escondido: leitor de tela segue lendo "Remover",
   e o js/carrinho.js copia esse mesmo texto para o `title`, de modo que a
   traducao continua vindo do i18n e nao e repetida em lugar nenhum. */
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-delete > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-delete:hover {
  color: var(--pood-acento);
  border-bottom-color: var(--pood-acento);
}

/* O link de desejos recebe o mesmo traco do Remover: sao duas acoes irmas e
   pesam igual. So o hover difere — desfazer nao e o mesmo que guardar, entao
   ele nao vai para o acento de alerta. */
.checkout-cart-index #shopping-cart-table .item-actions a.action.towishlist,
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-towishlist {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11.5px;
  color: var(--pood-tinta-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.checkout-cart-index #shopping-cart-table .item-actions a.action.towishlist::after,
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-towishlist::after { content: none; }
.checkout-cart-index #shopping-cart-table .item-actions a.action.towishlist::before,
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-towishlist::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: currentColor;
  -webkit-mask: url("../images/coracao.svg") no-repeat center / contain;
  mask: url("../images/coracao.svg") no-repeat center / contain;
}
.checkout-cart-index #shopping-cart-table .item-actions a.action.towishlist > span,
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-towishlist > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.checkout-cart-index #shopping-cart-table .item-actions a.action.towishlist:hover,
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-towishlist:hover {
  color: var(--pood-tinta);
  border-bottom-color: var(--pood-tinta);
}


/* ---------------------------------------------------------------------------
   7. Acoes do rodape da lista
--------------------------------------------------------------------------- */

/* O "Continuar Comprando" do core sai daqui: ele foi desenhado de novo dentro
   do resumo (bloco pood.cart.continuar). Escondido, e nao removido — tirar o
   <a> exigiria copiar o cart/form.phtml inteiro do core para o subtema. */
.checkout-cart-index .cart.main.actions > .action.continue { display: none; }

/* So o Atualizar sobra, e ele vai para a direita — alinhado com a coluna de
   precos, que e de onde vem a quantidade que ele envia. */
.checkout-cart-index .cart.main.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin: 22px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--pood-linha);
}
.checkout-cart-index .cart.main.actions .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pood-h);
  padding: 0 22px;
  border-radius: var(--pood-r);
  border: 1px solid var(--pood-linha);
  background: var(--pood-papel);
  color: var(--pood-tinta);
  font-family: inherit;
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
}
.checkout-cart-index .cart.main.actions .action:hover { border-color: var(--pood-tinta); color: var(--pood-tinta); }


/* ---------------------------------------------------------------------------
   8. O resumo
--------------------------------------------------------------------------- */

.checkout-cart-index .cart-summary {
  background: var(--pood-papel);
  border: 1px solid var(--pood-linha-2);
  border-radius: var(--pood-r-cartao);
  padding: 24px;
  margin: 0;
  width: auto;
  float: none;
  position: static;
}
.checkout-cart-index .cart-summary > .summary.title {
  display: block;
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: var(--pood-p-medio);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--pood-tinta);
  text-transform: none;
}

.checkout-cart-index .cart-totals { border: 0; padding: 0; margin: 0; }
.checkout-cart-index .cart-totals table.totals { width: 100%; }
.checkout-cart-index .cart-totals .totals th,
.checkout-cart-index .cart-totals .totals td {
  padding: 9px 0;
  border: 0;
  font-size: 13.5px;
  font-weight: var(--pood-p-normal);
  color: var(--pood-tinta-2);
  text-transform: none;
  letter-spacing: 0;
}
.checkout-cart-index .cart-totals .totals td { text-align: right; }
.checkout-cart-index .cart-totals .totals .price {
  color: var(--pood-tinta);
  font-weight: var(--pood-p-medio);
  font-variant-numeric: tabular-nums;
}
.checkout-cart-index .cart-totals .grand.totals th,
.checkout-cart-index .cart-totals .grand.totals td {
  border-top: 1px solid var(--pood-linha-2);
  padding-top: 16px;
  font-size: 16px;
  color: var(--pood-tinta);
}
.checkout-cart-index .cart-totals .grand.totals .price {
  font-size: 19px;
  font-weight: var(--pood-p-forte);
  letter-spacing: -.02em;
}

.checkout-cart-index .cart-summary .checkout.methods { margin: 18px 0 0; padding: 0; text-align: left; }
.checkout-cart-index .cart-summary .checkout.methods .item { margin: 0 0 10px; }
.checkout-cart-index .cart-summary .action.primary.checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--pood-h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--pood-r);
  background: var(--pood-acento);
  color: var(--pood-tinta);
  font-family: inherit;
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-forte);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
.checkout-cart-index .cart-summary .action.primary.checkout:hover {
  background: var(--pood-acento-h);
  color: var(--pood-tinta);
}
/* "Continuar comprando": o botao vazado do card, logo abaixo do acento. */
.checkout-cart-index .cart-summary a.action.pood-sc-continuar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--pood-h);
  padding: 0 22px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r);
  background: var(--pood-papel);
  color: var(--pood-tinta);
  font-family: inherit;
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
}
.checkout-cart-index .cart-summary a.action.pood-sc-continuar:hover {
  border-color: var(--pood-tinta);
  color: var(--pood-tinta);
}

.checkout-cart-index .cart-summary .action.multicheckout {
  display: inline-block;
  font-size: 11.5px;
  color: var(--pood-tinta-2);
  text-decoration: underline;
}
.checkout-cart-index .cart-summary .action.multicheckout:hover { color: var(--pood-acento); }


/* ---------------------------------------------------------------------------
   9. O cupom, dentro do resumo

   O bloco vem para ca pelo <move> do layout. No card ele e a linha
   "Cupom | Adicionar"; aqui e a sanfona do core, na mesma moldura de fios do
   bloco de frete logo acima.
--------------------------------------------------------------------------- */

.checkout-cart-index .cart-summary #block-discount {
  margin: 0;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--pood-linha);
  background: transparent;
  width: auto;
  float: none;
}
.checkout-cart-index .cart-summary #block-discount .title,
.checkout-cart-index .cart-summary #block-discount .title strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta);
  text-transform: none;
  letter-spacing: 0;
}
.checkout-cart-index .cart-summary #block-discount .content { padding: 0 0 14px; }
.checkout-cart-index .cart-summary #block-discount .fieldset.coupon { display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.checkout-cart-index .cart-summary #block-discount .field { margin: 0; flex: 1 1 auto; min-width: 0; }
.checkout-cart-index .cart-summary #block-discount .label { display: none; }
.checkout-cart-index .cart-summary #block-discount input[type="text"] {
  width: 100%;
  height: var(--pood-h);
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-campo);
  background: var(--pood-papel);
  padding: 0 14px;
  font-family: inherit;
  font-size: 13.5px;
  box-shadow: none;
}
.checkout-cart-index .cart-summary #block-discount .actions-toolbar { margin: 0; flex: none; }
.checkout-cart-index .cart-summary #block-discount .action {
  height: var(--pood-h);
  padding: 0 16px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r);
  background: var(--pood-papel);
  color: var(--pood-tinta);
  font-family: inherit;
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  white-space: nowrap;
}
.checkout-cart-index .cart-summary #block-discount .action:hover { border-color: var(--pood-tinta); }

/* 🔴 O CUPOM NAO E `.cart-discount` DEPOIS DO <move>.
   Enquanto o Porto o deixava solto na coluna dos itens, o invólucro era
   `div.cart-discount`. Dentro do resumo quem renderiza e `div#block-discount`,
   e por isso o primeiro CSS que escrevi nao encostou nele: continuava com o
   botao no acento ANTIGO da loja (#db6060), 48px de altura, raio 3 e caixa
   alta. Ao mover um bloco de lugar, confira a classe do que chegou — nao
   presuma que e a mesma de antes.

   Os seletores abaixo repetem o do bloco com o TIPO junto (`input#…`,
   `button.action`): o Porto ancora estes dois por tipo, que soma
   especificidade (CLAUDE.md 37.2). */
.checkout-cart-index .cart-summary #block-discount > .title,
.checkout-cart-index .cart-summary #block-discount > .title > strong {
  padding: 12px 0;
  font-size: 13px;
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta);
  text-transform: none;
  letter-spacing: 0;
}
.checkout-cart-index .cart-summary #block-discount > .content { padding: 0 0 14px; }
.checkout-cart-index .cart-summary #block-discount .fieldset.coupon {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}
.checkout-cart-index .cart-summary #block-discount input#coupon_code.input-text {
  width: 100%;
  height: var(--pood-h);
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-campo);
  background: var(--pood-papel);
  padding: 0 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--pood-tinta);
  box-shadow: none;
}
.checkout-cart-index .cart-summary #block-discount input#coupon_code.input-text:focus {
  outline: 2px solid var(--pood-acento);
  outline-offset: -1px;
  border-color: var(--pood-acento);
}
.checkout-cart-index .cart-summary #block-discount .actions-toolbar,
.checkout-cart-index .cart-summary #block-discount .actions-toolbar .primary { margin: 0; padding: 0; flex: none; }
.checkout-cart-index .cart-summary #block-discount button.action.apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pood-h);
  padding: 0 18px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r);
  background: var(--pood-papel);
  color: var(--pood-tinta);
  font-family: inherit;
  font-size: var(--pood-t-apoio);
  font-weight: var(--pood-p-medio);
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  white-space: nowrap;
}
.checkout-cart-index .cart-summary #block-discount button.action.apply:hover {
  border-color: var(--pood-tinta);
  background: var(--pood-papel);
  color: var(--pood-tinta);
}


/* ---------------------------------------------------------------------------
   10. Consultar valor do frete

   Moldura .cfrete do card: faixa entre dois fios, com o titulo servindo de
   sanfona.

   ⚠️ SO O CEP. Pais e Estado saem da tela por decisao do Will. Eles continuam
   no DOM, com os valores que o Magento preencheu — escondidos, e nao
   removidos: o pais alimenta a cotacao, e um <select> ausente faria o
   componente Knockout do estimador falhar ao ler o proprio campo.
--------------------------------------------------------------------------- */

.checkout-cart-index .cart-summary #block-shipping {
  margin: 0;
  padding: 4px 0;
  border-top: 1px solid var(--pood-linha);
  border-bottom: 1px solid var(--pood-linha);
  background: transparent;
}
.checkout-cart-index .cart-summary #block-shipping .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta);
  /* SEMPRE ABERTO (Will, 21/08/2026): o titulo deixa de ser sanfona. Com o
     campo de CEP ja na tela, consultar o frete vira um passo a menos — e o
     valor do frete e justamente o que decide a compra. */
  cursor: default;
  pointer-events: none;
  text-transform: none;
  letter-spacing: 0;
}
/* a setinha da sanfona nao tem mais o que anunciar */
.checkout-cart-index .cart-summary #block-shipping .title::before,
.checkout-cart-index .cart-summary #block-shipping .title::after { content: none; display: none; }

/* 🔴 `!important` E NECESSARIO, e nao e forca bruta.

   O widget `collapsible` do Magento fecha escrevendo `display: none` INLINE,
   e guarda o estado (`saveState`) no localStorage do visitante. Sem o
   `!important`, quem ja tivesse fechado o bloco alguma vez continuaria com
   ele fechado para sempre — e eu nunca veria, porque a minha sessao esta com
   ele aberto. Declaracao de autor com `!important` vence estilo inline sem
   `!important`, que e exatamente este caso.

   O `data-collapsible="true"` fica no lugar: ele vem do template do core, e
   tirar dali significaria manter uma copia do template para apagar um
   atributo. */
.checkout-cart-index .cart-summary #block-shipping .content,
.checkout-cart-index .cart-summary #block-shipping [data-role="content"] { display: block !important; }
.checkout-cart-index .cart-summary #block-shipping .title strong {
  font-size: 13px;
  font-weight: var(--pood-p-medio);
  text-transform: none;
  letter-spacing: 0;
}
.checkout-cart-index .cart-summary #block-shipping .content { padding: 0 0 14px; }
.checkout-cart-index .cart-summary #block-shipping .fieldset { margin: 0; padding: 0; border: 0; }
.checkout-cart-index .cart-summary #block-shipping .legend,
.checkout-cart-index .cart-summary #block-shipping .fieldset > br { display: none; }
.checkout-cart-index .cart-summary #block-shipping .field.note {
  margin: 0 0 12px;
  font-size: 11.5px;
  color: var(--pood-tinta-2);
  line-height: 1.5;
}

/* Pais e Estado fora da tela; fica so o CEP */
.checkout-cart-index .cart-summary #block-shipping .field:has(select[name="country_id"]),
.checkout-cart-index .cart-summary #block-shipping .field:has(select[name="region_id"]),
.checkout-cart-index .cart-summary #block-shipping .field:has(input[name="region"]) { display: none; }

.checkout-cart-index .cart-summary #block-shipping .field { margin: 0 0 12px; }
.checkout-cart-index .cart-summary #block-shipping .field > .label {
  display: block;
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: var(--pood-p-medio);
  color: var(--pood-tinta-2);
  text-transform: none;
}
.checkout-cart-index .cart-summary #block-shipping input[type="text"],
.checkout-cart-index .cart-summary #block-shipping select {
  width: 100%;
  height: var(--pood-h);
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-campo);
  background: var(--pood-papel);
  padding: 0 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--pood-tinta);
  box-shadow: none;
}
.checkout-cart-index .cart-summary #block-shipping input[type="text"]:focus,
.checkout-cart-index .cart-summary #block-shipping select:focus {
  outline: 2px solid var(--pood-acento);
  outline-offset: -1px;
  border-color: var(--pood-acento);
}


/* ---------------------------------------------------------------------------
   11. As opcoes de frete

   Marcacao em web/template/cart/shipping-rates.html. NAO e a mesma do checkout:
   la e uma <table>, aqui e um <dl>, e por isso o frete-logos.css do
   PoodModulos_Transportadora nao alcanca esta tela.
--------------------------------------------------------------------------- */

.checkout-cart-index #block-shipping .fieldset.rate { margin: 16px 0 0; }
.checkout-cart-index #block-shipping .items.methods { margin: 0; }

/* o grupo: CORREIOS, ENTREGA POOD */
.checkout-cart-index #block-shipping .items.methods .item-title {
  margin: 14px 0 8px;
  padding: 0;
  font-size: 10px;
  font-weight: var(--pood-p-forte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
.checkout-cart-index #block-shipping .items.methods .item-title:first-child { margin-top: 0; }
.checkout-cart-index #block-shipping .items.methods .item-options {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-cart-index #block-shipping .items.methods .field.choice {
  display: block;
  margin: 0;
  padding: 0;
}
.checkout-cart-index #block-shipping .items.methods .field.choice > label.label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--pood-linha);
  border-radius: 12px;
  background: var(--pood-papel);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: var(--pood-p-normal);
  color: var(--pood-tinta);
  transition: border-color .15s, background .15s;
}
/* O radio mora DENTRO do label (ver o template): e a primeira coluna da linha,
   e nao um satelite fora da moldura. `position: static` porque o Porto o
   posiciona absoluto no formulario de frete — mesma armadilha dos botoes de
   quantidade. */
.checkout-cart-index #block-shipping .items.methods label.label > input.radio {
  position: static;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-width: 0;
  margin: 0;
  padding: 0;
  opacity: 1;
  accent-color: var(--pood-acento);
}
/* O cartao inteiro acende quando o frete esta escolhido. A classe vem do
   Knockout (ver o template): `:has(input.radio:checked)` NAO funciona aqui —
   `matches()` devolve true e o estilo nao muda, nem com !important, porque quem
   marca o radio e o KO por propriedade e a invalidacao do `:has` nao acompanha.
   O mesmo `:has` com atributo estatico funciona nesta pagina (e o que esconde
   Pais e Estado), entao o problema e o `:checked` dinamico, nao o seletor. */
/* `.field.choice >` repetido de proposito: a regra base do cartao logo acima e
   `… .field.choice > label.label`, e sem essas duas classes o estado escolhido
   ficava MENOS especifico que ela — a classe entrava no elemento e a borda nao
   mudava. */
.checkout-cart-index #block-shipping .items.methods .field.choice > label.label.pood-fr-on {
  border-color: var(--pood-tinta);
  background: var(--pood-fundo);
}


/* As regras de LOGO, TEXTO e VALOR da linha de frete sairam daqui em
   25/08/2026 e foram para o `pood-base.css`: a cotacao da pagina do produto
   passou a usar o mesmo desenho, e o base ja e a casa do que serve mais de uma
   tela (foi assim com a trilha). O que fica aqui e o que so o carrinho tem —
   o cartao selecionavel, o radio e o estado escolhido. */


/* ---------------------------------------------------------------------------
   12. Telas estreitas
--------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .checkout-cart-index .cart-container { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .checkout-cart-index .cart-container > .form.form-cart,
  .checkout-cart-index .cart-container > .cart-summary,
  .checkout-cart-index .cart-container > .rewards,
  .checkout-cart-index .cart-container > .pood-po,
  .checkout-cart-index .cart-container > #gift-options-cart { grid-column: 1; grid-row: auto; }
}

@media (max-width: 767px) {
  .checkout-cart-index .page-main { padding-left: 10px; padding-right: 10px; padding-top: 32px; }
  .checkout-cart-index #shopping-cart-table > tbody.cart.item {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px 14px;
  }
  .checkout-cart-index #shopping-cart-table .col.item {
    grid-column: 1 / -1;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .checkout-cart-index #shopping-cart-table .col.item .product-item-photo { width: 86px; max-width: 86px; }
  .checkout-cart-index #shopping-cart-table .col.item .product-image-container { width: 86px !important; }
  .checkout-cart-index #shopping-cart-table .col.qty { grid-column: 1; grid-row: 2; }
  .checkout-cart-index #shopping-cart-table .col.subtotal { grid-column: 2; grid-row: 2; }
  .checkout-cart-index #shopping-cart-table > tbody.cart.item > tr.item-actions > td { grid-column: 2; grid-row: 3; }
  .checkout-cart-index .pood-sc-titulo { font-size: 29px; }
}


/* ---------------------------------------------------------------------------
   6b. Remover e Lista de Desejos como ICONES (Will, 21/08/2026)

   `mask-image` e nao `background-image`: com background a cor fica presa
   dentro do arquivo e nenhum hover pode muda-la. Com mascara, o
   `background-color: currentColor` mantem o icone herdando a cor do link —
   e o hover continua sendo uma linha de CSS (CLAUDE.md 29.14).

   URL RELATIVA aqui, ao contrario do Porto: esta folha e servida de
   `.../pt_BR/css/`, entao `../images/` resolve. A regra do Porto usa caminho
   absoluto porque o CSS dele sai de `pub/media`.

   O alvo tem 34px, e nao 18: 18px de icone e alvo pequeno demais para o dedo, e
   estes dois botoes ficam lado a lado — errar o Remover quando se queria o
   coracao apaga o item da sacola.
--------------------------------------------------------------------------- */
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-delete,
.checkout-cart-index #shopping-cart-table .item-actions a.action.towishlist,
.checkout-cart-index #shopping-cart-table .item-actions a.action.action-towishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-bottom: 0;
  font-size: 0;
  line-height: 0;
}