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

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

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

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

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

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

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

.woocommerce form .form-row label {
  display: block;
  margin-bottom: var(--zfc-esp-2);
  /* 14px y en caja normal, no 12 en mayusculas.
     Era un letrerito gris del tamano de la letra chica de un contrato, con las
     letras separadas, justo encima del campo donde se deja el telefono para que
     te llamen. Con presbicia hay que acercarse a leer que va en cada uno.
     Las mayusculas ademas se leen mas lento: no hay perfil de palabra. */
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  color: var(--zfc-texto-marca);
}

.woocommerce form .form-row .required { color: var(--zfc-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(--zfc-campo-alto);
  padding: 0 var(--zfc-esp-3);
  border: 1px solid var(--zfc-borde-campo);
  border-radius: var(--zfc-radio);
  background: var(--zfc-superficie-base);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-m);
  color: var(--zfc-texto-principal);
}

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

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

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

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

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

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

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

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

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

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

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

.zfc-carrito__producto {
  display: flex;
  gap: var(--zfc-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. */
.zfc-carrito__foto { flex: none; width: 80px; }

.woocommerce table.cart .zfc-carrito__foto img,
.zfc-carrito__foto img {
  width: 80px;
  height: auto;
  background: #FFFFFF;
}

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

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

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

.zfc-carrito__variacion { font-size: var(--zfc-cuerpo-s); color: var(--zfc-texto-secundario); }
.zfc-carrito__variacion p { margin: 0; }

/* WooCommerce pinta `a.remove` como una equis roja gigante; acá es un enlace
   de texto, así que hay que igualar su especificidad. */
.woocommerce a.remove.zfc-carrito__quitar {
  display: inline;
  margin-top: var(--zfc-esp-2);
  width: auto;
  height: auto;
  line-height: inherit;
  border-radius: 0;
  background: none;
  font-size: var(--zfc-cuerpo-s);
  font-weight: 400;
  color: var(--zfc-texto-secundario);
  text-decoration: underline;
  align-self: flex-start;
}

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

/* El tamano de letra NO es decorativo aqui: Safari de iOS amplia la pagina
   entera al enfocar cualquier campo por debajo de 16px, y despues hay que
   pellizcar para volver a verla. Este campo no declaraba `font-size` en
   absoluto, asi que caia en el ~13px por defecto del navegador y disparaba el
   zoom cada vez que alguien tocaba la cantidad. `--zfc-cuerpo-m` son 16px, que
   es justo el umbral. */
.zfc-carrito__tabla .quantity input[type="number"] {
  width: 72px;
  height: var(--zfc-alto-tactil);
  padding: 0 var(--zfc-esp-2);
  border: 1px solid var(--zfc-borde-campo);
  border-radius: var(--zfc-radio);
  background: var(--zfc-superficie-base);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-m);
  text-align: center;
}

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

/* El cupón va plegado: abierto ocupaba el primer bloque bajo la tabla, 76px
   para algo que casi nadie usa en una óptica sin campañas. */
.zfc-cupon { margin-bottom: var(--zfc-esp-4); }

.zfc-cupon__disparador {
  display: inline-block;
  cursor: pointer;
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  color: var(--zfc-acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}

.zfc-cupon__disparador::-webkit-details-marker { display: none; }
.zfc-cupon__disparador:hover { color: var(--zfc-accion-acento-activa); }

.zfc-cupon__cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--zfc-esp-2);
  margin-top: var(--zfc-esp-3);
}

/* Mismo motivo que la cantidad: bajo 16px, iOS amplia al enfocar. */
.zfc-cupon input.input-text {
  width: 180px;
  height: var(--zfc-alto-tactil);
  font-size: var(--zfc-cuerpo-m);
  padding: 0 var(--zfc-esp-3);
  border: 1px solid var(--zfc-borde-campo);
  border-radius: var(--zfc-radio);
  background: var(--zfc-superficie-bloque);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
}

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

.woocommerce .zfc-cupon .button:hover,
.zfc-cupon .button:hover,
.woocommerce .zfc-carrito__actualizar:hover,
.zfc-carrito__actualizar:hover {
  background: var(--zfc-accion-primaria);
  color: var(--zfc-texto-inverso);
}

/* Sin el botón de actualizar, la fila de acciones solo lleva el cupón. */
.zfc-carrito--auto .actions { text-align: left; }

/* Rasgos del marco en la línea del carrito: con cuatro Ray-Ban parecidos, el
   nombre no dice cuál es cuál. */
.zfc-carrito__rasgos {
  display: block;
  margin-top: var(--zfc-esp-1);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
  font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

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

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

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

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

.zfc-resumen__acciones { display: flex; flex-direction: column; gap: var(--zfc-esp-3); }
.zfc-resumen__acciones .zfc-boton { width: 100%; }

.zfc-carrito__aviso,
.zfc-carrito__receta {
  padding: var(--zfc-esp-4);
  background: var(--zfc-superficie-bloque);
  border-left: 3px solid var(--zfc-accion-acento);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-carrito__aviso { display: flex; gap: var(--zfc-esp-3); align-items: flex-start; }
.zfc-carrito__aviso .zfc-icono { flex: none; color: var(--zfc-acento-texto); }
.zfc-carrito__aviso strong { display: block; color: var(--zfc-texto-principal); }

/* Ahora vive bajo los marcos, en la columna ancha, no en la del resumen: ahí
   la pregunta llega justo después de elegirlos, y de paso ocupa el hueco que
   dejaba la tabla. Con más ancho, el botón cabe al lado del texto. */
.zfc-carrito__receta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zfc-esp-2);
  margin-top: var(--zfc-esp-6);
}

@media (min-width: 700px) {
  .zfc-carrito__receta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--zfc-esp-6);
  }

  .zfc-carrito__receta .zfc-boton { margin-top: 0; flex: none; }
}
.zfc-carrito__receta-titulo { margin: 0; font-size: var(--zfc-h6); }
.zfc-carrito__receta > div { display: flex; flex-direction: column; gap: var(--zfc-esp-1); }
.zfc-carrito__receta p { margin: 0; }
.zfc-carrito__receta .zfc-boton { margin-top: var(--zfc-esp-2); }

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

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

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

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

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

@media (min-width: 900px) {
  .woocommerce form.checkout { grid-template-columns: 1fr 380px; gap: var(--zfc-esp-8); }
  .woocommerce form.checkout #customer_details { grid-column: 1; }
  /* La columna se estira a lo alto de la fila aunque el grid alinee al inicio:
     si no, el sticky de dentro se suelta al pasar los 941px de la caja, justo
     cuando la persona termina de llenar los datos y quiere confirmar. */
  .woocommerce form.checkout .zfc-pedido {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
  }

  /* Lo pegajoso es la caja, no la columna: con el bloque de ayuda dentro medía
     941px en una ventana de 900 y el botón de confirmar nunca se veía. */
  /* El tope cuenta la cabecera fija. Con `esp-6` a secas la caja se metia 32px
     por debajo de ella: desaparecian el titulo «Tu pedido» y el borde de arriba
     de la tabla, y en un portatil de 768px de alto esos 32px son justo lo que
     empuja «Confirmar pedido» fuera de la pantalla. Es la misma cuenta que ya
     usa el indice del blog. */
  .woocommerce form.checkout .zfc-pedido__caja {
    position: sticky;
    top: calc(var(--zfc-header-fijo-alto) + var(--zfc-esp-6));
  }

  /* Lo que FRENA a la caja. Un elemento pegajoso se desliza hasta el final de
     su contenedor: mientras ese contenedor fue `.zfc-pedido` entero, la caja se
     montaba sobre el enlace de ayuda al bajar y el texto del WhatsApp cruzaba
     los medios de pago, ilegibles los dos. Este envoltorio crece con la columna
     pero termina donde empieza la ayuda, así que el navegador la detiene ahí.
     Encontrado el 03-09-2026 sobre staging. */
  .woocommerce form.checkout .zfc-pedido__pegajoso { flex: 1 1 auto; min-height: 0; }
}

.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(--zfc-esp-4);
  padding-top: var(--zfc-esp-6);
  font-size: var(--zfc-h4);
}

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

/* Elección de entrega */
.zfc-entrega { margin-bottom: var(--zfc-esp-8); }

.zfc-entrega__opciones { display: grid; grid-template-columns: 1fr; gap: var(--zfc-esp-3); }

@media (min-width: 700px) {
  .zfc-entrega__opciones { grid-template-columns: 1fr 1fr; }
}

.zfc-entrega__opcion {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-2);
  padding: var(--zfc-esp-4);
  border: 1px solid var(--zfc-borde-medio);
  background: var(--zfc-superficie-bloque);
  cursor: pointer;
}

.zfc-entrega__opcion--activa { border-color: var(--zfc-accion-primaria); border-width: 2px; padding: calc(var(--zfc-esp-4) - 1px); }

.zfc-entrega__opcion input { position: absolute; opacity: 0; width: 0; height: 0; }

.zfc-entrega__cabecera { display: flex; align-items: center; gap: var(--zfc-esp-2); }
.zfc-entrega__cabecera .zfc-icono { flex: none; color: var(--zfc-acento-texto); }
.zfc-entrega__titulo { font-size: var(--zfc-cuerpo-m); font-weight: 600; color: var(--zfc-texto-marca); }
.zfc-entrega__precio { margin-left: auto; font-size: var(--zfc-cuerpo-s); font-weight: 600; color: var(--zfc-exito); }
.zfc-entrega__texto { font-size: var(--zfc-cuerpo-s); line-height: var(--zfc-cuerpo-s-alto); color: var(--zfc-texto-secundario); }

/* El selector nativo de envío sigue ahí para WooCommerce, pero no se ve: lo
   reemplaza el bloque de arriba. */
.woocommerce form.checkout .woocommerce-shipping-totals { display: none; }

/* 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. */
.zfc-checkout--retiro #billing_address_1_field,
.zfc-checkout--retiro #billing_city_field,
.zfc-checkout--retiro #billing_state_field,
.zfc-checkout--retiro #billing_postcode_field,
.zfc-checkout--retiro #billing_country_field { display: none !important; }

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

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

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

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

.zfc-retiro__tienda strong { color: var(--zfc-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 */
.zfc-pedido {
  display: flex;
  flex-direction: column;
  padding: var(--zfc-esp-6);
  background: var(--zfc-superficie-bloque);
  border: 1px solid var(--zfc-borde-sutil);
}

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

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

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

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

.zfc-pedido .wc_payment_methods { list-style: none; margin: 0 0 var(--zfc-esp-4); padding: 0; }

.zfc-pedido .wc_payment_method {
  padding: var(--zfc-esp-3) 0;
  border-bottom: 1px solid var(--zfc-borde-sutil);
}

.zfc-pedido .wc_payment_method label {
  display: inline-flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  font-size: var(--zfc-cuerpo-m);
  font-weight: 600;
  color: var(--zfc-texto-marca);
  cursor: pointer;
}

.zfc-pedido .payment_box {
  margin-top: var(--zfc-esp-2);
  padding: var(--zfc-esp-3);
  background: var(--zfc-superficie-calida);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-pedido .payment_box p { margin: 0; }

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

.woocommerce .zfc-pedido #place_order:hover {
  background: var(--zfc-accion-acento-hover);
  border-color: var(--zfc-accion-acento-hover);
}

.zfc-pedido__ayuda {
  display: block;
  /* `auto` lo manda al fondo de la columna, que en escritorio es más alta que
     la caja: así la caja pegajosa tiene por dónde deslizarse sin alcanzarlo. */
  margin-top: auto;
  padding-top: var(--zfc-esp-4);
  border-top: 1px solid var(--zfc-borde-sutil);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.zfc-drawer { position: fixed; inset: 0; z-index: var(--zfc-capa-panel); }
.zfc-drawer[hidden] { display: none; }

.zfc-drawer__velo {
  position: absolute;
  inset: 0;
  background: rgba(10, 26, 47, .45);
  opacity: 0;
  transition: opacity .25s ease;
}

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

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

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

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

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

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

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

/* Lista de productos del mini carrito.
   Los selectores van anclados a `.zfc-drawer`, no a `.woocommerce` del body:
   el panel se abre desde cualquier página y la home no lleva esa clase, así
   que ahí el mini carrito se quedaba sin estilos.
   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. */
.zfc-drawer__cuerpo ul.cart_list,
.zfc-drawer__cuerpo ul.product_list_widget {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zfc-drawer__cuerpo ul.cart_list li {
  position: relative;
  padding: var(--zfc-esp-3) var(--zfc-esp-6) var(--zfc-esp-3) 0;
  border-bottom: 1px solid var(--zfc-borde-sutil);
  font-size: var(--zfc-cuerpo-s);
}

.zfc-drawer__cuerpo ul.cart_list li > a:not(.remove) {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--zfc-esp-3);
  align-items: center;
  font-weight: 500;
  color: var(--zfc-texto-marca);
  text-decoration: none;
}

.zfc-drawer__cuerpo ul.cart_list li > a:not(.remove):hover { text-decoration: underline; }

.zfc-drawer__cuerpo ul.cart_list li img {
  width: 64px;
  height: auto;
  margin: 0;
  float: none;
  background: #FFFFFF;
}

/* La cantidad se alinea con el nombre, no con la foto. */
.zfc-drawer__cuerpo ul.cart_list li .quantity {
  display: block;
  margin-top: var(--zfc-esp-1);
  padding-left: calc(64px + var(--zfc-esp-3));
  color: var(--zfc-texto-secundario);
  font-variant-numeric: tabular-nums;
}

.zfc-drawer .zfc-drawer__cuerpo ul.cart_list li a.remove {
  position: absolute;
  top: var(--zfc-esp-3);
  right: 0;
  width: 24px;
  height: 24px;
  line-height: 22px;
  font-size: var(--zfc-cuerpo-m);
  font-weight: 400;
  color: var(--zfc-texto-secundario);
  text-align: center;
  background: none;
}

.zfc-drawer .zfc-drawer__cuerpo ul.cart_list li a.remove:hover {
  background: none;
  color: var(--zfc-error);
}

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

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

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

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

.zfc-drawer__cuerpo .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-3);
  margin: var(--zfc-esp-4) 0 0;
}

.zfc-drawer .zfc-drawer__cuerpo .woocommerce-mini-cart__buttons .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--zfc-boton-m);
  padding: 0 var(--zfc-esp-4);
  border: 1px solid var(--zfc-accion-primaria);
  border-radius: var(--zfc-radio);
  background: transparent;
  color: var(--zfc-accion-primaria);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  text-decoration: none;
}

.zfc-drawer .zfc-drawer__cuerpo .woocommerce-mini-cart__buttons .checkout {
  order: -1;
  background: var(--zfc-accion-acento);
  border-color: var(--zfc-accion-acento);
  color: var(--zfc-texto-marca);
}

.zfc-drawer .zfc-drawer__cuerpo .woocommerce-mini-cart__buttons .checkout:hover {
  background: var(--zfc-accion-acento-hover);
  border-color: var(--zfc-accion-acento-hover);
}

.zfc-drawer__cuerpo .woocommerce-mini-cart__empty-message {
  margin: var(--zfc-esp-8) 0;
  text-align: center;
  color: var(--zfc-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. */
.zfc-cargando {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.zfc-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(--zfc-texto-marca);
  border-radius: var(--zfc-radio-redondo);
  color: rgba(10, 26, 47, .25);
  animation: zfc-girar .6s linear infinite;
}

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

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

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

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

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

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

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

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

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

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

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

/* WooCommerce le pone un clearfix con ::before y ::after a `.woocommerce`, y en
   un contenedor grid esos pseudo-elementos cuentan como celdas: se comían la
   primera y la última, así que el menú caía en la columna ancha y el contenido
   en la de 240px, apilados y cruzados. Es el mismo arreglo que ya estaba hecho
   para `ul.products` en secciones.css. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; }

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

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

/* El menu de Mi cuenta es un `details`. En la portada nace abierto, porque ahi
   ES el contenido; dentro de una seccion nace plegado a una fila. */
.zfc-cuenta__nav-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zfc-esp-2);
  min-height: var(--zfc-alto-tactil);
  padding-bottom: var(--zfc-esp-2);
  border-bottom: 1px solid var(--zfc-borde-medio);
  font-size: var(--zfc-etiqueta);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--zfc-texto-marca);
  cursor: pointer;
  list-style: none;
}

.zfc-cuenta__nav-titulo::-webkit-details-marker { display: none; }

.zfc-cuenta__nav-titulo::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}

.zfc-cuenta__nav[open] > .zfc-cuenta__nav-titulo::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* De 900 arriba es una barra lateral y siempre se ve entera: ahi no hay
   pantalla que ganar y plegarla solo escondería la navegación. */
@media (min-width: 900px) {
  .zfc-cuenta__nav-titulo { display: none; }
  .zfc-cuenta__nav > nav { display: block; }
}

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

.woocommerce-MyAccount-navigation li.is-active a { font-weight: 600; color: var(--zfc-texto-marca); }
.woocommerce-MyAccount-navigation li a:hover { color: var(--zfc-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(--zfc-boton-m);
  padding: 0 var(--zfc-esp-6);
  border: 1px solid var(--zfc-accion-primaria);
  border-radius: var(--zfc-radio);
  background: var(--zfc-accion-primaria);
  color: var(--zfc-texto-inverso);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  cursor: pointer;
}

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

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

/* El botón de «ver contraseña» que mete WooCommerce.
 *
 * Es un `<button>` SIN NINGÚN ESTILO: se veía como el botón por defecto del
 * navegador, un cuadro gris con borde en relieve dentro del campo. Su icono lo
 * pinta WooCommerce con su propia fuente de iconos, que llega en
 * `woocommerce-layout.css`, y este tema la desencola a propósito porque arma
 * sus grillas con CSS grid. O sea que el icono no existía y nadie lo había
 * mirado: solo se ve entrando a Mi cuenta sin sesión.
 *
 * El ojo va como SVG en línea, en un `data:` URI, y no como fuente de iconos:
 * así no depende de nada que se pueda desencolar. Al mostrar la contraseña,
 * WooCommerce añade `.display-password` y el ojo se tacha. */
.woocommerce form .show-password-input {
  position: absolute;
  right: var(--zfc-esp-2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--zfc-alto-tactil);
  height: var(--zfc-alto-tactil);
  padding: 0;
  border: 0;
  border-radius: var(--zfc-radio);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F3E4E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  cursor: pointer;
}

.woocommerce form .show-password-input:hover,
.woocommerce form .show-password-input:focus-visible {
  background-color: var(--zfc-superficie-hundida);
}

/* Mostrando la contraseña: el ojo tachado. Sin esto el botón se ve igual en los
   dos estados y no se sabe si está mostrando o escondiendo.
 *
 * Se ata al TIPO REAL del campo y no a una clase de WooCommerce. La clase
 * `.display-password` que su documentación nombra no se aplica en esta versión:
 * comprobado en el navegador, el botón cambia el `type` del input de `password`
 * a `text` y no toca ninguna clase. Mirando el `type` da igual qué haga
 * WooCommerce en la próxima versión. */
.woocommerce form .password-input:has(input[type="text"]) .show-password-input,
.woocommerce form .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F3E4E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E");
}

/* El campo deja sitio para el botón, o el texto pasa por debajo del ojo. */
.woocommerce form .password-input input { padding-right: var(--zfc-alto-tactil); }

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

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

/* --- Pasos de la compra --------------------------------------------------- */

/* En un pedido que se paga por transferencia, saber cuánto falta es la
   diferencia entre terminar y dejarlo a medias. */
.zfc-pasos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zfc-esp-2) var(--zfc-esp-4);
  margin: 0 0 var(--zfc-esp-6);
  padding: 0;
  font-size: var(--zfc-cuerpo-s);
}

.zfc-pasos__paso {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  color: var(--zfc-texto-secundario);
}

/* La flecha entre pasos es decorativa: se dibuja, no se escribe, para que no
   la lea un lector de pantalla. */
.zfc-pasos__paso + .zfc-pasos__paso::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--zfc-borde-medio);
}

.zfc-pasos__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--zfc-radio-redondo);
  background: var(--zfc-superficie-hundida);
  color: var(--zfc-texto-secundario);
  font-size: var(--zfc-etiqueta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.zfc-pasos__paso--hecho .zfc-pasos__numero { background: var(--zfc-accion-primaria); color: var(--zfc-texto-inverso); }
.zfc-pasos__paso--hecho a { color: var(--zfc-texto-secundario); }

.zfc-pasos__paso--actual { color: var(--zfc-texto-marca); font-weight: 600; }
.zfc-pasos__paso--actual .zfc-pasos__numero { background: var(--zfc-accion-acento); color: var(--zfc-texto-marca); }

/* --- Barra fija del pedido ------------------------------------------------ */

/* Solo en móvil: en escritorio la columna del pedido es pegajosa y el botón se
   ve sin recorrer nada. */
.zfc-barra-pedido { display: none; }

@media (max-width: 899px) {
  .zfc-barra-pedido {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--zfc-capa-barra-fija);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zfc-esp-4);
    padding: var(--zfc-esp-3) var(--zfc-esp-4);
    padding-bottom: calc(var(--zfc-esp-3) + env(safe-area-inset-bottom));
    background: var(--zfc-superficie-inversa);
    box-shadow: var(--zfc-sombra-3);
  }

  .zfc-barra-pedido__etiqueta {
    display: block;
    font-size: var(--zfc-etiqueta);
    color: var(--zfc-texto-inverso-tenue);
  }

  .zfc-barra-pedido__monto {
    display: block;
    font-size: var(--zfc-h6);
    font-weight: 600;
    color: var(--zfc-texto-inverso);
    font-variant-numeric: tabular-nums;
  }

  .zfc-barra-pedido .zfc-boton { flex: none; }

  /* Sitio para que la barra no tape el final del formulario. La clase del
     formulario es `checkout`; `zfc-checkout--retiro` solo aparece cuando se
     elige retiro en tienda, así que no sirve de gancho. */
  .woocommerce form.checkout { padding-bottom: 88px; }
}

/* --- Mis cotizaciones ----------------------------------------------------- */

.zfc-cotizaciones__intro,
.zfc-cotizaciones__nota {
  color: var(--zfc-texto-secundario);
  font-size: var(--zfc-cuerpo-s);
  line-height: var(--zfc-cuerpo-s-alto);
}

.zfc-cotizaciones__intro { margin: 0 0 var(--zfc-esp-4); }
.zfc-cotizaciones__nota { margin: var(--zfc-esp-4) 0 0; }

.zfc-cotizaciones__sin-marco { color: var(--zfc-texto-secundario); }

/* El estado se lee de un vistazo: es lo único que la persona viene a mirar. */
.zfc-cotizaciones__estado {
  display: inline-flex;
  align-items: center;
  padding: var(--zfc-esp-1) var(--zfc-esp-3);
  font-size: var(--zfc-etiqueta);
  line-height: var(--zfc-etiqueta-alto);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--zfc-info-fondo);
  color: var(--zfc-info);
}

.zfc-cotizaciones__estado--respondida { background: var(--zfc-exito-fondo); color: var(--zfc-exito); }
.zfc-cotizaciones__estado--revisando { background: var(--zfc-aviso-fondo); color: var(--zfc-aviso); }
.zfc-cotizaciones__estado--cerrada { background: var(--zfc-superficie-hundida); color: var(--zfc-texto-secundario); }