/* =============================================================================
   cadiz-cart-v2.css — Popup "Carrinho de compras" (#modal-cart)
   Padroniza o popup nativo do Recife pro visual CADIZ: mesma largura/fundo/
   padding/tipografia dos outros popups do tema (ex: filtros), com ajustes
   pontuais de layout (foto maior, variante em linhas separadas, etc).

   Renomeado de "cadiz-cart-v1.css" em 31/07/2026 — item 24 novo (estilo do
   contador "N produto(s) adicionado(s) ao carrinho" que o cadiz-cart-v1.js
   passou a inserir logo abaixo do título, itens 9/10 desse arquivo).
============================================================================= */

/* 1. Largura e fundo padrão dos popups CADIZ */
#modal-cart.modal-show {
  width: 600px !important;
}
#modal-cart,
#modal-cart .modal-body {
  background: #F7F4EE !important;
}

/* 2. Padding padrão do corpo (igual ao popup de filtros: 50px 60px) */
#modal-cart .modal-body {
  padding: 50px 60px !important;
}

/* 3. Cabeçalho: mesmo padding/tipografia do popup de filtros (título e botão
   de fechar seguem o padrão; só o conteúdo do meio muda por popup). */
#modal-cart .modal-header {
  padding: 50px 60px 0 !important;
}
#modal-cart .modal-header .row {
  align-items: center;
}
#modal-cart .modal-header .col.p-3 {
  padding: 0 !important;
  font-family: 'Tenor Sans', serif;
  font-size: 18px;
  color: #161619;
}
#modal-cart .modal-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #161619;
}
#modal-cart .modal-close svg {
  width: 13px;
  height: 13px;
}

/* 4. Fix de scroll: o modal-body nativo tinha overflow-y:visible + altura
   fixa (727px), então o conteúdo (cart-row com total/botão) vazava ~45px
   pra fora da caixa, comendo o padding-bottom de 50px. O popup de filtros
   usa overflow-y:auto + height:100% (scroll interno), preservando o
   padding sempre. Replicado aqui. */
#modal-cart .modal-body {
  overflow-y: auto !important;
  height: 100% !important;
}

/* 5. Padronização tipográfica: título já usava Tenor Sans 18px 600 #161619
   (idêntico ao popup de filtros, sem alteração). O resto do conteúdo tinha
   2 exceções nativas fora do padrão DM Sans — botão "Apagar" (Arial) e a
   linha de Total/parcelas (Red Hat Display) — corrigidas abaixo. Cor de
   texto neutra unificada em #161619 (nativo usava #1d1d1d); aplicada em
   .modal-body pra herdar em cascata — cores funcionais (aviso laranja,
   erro vermelho, desconto marrom) têm classe própria com maior
   especificidade e continuam intactas. */
#modal-cart .modal-body {
  color: #161619;
}
#modal-cart button.btn,
#modal-cart .btn-link {
  font-family: 'DM Sans', sans-serif !important;
}
#modal-cart .col-auto,
#modal-cart .js-cart-total,
#modal-cart .js-cart-installments-amount,
#modal-cart .installment-short-separator,
#modal-cart .js-cart-installments {
  font-family: 'DM Sans', sans-serif !important;
}

/* 6. Restaura cor funcional de aviso/erro que a regra geral de cor neutra
   (#161619 no .modal-body) atropelava por herança em textos soltos dentro
   do alert (ex: "frete indisponível"). */
#modal-cart .alert-warning,
#modal-cart .alert-warning * {
  color: rgb(220, 143, 56) !important;
}
#modal-cart .alert-danger,
#modal-cart .alert-danger * {
  color: rgb(221, 119, 116) !important;
}

/* 7. Labels "Subtotal (sem frete)", "Meios de envio" (agora "Calculadora
   de frete" via JS) e "Total:" no padrão .cadiz-filter-label do popup de
   filtros (usado em "Categorias", "Ordenar por", "Preço"): DM Sans 11px,
   weight 500, uppercase, letter-spacing 0.66px, cinza rgb(131,136,137). */
#modal-cart .js-visible-on-cart-filled.row.mb-1.font-weight-normal > .col-7,
#modal-cart #cart-shipping-container .js-accordion-private-toggle > .col,
#modal-cart .js-cart-total-container .col-auto {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgb(131, 136, 137) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.66px !important;
  line-height: normal !important;
}

/* 8. Toggle "Calculadora de frete": remove o ícone de caminhão nativo
   (texto trocado de "Meios de envio" via JS) e deixa o label em preto
   sólido (sobrepõe a regra #7 só nesse elemento). */
#modal-cart #cart-shipping-container .js-accordion-private-toggle svg[class*="icon"] {
  display: none !important;
}
#modal-cart #cart-shipping-container .js-accordion-private-toggle > .col {
  color: #161619 !important;
}

/* 9. "Total:" maior e preto (sobrepõe o #7 só nesse elemento, que por
   padrão ficaria pequeno/cinza como os outros labels). */
#modal-cart .js-cart-total-container .col-auto {
  font-size: 18px !important;
  color: #161619 !important;
  font-weight: 600 !important;
}

/* 10. Alinha horizontalmente label e valor do Subtotal (fontes de tamanhos
   diferentes na mesma row flex faziam o texto assentar em alturas
   diferentes). */
#modal-cart .js-visible-on-cart-filled.row.mb-1.font-weight-normal {
  align-items: center !important;
}

/* 11. Foto do produto maior (nativo: 70x80px → 120x140px). A img é
   lazy-load com position:absolute (top/left/right:0) preenchendo o link
   ".cart-item-image-col", que tem altura FIXA (era 80px, placeholder pra
   não colapsar já que a img absoluta não conta pro fluxo). Só aumentar a
   img não bastava — o container é quem reserva o espaço na row, então os
   3 níveis (coluna .col-auto, link .cart-item-image-col, img) precisam do
   mesmo tamanho. */
#modal-cart .cart-item.row > .col-auto:first-child {
  flex: 0 0 120px !important;
  max-width: 120px !important;
  width: 120px !important;
}
#modal-cart .cart-item-image-col {
  width: 120px !important;
  height: 140px !important;
}
#modal-cart .cart-item-image {
  width: 120px !important;
  max-width: 120px !important;
  height: 140px !important;
  object-fit: cover !important;
}

/* 12. A altura da row do item era fixa (96px), menor que a foto nova
   (140px), deixando a foto vazar por cima da row. Força altura automática
   pro conteúdo. */
#modal-cart .cart-item.row {
  height: auto !important;
}

/* 13. Bloco de variante (cor/tamanho) do item: sai de dentro do nome
   ("Produto (Caramelo, PP)") e vai pra baixo dele, cada parte numa linha
   própria. O split em linhas é feito via JS (cadiz-cart-v1.js); aqui só o
   estilo. */
#modal-cart .cadiz-cart-item-variant {
  margin-top: 4px;
}
#modal-cart .cadiz-cart-item-variant-line {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #161619;
  line-height: 1.5;
}

/* 14. Botão "Apagar" vira ícone X (mesmo símbolo #times usado nos closes
   do tema). Troca de conteúdo via JS; aqui só o estilo. */
#modal-cart [data-component="line-item.remove"] {
  padding: 4px !important;
  line-height: 1;
}
#modal-cart .cadiz-cart-remove-icon {
  width: 12px;
  height: 12px;
  color: #161619;
}

/* 15. Remove a caixa com borda em volta do stepper de quantidade (- 1 +). */
#modal-cart .form-quantity {
  border: none !important;
}

/* 16. Stepper de quantidade reduzido pra no máximo 11px (era 12-14px,
   caixas de 30x30). Iguala botões/input em 22px de altura com flex
   centralizado — o botão nativo tinha line-height:30px residual (do
   tamanho antigo) que descentralizava o ícone na caixa nova. */
#modal-cart [data-component="quantity.minus"],
#modal-cart [data-component="quantity.plus"] {
  font-size: 11px !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#modal-cart [data-component="quantity.minus"] svg,
#modal-cart [data-component="quantity.plus"] svg {
  width: 9px !important;
  height: 9px !important;
}
#modal-cart .js-cart-quantity-input.form-control-inline {
  font-size: 11px !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  padding: 0 !important;
}

/* 17. O container do input (.form-control-container) é um "col" bootstrap
   que cresce pra preencher a row (ficava com 46px pra um input de 22px,
   sobrando 24px vazios só do lado do "+"). Trava no mesmo tamanho do
   input pra ficar simétrico dos dois lados. */
#modal-cart .form-control-container.js-cart-quantity-container {
  flex: 0 0 22px !important;
  max-width: 22px !important;
  width: 22px !important;
}

/* 18. Campo de CEP no padrão visual do formulário de newsletter
   (.cadiz-newsletter-form do footer): linha única com underline, botão
   maiúsculo compacto à direita — mas em cores do popup claro
   (#F7F4EE/#161619) em vez do fundo preto do footer. Valores de fonte/
   padding/letter-spacing copiados 1:1 do componente real. Placeholder
   trocado de "Seu CEP" pra "CEP" via JS. */
#modal-cart .position-relative.form-row.m-0:has(.js-shipping-input) {
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(22, 22, 25, 0.25) !important;
  padding: 0 !important;
}
#modal-cart .position-relative.form-row.m-0:has(.js-shipping-input) .col.p-0 {
  flex: 1 1 0% !important;
  padding: 0 !important;
}
#modal-cart .position-relative.form-row.m-0:has(.js-shipping-input) .form-control-container {
  padding: 0 !important;
}
#modal-cart .js-shipping-input {
  border: none !important;
  background: transparent !important;
  padding: 10px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(22, 22, 25, 0.7) !important;
  box-shadow: none !important;
}
#modal-cart .js-shipping-input::placeholder {
  color: rgba(22, 22, 25, 0.5) !important;
}
#modal-cart .position-relative.form-row.m-0:has(.js-shipping-input) .col-auto.pl-2.pr-0 {
  flex: 0 1 auto !important;
  padding: 0 !important;
}
#modal-cart .js-calculate-shipping {
  background: transparent !important;
  border: none !important;
  padding: 10px 0 10px 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: rgba(22, 22, 25, 0.6) !important;
  cursor: pointer;
}
/* O botão "Calcular" tem a classe nativa "align-item-middle", que usa
   position:relative + top:50% + transform:translateY(-50%) (hack antigo
   de centralização vertical pra um botão nativo mais alto). Isso jogava o
   botão pra cima dentro do novo flex row. Zera as duas partes do hack. */
#modal-cart .js-calculate-shipping.align-item-middle {
  position: static !important;
  top: auto !important;
  transform: none !important;
}

/* 19. Espaçamento e alinhamento de "Não sei meu CEP": nativo tinha
   margin-top 8px e margin-left 4px (classes .mt-2 .ml-1) — o margin-left
   deslocava o link 4px à direita em relação ao campo de CEP acima dele.
   Zera o left, aumenta o top pra 16px. Cor igual à do botão "Calcular". */
#modal-cart a[href*="buscacep"] {
  margin-left: 0 !important;
  margin-top: 16px !important;
  color: rgba(22, 22, 25, 0.6) !important;
}

/* 20. "Iniciar Compra" (agora "Ver Carrinho" via JS) no mesmo padrão do
   botão "Filtrar" do popup de filtros: DM Sans 12px 500 uppercase
   letter-spacing 0.96px, fundo #161619, texto #F7F4EE, borda 1px sólida,
   padding 16px, sem radius. Mais espaço acima (era 16px nativo, agora
   32px, separando melhor do Total). */
#modal-cart input[name="go_to_checkout"] {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.96px !important;
  color: #F7F4EE !important;
  background: #161619 !important;
  border: 1px solid #161619 !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin-top: 32px !important;
}

/* 21. "Ver mais produtos" (agora "Adicionar mais produtos" via JS) no
   mesmo padrão do botão "Limpar filtros": mesma fonte/padding/borda, mas
   fundo transparente e borda cinza clara. Vira um botão de largura total
   (era um link inline), com o mesmo gap de 12px usado entre
   Filtrar/Limpar filtros no popup de filtros. */
#modal-cart .js-modal-close.js-fullscreen-modal-close.font-small {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.96px !important;
  color: #161619 !important;
  background: transparent !important;
  border: 1px solid rgba(22, 22, 25, 0.2) !important;
  border-radius: 0 !important;
  padding: 16px !important;
  text-align: center !important;
  margin-top: 12px !important;
}

/* 22. Parcelas ("Ou até 3 x de R$ 42,73 sem juros") na mesma cor cinza do
   botão "Calcular", linha inteira (não só os números). */
#modal-cart .js-installments-cart-total {
  color: rgba(22, 22, 25, 0.6) !important;
}

/* 23. Pontual: só neste popup do carrinho, o X do cabeçalho vira o texto
   "Fechar" sublinhado (troca de conteúdo via JS; padrão do tema continua
   sendo o ícone #times nos outros modais/popups). Cor igual ao cinza do
   design system (mesmo tom de "Calcular"/parcelas/"Não sei meu CEP") —
   o ícone X real do tema renderiza em rgb(29,29,29) a 100% de opacidade,
   mas por ser um traço fino de 9px lê visualmente como cinza; usa-se
   aqui o cinza estabelecido em vez do preto sólido bruto. */
#modal-cart .modal-header .cadiz-cart-close-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  text-decoration: underline;
  color: rgba(22, 22, 25, 0.6) !important;
}

/* 24. Contador "N produto(s) adicionado(s) ao carrinho" (cadiz-cart-v1.js,
   itens 9 e 10), logo abaixo do título "Carrinho". 12px, negrito só no
   número (a tag <strong> criada pelo JS), resto do texto com peso normal.
   Margem inferior maior pra dar respiro antes do resto do conteúdo do
   popup. */
#modal-cart .modal-header .cadiz-cart-count-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(22, 22, 25, 0.6);
  margin-bottom: 16px;
}
#modal-cart .modal-header .cadiz-cart-count-label strong {
  font-weight: 700;
}