/* ============================================================
   Echando Raíces — carrito: rediseño completo
   Añadido 2026-07-29. Victoria dio luz verde a implementar en real
   la propuesta de /propuesta-carrito.html ("URL del carrito...
   hay que implementarla aquí"). Sustituye a la versión anterior de
   este archivo, que solo tocaba el radio de borde.

   Criterio: cero plantillas .tpl nuevas ni tocadas — todo el
   marcado ya existe en el tema nativo (cart.tpl y sus _partials),
   esto solo le da estilo, igual que custom-category-page.css. Lo
   único añadido por JS (ver custom-cart-page.js) son elementos que
   no existen en el HTML nativo: el toast de "producto eliminado"
   con deshacer, el bloque de sellos de confianza (el hook
   "displayReassurance" no tiene ningún módulo instalado que lo
   rellene, así que no hay nada que sustituir ahí) y el estado de
   carrito vacío mejorado.

   Nota importante sobre el envío "gratis a partir de 60€": la
   maqueta original mostraba ese umbral de forma dinámica. NO se
   implementa aquí todavía porque la regla de carrito que lo haría
   real (envío gratis ≥60€, solo Península) no se ha podido crear en
   PrestaShop nativo — la restricción de "Reglas del carrito" solo
   permite excluir por país completo, no por Baleares/Canarias
   dentro de España (ver conversación). Mostrar "Gratis" en el
   carrito sin que el total cobrado luego coincida sería un mensaje
   engañoso al cliente, así que aquí se respeta siempre el coste de
   envío real que calcula PrestaShop (ya correcto, con NACEX
   configurado). Pendiente de decisión con Victoria: módulo de
   terceros para reglas por zona, o dejarlo así. */

:root {
  --hr-color-acento: #581f7c;
  --hr-color-acento-claro: #c79ce2;
  --hr-color-texto-sobre-acento: #e6dacc;
  --hr-color-fondo-oscuro: #221200;
  --hr-color-texto-claro: #e6dacc;
  --hr-color-texto-oscuro: #221200;
  --hr-color-borde-oscuro: rgba(230, 218, 204, 0.25);
  --hr-badge-nuevo: #5b7fd6;
  --hr-badge-oferta: #b98fe0;
  --hr-badge-agotado: #d98a3d;
  --hr-verde-ok: #7fbf7f;
  --hr-color-error: #e57468;
  --hr-hover-bg: rgba(230, 218, 204, 0.08);

  /* sistema de radios — sitio completo, validado sobre esta misma propuesta */
  --hr-radius-accion: 8px;
  --hr-radius-imagen: 8px;
  --hr-radius-card: 10px;
  --hr-radius-toast: 8px;
}

/* ============================================================
   Fondo general de la página (mismo patrón que categoría/producto/home)
   ============================================================ */
body.page-cart #wrapper,
body.page-cart #main {
  background: var(--hr-color-fondo-oscuro);
  color: var(--hr-color-texto-claro);
}
body.page-cart a {
  color: var(--hr-color-acento-claro);
}
body.page-cart .breadcrumb {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  font-size: 13px;
}
body.page-cart .breadcrumb a,
body.page-cart .breadcrumb a span {
  color: var(--hr-color-acento-claro);
}
body.page-cart .breadcrumb li:last-child span {
  color: rgba(230, 218, 204, 0.45);
}

/* ============================================================
   Tarjeta contenedora izquierda (.cart-container): se deja
   transparente, sin chrome de tarjeta blanca — el borde/tarjeta
   visual lo lleva cada línea de producto por separado (como en la
   propuesta), no el contenedor entero.
   ============================================================ */
body.page-cart .cart-container.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.page-cart .cart-container .card-block {
  padding-left: 0;
  padding-right: 0;
}
body.page-cart .cart-container h1.h1 {
  color: var(--hr-color-texto-claro);
  font-size: 28px;
  font-weight: 700;
  text-transform: none;
  margin: 0;
}
body.page-cart .cart-container hr.separator {
  border-color: var(--hr-color-borde-oscuro);
  margin: 20px 0;
}

/* ============================================================
   Líneas de producto — cada una es su propia tarjeta con borde
   sutil, igual que ".hr-cart-line" de la propuesta.
   ============================================================ */
body.page-cart .cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.page-cart .cart-item {
  padding: 0;
}
body.page-cart .cart-item + .cart-item {
  margin-top: 0;
}
body.page-cart .product-line-grid {
  border: 1px solid var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-card);
  background: rgba(230, 218, 204, 0.03);
  padding: 16px;
  transition: border-color 0.15s ease, opacity 0.25s ease, max-height 0.25s ease,
              padding 0.25s ease, margin 0.25s ease;
  overflow: hidden;
}
body.page-cart .product-line-grid:hover {
  border-color: rgba(230, 218, 204, 0.4);
}
/* Estado "pendiente de eliminar" (aplicado por custom-cart-page.js
   al pulsar la papelera): se oculta al instante sin llamar todavía
   al servidor, y solo si pasan 6s sin pulsar "Deshacer" se dispara
   la baja real (ver JS) — así el "Deshacer" nunca necesita
   volver a añadir el producto, solo cancelar un temporizador. */
body.page-cart .product-line-grid.hr-pending-remove {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  margin-top: -12px;
  pointer-events: none;
}
body.page-cart .cart-item:has(.product-line-grid.hr-pending-remove) {
  overflow: hidden;
  display: block;
  transition: margin 0.25s ease;
}

/* Corrección 2026-07-29 (ronda 2, feedback de Victoria: "se está
   rompiendo la composición del ancho... la foto muy grande y no hay
   margen para lo demás"): las columnas nativas de Bootstrap
   (.col-md-3/.col-md-4/.col-md-5) reparten el ancho en proporciones
   fijas, así que la imagen ocupaba ~25% del ancho de la tarjeta
   (~170px) en vez de un tamaño de miniatura fijo, dejando poco sitio
   para nombre/cantidad/precio. Se pasa la fila entera a flexbox con
   la imagen a un tamaño fijo (84px, como la propuesta original) y el
   resto del espacio repartido entre el bloque de info y el de
   acciones. */
body.page-cart .product-line-grid {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}
body.page-cart .product-line-grid-left {
  flex: 0 0 84px !important;
  width: 84px !important;
  max-width: 84px !important;
}
body.page-cart .product-line-grid-body {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}
body.page-cart .product-line-grid-right {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Corrección 2026-07-30 (Victoria, ronda 3: "parece que la imagen y
   todo el contenido está algo desplazado a la derecha"): causa real
   encontrada — las tres columnas seguían llevando el padding-left/
   right de 15px que trae Bootstrap de fábrica en sus clases
   ".col-md-*"/".col-xs-*" (el HTML nativo no se toca, así que esas
   clases siguen ahí aunque el ancho ya lo controle el flex de arriba).
   Con "box-sizing: border-box" ese padding comía espacio dentro del
   ancho fijo de cada columna (84px en la imagen, p. ej.), así que el
   contenido interno — que sí tiene su propio ancho fijo — se salía
   por la derecha del padding de 16px real de la tarjeta. Confirmado
   con getBoundingClientRect: la imagen empezaba 15px más a la derecha
   de lo que le correspondía. */
body.page-cart .product-line-grid-left,
body.page-cart .product-line-grid-body,
body.page-cart .product-line-grid-right {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Corrección 2026-07-30 (Victoria, ronda 3): "el precio total... debería
   estar centrado" y "el icono de la papelera... también debería estar
   centrado" — causa real: la columna derecha reparte cantidad/precio/
   eliminar con dos niveles de ".row"/".col-*" nativos de Bootstrap
   (cajas de bloque, no flex), así que el precio y el botón de papelera
   quedaban pegados arriba de su fila en vez de centrados respecto a
   ella. Se "desenvuelven" esos row/col intermedios con
   "display: contents" — no tocan el DOM ni el .tpl, solo dejan de
   generar su propia caja — y la columna derecha entera pasa a ser un
   único flex row con sus 3 piezas reales (selector de cantidad,
   precio, botón eliminar) centradas verticalmente entre sí. */
body.page-cart .product-line-grid-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
body.page-cart .product-line-grid-right .col-xs-4.hidden-md-up {
  display: none;
}
body.page-cart .product-line-grid-right > .row,
body.page-cart .product-line-grid-right .col-md-10,
body.page-cart .product-line-grid-right .col-md-10 > .row,
body.page-cart .product-line-grid-right .qty,
body.page-cart .product-line-grid-right .price,
body.page-cart .product-line-grid-right .col-md-2 {
  display: contents;
}
body.page-cart .product-line-grid-right .cart-line-product-actions {
  display: flex;
  align-items: center;
}
body.page-cart .product-line-grid-right .price .product-price {
  display: block;
  width: 90px;
  flex-shrink: 0;
  text-align: right;
}

/* Imagen de producto */
body.page-cart .product-line-grid-left .product-image {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: var(--hr-radius-imagen);
  overflow: hidden;
  background: #14150f;
  border: 1px solid var(--hr-color-borde-oscuro);
}
body.page-cart .product-line-grid-left .product-image img {
  border-radius: var(--hr-radius-imagen);
  width: 84px;
  /* Corrección 2026-07-30 (ronda 4, "¿la imagen tiene un fondo oscuro?"):
     sí lo tenía, aunque no como color de diseño — el tema trae un reset
     típico "img { max-width: 100% }" que ganaba sobre nuestro
     "width: 84px" y encogía la imagen 2px por debajo de su caja (la
     caja mide 84px de borde a borde, pero con box-sizing:border-box el
     1px de borde a cada lado deja solo 82px de content-box, que es a lo
     que "100%" se ajustaba). Esos 2px de hueco dejaban ver el fondo
     oscuro de la caja (#14150f, pensado como color de carga mientras no
     hay imagen) por un borde de la foto. Se anula el max-width para que
     la imagen sea a sangre completa, sin hueco. */
  max-width: none;
  height: 84px;
  object-fit: cover;
  display: block;
}

/* Nombre, precio, atributos */
/* Corrección 2026-07-30 (ronda 5): 4px de separación entre el titular
   (nombre de producto) y el precio por unidad de abajo — el titular es
   el primer ".product-line-info" del bloque (los siguientes son el
   precio y, si el producto tiene combinaciones, los atributos). */
body.page-cart .product-line-grid-body > .product-line-info:first-child {
  margin-bottom: 4px;
}
body.page-cart .product-line-info .label {
  color: var(--hr-color-texto-claro);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
/* Corrección 2026-07-30 (ronda 4): el nombre es un enlace de verdad
   (lleva a la ficha de producto) pero no se comportaba como el resto
   de links del sitio en hover (violeta claro + subrayado) — solo
   cambiaba de color. */
body.page-cart .product-line-info .label:hover {
  color: var(--hr-color-acento-claro);
  text-decoration: underline;
}
body.page-cart .product-line-info.product-price .current-price .price {
  color: var(--hr-color-texto-claro);
  font-weight: 700;
}
/* Corrección 2026-07-30 (ronda 5): "15,00 €" bajo el nombre es el
   precio de una unidad (el total con cantidad va aparte, en la
   columna derecha) — se aclara con "/ ud." para que no se confunda
   con el total, tal como pidió Victoria. Vía ::after (no toca el
   valor real que usa PrestaShop para nada, es solo texto añadido). */
body.page-cart .product-line-info.product-price .current-price .price::after {
  content: " / ud.";
  font-weight: 400;
  font-size: 0.8em;
  color: rgba(230, 218, 204, 0.6);
}
body.page-cart .unit-price-cart {
  color: rgba(230, 218, 204, 0.6);
  font-size: 13px;
}
body.page-cart .product-discount .regular-price {
  color: rgba(230, 218, 204, 0.5);
  text-decoration: line-through;
}
body.page-cart .discount.discount-percentage,
body.page-cart .discount.discount-amount {
  background: var(--hr-badge-oferta);
  color: var(--hr-color-texto-oscuro);
  border-radius: var(--hr-radius-accion);
  padding: 2px 8px;
  font-weight: 700;
  font-size: 12px;
}
body.page-cart .product-line-info.qty .label,
body.page-cart .product-line-info:not(.product-price) .label {
  color: rgba(230, 218, 204, 0.65);
}
body.page-cart .product-line-info .value {
  color: var(--hr-color-texto-claro);
}

/* Precio total de la línea (columna derecha) */
body.page-cart .product-line-grid-right .price .product-price strong {
  color: var(--hr-color-texto-claro);
  font-size: 16px;
  font-weight: 700;
}
body.page-cart .gift-quantity,
body.page-cart .product-price .gift {
  color: var(--hr-verde-ok);
}

/* Selector de cantidad (bootstrap-touchspin envuelve el input nativo
   con botones +/- reales, ya funcionales vía data-up-url/down-url —
   aquí solo se restyla, no se toca el comportamiento).
   Corrección 2026-07-30 (ronda 3): causa real de fondo del "sigue con
   la forma de la plantilla" — el plugin no arma el layout horizontal
   [-][valor][+] que se asumía, sino su variante "vertical" nativa:
   ".input-group-btn-vertical" envuelve los dos botones y los apila uno
   encima del otro en una columna estrecha a la derecha del input. Con
   ese envoltorio ahí, todo el CSS de abajo (pensado para botón-input-
   botón en fila) se aplicaba pero dentro de una columna apilada, de
   ahí que se viera roto/nativo pese a tener ya los colores y tamaños
   bien puestos. Se desenvuelve igual que en la columna derecha de la
   tarjeta (display:contents, sin tocar el .tpl ni el plugin) y se
   reordena con "order" para que quede tal cual la propuesta: menos,
   valor, más — sin importar el orden real en el HTML generado por el
   plugin (ahí es: input, luego el grupo vertical con [+ arriba][-
   abajo]). */
body.page-cart .qty .bootstrap-touchspin {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-accion);
  overflow: hidden;
  background: transparent;
}
body.page-cart .qty .input-group-addon.bootstrap-touchspin-prefix,
body.page-cart .qty .input-group-addon.bootstrap-touchspin-postfix {
  display: none;
}
body.page-cart .qty .input-group-btn-vertical {
  display: contents;
}
body.page-cart .qty .bootstrap-touchspin-down,
body.page-cart .qty .bootstrap-touchspin-up {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--hr-color-acento-claro) !important;
  width: 32px;
  height: 36px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 0 !important;
}
body.page-cart .qty .bootstrap-touchspin-down {
  order: -1;
}
body.page-cart .qty .js-cart-line-product-quantity {
  order: 0;
}
body.page-cart .qty .bootstrap-touchspin-up {
  order: 1;
}
body.page-cart .qty .bootstrap-touchspin-down:hover,
body.page-cart .qty .bootstrap-touchspin-up:hover {
  background: var(--hr-hover-bg) !important;
}
/* Corrección 2026-07-30 (Victoria, ronda 3: "el input... está con la
   forma de la plantilla y no con la que definimos en la propuesta"):
   dos causas reales, no solo una.
   1) Los botones +/- llevan un <i class="material-icons touchspin-
      down/up"> vacío (sin el texto de ligadura que necesita esa
      fuente para dibujar el icono, p. ej. "remove"/"add") — el tema
      nativo lo deja así y el resultado son botones en blanco, sin
      signo visible. Se sustituye por un glifo propio vía "content",
      en vez de depender de esa fuente de iconos.
   2) El input medía 40px de alto (alto por defecto de ".form-control"
      de Bootstrap) frente a los 36px de los botones de al lado, así
      que quedaba descentrado verticalmente dentro de la píldora.
      Ambos fallos juntos hacían que, aun con el resto del CSS bien
      puesto, el conjunto se viera "roto"/nativo en vez de con la
      pill compacta de la propuesta. */
body.page-cart .bootstrap-touchspin-down i.touchspin-down,
body.page-cart .bootstrap-touchspin-up i.touchspin-up {
  font-family: inherit !important;
  font-style: normal;
  font-size: 16px !important;
  line-height: 1;
  color: inherit;
  /* El tema trae ".bootstrap-touchspin .input-group-btn-vertical i {
     position: absolute; top/left/font-size... }", pensado para su
     variante vertical original (icono chiquito posicionado a mano
     dentro de un botón de 31x35). "display:contents" no saca al icono
     de ese árbol de selectores (sigue coincidiendo por descendencia
     aunque su contenedor ya no pinte caja), así que ese
     position:absolute seguía vivo — se anula por si acaso, aunque el
     cuadrito fantasma de más abajo resultó tener otra causa. */
  position: static !important;
  top: auto !important;
  left: auto !important;
}
/* Corrección 2026-07-30 (ronda 4, "los iconos de - y + sobre todo"):
   causa real del cuadrito fantasma junto al signo — confirmado
   probando en vivo, elemento por elemento — NO era el "::before" (el
   glifo propio de aquí abajo), sino un "::after" del propio tema
   (".bootstrap-touchspin .input-group-btn-vertical .touchspin-down
   ::after"), que sigue generando su caja aunque su valor de "content"
   parezca vacío. Se anula del todo con "content: none", que sí quita
   la caja (a diferencia de "content: \"\"", que la deja generada pero
   sin texto). */
body.page-cart .bootstrap-touchspin-down i.touchspin-down::after,
body.page-cart .bootstrap-touchspin-up i.touchspin-up::after {
  content: none !important;
}
body.page-cart .bootstrap-touchspin-down i.touchspin-down::before {
  content: "\2212"; /* − */
}
body.page-cart .bootstrap-touchspin-up i.touchspin-up::before {
  content: "+";
}
body.page-cart .js-cart-line-product-quantity {
  border: none !important;
  background: transparent !important;
  color: var(--hr-color-texto-claro) !important;
  box-shadow: none !important;
  text-align: center;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  font-weight: 600;
  font-size: 14px;
  -moz-appearance: textfield;
}
body.page-cart .js-cart-line-product-quantity::-webkit-inner-spin-button,
body.page-cart .js-cart-line-product-quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Botón eliminar producto — corrección 2026-07-29 (ronda 2): estaba
   en gris muy apagado (opacidad 0.5), pedido por Victoria más
   visible en reposo, no solo al pasar el ratón.
   Corrección 2026-07-30 (ronda 3, "sigue estando gris"): la corrección
   anterior no llegaba a aplicarse — el tema nativo tiene una regla más
   específica (".product-line-grid-right .cart-line-product-actions
   .remove-from-cart", 3 clases) que la de aquí (2 clases), así que
   ganaba ella y el icono seguía en el gris casi negro de fábrica
   (#232323) pese al cambio. Se añade !important para que gane siempre,
   sin depender de cuántas clases tenga el selector del tema. */
/* Corrección 2026-07-30 (ronda 4, "el área del hover está desplazada o
   el icono no está centrado"): mismo patrón que el color — el tema
   tiene la misma regla de 3 clases (".product-line-grid-right
   .cart-line-product-actions .remove-from-cart") fijando
   "display: inline-block", que gana a nuestro "inline-flex" por
   especificidad y anula el centrado — el icono quedaba pegado arriba
   en vez de centrado en la caja de 32x32 del hover. !important en las
   tres propiedades de layout, no solo en el color. */
body.page-cart .remove-from-cart {
  border-radius: var(--hr-radius-accion);
  color: rgba(230, 218, 204, 0.8) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px;
  height: 32px;
  transition: color 0.15s ease, background 0.15s ease;
}
body.page-cart .remove-from-cart:hover {
  color: var(--hr-color-error) !important;
  background: var(--hr-hover-bg);
}
body.page-cart .remove-from-cart i.material-icons {
  font-size: 20px;
}

/* "Seguir comprando" */
body.page-cart > #main > section#main > .cart-grid > .cart-grid-body > a.label,
body.page-cart .cart-grid-body > a.label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  margin-top: 8px;
  color: var(--hr-color-acento-claro);
}
body.page-cart .cart-grid-body > a.label i.material-icons {
  font-size: 18px;
}

/* ============================================================
   Resumen del pedido (columna derecha) — tarjeta con borde sutil,
   igual que ".hr-summary" de la propuesta.
   ============================================================ */
/* Corrección 2026-07-30 (ronda 4, "haz que márgenes y estilos sean
   EXACTAMENTE igual que la propuesta"): reescrito desde cero contra
   propuesta-carrito_5.html (sección ".hr-summary"). La propuesta usa
   una sola tarjeta con 24px de padding uniforme, de forma que título,
   líneas y botón quedan alineados sin más — aquí en cambio el HTML
   nativo mete TRES ".card-block" independientes dentro de la tarjeta
   (subtotales, total, acciones), cada uno con sus propios 20px de
   padding horizontal de Bootstrap, que competían con el padding de la
   tarjeta. Se aplica el mismo criterio que en el resto de la página:
   la tarjeta pasa a los 24px de la propuesta y se anula el padding
   horizontal de los tres card-block para que no se sumen — así todo
   (título, líneas, total, botón) comparte el mismo margen izquierdo
   real, sin necesidad de parches de margen sueltos por elemento. */
body.page-cart .cart-summary.card {
  background: rgba(230, 218, 204, 0.03) !important;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  box-shadow: none !important;
  padding: 24px;
  /* Corrección 2026-07-30 (ronda 5): Victoria pidió que el div del
     resumen quede anclado (top) con la primera card de producto de la
     lista izquierda, no con la parte de arriba de toda la rejilla (que
     es donde arranca hoy, a la altura del H1 "Carrito"). Medido en
     vivo: top de la 1ª línea de producto − top de la rejilla derecha =
     292.8 − 173.0 ≈ 120px. */
  margin-top: 120px;
}
body.page-cart .cart-summary.card .card-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Titular "Resumen del carrito" — el tema nativo no trae ninguno
   aquí, lo inyecta custom-cart-page.js (pedido por Victoria). Con la
   tarjeta ya a 24px de padding uniforme (como la propuesta), el
   título no necesita margen propio a izquierda/arriba — hereda el
   mismo inset que el resto por venir directo del padding de la
   tarjeta, igual que en ".hr-summary h2" de la propuesta. */
body.page-cart .hr-summary-title {
  /* Corrección 2026-07-30 (ronda 5): 16px → 18px a petición de Victoria. */
  font-size: 18px;
  font-weight: 700;
  color: var(--hr-color-texto-claro);
  text-transform: none;
  margin: 0 0 18px;
}
body.page-cart .card-block.cart-detailed-subtotals {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.page-cart .cart-summary-products,
body.page-cart .cart-summary-subtotals {
  color: rgba(230, 218, 204, 0.85);
}
/* ".hr-summary-row" de la propuesta: padding 8px 0, sin padding
   horizontal (ya lo da la tarjeta). */
body.page-cart .cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: rgba(230, 218, 204, 0.75);
  padding: 8px 0;
  /* Corrección 2026-07-30 (ronda 5): el tema nativo trae
     ".cart-summary-line { margin-bottom: 0.315rem }" y además
     ".cart-summary-line:not(:last-child) { margin-bottom: 1rem }"
     (16px) — este último es el margen de más que Victoria veía debajo
     de "N artículos". Se anula del todo, el espaciado entre líneas ya
     lo da el padding de arriba. */
  margin: 0 !important;
}
body.page-cart .cart-summary-line .label,
body.page-cart .cart-summary-line .value {
  color: inherit;
}
/* Corrección 2026-07-29 (ronda 2): la columna de precios/valores
   debe quedar a bandera derecha de forma explícita — con solo
   "justify-content: space-between" el texto del valor podía no
   quedar realmente alineado a la derecha si el contenido envuelve
   (p. ej. el detalle de envío que mete un hook dentro). */
body.page-cart .cart-summary-line .label {
  text-align: left;
}
body.page-cart .cart-summary-line .value {
  text-align: right;
  margin-left: auto;
  white-space: nowrap;
}
/* Línea divisoria antes del total — en la propuesta es un div aparte
   (".hr-summary-divider", margin 8px 0); aquí no hay un elemento
   nativo equivalente, así que hace ese papel el propio card-block del
   total (es el límite natural entre "envío" y "total" en el HTML). */
body.page-cart .card-block.cart-summary-totals {
  border-top: 1px solid var(--hr-color-borde-oscuro);
  margin-top: 8px;
  /* Corrección 2026-07-30 (ronda 5): 14px → 32px a petición de
     Victoria (el 14px que había venía ya de un intento anterior de
     igualar el 16px nativo — con el bug de especificidad de abajo
     corregido, este valor manda de verdad). */
  padding-top: 32px !important;
  padding-bottom: 0 !important;
}
body.page-cart .cart-summary-line.cart-total {
  font-size: 17px;
  font-weight: 700;
  color: var(--hr-color-texto-claro);
  /* Corrección 2026-07-30 (ronda 5): faltaba !important — el tema
     nativo trae ".card-block.cart-summary-totals .cart-summary-line.
     cart-total { padding: 1rem 0 }" (más específico, 3 clases) y
     ganaba sobre este "padding: 0" sin !important, sumándose al
     padding-top de arriba y dando el efecto de "línea más gruesa" /
     doble espacio que veía Victoria. */
  padding: 0 !important;
  /* El tema nativo también trae un border-top propio en esta línea
     (".card-block.cart-detailed-subtotals + .cart-summary-totals
     .cart-total { border-top: 1px solid #ddd }"), que se sumaba visualmente
     al border-top ya puesto arriba en ".card-block.cart-summary-totals"
     — de ahí la "línea de separación más gruesa" que veía Victoria.
     Se anula para que quede una sola línea divisoria. */
  border-top: none !important;
}
body.page-cart .cart-summary-line.cart-total .label,
body.page-cart .cart-summary-line.cart-total .value {
  color: var(--hr-color-texto-claro);
}

/* Botón "Proceder al pago" — mismo tratamiento que "Añadir al
   carrito" en ficha de producto (custom-product-page.css), más
   font-size 15px y margin-top 4px de ".hr-cta-button" en la
   propuesta.
   Corrección 2026-07-30 (ronda 6): con el padding-bottom del bloque
   de totales a 0 (arriba, .card-block.cart-summary-totals), el Total
   quedaba pegado al botón — el único aire entre ambos era este
   padding-top de 4px. Victoria pidió 24px de separación real. */
body.page-cart .cart-detailed-actions {
  padding-top: 24px !important;
}
body.page-cart .cart-detailed-actions .btn-primary {
  background: var(--hr-color-acento-claro) !important;
  color: var(--hr-color-texto-oscuro) !important;
  border: none !important;
  border-radius: var(--hr-radius-accion) !important;
  padding: 14px !important;
  font-size: 15px;
  font-weight: 600 !important;
  text-transform: none !important;
  width: 100%;
  transition: background 0.15s ease, color 0.15s ease;
}
body.page-cart .cart-detailed-actions .btn-primary:hover,
body.page-cart .cart-detailed-actions .btn-primary:focus {
  background: var(--hr-color-acento) !important;
  color: var(--hr-color-texto-sobre-acento) !important;
}
body.page-cart .cart-detailed-actions .btn-primary.disabled {
  opacity: 0.5;
}
body.page-cart .cart-detailed-actions .alert-warning {
  background: rgba(217, 138, 61, 0.15);
  border: 1px solid var(--hr-badge-agotado);
  color: var(--hr-color-texto-claro);
  border-radius: var(--hr-radius-card);
}

/* Código promocional */
body.page-cart .block-promo {
  border-top: 1px solid var(--hr-color-borde-oscuro);
  margin-top: 8px;
  padding-top: 8px;
}
body.page-cart .promo-code-button a.collapse-button {
  color: var(--hr-color-acento-claro);
  font-size: 13px;
}
body.page-cart .promo-input {
  border-radius: var(--hr-radius-accion);
  background: rgba(230, 218, 204, 0.06);
  border: 1px solid var(--hr-color-borde-oscuro);
  color: var(--hr-color-texto-claro);
  padding: 8px 12px;
}
body.page-cart .promo-code .btn-primary {
  background: var(--hr-color-acento-claro) !important;
  color: var(--hr-color-texto-oscuro) !important;
  border: none !important;
  border-radius: var(--hr-radius-accion) !important;
}
body.page-cart .promo-code .btn-primary:hover {
  background: var(--hr-color-acento) !important;
  color: var(--hr-color-texto-sobre-acento) !important;
}
body.page-cart .cart-voucher .promo-name .label,
body.page-cart .cart-voucher .promo-name span {
  color: var(--hr-color-texto-claro);
}
body.page-cart .cart-voucher .cancel-promo {
  color: rgba(230, 218, 204, 0.6);
}

/* ============================================================
   Bloque nativo del módulo "blockreassurance" (hook
   displayReassurance): SÍ hay un módulo instalado, pero sus 3
   textos ("Política de seguridad/entrega/devolución") están sin
   configurar — muestran literalmente el texto de fábrica "(editar
   con el módulo de información de seguridad y confianza para el
   cliente)" a los clientes reales. Bug independiente del rediseño,
   detectado 2026-07-29 al implementar esta página. Se oculta aquí
   porque el bloque de confianza de abajo (".hr-trust-list",
   inyectado por JS) ya cubre esa función con contenido real y
   verificado. Pendiente: decidir con Victoria si se redacta
   contenido real en el módulo (Aparencia > Módulos >
   blockreassurance) para las páginas donde SÍ pueda hacer falta
   (ej. ficha de producto), o si se deja oculto en todas partes.
   ============================================================ */
body.page-cart .blockreassurance_product {
  display: none !important;
}

/* ============================================================
   Bloque de confianza real (el hook nativo no tenía contenido útil,
   ver bloque de arriba) — lo inyecta custom-cart-page.js dentro de
   la propia tarjeta de resumen, con estas clases (mismos nombres
   que la propuesta, ".hr-trust-*").
   ============================================================ */
/* Corrección 2026-07-30 (ronda 4): valores exactos de ".hr-trust-list"
   /".hr-trust-item"/".hr-trust-footnote" en propuesta-carrito_5.html —
   antes tenía padding horizontal propio (8px) que ya no hace falta con
   la tarjeta a 24px de padding uniforme (ver bloque del resumen más
   arriba). */
body.page-cart .hr-trust-list {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hr-color-borde-oscuro);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.page-cart .hr-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(230, 218, 204, 0.65);
}
body.page-cart .hr-trust-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--hr-color-acento-claro);
}
body.page-cart .hr-trust-footnote {
  font-size: 12px;
  color: rgba(230, 218, 204, 0.65);
  line-height: 1.4;
  margin: 10px 0 0;
}
body.page-cart .hr-trust-footnote a {
  color: var(--hr-color-acento-claro);
}

/* ============================================================
   Toast "producto eliminado" con Deshacer — inyectado por JS,
   fijo abajo, no bloquea la navegación (sustituye a no tener
   ningún aviso, que es lo que hay hoy).
   ============================================================ */
.hr-cart-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 1100;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #2c1a04;
  border: 1px solid var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-toast);
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  max-width: 90vw;
  width: 380px;
  font-family: inherit;
}
.hr-cart-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.hr-cart-toast .hr-toast-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(229, 116, 104, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hr-cart-toast .hr-toast-icon svg {
  width: 18px;
  height: 18px;
  color: var(--hr-color-error);
}
.hr-cart-toast .hr-toast-text {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--hr-color-texto-claro);
}
.hr-cart-toast .hr-toast-text strong {
  display: block;
  font-size: 14px;
}
.hr-cart-toast .hr-toast-cta {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--hr-color-acento-claro);
  white-space: nowrap;
  padding-left: 6px;
  background: none;
  border: none;
  cursor: pointer;
}
/* Corrección 2026-07-29 (ronda 2): le faltaba el hover que llevan el
   resto de enlaces del sitio (texto claro + subrayado). */
.hr-cart-toast .hr-toast-cta:hover {
  color: var(--hr-color-texto-claro);
  text-decoration: underline;
}
.hr-cart-toast .hr-toast-close {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 8px;
  background: none;
  border: none;
  border-radius: var(--hr-radius-accion);
  color: rgba(230, 218, 204, 0.5);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}
.hr-cart-toast .hr-toast-close:hover {
  background: var(--hr-hover-bg);
  color: var(--hr-color-acento-claro);
}

/* ============================================================
   Carrito vacío — el tema nativo solo pinta un texto suelto
   (".no-items"); custom-cart-page.js detecta ese caso e inyecta el
   bloque con icono + botón, con estas clases.
   ============================================================ */
body.page-cart .no-items {
  display: none;
}
body.page-cart .hr-empty-cart {
  text-align: center;
  padding: 50px 20px;
  border: 1px solid var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-card);
  background: rgba(230, 218, 204, 0.03);
}
body.page-cart .hr-empty-cart svg {
  width: 44px;
  height: 44px;
  color: rgba(230, 218, 204, 0.3);
  margin: 0 auto 12px;
  display: block;
}
body.page-cart .hr-empty-cart p {
  font-size: 15px;
  color: var(--hr-color-texto-claro);
  margin: 0 0 4px;
}
body.page-cart .hr-empty-cart span {
  font-size: 13px;
  color: rgba(230, 218, 204, 0.5);
}
body.page-cart .hr-empty-cart .hr-empty-cta {
  /* Corrección 2026-07-29 (ronda 2): con "inline-block" el botón
     podía quedar en la misma línea que el texto de arriba si cabía
     ("al lado" en vez de "debajo", que es lo que pidió Victoria).
     "display: block" fuerza que empiece en su propia línea siempre,
     sea cual sea el ancho del texto. */
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  padding: 10px 24px;
  background: var(--hr-color-acento-claro);
  color: var(--hr-color-texto-oscuro);
  border-radius: var(--hr-radius-accion);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
body.page-cart .hr-empty-cart .hr-empty-cta:hover {
  background: var(--hr-color-acento);
  color: var(--hr-color-texto-sobre-acento);
  text-decoration: none;
}

/* Corrección 2026-07-29 (ronda 2, Victoria: "el estado vacío no
   debería tener el div del resumen, sólo el mensaje"): se oculta la
   columna derecha entera (resumen + sellos + acción de pago) cuando
   el carrito está vacío, y la izquierda pasa a ocupar todo el ancho.
   La clase ".hr-cart-empty" la añade custom-cart-page.js al detectar
   el estado vacío. */
body.page-cart .cart-grid.hr-cart-empty .cart-grid-right {
  display: none !important;
}
body.page-cart .cart-grid.hr-cart-empty .cart-grid-body {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

@media (max-width: 992px) {
  body.page-cart .cart-summary.card {
    position: static;
  }
}