/* ═══════════════════════════════════════════════════════════════════════════
   CARRITO Y PAGO — rediseño                                  (2026-08-23)

   Punto de partida: el carrito tenía la columna izquierda casi vacía (una fila
   de producto de 312 px frente a una tarjeta de 570), la foto del artículo a
   92 px, el cupón en una caja DENTRO de otra caja, y "Veranschlagte
   Gesamtsumme" partido en dos líneas ocupando 64 px de alto. El pago era el de
   fábrica: cuatro apartados iguales sin jerarquía ni sensación de avance.

   Qué se hace, y por qué:
   · Las dos columnas se alinean ARRIBA en vez de estirarse a la misma altura:
     el hueco pasa a ser aire de página en lugar de una columna rota.
   · El resumen se queda pegado al bajar. En un carrito largo, el importe y el
     botón son lo que se busca; que haya que volver arriba es un impuesto.
   · Los pasos del pago se numeran (01…04) con contadores CSS. No es adorno:
     un formulario largo sin numerar no dice cuánto queda.
   · Caja dentro de caja fuera: la estructura la dibujan filetes, como en el
     resto de la tienda.
   · La foto del artículo se apoya en la MISMA plancha del catálogo.

   Guías aplicadas de la skill de UI/UX (dominio ux): el error va junto al
   campo y no en un bloque arriba, los avisos se anuncian (`role`/`aria-live`,
   que ya trae WooCommerce), y los objetivos táctiles no bajan de 44 px.
   Los estilos que sugería para "e-commerce" (Vibrant, Liquid Glass) se
   descartan a propósito: esta tienda tiene un sistema propio y mezclarlos
   sería exactamente el antipatrón que la propia skill marca como número 4.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · El título de la página ───────────────────────────────────────────
   Entre "Warenkorb"/"Kasse" y el contenido quedaban ~168px de nada. Se recorta
   al mismo ritmo que el resto de la tienda. */
body.wk-neu.woocommerce-cart .entry-header,
body.wk-neu.woocommerce-checkout .entry-header{
  margin-bottom:var(--s6) !important;
  padding-bottom:0 !important;
}
body.wk-neu.woocommerce-cart .entry-content,
body.wk-neu.woocommerce-checkout .entry-content{ padding-top:0 !important; }

/* ── 1 · Las dos columnas ─────────────────────────────────────────────────── */
body.wk-neu .wc-block-components-sidebar-layout{
  align-items:flex-start;   /* que la izquierda no se estire hasta la derecha */
  /* ⚠️ NADA de `gap` aquí. Es un flex y WooCommerce ya reparte las dos
     columnas en PORCENTAJES que suman ~100%: al añadir 64px de hueco, la suma
     se pasa del ancho y la barra lateral se cae DEBAJO. La separación ya la
     dan los paddings de las propias columnas. */
}
body.wk-neu .wc-block-components-sidebar{
  position:sticky;
  top:calc(var(--wk-kopf,150px) + var(--s5));
}
@media (max-width:900px){
  body.wk-neu .wc-block-components-sidebar{ position:static; }
}

/* ── 2 · La tarjeta del resumen ───────────────────────────────────────────── */
body.wk-neu .wp-block-woocommerce-cart-order-summary-block,
body.wk-neu .wp-block-woocommerce-checkout-order-summary-block{
  background:var(--wk-celda);
  border:1px solid var(--wk-filete);
  padding:var(--s5) var(--s5) var(--s4);
}
body.wk-neu .wc-block-cart__totals-title,
body.wk-neu .wc-block-components-checkout-order-summary__title{
  font-family:var(--wk-cond) !important;
  font-size:17px !important;
  font-weight:600 !important;
  letter-spacing:-.005em !important;
  text-transform:none !important;
  color:var(--wk-tinta) !important;
  padding:0 0 var(--s3) !important;
  margin:0 0 var(--s4) !important;
  border-bottom:1px solid var(--wk-filete);
}

/* Caja dentro de caja: el cupón era un recuadro con borde metido en otro
   recuadro con borde. Ahora es una fila más, separada por un filete. */
body.wk-neu .wc-block-components-totals-coupon{
  border:0 !important;
  padding:0 !important;
  background:none !important;
}
body.wk-neu .wc-block-components-totals-wrapper{
  padding:var(--s3) 0 !important;
  border-top:1px solid var(--wk-filete) !important;
  margin:0 !important;
}
body.wk-neu .wc-block-components-totals-wrapper:first-child{ border-top:0 !important; }

/* WooCommerce deja envoltorios VACÍOS en el resumen (uno suelto y el de
   `order-meta`, que solo tiene contenido si hay nota de pedido). Con el filete
   que les pongo arriba, cada uno dibujaba una raya de la nada. */
body.wk-neu .wc-block-components-totals-wrapper:empty{ display:none !important; }
body.wk-neu .wc-block-components-totals-wrapper:has(> .wc-block-components-order-meta:only-child:empty){
  display:none !important;
}
/* El total ya trae su propio filete de 2px: sin esto salen dos rayas juntas. */
body.wk-neu .wc-block-components-totals-wrapper:has(> .wc-block-components-totals-footer-item){
  border-top:0 !important;
  padding-top:0 !important;
}
body.wk-neu .wc-block-components-panel__button{
  padding:6px 0 !important;
  min-height:44px;              /* objetivo táctil */
  font-size:13.5px !important;
  color:var(--wk-tinta-2) !important;
}

body.wk-neu .wc-block-components-totals-item{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
}
body.wk-neu .wc-block-components-totals-item__label{
  font-size:13.5px !important;
  color:var(--wk-tinta-2) !important;
}
body.wk-neu .wc-block-components-totals-item__value,
body.wk-neu .wc-block-formatted-money-amount{
  font-variant-numeric:tabular-nums;   /* las cifras no bailan al recalcular */
  color:var(--wk-tinta) !important;
}

/* El total: la etiqueta larga ("Veranschlagte Gesamtsumme") se partía en dos
   líneas y empujaba la cifra. Ahora etiqueta pequeña arriba y cifra debajo:
   se lee antes y ocupa la mitad. */
body.wk-neu .wc-block-components-totals-footer-item{
  display:block !important;
  border-top:2px solid var(--wk-tinta);
  padding-top:var(--s3);
  margin-top:var(--s2);
}
body.wk-neu .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  display:block;
  font-family:var(--wk-mono) !important;
  font-size:12px !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wk-tinta-3) !important;
  margin-bottom:2px;
}
body.wk-neu .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  display:block;
  font-family:var(--wk-cond) !important;
  font-size:30px !important;
  font-weight:600;
  line-height:1.1;
}
body.wk-neu .wc-block-components-totals-footer-item .wc-block-components-totals-item__description{
  display:block;
  font-size:12px;
  color:var(--wk-tinta-3) !important;
  margin-top:4px;
}

/* Botón de seguir: pegado a la tarjeta, mismo ancho, sin hueco suelto. */
body.wk-neu .wc-block-cart__submit-container,
body.wk-neu .wc-block-checkout__actions{ padding:0 !important; }
body.wk-neu .wc-block-cart__submit{ margin-top:var(--s4) !important; }
body.wk-neu .wc-block-cart__submit-button,
body.wk-neu .wc-block-components-checkout-place-order-button{
  width:100% !important;
  min-height:52px;
  border-radius:0 !important;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:13px;
}

/* ── 3 · La fila de artículo del carrito ──────────────────────────────────── */
body.wk-neu .wc-block-cart-items__header{
  font-family:var(--wk-mono) !important;
  font-size:12px !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wk-tinta-3) !important;
  border-bottom:1px solid var(--wk-filete);
}
body.wk-neu .wc-block-cart-items .wc-block-cart-items__row{
  border-bottom:1px solid var(--wk-filete);
}
/* La foto pasa de 92 a 120px y se apoya en la plancha del catálogo, con el
   mismo multiply: las fotos de BGS vienen recortadas sobre blanco. */
body.wk-neu td.wc-block-cart-item__image{ width:120px !important; padding-right:var(--s4) !important; }
body.wk-neu .wc-block-cart-item__image img{
  width:120px !important; height:auto;
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  mix-blend-mode:multiply;
}
body.wk-neu .wc-block-components-product-name{
  font-size:14.5px !important;
  line-height:1.4;
  color:var(--wk-tinta) !important;
  text-decoration:none !important;
}
body.wk-neu .wc-block-cart-item__prices .wc-block-components-product-price{
  font-size:13px; color:var(--wk-tinta-3) !important;
}
body.wk-neu .wc-block-cart-item__total .wc-block-components-product-price{
  font-family:var(--wk-cond) !important;
  font-size:17px !important;
  font-weight:600;
  color:var(--wk-tinta) !important;
  font-variant-numeric:tabular-nums;
}
/* Cantidad y papelera en la misma línea, con la papelera separada: borrar y
   cambiar la cantidad son cosas distintas y no deben quedar pegadas. */
body.wk-neu .wc-block-cart-item__quantity{
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
}
body.wk-neu .wc-block-components-quantity-selector{
  min-height:44px; margin:0 !important;
}
body.wk-neu .wc-block-cart-item__remove-link{
  font-size:12px !important;
  color:var(--wk-tinta-3) !important;
  text-decoration:underline;
  text-underline-offset:2px;
}
@media (hover:hover) and (pointer:fine){
  body.wk-neu .wc-block-cart-item__remove-link:hover{ color:var(--wk-rojo) !important; }
}

/* ── 4 · El pago: pasos numerados ─────────────────────────────────────────── */
body.wk-neu .wc-block-checkout__form{ counter-reset:wkpaso; }
body.wk-neu .wc-block-components-checkout-step__heading{
  position:relative;
  counter-increment:wkpaso;
  display:flex;
  align-items:baseline;
  gap:var(--s3);
  padding-top:var(--s5);
  margin-bottom:var(--s4) !important;
  border-top:1px solid var(--wk-filete);
}
/* El primero no lleva filete arriba: no separa de nada. */
body.wk-neu .wc-block-checkout__contact-fields .wc-block-components-checkout-step__heading{
  border-top:0; padding-top:0;
}
body.wk-neu .wc-block-components-checkout-step__heading::before{
  content:counter(wkpaso,decimal-leading-zero);
  font-family:var(--wk-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--wk-rojo);
  flex:none;
}
body.wk-neu .wc-block-components-checkout-step__title{
  font-family:var(--wk-cond) !important;
  font-size:20px !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  color:var(--wk-tinta) !important;
  margin:0 !important;
}
body.wk-neu .wc-block-components-checkout-step__description{
  font-size:13px !important;
  color:var(--wk-tinta-3) !important;
}
body.wk-neu .wc-block-components-checkout-step__content{ margin-bottom:var(--s6); }

/* Forma de envío y de pago: cada opción es una celda con filete, no una
   pastilla con sombra. Misma gramática que el resto de la tienda. */
body.wk-neu .wc-block-components-radio-control__option{
  min-height:52px;
  padding:var(--s3) var(--s4) var(--s3) 44px !important;
  border:1px solid var(--wk-filete) !important;
  background:var(--wk-celda);
  margin:0 0 -1px 0 !important;   /* filetes que no se doblan */
  transition:border-color .16s var(--wk-ease), background-color .16s var(--wk-ease);
}
body.wk-neu .wc-block-components-radio-control__option--checked-option-highlighted,
body.wk-neu .wc-block-components-radio-control-accordion-option:has(input:checked){
  border-color:var(--wk-tinta) !important;
  position:relative; z-index:1;
}
body.wk-neu .wc-block-components-radio-control-accordion-content{
  border:1px solid var(--wk-filete);
  border-top:0;
  background:var(--wk-hundido);
  padding:var(--s4) !important;
  font-size:13px;
  color:var(--wk-tinta-2) !important;
}

/* Los avisos y el texto legal de Germanized, en su sitio y legibles. */
body.wk-neu .wc-gzd-checkboxes{
  border-top:1px solid var(--wk-filete);
  padding-top:var(--s5);
  margin-top:var(--s2);
}
body.wk-neu .wc-gzd-checkboxes .wc-block-components-checkbox__label{
  font-size:12.5px; line-height:1.5; color:var(--wk-tinta-2) !important;
}

/* Casillas: 44px de objetivo táctil aunque el cuadro sea de 18. */
body.wk-neu .wc-block-components-checkbox__label{ min-height:24px; display:inline-block; }
body.wk-neu .wc-block-components-checkbox input[type="checkbox"]{
  width:18px; height:18px; accent-color:var(--wk-rojo);
}

/* ── 5 · Estrecho ─────────────────────────────────────────────────────────── */
@media (max-width:780px){
  body.wk-neu td.wc-block-cart-item__image,
  body.wk-neu .wc-block-cart-item__image img{ width:88px !important; }
  body.wk-neu .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
    font-size:26px !important;
  }
}