/* ============================================================
   FELTONI - Carrinho (cart)   [ VERSAO C-31 ]
   ============================================================
   ASCII puro. Escopo: body.woocommerce-cart (nao vaza).

   Layout no formato "colunas com cabecalho" (referencia Velure)
   adaptado a identidade Feltoni:
   - 2 colunas: tabela de itens (esq) + resumo card (dir, sticky)
   - cabecalho Produto / Preco / Quantidade / Total
   - linhas com divisoria, imagem 80px
   - preco unitario na coluna Preco; promocao com novo em
     destaque e antigo riscado menor
   - resumo com realce da marca + botao pill

   FASE 2 (codigo, se for ao pixel do v11/Velure):
   - stepper - 01 + (JS)  | barra de frete gratis (PHP)
   - subtitulo do hero / breadcrumb (PHP)
   - frase "Pagamento seguro" (PHP)
   ============================================================ */


/* ------------------------------------------------------------
   1 - LAYOUT 2 COLUNAS (tabela | resumo sticky)
   ------------------------------------------------------------ */
body.woocommerce-cart .woocommerce {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 28px;
  align-items: start;
  justify-content: start;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 16px 0 80px !important;
  box-sizing: border-box;
}

body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

body.woocommerce-cart .woocommerce-cart-form {
  grid-column: 1;
  min-width: 0;
  margin: 0 !important;
}

body.woocommerce-cart .cart-collaterals {
  grid-column: 2;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: none !important;
  position: sticky;
  top: 90px;
}

/* (removido: nao havia vazamento real; o clip cortava a sombra dos cards) */


/* ------------------------------------------------------------
   2 - ITENS EM CARDS (modelo Feltoni)
   ------------------------------------------------------------
   Duas zonas separadas por divisoria:
   SUPERIOR: imagem | (nome + lixeira / stepper) | preco unit
   INFERIOR: "Total:" .......... de <riscado> por <promo>
   "27% OFF" e "de/por" sao injetados via PHP no functions.php.
   ------------------------------------------------------------ */
body.woocommerce-cart table.cart {
  display: block;
  width: 100%;
  border: none !important;
  margin: 0 !important;
  background: transparent !important;
}
body.woocommerce-cart table.cart thead { display: none; }
body.woocommerce-cart table.cart tbody { display: block; }

body.woocommerce-cart tr.cart_item {
  display: grid;
  grid-template-columns: 120px 1fr auto auto;
  grid-template-areas:
    "thumb name   remove price"
    "thumb qty    qty    qty"
    "thumb sub    sub    sub";
  column-gap: 18px;
  row-gap: 14px;
  align-items: start;
  background: var(--feltoni-bg-card) !important;
  border: 1px solid var(--feltoni-border);
  border-radius: var(--feltoni-radius-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
}
body.woocommerce-cart tr.cart_item td {
  display: block;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* imagem: quadro 4:5, produto a 85% (ocupa as 2 linhas de cima) */
body.woocommerce-cart td.product-thumbnail {
  grid-area: thumb;
  align-self: start;
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  background: var(--feltoni-bg-deep);
  border: 1px solid var(--feltoni-border);
  border-radius: 16px;
  overflow: hidden;
}
body.woocommerce-cart td.product-thumbnail a {
  position: absolute;
  inset: 0;
  display: block;
}
body.woocommerce-cart td.product-thumbnail img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95% !important;
  height: 95% !important;
  max-width: 95% !important;
  max-height: 95% !important;
  object-fit: contain !important;
  object-position: center;
  border: none !important;
  display: block;
}

/* nome: 1 linha, trunca com reticencias */
body.woocommerce-cart td.product-name {
  grid-area: name;
  align-self: center;
  min-width: 0;
  overflow: hidden;
}
body.woocommerce-cart td.product-name a {
  display: block;
  max-width: 340px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--feltoni-text) !important;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.woocommerce-cart td.product-name a:hover { color: var(--feltoni-pink) !important; }

/* lixeira: logo apos o nome */
body.woocommerce-cart td.product-remove {
  grid-area: remove;
  align-self: center;
  justify-self: start;
  width: auto;
  margin-top: 2px;
}
body.woocommerce-cart td.product-remove a.remove {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 20px;
  height: 20px;
  font-size: 0 !important;
  background-color: rgba(245, 245, 247, 0.55) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2'/%3E%3Cpath d='M19 6v14a1 1 0 01-1 1H6a1 1 0 01-1-1V6'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2'/%3E%3Cpath d='M19 6v14a1 1 0 01-1 1H6a1 1 0 01-1-1V6'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: background-color .18s var(--feltoni-ease);
}
body.woocommerce-cart td.product-remove a.remove:hover { background-color: var(--feltoni-pink) !important; }

/* stepper: abaixo do nome */
body.woocommerce-cart td.product-quantity {
  grid-area: qty;
  align-self: start;
  justify-self: start;
  min-width: 0;
}
body.woocommerce-cart td.product-quantity .quantity {
  margin: 0;
  width: max-content !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
}

/* PRECO UNITARIO (direita, ocupa as 2 linhas de cima) */
body.woocommerce-cart td.product-price {
  display: block !important;
  grid-area: price;
  align-self: start;
  justify-self: end;
  text-align: right;
  font-family: 'Archivo', sans-serif;
}
/* linha de cima: valor cheio riscado + tag de desconto */
body.woocommerce-cart td.product-price del {
  font-size: 12px;
  font-weight: 400;
  color: var(--feltoni-text-mute) !important;
  text-decoration: line-through;
}
body.woocommerce-cart td.product-price .fp-off {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  background: var(--feltoni-pink);
  color: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
/* linha de baixo: preco grande */
body.woocommerce-cart td.product-price ins,
body.woocommerce-cart td.product-price > .woocommerce-Price-amount {
  display: block;
  margin-top: 4px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff !important;
  white-space: nowrap;
}

/* ZONA INFERIOR: Total + de/por (usa o subtotal, com divisoria em cima) */
body.woocommerce-cart td.product-subtotal {
  grid-area: sub;
  display: flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  padding-top: 28px !important;
  border-top: 1px solid var(--feltoni-border) !important;
  font-family: 'Archivo', sans-serif;
}
body.woocommerce-cart td.product-subtotal::before {
  content: "Subtotal:";
  margin-right: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--feltoni-text) !important;
}
body.woocommerce-cart td.product-subtotal .fp-de,
body.woocommerce-cart td.product-subtotal .fp-por {
  font-size: 13px;
  color: var(--feltoni-text-mute) !important;
}
body.woocommerce-cart td.product-subtotal del {
  font-size: 12px;
  color: var(--feltoni-text-mute) !important;
  text-decoration: line-through;
}
body.woocommerce-cart td.product-subtotal ins,
body.woocommerce-cart td.product-subtotal > .woocommerce-Price-amount {
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff !important;
  white-space: nowrap;
}
/* esconde textos de leitor de tela que o Woo injeta no preco */
body.woocommerce-cart tr.cart_item .screen-reader-text { position: absolute !important; left: -9999px; }

/* divisoria do Total: seletor forte pra vencer o "td { border: none }" */
body.woocommerce-cart tr.cart_item td.product-subtotal {
  border-top: 1px solid var(--feltoni-border) !important;
}


/* ------------------------------------------------------------
   3 - CUPOM + ATUALIZAR (linha de acoes abaixo da tabela)
   ------------------------------------------------------------ */
body.woocommerce-cart table.cart tbody tr:not(.cart_item) { display: block; }
body.woocommerce-cart td.actions {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--feltoni-bg-card) !important;
  border: 1px solid var(--feltoni-border);
  border-radius: var(--feltoni-radius);
  padding: 18px 22px !important;
  margin-top: 6px;
}
body.woocommerce-cart td.actions .coupon {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  flex: 1 1 auto;
  width: 100%;
}
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"] {
  width: 100%;
  display: block;
  border-radius: 999px !important;
}
body.woocommerce-cart td.actions .coupon input.input-text {
  background: var(--feltoni-bg-deep) !important;
  border: 1px solid var(--feltoni-border-strong) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: var(--feltoni-text) !important;
  font-family: 'Archivo', sans-serif !important;
  flex: 1 1 auto;
  min-width: 0;
  width: 100% !important;
}
body.woocommerce-cart td.actions button[name="update_cart"] {
  float: right;
  border-radius: 999px !important;
}


/* ------------------------------------------------------------
   4 - RESUMO (cart_totals) - card com realce da marca
   ------------------------------------------------------------ */
body.woocommerce-cart .cart_totals {
  background: var(--feltoni-bg-card);
  border: 1px solid var(--feltoni-border);
  border-radius: var(--feltoni-radius-lg);
  padding: 30px 28px;
}

body.woocommerce-cart .cart_totals h2 {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 22px !important;
  margin: 0 0 18px !important;
  color: var(--feltoni-text) !important;
}

body.woocommerce-cart .cart_totals table {
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}
body.woocommerce-cart .cart_totals table tbody { display: flex; flex-direction: column; }
/* Ordem logica: Subtotal -> Pre -> Pos -> Subtotal c/ desconto -> Cupom -> Envio -> Total */
body.woocommerce-cart .cart_totals tr.cart-subtotal { order: 1; }
body.woocommerce-cart .cart_totals tr.fee { order: 2; }
body.woocommerce-cart .cart_totals tr.fp-subdesc { order: 3; }
body.woocommerce-cart .cart_totals tr.cart-discount { order: 4; }
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
body.woocommerce-cart .cart_totals tr.shipping { order: 5; }
body.woocommerce-cart .cart_totals tr.order-total { order: 6; }
body.woocommerce-cart .cart_totals table tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  max-width: 100%;
}
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
  border: none !important;
  border-top: 1px solid var(--feltoni-border) !important;
  padding: 14px 0 !important;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  color: var(--feltoni-text-dim) !important;
  background: transparent !important;
}
body.woocommerce-cart .cart_totals table th { text-align: left; flex: 0 1 auto; min-width: 0; }
body.woocommerce-cart .cart_totals table td { text-align: right; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
body.woocommerce-cart .cart_totals tr:first-child th,
body.woocommerce-cart .cart_totals tr:first-child td { border-top: none !important; }

/* linha de frete: empilha (radios + CEP precisam de espaco) */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
body.woocommerce-cart .cart_totals tr.shipping {
  flex-direction: column;
  align-items: stretch;
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td,
body.woocommerce-cart .cart_totals tr.shipping td { text-align: left; }
/* frete (Envia/Brazilian Market): conter tudo dentro do card */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td,
body.woocommerce-cart .cart_totals tr.shipping td { min-width: 0; max-width: 100%; overflow: visible; }

body.woocommerce-cart .cart_totals .woocommerce-shipping-methods,
body.woocommerce-cart .cart_totals .shipping-calculator-form { width: 100%; min-width: 0; }

body.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  column-gap: 10px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--feltoni-border);
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li:last-of-type {
  border-bottom: none;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input.shipping_method {
  grid-column: 1;
  grid-row: 1;
  margin: 2px 0 0 !important;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--feltoni-text-dim) !important;
  overflow-wrap: break-word;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label .amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--feltoni-text) !important;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input.shipping_method {
  grid-column: 1;
  margin: 4px 0 0 !important;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: break-word;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li .rate-content {
  grid-column: 2;
}
body.woocommerce-cart .cart_totals .envia-shipping-complement-div {
  margin: 4px 0 0 !important;
}
body.woocommerce-cart .cart_totals .envia-shipping-carrier-img {
  display: none !important;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input.shipping_method {
  margin: 0 8px 0 0;
  vertical-align: middle;
  accent-color: var(--feltoni-pink);
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label {
  display: block;
  color: var(--feltoni-text-dim) !important;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.45;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label .amount {
  display: inline-block;
  margin-top: 2px;
  color: var(--feltoni-text) !important;
  font-weight: 700;
  white-space: nowrap;
}
/* complemento vazio do Envia: nao ocupa espaco */
body.woocommerce-cart .cart_totals .envia-shipping-complement-div:empty,
body.woocommerce-cart .cart_totals .rate-content:empty { display: none !important; }

/* texto de complemento e destino: quebram e ficam discretos */
body.woocommerce-cart .cart_totals .rate-content,
body.woocommerce-cart .cart_totals .envia-shipping-complement-div {
  display: block;
  width: auto;
  min-width: 0;
  margin: 2px 0 0 24px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--feltoni-text-mute) !important;
  overflow-wrap: break-word;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  font-size: 12px;
  line-height: 1.4;
  color: var(--feltoni-text-mute) !important;
  overflow-wrap: break-word;
  margin: 10px 0 6px;
}
/* preco nunca quebra no meio do numero */
body.woocommerce-cart .cart_totals .woocommerce-Price-amount,
body.woocommerce-cart .cart_totals .amount { white-space: nowrap; }

/* travar largura de tudo no resumo (evita vazar pra fora do card) */
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart_totals * { box-sizing: border-box; max-width: 100%; }
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-cart .cart_totals table { min-width: 0 !important; width: 100% !important; }
body.woocommerce-cart .cart_totals .shipping-calculator-form input,
body.woocommerce-cart .cart_totals input.input-text {
  width: 100% !important;
  box-sizing: border-box;
}
body.woocommerce-cart .cart_totals .shipping-calculator-button {
  font-size: 13px;
  color: var(--feltoni-pink) !important;
}

/* total final */
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
  font-size: 16px;
  color: var(--feltoni-text) !important;
  font-weight: 700;
}

/* Total: label encolhe, numero tem espaco e nao corta */
body.woocommerce-cart .cart_totals .order-total th { flex: 0 0 auto; }
body.woocommerce-cart .cart_totals .order-total td {
  flex: 1 1 auto;
  text-align: right;
  white-space: nowrap;
  overflow: visible;
}
body.woocommerce-cart .cart_totals .order-total .amount { color: var(--feltoni-pink) !important; }

/* campo de CEP */
body.woocommerce-cart .cart_totals .shipping-calculator-form input,
body.woocommerce-cart .cart_totals #calc_shipping_postcode {
  background: var(--feltoni-bg-deep) !important;
  border: 1px solid var(--feltoni-border-strong) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: var(--feltoni-text) !important;
  width: 100% !important;
}

/* botao finalizar (pill rosa, full) */
body.woocommerce-cart .wc-proceed-to-checkout { margin-top: 22px; padding: 0; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block !important;
  width: 100% !important;
  text-align: center;
  background: linear-gradient(135deg, var(--feltoni-pink), var(--feltoni-pink-deep)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 16px !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 18px rgba(255, 31, 143, 0.3);
  transition: transform .2s var(--feltoni-ease), box-shadow .2s var(--feltoni-ease);
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255, 31, 143, 0.45);
}


/* ------------------------------------------------------------
   5 - RESPONSIVO
   ------------------------------------------------------------
   O tema reserva ~22% de margem lateral, entao o container util
   e' ~78% da viewport. Colapsa cedo (<=1100) pra nao apertar em
   telas tipo notebook (1024 -> container ~800).
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  body.woocommerce-cart .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  /* nenhum filho do grid pode inflar a coluna alem da viewport */
  body.woocommerce-cart .woocommerce > * {
    min-width: 0;
    max-width: 100%;
  }
  body.woocommerce-cart .cart-collaterals,
  body.woocommerce-cart .cart-collaterals .cart_totals {
    grid-column: 1;
    position: static;
  }
}

/* ------------------------------------------------------------
   MOBILE (<=560px): card vertical — foto em cima, infos embaixo.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  body.woocommerce-cart table.cart thead { display: none; }

  body.woocommerce-cart tr.cart_item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 22px;
    max-width: 100%;
    overflow: hidden;
  }

  /* LIXEIRA: topo direito, pequena e discreta */
  body.woocommerce-cart td.product-remove {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 0;
  }
  body.woocommerce-cart td.product-remove a.remove {
    width: 16px !important;
    height: 16px !important;
  }

  /* FOTO: maior, centralizada. Esconde o ::before (pontinhos) */
  body.woocommerce-cart td.product-thumbnail {
    order: 2;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 240px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    align-self: center;
    margin: 8px 0 10px;
    position: relative;
    background: var(--feltoni-bg-deep);
    border: 1px solid var(--feltoni-border);
    border-radius: 16px;
    overflow: hidden;
    flex: 0 0 auto;
    padding: 18px;
  }
  body.woocommerce-cart td.product-thumbnail::before { display: none !important; content: none !important; }
  body.woocommerce-cart td.product-thumbnail a {
    position: static !important;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 0;
  }
  body.woocommerce-cart td.product-thumbnail img {
    position: static !important;
    transform: none;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto !important;
    padding: 0;
  }

  /* NOME: centralizado, com respiro embaixo */
  body.woocommerce-cart td.product-name {
    order: 3;
    width: 100%;
    text-align: center;
    margin: 0 0 14px;
    overflow: visible;
  }
  body.woocommerce-cart td.product-name a {
    display: block;
    max-width: 100%;
    font-size: 17px;
    line-height: 1.4;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center !important;
  }
  body.woocommerce-cart td.product-name::before { display: none; }

  /* linhas Preco / Quantidade / Subtotal: respiro generoso */
  body.woocommerce-cart tr.cart_item td.product-price,
  body.woocommerce-cart tr.cart_item td.product-quantity,
  body.woocommerce-cart tr.cart_item td.product-subtotal {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    width: 100%;
    text-align: left;
    padding: 28px 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--feltoni-border) !important;
    font-family: 'Archivo', sans-serif;
  }
  body.woocommerce-cart td.product-price { order: 4; }
  body.woocommerce-cart td.product-quantity { order: 5; }
  body.woocommerce-cart td.product-subtotal { order: 6; }

  body.woocommerce-cart td.product-price::before,
  body.woocommerce-cart td.product-quantity::before {
    font-size: 13px;
    font-weight: 600;
    color: var(--feltoni-text-dim) !important;
    flex: 0 0 auto;
    margin: 0;
  }

  /* PRECO mobile: rotulo + riscado na 1a linha, valor na 2a,
     etiqueta % OFF na 3a linha (propria), discreta a esquerda */
  body.woocommerce-cart td.product-price {
    align-items: baseline;
    flex-wrap: wrap;
  }
  body.woocommerce-cart td.product-price::before {
    order: 1;
    align-self: baseline;
  }
  /* riscado com prefixo "de": fim da 1a linha, a direita */
  body.woocommerce-cart td.product-price del {
    font-size: 13px !important;
    margin: 0 0 0 auto;
    order: 2;
  }
  body.woocommerce-cart td.product-price del::before {
    content: "de ";
    color: var(--feltoni-text-mute) !important;
    font-size: 12px;
    font-weight: 400;
  }
  /* valor COM desconto (ins): vai pra 2a linha cheia */
  body.woocommerce-cart td.product-price ins {
    display: inline-block !important;
    width: 100%;
    margin: 6px 0 0 !important;
    text-align: right;
    font-size: 19px !important;
    font-weight: 800;
    white-space: nowrap;
    order: 3;
  }
  /* valor SEM desconto (amount direto): fica na MESMA linha do rotulo */
  body.woocommerce-cart td.product-price > .woocommerce-Price-amount {
    display: inline-block !important;
    margin: 0 0 0 auto !important;
    text-align: right;
    font-size: 19px !important;
    font-weight: 800;
    white-space: nowrap;
    order: 2;
  }
  body.woocommerce-cart td.product-price ins::before {
    content: "por ";
    color: var(--feltoni-text-mute) !important;
    font-size: 12px;
    font-weight: 400;
  }
  /* etiqueta % OFF: badge sobreposto no topo esquerdo do card */
  body.woocommerce-cart tr.cart_item { position: relative; }
  body.woocommerce-cart td.product-price .fp-off {
    position: absolute !important;
    top: 18px;
    left: 18px;
    z-index: 5;
    order: 0;
    margin: 0 !important;
    padding: 4px 11px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    background: var(--feltoni-pink) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(255, 31, 143, 0.4);
  }

  /* QUANTIDADE: stepper menor, a direita */
  body.woocommerce-cart td.product-quantity .quantity,
  body.woocommerce-cart td.product-quantity .fp-qty { margin-left: auto; }
  body.woocommerce-cart td.product-quantity .fp-qty__btn {
    width: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    font-size: 16px;
  }
  body.woocommerce-cart td.product-quantity .fp-qty input.qty {
    width: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px;
    padding: 8px 2px !important;
    font-size: 15px !important;
  }

  body.woocommerce-cart tr.cart_item td.product-subtotal {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 4px;
  }
  body.woocommerce-cart tr.cart_item td.product-subtotal::before {
    content: "Subtotal:" !important;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-size: 14px;
    font-weight: 700;
    color: var(--feltoni-text) !important;
  }
  body.woocommerce-cart tr.cart_item td.product-subtotal .fp-de {
    grid-column: 1;
    justify-self: end;
    font-size: 12px !important;
    color: var(--feltoni-text-mute) !important;
  }
  body.woocommerce-cart tr.cart_item td.product-subtotal del {
    grid-column: 2;
    font-size: 13px !important;
    color: var(--feltoni-text-mute) !important;
  }
  body.woocommerce-cart tr.cart_item td.product-subtotal .fp-por {
    grid-column: 1;
    justify-self: end;
    font-size: 12px !important;
    color: var(--feltoni-text-mute) !important;
  }
  body.woocommerce-cart tr.cart_item td.product-subtotal ins {
    grid-column: 2;
    font-size: 18px !important;
    font-weight: 800;
    white-space: nowrap;
  }
  /* valor SEM desconto no subtotal: mesma linha do "Subtotal:" */
  body.woocommerce-cart tr.cart_item td.product-subtotal > .woocommerce-Price-amount {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-size: 18px !important;
    font-weight: 800;
    white-space: nowrap;
  }
  body.woocommerce-cart tr.cart_item td.product-subtotal .screen-reader-text {
    display: none !important;
  }
}


/* ------------------------------------------------------------
   6 - STEPPER de quantidade (- N +) + atualizacao via JS
   ------------------------------------------------------------ */
body.woocommerce-cart .fp-qty {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  width: max-content !important;
  max-width: max-content !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  background: var(--feltoni-bg-deep);
  border: 1px solid var(--feltoni-border-strong);
  border-radius: 14px;
  overflow: hidden;
}
body.woocommerce-cart .fp-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  min-width: 42px !important;
  flex: 0 0 42px !important;
  height: auto;
  box-sizing: border-box !important;
  background: transparent;
  border: none;
  color: var(--feltoni-text);
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background .15s var(--feltoni-ease), color .15s var(--feltoni-ease);
}
body.woocommerce-cart .fp-qty__btn:hover { background: var(--feltoni-pink); color: #fff; border-color: var(--feltoni-pink); }
body.woocommerce-cart .fp-qty__minus { border-right: 1px solid var(--feltoni-border-strong); box-sizing: border-box; }
body.woocommerce-cart .fp-qty__plus { border-left: 1px solid var(--feltoni-border-strong); box-sizing: border-box; }
body.woocommerce-cart td.product-quantity .fp-qty input.qty {
  width: 48px !important;
  min-width: 48px !important;
  flex: 0 0 48px;
  height: auto !important;
  padding: 10px 2px !important;
  text-align: center !important;
  background: transparent !important;
  color: var(--feltoni-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 0 !important;
}
/* o conjunto - [44] + tem ~112px; nunca deixa empilhar */
body.woocommerce-cart .fp-qty { flex-shrink: 0; }

/* enquanto atualiza via JS */
body.woocommerce-cart .fp-cart-updating {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity .2s var(--feltoni-ease);
}
/* com JS ativo, o botao "Atualizar carrinho" some (vira automatico) */
body.woocommerce-cart.fp-cart-js td.actions button[name="update_cart"] { display: none; }

/* ------------------------------------------------------------
   7 - FIX: lista de frete nao pode forcar largura (min-width
   350px do Woo estourava o card de 320px). Valor vai pra baixo
   do nome, em etiqueta.
   ------------------------------------------------------------ */
body.woocommerce-cart .cart_totals ul#shipping_method,
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Cada metodo: nome em cima, valor embaixo (etiqueta) */
body.woocommerce-cart .cart_totals ul#shipping_method li label,
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  order: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* O valor (R$ 6,00) vira etiqueta rosa embaixo do nome */
body.woocommerce-cart .cart_totals ul#shipping_method li label .amount,
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label .amount {
  display: inline-block !important;
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  background: rgba(255, 31, 143, 0.12) !important;
  border: 1px solid rgba(255, 31, 143, 0.30) !important;
  border-radius: 999px !important;
  color: var(--feltoni-pink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* ------------------------------------------------------------
   8 - HERO/INTRO do carrinho (fundo gradiente + frase)
   ------------------------------------------------------------ */
body.woocommerce-cart .fp-cart-intro {
  position: relative;
  overflow: hidden;
  border-radius: var(--feltoni-radius-lg);
  border: 1px solid var(--feltoni-border);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 31, 143, 0.22), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(37, 229, 98, 0.14), transparent 55%),
    var(--feltoni-bg-card);
  padding: 40px 36px;
  margin: 0 0 28px;
}
body.woocommerce-cart .fp-cart-intro__eyebrow {
  display: inline-block;
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--feltoni-pink);
  margin-bottom: 12px;
}
body.woocommerce-cart .fp-cart-intro__title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  font-size: clamp(34px, 6vw, 54px);
  color: var(--feltoni-text);
  margin: 0 0 14px;
}
body.woocommerce-cart .fp-cart-intro__title .fp-grad {
  background: linear-gradient(100deg, var(--feltoni-pink), var(--feltoni-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
body.woocommerce-cart .fp-cart-intro__sub {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--feltoni-text-dim);
  max-width: 520px;
  margin: 0;
}

@media (max-width: 560px) {
  body.woocommerce-cart .fp-cart-intro {
    padding: 30px 22px;
    margin: 22px 0 20px;
  }
}

/* ------------------------------------------------------------
   9 - Esconde o titulo padrao "Carrinho" do tema (temos o hero)
   ------------------------------------------------------------ */
body.woocommerce-cart .page-title,
body.woocommerce-cart .entry-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart .woocommerce-products-header__title,
body.woocommerce-cart .elementor-page-title,
body.woocommerce-cart .elementor-heading-title.page-title {
  display: none !important;
}

/* ------------------------------------------------------------
   10 - LINHA DE DESCONTO PROGRESSIVO (fee) por produto
   ------------------------------------------------------------
   feltoni-fee-color.js marca a linha .fp-fee-pre (rosa) /
   .fp-fee-pos (verde). Aqui so a cor do rotulo + pilula no valor.
   ------------------------------------------------------------ */
body.woocommerce-cart .cart_totals tr.fee {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.woocommerce-cart .cart_totals tr.fee th {
  width: auto;
  font-weight: 600 !important;
  line-height: 1.3;
  white-space: normal;
  flex: 1 1 auto;
}
body.woocommerce-cart .cart_totals tr.fee td {
  flex: 0 0 auto;
  text-align: right !important;
}
body.woocommerce-cart .cart_totals tr.fee td::before {
  content: none !important;
  display: none !important;
}
body.woocommerce-cart .cart_totals tr.fee td .woocommerce-Price-amount {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700 !important;
  white-space: nowrap;
}
body.woocommerce-cart .cart_totals tr.fee.fp-fee-pre th { color: var(--feltoni-pink) !important; }
body.woocommerce-cart .cart_totals tr.fee.fp-fee-pre td .amount,
body.woocommerce-cart .cart_totals tr.fee.fp-fee-pre td .woocommerce-Price-amount {
  background: rgba(255, 31, 143, 0.12);
  border: 1px solid rgba(255, 31, 143, 0.30);
  color: var(--feltoni-pink) !important;
}
body.woocommerce-cart .cart_totals tr.fee.fp-fee-pos th { color: var(--feltoni-green) !important; }
body.woocommerce-cart .cart_totals tr.fee.fp-fee-pos td .amount,
body.woocommerce-cart .cart_totals tr.fee.fp-fee-pos td .woocommerce-Price-amount {
  background: rgba(37, 229, 98, 0.12);
  border: 1px solid rgba(37, 229, 98, 0.30);
  color: var(--feltoni-green) !important;
}

/* ============================================================
   OVERLAY DE LOADING (frete/totais) - on-brand Feltoni
   Injetado por feltoni-cart-loading.js. Aparece com .is-on (JS).
   ============================================================ */
.fp-cart-loading {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 20px; box-sizing: border-box; border-radius: inherit;
  background: rgba(5, 5, 7, 0.82);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--feltoni-ease), visibility .25s var(--feltoni-ease);
}
.fp-cart-loading.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.fp-cart-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255, 31, 143, 0.18); border-top-color: var(--feltoni-pink);
  animation: fp-spin .7s linear infinite; box-shadow: 0 0 24px rgba(255, 31, 143, 0.35);
}
@keyframes fp-spin { to { transform: rotate(360deg); } }
.fp-cart-loading__text {
  font-family: 'Archivo', sans-serif; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.04em; line-height: 1.4; color: var(--feltoni-text); text-align: center;
}
.fp-cart-loading__sub {
  font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.02em; color: var(--feltoni-text-mute); text-align: center; margin-top: -6px;
}
.fp-cart-loading__dots::after { content: ''; animation: fp-dots 1.4s steps(4, end) infinite; }
@keyframes fp-dots { 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }
@media (prefers-reduced-motion: reduce) {
  .fp-cart-spinner { animation-duration: 1.6s; }
  .fp-cart-loading__dots::after { animation: none; content: '...'; }
}

/* ============================================================
   Suprime o blockUI branco nativo do Woo no resumo do carrinho.
   O calculador de frete do Woo injeta um .blockUI.blockOverlay
   branco (opacity .6) dentro do .cart_totals durante o calculo.
   Como nosso overlay rosa (.fp-cart-loading) cobre o mesmo
   .cart_totals e bloqueia cliques (pointer-events:auto quando
   .is-on), o branco e' redundante e empilha por cima. Escondemos
   so dentro do .cart_totals -> blockUI do Woo em qualquer outra
   area do site continua normal.
   ============================================================ */
body.woocommerce-cart .cart_totals .blockUI.blockOverlay {
  display: none !important;
}

/* ===== Resumo v3: cupom mescla, base do cupom e lembrete ===== */
/* Cupom: chip degrade rosa->verde (distinto dos descontos progressivos) */
body.woocommerce-cart .cart_totals tr.cart-discount { align-items: flex-start; }
body.woocommerce-cart .cart_totals tr.cart-discount th { color: var(--feltoni-text) !important; font-weight: 600 !important; }
/* valor + remover empilhados à direita */
body.woocommerce-cart .cart_totals tr.cart-discount td {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/* chip mescla rosa->verde com o "-" DENTRO */
body.woocommerce-cart .cart_totals tr.cart-discount td .fp-coupon-amt {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(255,31,143,.22), rgba(37,229,98,.22));
  border: 1px solid rgba(255,255,255,.18);
  color: #fff !important;
  font-weight: 800 !important;
  white-space: nowrap;
}
body.woocommerce-cart .cart_totals tr.cart-discount td .fp-coupon-amt .woocommerce-Price-amount {
  background: none !important; border: none !important; padding: 0 !important; color: #fff !important;
}
body.woocommerce-cart .cart_totals tr.cart-discount .woocommerce-remove-coupon {
  color: var(--feltoni-text-mute) !important;
  font-size: 11px;
  text-decoration: none;
}
/* Lembrete sob o cupom */
body.woocommerce-cart .cart_totals .fp-cupom-hint {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--feltoni-text-mute) !important;
  margin-top: 4px;
}
/* Subtotal com desconto: base do cupom, em destaque */
body.woocommerce-cart .cart_totals tr.fp-subdesc th,
body.woocommerce-cart .cart_totals tr.fp-subdesc td {
  border-top: 1px solid var(--feltoni-border-strong) !important;
  color: var(--feltoni-text) !important;
}
body.woocommerce-cart .cart_totals tr.fp-subdesc th { font-weight: 700 !important; }
body.woocommerce-cart .cart_totals tr.fp-subdesc td { font-weight: 800 !important; text-align: right; }

/* rotulos de/por no preco do item em promo (desktop) */
body.woocommerce-cart td.product-price del::before { content: "de "; font-size: 11px; font-weight: 400; color: var(--feltoni-text-mute); }
body.woocommerce-cart td.product-price ins::before { content: "por "; font-size: 11px; font-weight: 400; color: var(--feltoni-text-mute); }

/* ===== Descontos Pre/Pos: rotulo + chip numa linha so (desktop E mobile) ===== */
body.woocommerce-cart .cart_totals tr.fee {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
body.woocommerce-cart .cart_totals tr.fee th {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  text-align: left !important;
  white-space: normal !important;
  font-weight: 600 !important;
}
body.woocommerce-cart .cart_totals tr.fee td {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  text-align: right !important;
}
body.woocommerce-cart .cart_totals tr.fee td::before { content: none !important; }
body.woocommerce-cart .cart_totals tr.fee.fp-fee-pre th { color: var(--feltoni-pink) !important; }
body.woocommerce-cart .cart_totals tr.fee.fp-fee-pos th { color: var(--feltoni-green) !important; }

/* ===== Cupom: rotulo a esquerda + valor/remover a direita (desktop E mobile) + lembrete ===== */
body.woocommerce-cart .cart_totals tr.cart-discount {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
body.woocommerce-cart .cart_totals tr.cart-discount th {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  text-align: left !important;
  color: var(--feltoni-text) !important;
  font-weight: 600 !important;
}
body.woocommerce-cart .cart_totals tr.cart-discount td {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  text-align: right !important;
}
/* remove o rotulo duplicado que o Woo injeta no mobile (data-title) */
body.woocommerce-cart .cart_totals tr.cart-discount td::before { content: none !important; }
/* lembrete de texto sob o cupom (via CSS, nao escapa) */
body.woocommerce-cart .cart_totals tr.cart-discount th::after {
  content: "Sobre o subtotal com desconto";
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--feltoni-text-mute) !important;
}

/* esconde o blockUI branco nativo do Woo na lista de produtos (usamos o overlay branded) */
body.woocommerce-cart .woocommerce-cart-form .blockUI.blockOverlay {
  display: none !important;
}

/* Hero do carrinho ocupa a largura inteira (as 2 colunas do grid) */
body.woocommerce-cart .fp-cart-intro { grid-column: 1 / -1; }

/* Cross-sell abaixo do carrinho: largura inteira (abrange as 2 colunas) */
body.woocommerce-cart .fh-rotina--cross-ecossistema { grid-column: 1 / -1; }

/* Etapas dentro do hero do carrinho: alinhadas a esquerda, com divisoria */
body.woocommerce-cart .fp-cart-intro .fp-steps {
  justify-content: flex-start;
  max-width: none;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(245, 245, 247, 0.10);
}
@media (max-width: 560px) {
  body.woocommerce-cart .fp-cart-intro .fp-steps { margin-top: 20px; padding-top: 18px; }
}

/* ------------------------------------------------------------
   FIX MOBILE: cross-sell nao estoura a largura do carrinho
   ------------------------------------------------------------
   O carrossel e um flex horizontal de cards. Como filho do grid,
   seu min-content inflava a coluna. Confina a cadeia e deixa o
   track rolar internamente. So apresentacao; nao toca calculo.
   ------------------------------------------------------------ */
body.woocommerce-cart .fh-rotina--cross-ecossistema,
body.woocommerce-cart .fh-rotina--cross-ecossistema .fh-rotina__carousel,
body.woocommerce-cart .fh-rotina--cross-ecossistema .fh-rotina__row {
  min-width: 0;
  max-width: 100%;
}
body.woocommerce-cart .fh-rotina--cross-ecossistema .fh-rotina__track {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ------------------------------------------------------------
   Remove o vao vazio entre o header e o hero do carrinho
   (desktop + mobile). Causa: padding-top 40px + margens no topo.
   ------------------------------------------------------------ */
body.woocommerce-cart .woocommerce {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.woocommerce-cart .fp-cart-intro {
  margin-top: 14px !important;
}