/* ==========================================================================
   The Lab Room · carrito

   ARQUITECTURA
   El carrito de esta tienda es el de BLOQUES de WooCommerce: lo pinta React en
   el navegador desde la Store API, no el servidor. Por eso aquí NO hay
   plantilla propia y NO se barre ninguna hoja:

   - Una plantilla no serviría de nada, porque el contenido no existe en el
     HTML que llega; se monta después.
   - El barrido que usamos en la tienda y en la ficha va por prefijo de handle,
     y las hojas de los bloques llegan repartidas en muchos (`wc-blocks-style`,
     `packages-style`, `all-products`, `cart`, más las de Stripe). Acertar la
     lista es adivinar, y fallar deja un carrito roto o con un control que no
     se puede pulsar.

   Así que esto es una capa encima. Se encola a 100001, después de las de los
   bloques. Donde hay `!important` es porque sus hojas se imprimen después de
   la nuestra y empatan en especificidad; va dicho caso por caso.

   REGISTRO · decisión de Dani, 9 de agosto
   El embudo de compra (carrito y pago) va en registro de moda: **solo Switzer,
   nada de Zodiak**, versalitas diminutas muy espaciadas, botones rectos en vez
   de píldoras, foto a sangre sin marco ni fondo gris, y el máximo de aire.
   El resto del sitio (portada, tienda, categoría y ficha) sigue con Zodiak y
   píldoras a propósito: se decidió no propagarlo, así que **el salto se nota
   al pulsar "añadir al carrito"**, y está asumido.

   REGISTRO · decisión de Dani, 24 de septiembre (tarea 13, opción A)
   Sustituye a la del 9 de agosto EN ESTA PÁGINA. El carrito pasa a ser la
   "hermana grande del cajón" y va en la línea de la ficha nueva: Zodiak en el
   título de la página, en los nombres de producto y en el titular de las
   recomendaciones; Archivo en todo lo demás. Botón de pagar negro y en
   pastilla, como "Añadir al carrito" de la ficha y "Tramitar pedido" del
   cajón. El bloque de WooCommerce NO se rehace: el título y la línea de envío
   gratis se pintan fuera de él desde `carrito/pagina.php`.
   La página de pago (`checkout.css`) se queda como estaba, con la decisión
   del 9 de agosto: queda fuera de esta tarea.

   Las clases están comprobadas en el navegador antes y después de cambiar una
   cantidad, porque los bloques rehacen su árbol al actualizarse.
   ========================================================================== */

body.woocommerce-cart{
  /* Era `clamp(1rem,4vw,5rem)`, o sea 57,6 px a 1440 encima de la caja del tema.
     24 sep: es el `--pad` de `.wrap` (piezas.css), el margen de toda la web.
     Ahora va UNA vez, en la caja del tema, y no encima de ella. */
  --tlr-margen:clamp(1.25rem,5vw,6rem);
  /* Eran .64rem (10,24 px) con .24em de espaciado, y Mónica dijo que la cesta
     "está todo como muy pequeño". A .78rem son 12,5 px, que es donde un rótulo
     en versalita se sigue leyendo como rótulo pero ya no como pie de foto. */
  --tlr-micro:.78rem;          /* versalita de rótulo */
  --tlr-track:.18em;           /* espaciado de esas versalitas */
}

body.woocommerce-cart,
body.woocommerce-cart #qodef-page-outer,
body.woocommerce-cart #qodef-page-inner{background:var(--tlr-bone)}

/* El carrito iba estrecho y muy metido: en una pantalla de 1440 el contenido
   empezaba en el píxel 228 y le sobraban 86 px de aire por arriba. Son dos
   cosas sumadas, la caja del tema (1100 px centrados) y nuestro margen del
   4 % del ancho. Medido en el navegador, no a ojo. Mónica: "está todo como
   muy pequeño, hay demasiado margen de arriba y de los lados".
   24 sep, "enanísimo": seguía en la caja de 1100 del tema (x 130 a 1230 a
   1440) con otros 32 px de margen nuestro dentro. Ahora la caja es la de
   `.wrap`, la de toda la web: 1500 de tope y `--tlr-margen` a los lados, o sea
   de 72 a 1368 a 1440, alineada con la cabecera. Las migas van en la misma
   caja para que no queden metidas respecto a la lista.
   Además el `max-width:1360px` de aquí se aplicaba también a `body` (iba en
   la misma lista de selectores), y la página entera se quedaba en 1360 con
   una franja blanca a la derecha a 1440. */
body.woocommerce-cart #qodef-page-inner,
body.woocommerce-cart .qodef-page-title .qodef-content-grid{
  width:100%;max-width:1500px;padding-inline:var(--tlr-margen);box-sizing:border-box}
body.woocommerce-cart #qodef-page-inner{padding-top:clamp(1.4rem,2.6vw,2.4rem)}

body.woocommerce-cart .wp-block-woocommerce-cart{
  max-width:none;margin-inline:0;padding-inline:0}

/* Archivo por defecto en todo el bloque. La serif (24 sep) entra solo donde
   la pone la ficha: nombres de producto y titular de las recomendaciones,
   cada uno con su regla más abajo. */
body.woocommerce-cart .wp-block-woocommerce-cart :is(h1,h2,h3,h4,p,span,a,td,th,div,button,input){
  font-family:var(--tlr-sans)}
/* Las estrellas de WooCommerce se pintan con una tipografia de iconos; si se
   les fuerza Switzer salen cinco eses. */
body.woocommerce-cart [class*="rating"],
body.woocommerce-cart [class*="rating"] *{font-family:star!important}

/* Rótulo de sección: la única voz que se repite en toda la página. */
/* El titular de "Puede que te interese" SALE de esta lista el 13 de agosto:
   era esta regla nuestra, con `!important`, la que lo dejaba en 10,24 px.
   Se lo dijo el navegador, no se adivinó. */
.wc-block-cart-items__header,
.wc-block-cart__totals-title,
.wp-block-woocommerce-empty-cart-block > h2 ~ h2{
  font-family:var(--tlr-sans)!important;
  font-size:var(--tlr-micro)!important;letter-spacing:var(--tlr-track);
  text-transform:uppercase;font-weight:500;color:var(--tlr-ink-soft)}

/* ---------- columnas ---------- */
.wc-block-cart .wc-block-cart__sidebar{align-self:start;position:sticky;top:130px}

/* ---------- cabecera de la tabla ----------
   La tabla venía con borde por los cuatro lados y parecía una ficha; solo se
   dejan los filetes horizontales. */
.wc-block-cart-items,
.wc-block-cart-items thead,
.wc-block-cart-items tbody,
.wc-block-cart-items tr{border:0!important;margin:0}
.wc-block-cart-items td,
.wc-block-cart-items th{border-left:0!important;border-right:0!important}
.wc-block-cart-items__header th{
  padding:0 0 1rem;border-bottom:1px solid var(--tlr-linea);background:transparent}

/* ---------- las líneas ---------- */
.wc-block-cart-items__row td{
  border-top:0;border-bottom:1px solid var(--tlr-linea);
  padding-block:clamp(1.6rem,3vw,2.4rem);background:transparent;vertical-align:top}

/* Foto a sangre: sin fondo, sin esquinas, sin aire dentro. */
.wc-block-cart-item__image{width:132px;padding-right:1.6rem!important}
.wc-block-cart-item__image img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:0;background:transparent;padding:0}

/* Nombre en versal-baja, no en serif grande y no a gritos.
   El `text-transform:uppercase` que había aquí sobraba y encima engañaba: 48
   de los 151 productos ya vienen en mayúsculas desde su propio catálogo, así
   que parecía que las ponía el servidor. El nombre llega ahora compuesto por
   `tlr_nombre_producto()` desde la Store API, igual que en la ficha. */
/* Lleva `body.woocommerce-cart` y `table` delante por especificidad, no por
   gusto: WooCommerce trae `table.wc-block-cart-items .wc-block-components-
   product-name{font-size:var(--wp--preset--font-size--small,14px)}`, que con
   su elemento gana a un selector de dos clases. Por eso salía a 13 px. */
body.woocommerce-cart table.wc-block-cart-items .wc-block-components-product-name,
.wc-block-cart-items .wc-block-components-product-name{
  font-size:.98rem;letter-spacing:.02em;font-weight:500;
  line-height:1.5;color:var(--tlr-ink);text-decoration:none;display:block;margin-bottom:.7rem}
.wc-block-cart-items .wc-block-components-product-name:hover{color:var(--tlr-ink-soft)}

.wc-block-cart-item__product .wc-block-components-product-price,
.wc-block-cart-item__product .wc-block-components-product-metadata{
  font-size:.76rem;letter-spacing:.02em;color:var(--tlr-ink-soft);line-height:1.6}

.wc-block-cart-item__total{text-align:right}
.wc-block-cart-item__total .wc-block-components-product-price{
  font-size:.76rem;letter-spacing:.02em;color:var(--tlr-ink);font-variant-numeric:tabular-nums}

/* Cantidad: en recuadro de borde fino (5 oct 2026, por coherencia con el checkout; antes, solo un filete debajo).
   NO se toca `display`: WooCommerce coloca los dos signos en posición absoluta
   dentro del selector, y al ponerlo en `flex` se descolocaban. */
.wc-block-components-quantity-selector{
  max-width:104px;margin-top:1.2rem;
  border:1px solid #C9C6BF!important;border-radius:var(--tlr-radio,2px)!important;
  background:#fff!important}
.wc-block-components-quantity-selector::after{display:none!important}

/* El número de la cantidad no se pintaba, y no era cuestión de color: el tema
   lleva `input[type=number]{padding:25px 30px;line-height:22px}`, que con
   especificidad (0,1,1) le ganaba a la regla de clase de aquí, (0,1,0). En una
   caja de 60 × 50 con `overflow:clip`, ese relleno dejaba el contenido en 0 × 0
   y el "1" quedaba recortado a nada. De ahí el `input` delante: sube a (0,2,1)
   y gana sin recurrir a `!important`. */
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
  font-size:.82rem;height:36px;min-height:0;line-height:36px;
  padding:0;text-align:center;background:transparent;font-variant-numeric:tabular-nums;
  -webkit-text-fill-color:var(--tlr-ink);color:var(--tlr-ink);opacity:1}
.wc-block-components-quantity-selector__button{
  color:var(--tlr-ink-soft);font-size:.95rem;line-height:1;
  background:transparent!important;transition:color var(--tlr-transicion)}
.wc-block-components-quantity-selector__button:hover{color:var(--tlr-ink)}

/* Quitar: texto subrayado, como en las tiendas de moda. */
.wc-block-cart-item__remove-link{
  font-size:var(--tlr-micro);letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--tlr-ink-soft);text-decoration:underline;text-underline-offset:4px;
  margin-top:1rem;display:inline-block;transition:color var(--tlr-transicion)}
.wc-block-cart-item__remove-link:hover{color:var(--tlr-ink)}

/* ---------- el resumen ----------
   Sin caja ni fondo: filete arriba y nada más. */
.wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block{
  background:transparent;border:0;border-radius:0;padding:0}
.wc-block-cart__sidebar .wc-block-cart__totals-title{
  padding:0 0 1rem;margin:0;border-bottom:1px solid var(--tlr-linea)}

.wc-block-components-totals-wrapper{border-color:var(--tlr-linea)!important;padding-block:1.1rem}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value{
  font-size:.76rem;letter-spacing:.02em;color:var(--tlr-ink-soft);font-variant-numeric:tabular-nums}
/* El total manda por espacio, no por tamaño. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  font-size:var(--tlr-micro);letter-spacing:var(--tlr-track);text-transform:uppercase;
  font-weight:500;color:var(--tlr-ink)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:.95rem;letter-spacing:.04em;color:var(--tlr-ink);font-weight:500}
.wc-block-components-totals-item__description{
  font-size:.68rem;color:var(--tlr-ink-soft);opacity:.8;letter-spacing:.02em}

/* ---------- el importe no pega un salto, 25 de agosto ----------
   Al cambiar la cantidad, WooCommerce DESMONTA el bloque de totales entero y lo
   vuelve a montar cuando le contesta el servidor. Medido en navegador: el
   importe **no existe en la página** entre los 80 y los 800 ms, y a los 1.600
   reaparece ya con el número nuevo. O sea que el total no cambia, desaparece y
   vuelve de golpe. Es el único momento del carrito que se siente sin terminar.

   Como el nodo es NUEVO cada vez, basta una animación de entrada: se dispara
   sola al montarse. Ni una línea de JavaScript, y sobre todo sin depender de
   ninguna clase interna de WooCommerce, que son las que cambian de nombre en
   cada actualización de los 40 y pico plugins.

   260 ms y sólo opacidad. Moverlo o escalarlo sí se notaría, y en el carrito lo
   último que conviene es que parezca que algo va lento. */
@keyframes tlr-aparece-importe{from{opacity:0}to{opacity:1}}
body .wc-block-components-totals-item__value{
  animation:tlr-aparece-importe 260ms ease both}

/* ---------- oportunidad 4, 1 de septiembre: pulso del subtotal de línea ----------
   El mismo keyframe de arriba, extendido al precio de CADA línea. WooCommerce
   desmonta y remonta ese nodo al cambiar la cantidad, igual que hace con el
   total, así que basta con la misma regla sobre el selector de la línea. */
body .wc-block-cart-item__total .wc-block-components-product-price{
  animation:tlr-aparece-importe 260ms ease both}

.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button{
  font-size:var(--tlr-micro);letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--tlr-ink)}
.wc-block-components-totals-coupon .wc-block-components-text-input input{
  border:1px solid #C9C6BF;border-radius:var(--tlr-radio,2px);background:#fff;padding-inline:.9rem}

/* ---------- el botón de finalizar ----------
   Rectángulo negro a todo el ancho, sin radio. Aquí estaba además el rojo: no
   lo ponía el tema en su `main.css`, que es lo que `sin-rojo.css` reescribió,
   sino el campo "CSS adicional" del personalizador (`wp-custom-css`), que se
   imprime en la página y no pasa por la cola de hojas. */
body .wc-block-cart .wc-block-cart__submit-container{
  border:0;background:transparent;text-transform:none;font-weight:400;color:inherit;padding:0}
body .wc-block-cart .wc-block-cart__submit-container:hover{background:transparent}
body .wc-block-cart .wc-block-cart__submit{margin-top:1.6rem;padding:0}

/* 24 sep: negro y con la forma de "Añadir al carrito" de la ficha
   (producto.css) y de "Tramitar pedido" del cajón: pastilla en tinta, letra
   hueso, 56 de alto (59 desde 1025, como la ficha) y verde oscuro al pasar el
   ratón. Antes era la pastilla salvia. Sin flecha, como esos dos: la flecha
   del 1 de septiembre ("oportunidad 5") se quita con este cambio.
   Selector con `body.woocommerce-cart` y `a.`: WooCommerce trae
   `body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link){min-height:3em}`,
   que pesa (0,3,1) y lo dejaba en 35 px. Y los `!important` del color porque
   `sin-rojo.css` pone el fondo de `.wc-block-components-button` en salvia
   con `!important`; la pastilla verde de antes salía de ahí, no de aquí. */
body.woocommerce-cart .wc-block-cart a.wc-block-cart__submit-button{
  display:flex;align-items:center;justify-content:center;width:100%;
  min-height:56px;padding:0 1rem;
  font-size:.72rem;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  border-radius:999px;border:1px solid var(--tlr-ink)!important;
  background:var(--tlr-ink)!important;color:#F3EDE3!important;text-decoration:none;
  transition:background .35s,border-color .35s,color .35s}
body.woocommerce-cart .wc-block-cart a.wc-block-cart__submit-button:hover{
  background:var(--tlr-verde-texto)!important;border-color:var(--tlr-verde-texto)!important;color:#FFFFFF!important}
@media(min-width:1025px){
  body.woocommerce-cart .wc-block-cart a.wc-block-cart__submit-button{min-height:59px}
}

/* ---------- "También te puede gustar" (antes "Puede que te interese") ----------
   El bloque los pinta él, pero cada producto trae su envoltorio
   (`.cross-sells-product`) dentro de un contenedor sin clase en
   `display:block`, así que se puede montar la fila a mano.
   WooCommerce trae una regla propia que solo actúa a partir de 782 px y le
   ganaba: los productos se quedaban en 61 px y el nombre se partía letra a
   letra. De ahí los `!important`.
   El texto del titular lo cambia `carrito/pagina.php` (24 sep), el mismo del
   cajón: "También te puede gustar" / "You may also like". */
.wp-block-woocommerce-cart-cross-sells-block{margin-top:clamp(4rem,9vw,8rem)}
/* `!important` en el tamaño porque gana
   `.has-large-font-size{font-size:var(--wp--preset--font-size--large)!important}`
   de los bloques, y se iba a 36 px. Medido las dos veces.
   24 sep: serif, la escala del h2 de secciones de la ficha (`.pdp-titulo`,
   28 px), sin filete debajo, como allí. */
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > h2{
  font-family:var(--tlr-serif);font-weight:400;
  font-size:1.75rem!important;line-height:1.1;letter-spacing:-.015em;
  text-transform:none;color:var(--tlr-ink);
  padding:0;border:0;margin:0 0 clamp(1.4rem,2.5vw,2rem)}
/* En fila y sin tarjeta huérfana (24 sep): flex sin saltos de línea en vez de
   rejilla de tres. Cada tarjeta mide como mucho un tercio, así que con uno o
   dos productos no crecen a lo ancho, y si un día llegan cuatro caben los
   cuatro en la misma fila. */
.wp-block-woocommerce-cart-cross-sells-block > div{
  display:flex!important;flex-wrap:nowrap!important;
  gap:1.5rem!important;justify-items:stretch!important;align-items:stretch!important}
.wp-block-woocommerce-cart-cross-sells-block > div > .cross-sells-product{
  flex:1 1 0!important;max-width:calc((100% - 3rem) / 3)!important}
/* El selector lleva `.wp-block-woocommerce-cart` delante por especificidad, no
   por gusto: la regla de WooCommerce es `.wp-block-woocommerce-cart
   .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product`, con tres
   clases, y sin igualarla se colaban `box-sizing:content-box`,
   `padding-right:5%` y `text-align:center`. Los dos primeros son los que
   rompían el móvil: con `width:100%` y caja de contenido, cada tarjeta medía
   204 px dentro de una columna de 194, y la segunda se salía de la pantalla a
   390 px. Medido, no supuesto.

   Y aun igualando la especificidad hacen falta los `!important`: `cart.css` de
   los bloques se encola después que la nuestra, así que a igualdad gana la
   suya por orden. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product,
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product{
  display:flex!important;flex-direction:column;margin:0!important;
  box-sizing:border-box!important;padding-right:0!important;text-align:left!important;
  width:auto!important;min-width:0}

/* Foto a sangre, sin marco ni fondo gris. */
.wp-block-cart-cross-sells-product__product-image{
  aspect-ratio:3/4;overflow:hidden;display:block;margin:0 0 .9rem;
  background:transparent;border-radius:0}
.wp-block-cart-cross-sells-product__product-image img{
  width:100%;height:100%;object-fit:cover;padding:0;border-radius:0;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.cross-sells-product:hover .wp-block-cart-cross-sells-product__product-image img{transform:scale(1.03)}

/* Mismo criterio que en las líneas del carrito: el nombre ya viene compuesto
   desde la Store API, así que aquí no se vuelve a poner en mayúsculas.
   El `text-transform:none` es obligatorio, no sobra: este título es un `h3` y
   el tema lleva `h3{text-transform:uppercase}`. Quitar la regla de aquí no
   bastaba, había que decir que no.
   24 sep: nombre en serif a 18 px, como el de "Completa tu rutina" de la
   ficha (`.ficha-par__nombre`); precio en Archivo a 14. */
/* Con `body.woocommerce-cart` delante: `.wc-block-components-product-title
   {font-size:inherit}` de los bloques se imprime después y, a igualdad, ganaba
   y lo dejaba en 17. */
body.woocommerce-cart .wp-block-cart-cross-sells-product__product-title{
  font-size:1.125rem;letter-spacing:0;font-weight:400;text-transform:none;
  line-height:1.3;text-align:left;margin:0 0 .35rem}
body.woocommerce-cart .wp-block-cart-cross-sells-product__product-title .wc-block-components-product-name{
  font-family:var(--tlr-serif);font-size:inherit;font-weight:400;color:var(--tlr-ink)}
.wp-block-cart-cross-sells-product__product-price{
  font-size:.875rem;letter-spacing:.02em;color:var(--tlr-ink);
  font-variant-numeric:tabular-nums;text-align:left;display:block}
/* La valoración, fuera del embudo: aquí sobra ruido. Con `!important` porque
   el bloque la pone en `block`. Ademas, al forzar Switzer en toda la pagina se
   rompio la tipografia de iconos de las estrellas y salian como "SSSSS": otro
   motivo para quitarlas de aqui. */
.wp-block-cart-cross-sells-product__product-rating,
.wc-block-components-product-rating-stars{display:none!important}
.wp-block-cart-cross-sells-product__product-add-to-cart{margin-top:auto;padding-top:.9rem;text-align:left}
/* 24 sep: el envoltorio del botón es `flex` en columna y WooCommerce lo
   centra; aquí va a la izquierda, con el nombre y el precio. */
body.woocommerce-cart .wp-block-cart-cross-sells-product__product-add-to-cart{align-items:flex-start;justify-content:flex-start}
/* La foto no llenaba su caja 3:4 (298 de 327 a 1440): el enlace que la
   envuelve es `inline` y el `height:100%` de la imagen no tenía de qué
   colgarse. */
.wp-block-cart-cross-sells-product__product-image > a{display:block;height:100%}

/* Añadir. Historia: texto con flecha (9 de agosto), luego pastilla salvia
   (13 de agosto, Mónica: "no me gusta el añadir, no te llama tanto").
   24 sep: en la línea de la ficha, sin píldora verde. Es el "Añadir" de
   "Completa tu rutina" (`.ficha-par__anadir`, producto.css): rectángulo con
   filete en tinta suave, letra en tinta a 11 px y 44 de alto, y al pasar el
   ratón se rellena de tinta. Sin flecha, como allí. Entran también los del
   carrito vacío, que son la misma pieza.
   `sin-rojo.css` fija el fondo en tinta con `!important`, así que hay que
   pisarlo igual de fuerte. */
body .wp-block-cart-cross-sells-product__product-add-to-cart .wc-block-components-product-button__button,
body .wp-block-woocommerce-empty-cart-block .wp-block-button__link,
body .wp-block-woocommerce-empty-cart-block .wc-block-components-product-button__button{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;padding:0 20px;width:auto;min-height:44px;
  background:transparent!important;color:var(--tlr-ink)!important;
  border:1px solid var(--tlr-ink-soft)!important;border-radius:0!important;
  text-decoration:none!important;
  transition:background-color var(--tlr-transicion),color var(--tlr-transicion),border-color var(--tlr-transicion)}
body .wp-block-cart-cross-sells-product__product-add-to-cart .wc-block-components-product-button__button:hover,
body .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
body .wp-block-woocommerce-empty-cart-block .wc-block-components-product-button__button:hover{
  color:var(--tlr-bone)!important;background:var(--tlr-ink)!important;border-color:var(--tlr-ink)!important}
/* Reducir movimiento. El interruptor general (que apaga `transform` en todo el
   sitio) está en `chrome.css`, la única hoja que se carga en todas las páginas;
   `piezas.css` no entra en el carrito, así que aquí no llega nada de aquélla.
   Lo de abajo es sólo lo que además tiene que quedarse quieto en su sitio: las
   dos fotos que crecen al pasar el ratón. */
@media(prefers-reduced-motion:reduce){
  .cross-sells-product:hover .wp-block-cart-cross-sells-product__product-image img,
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image img{transform:none!important}
}

/* ---------- carrito vacío ---------- */

/* Fuera la cara llorando de 288 px: es el icono por defecto de WooCommerce, lo
   pinta `::before` sobre el título. */
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before{display:none!important;content:none!important}
.wp-block-woocommerce-empty-cart-block img.emoji{display:none!important}
.wp-block-woocommerce-empty-cart-block .wp-block-separator{display:none!important}

/* Sin sangrado propio: va DENTRO de `.wp-block-woocommerce-cart`, que ya mete
   el suyo, y aplicarlo dos veces dejaba la rejilla en 812 px de los 956. */
.wp-block-woocommerce-empty-cart-block{text-align:left;padding-block:clamp(1.5rem,4vw,3rem)}

/* El titular, en versalita pequeña. Nada de Zodiak a 4 rem: en una tienda de
   moda el carrito vacío se dice en una línea y se pasa a lo siguiente. */
.wp-block-woocommerce-empty-cart-block > h2:first-child{
  font-family:var(--tlr-sans)!important;
  font-size:var(--tlr-micro)!important;letter-spacing:var(--tlr-track);
  text-transform:uppercase;font-weight:500;color:var(--tlr-ink);
  margin:0 0 clamp(4rem,9vw,8rem);max-width:none;line-height:1.6}
.wp-block-woocommerce-empty-cart-block > h2 ~ h2{
  margin:0 0 clamp(1.4rem,2.5vw,2rem);
  padding-bottom:1rem;border-bottom:1px solid var(--tlr-linea)}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  gap:2px!important;justify-content:stretch!important;
  list-style:none;margin:0!important;padding:0!important}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product{
  margin:0!important;padding:0!important;max-width:none!important;width:auto!important;
  flex:none!important;text-align:left;display:flex;flex-direction:column}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link{display:block;text-align:left}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image{
  border-radius:0;aspect-ratio:3/4;overflow:hidden;display:block;margin:0;background:transparent}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img{
  width:100%;height:100%;object-fit:cover;padding:0;border-radius:0;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image img{transform:scale(1.03)}
/* Mismo criterio que en el carrito con cosas: el nombre ya llega compuesto en
   versal-baja, aquí desde `woocommerce_product_title`, así que no se vuelve a
   poner en mayúsculas. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title{
  font-family:var(--tlr-sans)!important;
  font-size:.78rem;letter-spacing:.04em;text-transform:none;font-weight:500;
  line-height:1.5;color:var(--tlr-ink);margin:.9rem 0 .3rem;padding:0;text-align:left}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price .amount{
  font-size:.72rem;letter-spacing:.02em;color:var(--tlr-ink-soft);
  padding:0;text-align:left;display:block;font-variant-numeric:tabular-nums}
/* 24 sep, ronda 1: el precio salía centrado (una hoja de los bloques le da
   ancho justo y márgenes automáticos; medido 136 px a cada lado a 1440) y
   quedaba descuadrado entre el nombre y "Añadir", que van a la izquierda. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price{
  width:auto!important;margin-inline:0!important;align-self:stretch}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-rating,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-rating__stars{display:none!important}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart{
  margin:auto 0 0!important;padding-top:.9rem;text-align:left}

/* ---------- avisos ---------- */
.wc-block-components-notice-banner{
  border-radius:0;font-size:.76rem;letter-spacing:.02em}

/* ==========================================================================
   MÓVIL · es donde más se nota el registro

   Antes estaba roto de verdad, y no era cuestión de gusto:
   1. El botón de finalizar quedaba pegado en mitad de la pantalla, sin fondo,
      encima de los productos sugeridos.
   2. El resumen y el total salían AL FINAL, después de los sugeridos: había
      que pasar tres productos para ver cuánto se pagaba.
   3. Los sugeridos iban de uno en uno, a foto completa.

   Y ahora, además, la rejilla va **a sangre**: las fotos llegan al borde de la
   pantalla, con dos píxeles de separación, que es lo que le da el aire.
   ========================================================================== */
@media(max-width:781px){

  /* Aquí iba `--tlr-margen:1rem`. Desde el 24 de septiembre el margen es el
     de toda la web, que a 390 ya da 20 px. */

  /* `display:contents` saca la tabla y los sugeridos de su envoltorio para
     poder ordenarlos junto al resumen. */
  .wc-block-cart{display:flex!important;flex-direction:column}
  .wc-block-cart .wc-block-cart__main{display:contents}
  .wc-block-cart .wc-block-cart-items{order:1}
  .wc-block-cart .wc-block-cart__sidebar{
    order:2;position:static;width:100%;padding:0!important;margin-top:2rem}
  /* El `width:100%` no es decorativo. Sin él la sección se estiraba a 292 px
     dentro de un padre de 288 y quedaba descentrada respecto a la página; como
     el sangrado de abajo se calcula con `50%` de esta caja, esos 4 px movían la
     rejilla y le cortaban 2 px a la tarjeta derecha. */
  .wc-block-cart .wp-block-woocommerce-cart-cross-sells-block{order:3;width:100%;min-width:0}

  /* El botón, dentro del flujo y a lo ancho. Nada de flotar sobre nada. */
  body .wc-block-cart .wc-block-cart__submit{
    position:static!important;margin-top:1.4rem;padding:0!important;
    background:transparent!important;box-shadow:none!important;border:0!important}

  .wc-block-cart-item__image{width:92px;padding-right:1rem!important}
  .wc-block-cart-items__row td{padding-block:1.4rem}

  /* La rejilla del carrito vacío rompe el margen de la página y llega al
     borde. Las recomendaciones del carrito con cosas salen de aquí el 24 de
     septiembre: van en fila deslizable (más abajo, por debajo de 768). */
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products{
    grid-template-columns:repeat(2,1fr)!important;gap:2px!important;
    /* El tema mete su propio sangrado ademas del nuestro, asi que restar solo
       `--tlr-margen` dejaba la rejilla a 35 px del borde. Con el viewport da
       igual cuantos antepasados sumen padding. */
    margin-inline:calc(50% - 50vw)!important;
    width:100vw!important;max-width:100vw!important}
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title,
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price,
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart{
    /* `!important` porque el título lleva además `.wc-block-components-product-title`,
       al que `cart.css` de los bloques pone `padding:0` desde una hoja que se
       encola después de la nuestra. Sin esto el nombre se pegaba al borde y los
       de dos columnas contiguas se tocaban. */
    padding-inline:var(--tlr-margen)!important}
  body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > h2,
  .wp-block-woocommerce-empty-cart-block > h2 ~ h2{margin-bottom:1rem}
  body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > h2{font-size:1.5rem!important}
}


/* --- 13 de agosto, segunda vuelta de la cesta -----------------------------
   Lo que seguia pequeño despues de ensanchar la pagina, medido uno a uno:
   el precio de cada linea salia a 12,16 px y la descripcion a 12,16, o sea
   mas pequeños que el propio nombre del producto. */
/* 24 sep: a 16 px justos, lo que pidió Dani para el precio. */
body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price,
body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount{
  font-size:1rem!important;font-weight:500;color:var(--tlr-ink)}
body.woocommerce-cart .wc-block-components-product-metadata__description,
body.woocommerce-cart .wc-block-components-product-metadata__description p{
  font-size:.86rem;line-height:1.55;color:var(--tlr-ink-soft)}
body.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price{
  font-size:1rem;color:var(--tlr-ink-soft)}

/* La foto de cada linea iba a 106 px de ancho y quedaba de sello. */
/* La foto de cada linea salia a 106 px y quedaba de sello. Con esto sube a
   110 y NO MAS: el ancho de esa celda lo decide el reparto de la tabla, no una
   regla de ancho, asi que forzarla mas solo desplaza el problema. Se deja aqui
   la mejora que si entra y se anota que para hacerla de verdad grande hay que
   cambiar el reparto de columnas, que es mas cirugia de la que pedia el
   encargo. Medido antes y despues, no supuesto. */
body.woocommerce-cart .wc-block-cart-item__image img{width:100%!important;max-width:none!important}
body.woocommerce-cart table.wc-block-cart-items td.wc-block-cart-item__image,
body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image{width:136px!important}
@media(max-width:600px){
  body.woocommerce-cart table.wc-block-cart-items td.wc-block-cart-item__image,
  body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image{width:96px!important}
}

/* ==========================================================================
   24 de septiembre · tarea 13, opción A: la hermana grande del cajón
   Mónica, 16 de septiembre: "el carrito, aquí en el ordenador, lo veo
   enanísimo". Medido antes a 1440: lista de 627 px empezando en x 162,
   nombre a 15,7 px en Archivo, precio a 13, foto de 110 × 147.
   ========================================================================== */

/* Título de la página y línea de envío gratis. Los pinta
   `carrito/pagina.php` FUERA del bloque, justo antes de él: dentro, React
   rehace el árbol y se los llevaría por delante. El título es el de la ficha
   (`.ficha-titulo`: Zodiak a 32, interlínea 1,25, -.02em). */
body.woocommerce-cart .tlr-cesta-cab{margin:0 0 clamp(1.6rem,3vw,2.6rem)}
body.woocommerce-cart h1.tlr-cesta-titulo{
  font-family:var(--tlr-serif);font-weight:400;text-transform:none;
  font-size:2rem;line-height:1.25;letter-spacing:-.02em;color:var(--tlr-ink);margin:0}
body.woocommerce-cart .tlr-cesta-envio{
  font-family:var(--tlr-sans);font-size:.875rem;line-height:22px;letter-spacing:.01em;
  color:var(--tlr-ink-soft);margin:.5rem 0 0}
body.woocommerce-cart .tlr-cesta-envio[hidden]{display:none}
body.woocommerce-cart .tlr-cesta-envio b{font-weight:600;color:var(--tlr-ink)}
/* 14 oct, Melissa: barra de progreso al envío gratis bajo la línea (pagina.js).
   La misma pieza que el cajón (carrito/cajon.css), que aquí no se carga. */
body.woocommerce-cart .tlr-envio-barra{display:block;height:3px;max-width:420px;margin-top:.6rem;
  background:rgba(27,26,23,.1);border-radius:2px;overflow:hidden}
body.woocommerce-cart .tlr-envio-barra>span{display:block;height:100%;width:0;background:var(--tlr-verde-texto);
  transition:width .5s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){body.woocommerce-cart .tlr-envio-barra>span{transition:none}}

/* 14 oct, Melissa: en "También te puede gustar" el precio iba pegado al nombre
   y, con nombres de una y de dos líneas, quedaban a distinta altura. El nombre
   se estira y empuja precio y botón al pie: los precios se alinean. Foto,
   nombre y precio van en un `div` sin clase dentro de la tarjeta (medido): ese
   envoltorio también tiene que ser columna flexible y crecer. */
body.woocommerce-cart .cross-sells-product > div:first-child{display:flex;flex-direction:column;flex:1 0 auto}
body.woocommerce-cart .wp-block-cart-cross-sells-product__product-title{flex:1 0 auto}

/* 14 oct, Melissa: en móvil la descripción de cada línea salía cortada con
   "…" ("Bálsamo botánico…"). En las tallas pequeñas del bloque, fuera. */
body.woocommerce-cart .wc-block-cart:is(.is-mobile,.is-small) .wc-block-components-product-metadata__description{display:none}

/* Nombre de producto en serif a 20 px en ordenador y 18 en móvil (el de
   "Completa tu rutina" de la ficha). Lleva `table` y `body.woocommerce-cart`
   delante por lo mismo que la regla del 13 de agosto de más arriba. */
body.woocommerce-cart table.wc-block-cart-items .wc-block-components-product-name{
  font-family:var(--tlr-serif);font-weight:400;font-size:1.25rem;line-height:1.25;
  letter-spacing:-.005em;margin-bottom:.55rem}

/* Foto: la celda pasa de 136 a 196 (foto de 168 × 224) ahora que la lista
   mide 840 y no 627. Con la columna así de ancha el reparto de la tabla ya
   la deja crecer; lo que avisaba el comentario de arriba era con 627. */
body.woocommerce-cart table.wc-block-cart-items td.wc-block-cart-item__image,
body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image{width:196px!important;padding-right:1.75rem!important}

/* Controles a 44 px como mínimo (menos, más, papelera y cupones). Medido
   antes: 30 × 36 los signos, 24 × 24 la papelera, 17 de alto "Añadir cupones".
   El selector es `flex` en WooCommerce; solo se le dan medidas. */
body.woocommerce-cart .wc-block-components-quantity-selector{max-width:none;width:132px;min-height:44px}
body.woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
  height:44px;line-height:44px;font-size:.9rem;min-width:0}
body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{
  min-width:44px;height:44px;font-size:1.05rem}
body.woocommerce-cart .wc-block-cart-item__remove-link{
  display:inline-flex!important;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;margin:1.2rem 0 0;padding:0;vertical-align:top}
body.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-panel__button{
  min-height:44px;display:flex;align-items:center;margin:0}
body.woocommerce-cart .wc-block-components-totals-coupon__form .wc-block-components-text-input input,
body.woocommerce-cart .wc-block-components-totals-coupon__button{min-height:44px}

@media(max-width:781px){
  body.woocommerce-cart table.wc-block-cart-items .wc-block-components-product-name{font-size:1.125rem}
}
/* Por debajo de la tabla (clases `is-medium`, `is-small` e `is-mobile` que
   pone el propio bloque según su ancho) la línea es una rejilla de WooCommerce
   con la foto en una pista de 80 px: forzar el ancho de la celda solo la
   montaba encima del nombre. Se agranda la pista, no la celda. */
body.woocommerce-cart .wc-block-cart:is(.is-mobile,.is-small) table.wc-block-cart-items tbody tr.wc-block-cart-items__row{
  grid-template-columns:100px minmax(0,1fr) auto auto}
body.woocommerce-cart .wc-block-cart.is-medium table.wc-block-cart-items tbody tr.wc-block-cart-items__row{
  grid-template-columns:140px minmax(0,1fr) auto auto}
body.woocommerce-cart .wc-block-cart:is(.is-mobile,.is-small,.is-medium) table.wc-block-cart-items td.wc-block-cart-item__image{
  width:auto!important;padding-right:0!important}

/* Recomendaciones en móvil: una fila que se desliza, calcada de "Completa el
   ritual" de la ficha (producto.css, 24 sep). Rejilla en columna y no flex,
   porque Safari viejo se come el relleno derecho de un flex que desplaza.
   Cada tarjeta mide el 70 % del ancho útil y la siguiente asoma. La pista
   sangra hasta el borde derecho con el mismo `--tlr-margen` de la caja, así
   que nunca desborda la página; los 4 px de arriba, abajo e izquierda son
   para que el anillo de foco de "Añadir" no se corte. */
@media(max-width:767.98px){
  .wp-block-woocommerce-cart-cross-sells-block > div{
    display:grid!important;grid-template-columns:none!important;
    grid-auto-flow:column;grid-auto-columns:70%;gap:1rem!important;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    margin:-4px calc(-1 * var(--tlr-margen)) -4px -4px!important;
    padding:4px var(--tlr-margen) 4px 4px!important;
    scroll-padding-left:4px;scrollbar-width:none}
  .wp-block-woocommerce-cart-cross-sells-block > div::-webkit-scrollbar{display:none}
  .wp-block-woocommerce-cart-cross-sells-block > div > .cross-sells-product{
    max-width:none!important;scroll-snap-align:start}
}