/* ============================================================
   AIRE COLOMBIANO — WooCommerce
   Catálogo, ficha de producto, botones, insignias y estados.
   Ver manual §05 (retícula), §06 (fotografía), §07 (componentes).
   ============================================================ */

/* ============================================================
   1 · RETÍCULA DEL CATÁLOGO
   Dos fichas por fila en móvil, no una: la clienta compara
   cortes y lavados y necesita ver dos a la vez.
   ============================================================ */

.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ac-e-6) var(--ac-e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ac-e-8) var(--ac-e-6);
  }

  /* Si se piden menos de 3, se respeta también en tableta. */
  .woocommerce ul.products.columns-1,
  ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); }

  .woocommerce ul.products.columns-2,
  ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A partir de escritorio, el número de columnas lo manda la clase
   columns-N que ponen tanto el archivo de WooCommerce como el widget
   Products de Elementor.

   Antes esto fijaba 4 columnas para cualquier ul.products del sitio, así
   que ignoraba lo que se pidiera en el widget: una selección de 6 fichas
   a 3 columnas salía 4 + 2. */
@media (min-width: 1024px) {
  .woocommerce ul.products,
  ul.products {
    gap: var(--ac-e-12) var(--ac-e-8);
  }

  .woocommerce ul.products.columns-1,
  ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); }

  .woocommerce ul.products.columns-2,
  ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .woocommerce ul.products.columns-3,
  ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .woocommerce ul.products.columns-4,
  ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .woocommerce ul.products.columns-5,
  ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .woocommerce ul.products.columns-6,
  ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* Listados sueltos que no traen la clase: 4, como hasta ahora. */
  .woocommerce ul.products:not([class*="columns-"]),
  ul.products:not([class*="columns-"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* WooCommerce reparte anchos con float y clases first/last.
   Con grid sobran las dos cosas. */
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* WooCommerce pone un clearfix con ::before y ::after sobre el propio <ul>,
   herencia de cuando la retícula se hacía con floats. En un contenedor grid
   esos pseudo-elementos cuentan como celdas: dejan la primera columna vacía
   y empujan todas las fichas un lugar a la derecha. Hay que anularlos. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after,
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
  content: none;
  display: none;
}


/* ============================================================
   2 · FICHA DEL CATÁLOGO
   Orden fijo: foto, referencia y corte, nombre en Fraunces,
   descripción de una línea, precio, corrido de tallas.
   El precio nunca va encima de la foto.
   ============================================================ */

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  gap: var(--ac-e-2);
  text-align: left;
  position: relative;
}

/* La foto: sobre Arena, sin redondear jamás. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--ac-r-0);
  background: var(--ac-fondo-alt);
  margin: 0 0 var(--ac-e-3);
  transition: opacity var(--ac-transicion);
}

.woocommerce ul.products li.product a:hover img {
  opacity: 0.92;
}

/* Referencia y corte, en etiqueta. Se rellena con un campo
   personalizado o el SKU; ver Fase 1. */
.ac-ficha-meta {
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-etiqueta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-texto-suave);
  line-height: 1.2;
}

/* Todo el contenido de la ficha —foto, nombre, precio— vive dentro de un
   <a>. Sin esto hereda el color de enlace de Hello Elementor, un rosa
   (#c36) que no está en el manual. */
.woocommerce ul.products li.product a {
  color: inherit;
  text-decoration: none;
}

/* El nombre de la referencia va en Fraunces. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ac-fuente-display);
  font-size: var(--ac-t-titulo-2);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ac-texto);
  padding: 0;
  margin: 0;
}

.ac-ficha-descripcion {
  font-size: var(--ac-t-cuerpo-s);
  color: var(--ac-texto-suave);
  line-height: 1.5;
  margin: 0;
}

.woocommerce ul.products li.product .price {
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo);
  font-weight: 600;
  color: var(--ac-texto);
  margin: var(--ac-e-1) 0 0;
}

.woocommerce ul.products li.product .price del {
  color: var(--ac-texto-suave);
  font-weight: 400;
  margin-right: var(--ac-e-2);
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 600;
}

/* Corrido de tallas bajo el precio. */
.ac-corrido {
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo-s);
  font-variant-numeric: tabular-nums;
  color: var(--ac-texto-suave);
  letter-spacing: 0.02em;
}

/* En el catálogo el botón compite con la foto. Se va: la
   clienta tiene que elegir talla antes de añadir nada. */
.woocommerce ul.products li.product .button {
  display: none;
}


/* ============================================================
   3 · INSIGNIAS
   Máximo dos sobre una foto. Arriba a la izquierda, a 10px
   del borde. «Levanta cola» es la única que puede ir en Hilo,
   porque es el sello de la marca, no un estado.
   ============================================================ */

.ac-insignias {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ac-e-1);
  pointer-events: none;
}

.ac-insignia,
.woocommerce span.onsale {
  display: inline-block;
  padding: 5px var(--ac-e-2);
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-etiqueta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: var(--ac-r-s);
  background: var(--ac-superficie);
  color: var(--ac-texto);
  border: 1px solid var(--ac-borde);
}

/* El sello de marca. Único uso del Hilo como fondo. */
.ac-insignia--levanta {
  background: var(--ac-acento);
  border-color: var(--ac-acento);
  color: var(--ac-indigo-900);
}

.ac-insignia--nuevo {
  background: var(--ac-primario);
  border-color: var(--ac-primario);
  color: var(--ac-texto-inverso);
}

.ac-insignia--talla-grande {
  background: var(--ac-azul-nube);
  border-color: var(--ac-azul-claro);
  color: var(--ac-indigo);
}

/* Estado: nunca en Hilo. */
.ac-insignia--disponible { color: var(--ac-exito); border-color: currentColor; }
.ac-insignia--ultimas    { color: var(--ac-aviso); border-color: currentColor; }
.ac-insignia--agotado    { color: var(--ac-alerta); border-color: currentColor; }

/* WooCommerce coloca su «onsale» como círculo flotante a la
   derecha. Se recoloca junto a las nuestras. */
.woocommerce span.onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border-radius: var(--ac-r-s);
  background: var(--ac-primario);
  color: var(--ac-texto-inverso);
}


/* ============================================================
   4 · BOTONES
   Un solo primario por pantalla. El primario lleva el arco en
   la esquina inferior izquierda; los demás, 4px parejos.
   Altura mínima táctil: 44px.
   ============================================================ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.ac-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ac-e-2);
  min-height: 44px;
  padding: var(--ac-e-3) var(--ac-e-6);
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo-s);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--ac-borde-fuerte);
  border-radius: var(--ac-r-s);
  background: transparent;
  color: var(--ac-primario);
  transition: background var(--ac-transicion), color var(--ac-transicion),
              border-color var(--ac-transicion);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.ac-boton:hover {
  background: var(--ac-superficie-hund);
  color: var(--ac-primario-hover);
}

/* Primario: índigo lleno y el arco. Solo aquí y en los marcos
   de campaña — en ningún otro sitio. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.ac-boton--primario {
  background: var(--ac-primario);
  border-color: var(--ac-primario);
  color: var(--ac-texto-inverso);
  border-radius: var(--ac-r-arco);
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.ac-boton--primario:hover {
  background: var(--ac-primario-hover);
  border-color: var(--ac-primario-hover);
  color: var(--ac-texto-inverso);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.ac-boton:disabled {
  background: var(--ac-superficie-hund);
  border-color: var(--ac-borde);
  color: var(--ac-texto-suave);
  cursor: not-allowed;
  opacity: 1;
}


/* ============================================================
   5 · FICHA DE PRODUCTO
   ============================================================ */

.woocommerce div.product .product_title {
  font-family: var(--ac-fuente-display);
  font-size: var(--ac-t-display-l);
  font-weight: 400;
  line-height: 1.06;
  margin: 0 0 var(--ac-e-2);
}

.woocommerce div.product .woocommerce-product-rating {
  margin-bottom: var(--ac-e-4);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-titulo-2);
  font-weight: 600;
  color: var(--ac-texto);
  margin: var(--ac-e-4) 0;
}

/* Galería: fotos sin redondear, sobre Arena. */
.woocommerce div.product div.images img {
  border-radius: var(--ac-r-0);
  background: var(--ac-fondo-alt);
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  opacity: 0.55;
  transition: opacity var(--ac-transicion);
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
  opacity: 1;
}

/* Descripción corta: una línea, sin adjetivos vacíos. */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--ac-t-cuerpo);
  color: var(--ac-texto-suave);
  max-width: 52ch;
}

/* Pestañas */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--ac-e-6);
  border-bottom: 1px solid var(--ac-borde);
  display: flex;
  gap: var(--ac-e-6);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--ac-e-3) 0;
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-etiqueta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-texto-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--ac-texto);
  border-bottom-color: var(--ac-acento);
}


/* ============================================================
   6 · SELECTOR DE TALLA
   Las tallas agotadas se muestran tachadas, nunca se ocultan:
   la clienta necesita saber que existen para volver.
   assets/js/tallas.js convierte el <select> en píldoras; si el JS
   no carga, el desplegable sigue funcionando con estilo de marca.
   ============================================================ */

/* Hello Elementor raya las filas de las tablas en gris. La tabla de
   variaciones no es una tabla de datos: el fondo sobra. */
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  background: transparent !important;
}

.woocommerce div.product form.cart table.variations {
  margin-bottom: var(--ac-e-4);
  border: 0;
}

.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  border: 0;
  padding: 0 0 var(--ac-e-3);
  display: block;
}

.woocommerce div.product form.cart table.variations th.label label {
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-etiqueta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-texto-suave);
}

/* Píldoras.

   El widget Add To Cart de Elementor pinta con el estilo del botón de
   compra todo <button> que haya dentro del formulario, y las píldoras son
   <button>: salían todas rellenas de índigo, así que no se distinguía cuál
   estaba elegida. Sus reglas llevan el id del elemento delante y pesan más
   que cualquier clase, de ahí el !important en cada propiedad que Elementor
   también toca. */
.ac-tallas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

form.cart .ac-tallas .ac-talla {
  min-width: 48px !important;
  min-height: 44px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 var(--ac-e-3) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--ac-fuente-texto) !important;
  font-size: var(--ac-t-cuerpo-s) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-variant-numeric: tabular-nums;
  color: var(--ac-texto) !important;
  background: var(--ac-superficie) !important;
  border: 1px solid var(--ac-borde) !important;
  border-radius: var(--ac-r-pildora) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color var(--ac-transicion), background var(--ac-transicion), color var(--ac-transicion);
}

form.cart .ac-tallas .ac-talla:hover {
  border-color: var(--ac-borde-fuerte) !important;
  background: var(--ac-superficie) !important;
  color: var(--ac-texto) !important;
}

form.cart .ac-tallas .ac-talla[aria-pressed="true"],
form.cart .ac-tallas .ac-talla[aria-pressed="true"]:hover {
  background: var(--ac-primario) !important;
  border-color: var(--ac-primario) !important;
  color: var(--ac-texto-inverso) !important;
}

form.cart .ac-tallas .ac-talla:focus-visible {
  outline: 2px solid var(--ac-primario);
  outline-offset: 2px;
}

form.cart .ac-tallas .ac-talla[disabled],
form.cart .ac-tallas .ac-talla[disabled]:hover {
  color: var(--ac-texto-suave) !important;
  background: var(--ac-superficie-hund) !important;
  border-color: var(--ac-borde) !important;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* El <select> sigue en el formulario, porque es lo que se envía al
   carrito, pero ya no se ve: lo sustituyen las píldoras. */
.ac-select-oculto {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* «Limpiar» sobra: se deselecciona pulsando otra vez la talla elegida. */
.ac-con-pildoras .reset_variations {
  display: none !important;
}

/* Debajo va siempre el enlace a la guía de medidas. */
.ac-guia-tallas {
  display: inline-block;
  margin-top: var(--ac-e-3);
  font-size: var(--ac-t-cuerpo-s);
  color: var(--ac-acento-texto);
}


/* ============================================================
   7 · MENSAJES DE ESTADO
   El acento nunca se usa para estado.
   ============================================================ */

/* El aviso de «se ha añadido a tu carrito» lo imprime WooCommerce fuera
   del envoltorio .woocommerce cuando la ficha es una plantilla de
   Elementor, así que cada regla se escribe también sin ese prefijo. Sin
   eso salía como una banda blanca de lado a lado con dos rayas grises. */
.woocommerce-notices-wrapper {
  padding: 0 var(--ac-e-6);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ac-e-3);
  width: 100%;
  max-width: 1180px;
  padding: var(--ac-e-4);
  margin: var(--ac-e-4) auto var(--ac-e-6);
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo-s);
  color: var(--ac-texto);
  background: var(--ac-fondo-alt);
  border: 0;
  border-left: 3px solid var(--ac-borde-fuerte);
  border-radius: var(--ac-r-s);
  list-style: none;
}

/* El enlace de la derecha —«Ver carrito»— es una salida, no la acción
   principal: la clienta acaba de añadir algo y lo normal es que siga
   mirando. Va como botón secundario y empujado al final de la línea. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
  margin-left: auto;
  min-height: 40px;
  padding: 0 var(--ac-e-4);
  display: inline-flex;
  align-items: center;
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo-s);
  font-weight: 600;
  color: var(--ac-texto);
  background: transparent;
  border: 1px solid var(--ac-borde-fuerte);
  border-radius: var(--ac-r-s);
}

.woocommerce-message .button:hover,
.woocommerce .woocommerce-message .button:hover {
  background: var(--ac-primario);
  border-color: var(--ac-primario);
  color: var(--ac-texto-inverso);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
  content: none;
}

.woocommerce-message,
.woocommerce .woocommerce-message { border-left-color: var(--ac-exito); }

.woocommerce-info,
.woocommerce .woocommerce-info    { border-left-color: var(--ac-azul); }

.woocommerce-error,
.woocommerce .woocommerce-error   { border-left-color: var(--ac-alerta); }

.woocommerce .stock {
  font-size: var(--ac-t-cuerpo-s);
  font-weight: 600;
}

.woocommerce .stock.in-stock                { color: var(--ac-exito); }
.woocommerce .stock.available-on-backorder  { color: var(--ac-aviso); }
.woocommerce .stock.out-of-stock            { color: var(--ac-alerta); }


/* ============================================================
   8 · CARRITO Y CHECKOUT
   ============================================================ */

.woocommerce table.shop_table {
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-r-m);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--ac-superficie);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-color: var(--ac-borde);
}

.woocommerce table.shop_table img {
  border-radius: var(--ac-r-0);
  background: var(--ac-fondo-alt);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
  font-family: var(--ac-fuente-display);
  font-weight: 400;
}

.woocommerce form .form-row {
  padding: 0;
  margin: 0 0 var(--ac-e-4);
}

.woocommerce form .form-row label {
  font-size: var(--ac-t-cuerpo-s);
  font-weight: 600;
}

.woocommerce-checkout #payment {
  background: var(--ac-fondo-alt);
  border-radius: var(--ac-r-m);
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--ac-superficie);
  border-radius: var(--ac-r-s);
  font-size: var(--ac-t-cuerpo-s);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--ac-superficie);
}


/* ============================================================
   9 · MIGA Y ORDENACIÓN
   ============================================================ */

.woocommerce .woocommerce-breadcrumb {
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-etiqueta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-texto-suave);
  margin-bottom: var(--ac-e-6);
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--ac-texto-suave);
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--ac-texto);
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  font-size: var(--ac-t-cuerpo-s);
  color: var(--ac-texto-suave);
}


/* ============================================================
   10 · CHIPS DE CORTE
   El corte es el primer filtro, siempre: antes que color,
   que precio y que talla.
   ============================================================ */

.ac-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-e-2);
  margin: 0 0 var(--ac-e-8);
  padding: 0;
  list-style: none;
}

.ac-chip {
  min-height: 44px;
  padding: 0 var(--ac-e-4);
  display: inline-flex;
  align-items: center;
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo-s);
  font-weight: 600;
  color: var(--ac-texto);
  background: var(--ac-superficie);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-r-s);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ac-transicion), background var(--ac-transicion);
}

.ac-chip:hover {
  border-color: var(--ac-borde-fuerte);
  color: var(--ac-texto);
}

.ac-chip[aria-pressed="true"],
.ac-chip.is-activo {
  background: var(--ac-primario);
  border-color: var(--ac-primario);
  color: var(--ac-texto-inverso);
}


/* ============================================================
   10 · CARRITO Y PAGO EN BLOQUES
   WooCommerce ya no dibuja estas dos páginas con las plantillas
   clásicas, sino con bloques que traen sus propias clases
   (wc-block-…) y su propio estilo: botones gris carbón, tipografía
   del navegador y campos con esquinas redondeadas. Nada de eso
   viene del tema, así que hay que vestirlo aparte.

   Es la pantalla donde se decide la compra: si aquí el botón no es
   el mismo azul que la clienta ha visto en toda la tienda, la
   página parece de otro sitio justo cuando va a dar su tarjeta.
   ============================================================ */

.wc-block-components-button:not(.is-link) {
  min-height: 48px;
  padding: 0 var(--ac-e-6);
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo-s);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ac-texto-inverso);
  background-color: var(--ac-primario);
  border: 1px solid var(--ac-primario);
  border-radius: var(--ac-r-s);
  transition: background var(--ac-transicion), border-color var(--ac-transicion);
}

.wc-block-components-button:not(.is-link):hover {
  background-color: var(--ac-primario-hover);
  border-color: var(--ac-primario-hover);
  color: var(--ac-texto-inverso);
}

.wc-block-components-button__text {
  text-decoration: none !important;
}

/* Los dos botones que cierran la compra llevan el arco, como el
   «Añadir al carrito» de la ficha: es el mismo gesto, el último. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border-radius: var(--ac-r-arco);
  width: 100%;
}

/* Títulos de sección del pago: «Información de contacto»,
   «Dirección de facturación», «Resumen del pedido». */
.wc-block-components-title,
.wc-block-cart__totals-title {
  font-family: var(--ac-fuente-display);
  font-weight: 500;
  color: var(--ac-texto);
  text-transform: none;
}

.wc-block-cart__totals-title {
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-etiqueta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-texto-suave);
}

/* Campos del formulario: mismos bordes rectos que el resto de la
   web, y 16px de letra —por debajo de eso, Safari en iPhone hace
   zoom al tocar el campo y descoloca la página. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-combobox input,
.wc-block-components-textarea {
  font-family: var(--ac-fuente-texto);
  font-size: 16px;
  color: var(--ac-texto);
  background: var(--ac-superficie);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-r-s);
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus {
  border-color: var(--ac-borde-fuerte);
  outline: 2px solid var(--ac-primario);
  outline-offset: 1px;
}

/* El total, que es lo que la clienta busca con la mirada. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--ac-fuente-texto);
  font-weight: 700;
  color: var(--ac-texto);
}

/* El precio del producto en el resumen, en cifras alineadas. */
.wc-block-components-product-price,
.wc-block-components-totals-item__value {
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   11 · BARRA DE ENVÍO GRATIS
   Aparece en el panel lateral, bajo el subtotal, y en la página
   del carrito, encima de los productos. Dice cuánto falta, no
   cuánto se lleva: «te faltan $120» mueve más que «llevas $380».

   El relleno es índigo y pasa a verde al llegar. No lleva Hilo:
   el manual reserva el acento para la marca, nunca para estados.
   ============================================================ */

.ac-envio-gratis {
  display: grid;
  gap: var(--ac-e-2);
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo-s);
  line-height: 1.4;
  color: var(--ac-texto-suave);
}

.ac-envio-gratis[hidden] {
  display: none;
}

.ac-envio-gratis__texto {
  margin: 0;
}

.ac-envio-gratis__texto strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ac-texto);
}

.ac-envio-gratis__pista {
  height: 4px;
  overflow: hidden;
  background: var(--ac-borde);
  border-radius: var(--ac-r-pildora);
}

.ac-envio-gratis__pista span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: var(--ac-primario);
  border-radius: inherit;
  transition: width 400ms cubic-bezier(.2, .6, .3, 1);
}

.ac-envio-gratis--logrado .ac-envio-gratis__texto strong {
  color: var(--ac-exito);
}

.ac-envio-gratis--logrado .ac-envio-gratis__pista span {
  background: var(--ac-exito);
}

@media (prefers-reduced-motion: reduce) {
  .ac-envio-gratis__pista span {
    transition: none;
  }
}

/* En la página del carrito va en una caja propia, alineada con el
   bloque de debajo. */
.ac-envio-gratis + .wp-block-woocommerce-cart {
  margin-top: var(--ac-e-6);
}

.entry-content > .ac-envio-gratis,
.ac-envio-gratis:has(+ .wp-block-woocommerce-cart) {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--ac-e-4) var(--ac-e-6);
  background: var(--ac-superficie);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-r-m);
}

/* El botón de compra mientras añade sin recargar la página. */
.single_add_to_cart_button.loading {
  opacity: 0.7;
  cursor: progress;
}