/* =============================================================
   CERVO — Página de CARRITO (rediseño)
   Plantillas: woocommerce/cart/cart.php · cart-totals.php · cart-empty.php
   Encolado solo en is_cart() (cervo-optimizaciones.php CAPA 12).
   ============================================================= */
:root {
  --cc-ink: #141210;
  --cc-mut: #6d6a66;
  --cc-line: #e8e5e0;
  --cc-bg: #faf9f7;
  --cc-gold: #c8a96e;
  --cc-radius: 14px;
}

/* Ocultar la tabla/aviso nativo si el tema imprimiera algo extra */
.cervo-cart { max-width: 1200px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) 20px clamp(60px, 8vw, 90px); color: var(--cc-ink); }

/* ── Cabecera ── */
.cervo-cart-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.ccart-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1; margin: 0; }
.ccart-count { font-family: 'Jost', sans-serif; font-size: 14px; color: var(--cc-mut); font-weight: 400; }

/* ── Barra de envío gratis ── */
.ccart-ship { background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); padding: 14px 18px; margin-bottom: 26px; }
.ccart-ship-txt { margin: 0 0 10px; font-family: 'Jost', sans-serif; font-size: 14px; color: var(--cc-ink); }
.ccart-ship-txt strong { font-weight: 600; }
.ccart-ship-bar { height: 7px; border-radius: 5px; background: #e6e2db; overflow: hidden; }
.ccart-ship-bar span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--cc-gold), #a9843f); transition: width .6s cubic-bezier(.4,0,.2,1); }
.ccart-ship.is-free .ccart-ship-bar span { background: linear-gradient(90deg, #3aa76d, #2f8d5b); }

/* ── Layout 2 columnas ── */
.cervo-cart-grid { display: grid; grid-template-columns: 1fr 380px; gap: clamp(24px, 3vw, 48px); align-items: start; }

/* ══ COLUMNA ITEMS ══ */
.ccart-items { display: flex; flex-direction: column; gap: 4px; }
.ccart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  grid-template-areas: "thumb info qty subtotal";
  gap: 18px; align-items: center;
  padding: 20px 4px; border-bottom: 1px solid var(--cc-line);
}
.ccart-item:first-child { padding-top: 4px; }

.cci-thumb { grid-area: thumb; display: block; width: 96px; border-radius: 10px; overflow: hidden; background: #f2f0ec; aspect-ratio: 4/5; }
.cci-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cci-info { grid-area: info; min-width: 0; }
.cci-name { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 14.5px; color: var(--cc-ink); text-decoration: none; line-height: 1.4; letter-spacing: 0.01em; display: block; }
.cci-name:hover { color: var(--cc-gold); }
.cci-meta { margin: 5px 0 0; font-size: 12.5px; color: var(--cc-mut); font-family: 'Jost', sans-serif; }
.cci-meta p, .cci-meta dl, .cci-meta dd { margin: 0; }
.cci-meta dt { font-weight: 600; display: inline; }
.cci-meta dd { display: inline; }
.cci-unit { margin: 8px 0 0; font-size: 13px; color: var(--cc-mut); font-weight: 500; }
.cci-unit .amount { color: var(--cc-ink); }

/* ── Pack de 2 (CAPA 24): «Añade otro y te llevas el 5%» ──────────────────
 *
 * Va debajo del precio unitario, dentro de la línea del producto: el «otro»
 * tiene que ser inequívoco, y colgado de su línea lo es.
 *
 * EL COLOR ES EL PROBLEMA INTERESANTE. En el catálogo y en la ficha este
 * mensaje es ROJO, y esa identidad hay que traerla o parecerían dos
 * promociones distintas. Pero una banda roja dentro de un carrito se lee como
 * un ERROR —ahí es donde salen los avisos de stock y de pago—, y este mensaje
 * es exactamente lo contrario: una oportunidad.
 *
 * La solución: el fondo casi blanco con un punto de rosa, el filete rojo a la
 * izquierda, el texto en la tinta normal del carrito, y el rojo reservado para
 * la CIFRA — que es lo que hay que mirar y lo que ata este aviso con el del
 * catálogo. Y el botón oscuro, no rojo: es la acción, no la alarma.
 *
 * El estado cumplido va en verde, el mismo de la barra de envío gratis: en
 * esta página el verde ya significa "conseguido".
 * ---------------------------------------------------------------------- */

.cci-pack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: 'Jost', sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  /* Aparece al cambiar la cantidad, no en la carga: sin la animación el aviso
     se materializa de golpe y parece un fallo de pintado. */
  animation: cci-pack-in .32s cubic-bezier(.16,1,.3,1) both;
}

@keyframes cci-pack-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.cci-pack__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cci-pack strong { font-weight: 600; }

/* Arriba la razón para pulsar el botón; abajo el número que la respalda. */
.cci-pack__lead { font-weight: 600; }
.cci-pack__sub  { font-size: 12px; color: var(--cc-mut); }

/* ── Falta una para el pack ── */
.cci-pack--falta {
  background: #fdf6f4;
  border: 1px solid #f3ddd6;
  border-left: 3px solid #c0392b;
  color: var(--cc-ink);
}

/* La única cifra en rojo: es la que engancha con el mensaje del catálogo. */
.cci-pack__precio {
  color: #c0392b;
  font-weight: 700;
  white-space: nowrap;
}

.cci-pack__add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border: none;
  border-radius: 999px;
  background: var(--cc-ink);
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .18s, transform .18s;
}

/* ⚠️ `button:hover { background:#e26143 }` del tema (main-style.css) le gana a
   una clase sola. Por eso el hover se declara con la misma cadena de
   especificidad desde dentro del carrito y no como `.cci-pack__add:hover`. */
.cervo-cart .cci-pack__add:hover {
  background: #2c2723;
  transform: translateY(-1px);
}

.cervo-cart .cci-pack__add:disabled {
  opacity: .5;
  cursor: default;
  transform: none;
}

.cci-pack__mas { font-size: 15px; line-height: 1; margin-top: -1px; }

/* ── Pack ya conseguido ── */
.cci-pack--ok {
  background: #f1f9f4;
  border: 1px solid #d3e9dc;
  border-left: 3px solid #3aa76d;
  color: #24704a;
}

.cci-pack__ico { flex: 0 0 auto; color: #3aa76d; }

@media (max-width: 560px) {
  .cci-pack { font-size: 12px; padding: 8px 10px; }
  .cci-pack__add { width: 100%; justify-content: center; }
}

/* Quien pide menos movimiento no ve la entrada. */
@media (prefers-reduced-motion: reduce) {
  .cci-pack { animation: none; }
  .cervo-cart .cci-pack__add:hover { transform: none; }
}

.cci-remove { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; background: none; border: none; padding: 0; color: var(--cc-mut); font-size: 12px; font-family: 'Jost', sans-serif; cursor: pointer; text-decoration: none; transition: color .18s; }
.cci-remove:hover { color: #c0392b; }
.cci-remove svg { transition: transform .18s; }
.cci-remove:hover svg { transform: scale(1.08); }

/* Stepper de cantidad */
.cci-qty { grid-area: qty; }
.cci-qty .quantity { display: inline-flex; align-items: center; border: 1px solid var(--cc-line); border-radius: 10px; overflow: hidden; background: #fff; }
.cci-qty .quantity label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cci-step { width: 38px; height: 42px; border: none; background: #fff; cursor: pointer; font-size: 18px; line-height: 1; color: var(--cc-ink); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.cci-step:hover { background: #f4f2ee; }
.cci-step:disabled { opacity: .35; cursor: not-allowed; }
.cci-qty input.qty { width: 44px; height: 42px; border: none; text-align: center; font-size: 14px; font-weight: 600; background: transparent; color: var(--cc-ink); -moz-appearance: textfield; }
.cci-qty input.qty::-webkit-outer-spin-button, .cci-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cci-subtotal { grid-area: subtotal; font-family: 'Jost', sans-serif; font-weight: 700; font-size: 15px; text-align: right; white-space: nowrap; }

/* Acciones (update oculto con JS) + continuar */
.ccart-actions { margin-top: 18px; }
.ccart-update { font-family: 'Jost', sans-serif; font-size: 13px; padding: 9px 18px; border: 1px solid var(--cc-line); background: #fff; border-radius: 8px; cursor: pointer; color: var(--cc-ink); }
.cervo-js .ccart-update { display: none; }
.ccart-continue { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--cc-ink); text-decoration: none; transition: gap .2s, color .2s; }
.ccart-continue:hover { gap: 12px; color: var(--cc-gold); }

/* ══ COLUMNA RESUMEN (sticky) ══ */
.cervo-cart-summary { position: sticky; top: 24px; }
.ccart-summary-card { background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); padding: clamp(20px, 2.2vw, 28px); }
.ccs-title { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 17px; margin: 0 0 18px; letter-spacing: 0.01em; }

/* Cupón colapsable */
.ccs-coupon { border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); margin-bottom: 18px; }
.ccs-coupon-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; padding: 14px 2px; cursor: pointer; font-family: 'Jost', sans-serif; font-size: 13.5px; color: var(--cc-ink); }
.ccs-coupon-toggle svg { transition: transform .25s; }
.ccs-coupon-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ccs-coupon-form { display: none; gap: 8px; padding: 0 2px 14px; }
.ccs-coupon-form.is-open { display: flex; }
.ccs-coupon-input { flex: 1; min-width: 0; height: 42px; border: 1px solid var(--cc-line); border-radius: 8px; padding: 0 12px; font-size: 13px; font-family: 'Jost', sans-serif; background: #fff; }
.ccs-coupon-input:focus { outline: none; border-color: var(--cc-gold); }
.ccs-coupon-btn { height: 42px; padding: 0 16px; border: 1px solid var(--cc-ink); background: var(--cc-ink); color: #fff; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; font-family: 'Jost', sans-serif; transition: opacity .2s; white-space: nowrap; }
.ccs-coupon-btn:hover { opacity: .85; }

/* Totales */
.cervo-cart-totals .cs-rows { display: flex; flex-direction: column; gap: 12px; }
.cs-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: 'Jost', sans-serif; font-size: 14px; color: var(--cc-mut); }
.cs-row .cs-val { color: var(--cc-ink); font-weight: 500; text-align: right; }
.cs-discount .cs-val { color: #3aa76d; }
.cs-shipping { font-family: 'Jost', sans-serif; font-size: 13.5px; color: var(--cc-mut); margin: 4px 0; }
.cs-shipping ul { list-style: none; margin: 0; padding: 0; }
.cs-shipping li { margin: 4px 0; }
.cs-shipping label { color: var(--cc-ink); }
.cs-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--cc-line); font-family: 'Jost', sans-serif; }
.cs-total .cs-label { font-size: 16px; font-weight: 600; color: var(--cc-ink); }
.cs-total .cs-val { font-size: 22px; font-weight: 700; color: var(--cc-ink); }
.cs-total .cs-val .amount { font-weight: 700; }

/* Botón finalizar compra */
.cs-checkout .checkout-button,
.cs-checkout .button {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 54px; padding: 0 20px;
  background: var(--cc-ink); color: #fff !important;
  border: none; border-radius: 10px;
  font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cs-checkout .checkout-button:hover,
.cs-checkout .button:hover { background: #000; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.18); color: #fff !important; }

/* Sellos de confianza */
.ccs-trust { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--cc-line); display: flex; flex-direction: column; gap: 11px; }
.ccs-trust li { display: flex; align-items: center; gap: 10px; font-family: 'Jost', sans-serif; font-size: 12.5px; color: var(--cc-mut); }
.ccs-trust svg { color: var(--cc-gold); flex-shrink: 0; }

/* ── Overlay de carga (auto-update) ── */
.cervo-cart-main { position: relative; }
.cervo-cart.is-updating .cervo-cart-main { pointer-events: none; }
.cervo-cart.is-updating .cervo-cart-main::after {
  content: ''; position: absolute; inset: -6px; background: rgba(255,255,255,.55);
  border-radius: 12px; z-index: 5;
}
.cervo-cart.is-updating .cervo-cart-main::before {
  content: ''; position: absolute; top: 60px; left: 50%; z-index: 6; width: 34px; height: 34px;
  margin-left: -17px; border: 3px solid var(--cc-line); border-top-color: var(--cc-ink);
  border-radius: 50%; animation: cc-spin .7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* ── Cross-sell ── */
.cervo-cart-crosssell { margin-top: clamp(48px, 6vw, 80px); }
.cervo-cart-crosssell:empty { display: none; }
.cervo-cart-crosssell .cross-sells > h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(24px, 3vw, 34px); margin: 0 0 24px; }

/* ── Carrito vacío ── */
.cervo-cart-empty { max-width: 560px; margin: 0 auto; padding: clamp(60px, 10vw, 120px) 24px; text-align: center; }
.cce-icon { color: var(--cc-gold); margin-bottom: 18px; }
.cce-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(28px, 4vw, 42px); margin: 0 0 12px; color: var(--cc-ink); }
.cce-text { font-family: 'Jost', sans-serif; font-size: 15px; line-height: 1.7; color: var(--cc-mut); margin: 0 0 28px; }
/* ⚠️ Igual que `.ccmb-btn`: `a:visited` del tema padre gana a la clase sola y
   deja el texto oscuro sobre fondo negro. Es el botón «Explorar la tienda» del
   carrito vacío — y quien tiene el carrito vacío es, casi siempre, alguien que
   ya visitó la tienda. */
.cce-btn,
.cce-btn:visited { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 30px; background: var(--cc-ink); color: #fff; text-decoration: none; border-radius: 10px; font-family: 'Jost', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; transition: transform .2s, box-shadow .2s; }
.cce-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.18); color: #fff; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 960px) {
  .cervo-cart-grid { grid-template-columns: 1fr; }
  .cervo-cart-summary { position: static; }
  .ccart-summary-card { margin-top: 8px; }
}
@media (max-width: 560px) {
  .ccart-item {
    grid-template-columns: 76px 1fr;
    grid-template-areas:
      "thumb info"
      "thumb qty"
      "subtotal subtotal";
    gap: 8px 14px; row-gap: 12px; align-items: start;
  }
  .cci-thumb { width: 76px; }
  .cci-qty { grid-area: qty; align-self: start; }
  .cci-subtotal { grid-area: subtotal; text-align: left; padding-top: 8px; border-top: 1px dashed var(--cc-line); font-size: 15px; }
  .cci-subtotal::before { content: 'Subtotal: '; font-weight: 400; color: var(--cc-mut); font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ccart-ship-bar span, .cs-checkout .button, .cce-btn { transition: none; }
  .cervo-cart.is-updating .cervo-cart-main::before { animation-duration: 1.4s; }
}

/* ═══════════ EXTRAS ═══════════ */

/* Marca de agua (ciervo) */
.cervo-cart { position: relative; }
.cervo-cart-head, .ccart-ship, .cervo-cart-grid, .cervo-cart-crosssell { position: relative; z-index: 1; }
.cervo-deer-wm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(620px, 78%); height: auto;
  color: var(--cc-ink); opacity: .05; z-index: 0; pointer-events: none;
}
.cervo-deer-wm path { fill: currentColor; }

/* Estados de carga por item (AJAX qty) */
.ccart-item { transition: opacity .2s ease, transform .28s ease; }
.ccart-item.cci-updating { opacity: .45; pointer-events: none; }
.ccart-item.cci-removing { opacity: 0; transform: translateX(-18px); pointer-events: none; }

/* Fecha de entrega + métodos de pago */
.ccs-delivery { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; background: #fff; border: 1px solid var(--cc-line); border-radius: 10px; font-family: 'Jost', sans-serif; font-size: 12.5px; color: var(--cc-ink); }
.ccs-delivery svg { color: var(--cc-gold); flex-shrink: 0; }
.ccs-delivery strong { font-weight: 600; }
.ccs-pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.ccs-pay span { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .03em; color: var(--cc-mut); background: #fff; border: 1px solid var(--cc-line); border-radius: 5px; padding: 4px 8px; }

/* Carrito vacío: sugeridos */
.cce-suggest { max-width: 1100px; margin: clamp(40px, 7vw, 80px) auto 0; padding: 0 20px; }
.cce-suggest > h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(22px, 3vw, 32px); text-align: center; margin: 0 0 26px; color: var(--cc-ink); }

/* Barra fija de checkout (móvil) */
.ccart-mobilebar { display: none; }
@media (max-width: 960px) {
  .cervo-cart { padding-bottom: 94px; }
  .ccart-mobilebar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--cc-line);
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 22px rgba(0,0,0,.09);
  }
  .ccmb-total { display: flex; flex-direction: column; line-height: 1.15; }
  .ccmb-total > span { font-size: 11px; color: var(--cc-mut); font-family: 'Jost', sans-serif; }
  .ccmb-amount { font-size: 18px; font-weight: 700; font-family: 'Jost', sans-serif; color: var(--cc-ink); }
  .ccmb-amount .amount { font-weight: 700; }
  /* ⚠️ `:visited` DECLARADO, Y NO ES DE ADORNO. El tema padre trae
     `a:visited { color: inherit }`, y `a:visited` (0,1,1) tiene MÁS
     especificidad que `.ccmb-btn` (0,1,0): gana. Resultado, sobre fondo negro,
     el texto pasaba a oscuro y «Finalizar compra» se volvía ilegible — pero
     solo para quien ya había pasado por el checkout alguna vez, que es
     justamente el cliente que repite. Por eso no se veía al probarlo en
     incógnito. Detectado el 2026-08-13.
     Mismo caso que el botón del aniversario, el de la página de gracias y el
     de WhatsApp. */
  .ccmb-btn,
  .ccmb-btn:visited { flex: 1; max-width: 230px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--cc-ink); color: #fff; text-decoration: none; border-radius: 10px; font-family: 'Jost', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
  /* En móvil las tarjetas (1 columna) tapan el centro → la subimos detrás
     del encabezado, más grande y un pelín más visible.

     ⚠️ EL ANCHO NO PUEDE PASAR DE 100%, y esto causó un fallo real: estaba en
     116%. Como la marca va CENTRADA (left:50% + translateX(-50%)), ese 16% de
     más se reparte 8% por lado — 30 px a 375 de ancho — y como .cervo-cart no
     recorta, la PÁGINA DEL CARRITO SE PODÍA DESPLAZAR EN HORIZONTAL. En
     escritorio no pasaba porque ahí el contenedor mide 1170 y la marca cabe.
     Centrada, cualquier ancho > 100% desborda. Punto.

     Y NO se arregla con overflow en .cervo-cart: se probó, y `overflow-x:clip`
     deja de anclar la .ccart-mobilebar (que es position:fixed) — la barra de
     finalizar compra pasaba a colgar del carrito en vez de del viewport y se
     salía por abajo. Medido: 829 → 844. */
  .cervo-deer-wm { top: 3%; transform: translateX(-50%); width: 100%; opacity: .05; }
}