/* ==========================================================================
   Carrito, checkout, confirmación y mi cuenta.
   ========================================================================== */

/* --- Avisos --------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 var(--sf-esp-6);
  padding: var(--sf-esp-3) var(--sf-esp-4);
  border-left: 3px solid var(--sf-info);
  background: var(--sf-info-fondo);
  color: var(--sf-texto-principal);
  font-size: var(--sf-cuerpo-s-tam);
}

.woocommerce-message { border-left-color: var(--sf-exito); background: var(--sf-exito-fondo); }
.woocommerce-error { border-left-color: var(--sf-error); background: var(--sf-error-fondo); }
.woocommerce-error li { margin-bottom: var(--sf-esp-2); }
.woocommerce-error li:last-child { margin-bottom: 0; }

.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
  margin-left: var(--sf-esp-4);
  color: var(--sf-accion-primaria);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Campos de formulario ------------------------------------------------- */

.woocommerce form .form-row { margin-bottom: var(--sf-esp-4); }

/* Dos columnas en el formulario del checkout, como el mockup v3.
   WooCommerce ya marca los campos con form-row-first y form-row-last; lo que
   faltaba era implementarlas. Sin esto la columna de datos queda larguisima y
   el resumen del pedido se descuelga al lado, que es como salia hasta el
   27-08-2026. Debajo de 700px vuelven a una columna: dos campos de direccion
   uno al lado del otro en un telefono no se pueden llenar. */
@media (min-width: 700px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sf-esp-4);
  }

  .woocommerce form .form-row-wide,
  .woocommerce form .form-row.notes { grid-column: 1 / -1; }
}

.woocommerce form .form-row label {
  display: block;
  margin-bottom: var(--sf-esp-2);
  font-size: var(--sf-etiqueta-tam);
  /* Sin esto la etiqueta heredaba la interlinea del cuerpo y ocupaba 24px de
     alto para una letra de 12px, o sea el doble. Multiplicado por las seis
     filas del checkout eran 48px de aire. El token ya existia y no se usaba. */
  line-height: var(--sf-etiqueta-alto);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

.woocommerce form .form-row .required { color: var(--sf-error); text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  height: var(--sf-campo-alto);
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-campo);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m-tam);
  color: var(--sf-texto-principal);
}

.woocommerce form .form-row textarea { height: auto; min-height: 96px; padding: var(--sf-esp-3); }

.woocommerce form .form-row .description {
  margin-top: var(--sf-esp-2);
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-secundario);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--sf-error); }

/* --- Carrito -------------------------------------------------------------- */

.sf-carrito {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-8);
  align-items: start;
}

@media (min-width: 900px) {
  .sf-carrito { grid-template-columns: 1fr 360px; gap: var(--sf-esp-8); }
}

.sf-carrito__lineas { min-width: 0; }

.woocommerce table.shop_table.sf-carrito__tabla {
  border: 0;
  border-radius: 0;
  margin: 0;
}

.sf-carrito__tabla thead th {
  padding: 0 0 var(--sf-esp-3);
  border-bottom: 1px solid var(--sf-borde-medio);
  font-size: var(--sf-etiqueta-tam);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

.sf-carrito__tabla td {
  padding: var(--sf-esp-4) 0;
  border-bottom: 1px solid var(--sf-borde-sutil);
  vertical-align: top;
}

.sf-carrito__tabla .product-quantity,
.sf-carrito__tabla .product-subtotal { text-align: right; white-space: nowrap; }

.sf-carrito__producto {
  display: flex;
  gap: var(--sf-esp-4);
  align-items: flex-start;
}

/* WooCommerce le pone un ancho fijo a las fotos de la tabla del carrito; hay
   que igualar su selector o quedan de 35px. */
.sf-carrito__foto { flex: none; width: 80px; }

.woocommerce table.cart .sf-carrito__foto img,
.sf-carrito__foto img {
  width: 80px;
  height: auto;
  background: var(--sf-superficie-base);
}

/* La línea de un producto sin foto lleva el marco de la marca, no un ícono de
   imagen rota. El marco se define en catalogo.css. El `text-decoration` va acá
   además de en la regla con `:has()` de catalogo.css, para el navegador que
   todavía no soporta `:has()`. */
.sf-carrito__foto a { text-decoration: none; }
.sf-carrito__foto .sf-sinfoto { width: 80px; height: auto; }

.sf-carrito__datos { display: flex; flex-direction: column; gap: var(--sf-esp-1); min-width: 0; }

.sf-carrito__marca {
  font-size: var(--sf-etiqueta-tam);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

.sf-carrito__nombre { font-size: var(--sf-cuerpo-m-tam); font-weight: 500; }
.sf-carrito__nombre a { text-decoration: none; }

/* Con el 76% del catálogo variable, este renglón sale en casi todas las líneas
   del carro: es lo que distingue el 63 mm color #7 del 85 mm color #12. */
.sf-carrito__variacion,
.sf-carrito__extra {
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

.sf-carrito__extra p,
.sf-carrito__extra dl { margin: 0; }

/* Agotado sobrevenido: el 36% de las variaciones está agotado, así que el carro
   tiene que avisarlo antes de que el checkout falle. */
.sf-carrito__alerta {
  margin-top: var(--sf-esp-2);
  padding: var(--sf-esp-2) var(--sf-esp-3);
  border-left: 3px solid var(--sf-error);
  background: var(--sf-error-fondo);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-error);
}

.sf-carrito__tabla .sf-carrito__linea--alerta td { background: var(--sf-error-fondo); }

/* Nombre y variación en el resumen del pedido y en el panel lateral, donde las
   plantillas son de WooCommerce y el arreglo entra por filtro. */
.sf-linea__nombre { display: block; }

.sf-linea__variacion {
  display: block;
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  font-weight: 400;
  color: var(--sf-texto-secundario);
}

/* WooCommerce pinta `a.remove` como una equis roja gigante; acá es un enlace
   de texto, así que hay que igualar su especificidad.

   El color va con `!important` y no es capricho: WooCommerce declara
   `.woocommerce a.remove{color:var(--wc-red)!important}`, y contra `!important`
   la especificidad no sirve. Esta regla llevaba sin aplicarse desde el fork y no
   se notaba porque el rojo sobre blanco daba 5,90:1; sobre el fondo oscuro cae a
   2,33:1 y ahí se vio. */
.woocommerce a.remove.sf-carrito__quitar {
  display: inline;
  margin-top: var(--sf-esp-2);
  width: auto;
  height: auto;
  line-height: inherit;
  border-radius: 0;
  background: none;
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 400;
  color: var(--sf-texto-secundario) !important;
  text-decoration: underline;
  align-self: flex-start;
}

.woocommerce a.remove.sf-carrito__quitar:hover { background: none; color: var(--sf-error); }

/* El selector de cantidad es el mismo stepper de la ficha (`.sf-cantidad`, en
   variaciones.css): tres controles táctiles, no un campo numérico con las
   flechas del sistema. Estos dos selectores existen solo para ganarle a
   `.woocommerce table.cart td .quantity ...`, que le devuelve el borde y el
   ancho de WooCommerce al campo. */
.woocommerce table.cart td.product-quantity .sf-carrito__cantidad,
.sf-carrito__tabla .sf-carrito__cantidad {
  display: inline-flex;
  float: none;
  width: auto;
  margin: 0;
}

.woocommerce table.cart td.product-quantity .sf-carrito__cantidad input.qty,
.sf-carrito__tabla .sf-carrito__cantidad input.qty {
  width: var(--sf-alto-tactil);
  height: var(--sf-boton-l);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: center;
}

/* El producto de una unidad por pedido no lleva control, pero sí tiene que
   ocupar el mismo alto para que la línea no se desalinee. */
.sf-carrito__unica {
  display: inline-flex;
  align-items: center;
  height: var(--sf-boton-l);
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sf-carrito__tabla td.actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sf-esp-4);
  flex-wrap: wrap;
  padding-top: var(--sf-esp-6);
  border-bottom: 0;
}

/* La celda de acciones sin cupones y con el botón ya retirado por el JS: no
   queda nada dentro y solo aporta su padding. Se pide `.sf-carrito--auto`
   porque esa clase la pone el JS justo después de llevarse el botón: si el JS
   no corre, el botón sigue ahí y la celda tiene que verse. */
.sf-carrito--auto .sf-carrito__tabla td.sf-carrito__acciones--vacia { display: none; }

.sf-cupon { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sf-esp-2); }
.sf-cupon__etiqueta {
  flex: 1 0 100%;
  margin-bottom: var(--sf-esp-1);
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-secundario);
}

.sf-cupon input.input-text {
  width: 180px;
  height: var(--sf-boton-s);
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-campo);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-bloque);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s-tam);
}

.woocommerce .sf-cupon .button,
.woocommerce .sf-carrito__actualizar {
  min-height: var(--sf-boton-s);
  padding: 0 var(--sf-esp-4);
  border: 1px solid var(--sf-accion-primaria);
  border-radius: var(--sf-radio);
  background: transparent;
  color: var(--sf-accion-primaria);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 600;
}

.woocommerce .sf-cupon .button:hover,
.woocommerce .sf-carrito__actualizar:hover {
  background: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
}

/* --- Carrito en móvil: una columna, líneas de dos filas -------------------- */

/* Hasta 599px (el corte «Móvil» del sistema de puntos de quiebre) la tabla de
   escritorio no cabe: a 375px medía 406px dentro de un padre de 343px y sacaba
   la página entera de cuadro. La sección 11.2 pide una sola columna con líneas
   de dos filas, así que la tabla deja de comportarse como tabla y cada línea
   pasa a ser una grilla: miniatura a la izquierda ocupando el alto completo, y
   a la derecha nombre y variación arriba, cantidad y total abajo.

   El encabezado sobra: los rótulos «Producto», «Cantidad» y «Total» no tienen
   columna que encabezar cuando cada línea es una tarjeta. */
@media (max-width: 599px) {
  .sf-carrito__tabla,
  .sf-carrito__tabla tbody,
  .sf-carrito__tabla tr,
  .sf-carrito__tabla td {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .sf-carrito__tabla thead { display: none; }

  .sf-carrito__tabla tr.cart_item {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    grid-template-areas:
      "foto datos    datos"
      "foto cantidad total";
    column-gap: var(--sf-esp-3);
    row-gap: var(--sf-esp-3);
    align-items: start;
    padding: var(--sf-esp-4) 0;
    border-bottom: 1px solid var(--sf-borde-sutil);
  }

  /* La foto y los datos son hijos del `td` de producto, y la cantidad y el total
     son otros dos `td`. Para que los cuatro entren en la misma grilla de la
     línea, el `td` de producto deja de ser una caja. */
  .woocommerce table.cart tr.cart_item td.product-name,
  .sf-carrito__tabla tr.cart_item .product-name { display: contents; }

  .woocommerce table.cart tr.cart_item td,
  .sf-carrito__tabla tr.cart_item td {
    padding: 0;
    border: 0;
  }

  .sf-carrito__tabla .sf-carrito__foto { grid-area: foto; }
  .sf-carrito__tabla .sf-carrito__datos { grid-area: datos; }

  .woocommerce table.cart tr.cart_item td.product-quantity,
  .sf-carrito__tabla .product-quantity {
    grid-area: cantidad;
    justify-self: start;
    text-align: left;
  }

  .woocommerce table.cart tr.cart_item td.product-subtotal,
  .sf-carrito__tabla .product-subtotal {
    grid-area: total;
    justify-self: end;
    align-self: center;
    text-align: right;
  }

  /* La línea con aviso de stock se pinta entera. Con el `td` de producto en
     `contents` ya no queda caja que pintar ahí, y el fondo salía como un
     parche suelto detrás de la cantidad. */
  .sf-carrito__tabla tr.sf-carrito__linea--alerta { background: var(--sf-error-fondo); }
  .sf-carrito__tabla tr.sf-carrito__linea--alerta td { background: none; }

  /* Cupón y «Actualizar carrito» en columna: uno al lado del otro no caben en
     343px y el cupón terminaba empujando la fila. */
  .sf-carrito__tabla td.actions {
    flex-direction: column;
    align-items: stretch;
    padding-top: var(--sf-esp-6);
  }

  .sf-cupon input.input-text { flex: 1; width: auto; min-width: 0; }
}

/* --- Resumen (carrito y pedido) ------------------------------------------- */

.sf-carrito__resumen { display: flex; flex-direction: column; gap: var(--sf-esp-4); }

.sf-resumen {
  padding: var(--sf-esp-6);
  background: var(--sf-superficie-base);
  border: 1px solid var(--sf-borde-sutil);
  width: auto;
  float: none;
}

.sf-resumen__titulo { margin: 0 0 var(--sf-esp-4); font-size: var(--sf-h4-tam); }

.sf-resumen__lineas { list-style: none; margin: 0; padding: 0; }

.sf-resumen__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sf-esp-4);
  padding: var(--sf-esp-3) 0;
  border-bottom: 1px solid var(--sf-borde-sutil);
  font-size: var(--sf-cuerpo-s-tam);
}

.sf-resumen__linea > span:first-child { color: var(--sf-texto-secundario); }
.sf-resumen__pendiente { color: var(--sf-texto-secundario); text-align: right; }

.sf-resumen__linea--total {
  border-bottom: 0;
  padding-top: var(--sf-esp-4);
  font-size: var(--sf-h5-tam);
  font-weight: 600;
}

.sf-resumen__linea--total > span:first-child { color: var(--sf-texto-marca); }
.sf-resumen__linea--total .amount { color: var(--sf-precio); font-variant-numeric: tabular-nums; }

.sf-resumen__nota { margin: 0 0 var(--sf-esp-4); font-size: var(--sf-cuerpo-s-tam); color: var(--sf-texto-secundario); }

.woocommerce .sf-resumen__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-2);
  /* WooCommerce le pone `padding: 1em 0` a `.wc-proceed-to-checkout`, y entre
     eso y el margen de los botones el bloque medía 199px para dos botones de
     44. El espacio entre ellos lo pone el `gap`, como en todo el tema. */
  padding: 0;
}

.woocommerce .sf-resumen__acciones > * { margin: 0; }
.sf-resumen__acciones .sf-boton { width: 100%; }

.sf-carrito__aviso {
  display: flex;
  gap: var(--sf-esp-3);
  align-items: flex-start;
  padding: var(--sf-esp-4);
  background: var(--sf-superficie-bloque);
  border-left: 3px solid var(--sf-accion-acento);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

.sf-carrito__aviso .sf-icono { flex: none; color: var(--sf-acento-texto); }
.sf-carrito__aviso strong { display: block; color: var(--sf-texto-principal); }

/* --- Carrito vacío -------------------------------------------------------- */

.sf-carrito-vacio { max-width: 640px; padding-block: var(--sf-esp-8); }
.sf-carrito-vacio h2 { margin: 0 0 var(--sf-esp-3); }
.sf-carrito-vacio p { color: var(--sf-texto-secundario); }
.sf-carrito-vacio__acciones { display: flex; gap: var(--sf-esp-3); flex-wrap: wrap; margin-top: var(--sf-esp-6); }

.sf-carrito-vacio__atajos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-3);
  list-style: none;
  margin: var(--sf-esp-6) 0 0;
  padding: 0;
}

@media (min-width: 700px) {
  .sf-carrito-vacio__atajos { grid-template-columns: repeat(3, 1fr); }
}

.sf-carrito-vacio__atajos a {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-1);
  min-height: var(--sf-alto-tactil);
  padding: var(--sf-esp-4);
  border: 1px solid var(--sf-borde-medio);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-bloque);
  text-decoration: none;
}

.sf-carrito-vacio__atajos a:hover { border-color: var(--sf-accion-primaria); }
.sf-carrito-vacio__atajos strong { color: var(--sf-texto-marca); font-size: var(--sf-cuerpo-m-tam); }
.sf-carrito-vacio__atajos span { font-size: var(--sf-cuerpo-s-tam); color: var(--sf-texto-secundario); }

/* --- Checkout ------------------------------------------------------------- */

.sf-compra__titulo { margin: 0 0 var(--sf-esp-4); font-size: var(--sf-h4-tam); }

.woocommerce form.checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-8);
  align-items: start;
}

@media (min-width: 900px) {
  .woocommerce form.checkout { grid-template-columns: 1fr 380px; gap: var(--sf-esp-8); }
  .woocommerce form.checkout #customer_details { grid-column: 1; }
  .woocommerce form.checkout .sf-pedido { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: var(--sf-esp-6); }
}

/* --- Los tres pasos del checkout -----------------------------------------

   El orden y el porqué están en `inc/checkout-pasos.php`. Acá solo se pinta:
   un paso abierto muestra su cuerpo; uno resuelto lo pliega a una línea con
   «Cambiar»; uno que todavía no toca queda apagado y sin cuerpo.

   Que el formulario se acorte al avanzar, en vez de alargarse, es la idea
   entera. */

.sf-checkout__pasos { display: grid; gap: var(--sf-esp-4); min-width: 0; }

.sf-paso {
  background: var(--sf-superficie-base);
  border: 1px solid var(--sf-borde-medio);
  border-radius: var(--sf-radio);
  padding: var(--sf-esp-5);
}


.sf-paso__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-3);
}

.sf-paso__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
  font-family: var(--sf-fuente-titulos);
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 700;
  line-height: 1;
}

.sf-paso--listo .sf-paso__n { background: var(--sf-stock-disponible); }

.sf-paso__titulo {
  margin: 0;
  font-size: var(--sf-h4-tam);
  line-height: var(--sf-h4-alto);
}


/* «Cambiar» solo existe cuando hay algo que cambiar. */
/* El cuerpo de los tres pasos va SIEMPRE a la vista. Ya no hay plegado ni
   «Cambiar»: el porque esta en `form-checkout.php`. `--listo` solo cambia el
   numero por un ✓, que informa sin mover nada de sitio. */
.sf-paso__cuerpo { margin-top: var(--sf-esp-4); }

/* Los campos de cada paso, en dos columnas donde el dato lo permite. */
.sf-paso__campos { display: grid; gap: var(--sf-esp-4); }

/*
 * La separacion entre filas la pone el `gap` de la grilla, y NADA MAS.
 *
 * Es la sexta vez en el proyecto que aparece lo mismo: un contenedor con `gap`
 * cuyos hijos ademas traen `margin`, asi que la separacion sale al doble.
 * Medido el 02-09-2026: el paso 2 media 326px con tres filas de 82px, o sea
 * 80px de aire repartido en dos huecos de 32 y una cola de 16 despues de la
 * ultima fila, que no separa de nada.
 *
 * El `padding: 3px` lo pone WooCommerce en `.form-row` y aporta otros 6px por
 * fila sin que se vea para que.
 */
.woocommerce form .sf-paso__campos > .form-row {
  margin: 0;
  padding: 0;
}
/* El selector lleva `.woocommerce form` a proposito, y no es adorno: sin eso
   pierde contra la regla de arriba en este mismo archivo, que suma un elemento
   y por tanto gana la cascada. Medido: la fila seguia con margin-bottom 16px y
   padding 3px. Es la septima vez en el proyecto que una regla correcta a la
   vista no se aplica porque otra la gana. */

@media (min-width: 600px) {
  .sf-paso__campos { grid-template-columns: 1fr 1fr; }
  .sf-paso__campos > .form-row-wide,
  .sf-paso__campos > .form-row { grid-column: span 2; }
  .sf-paso__campos > .form-row-first { grid-column: 1; }
  .sf-paso__campos > .form-row-last { grid-column: 2; }
}

.sf-paso__campos--notas { margin-top: var(--sf-esp-4); }

/* Las tres formas de recibirlo, ya en el paso 1. */
.sf-envio-opciones { margin-top: var(--sf-esp-5); }

.sf-otra-direccion__titulo {
  margin: var(--sf-esp-4) 0 0;
  padding-top: 0;
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 500;
}

/* El total del resumen mientras falta la comuna: no es un monto, es un aviso. */
.sf-pedido__pendiente {
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 400;
  color: var(--sf-texto-secundario);
}

.sf-pedido__total--pendiente th,
.sf-pedido__total--pendiente td { color: var(--sf-texto-secundario); }

.sf-pedido__envio-nombre {
  display: block;
  font-size: var(--sf-etiqueta-tam);
  line-height: var(--sf-alto-compacto);
  color: var(--sf-texto-secundario);
}

/* La foto y el nombre de cada línea del resumen. */
.woocommerce .sf-pedido .sf-pedido__linea td.product-name {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sf-esp-2);
  align-items: start;
}

.sf-pedido__foto img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: 1px solid var(--sf-borde-sutil);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
}

.sf-pedido__datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-pedido__cantidad { font-size: var(--sf-etiqueta-tam); color: var(--sf-texto-secundario); }

.sf-pedido__iva {
  margin: 0 0 var(--sf-esp-4);
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-secundario);
}

/* --- El estimador de despacho del carrito ---------------------------------

   Va dentro del resumen y siempre a la vista, no escondido tras un enlace.
   Llama al mismo motor que el checkout, así que el precio que muestra es el que
   se cobra, y la comuna queda guardada para el paso siguiente. */

.sf-resumen__linea--estimador {
  display: block;
  padding: var(--sf-esp-4);
  background: var(--sf-superficie-calida);
  border-radius: var(--sf-radio);
}


/* Lo que pasa al pulsar, cuando el medio de pago saca del sitio. */
.sf-pedido__nota-pago {
  margin: var(--sf-esp-2) 0 0;
  font-size: var(--sf-etiqueta-tam);
  line-height: var(--sf-alto-compacto);
  text-align: center;
  color: var(--sf-texto-secundario);
}

.woocommerce form.checkout #customer_details { min-width: 0; }
.woocommerce form.checkout #customer_details .col-1,
.woocommerce form.checkout #customer_details .col-2 { width: auto; float: none; }

.woocommerce form.checkout h3 {
  margin: 0 0 var(--sf-esp-4);
  padding-top: var(--sf-esp-6);
  font-size: var(--sf-h4-tam);
}

.woocommerce form.checkout #customer_details > .col-1 > h3:first-child { padding-top: 0; }

/* --- Elección de envío ----------------------------------------------------
   Se monta sobre el selector propio de WooCommerce en vez de duplicarlo con un
   bloque aparte. Es una decisión con motivo: WooCommerce solo vuelve a pintar
   por AJAX la tabla del resumen y la caja de pago, y las tarifas del motor de
   envíos no existen hasta que el cliente elige región. Un bloque fuera de esa
   tabla se quedaría congelado mostrando opciones que ya no aplican.
   -------------------------------------------------------------------------- */

.woocommerce .sf-pedido table.shop_table tr.woocommerce-shipping-totals th {
  display: block;
  padding-bottom: var(--sf-esp-2);
  border-bottom: 0;
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 600;
  color: var(--sf-texto-marca);
  text-align: left;
}

.woocommerce .sf-pedido table.shop_table tr.woocommerce-shipping-totals td {
  display: block;
  width: 100%;
  padding-top: 0;
  text-align: left;
}

.woocommerce .sf-pedido ul#shipping_method,
.woocommerce .sf-envio-opciones ul#shipping_method {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce .sf-pedido ul#shipping_method,
.woocommerce .sf-envio-opciones ul#shipping_method li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sf-esp-1) var(--sf-esp-3);
  margin: 0;
  padding: var(--sf-esp-3);
  border: 1px solid var(--sf-borde-medio);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  text-indent: 0;
}

.woocommerce .sf-pedido ul#shipping_method,
.woocommerce .sf-envio-opciones ul#shipping_method li:has(input:checked) {
  border-color: var(--sf-accion-primaria);
  box-shadow: inset 0 0 0 1px var(--sf-accion-primaria);
  background: var(--sf-info-fondo);
}

.woocommerce .sf-pedido ul#shipping_method,
.woocommerce .sf-envio-opciones ul#shipping_method li:has(input:focus-visible) {
  outline: 2px solid var(--sf-foco);
  outline-offset: 2px;
}

.woocommerce .sf-pedido ul#shipping_method,
.woocommerce .sf-envio-opciones ul#shipping_method input.shipping_method {
  grid-column: 1;
  align-self: start;
  margin: var(--sf-esp-1) 0 0;
  accent-color: var(--sf-accion-primaria);
}

.woocommerce .sf-pedido ul#shipping_method,
.woocommerce .sf-envio-opciones ul#shipping_method label {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--sf-esp-2);
  margin: 0;
  font-size: var(--sf-cuerpo-m-tam);
  cursor: pointer;
}

.sf-envio__icono { align-self: center; line-height: 0; color: var(--sf-acento-texto); }
.sf-envio__icono .sf-icono { display: block; }

.sf-envio__titulo { font-weight: 600; color: var(--sf-texto-marca); }

.sf-envio__precio {
  text-align: right;
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sf-precio);
}

.sf-envio__precio .amount { color: var(--sf-precio); }
.sf-envio__precio--gratis { color: var(--sf-exito); }

/* «Pagar el envío al recibir» cuesta $0 en el carro, pero el cliente sí paga en
   la sucursal: el monto va en color de aviso, nunca en el verde de «Gratis». */
.sf-envio__precio--destino { color: var(--sf-acento-texto); }
.sf-envio__precio--destino small { display: block; font-weight: 400; }

/* El texto explicativo y la nota del motor van bajo la etiqueta, alineados con
   ella y no con el radio. */
.sf-envio__texto,
.sf-envio__nota {
  grid-column: 2;
  display: block;
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

.sf-envio__nota {
  margin-top: var(--sf-esp-1);
  padding-left: var(--sf-esp-3);
  border-left: 2px solid var(--sf-accion-acento);
  color: var(--sf-acento-texto);
}

/* Estados sin tarifa: nunca una lista vacía ni un callejón sin salida. */
.sf-envio__aviso {
  display: block;
  padding: var(--sf-esp-3);
  border-radius: var(--sf-radio);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
}

.sf-envio__aviso--espera {
  background: var(--sf-superficie-hundida);
  color: var(--sf-texto-secundario);
}

.sf-envio__aviso--sin-cobertura {
  background: var(--sf-aviso-fondo);
  color: var(--sf-aviso);
}

.sf-envio__aviso--sin-cobertura a { color: var(--sf-accion-secundaria); font-weight: 600; }

/* Retiro en la tienda de Temuco: solo aparece si esa opción está configurada. */

/* Con retiro en tienda no se pide dirección.
   Va con !important porque el JS de WooCommerce (address-i18n) escribe
   `style="display: block"` en estos campos cada vez que recalcula el pedido, y
   un estilo inline no se gana con especificidad. */
.sf-checkout--retiro #billing_address_1_field,
.sf-checkout--retiro #billing_city_field,
.sf-checkout--retiro #billing_state_field,
.sf-checkout--retiro #billing_postcode_field,
.sf-checkout--retiro #billing_country_field { display: none !important; }

/* Con retiro tampoco tiene sentido enviar a otra dirección. */
.sf-checkout--retiro .woocommerce-shipping-fields { display: none; }

.sf-checkout--retiro .sf-retiro { display: block; }
.sf-retiro { display: none; }

.sf-retiro h3 { padding-top: var(--sf-esp-6); }
.sf-retiro p { color: var(--sf-texto-secundario); font-size: var(--sf-cuerpo-s-tam); }

.sf-retiro__tienda {
  padding: var(--sf-esp-4);
  background: var(--sf-superficie-bloque);
  border-left: 3px solid var(--sf-accion-acento);
  line-height: var(--sf-cuerpo-m-alto);
}

.sf-retiro__tienda strong { color: var(--sf-texto-marca); }

/* El aviso del cupón viene con un icono en un pseudo-elemento que se solapa. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { content: none; }

/* Resumen del pedido */
.sf-pedido {
  padding: var(--sf-esp-6);
  background: var(--sf-superficie-bloque);
  border: 1px solid var(--sf-borde-sutil);
}

.sf-pedido__titulo { margin: 0 0 var(--sf-esp-4); font-size: var(--sf-h4-tam); }

.woocommerce .sf-pedido table.shop_table { border: 0; margin: 0 0 var(--sf-esp-4); }
.woocommerce .sf-pedido table.shop_table th,
.woocommerce .sf-pedido table.shop_table td {
  padding: var(--sf-esp-3) 0;
  border-bottom: 1px solid var(--sf-borde-sutil);
  font-size: var(--sf-cuerpo-s-tam);
}

.woocommerce .sf-pedido table.shop_table thead { display: none; }
.woocommerce .sf-pedido table.shop_table td.product-total,
.woocommerce .sf-pedido table.shop_table th.product-total { text-align: right; white-space: nowrap; }

.woocommerce .sf-pedido table.shop_table tfoot .order-total th,
.woocommerce .sf-pedido table.shop_table tfoot .order-total td {
  border-bottom: 0;
  padding-top: var(--sf-esp-4);
  font-size: var(--sf-h5-tam);
  font-weight: 600;
}

/* --- El bloque de pago, ahora en el paso 3 ---------------------------------

   Estas reglas estaban acotadas a `.sf-pedido`, o sea al resumen del costado,
   que es donde WooCommerce lo pone. Desde el checkout de tres pasos el pago
   vive en el paso 3, en la columna izquierda, y las reglas dejaron de aplicar:
   el boton salia morado, que es el color por defecto de WooCommerce.

   Ahora se acotan a `#payment`, que es el bloque mismo y esta una sola vez en
   la pagina, asi que valen esten donde esten. */

/* WooCommerce le pone a `#payment` un fondo lavanda y bordes redondeados que
   solo se ven cuando el bloque vive en una columna propia, como acá. */
.woocommerce #payment { background: none; border-radius: 0; padding: 0; }

#payment .wc_payment_methods { list-style: none; margin: 0 0 var(--sf-esp-4); padding: 0; }

/* Cada medio es una tarjeta que se puede pulsar entera, no un radio suelto. */
#payment .wc_payment_method {
  margin-bottom: var(--sf-esp-2);
  padding: var(--sf-esp-3);
  border: 1px solid var(--sf-borde-medio);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
}

#payment .wc_payment_method:has(input:checked) {
  border-color: var(--sf-accion-primaria);
  box-shadow: inset 0 0 0 1px var(--sf-accion-primaria);
}

#payment .wc_payment_method:has(input:focus-visible) {
  outline: 2px solid var(--sf-foco);
  outline-offset: 2px;
}

#payment .wc_payment_method > input[type="radio"] {
  margin: 0 var(--sf-esp-2) 0 0;
  accent-color: var(--sf-accion-primaria);
}

#payment .wc_payment_method label {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-esp-2);
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 600;
  color: var(--sf-texto-principal);
  cursor: pointer;
}

#payment .wc_payment_method label .sf-icono { flex: none; color: var(--sf-acento-texto); }

/* La caja que explica el medio. WooCommerce la pinta lavanda por defecto. */
#payment .payment_box {
  margin: var(--sf-esp-2) 0 0;
  padding: var(--sf-esp-3);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-calida);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

#payment .payment_box::before { display: none; }
#payment .payment_box p { margin: 0; }

/* Los medios de pago reales son Webpay (Flow) y transferencia. La base trae
   configuración huérfana de Stripe y PayPal del sitio anterior, y en producción
   siguen encendidos: hay que apagarlos al publicar. */
.sf-pago__aviso {
  margin: 0 0 var(--sf-esp-3);
  color: var(--sf-texto-secundario);
  line-height: var(--sf-cuerpo-s-alto);
}

.woocommerce #payment #place_order,
.woocommerce .sf-paso #place_order {
  display: block;
  width: 100%;
  min-height: var(--sf-boton-l);
  padding: 0 var(--sf-esp-6);
  border: 1px solid var(--sf-accion-acento);
  border-radius: var(--sf-radio);
  background: var(--sf-accion-acento);
  color: var(--sf-accion-inversa);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 600;
  cursor: pointer;
}

.woocommerce #payment #place_order:hover,
.woocommerce .sf-paso #place_order:hover {
  background: var(--sf-accion-acento-hover);
  border-color: var(--sf-accion-acento-hover);
}

/* La caja donde vive el boton: WooCommerce le pone fondo propio. */
#payment .place-order {
  margin: 0;
  padding: var(--sf-esp-4) 0 0;
  background: none;
  border-top: 1px solid var(--sf-borde-sutil);
}

.sf-pedido__ayuda {
  display: block;
  margin-top: var(--sf-esp-4);
  padding-top: var(--sf-esp-4);
  border-top: 1px solid var(--sf-borde-sutil);
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-secundario);
}

.sf-pedido__ayuda strong { display: block; color: var(--sf-texto-principal); }

.woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--sf-esp-4); font-size: var(--sf-cuerpo-s-tam); }

/* --- Confirmación --------------------------------------------------------- */

.sf-gracias__cabecera { max-width: 640px; margin-bottom: var(--sf-esp-8); }
.sf-gracias__cabecera h1 { margin: 0 0 var(--sf-esp-3); }
.sf-gracias__cabecera p { color: var(--sf-texto-secundario); }

.sf-gracias__pedido {
  display: inline-flex;
  flex-direction: column;
  gap: var(--sf-esp-1);
  padding: var(--sf-esp-3) var(--sf-esp-4);
  background: var(--sf-superficie-bloque);
  border-left: 3px solid var(--sf-accion-acento);
}

.sf-gracias__pedido strong { font-size: var(--sf-h5-tam); font-variant-numeric: tabular-nums; }

/* Con «pagar el envío al recibir» el total pagado no incluye el flete: hay que
   recordarlo acá o la sorpresa llega en la sucursal. */
.sf-gracias__flete {
  margin: var(--sf-esp-4) 0 0;
  padding: var(--sf-esp-3) var(--sf-esp-4);
  background: var(--sf-aviso-fondo);
  border-left: 3px solid var(--sf-accion-acento);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-aviso);
}

.sf-pasos {
  list-style: none;
  margin: 0 0 var(--sf-esp-12);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-6);
}

@media (min-width: 900px) {
  .sf-pasos { grid-template-columns: repeat(3, 1fr); }
}

.sf-pasos__item {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-2);
  padding-top: var(--sf-esp-4);
  border-top: 2px solid var(--sf-accion-primaria);
}

.sf-pasos__item h3 { margin: 0; font-size: var(--sf-h6-tam); }
.sf-pasos__item p { margin: 0; font-size: var(--sf-cuerpo-s-tam); color: var(--sf-texto-secundario); }

.sf-transferencia {
  padding: var(--sf-esp-6);
  margin-bottom: var(--sf-esp-8);
  background: var(--sf-aviso-fondo);
  border-left: 3px solid var(--sf-accion-acento);
}

.sf-transferencia h2 { margin: 0 0 var(--sf-esp-4); font-size: var(--sf-h4-tam); }
.sf-transferencia__datos { margin: 0 0 var(--sf-esp-4); }
.sf-transferencia__datos th { width: 30%; color: var(--sf-texto-secundario); font-weight: 400; }
.sf-transferencia__aviso { margin: 0; font-size: var(--sf-cuerpo-s-tam); color: var(--sf-texto-secundario); }

/* Instrucciones de la transferencia que imprime la pasarela nativa. */
.sf-gracias .woocommerce-bacs-bank-details {
  padding: var(--sf-esp-6);
  margin: 0 0 var(--sf-esp-8);
  background: var(--sf-aviso-fondo);
  border-left: 3px solid var(--sf-accion-acento);
  list-style: none;
}

.sf-gracias .wc-bacs-bank-details-heading {
  margin: 0 0 var(--sf-esp-4);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-h6-tam);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-gracias .wc-bacs-bank-details-account-name {
  margin: 0 0 var(--sf-esp-3);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 600;
  color: var(--sf-texto-marca);
}

.sf-gracias .wc-bacs-bank-details li {
  padding: var(--sf-esp-2) 0;
  border-bottom: 1px solid var(--sf-borde-medio);
  font-size: var(--sf-cuerpo-s-tam);
}

.sf-gracias .wc-bacs-bank-details li:last-child { border-bottom: 0; }
.sf-gracias .wc-bacs-bank-details li strong { display: block; color: var(--sf-texto-marca); }

.sf-gracias__titulo { margin: 0 0 var(--sf-esp-6); }

.sf-gracias__detalle {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-8);
  align-items: start;
}

@media (min-width: 900px) {
  .sf-gracias__detalle { grid-template-columns: 1.6fr 1fr; gap: var(--sf-esp-12); }
}

.sf-gracias__tienda,
.sf-gracias__ayuda {
  padding: var(--sf-esp-4);
  background: var(--sf-superficie-bloque);
  border-left: 3px solid var(--sf-accion-acento);
}

.sf-gracias__tienda h2,
.sf-gracias__ayuda h2 { margin: 0 0 var(--sf-esp-3); font-size: var(--sf-h6-tam); }
.sf-gracias__tienda p,
.sf-gracias__ayuda p { margin: 0 0 var(--sf-esp-3); font-size: var(--sf-cuerpo-s-tam); color: var(--sf-texto-secundario); }
.sf-gracias__tienda strong { color: var(--sf-texto-marca); }

/* Tabla de detalle del pedido que imprime WooCommerce. */
.woocommerce-order-details,
.woocommerce-customer-details { margin-bottom: var(--sf-esp-8); }

.woocommerce-order-details__title,
.woocommerce-column__title { margin: 0 0 var(--sf-esp-4); font-size: var(--sf-h4-tam); }

.woocommerce table.woocommerce-table--order-details { border: 0; }
.woocommerce table.woocommerce-table--order-details th,
.woocommerce table.woocommerce-table--order-details td {
  padding: var(--sf-esp-3) 0;
  border-bottom: 1px solid var(--sf-borde-sutil);
  font-size: var(--sf-cuerpo-s-tam);
}

/* --- Panel lateral del carrito -------------------------------------------- */

.sf-drawer { position: fixed; inset: 0; z-index: 70; }
.sf-drawer[hidden] { display: none; }

.sf-drawer__velo {
  position: absolute;
  inset: 0;
  background: var(--sf-velo-suave);
  opacity: 0;
  transition: opacity .25s ease;
}

.sf-drawer--abierto .sf-drawer__velo { opacity: 1; }

.sf-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--sf-superficie-base);
  box-shadow: var(--sf-sombra-3);
  transform: translateX(100%);
  transition: transform .25s ease;
}

.sf-drawer--abierto .sf-drawer__panel { transform: translateX(0); }

.sf-drawer__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-esp-4);
  padding: var(--sf-esp-4);
  border-bottom: 1px solid var(--sf-borde-sutil);
}

.sf-drawer__titulo { margin: 0; font-size: var(--sf-h4-tam); }

.sf-drawer__cerrar {
  width: var(--sf-alto-tactil);
  height: var(--sf-alto-tactil);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--sf-texto-marca);
  cursor: pointer;
}

.sf-drawer__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--sf-esp-4);
}

/* Lista de productos del mini carrito.
   Estructura real de WooCommerce: dentro del `li` van la equis de quitar, un
   enlace que envuelve la foto y el nombre, y el `span.quantity` con la
   cantidad y el precio. La foto no es hija del `li`, así que la grilla se
   monta sobre el enlace. */
/* --- La lista del panel del carrito ---------------------------------------

   Escrito para el marcado propio de `woocommerce/cart/mini-cart.php`, que el
   tema reemplaza. El de WooCommerce metía la foto y el nombre en el mismo
   enlace, con la foto flotada: una fila medía 159px y el nombre salía en azul
   de enlace. Ahora la fila es una reja de tres columnas y mide 96.
   ------------------------------------------------------------------------- */

.sf-drawer__cuerpo ul.cart_list,
.sf-drawer__cuerpo ul.product_list_widget {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-carrito-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 24px;
  gap: var(--sf-esp-3);
  align-items: start;
  padding-block: var(--sf-esp-3);
  border-bottom: 1px solid var(--sf-borde-sutil);
}

.sf-carrito-item:first-child { padding-top: 0; }
.sf-carrito-item:last-child { border-bottom: 0; }

.sf-carrito-item__foto {
  display: block;
  width: 72px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  border: 1px solid var(--sf-borde-sutil);
}

.sf-carrito-item__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
  float: none;
}

.sf-carrito-item__datos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* El nombre sigue siendo un enlace al producto, pero pintado como texto: en la
   lista de lo que ya elegiste es información, no una invitación a irse. */
.sf-carrito-item__nombre {
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-alto-compacto);
  font-weight: 500;
  color: var(--sf-texto-principal);
  text-decoration: none;
}

.sf-carrito-item__nombre:hover .sf-linea__nombre { color: var(--sf-texto-marca); text-decoration: underline; }

/* `sf_nombre_item_carro()` parte el nombre en dos: el nombre y la variación con
   su rótulo. Van apilados y la variación en tono secundario, porque es un dato
   de la línea y no parte del nombre del producto. */
.sf-carrito-item__nombre { display: flex; flex-direction: column; gap: 2px; }

.sf-linea__variacion {
  font-size: var(--sf-etiqueta-tam);
  line-height: var(--sf-alto-compacto);
  font-weight: 400;
  color: var(--sf-texto-secundario);
}

/* «Color: Pink Iwashi». Lo imprime `wc_get_formatted_cart_item_data()` como una
   `<dl>`, que por defecto sale apilada y con márgenes. */
.sf-carrito-item .variation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sf-esp-2);
  margin: 0;
  font-size: var(--sf-etiqueta-tam);
  line-height: var(--sf-alto-compacto);
  color: var(--sf-texto-secundario);
}

.sf-carrito-item .variation dt,
.sf-carrito-item .variation dd { margin: 0; font-weight: 400; }
.sf-carrito-item .variation dt::after { content: ":"; }
.sf-carrito-item .variation p { margin: 0; }

.sf-carrito-item .quantity {
  display: block;
  margin-top: 2px;
  padding-left: 0;
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-alto-cifra);
  font-weight: 600;
  color: var(--sf-texto-principal);
  font-variant-numeric: tabular-nums;
}

/* SIN el prefijo `.woocommerce`: el panel del carrito vive en el pie y aparece
   también en la portada, donde el `body` no lleva esa clase. La regla anterior
   la llevaba y por eso la equis salía subrayada en todas las páginas que no son
   de la tienda. El color sí necesita ganarle a un `!important` de WooCommerce,
   y para eso está la segunda regla. */
.sf-carrito-item__quitar {
  position: static;
  display: block;
  width: 24px;
  height: 24px;
  line-height: 22px;
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  background: none;
  border-radius: var(--sf-radio);
}

/* El `!important` no es capricho: WooCommerce declara
   `.woocommerce a.remove{color:var(--wc-red)!important}` y contra un
   `!important` la especificidad no sirve. Mismo caso que `.sf-carrito__quitar`
   más arriba. */
/* Entre dos `!important` manda la especificidad, así que el primer selector
   tiene que llevar `.woocommerce a.remove` delante para pasar de (0,1,0) a
   (0,3,1) y ganarle al (0,2,1) de WooCommerce. El segundo selector es para las
   páginas donde el `body` no trae `.woocommerce`, como la portada. */
.woocommerce a.remove.sf-carrito-item__quitar,
.sf-carrito-item__quitar { color: var(--sf-texto-secundario) !important; }

.woocommerce a.remove.sf-carrito-item__quitar:hover,
.sf-carrito-item__quitar:hover { background: none; color: var(--sf-error) !important; }

/* --- Lo que WooCommerce le hace a la lista y hay que desarmar --------------

   Su hoja trae `.woocommerce ul.cart_list li::before/::after` con
   `content:" "; display:table`, que es un clearfix de cuando la foto flotaba.
   En una reja esos dos pseudoelementos son DOS CELDAS más: corrían la foto, los
   datos y la equis una columna cada uno, y la fila pasaba de 85 a 217px. Solo
   se veía en las páginas con `.woocommerce` en el `body`, o sea en la tienda y
   no en la portada.

   Y `.woocommerce ul.product_list_widget li img` fuerza `float:right` y 32px de
   ancho. Los selectores de abajo llevan `.sf-drawer__cuerpo` delante para
   ganarle por especificidad sin recurrir a otro `!important`. */
.sf-drawer__cuerpo .sf-carrito-lista .sf-carrito-item::before,
.sf-drawer__cuerpo .sf-carrito-lista .sf-carrito-item::after { display: none; }

.sf-drawer__cuerpo .sf-carrito-lista .sf-carrito-item__foto img {
  float: none;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.sf-drawer__cuerpo .total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sf-esp-3);
  margin: var(--sf-esp-4) 0 0;
  padding-top: var(--sf-esp-3);
  border-top: 1px solid var(--sf-borde-medio);
  font-size: var(--sf-h5-tam);
  font-weight: 600;
}

.sf-drawer__cuerpo .total strong {
  font-weight: 400;
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-secundario);
}

.sf-drawer__cuerpo .total .amount { color: var(--sf-precio); font-variant-numeric: tabular-nums; }

/* El subtotal nunca promete el total final: el despacho aparece al pagar. */
.sf-drawer__nota {
  margin: var(--sf-esp-2) 0 0;
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-secundario);
}

/* Los dos botones usan `.sf-boton` del sistema, que ya sabe pintarlos. Antes
   esto redefinía a mano `.button` y `.checkout` de WooCommerce, con un
   `order: -1` para subir «Finalizar compra»; ahora la plantilla del tema los
   imprime ya en el orden correcto y no hace falta el truco. */
.sf-drawer__cuerpo .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-2);
  margin: var(--sf-esp-4) 0 0;
}

.sf-drawer__cuerpo .woocommerce-mini-cart__buttons .sf-boton { width: 100%; }

.sf-carrito-vacio {
  margin: var(--sf-esp-8) 0;
  text-align: center;
  color: var(--sf-texto-secundario);
}


.sf-drawer__cuerpo .woocommerce-mini-cart__empty-message {
  margin: var(--sf-esp-8) 0;
  text-align: center;
  color: var(--sf-texto-secundario);
}

/* --- Botón cargando ------------------------------------------------------- */

/* Mientras se añade al carrito, el botón se queda en su sitio con un giro:
   sin esto la única señal era que la página se recargaba. */
.sf-cargando {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.sf-cargando::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid currentColor;
  border-top-color: var(--sf-texto-marca);
  border-radius: var(--sf-radio-redondo);
  color: var(--sf-cargando-pista);
  animation: sf-girar .6s linear infinite;
}

@keyframes sf-girar {
  to { transform: rotate(360deg); }
}

/* --- Estados vacíos: 404 y búsqueda sin resultados ------------------------ */

.sf-vacio { max-width: 640px; padding-block: var(--sf-esp-8); }

.sf-vacio__codigo {
  display: block;
  margin-bottom: var(--sf-esp-4);
  font-family: var(--sf-fuente-marca);
  font-size: var(--sf-h1-tam);
  line-height: 1;
  color: var(--sf-accion-acento);
}

.sf-vacio h1 { margin: 0 0 var(--sf-esp-3); }
.sf-vacio p { color: var(--sf-texto-secundario); }

.sf-vacio__acciones {
  display: flex;
  gap: var(--sf-esp-3);
  flex-wrap: wrap;
  margin-top: var(--sf-esp-6);
}

.sf-vacio__pistas { margin-top: var(--sf-esp-12); }
.sf-vacio__pistas ul {
  display: flex;
  gap: var(--sf-esp-2);
  flex-wrap: wrap;
  list-style: none;
  margin: var(--sf-esp-3) 0 0;
  padding: 0;
}

.sf-resultado {
  padding: var(--sf-esp-4);
  border: 1px solid var(--sf-borde-sutil);
  background: var(--sf-superficie-bloque);
}

.sf-resultado h2 { margin: 0 0 var(--sf-esp-2); font-size: var(--sf-h5-tam); }
.sf-resultado p { margin: 0; color: var(--sf-texto-secundario); }

/* --- Mi cuenta ------------------------------------------------------------ */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-8);
  align-items: start;
}

@media (min-width: 900px) {
  .woocommerce-account .woocommerce { grid-template-columns: 240px 1fr; gap: var(--sf-esp-12); }
}

/* Sin sesión iniciada NO hay menú lateral, así que esa columna de 240px no
   tiene quién la ocupe: el formulario de acceso caía dentro de ella y salía de
   240px de ancho. Se veía angosto y nadie lo notó porque hasta el 04-09-2026 el
   registro estaba apagado y el formulario solo era uno.

   `logged-in` la pone WordPress en el `body`, así que la regla distingue las
   dos situaciones sin tocar plantillas. */
body:not(.logged-in).woocommerce-account .woocommerce { grid-template-columns: 1fr; }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--sf-esp-3) 0;
  border-bottom: 1px solid var(--sf-borde-sutil);
  color: var(--sf-texto-principal);
  font-size: var(--sf-cuerpo-s-tam);
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a { font-weight: 600; color: var(--sf-texto-marca); }
.woocommerce-MyAccount-navigation li a:hover { color: var(--sf-texto-marca); }

.woocommerce-MyAccount-content { min-width: 0; }

/* Los selectores repiten `.woocommerce` porque así declara WooCommerce sus
   botones y si no, ganan sus estilos grises. */
.woocommerce .woocommerce-MyAccount-content button.woocommerce-Button,
.woocommerce .woocommerce-form-login button.button,
.woocommerce .woocommerce-form-register button.button,
.woocommerce .woocommerce-EditAccountForm button.button {
  min-height: var(--sf-boton-m);
  padding: 0 var(--sf-esp-6);
  border: 1px solid var(--sf-accion-primaria);
  border-radius: var(--sf-radio);
  background: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 600;
  cursor: pointer;
}

.woocommerce .woocommerce-form-login button.button:hover,
.woocommerce .woocommerce-form-register button.button:hover {
  background: var(--sf-accion-primaria-hover);
  color: var(--sf-accion-inversa);
}

/* Ojo de «ver contraseña» del formulario de acceso. */
.woocommerce form .password-input { display: block; position: relative; }

.woocommerce form .show-password-input {
  position: absolute;
  right: var(--sf-esp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: var(--sf-esp-2); }
.woocommerce-form-login__rememberme span { font-size: var(--sf-cuerpo-s-tam); text-transform: none; letter-spacing: 0; }
.woocommerce-LostPassword { margin-top: var(--sf-esp-4); font-size: var(--sf-cuerpo-s-tam); }

.woocommerce-form-login,
.woocommerce-form-register {
  max-width: 420px;
  padding: var(--sf-esp-6);
  border: 1px solid var(--sf-borde-sutil);
  background: var(--sf-superficie-bloque);
}

/* Acceder y Registrarse, lado a lado.

   El registro se encendio el 04-09-2026 (punto 9 del correo de Carlos) y ahi
   aparecio el segundo formulario. WooCommerce ya los envuelve en `.col2-set`,
   pero el tema no estilaba esa clase, asi que los dos quedaban uno debajo del
   otro y la pagina obligaba a bajar para descubrir que se podia crear cuenta.
   Que se vea el segundo sin desplazarse es justamente lo que Carlos echo de
   menos: «no inicia para inscripcion en la pagina, falta ese paso». */
.woocommerce .col2-set {
  display: grid;
  gap: var(--sf-esp-6);
  align-items: start;
}

@media (min-width: 768px) {
  .woocommerce .col2-set { grid-template-columns: 1fr 1fr; }
}

/* En dos columnas el ancho lo manda la columna, no el formulario: con el
   max-width de 420px puesto, una caja quedaba angosta al lado de la otra. */
.woocommerce .col2-set .woocommerce-form-login,
.woocommerce .col2-set .woocommerce-form-register { max-width: none; }

/* «Acceder» y «Registrarse» son rótulos de columna, no títulos de sección: a
   34px competían con el «Mi cuenta» de la página y las dos cajas se leían como
   dos páginas distintas. */
.woocommerce .col2-set > div > h2 { margin-top: 0; font-size: var(--sf-h4); }

/* Las migas del carrito y del checkout, pegadas al titulo igual que en el
   catalogo. Ver page.php: solo salen en esas dos paginas. */
.sf-pagina__migas { margin-bottom: var(--sf-esp-2); }