/* ============================================================
   FINALIZAR COMPRA — Jewels & Wine
   ------------------------------------------------------------
   Esta hoja se carga SOLO en la página de finalizar compra, y la
   encola el snippet de checkout. Ahí no llega brand.css, así que los
   tokens de marca se declaran aquí mismo: son los mismos valores,
   medidos sobre lo que renderiza jewelsandwine.com.

   Qué se corrige respecto a lo que traía WooCommerce de serie:
   · El resumen del pedido estaba al final, después de 762 px de
     formulario: había que rellenarlo todo a ciegas y bajar hasta abajo
     para ver cuánto se pagaba. Pasa a una columna propia que acompaña.
   · Facturación y envío se pedían a la vez, en dos columnas, 22 campos
     abiertos de golpe. Ahora van uno debajo de otro, en pasos.
   · Los campos eran los del tema, sin relación con el resto de la web.
   ============================================================ */

/* Los tokens valen para las dos páginas: el body lleva la clase
   woocommerce-checkout o woocommerce-cart según dónde estés, nunca las
   dos, y el carrito los necesita igual. */
.woocommerce-checkout,
.woocommerce-cart{
  --base:#FEF5E8;
  --base-alt:#FFF8F3;
  --marca:#3E000D;
  --secundario:#6D220A;
  --tinta:#1E1E1E;
  --acento:#D27541;
  --acento-ink:#9C4A1B;
  --line:color-mix(in srgb, #3E000D 14%, transparent);
  --line-fuerte:color-mix(in srgb, #3E000D 28%, transparent);
  --suave:color-mix(in srgb, #3E000D 72%, #6D220A 28%);
  --display:'Playfair Display','Times New Roman',Georgia,serif;
  --ui:'Hind','Helvetica Neue',Helvetica,Arial,sans-serif;
  --radio:4px;
}

/* ---------- Tipografía ----------
   El tema inyecta en línea `html, body, p, span, a, li, label, input,
   textarea, button… { font-family: var(--font-heading) !important }`, que
   pone Playfair hasta en los campos de un formulario. En un titular es la
   marca; en veinte campos seguidos a 15 px, y en columnas de cifras que
   tienen que cuadrar, no se lee bien. Misma regla que en el configurador:
   Playfair para lo que se lee de un vistazo, Hind para lo que se rellena.
   Hace falta !important porque enfrente hay otro !important. */
.woocommerce-checkout .jwc-pasos,
.woocommerce-checkout .form-row label,
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container,
.woocommerce-checkout .select2-results__option,
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout #payment li.wc_payment_method > label,
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout #payment .payment_box p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper *,
.woocommerce-checkout .jwc-garantias,
.woocommerce-checkout .jwc-garantias li,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .order-total td{
  font-family:var(--ui) !important;
}

/* Y lo que sí manda en serif: los titulares y los nombres propios. */
.woocommerce-checkout .jwc-titulo,
.woocommerce-checkout .jwc-lead,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review .jwc-caja-titulo,
.woocommerce-checkout .cart_item .product-name,
.woocommerce-checkout .order-total th{
  font-family:var(--display) !important;
}
.woocommerce-checkout .cart_item .product-name .variation,
.woocommerce-checkout .cart_item .product-name .variation *,
.woocommerce-checkout .cart_item .product-name .product-quantity,
.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address,
.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address *{
  font-family:var(--ui) !important;
}

/* ---------- Lienzo ----------
   El tema imprime su propio `<h1>Finalizar compra` en un .page-header, en
   negro y a 48 px, justo encima de esta cabecera: dos titulares seguidos
   diciendo lo mismo, y el del tema fuera de la maquetación de la página.
   Se queda solo el de aquí, que además ubica con los tres pasos. */
.woocommerce-checkout .page-header{ display:none; }

.woocommerce-checkout .jwc-cabecera,
.woocommerce-cart .jwc-cabecera{
  /* width:100% explícito: dentro de la rejilla, un margen lateral `auto`
     hace que el elemento NO se estire y se encoja al ancho de su hijo más
     ancho — aquí el párrafo, con su max-width de 480 px. La cabecera se
     quedaba en 480 en un contenedor de 1140. */
  width:100%;
  max-width:1140px;
  margin:0 auto 44px;
  padding:0 0 36px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.woocommerce-checkout .jwc-rotulo,
.woocommerce-cart .jwc-rotulo{
  display:block;
  margin:0 0 14px;
  font-family:var(--ui) !important;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acento-ink);
}
.woocommerce-checkout .jwc-titulo,
.woocommerce-cart .jwc-titulo{
  margin:0;
  font-family:var(--display);
  font-size:clamp(30px, 4.4vw, 44px);
  font-weight:500;
  line-height:1.1;
  color:var(--marca);
}
.woocommerce-checkout .jwc-lead,
.woocommerce-cart .jwc-lead{
  margin:14px auto 0;
  max-width:480px;
  font-family:var(--display);
  font-size:16.5px;
  line-height:1.6;
  color:var(--suave);
}

/* Migas: dónde estás dentro de la compra */
/* Tres pasos con su número, no una lista numerada del navegador.
   Se lee de un vistazo dónde estás y cuánto queda. */
.woocommerce-checkout .jwc-pasos,
.woocommerce-cart .jwc-pasos{
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  margin:28px 0 0 !important;
  padding:0 !important;
  list-style:none !important;
  counter-reset:jwcpaso;
  font-family:var(--ui) !important;
  font-size:12.5px;
  font-weight:600;
  color:var(--suave);
}
.woocommerce-checkout .jwc-pasos li,
.woocommerce-cart .jwc-pasos li{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}
.woocommerce-checkout .jwc-pasos li::marker,
.woocommerce-cart .jwc-pasos li::marker{ content:none; }

/* El número dentro de su círculo */
.woocommerce-checkout .jwc-pasos li::before,
.woocommerce-cart .jwc-pasos li::before{
  content:counter(jwcpaso);
  counter-increment:jwcpaso;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  border:1px solid var(--line-fuerte);
  border-radius:50%;
  background:transparent;
  font-size:12px;
  color:var(--suave);
}
.woocommerce-checkout .jwc-pasos li.aqui::before,
.woocommerce-cart .jwc-pasos li.aqui::before{
  border-color:var(--marca);
  background:var(--marca);
  color:var(--base);
}
/* El tramo que une un paso con el siguiente */
.woocommerce-checkout .jwc-pasos li + li,
.woocommerce-cart .jwc-pasos li + li{ margin-left:14px; }
.woocommerce-checkout .jwc-pasos li + li::after,
.woocommerce-cart .jwc-pasos li + li::after{ content:none; }
.woocommerce-checkout .jwc-pasos li:not(:last-child),
.woocommerce-cart .jwc-pasos li:not(:last-child){ padding-right:14px; }
.woocommerce-checkout .jwc-pasos li:not(:last-child)::after,
.woocommerce-cart .jwc-pasos li:not(:last-child)::after{
  content:"";
  width:22px; height:1px;
  margin-left:5px;
  background:var(--line-fuerte);
}
.woocommerce-checkout .jwc-pasos .aqui,
.woocommerce-cart .jwc-pasos .aqui{ color:var(--marca); }

/* ---------- Las dos columnas ---------- */
.woocommerce-checkout form.checkout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 420px;
  align-items:start;
  gap:56px;
  max-width:1140px;
  margin:0 auto;
  padding:0 24px 80px;
}
.woocommerce-checkout #customer_details{ grid-column:1; min-width:0; }
.woocommerce-checkout #order_review_heading{ display:none; }
.woocommerce-checkout #order_review{
  grid-column:2;
  min-width:0;
  position:sticky;
  top:calc(var(--jah-header-h, 96px) + 20px);
}

/* WooCommerce mete dentro del formulario dos hijos más que rompían la
   rejilla y empujaban el resumen a una tercera fila, 2.000 px por debajo
   de los datos. El de atribución no pinta nada —son campos ocultos, y
   siguen enviándose igual—; el de pago exprés sí, y va arriba del todo. */
.woocommerce-checkout form.checkout > wc-order-attribution-inputs{ display:none; }
.woocommerce-checkout form.checkout > .wcpay-express-checkout-wrapper{
  grid-column:1 / -1;
  /* Apple Pay y Google Pay son un atajo, no el camino principal: a 1.092 px
     de ancho parecían la acción central de la página. Centrados y a una
     medida de botón, se leen como lo que son. */
  width:100%;
  max-width:520px;
  margin:0 auto 8px;
  min-width:0;
  overflow:hidden;   /* el iframe de Stripe trae su propio ancho y se salía */
}
/* El "o" que WooPayments pone entre los botones exprés y el formulario */
.woocommerce-checkout .wcpay-express-checkout-wrapper > *:last-child{
  font-family:var(--ui) !important;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--suave);
}

/* Facturación y envío dejan de ir en paralelo */
/* Acotadas a form.checkout: en "pedido recibido" el body lleva también
   la clase woocommerce-checkout, y la sección de direcciones lleva
   col2-set. Sin el form delante, este margen de 34 px caía sobre la
   segunda dirección y dejaba las dos tarjetas descuadradas. */
.woocommerce-checkout form.checkout .col2-set{ display:block; }
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2{ width:100%; float:none; }
.woocommerce-checkout form.checkout .col2-set .col-2{ margin-top:34px; }

/* ---------- Bloques de datos ---------- */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{
  padding:28px 30px 30px;
  border:1px solid var(--line);
  border-radius:var(--radio);
  background:var(--base-alt);
}
/* Sin zona de envío configurada, o con un carrito de solo productos
   virtuales, WooCommerce deja estos bloques SIN campos dentro pero los
   sigue imprimiendo: quedaban dos recuadros vacíos de 60 px colgando bajo
   el formulario. `:empty` no vale —traen espacios y algún título— así que
   se comprueba que contengan de verdad algún campo. */
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(.form-row)),
.woocommerce-checkout .woocommerce-additional-fields:not(:has(.form-row)){
  display:none;
}
.woocommerce-checkout .woocommerce-additional-fields:empty{ display:none; }

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review .jwc-caja-titulo{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 22px;
  font-family:var(--display);
  font-size:21px;
  font-weight:500;
  color:var(--marca);
}

/* El número del paso, como en el configurador */
.woocommerce-checkout .woocommerce-billing-fields h3::before,
.woocommerce-checkout .woocommerce-shipping-fields h3::before{
  content:counter(jwc-paso);
  counter-increment:jwc-paso;
  flex:0 0 auto;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--marca);
  color:var(--base);
  font-family:var(--ui);
  font-size:13px;
  font-weight:600;
}
.woocommerce-checkout form.checkout{ counter-reset:jwc-paso; }

/* La casilla de "enviar a otra dirección" es un h3 con label dentro */
.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address{
  font-size:15px;
  font-family:var(--ui);
  font-weight:600;
}
.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address::before{ display:none; }

/* ---------- Campos ---------- */
.woocommerce-checkout .form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 16px;
  padding:0;
}
.woocommerce-checkout form .form-row-first,
.woocommerce-checkout form .form-row-last{
  width:calc(50% - 7px);
  float:none;
  display:inline-flex;
  vertical-align:top;
}
.woocommerce-checkout form .form-row-first{ margin-right:14px; }
.woocommerce-checkout .col2-set .form-row::after,
.woocommerce-checkout .clear{ display:none; }

.woocommerce-checkout .form-row label{
  font-family:var(--ui);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--suave);
}
.woocommerce-checkout .form-row label .required{
  color:var(--acento-ink);
  text-decoration:none;
  border:0;
}
.woocommerce-checkout .form-row .optional{
  font-weight:400;
  color:color-mix(in srgb, var(--suave) 75%, transparent);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single{
  width:100%;
  height:auto;
  min-height:48px;
  padding:12px 14px;
  border:1px solid var(--line-fuerte);
  border-radius:var(--radio);
  background:#fff;
  color:var(--tinta);
  font-family:var(--ui);
  font-size:16px;   /* por debajo de 16, Safari amplía la página al enfocar */
  line-height:1.4;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus{
  outline:none;
  border-color:var(--marca);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--marca) 12%, transparent);
}
.woocommerce-checkout .form-row input::placeholder{ color:color-mix(in srgb, var(--suave) 55%, transparent); }

/* Select2, que WooCommerce usa para país y provincia */
.woocommerce-checkout .select2-container--default .select2-selection--single{
  display:flex;
  align-items:center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;
  line-height:1.4;
  color:var(--tinta);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:100%;
  right:10px;
}

/* Errores, en palabras y en color */
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid select{
  border-color:#B3261E;
}
/* Franja de aviso, no tarjeta con pestaña de color: es el mismo patrón que
   ya usa el aviso de existencias del configurador, y encaja con una web
   que se apoya en filetes finos y no en recuadros. */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info{
  max-width:1140px;
  margin:0 auto 26px;
  padding:14px 20px;
  border:0;
  border-left:2px solid var(--acento);
  border-radius:0;
  background:color-mix(in srgb, var(--acento) 9%, transparent);
  font-family:var(--ui);
  font-size:14px;
  line-height:1.6;
  color:var(--marca);
  list-style:none;
}
.woocommerce-checkout .woocommerce-error{
  border-left-color:#B3261E;
  background:color-mix(in srgb, #B3261E 8%, transparent);
}

/* ---------- El hueco de arriba ----------
   .woocommerce es una rejilla con hueco de 48, y WooCommerce mete
   dentro un .woocommerce-notices-wrapper haya avisos o no. Vacío mide
   0 de alto, pero ocupa fila: se lleva el hueco de arriba y el de
   abajo, 96 px de nada entre la cabecera y las tarjetas.

   Se esconde SOLO si está vacío. De partida no, porque cuando trae un
   aviso de verdad —cupón aplicado, algo sin existencias— tiene que
   verse: un aviso escondido en un carrito es peor que un hueco. */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:empty{
  display:none;
}

/* Y la cabecera se separaba dos veces: sus 44 de margen más los 48 de
   la rejilla. El margen es de cuando esto no era una rejilla. */
.woocommerce-cart .jwc-cabecera{
  margin-bottom:0;
}

/* ---------- Columna derecha: el pedido ---------- */
.woocommerce-checkout #order_review{
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radio);
  background:var(--base-alt);
  overflow:hidden;
}
.woocommerce-checkout #order_review .jwc-caja-titulo{
  margin:0;
  padding:22px 26px 18px;
  border-bottom:1px solid var(--line);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table{
  width:100%;
  margin:0;
  border:0;
  border-collapse:collapse;
  font-family:var(--ui);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead{ display:none; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td{
  padding:14px 26px;
  border:0;
  vertical-align:middle;
  font-size:14px;
  color:var(--marca);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr{
  border-bottom:1px solid var(--line);
}
.woocommerce-checkout .cart_item .product-name{
  font-family:var(--display);
  font-size:15.5px;
  line-height:1.35;
  font-weight:500;
}
.woocommerce-checkout .cart_item .product-name .variation{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1px 6px;
  margin:2px 0 0;
  font-family:var(--ui);
  font-size:12px;
  color:var(--suave);
}
.woocommerce-checkout .cart_item .product-name .variation dt,
.woocommerce-checkout .cart_item .product-name .variation dd{
  margin:0;
  padding:0;
  font-weight:400;
}
.woocommerce-checkout .cart_item .product-name .variation dt{ font-weight:600; }
.woocommerce-checkout .cart_item .product-name .variation dd p{ margin:0; }
.woocommerce-checkout .cart_item .product-name .product-quantity{
  display:inline-block;
  margin-left:6px;
  font-family:var(--ui);
  font-size:12.5px;
  color:var(--suave);
}
.woocommerce-checkout .cart_item .product-total{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* La miniatura la añade el snippet delante del nombre */
.woocommerce-checkout .jwc-mini{
  float:left;
  width:44px; height:44px;
  margin:0 12px 0 0;
  overflow:hidden;
  border-radius:var(--radio);
  background:#fff;
}
.woocommerce-checkout .jwc-mini img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Totales */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr{
  border-bottom:1px solid var(--line);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th{
  font-weight:400;
  color:var(--suave);
  text-align:left;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.woocommerce-checkout .woocommerce-shipping-totals ul{
  margin:0;
  padding:0;
  list-style:none;
  text-align:right;
}
.woocommerce-checkout .woocommerce-shipping-totals label{ font-size:13.5px; }
.woocommerce-checkout .order-total{ border-bottom:0 !important; }
.woocommerce-checkout .order-total th,
.woocommerce-checkout .order-total td{
  padding-top:18px;
  padding-bottom:18px;
  font-family:var(--display);
  font-size:19px;
  color:var(--marca);
}
.woocommerce-checkout .order-total td{ font-family:var(--ui); font-weight:600; }

/* ---------- Pago ---------- */
.woocommerce-checkout #payment{
  padding:0;
  border-radius:0;
  background:transparent;
  border-top:1px solid var(--line);
}
.woocommerce-checkout #payment ul.payment_methods{
  margin:0;
  padding:20px 26px 6px;
  border:0;
  list-style:none;
}
.woocommerce-checkout #payment li.wc_payment_method{
  margin:0 0 10px;
  padding:0;
  border:1px solid var(--line-fuerte);
  border-radius:var(--radio);
  background:#fff;
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.woocommerce-checkout #payment li.wc_payment_method:has(input:checked){
  border-color:var(--marca);
  box-shadow:0 0 0 1px var(--marca);
}
.woocommerce-checkout #payment li.wc_payment_method > label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  margin:0;
  font-family:var(--ui);
  font-size:14.5px;
  font-weight:600;
  color:var(--marca);
  cursor:pointer;
}
.woocommerce-checkout #payment li.wc_payment_method > input[type=radio]{
  margin:0 0 0 16px;
  accent-color:var(--marca);
  width:17px; height:17px;
}
.woocommerce-checkout #payment li.wc_payment_method > input[type=radio] + label{ padding-left:8px; }
.woocommerce-checkout #payment .payment_box{
  margin:0;
  padding:4px 16px 18px;
  border:0;
  border-top:1px solid var(--line);
  background:transparent;
  font-family:var(--ui);
  font-size:13.5px;
  line-height:1.6;
  color:var(--suave);
}
.woocommerce-checkout #payment .payment_box::before{ display:none; }
.woocommerce-checkout #payment .payment_box p:last-child{ margin-bottom:0; }

/* Términos y botón */
.woocommerce-checkout #payment .place-order{
  margin:0;
  padding:16px 26px 26px;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
  margin:0 0 16px;
  font-family:var(--ui);
  font-size:12.5px;
  line-height:1.6;
  color:var(--suave);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a{
  color:var(--acento-ink);
  text-decoration:underline;
}
.woocommerce-checkout .validate-required .woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:flex-start;
  gap:9px;
  cursor:pointer;
}
.woocommerce-checkout .woocommerce-form__input-checkbox{
  flex:0 0 auto;
  width:17px; height:17px;
  margin:1px 0 0;
  accent-color:var(--marca);
}

.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order{
  display:block;
  width:100%;
  padding:17px 24px !important;
  border:1px solid var(--acento) !important;
  border-radius:var(--radio) !important;
  background-color:var(--acento) !important;
  color:#fff !important;
  font-family:var(--ui) !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.2;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.woocommerce-checkout #place_order:hover{
  background-color:var(--acento-ink) !important;
  border-color:var(--acento-ink) !important;
}
.woocommerce-checkout #place_order:active{ transform:translateY(1px); }
.woocommerce-checkout #place_order:disabled{ opacity:.55; cursor:not-allowed; }

/* Lo que tranquiliza justo antes de pagar */
.woocommerce-checkout .jwc-garantias{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
  font-family:var(--ui);
  font-size:12.5px;
  color:var(--suave);
}
.woocommerce-checkout .jwc-garantias li{
  display:flex;
  align-items:center;
  gap:8px;
}
.woocommerce-checkout .jwc-garantias svg{
  flex:0 0 auto;
  width:15px; height:15px;
  stroke:var(--acento);
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- Cupón ---------- */
.woocommerce-checkout .woocommerce-form-coupon-toggle{
  max-width:1140px;
  margin:0 auto 24px;
  padding:0 24px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  margin:0;
  text-align:center;
}
.woocommerce-checkout form.checkout_coupon{
  max-width:1140px;
  margin:0 auto 28px;
  padding:20px 24px;
  border:1px solid var(--line-fuerte);
  border-radius:var(--radio);
  background:var(--base-alt);
}
.woocommerce-checkout form.checkout_coupon .form-row{
  display:inline-flex;
  width:auto;
  margin:0 10px 0 0;
  vertical-align:bottom;
}
.woocommerce-checkout form.checkout_coupon button{
  padding:12px 22px !important;
  border:1px solid var(--marca) !important;
  border-radius:var(--radio) !important;
  background-color:var(--marca) !important;
  color:var(--base) !important;
  font-family:var(--ui) !important;
  font-size:14px !important;
  font-weight:600 !important;
}

/* ---------- Cuando no hay nada que pagar ---------- */
.woocommerce-checkout .jwc-vacio{ border-bottom:0; padding-bottom:0; }
.woocommerce-checkout .jwc-vacio-acciones{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  margin:28px 0 0;
}
.woocommerce-checkout .jwc-boton{
  display:inline-block;
  padding:15px 28px;
  border:1px solid var(--acento);
  border-radius:var(--radio);
  background:var(--acento);
  color:#fff;
  font-family:var(--ui) !important;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease;
}
.woocommerce-checkout .jwc-boton:hover{
  background:var(--acento-ink);
  border-color:var(--acento-ink);
  color:#fff;
}
.woocommerce-checkout .jwc-enlace{
  font-family:var(--ui) !important;
  font-size:14px;
  color:var(--marca);
  border-bottom:1px solid var(--line-fuerte);
  text-decoration:none;
}

/* ---------- Carrito vacío ---------- */
.woocommerce-checkout .cart-empty,
.woocommerce-checkout .wc-empty-cart-message{
  max-width:620px;
  margin:0 auto;
  text-align:center;
  font-family:var(--display);
  font-size:18px;
  color:var(--suave);
}

/* ---------- Capa de carga de WooCommerce ---------- */
.woocommerce-checkout .blockUI.blockOverlay{
  background:color-mix(in srgb, var(--base) 72%, transparent) !important;
  opacity:1 !important;
}

/* ============================================================
   CARRITO
   ------------------------------------------------------------
   La cantidad se guarda sola (ver carrito.js), así que el botón de
   "Actualizar carrito" sobra. Solo se esconde cuando ese archivo ha
   arrancado bien y ha puesto .jwc-carrito-auto en el <body>: si el
   JavaScript falla, el botón sigue ahí y el carrito funciona igual.
   ============================================================ */

/* ---------- Dos columnas: artículos y resumen ---------- */
.woocommerce-cart .page-header{ display:none; }

.woocommerce-cart .woocommerce{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 372px;
  align-items:start;
  gap:48px;
  max-width:1140px;
  /* El mosaico de ciudades del pie arrancaba a un pelo de la caja del
     resumen y parecía formar parte de ella. */
  margin:0 auto 96px;
}
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .jwc-cabecera{ grid-column:1 / -1; }
.woocommerce-cart .woocommerce-cart-form{ grid-column:1; min-width:0; margin:0; }
.woocommerce-cart .cart-collaterals{
  grid-column:2;
  width:100%;
  min-width:0;
  margin:0;
  position:sticky;
  top:calc(var(--jah-header-h, 96px) + 20px);
}
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after{ content:none; }
/* WooCommerce mete aquí unos campos ocultos que ocupan celda de rejilla */
.woocommerce-cart .woocommerce > wc-order-attribution-inputs{ display:none; }

/* ---------- La tabla deja de ser una tabla ---------- */
.woocommerce-cart .shop_table,
.woocommerce-cart .shop_table tbody{
  display:block;
  width:100%;
  border:0;
  border-collapse:separate;
  margin:0;
}
.woocommerce-cart .shop_table thead{ display:none; }

.woocommerce-cart tr.cart_item{
  display:grid;
  grid-template-columns:132px minmax(0, 1fr) auto;
  grid-template-areas:
    "foto nombre   subtotal"
    "foto precio   subtotal"
    "foto cantidad subtotal";
  align-items:center;
  gap:4px 22px;
  margin:0 0 14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radio);
  background:var(--base-alt);
  transition:border-color .18s ease, opacity .18s ease;
}
.woocommerce-cart tr.cart_item:hover{ border-color:var(--line-fuerte); }
.woocommerce-cart tr.cart_item td{
  display:block;
  padding:0;
  border:0;
  /* El tema pinta las celdas con un gris de rayado de tabla que aquí, con
     las líneas ya convertidas en tarjetas, sale como manchas sueltas. */
  background:transparent !important;
  text-align:left;
}
/* El tema pinta el nombre de la columna delante de cada celda en móvil */
.woocommerce-cart tr.cart_item td::before{ content:none !important; }

/* Foto grande: es lo que se está comprando */
.woocommerce-cart td.product-thumbnail{
  grid-area:foto;
  align-self:start;
  width:132px;
  height:132px;
  overflow:hidden;
  border-radius:var(--radio);
  background:#fff;
}
.woocommerce-cart td.product-thumbnail img{
  width:100% !important;
  /* Altura en píxeles y con !important: dentro de un <td> el 100% no
     resuelve contra la altura de la celda, y además woocommerce-layout.css
     declara `.woocommerce table.cart img{height:auto}` con más peso que
     cualquier regla normal de aquí. Sin esto, cada foto tomaba su propia
     proporción: la tarjeta regalo salía cuadrada de casualidad y el kit,
     que es 900×720, se quedaba en 106 px dentro de un marco de 132. */
  height:132px !important;
  object-fit:cover;
  display:block;
}
/* Si el producto no tiene foto en WooCommerce, el marcador al menos va
   en los colores de la casa y no en el gris de fábrica. */
.woocommerce-cart td.product-thumbnail img[src*="placeholder"]{
  object-fit:contain;
  padding:26px;
  opacity:.28;
  background:var(--base);
}

.woocommerce-cart td.product-name{
  grid-area:nombre;
  align-self:end;
  font-family:var(--display) !important;
  font-size:19px;
  line-height:1.25;
  color:var(--marca);
}
.woocommerce-cart td.product-name a{
  color:var(--marca);
  text-decoration:none;
}
.woocommerce-cart td.product-name a:hover{ text-decoration:underline; }

/* El acabado y demás datos de la variación, desglosados */
.woocommerce-cart td.product-name .variation{
  /* Rejilla y no flex: con la cadena y los pendientes son dos pares, y
     en flex el segundo rótulo se pega al final del primer valor. */
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:2px 7px;
  margin:7px 0 0;
}
.woocommerce-cart td.product-name .variation dt,
.woocommerce-cart td.product-name .variation dd{
  margin:0;
  padding:0;
  font-family:var(--ui) !important;
  font-size:12px;
  line-height:1.5;
  color:var(--suave);
  font-weight:400;
}
.woocommerce-cart td.product-name .variation dt{ font-weight:600; }
.woocommerce-cart td.product-name .variation dd p{ margin:0; }

.woocommerce-cart td.product-price{
  grid-area:precio;
  align-self:start;
  font-family:var(--ui) !important;
  font-size:13px;
  color:var(--suave);
}
.woocommerce-cart td.product-price::after{
  content:" por unidad";
  font-size:12px;
}

.woocommerce-cart td.product-quantity{
  grid-area:cantidad;
  align-self:end;
  padding-top:10px !important;
}

.woocommerce-cart td.product-subtotal{
  grid-area:subtotal;
  align-self:center;
  text-align:right;
  white-space:nowrap;
  font-family:var(--ui) !important;
  font-size:19px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--marca);
}

/* ---------- Cantidad ---------- */
.woocommerce-cart .jwc-cantidad{
  display:inline-flex;
  align-items:center;
  gap:0;
  border:1px solid var(--line-fuerte);
  border-radius:var(--radio);
  overflow:hidden;
  background:#fff;
}
.woocommerce-cart .jwc-cantidad input.qty{
  width:52px;
  height:42px;
  padding:0;
  border:0;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-radius:0;
  background:transparent;
  text-align:center;
  font-family:var(--ui) !important;
  font-size:15px;
  font-variant-numeric:tabular-nums;
  color:var(--marca);
  -moz-appearance:textfield;
}
.woocommerce-cart .jwc-cantidad input.qty::-webkit-outer-spin-button,
.woocommerce-cart .jwc-cantidad input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.woocommerce-cart .jwc-cantidad label.screen-reader-text{ display:none; }

.woocommerce-cart button.jwc-paso{
  width:40px; height:42px;
  display:flex; align-items:center; justify-content:center;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--marca) !important;
  font-family:var(--ui) !important;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.woocommerce-cart button.jwc-paso:hover:not(:disabled){
  background:var(--base-alt) !important;
}
.woocommerce-cart button.jwc-paso:disabled{ opacity:.35; cursor:not-allowed; }

/* Con una sola unidad, restar es quitar: el mismo botón pasa a papelera. */
.woocommerce-cart button.jwc-paso.jwc-borrar::before{
  content:"";
  width:17px; height:17px;
  background-color:var(--suave);
  transition:background-color .15s ease;
  -webkit-mask:var(--jwc-papelera) center / contain no-repeat;
  mask:var(--jwc-papelera) center / contain no-repeat;
}
.woocommerce-cart button.jwc-paso.jwc-borrar:hover{
  background:color-mix(in srgb, #B3261E 8%, transparent) !important;
}
.woocommerce-cart button.jwc-paso.jwc-borrar:hover::before{ background-color:#B3261E; }

.woocommerce-cart{
  --jwc-papelera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v5M14 11v5'/%3E%3C/svg%3E");
}

/* La columna suelta de la × sobra: la papelera vive en el contador.
   Y con la cantidad automática, "Actualizar carrito" tampoco hace falta.
   Los dos llevan !important porque el tema los declara con más peso, y
   los dos solo desaparecen si el JS arrancó (.jwc-carrito-auto): sin él,
   son la única forma de tocar el carrito. */
.jwc-carrito-auto .woocommerce-cart-form td.product-remove,
.jwc-carrito-auto .woocommerce-cart-form th.product-remove{ display:none !important; }
.jwc-carrito-auto .woocommerce-cart-form [name="update_cart"]{ display:none !important; }

.woocommerce-cart td.product-remove{ grid-area:foto; justify-self:end; }
.woocommerce-cart td.product-remove a.remove,
.woocommerce-cart a.remove{
  width:34px; height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:var(--radio);
  background:#fff !important;
  color:transparent !important;
  font-size:0;
  text-decoration:none;
  transition:border-color .18s ease, background-color .18s ease;
}
.woocommerce-cart a.remove::before{
  content:"";
  width:16px; height:16px;
  background-color:var(--suave);
  transition:background-color .18s ease;
  -webkit-mask:var(--jwc-papelera) center / contain no-repeat;
  mask:var(--jwc-papelera) center / contain no-repeat;
}
.woocommerce-cart a.remove:hover{
  border-color:#B3261E;
  background:color-mix(in srgb, #B3261E 7%, #fff) !important;
}
.woocommerce-cart a.remove:hover::before{ background-color:#B3261E; }

/* ---------- Cupón y acciones ---------- */
.woocommerce-cart tr:has(td.actions),
.woocommerce-cart td.actions{ display:block; padding:0; border:0; }
.woocommerce-cart td.actions{
  margin-top:6px;
  padding:20px 18px !important;
  border:1px dashed var(--line-fuerte) !important;
  border-radius:var(--radio);
  /* WooCommerce alinea estas acciones a la derecha por defecto */
  text-align:center !important;
}
/* WooCommerce declara `.cart .actions .coupon{float:left}`. Un hijo
   flotado no cuenta para la altura de su padre, así que la caja de
   puntos se quedaba con sus 38 px de relleno y el campo y el botón
   caían fuera, por debajo del borde: parecía que la etiqueta iba en una
   caja y el formulario suelto debajo. Sin float vuelven dentro. */
.woocommerce-cart .coupon{
  float:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  /* Un cupón son ocho o diez caracteres: a 552 px de ancho el campo
     parecía el asunto principal del carrito. */
  max-width:400px;
  margin:0 auto !important;
}
/* !important en content y display: en móvil woocommerce-smallscreen.css
   la pisaba con su content:" " de limpiar flotados (lleva #content y
   gana) y el texto no salía, ni en español ni en inglés. */
.woocommerce-cart .coupon::before{
  content:"¿Tienes un código de descuento?" !important;
  display:block !important;
  flex:0 0 100%;
  margin-bottom:6px;
  font-family:var(--ui);
  font-size:13px;
  font-weight:600;
  text-align:center;
  color:var(--suave);
}
.woocommerce-cart .coupon input#coupon_code{
  flex:1 1 200px;
  min-width:0;
  max-width:240px;
  height:46px;
  padding:0 14px;
  text-align:center;
  border:1px solid var(--line-fuerte);
  border-radius:var(--radio);
  background:#fff;
  font-family:var(--ui) !important;
  font-size:15px;
  color:var(--tinta);
}
.woocommerce-cart .coupon button{
  flex:0 0 auto;
  padding:13px 22px !important;
  border:1px solid var(--marca) !important;
  border-radius:var(--radio) !important;
  background-color:var(--marca) !important;
  color:var(--base) !important;
  font-family:var(--ui) !important;
  font-size:14px !important;
  font-weight:600 !important;
  cursor:pointer;
}
.woocommerce-cart .coupon button:hover{
  background-color:var(--secundario) !important;
  border-color:var(--secundario) !important;
}

/* ---------- Resumen ---------- */
/* WooCommerce reparte el carrito en dos columnas suyas y le da al
   resumen `width:48%; float:right`. Dentro de nuestra columna de 372 px
   eso son 178: el título y el botón partían en dos líneas y todo parecía
   apretado. Aquí ocupa lo que le toca. */
.woocommerce-cart .cart_totals{
  width:100% !important;
  float:none !important;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radio);
  background:var(--base-alt);
  overflow:hidden;
}
.woocommerce-cart .cart_totals > h2{
  margin:0;
  padding:20px 24px 17px;
  border-bottom:1px solid var(--line);
  font-family:var(--display) !important;
  font-size:20px;
  font-weight:500;
  line-height:1.2;
  color:var(--marca);
  white-space:nowrap;
}
/* Todo este bloque nombra table.shop_table y lleva !important a
   propósito: el tema declara ".woocommerce table.shop_table th", que
   pesa más que ".woocommerce-cart .cart_totals th". Sin esto ganaba él,
   y de ahí venían la franja gris a media anchura sobre el subtotal, el
   texto en negro y las columnas descuadradas. */
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table.shop_table{
  width:100% !important;
  table-layout:fixed;
  margin:0 !important;
  border:0 !important;
  border-collapse:collapse !important;
  border-radius:0 !important;
  background:transparent !important;
}
.woocommerce-cart .cart_totals table tr,
.woocommerce-cart .cart_totals table.shop_table tr{
  background:transparent !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td,
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td{
  padding:14px 24px !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  background:transparent !important;
  font-family:var(--ui) !important;
  font-size:14.5px !important;
  line-height:1.4 !important;
  vertical-align:middle !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table.shop_table th{
  width:52% !important;
  font-weight:400 !important;
  color:var(--suave) !important;
  text-align:left !important;
}
.woocommerce-cart .cart_totals table td,
.woocommerce-cart .cart_totals table.shop_table td{
  width:48% !important;
  text-align:right !important;
  font-variant-numeric:tabular-nums;
  font-weight:500 !important;
  color:var(--marca) !important;
}
/* La última fila no necesita raya: ya la pone el borde del bloque de
   pagar que viene justo debajo. */
.woocommerce-cart .cart_totals table tr:last-child th,
.woocommerce-cart .cart_totals table tr:last-child td{ border-bottom:0 !important; }
.woocommerce-cart .cart_totals .woocommerce-shipping-totals ul{
  margin:0; padding:0; list-style:none; text-align:right;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination{
  margin:6px 0 0;
  font-size:12.5px;
  color:var(--suave);
}
.woocommerce-cart .cart_totals .shipping-calculator-button{
  color:var(--acento-ink);
  text-decoration:underline;
}
.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td{
  padding-top:18px !important;
  padding-bottom:18px !important;
  border-bottom:0 !important;
  font-size:19px !important;
}
.woocommerce-cart .cart_totals table tr.order-total th{
  font-family:var(--display) !important;
  font-weight:500 !important;
  color:var(--marca) !important;
}
.woocommerce-cart .cart_totals table tr.order-total td{
  font-weight:600 !important;
  color:var(--marca) !important;
}
/* El "impuestos incluidos" que WooCommerce cuelga del total */
.woocommerce-cart .cart_totals table tr.order-total small,
.woocommerce-cart .cart_totals .includes_tax{
  display:block;
  margin-top:3px;
  font-size:11.5px !important;
  font-weight:400 !important;
  color:var(--suave) !important;
}

.woocommerce-cart .wc-proceed-to-checkout{
  padding:18px 24px 22px !important;
  margin:0 !important;
  border-top:1px solid var(--line);
}
/* 52 px de alto y no 60: en una caja de 308 px de ancho, un botón de 60
   se comía la mitad de lo que se ve y empequeñecía todo lo de arriba. */
.woocommerce-cart a.checkout-button{
  display:block !important;
  float:none !important;
  width:100% !important;
  margin:0 !important;
  padding:16px 20px !important;
  border:1px solid var(--acento) !important;
  border-radius:var(--radio) !important;
  background-color:var(--acento) !important;
  color:#fff !important;
  font-family:var(--ui) !important;
  font-size:15.5px !important;
  font-weight:600 !important;
  letter-spacing:.01em;
  line-height:1.25 !important;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.woocommerce-cart a.checkout-button:active{ transform:translateY(1px); }

/* Volver a mirar sin perder lo que ya llevas */
.woocommerce-cart .jwc-seguir{
  display:block;
  margin:16px 0 2px;
  text-align:center;
  font-family:var(--ui) !important;
  font-size:13.5px;
  font-weight:600;
  color:var(--marca);
  text-decoration:none;
}
.woocommerce-cart .jwc-seguir span{ border-bottom:1px solid var(--line-fuerte); }
.woocommerce-cart .jwc-seguir:hover span{ border-color:var(--marca); }

/* Lo que tranquiliza sin salir del carrito */
.woocommerce-cart .jwc-notas{
  margin:0;
  padding:16px 24px 20px;
  border-top:1px solid var(--line);
  list-style:none;
  font-family:var(--ui) !important;
  font-size:12.5px;
  line-height:1.5;
  color:var(--suave);
}
.woocommerce-cart .jwc-notas li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0 0 8px;
}
.woocommerce-cart .jwc-notas li:last-child{ margin-bottom:0; }
.woocommerce-cart .jwc-notas svg{
  flex:0 0 auto;
  width:14px; height:14px;
  margin-top:2px;
  stroke:var(--acento);
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.woocommerce-cart a.checkout-button:hover{
  background-color:var(--acento-ink) !important;
  border-color:var(--acento-ink) !important;
}

/* Apple Pay y Google Pay, debajo y a su medida */
.woocommerce-cart .wcpay-express-checkout-wrapper{
  margin:14px 0 0;
  overflow:hidden;
}

/* ---------- Estados ---------- */
.woocommerce-cart form.jwc-actualizando .shop_table{
  opacity:.55;
  pointer-events:none;
  transition:opacity .15s ease;
}
.woocommerce-cart tr.jwc-quitando{ opacity:.4; }

.woocommerce-cart .jwc-aviso-carrito{
  margin:0 auto 20px;
  padding:14px 20px;
  border:0;
  border-left:2px solid #B3261E;
  background:color-mix(in srgb, #B3261E 8%, transparent);
  font-family:var(--ui) !important;
  font-size:14px;
  color:var(--marca);
}

/* ---------- Carrito vacío ---------- */
.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-empty-cart-message{
  grid-column:1 / -1;
  max-width:620px;
  margin:0 auto;
  text-align:center;
  font-family:var(--display) !important;
  font-size:18px;
  color:var(--suave);
}
.woocommerce-cart .return-to-shop{ grid-column:1 / -1; text-align:center; }

@media (max-width:1000px){
  .woocommerce-cart .woocommerce{
    grid-template-columns:minmax(0, 1fr);
    gap:28px;
  }
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals{ grid-column:1; }
  .woocommerce-cart .cart-collaterals{ position:static; }
}

/* 768 y no 600 a propósito: WooCommerce carga woocommerce-smallscreen.css
   con media="only screen and (max-width:768px)". Este bloque existe para
   contrarrestarlo, así que tiene que empezar donde empieza él. Cortando en
   600 quedaba una franja de 601 a 768 —tabletas en vertical, portátiles
   pequeños— donde mandaba WooCommerce solo: filas sin rejilla, la foto del
   producto oculta y el resumen sin las palabras "Subtotal" ni "Total",
   nada más que las cifras sueltas. */
@media (max-width:768px){
  /* woocommerce-smallscreen.css convierte cada fila en un bloque
     (`table.shop_table_responsive tr{display:block}`), así que la rejilla
     de la tarjeta se deshacía y las celdas se apilaban a lo ancho. Hay
     que devolverle el grid a la fuerza. */
  .woocommerce-cart table.shop_table_responsive tr.cart_item,
  .woocommerce-cart tr.cart_item{
    display:grid !important;
    /* 140 y no 96: el control de cantidad mide 138 con sus botones de
       dedo, y en una columna de 96 se salía por la derecha. Además la
       foto gana tamaño, que es lo que interesa en el móvil. */
    grid-template-columns:150px minmax(0, 1fr);
    grid-template-areas:
      "foto nombre"
      "foto precio"
      "cantidad subtotal";
    gap:6px 14px;
    padding:14px;
  }

  /* Los tres pasos no caben en una línea de móvil con sus conectores:
     se quedan los círculos y el nombre, sin los tramos que los unen. */
  .woocommerce-cart .jwc-pasos{ gap:4px 0; font-size:11.5px; }
  .woocommerce-cart .jwc-pasos li + li{ margin-left:8px; }
  .woocommerce-cart .jwc-pasos li:not(:last-child){ padding-right:8px; }
  .woocommerce-cart .jwc-pasos li:not(:last-child)::after{ width:12px; margin-left:3px; }
  .woocommerce-cart .jwc-pasos li::before{ width:22px; height:22px; font-size:11px; }
  /* WooCommerce esconde la miniatura por debajo de 768 px con
     `.woocommerce table.shop_table_responsive tr td.product-thumbnail
     {display:none}` — tres clases y tres tipos, que ganan a cualquier
     regla normal. En un carrito de tarjetas y kits la foto es justo lo
     que distingue una línea de otra, así que en móvil también se ve. */
  .woocommerce-cart table.shop_table_responsive tr td.product-thumbnail,
  .woocommerce-cart table.shop_table_responsive tr td.product-thumbnail,
  .woocommerce-cart td.product-thumbnail{
    display:block !important;
    width:150px;
    height:150px;
  }
  .woocommerce-cart td.product-thumbnail img{ height:150px !important; }
  .woocommerce-cart td.product-name{ font-size:17px; }
  .woocommerce-cart td.product-quantity{ padding-top:14px !important; }
  .woocommerce-cart td.product-subtotal{ align-self:end; padding-top:14px !important; }
  .woocommerce-cart button.jwc-paso{ width:44px; }   /* dedo, no ratón */
  .woocommerce-cart .jwc-cantidad input.qty{ width:50px; }
  .woocommerce-cart td.product-quantity{ min-width:0; }
  .woocommerce-cart td.product-remove a.remove,
  .woocommerce-cart a.remove{ width:44px; height:44px; }
  .woocommerce-cart .cart_totals table th,
  .woocommerce-cart .cart_totals table td,
  .woocommerce-cart .cart_totals table.shop_table th,
  .woocommerce-cart .cart_totals table.shop_table td{ padding:13px 18px !important; }
  .woocommerce-cart .cart_totals > h2{ padding:17px 18px 14px; }
  .woocommerce-cart .wc-proceed-to-checkout{ padding:16px 18px 20px !important; }
  .woocommerce-cart .jwc-notas{ padding:15px 18px 18px; }
  .woocommerce-cart .woocommerce{ margin-bottom:56px; }
}

/* Por debajo de 560, el nombre del producto baja a una fila propia.
   Con la foto a 150 px al nombre le quedaban 135, y dentro la lista de
   piezas se partía en etiqueta de 65 y valor de 63: "Cierre clásico ·
   Dorado" en tres líneas. Y desde que el kit lleva cierre y charm son
   cinco filas, no dos. Así el nombre y su lista tienen los 329 px de la
   tarjeta; la foto se queda como está, que es lo que distingue una
   línea de otra de un vistazo. */
@media (max-width:560px){
  .woocommerce-cart table.shop_table_responsive tr.cart_item,
  .woocommerce-cart tr.cart_item{
    grid-template-areas:
      "foto precio"
      "nombre nombre"
      "cantidad subtotal";
  }
  .woocommerce-cart td.product-price{ align-self:start; }
  /* woocommerce-smallscreen.css alinea las celdas a la derecha, que en una
     columna de 135 daba igual. Ahora que el nombre ocupa la fila entera,
     el título y los valores se leen a la izquierda; la etiqueta se queda
     a la derecha, pegada a su valor. */
  /* Con el peso de woocommerce-smallscreen.css delante: su regla es
     .woocommerce table.shop_table_responsive tr td{text-align:right},
     tres clases y dos tipos. El título del producto es texto suelto
     dentro de la celda, así que sin ganarle se quedaba a la derecha
     encima de unas filas alineadas a la izquierda. */
  .woocommerce-cart table.shop_table_responsive tr td.product-name,
  .woocommerce-cart td.product-name{ font-size:16px; text-align:left !important; }
  .woocommerce-cart td.product-name dl.variation dt{ text-align:right; }
  .woocommerce-cart td.product-name dl.variation dd{ text-align:left; }

  /* woocommerce-smallscreen.css esconde los <th> del resumen y saca la
     etiqueta de un ::before con dos puntos: "Total: 103,77 €", todo en
     el mismo cuerpo y pegado al importe. En una caja de 318 px sobra
     sitio para las dos columnas de verdad, así que se recupera la misma
     lectura que en el escritorio: concepto a la izquierda, importe a la
     derecha. */
  .woocommerce-cart .cart_totals table.shop_table_responsive,
  .woocommerce-cart .cart_totals table.shop_table_responsive tbody{
    display:block !important;
  }
  .woocommerce-cart .cart_totals table.shop_table_responsive tr{
    display:flex !important;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
  }
  .woocommerce-cart .cart_totals table.shop_table_responsive th{
    display:block !important;
    width:auto !important;
    flex:1 1 auto;
  }
  .woocommerce-cart .cart_totals table.shop_table_responsive td{
    display:block !important;
    width:auto !important;
    min-width:0;
    flex:0 1 auto;
    text-align:right !important;
  }
  .woocommerce-cart .cart_totals table.shop_table_responsive td::before{
    content:none !important;
  }
}

/* ============================================================
   Pantallas estrechas
   ============================================================ */
@media (max-width:1000px){
  .woocommerce-checkout form.checkout{
    grid-template-columns:minmax(0, 1fr);
    gap:32px;
  }
  .woocommerce-checkout #customer_details{ grid-column:1; }

  /* En una sola columna, el resumen entero delante dejaba el botón de
     pagar ANTES del formulario: se llegaba a "Pagar" sin haber escrito
     todavía el nombre. `display:contents` disuelve el contenedor para que
     sus tres piezas se puedan ordenar por separado dentro de la rejilla:
     primero qué compras y cuánto, luego tus datos, y el pago al final. */
  .woocommerce-checkout #order_review{
    display:contents;
    position:static;
    border:0;
    background:none;
  }
  .woocommerce-checkout #order_review .jwc-caja-titulo{
    order:-2;
    margin:0;
    padding:22px 24px 16px;
    border:1px solid var(--line);
    border-bottom:0;
    border-radius:var(--radio) var(--radio) 0 0;
    background:var(--base-alt);
  }
  .woocommerce-checkout .woocommerce-checkout-review-order-table{
    order:-1;
    border:1px solid var(--line);
    border-top:0;
    border-radius:0 0 var(--radio) var(--radio);
    background:var(--base-alt);
    overflow:hidden;
  }
  .woocommerce-checkout #payment{
    order:1;
    border:1px solid var(--line);
    border-radius:var(--radio);
    background:var(--base-alt);
    overflow:hidden;
  }
  /* Con la rejilla de por medio, los márgenes negativos del hueco entre
     el título y la tabla se notan: se anulan. */
  .woocommerce-checkout #order_review .jwc-caja-titulo + *{ margin-top:0; }
}

@media (max-width:600px){
  .woocommerce-checkout form.checkout{ padding:0 16px 60px; }
  .woocommerce-checkout .jwc-cabecera{ padding:0 16px; margin-bottom:32px; }
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields{ padding:22px 18px 24px; }
  .woocommerce-checkout .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout .woocommerce-checkout-review-order-table td{ padding:12px 18px; }
  .woocommerce-checkout #order_review .jwc-caja-titulo{ padding:18px 18px 15px; }
  .woocommerce-checkout #payment ul.payment_methods{ padding:16px 18px 4px; }
  .woocommerce-checkout #payment .place-order{ padding:14px 18px 22px; }
  /* En móvil, los dos campos de nombre a ancho completo: partidos se
     quedan en 140 px y no cabe un apellido compuesto. */
  .woocommerce-checkout form .form-row-first,
  .woocommerce-checkout form .form-row-last{ width:100%; margin-right:0; }
}

@media (prefers-reduced-motion: reduce){
  .woocommerce-checkout *{ transition:none !important; }
}

/* ===================================================================
   PEDIDO RECIBIDO
   -------------------------------------------------------------------
   La última pantalla de la compra. Comparte tokens, cabecera y pasos
   con el carrito y el pago; lo de aquí es lo que solo existe en esta.
   =================================================================== */

.woocommerce-order-received .woocommerce{
  max-width:900px;
  margin:0 auto;
  padding:0 24px 96px;
}

/* El "gracias" de WooCommerce: lo dice la cabecera, y más grande. Se
   queda para lectores de pantalla y para cuando no cargue el estilo. */
.woocommerce-order-received .woocommerce-thankyou-order-received{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- Tipografía ----------
   El tema pone Playfair hasta en un número de teléfono, y con
   !important: hay que ganárselo elemento a elemento. Playfair se queda
   para lo que se lee de un vistazo —el nombre de lo comprado y los
   titulares—; Hind para lo que se comprueba: cifras, direcciones y
   listas de piezas. */
.woocommerce-order-received ul.order_details li,
.woocommerce-order-received ul.order_details li strong,
.woocommerce-order-received .woocommerce-column__title,
.woocommerce-order-received address,
.woocommerce-order-received address p,
.woocommerce-order-received address span,
.woocommerce-order-received .jwc-pieza-k,
.woocommerce-order-received .jwc-pieza-v,
.woocommerce-order-received td.product-name .product-quantity,
.woocommerce-order-received td.product-total,
.woocommerce-order-received tfoot th,
.woocommerce-order-received tfoot td{
  font-family:var(--ui) !important;
}
/* Y lo que sí manda en serif. */
.woocommerce-order-received .jwc-titulo,
.woocommerce-order-received .jwc-lead,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received td.product-name,
.woocommerce-order-received tfoot tr:last-child th,
.woocommerce-order-received tfoot tr:last-child td{
  font-family:var(--display) !important;
}

/* ---------- El resguardo ----------
   Sin el número de pedido: lo pidió el cliente. Sigue en el correo de
   confirmación y en "mis pedidos", que es donde se busca cuando de
   verdad hace falta. */
.woocommerce-order-received ul.order_details li.order{
  display:none !important;
}

/* El tema pone ul::before{content:" ";display:table} para limpiar
   flotantes. En una rejilla ese pseudo-elemento cuenta como un hijo
   más y se quedaba con la primera celda, vacía. */
.woocommerce-order-received ul.order_details::before,
.woocommerce-order-received ul.order_details::after{
  content:none !important;
  display:none !important;
}
.woocommerce-order-received ul.order_details{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:1px;
  margin:0 0 44px;
  padding:0;
  list-style:none;
  border:1px solid var(--line);
  border-radius:var(--radio);
  background:var(--line);      /* hace de línea entre celdas */
  overflow:hidden;
}
.woocommerce-order-received ul.order_details li{
  margin:0;
  padding:20px 22px;
  background:var(--base-alt);
  font-family:var(--ui);
  font-size:17px;
  font-weight:500;
  color:var(--marca);
  list-style:none;
  border:0;
  word-break:break-word;
}
.woocommerce-order-received ul.order_details li strong{
  display:block;
  margin-top:5px;
  font-family:var(--ui);
  font-size:16px;
  font-weight:600;
  color:var(--marca);
}
/* La etiqueta del dato, en pequeño y arriba. */
.woocommerce-order-received ul.order_details li{
  font-size:11px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--acento-ink);
}

/* ---------- El detalle del pedido ---------- */
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title{
  margin:0 0 20px;
  font-family:var(--display);
  font-size:26px;
  font-weight:500;
  color:var(--marca);
}

/* La tabla deja de ser una tabla, igual que en el carrito. */
.woocommerce-order-received table.woocommerce-table--order-details,
.woocommerce-order-received table.woocommerce-table--order-details tbody,
.woocommerce-order-received table.woocommerce-table--order-details tfoot{
  display:block;
  width:100%;
  border:0;
  border-collapse:separate;
  margin:0;
}
.woocommerce-order-received table.woocommerce-table--order-details thead{ display:none; }

/* Dos columnas: lo que se ha comprado y lo que cuesta. La foto no es
   una columna de la fila sino de la celda del nombre, porque en esta
   plantilla de WooCommerce el único sitio donde se puede meter algo es
   dentro de esa celda. */
.woocommerce-order-received tr.order_item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:4px 20px;
  margin:0 0 12px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radio);
  background:var(--base-alt);
}
.woocommerce-order-received tr.order_item td{
  display:block;
  padding:0;
  border:0;
  background:transparent !important;
  text-align:left;
}
.woocommerce-order-received tr.order_item td::before{ content:none !important; }

.woocommerce-order-received td.product-name{
  grid-column:1;
  font-family:var(--display);
  font-size:18px;
  line-height:1.35;
  color:var(--marca);
}
/* Limpia el flotante de dentro: si no, una lista de piezas más corta
   que la foto dejaría la tarjeta con el alto del texto y la foto
   saliéndose por abajo. */
.woocommerce-order-received td.product-name::after{
  content:'';
  display:block;
  clear:both;
}
/* Flotante y no rejilla: el nombre del producto es un nodo de texto
   suelto, sin elemento propio al que asignarle una columna. Flotando,
   el texto la rodea, que es exactamente lo que hace falta. */
.jwc-linea-foto{
  float:left;
  margin:2px 18px 8px 0;
  width:96px;height:96px;
  overflow:hidden;
  border-radius:var(--radio);
  border:1px solid var(--line);
  background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.jwc-linea-foto img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.woocommerce-order-received td.product-name .product-quantity{
  font-family:var(--ui);
  font-size:13px;
  font-weight:600;
  color:var(--suave);
}
.woocommerce-order-received td.product-total{
  grid-column:2;
  align-self:center;
  font-family:var(--ui);
  font-size:16px;
  font-weight:600;
  color:var(--marca);
  white-space:nowrap;
}

/* Las piezas de cada kit. Esto es lo que no se veía en ninguna parte. */
.jwc-piezas{
  /* overflow:hidden le da contexto propio: así se coloca AL LADO del
     flotante en vez de pasarle por debajo. */
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:3px 12px;
  margin:9px 0 0;
  padding:0;
  list-style:none;
}
.jwc-piezas li{
  display:contents;
  margin:0;
  list-style:none;
}
.jwc-pieza-k{
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--suave);
  white-space:nowrap;
}
.jwc-pieza-v{
  font-family:var(--ui);
  font-size:13.5px;
  line-height:1.5;
  color:var(--marca);
  min-width:0;
}

/* La lista de WooCommerce, escondida SOLO aquí.

   El plugin de tarjetas regalo (addify) trae este JavaScript:
       if ( $('.wc-item-meta-label').text("afgc_log_id") ) {
           $('.wc-item-meta-label').closest('.wc-item-meta').hide();
       }
   .text("algo") con argumento ESCRIBE: renombra todas las etiquetas de
   todas las líneas a "afgc_log_id". Y el if siempre se cumple, así que
   además esconde la lista entera. No se toca ese plugin —se actualiza
   y volvería—: se pinta la nuestra, con clases que su selector no
   busca, y la suya se queda fuera. */
.woocommerce-order-received ul.wc-item-meta{ display:none !important; }

/* ---------- Los totales ---------- */
.woocommerce-order-received tfoot tr{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:11px 18px;
  border:0;
}
/* Con el peso de .woocommerce table.shop_table tfoot th delante, que
   trae su propio borde superior: salían rayas cortas encima de cada
   concepto. La única línea que queda es la del Total. */
.woocommerce-order-received table.shop_table tfoot th,
.woocommerce-order-received table.shop_table tfoot td,
.woocommerce-order-received tfoot th,
.woocommerce-order-received tfoot td{
  display:block;
  padding:0;
  border:0 !important;
  background:transparent !important;
  font-family:var(--ui);
  font-size:14.5px;
  font-weight:400;
  color:var(--suave);
  text-align:left;
}
.woocommerce-order-received tfoot td{
  font-weight:600;
  color:var(--marca);
  white-space:nowrap;
}
/* El total, separado y con peso: es la cifra que se busca. */
.woocommerce-order-received tfoot tr:last-child{
  margin-top:6px;
  padding-top:16px;
  border-top:1px solid var(--line) !important;
}
.woocommerce-order-received tfoot tr:last-child th,
.woocommerce-order-received tfoot tr:last-child td{
  font-family:var(--display);
  font-size:21px;
  font-weight:500;
  color:var(--marca);
}

/* ---------- Las direcciones ---------- */
.woocommerce-order-received .woocommerce-customer-details{
  margin-top:40px;
}
/* woocommerce.css le pone a .col2-set un ::before y un ::after de
   limpiar flotantes, y la sección de direcciones lleva esa clase. En
   una rejilla los dos cuentan como hijos: se quedaban con la primera y
   la última celda, y empujaban facturación a la derecha y envío a la
   fila de abajo. Mismo fallo que en el resguardo. */
.woocommerce-order-received .woocommerce-columns--addresses::before,
.woocommerce-order-received .woocommerce-columns--addresses::after{
  content:none !important;
  display:none !important;
}

/* Dos columnas exactas. Con auto-fit salían TRES pistas de 270 px en un
   hueco de 852, y las dos tarjetas se quedaban chicas y descentradas. */
.woocommerce-order-received .woocommerce-columns--addresses{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  /* Estiradas a la misma altura: la de facturación lleva correo y la de
     envío no, y dos tarjetas de alto distinto al lado se leen como un
     descuadre y no como dos contenidos distintos. */
  align-items:stretch;
  gap:20px;
  margin:0;
}
/* Con el body y el .woocommerce delante, y con !important en float y
   width: enfrente está .woocommerce .col2-set .col-1{float:left;
   width:47%}, tres clases, y el combinador ">" no suma especificidad.
   No estamos ajustando su maquetación: la sustituimos entera. */
.woocommerce-order-received .woocommerce .woocommerce-columns--addresses > div,
.woocommerce-order-received .woocommerce-columns--addresses > div{
  width:100% !important;
  float:none !important;
  margin:0 !important;
  padding:22px 24px 24px;
  border:1px solid var(--line);
  border-radius:var(--radio);
  background:var(--base-alt);
}

/* El título, rótulo y no titular: "Dirección de facturación" a 26 px
   parte en dos líneas y ocupa más que la propia dirección. */
.woocommerce-order-received .woocommerce .woocommerce-columns--addresses .woocommerce-column__title,
.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column__title{
  margin:0 0 14px;
  font-family:var(--ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--acento-ink);
}

/* Con el peso de woocommerce.css delante: su regla es
   .woocommerce .woocommerce-customer-details address —tres clases—, y
   le ponía a la dirección un borde y un relleno propios. Una caja
   dentro de otra caja. */
.woocommerce-order-received .woocommerce .woocommerce-customer-details address,
.woocommerce-order-received address{
  font-family:var(--ui);
  font-size:15.5px;
  font-style:normal;
  line-height:1.75;
  color:var(--marca);
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  /* Un correo largo no cabe en 250 px y se salía de la tarjeta. */
  overflow-wrap:anywhere;
}
.woocommerce-order-received address p{
  margin:10px 0 0;
  font-size:14.5px;
  color:var(--suave);
  overflow-wrap:anywhere;
}
/* Los iconos de teléfono y correo que trae WooCommerce, alineados con
   su texto en vez de flotando delante. */
.woocommerce-order-received address p::before{
  margin-right:7px;
  opacity:.65;
}

/* ---------- Móvil ---------- */
@media (max-width:640px){
  .woocommerce-order-received .woocommerce{ padding:0 18px 72px; }
  .woocommerce-order-received .woocommerce-columns--addresses{
    grid-template-columns:1fr;
  }
  .woocommerce-order-received tr.order_item{
    grid-template-columns:1fr;
    gap:12px;
  }
  .jwc-linea-foto{ width:72px;height:72px;margin-right:14px; }
  .woocommerce-order-received td.product-total{
    grid-column:1;
    padding-top:4px;
    border-top:1px solid var(--line);
    margin-top:2px;
  }
  /* En 280 px, etiqueta y valor lado a lado dejan el valor en palabras
     sueltas: la etiqueta pasa encima de su dato. */
  .jwc-piezas{ grid-template-columns:1fr; gap:0; }
  .jwc-piezas li{ display:block; margin-bottom:7px; }
  .jwc-pieza-k{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
  .jwc-pieza-v{ display:block; }
}


/* ===================================================================
   EL ENVÍO (octubre 2026)
   -------------------------------------------------------------------
   Tres cosas:
   · Cada forma de envío llega en tres piezas (nombre, plazo, precio)
     desde el snippet de FINALIZAR COMPRA, en vez de «Nombre: precio».
   · En el carrito se ve solo la marcada, con una nota debajo: la forma
     de envío se elige en el paso siguiente.
   · El pago en dos pasos (envío → pago) que monta pago.js. Todo eso va
     colgado de body.jwc-con-pasos, que pago.js pone al final y solo si
     lo ha montado entero: sin JavaScript, el pago se queda como estaba.
   =================================================================== */

/* ---------- Las tres piezas de cada forma de envío ---------- */
.woocommerce-cart .jwc-envio-nombre,
.woocommerce-checkout .jwc-envio-nombre{
  font-family:var(--ui) !important;
  font-weight:600;
  color:var(--marca);
}
.woocommerce-cart .jwc-envio-plazo,
.woocommerce-checkout .jwc-envio-plazo{
  display:block;
  font-family:var(--ui) !important;
  font-size:12.5px;
  font-weight:400;
  line-height:1.35;
  color:var(--suave);
}
.woocommerce-cart .jwc-envio-precio,
.woocommerce-checkout .jwc-envio-precio{
  font-family:var(--ui) !important;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--marca);
}
/* En las tablas de resumen, una debajo de otra y a la derecha. */
.woocommerce-cart .cart_totals .woocommerce-shipping-totals label,
.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-totals label{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
  text-align:right;
}

/* ---------- Carrito: solo la marcada, y la nota ---------- */
.woocommerce-cart .cart_totals:has(.jwc-envio-nota) #shipping_method li:has(input[type="radio"]:not(:checked)){
  display:none;
}
.woocommerce-cart .cart_totals:has(.jwc-envio-nota) #shipping_method input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
/* La calculadora de envío de WooCommerce («Cambiar dirección») sobra:
   la dirección se escribe en el paso siguiente. */
.woocommerce-cart .cart_totals:has(.jwc-envio-nota) .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals:has(.jwc-envio-nota) .woocommerce-shipping-calculator{
  display:none;
}
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals:has(+ tr.jwc-envio-nota) th,
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals:has(+ tr.jwc-envio-nota) td{
  border-bottom:0 !important;
  padding-bottom:4px !important;
}
.woocommerce-cart .cart_totals table.shop_table tr.jwc-envio-nota td{
  width:auto !important;
  padding-top:0 !important;
  text-align:right !important;
  font-family:var(--ui) !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  line-height:1.45;
  color:var(--suave) !important;
}

/* ===================================================================
   EL PAGO EN DOS PASOS
   =================================================================== */
.jwc-con-pasos #customer_details .jwc-etapa{
  display:grid;
  gap:20px;
}
.jwc-con-pasos #customer_details .jwc-etapa[hidden]{ display:none; }

.jwc-con-pasos .jwc-bloque{
  padding:28px 30px 30px;
  border:1px solid var(--line);
  border-radius:var(--radio);
  background:var(--base-alt);
}
.jwc-con-pasos .jwc-bloque-titulo{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 22px;
  font-family:var(--display) !important;
  font-size:21px;
  font-weight:500;
  line-height:1.2;
  color:var(--marca);
}
.jwc-con-pasos .jwc-bloque-titulo span{
  flex:0 0 auto;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--marca);
  color:var(--base);
  font-family:var(--ui) !important;
  font-size:13px;
  font-weight:600;
}

/* Correo y teléfono, juntos arriba y separados de la dirección. */
.jwc-con-pasos .jwc-contacto{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0 14px;
  margin-bottom:6px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.jwc-con-pasos .jwc-contacto .form-row{ width:auto !important; margin-right:0 !important; }
.jwc-con-pasos .jwc-etapa-1 .woocommerce-shipping-fields__field-wrapper{ padding-top:16px; }

/* Lo que quedó de las columnas de serie: sus títulos y la casilla de
   «enviar a otra dirección» (marcada por pago.js) no se enseñan. */
.jwc-con-pasos .jwc-resto .woocommerce-billing-fields:not(:has(.form-row)),
.jwc-con-pasos .jwc-resto .woocommerce-shipping-fields{
  display:none;
}
.jwc-con-pasos .jwc-resto .col-2{ margin-top:0; }
.jwc-con-pasos .jwc-resto #shipping_phone_field{ display:none; }
.jwc-con-pasos .jwc-resto:not(:has(.form-row:not(#shipping_phone_field))){ display:none; }

/* ---------- Las formas de envío, en tarjetas ---------- */
.jwc-con-pasos .jwc-metodos{
  display:grid;
  gap:10px;
}
.jwc-con-pasos button.jwc-metodo{
  display:grid !important;
  grid-template-columns:22px minmax(0, 1fr);
  gap:14px;
  align-items:center;
  width:100%;
  min-height:68px;
  margin:0 !important;
  padding:14px 18px !important;
  border:1px solid var(--line-fuerte) !important;
  border-radius:var(--radio) !important;
  background:#fff !important;
  color:var(--tinta) !important;
  font-family:var(--ui) !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.3;
  text-align:left;
  text-transform:none !important;
  letter-spacing:0 !important;
  white-space:normal;
  box-shadow:none;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.jwc-con-pasos button.jwc-metodo:hover{ border-color:var(--marca) !important; }
.jwc-con-pasos button.jwc-metodo.on{
  border-color:var(--marca) !important;
  box-shadow:inset 0 0 0 1px var(--marca);
}
.jwc-con-pasos button.jwc-metodo:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
}
.jwc-con-pasos .jwc-metodo-marca{
  width:22px; height:22px;
  border-radius:50%;
  border:1.5px solid var(--line-fuerte);
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.jwc-con-pasos .jwc-metodo.on .jwc-metodo-marca{
  border-color:var(--marca);
  box-shadow:inset 0 0 0 5px var(--marca);
}
.jwc-con-pasos .jwc-metodo-txt{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  column-gap:14px;
  row-gap:2px;
  align-items:center;
}
.jwc-con-pasos .jwc-metodo .jwc-envio-nombre{ grid-column:1; font-size:16px; }
.jwc-con-pasos .jwc-metodo .jwc-envio-plazo{ grid-column:1; font-size:13.5px; }
.jwc-con-pasos .jwc-metodo .jwc-envio-precio{
  grid-column:2;
  grid-row:1 / span 2;
  font-size:16px;
  white-space:nowrap;
}
.jwc-con-pasos .jwc-metodos.jwc-falta button.jwc-metodo{ border-color:#B3261E !important; }
.jwc-con-pasos .jwc-metodos-nota{
  margin:0;
  font-family:var(--ui) !important;
  font-size:14.5px;
  line-height:1.5;
  color:var(--suave);
}
.jwc-con-pasos .jwc-metodos-nota:empty{ display:none; }

/* ---------- Continuar al pago ---------- */
.jwc-con-pasos .jwc-etapa-pie{
  display:grid;
  gap:10px;
  justify-items:stretch;
}
.jwc-con-pasos button.jwc-continuar{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:56px;
  margin:0 !important;
  padding:0 24px !important;
  border:0 !important;
  border-radius:var(--radio) !important;
  background:var(--acento) !important;
  color:#fff !important;
  font-family:var(--ui) !important;
  font-size:16.5px !important;
  font-weight:600 !important;
  text-transform:none !important;
  letter-spacing:.01em !important;
  cursor:pointer;
  transition:background-color .18s ease, transform .1s ease;
}
.jwc-con-pasos button.jwc-continuar:hover{ background:var(--acento-ink) !important; }
.jwc-con-pasos button.jwc-continuar:active{ transform:scale(.99); }
.jwc-con-pasos button.jwc-continuar svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.jwc-con-pasos .jwc-etapa-nota{
  margin:0;
  text-align:center;
  font-family:var(--ui) !important;
  font-size:13px;
  color:var(--suave);
}

/* ---------- Paso de pago: la entrega, con «cambiar» ---------- */
.jwc-con-pasos .jwc-entrega-cab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.jwc-con-pasos .jwc-entrega .jwc-bloque-titulo{ margin:0; }
.jwc-con-pasos button.jwc-cambiar{
  padding:6px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--acento-ink) !important;
  font-family:var(--ui) !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  text-decoration:underline;
  text-underline-offset:3px;
  text-transform:none !important;
  cursor:pointer;
}
.jwc-con-pasos .jwc-entrega-dir span{
  display:block;
  font-family:var(--ui) !important;
  font-size:15.5px;
  line-height:1.5;
  color:var(--tinta);
}
.jwc-con-pasos .jwc-entrega-dir span:first-child{ font-weight:600; color:var(--marca); }
.jwc-con-pasos .jwc-entrega-metodo{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  column-gap:14px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.jwc-con-pasos .jwc-entrega-metodo .jwc-envio-plazo{ grid-column:1; }
.jwc-con-pasos .jwc-entrega-metodo .jwc-envio-precio{ grid-column:2; grid-row:1 / span 2; align-self:center; }
.jwc-con-pasos .jwc-entrega-metodo:empty{ display:none; }

/* ---------- La factura, a la misma dirección ---------- */
.jwc-con-pasos .jwc-misma{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--ui) !important;
  font-size:15.5px;
  color:var(--tinta);
  cursor:pointer;
}
.jwc-con-pasos .jwc-misma input{
  flex:0 0 auto;
  width:20px; height:20px;
  margin:0;
  accent-color:var(--marca);
}
.jwc-con-pasos .jwc-factura{ margin-top:22px; }
.jwc-con-pasos .jwc-factura[hidden]{ display:none; }

/* ---------- La tarjeta, solo en el paso de pago ---------- */
.jwc-con-pasos.jwc-etapa-envio #payment{ display:none !important; }

/* En el resumen de la derecha, solo la forma de envío elegida: se
   cambia en las tarjetas del paso de envío. */
.jwc-con-pasos .woocommerce-checkout-review-order-table #shipping_method li:has(input[type="radio"]:not(:checked)){
  display:none;
}
.jwc-con-pasos .woocommerce-checkout-review-order-table #shipping_method input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

@media (max-width:600px){
  .jwc-con-pasos .jwc-bloque{ padding:22px 18px 24px; }
  .jwc-con-pasos .jwc-contacto{ grid-template-columns:minmax(0, 1fr); }
  .jwc-con-pasos button.jwc-metodo{ padding:14px 14px !important; gap:12px; }
}

/* ===================================================================
   EL PASO DE ENVÍO, MÁS CORTO (octubre 2026)
   -------------------------------------------------------------------
   En el móvil «Continuar al pago» caía a 2.560 px (tres pantallas y
   media) y en ordenador a 1.870. Lo que se quita de en medio:
   · la cabecera: sin rótulo ni entradilla, título más pequeño;
   · el cupón, que pasa al paso de pago (también está en el carrito);
   · en el móvil, el resumen del pedido, que queda en una barra con el
     total (pago.js) y se abre al tocarla;
   · la dirección en rejilla: código postal y población juntos, «piso,
     puerta…» detrás de un enlace y, en España, la provincia sale sola
     del código postal;
   · en ordenador, «Continuar al pago» también bajo el resumen de la
     derecha, que acompaña al bajar.
   =================================================================== */

/* ---------- Cabecera corta (solo pago con envío) ---------- */
/* Con :has y no con la clase de pago.js, para que no dé un salto al
   montarse: .jwc-pasos-4 solo sale cuando hay una caja que enviar. */
.woocommerce-checkout .jwc-cabecera:has(.jwc-pasos-4){
  margin-bottom:28px;
  padding-bottom:22px;
}
.woocommerce-checkout .jwc-cabecera:has(.jwc-pasos-4) .jwc-lead{ display:none; }
.woocommerce-checkout .jwc-cabecera:has(.jwc-pasos-4) .jwc-rotulo{ margin-bottom:8px; }
.woocommerce-checkout .jwc-cabecera:has(.jwc-pasos-4) .jwc-titulo{ font-size:clamp(26px, 3.2vw, 34px); }
.woocommerce-checkout .jwc-cabecera:has(.jwc-pasos-4) .jwc-pasos{ margin-top:16px; }

/* ---------- El cupón, en el paso de pago ---------- */
.jwc-con-pasos.jwc-etapa-envio .woocommerce-form-coupon-toggle,
.jwc-con-pasos.jwc-etapa-envio form.checkout_coupon{ display:none !important; }

/* ---------- La dirección, en rejilla ---------- */
.jwc-con-pasos .jwc-etapa-1 .woocommerce-shipping-fields__field-wrapper{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:14px;
}
.jwc-con-pasos .jwc-etapa-1 .woocommerce-shipping-fields__field-wrapper::before,
.jwc-con-pasos .jwc-etapa-1 .woocommerce-shipping-fields__field-wrapper::after{ display:none; }
.jwc-con-pasos .jwc-etapa-1 .woocommerce-shipping-fields__field-wrapper > *{
  grid-column:1 / -1;
  order:20;
  width:auto !important;
  margin-right:0 !important;
  float:none !important;
}
/* Orden con `order`, no moviendo filas: WooCommerce las reordena él
   mismo cada vez que cambia el país. */
.jwc-con-pasos .jwc-etapa-1 #shipping_first_name_field{ order:1; grid-column:auto; }
.jwc-con-pasos .jwc-etapa-1 #shipping_last_name_field{ order:2; grid-column:auto; }
.jwc-con-pasos .jwc-etapa-1 #shipping_company_field{ order:3; }
.jwc-con-pasos .jwc-etapa-1 #shipping_address_1_field{ order:4; }
.jwc-con-pasos .jwc-etapa-1 #shipping_address_2_field{ order:5; }
.jwc-con-pasos .jwc-etapa-1 #shipping_postcode_field{ order:6; grid-column:auto; }
.jwc-con-pasos .jwc-etapa-1 #shipping_city_field{ order:7; grid-column:auto; }
.jwc-con-pasos .jwc-etapa-1 #shipping_country_field{ order:8; }
.jwc-con-pasos .jwc-etapa-1 #shipping_state_field{ order:9; }

.jwc-con-pasos .jwc-etapa-1 .form-row{ margin-bottom:12px; gap:5px; }
.jwc-con-pasos .jwc-bloque-titulo{ margin-bottom:16px; }
.jwc-con-pasos .jwc-etapa-1 .woocommerce-shipping-fields__field-wrapper{ padding-top:12px; }

/* Piso y provincia, plegados (pago.js) */
.jwc-con-pasos .jwc-etapa-1 #shipping_address_2_field.jwc-oculta,
.jwc-con-pasos .jwc-etapa-1 #shipping_state_field.jwc-auto{ display:none !important; }
.jwc-con-pasos button.jwc-mas-dir{
  align-self:flex-start;
  margin:2px 0 0 !important;
  padding:2px 0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--acento-ink) !important;
  font-family:var(--ui) !important;
  font-size:14px !important;
  font-weight:600 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

/* ---------- Formas de envío, más bajas ---------- */
.jwc-con-pasos button.jwc-metodo{ min-height:58px; padding:11px 16px !important; }
.jwc-con-pasos .jwc-metodos{ gap:8px; }

/* ---------- La barra del resumen (móvil) ---------- */
.jwc-con-pasos button.jwc-resumen-barra{ display:none !important; }

/* ---------- Continuar, también en la columna de la derecha ---------- */
.jwc-con-pasos #order_review button.jwc-continuar-lado{ margin-top:16px !important; }
.jwc-con-pasos.jwc-etapa-pago #order_review button.jwc-continuar-lado{ display:none !important; }

@media (max-width:1000px){
  .jwc-con-pasos #order_review button.jwc-continuar-lado{ display:none !important; }

  .jwc-con-pasos button.jwc-resumen-barra{
    order:-2;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto 20px;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:54px;
    margin:0 !important;
    padding:0 18px !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radio) !important;
    background:var(--base-alt) !important;
    color:var(--marca) !important;
    font-family:var(--ui) !important;
    font-size:15px !important;
    font-weight:600 !important;
    text-align:left;
    text-transform:none !important;
    letter-spacing:0 !important;
    cursor:pointer;
  }
  .jwc-con-pasos .jwc-rb-total{ font-variant-numeric:tabular-nums; }
  .jwc-con-pasos button.jwc-resumen-barra svg{
    width:20px; height:20px;
    fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
    transition:transform .2s ease;
  }
  .jwc-con-pasos.jwc-resumen-abierto button.jwc-resumen-barra svg{ transform:rotate(180deg); }
  .jwc-con-pasos.jwc-resumen-abierto button.jwc-resumen-barra{
    border-radius:var(--radio) var(--radio) 0 0 !important;
  }

  /* Cerrado: ni título ni tabla. Abierto: la tabla, pegada a la barra. */
  .jwc-con-pasos #order_review .jwc-caja-titulo{ display:none !important; }
  .jwc-con-pasos:not(.jwc-resumen-abierto) .woocommerce-checkout-review-order-table{ display:none !important; }
  .jwc-con-pasos form.checkout{ row-gap:20px; }
  .jwc-con-pasos.jwc-resumen-abierto .woocommerce-checkout-review-order-table{ margin-top:-20px !important; }
}

@media (max-width:600px){
  .woocommerce-checkout .jwc-cabecera:has(.jwc-pasos-4) .jwc-rotulo{ display:none; }
  .woocommerce-checkout .jwc-cabecera:has(.jwc-pasos-4){ margin-bottom:20px; padding-bottom:16px; }
  /* Nombre y apellidos, a lo ancho (un apellido compuesto no cabe en
     150 px); código postal y población sí van juntos. */
  .jwc-con-pasos .jwc-etapa-1 #shipping_first_name_field,
  .jwc-con-pasos .jwc-etapa-1 #shipping_last_name_field{ grid-column:1 / -1; }
  .jwc-con-pasos .jwc-bloque{ padding:20px 16px 20px; }
}

/* ===================================================================
   EN INGLÉS (octubre 2026)
   Los textos que pone esta hoja con `content` no los ve TranslatePress:
   en /en/ (html lang="en-GB") van en inglés aquí.
   =================================================================== */
html[lang^="en"] .woocommerce-cart td.product-price::after{ content:" each"; }
html[lang^="en"] .woocommerce-cart .coupon::before{ content:"Have a discount code?" !important; }

/* Los cuatro pasos, en una sola línea en el móvil (en los dos idiomas
   «Confirmación / Confirmation» caía a una segunda línea): sin tramos
   entre pasos y un poco más pequeños. */
@media (max-width:600px){
  body .jwc-pasos.jwc-pasos-4{ font-size:11px; }
  body .jwc-pasos.jwc-pasos-4 li{ gap:4px; }
  body .jwc-pasos.jwc-pasos-4 li + li{ margin-left:9px; }
  body .jwc-pasos.jwc-pasos-4 li:not(:last-child){ padding-right:0; }
  body .jwc-pasos.jwc-pasos-4 li:not(:last-child)::after{ display:none; }
  body .jwc-pasos.jwc-pasos-4 li::before{ width:20px; height:20px; font-size:10.5px; }
}

/* Nombre, plazo y precio del envío, siempre cada uno en su línea. La
   etiqueta del resumen tenía que ser inline-flex en columna, pero otra
   regla la deja en `inline`: con plazo no se notaba (el plazo ya es un
   bloque) y SIN plazo —las formas de Packlink que no están en las fichas
   del snippet— salía «6 días laborables14,68 €», todo junto. Con las
   piezas en bloque da igual cómo venga la etiqueta. */
.woocommerce-cart .cart_totals .woocommerce-shipping-totals label,
.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-totals label{
  display:inline-flex !important;
  flex-direction:column;
  align-items:flex-end;
}
.woocommerce-cart .jwc-envio-nombre,
.woocommerce-cart .jwc-envio-plazo,
.woocommerce-cart .jwc-envio-precio,
.woocommerce-checkout .jwc-envio-nombre,
.woocommerce-checkout .jwc-envio-plazo,
.woocommerce-checkout .jwc-envio-precio{ display:block; }

/* ===================================================================
   EL CUPÓN, AL PAGAR (octubre 2026)
   El código de descuento sale del carrito y va al final del pago, justo
   encima de la tarjeta (la caja la pone el snippet de FINALIZAR COMPRA).
   =================================================================== */

/* Carrito: el cupón VUELVE al carrito (11-10, a petición de Gonzalo).
   Aquí estaban las dos reglas que lo escondían:
     .woocommerce-cart td.actions .coupon{ display:none !important; }
     .jwc-carrito-auto .woocommerce-cart-form tr:has(td.actions){ display:none !important; }
   La caja del pago se queda también, por si alguien llega sin ponerlo. */

/* Pago: la caja */
.woocommerce-checkout .jwc-cupon{
  margin:18px 0;
  padding:16px 18px 18px;
  border:1px dashed var(--line-fuerte);
  border-radius:var(--radio);
}
.woocommerce-checkout .jwc-cupon-titulo{
  display:block;
  margin:0 0 10px;
  font-family:var(--ui) !important;
  font-size:13.5px;
  font-weight:600;
  color:var(--suave);
}
.woocommerce-checkout .jwc-cupon-fila{
  display:flex;
  gap:10px;
}
.woocommerce-checkout .jwc-cupon-fila input#jwc_cupon{
  flex:1 1 auto;
  min-width:0;
  height:46px;
  margin:0;
  padding:0 14px;
  border:1px solid var(--line-fuerte);
  border-radius:var(--radio);
  background:#fff;
  font-family:var(--ui) !important;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--tinta);
}
.woocommerce-checkout .jwc-cupon-fila input#jwc_cupon::placeholder{
  text-transform:none;
  letter-spacing:0;
}
.woocommerce-checkout button.jwc-cupon-aplicar{
  flex:0 0 auto;
  margin:0 !important;
  padding:0 20px !important;
  min-height:46px;
  border:1px solid var(--marca) !important;
  border-radius:var(--radio) !important;
  background-color:var(--marca) !important;
  color:var(--base) !important;
  font-family:var(--ui) !important;
  font-size:14px !important;
  font-weight:600 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  cursor:pointer;
}
.woocommerce-checkout button.jwc-cupon-aplicar:hover{
  background-color:var(--secundario) !important;
  border-color:var(--secundario) !important;
}
/* Lo que contesta WooCommerce («Código aplicado», «no existe»…) */
.woocommerce-checkout .jwc-cupon-aviso:empty{ display:none; }
.woocommerce-checkout .jwc-cupon-aviso{ margin-top:10px; }
.woocommerce-checkout .jwc-cupon-aviso > *{
  margin:0 !important;
  padding:10px 12px !important;
  border:0 !important;
  border-radius:var(--radio);
  font-family:var(--ui) !important;
  font-size:13.5px !important;
  line-height:1.45;
  list-style:none;
}
.woocommerce-checkout .jwc-cupon-aviso > *::before{ display:none !important; }
.woocommerce-checkout .jwc-cupon-aviso .woocommerce-message,
.woocommerce-checkout .jwc-cupon-aviso .is-success{
  background:color-mix(in srgb, #2E7D32 9%, #fff) !important;
  color:#1B5E20 !important;
}
.woocommerce-checkout .jwc-cupon-aviso .woocommerce-error,
.woocommerce-checkout .jwc-cupon-aviso .is-error,
.woocommerce-checkout .jwc-cupon-aviso .jwc-cupon-mal{
  background:color-mix(in srgb, #B3261E 7%, #fff) !important;
  color:#8C1D18 !important;
}
.woocommerce-checkout .jwc-cupon-aviso li{ margin:0; padding:0; }
.woocommerce-checkout .jwc-cupon-aviso *{ font-family:var(--ui) !important; font-size:13.5px !important; }

/* Con envío, solo en el paso de pago, como la tarjeta. */
.jwc-con-pasos.jwc-etapa-envio .jwc-cupon{ display:none !important; }

/* En una columna (#order_review en display:contents) va justo antes del
   pago: mismo `order` que #payment y delante en el HTML. */
@media (max-width:1000px){
  .woocommerce-checkout .jwc-cupon{ order:1; margin:0; }
}

/* ===================================================================
   SIN PRECIO DE ENVÍO HASTA TENER LA DIRECCIÓN (octubre 2026)
   pago.js pone body.jwc-sin-direccion mientras falta la dirección o se
   está calculando su precio: el resumen enseña «Se calcula con tu
   dirección» y «29,99 € + envío» en vez del precio provisional.
   =================================================================== */
.jwc-con-pasos .jwc-provisional{ display:none; }
.jwc-con-pasos.jwc-sin-direccion .woocommerce-checkout-review-order-table .woocommerce-shipping-totals td > :not(.jwc-provisional),
.jwc-con-pasos.jwc-sin-direccion .woocommerce-checkout-review-order-table .order-total td > :not(.jwc-provisional){
  display:none !important;
}
.jwc-con-pasos.jwc-sin-direccion .jwc-provisional{ display:inline; }
.jwc-con-pasos.jwc-sin-direccion .woocommerce-shipping-totals .jwc-provisional{
  font-family:var(--ui) !important;
  font-size:13px;
  font-weight:400;
  color:var(--suave);
}
.jwc-con-pasos .jwc-provisional small,
.jwc-con-pasos .jwc-rb-total small{
  font-family:var(--ui) !important;
  font-size:12.5px;
  font-weight:400;
  color:var(--suave);
}
/* La nota en el sitio de las tarjetas: con aire, y con un pulso suave
   mientras se calcula. */
.jwc-con-pasos .jwc-bloque:has(.jwc-metodos) .jwc-metodos:empty{ display:none; }
.jwc-con-pasos .jwc-bloque:has(.jwc-metodos) .jwc-metodos:empty + .jwc-metodos-nota{
  padding:16px 18px;
  border:1px dashed var(--line-fuerte);
  border-radius:var(--radio);
}
.jwc-con-pasos .jwc-bloque.jwc-calculando .jwc-metodos-nota{
  animation:jwc-pulso 1.2s ease-in-out infinite;
}
@keyframes jwc-pulso{ 50%{ opacity:.45; } }
@media (prefers-reduced-motion: reduce){
  .jwc-con-pasos .jwc-bloque.jwc-calculando .jwc-metodos-nota{ animation:none; }
}

/* Carrito con envío: sin precio de envío (lo quita el snippet) */
.woocommerce-cart .cart_totals .jwc-envio-pendiente{ font-size:13.5px; }
.woocommerce-cart .cart_totals .jwc-mas-envio{
  font-family:var(--ui) !important;
  font-size:13px;
  font-weight:400;
  color:var(--suave);
  white-space:nowrap;
}

/* Mientras se guarda una cantidad, la tabla ya no se bloquea: los
   botones − / + siguen respondiendo (carrito.js encola el número final)
   y solo se atenúa el importe que se está recalculando. Antes un clic
   durante el guardado (~1 s) se perdía. */
.woocommerce-cart form.jwc-actualizando .shop_table{
  opacity:1;
  pointer-events:auto;
}
.woocommerce-cart form.jwc-actualizando .shop_table .product-subtotal,
.woocommerce-cart form.jwc-actualizando .shop_table td.product-subtotal{
  opacity:.45;
  transition:opacity .15s ease;
}

/* ===================================================================
   AIRE BAJO EL MENÚ DE LA WEB
   El tema esconde su .page-header y la cabecera de aquí empezaba en
   el borde mismo de la barra del menú: el rótulo «Compra segura» o
   «Tu carrito» quedaba pegado a la línea. Mismo hueco que Preguntas
   frecuentes (48 px) en el ordenador; algo menos en el móvil, donde
   cada píxel del paso de envío cuenta.
   =================================================================== */
.woocommerce-checkout .jwc-cabecera,
.woocommerce-cart .jwc-cabecera{
  padding-top:clamp(28px, 4vw, 48px);
}

/* ===================================================================
   DIRECCIÓN A LA QUE NO ENVIAMOS (Canarias, Ceuta, Melilla, un país sin
   servicio…). pago.js cambia el «No hay opciones de métodos de envío…»
   de WooCommerce por un aviso con el sitio y el WhatsApp, y en el
   resumen deja solo «No disponible».
   =================================================================== */
.jwc-con-pasos .jwc-bloque.jwc-no-llega .jwc-metodos:empty + .jwc-metodos-nota{
  border-style:solid;
  border-color:var(--acento, #DF6E34);
  background:rgba(223,110,52,.07);
  color:var(--tinta);
}
.jwc-con-pasos .jwc-bloque.jwc-no-llega .jwc-metodos-nota strong,
.jwc-con-pasos .jwc-bloque.jwc-no-llega .jwc-metodos-nota a,
.jwc-con-pasos .jwc-bloque.jwc-no-llega .jwc-metodos-nota span{ font-family:var(--ui) !important; }
.jwc-con-pasos .jwc-bloque.jwc-no-llega .jwc-metodos-nota strong{
  display:block;
  margin-bottom:2px;
  font-weight:600;
  color:var(--marca);
}
.jwc-con-pasos .jwc-bloque.jwc-no-llega .jwc-metodos-nota a{
  color:var(--marca);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.woocommerce-checkout .woocommerce-shipping-totals .jwc-sin-envio{
  white-space:nowrap;
  font-family:var(--ui) !important;
  font-size:13.5px;
  color:var(--suave);
}
/* El nombre del producto se queda con el 60 % del ancho (lo que ya tenía
   con las tarifas normales): un texto largo en los totales de la columna
   derecha ya no lo deja en una tira estrecha. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-name{ width:60%; }

/* ===================================================================
   SOLO SE PAGA EN EL PASO DE PAGO
   Los botones exprés de WooPayments (Apple Pay, Google Pay…) salían
   arriba del paso de envío: se podía pagar sin haber visto la dirección
   ni el precio del envío. En el carrito y en las fichas de producto
   están desactivados en los ajustes de WooPayments (11-10); aquí se
   esconden mientras dura el envío y aparecen al llegar al pago. No con
   display:none: el elemento de Stripe se monta al cargar y necesita
   su ancho para dibujar los botones.
   =================================================================== */
body.jwc-etapa-envio .wcpay-express-checkout-wrapper,
body.jwc-etapa-envio #wcpay-express-checkout-button-separator{
  position:absolute !important;
  left:-10000px !important;
  width:520px;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Código postal con forma rara (p. ej. «1250 096» o 4 cifras en España):
   pago.js dice qué corregir en la caja de las formas de envío. */
.jwc-con-pasos .jwc-bloque.jwc-revisa-cp .jwc-metodos:empty + .jwc-metodos-nota{
  border-style:solid;
  border-color:var(--acento, #D27541);
  color:var(--tinta);
}

/* ============================================================
   MÓVIL: más ancho para la tarjeta (22-10-2026)
   ------------------------------------------------------------
   En un móvil de 375 px el campo de la tarjeta de Stripe se quedaba en
   190 px: cinco cajas una dentro de otra, cada una con su margen. Aquí
   se recortan los márgenes laterales de las de dentro (la lista de
   métodos y la caja del método) y el campo pasa a ~250 px.
   El «+ Añadir piso, puerta o escalera» medía 26 px de alto: poco para
   un dedo. Se le da zona de toque sin cambiar cómo se ve.
   ============================================================ */
@media (max-width:600px){
  .woocommerce-checkout #payment .wc_payment_methods{ padding-left:8px !important; padding-right:8px !important; }
  /* !important: WooCommerce le pone el relleno con un selector más fuerte. */
  .woocommerce-checkout #payment .payment_box{ padding-left:4px !important; padding-right:4px !important; }
  .woocommerce-checkout #payment .wc-payment-form{ padding:0 !important; margin:0 !important; border:0 !important; }
  .jwc-con-pasos button.jwc-mas-dir{ min-height:40px; }
}

/* ============================================================
   CARRITO hasta 768 px: el texto de la línea, junto a la foto (22-10-2026)
   ------------------------------------------------------------
   woocommerce-smallscreen.css alinea a la derecha TODAS las celdas
   (`table.shop_table_responsive tr td{text-align:right !important}`).
   En la tablet el nombre del kit y sus piezas se iban al borde derecho
   y los rótulos («Cierre:», «Cadena:»…) se quedaban a la izquierda, con
   un hueco de 260 px en medio. Nombre, piezas y precio van ahora a la
   izquierda, pegados a la foto; el subtotal sigue a la derecha.
   ============================================================ */
@media (max-width:768px){
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price{ text-align:left !important; }
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name .variation dt,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name .variation dd{ text-align:left !important; }
}