/*
 * Reskin de los bloques nativos de WooCommerce (Cart/Checkout/Filtros/Product Collection)
 * para que coincidan visualmente con el sistema de diseño Telemax.
 * Se empieza a rellenar en la fase de Carrito/Checkout (V5/V6).
 */

/* ============================================================
 * V5 Carrito — reskin de bloque NATIVO de WooCommerce (woocommerce/cart)
 * (templates/page-cart.html + página "Cart" ID 7). El cuerpo del carrito
 * (líneas, cantidad, subtotales, cupón, totales, botón de checkout) es
 * hidratado en el navegador vía Interactivity/React a partir de la Store
 * API — en el servidor solo se pintan contenedores vacíos (por eso NO se
 * puede verificar con curl sin navegador; ver rest-contract del bloque en
 * wp-content/plugins/woocommerce/assets/client/blocks/cart.css, que es
 * donde se han confirmado estos nombres de clase reales). Las reglas
 * .cart-item / .cart-summary / .cart-coupon / .qty-selector (y derivadas)
 * ya existentes en este archivo (sección "V5 Carrito — CartLayout..." más
 * arriba) son CSS
 * MUERTO: apuntaban al marcado a mano del mockup, que nunca aparece en el
 * DOM real del bloque nativo. No se tocan (podrían reutilizarse en el
 * futuro); estas reglas nuevas son las que realmente pintan la página.
 * ============================================================
 *
 * ACTUALIZACIÓN: la página Cart (ID 7) ya NO usa el bloque nativo
 * woocommerce/cart — pasó a las plantillas clásicas de WooCommerce
 * (themes/telemax/woocommerce/cart/*.php), que pintan el marcado a mano del
 * mockup (.cart-item/.cart-summary/.cart-coupon/.qty-selector, la sección
 * "V5 Carrito — CartLayout..." de style.css, antes marcada muerta) en vez
 * de la <table> por defecto. Por tanto TODAS las reglas .wp-block-
 * woocommerce-cart / .wc-block-cart-* / .wc-block-components-* de esta
 * sección (líneas de aquí en adelante) son ahora las que están MUERTAS — se
 * dejan sin tocar por si algún día se vuelve al bloque nativo.
 * ============================================================ */

/* --- Contenedor general: mismo ancho/padding que el resto del sitio --- */
.wp-block-woocommerce-cart.alignwide {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: var(--space-8) var(--container-padding-desktop) var(--space-16);
}
@media (max-width: 767.98px) {
  .wp-block-woocommerce-cart.alignwide {
    padding: var(--space-6) var(--container-padding-mobile) var(--space-8);
  }
}

/* --- Layout de 2 columnas (items+cross-sell / totales) con sticky ---
   WooCommerce ya divide en 65%/35% vía .wc-block-cart__main/.wc-block-cart__sidebar
   (con su propio breakpoint por container-query a 700px de ancho del propio
   bloque). Aquí se fuerza el apilado hasta 1024px (regla de diseño Telemax)
   y se añade la posición sticky de la columna de totales en desktop. */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout.wc-block-cart {
  gap: var(--space-12);
  align-items: flex-start;
  flex-wrap: nowrap;
}
@media (max-width: 1023px) {
  .wp-block-woocommerce-cart .wc-block-components-sidebar-layout.wc-block-cart {
    display: flex;
    flex-direction: column;
  }
  .wp-block-woocommerce-cart .wc-block-components-sidebar-layout.wc-block-cart .wc-block-cart__main,
  .wp-block-woocommerce-cart .wc-block-components-sidebar-layout.wc-block-cart .wc-block-cart__sidebar {
    width: 100%;
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .wp-block-woocommerce-cart .wc-block-cart__sidebar {
    position: sticky;
    top: 160px;
    align-self: flex-start;
  }
}

/* --- Tabla de artículos (table.wc-block-cart-items) ---
   El fondo/borde de la tabla se aplican al DIV que la envuelve
   (.wp-block-woocommerce-cart-line-items-block), no a la propia <table>:
   WooCommerce fuerza table.wc-block-cart-items{background:none!important}
   en su propio CSS, así que pelear esa regla con más especificidad no
   serviría de nada. */
.wp-block-woocommerce-cart-line-items-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
}
.wc-block-cart-items { width: 100%; }
.wc-block-cart-items__header th {
  padding: var(--space-3) var(--space-5);
  background: var(--color-mist);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-steel);
  text-align: left;
}
.wc-block-cart-items__header-total { text-align: right; }
@media (max-width: 1023px) {
  .wc-block-cart-items__header { display: none; }
}
.wc-block-cart-items__row td {
  padding: var(--space-4) var(--space-5);
}

/* Miniatura */
.wc-block-cart-item__image img {
  border-radius: var(--radius-md);
  background: var(--color-mist);
}

/* Nombre + metadatos (variación/atributos) */
.wc-block-components-product-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--color-brand-orange); }
.wc-block-components-product-metadata {
  color: var(--color-steel);
}

/* Selector de cantidad — mismo look "pill" que .qty-selector del mockup */
.wc-block-components-quantity-selector {
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.wc-block-components-quantity-selector__button {
  width: 40px;
  min-width: 40px;
  background: var(--color-mist);
  opacity: 1;
  font-weight: 700;
  color: var(--color-ink);
}
.wc-block-components-quantity-selector__button:hover,
.wc-block-components-quantity-selector__button:focus { background: var(--color-border); opacity: 1; }
.wc-block-components-quantity-selector__input {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-ink);
}

/* Enlace "Eliminar" (texto, no icono — el bloque nativo no expone un icono
   de papelera; se reskinea como enlace discreto en gris/rojo al hover, igual
   que .cart-item__remove pero sin el <svg>). */
.wc-block-cart-item__remove-link {
  color: var(--color-steel);
  font-size: var(--text-caption);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wc-block-cart-item__remove-link:hover { color: var(--color-danger); }

/* Precio unitario / subtotal de línea */
.wc-block-cart-item__prices,
.wc-block-cart-item__total {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-ink);
}

/* --- Cross-sell "Comprado junto con" (woocommerce/product-collection,
   collection: cross-sells) — reutiliza .cart-related/.cart-related__title
   (className del propio bloque/heading en el post_content de la página
   Cart) y .product-grid (mismo className que usa la PLP para
   woocommerce/product-template, ver templates/archive-product.html) para
   heredar el grid de tarjetas ya existente. Las reglas base .cart-related/
   .cart-related__title son las de la primera iteración (solo tipografía);
   aquí se añade el refinamiento "V5 feedback" (fondo/borde/franja naranja)
   que en el mockup solo vivía en el <style> inline de V5-carrito-desktop.html. */
/* Tarjeta gris: la sección vuelve a vivir dentro de la columna izquierda del
   carrito, debajo del código de descuento (5-oct-2026), y ahí la caja es lo que
   la separa del cupón que tiene justo encima. */
.wp-block-woocommerce-product-collection.cart-related,
.cart-related {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-mist);
}
.cart-related__title::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-brand-orange);
  vertical-align: middle;
  margin-right: var(--space-2);
}
.cart-related .product-card__ctas .btn,
.cart-related .product-card__ctas a.btn { width: 100%; justify-content: center; }

/* --- Cupón (woocommerce/cart-order-summary-coupon-form-block) --- */
.wc-block-components-totals-coupon__form {
  margin-top: var(--space-3);
}
.wc-block-components-totals-coupon__input input,
.wc-block-components-totals-coupon__input {
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--color-ink);
}
.wc-block-components-totals-coupon__input input:focus {
  border-color: var(--color-brand-orange);
  box-shadow: var(--shadow-focus);
}
.wc-block-components-totals-coupon__button {
  border-radius: var(--radius-md);
  font-weight: 600;
}

/* --- Resumen de totales (columna derecha) --- */
.wc-block-cart__sidebar {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.wc-block-cart__totals-title {
  background: var(--color-mist);
  border-bottom: 1px solid var(--color-border);
}
.wc-block-components-totals-item {
  font-size: var(--text-small);
}
.wc-block-components-totals-item__label { color: var(--color-steel); }
.wc-block-components-totals-item__value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
}

/* --- Botón "Proceed to Checkout" (woocommerce/proceed-to-checkout-block) --- */
.wc-block-cart__submit-button {
  background: var(--color-brand-orange);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 700;
  text-transform: none;
  min-height: 52px;
}
.wc-block-cart__submit-button:hover { background: var(--color-brand-red); }

/* --- Bloques que quedan vacíos si no hay pasarelas express/aceptadas
   configuradas (Apple Pay/Google Pay, iconos de tarjetas) — se ocultan
   para no dejar huecos en blanco en el layout. --- */
.wp-block-woocommerce-cart-express-payment-block:empty,
.wp-block-woocommerce-cart-accepted-payment-methods-block:empty {
  display: none;
}

/* --- Kicker bajo el título de "Comprado junto con" (wp:paragraph inyectado
   en el post_content de la página Cart, dentro del product-collection). --- */
.cart-related__kicker {
  font-size: var(--text-small);
  color: var(--color-steel);
  margin: 0 0 var(--space-4);
}

/* --- CTAs secundarios + trust badges + banner de presupuesto, inyectados a
   mano en el cart-totals-block (columna derecha) vía post_content de la
   página Cart — no existen como sub-bloques nativos del Cart block.
   .cart-summary__ctas ya tenía display/gap definidos en la sección "V5
   Carrito — CartLayout..." (CSS muerto del mockup, más arriba en style.css);
   aquí solo se añade el espaciado respecto al botón de checkout nativo. --- */
.cart-summary__ctas { margin-top: var(--space-4); }
.cart-invoice-banner {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-mist);
}
.cart-invoice-banner__title { font-size: var(--text-small); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-2); }
.cart-invoice-banner__text { font-size: var(--text-caption); color: var(--color-steel); margin: 0 0 var(--space-3); line-height: 1.5; }

/* --- Woocommerce cart layout --- */
.woocommerce-cart main .woocommerce {
  max-width: initial;
}

/* --- Woocommerce checkout layout --- */
.woocommerce-checkout main .woocommerce {
  max-width: initial;
}

.checkout-summary--sticky-fit {
  scrollbar-gutter: initial;
}

.woocommerce-checkout #payment div.payment_box {
  margin-bottom: 0;
}

.woocommerce-checkout .checkout-layout {
  padding: 0;
  max-width: initial;
  margin: 0;
}

.woocommerce-checkout main .woocommerce {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-desktop);
  padding-right: var(--container-padding-desktop);
  padding-bottom: var(--space-8);
}

@media (max-width: 767.98px) {
  .woocommerce-checkout main .woocommerce {
    padding-left: 0;
    padding-right: 0;
  }
}

.woocommerce-checkout .woocommerce form .form-row {
  display: block;
  margin: 0;
  padding: 0;
  float: none
}

.checkout_coupon.woocommerce-form-coupon {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.woocommerce-page .woocommerce-form-coupon .button {
  min-height: initial;
  height: 46.4px;
  padding-top: 0; 
  padding-bottom: 0;
}

.wc-block-components-notice-banner svg {
  color: white;
}

/* .woocommerce-form-coupon-toggle,
.woocommerce form.checkout_coupon {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-desktop);
  padding-right: var(--container-padding-desktop);
} */

@media (max-width: 767.98px) {
  .wc-block-components-notice-banner,
  .woocommerce form.checkout_coupon {
    margin-left: var(--container-padding-mobile);
    margin-right: var(--container-padding-mobile);
  }
}

.woocommerce-checkout-payment .checkout-terms__check {
  margin: 0;
}

/* ============================================================
 * Mi cuenta — área privada
 *
 * El área privada corría con el aspecto de serie de WooCommerce: la <nav> salía
 * como lista suelta encima del contenido y las tablas caían en woocommerce.css.
 * Ahora el marcado lo emiten los overrides de themes/telemax/woocommerce/myaccount/,
 * así que estas reglas visten clases propias (.account-*) y solo se apoyan en las
 * de WooCommerce donde la plantilla no se sobreescribe (recuperar contraseña y
 * añadir método de pago, que siguen con .woocommerce-form-row / .woocommerce-Input).
 *
 * No hay maqueta de referencia: el design hub dejó "Mi cuenta B2B" fuera de
 * alcance (SCREEN-INVENTORY.md §V12). El layout reutiliza los patrones ya
 * aprobados en otras pantallas: la rejilla con aside sticky de .contact-layout,
 * la tarjeta de .filter-sidebar para el menú, el colapso de tabla de
 * .cart-table-head y las tarjetas de .checkout-block.
 * ============================================================ */

/* El ancho y el padding los pone el .container de page-mi-cuenta.html; el
   wrapper .woocommerce que mete el shortcode no debe volver a ponerlos. */
.woocommerce-account .account-main .woocommerce {
  max-width: none;
  margin: 0;
  padding: 0;
}

.woocommerce-account .wc-block-components-notice-banner {
  margin-top: 0;
}

/* --- Rejilla: menú + contenido --- */
.account-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .account-layout {
    display: grid;
    /* minmax(0,1fr) y no 1fr: sin él la tabla de pedidos ensancha la columna
       y desborda la rejilla. */
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
}
/* min-width:0 por lo mismo: es un ítem de grid con contenido de ancho propio. */
.account-content { min-width: 0; }

/*
 * woocommerce-layout.css flota el menú al 30% y el contenido al 68%:
 *   .woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}
 *   .woocommerce-account .woocommerce-MyAccount-content{float:right;width:68%}
 * Dentro de la rejilla eso dejaba la tarjeta del menú en 78px (el 30% de la
 * columna de 260) con todas las etiquetas partidas en varias líneas. Se anula:
 * el ancho ya lo da la rejilla.
 */
.woocommerce-account .account-layout .woocommerce-MyAccount-navigation,
.woocommerce-account .account-layout .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

/* --- Menú --- */
.account-nav__title {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-steel);
  margin: 0 0 var(--space-3);
}
.account-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.account-nav__link {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
/* El hover no cambia a naranja (3,3:1 en texto pequeño): se subraya. */
.account-nav__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.account-nav__link:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
  /* Tarjeta lateral pegajosa, mismo tratamiento que .filter-sidebar. */
  .account-nav {
    position: sticky;
    top: var(--header-sticky-offset);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
  }
  .account-nav__item + .account-nav__item { border-top: 1px solid var(--color-border); }
  /* is-active la emite wc_get_account_menu_item_classes(). */
  /* El activo se marca con la barra naranja y el peso, no con el color del
     texto: en 14px el naranja no llega a 4,5:1 sobre blanco. */
  .account-nav__item.is-active .account-nav__link {
    color: var(--color-ink);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--color-brand-orange);
    padding-left: var(--space-3);
    margin-left: calc(var(--space-3) * -1 - 3px);
  }
}

@media (max-width: 1023.98px) {
  /* Tira horizontal desplazable, mismo mecanismo que .plp-tabs: el menú de
     cuenta tiene 6 entradas y en 390px no cabe de otra forma. */
  .account-nav__title { display: none; }
  .account-nav {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
  }
  /*
   * Se ENVUELVE, no se desplaza. Con nowrap + overflow-x y la barra de scroll
   * oculta, la tira medía 533px en 358px visibles y "Detalles de la cuenta" y
   * "Salir" quedaban fuera sin ninguna pista de que hubiera más. En las vistas
   * que no son el escritorio, "Salir" es el único cierre de sesión de la página.
   */
  .account-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
  }
  .account-nav__item { flex: 0 0 auto; }
  .account-nav__link {
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) 0 var(--space-3);
  }
  .account-nav__item.is-active .account-nav__link {
    color: var(--color-ink);
    font-weight: 700;
    border-bottom-color: var(--color-brand-orange);
  }
}

/* --- Escritorio de la cuenta --- */
.account-dashboard__greeting {
  font-size: var(--text-body-lg);
  color: var(--color-ink);
  margin: 0 0 var(--space-8);
}
/* Mismo motivo: texto pequeño, así que ink subrayado en vez de naranja. */
.account-dashboard__logout {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: var(--space-2);
}
.account-dashboard__logout:hover { text-decoration-thickness: 2px; }

.account-dashboard__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .account-dashboard__cards { grid-template-columns: repeat(3, 1fr); }
}
.account-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
.account-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.account-card:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.account-card__icon { width: 28px; height: 28px; color: var(--color-brand-orange); }
.account-card__icon svg { width: 100%; height: 100%; }
.account-card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.account-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--color-ink);
}
.account-card__text { font-size: var(--text-small); line-height: 1.5; color: var(--color-steel); }

.account-dashboard__help {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-mist);
  border-radius: var(--radius-md);
}
.account-dashboard__help-title {
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-1);
}
.account-dashboard__help-text {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--color-steel);
  margin: 0 0 var(--space-4);
}

/* --- Tabla de pedidos --- */
/* Se cualifica con .woocommerce-account y table para superar a
   `.woocommerce table.shop_table` (0-2-1), que si no impone su propio borde
   (currentColor al 20%), radio de 5px y un margin-right de -1px. */
.woocommerce-account table.account-orders {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
  font-size: var(--text-small);
}
.account-orders__th {
  background: var(--color-mist);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-steel);
  white-space: nowrap;
}
.account-orders__cell {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
}
/* Ink y no naranja: #FE5000 sobre blanco solo da 3,3:1 y esto es texto pequeño,
   que exige 4,5:1. El subrayado lo identifica como enlace sin depender del color. */
.account-orders__number {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.account-orders__number:hover { text-decoration-thickness: 2px; }
.account-orders__total { display: block; font-weight: 700; color: var(--color-ink); }
.account-orders__items { display: block; font-size: var(--text-caption); color: var(--color-steel); }
.account-orders__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* 768px y no 767.98: woocommerce-smallscreen.css se sirve con
   `only screen and (max-width: 768px)` INCLUSIVO (filtro
   woocommerce_style_smallscreen_breakpoint), y esconde el thead y los <th> del
   tbody. Cortando en 767.98 quedaba una franja muerta justo en 768px donde
   WooCommerce ocultaba el número de pedido y las contra-reglas del tema no
   entraban: la lista salía sin número y sin tarjeta. */
@media (max-width: 768px) {
  /* La tabla se apila: se oculta el thead y cada celda muestra su etiqueta
     desde data-title, que la plantilla ya emite. Mismo criterio que
     .cart-table-head en el carrito. */
  .account-orders thead { display: none; }
  .account-orders,
  .account-orders tbody,
  .account-orders__row,
  .account-orders__cell { display: block; width: 100%; }
  /* `.woocommerce table.shop_table` (0-2-1) impone borde, radio y márgenes
     negativos; con la tabla apilada eso dejaba un recuadro extra rodeando las
     tres tarjetas. Hay que igualar su especificidad para anularlo. */
  .woocommerce-account table.account-orders {
    border: 0;
    border-radius: 0;
    margin: 0;
  }
  .account-orders__row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
  }
  .account-orders__row + .account-orders__row { margin-top: var(--space-4); }
  .account-orders__cell {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-top: 0;
  }
  /*
   * woocommerce-smallscreen.css esconde los <th> del <tbody>
   * (.woocommerce table.shop_table_responsive tbody th{display:none}), y el
   * número de pedido va justamente en un <th scope="row">: las tarjetas salían
   * sin el número. Se devuelve a la vista y se usa como cabecera de la tarjeta.
   */
  /* La regla de WooCommerce es `.woocommerce table.shop_table_responsive tbody th`
     (0-2-3), así que hay que igualarla o superarla: 0-3-2. */
  .woocommerce-account table.account-orders tbody th.woocommerce-orders-table__cell-order-number {
    display: flex;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }
  .woocommerce-orders-table__cell-order-number .account-orders__number { font-size: var(--text-body); }
  /* Cualificado para superar a
     ".woocommerce table.shop_table_responsive tbody td:before" (0-3-2), que
     añade ": " y dejaba "PEDIDO" sin dos puntos y "FECHA:" con ellos. */
  .woocommerce-account table.account-orders tbody .account-orders__cell::before {
    content: attr(data-title);
    font-size: var(--text-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-steel);
    flex: 0 0 auto;
  }
  .woocommerce-orders-table__cell-order-actions {
    display: block;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2);
  }
  .woocommerce-orders-table__cell-order-actions::before { content: none; }
  .account-orders__actions .btn { flex: 1 1 auto; justify-content: center; }
}

.account-pagination {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* --- Detalle de pedido --- */
.account-order__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-mist);
  border-radius: var(--radius-lg);
  margin: 0 0 var(--space-8);
}
@media (min-width: 768px) {
  .account-order__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.account-order__meta-item { display: flex; flex-direction: column; gap: var(--space-1); }
.account-order__meta-label {
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-steel);
}
.account-order__meta-value { font-size: var(--text-body); font-weight: 700; color: var(--color-ink); }

.account-order__notes-title,
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--color-ink);
  margin: var(--space-8) 0 var(--space-4);
}
.account-order__notes { list-style: none; margin: 0; padding: 0; }
.account-order__note {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.account-order__note + .account-order__note { margin-top: var(--space-3); }
.account-order__note-date {
  font-size: var(--text-caption);
  color: var(--color-steel);
  margin: 0 0 var(--space-2);
}
.account-order__note-text p { margin: 0; font-size: var(--text-small); line-height: 1.6; }

/* Tabla de artículos y direcciones del pedido: las pinta
   templates/order/order-details.php, que NO se sobreescribe, así que aquí solo
   se reskinean sus clases nativas. */
.woocommerce-account .woocommerce-table--order-details {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: var(--text-small);
}
.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-top: 1px solid var(--color-border);
}
.woocommerce-account .woocommerce-table--order-details thead th {
  background: var(--color-mist);
  border-top: 0;
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-steel);
}
.woocommerce-account .woocommerce-table--order-details .woocommerce-Price-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Los nombres de producto son enlaces y heredaban el naranja de marca: 3,3:1
   sobre blanco a 14px. Mismo criterio que en el resto del área privada: ink
   con subrayado, que además los identifica como enlace sin usar el color. */
.woocommerce-account .woocommerce-table--order-details a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce-account .woocommerce-table--order-details a:hover { text-decoration-thickness: 2px; }
.woocommerce-account .woocommerce-customer-details address {
  font-style: normal;
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-steel);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* --- Direcciones guardadas --- */
.account-addresses__intro {
  font-size: var(--text-small);
  color: var(--color-steel);
  margin: 0 0 var(--space-6);
}
.account-addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .account-addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.account-address-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.account-address-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}
.account-address-card__address {
  font-style: normal;
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-steel);
  /* Empuja el botón al pie de la tarjeta para que las dos queden alineadas. */
  flex: 1 1 auto;
  margin: 0;
}
.account-address-card__empty { color: var(--color-steel); }
.account-address-card__edit { align-self: flex-start; }

/* --- Formularios de la cuenta --- */
.account-form .checkout-block + .checkout-block { margin-top: var(--space-6); }

/*
 * woocommerce_form_field() envuelve cada campo en <p class="form-row">, y
 * .form-row del tema es una rejilla de 2 columnas (style.css) que además
 * .checkout-block la pasa a display:block. Las dos ganan por orden a .field, así
 * que hay que devolverle su columna flex cuando ambas coinciden.
 */
.account-form .field.form-row,
.account-main .field.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  /* WooCommerce flota .form-row-first/-last al 47% (nombre y apellidos salían a
     175px dentro de una columna de 373). Las columnas ya las reparte .form-grid. */
  float: none;
  width: auto;
}
/* El <span> que WooCommerce mete entre la etiqueta y el control. */
.account-main .field .woocommerce-input-wrapper { display: block; width: 100%; }
/* El asterisco que emite woocommerce_form_field() es
   <span class="required" aria-hidden="true">*</span>, no un <abbr>. Se alinea
   con .field__required-mark del checkout para no tener dos rojos distintos
   para lo mismo en páginas contiguas. */
.account-main .field .required {
  color: var(--color-danger);
  border: 0;
  text-decoration: none;
  margin-left: 2px;
}
.account-main .field .optional { color: var(--color-steel); font-weight: 400; }
/*
 * La regla ".woocommerce form .form-row .input-text" de woocommerce.css tiene
 * especificidad 0-3-1 y gana tanto a .field__input (0-1-0) como a
 * ".woocommerce-account input.input-text" (0-2-1): los campos de dirección
 * salían con el borde y el radio de WooCommerce (--wc-form-border-*) en vez de
 * los del tema, y con el borde negro al enfocar en vez del naranja.
 */
.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row textarea.input-text {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}
.woocommerce-account .form-row input.input-text:focus,
.woocommerce-account .form-row textarea.input-text:focus {
  outline: none;
  border-color: var(--color-brand-orange);
  box-shadow: var(--shadow-focus);
}

/*
 * País y Provincia los convierte selectWoo/select2 en un widget: el <select>
 * real queda escondido (.select2-hidden-accessible, 1x1, aria-hidden) y lo que
 * ve y enfoca el usuario es .select2-selection. Vestir select.field__input no
 * pintaba nada, y el foco caía en el anillo azul por defecto del navegador.
 */
.account-main .field .select2-container { width: 100%; }
.account-main .field .select2-selection--single {
  height: 48px;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.account-main .field .select2-selection--single .select2-selection__rendered {
  padding: 0 var(--space-4);
  line-height: 1.4;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}
.account-main .field .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: var(--space-2);
}
.account-main .field .select2-container--focus .select2-selection--single,
.account-main .field .select2-container--open .select2-selection--single {
  border-color: var(--color-brand-orange);
  box-shadow: var(--shadow-focus);
  outline: none;
}
/* El <select> nativo escondido no debe recibir alto del tema. */
.account-main .field select.select2-hidden-accessible { height: auto; }

/* --- Acceso / registro --- */
.account-auth {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 480px;
}
@media (min-width: 768px) {
  .account-auth--two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}
.account-auth-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 1024px) {
  .account-auth-card { padding: var(--space-8); }
}
.account-auth-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-6);
}
/* WooCommerce pinta su propio marco en los formularios de acceso y registro
   (woocommerce.css: form.login / form.register con borde, radio y padding), y
   dentro de .account-auth-card quedaban dos recuadros, uno metido en el otro.
   El cliente lo reportó el 22-sep. La tarjeta ya es el recuadro. */
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-account form.login,
.woocommerce-account form.register {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* La casilla del boletín iba sangrada respecto al resto del formulario y el
   cuadro no quedaba a la altura de la primera línea (petición del 22-sep). */
.account-auth-card .tlx-newsletter-optin { margin: 0; padding: 0; }
/* La alineación fina del cuadro vive en style.css (.tlx-newsletter-optin__label). */

.account-auth-card .account-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.account-auth-card__remember {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-steel);
  cursor: pointer;
}
.account-auth-card__remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand-orange);
  cursor: pointer;
  flex-shrink: 0;
}
.account-auth-card .form-actions { margin-top: 0; }
.account-auth-card .form-actions .btn { width: 100%; justify-content: center; }
.account-auth-card__lost { margin: 0; }
.account-auth-card__lost a {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.account-auth-card__lost a:hover { text-decoration-thickness: 2px; }

/* --- Plantillas que NO se sobreescriben ---
 * Recuperar/restablecer contraseña y añadir método de pago siguen con el marcado
 * de serie (.woocommerce-form-row + .woocommerce-Input + .woocommerce-button).
 * Antes había aquí un `display:block !important` sobre .woocommerce-form-row para
 * deshacer la rejilla de .form-row del tema; ahora va acotado a esos formularios,
 * y sin !important, porque los que sí se sobreescriben ya no emiten esa clase. */
/* Las dos vistas de contraseña (recuperar y restablecer) comparten estas clases.
   Sin ancho máximo el formulario se estiraba a los 1116px del contenedor: un campo
   de una línea y un botón a todo lo ancho de la página. */
.woocommerce-account .woocommerce-ResetPassword { max-width: 480px; }
.woocommerce-account .woocommerce-ResetPassword > p:first-child {
  margin: 0 0 var(--space-6);
  color: var(--color-steel);
}
.woocommerce-account .woocommerce-ResetPassword .woocommerce-form-row,
.woocommerce-account #add_payment_method .woocommerce-form-row {
  display: flex;
  flex-direction: column;
  /* Sin esto el estirado de la columna llevaba el botón al 100 % del ancho. */
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.woocommerce-account .woocommerce-ResetPassword .woocommerce-form-row label,
.woocommerce-account #add_payment_method .woocommerce-form-row label { align-self: stretch; }
/* WooCommerce marca la fila del usuario como form-row-first, y woocommerce.css le
   da `float:left; width:47%` (0-3-0): dentro de un formulario de 480px el campo se
   quedaba en 220px. Se neutraliza con 0-3-1 (p.form-row), no con !important. */
.woocommerce-account .woocommerce-ResetPassword p.form-row,
.woocommerce-account #add_payment_method p.form-row {
  float: none;
  width: auto;
}
.woocommerce-account .woocommerce-form-row label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-ink);
}
.woocommerce-account .woocommerce-form-row .required { color: var(--color-brand-orange); }
.woocommerce-account input.woocommerce-Input,
.woocommerce-account input.input-text {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}
.woocommerce-account input.woocommerce-Input:focus,
.woocommerce-account input.input-text:focus {
  outline: none;
  border-color: var(--color-brand-orange);
  box-shadow: var(--shadow-focus);
}
/* :not(.btn) — este bloque existe para vestir los botones que pinta
   WooCommerce por su cuenta (métodos de pago, descargas...), no los nuestros.
   Sin la exclusión ganaba por especificidad (0,2,1) a las variantes del tema
   (0,1,0): el "Registrarse" de Mi cuenta, que es .btn.btn--outline, se
   quedaba con el fondo naranja de esta regla Y con el anillo de 2px de la
   variante outline encima, o sea un botón naranja con borde negro. */
.woocommerce-account button.woocommerce-Button:not(.btn),
.woocommerce-account button.woocommerce-button:not(.btn),
.woocommerce-account input.woocommerce-Button:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-brand-orange);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
}
.woocommerce-account button.woocommerce-Button:not(.btn):hover,
.woocommerce-account button.woocommerce-button:not(.btn):hover,
.woocommerce-account input.woocommerce-Button:not(.btn):hover { background: var(--color-brand-red); }
/* Los avisos de WooCommerce y downloads.php emiten el botón como <a class="button">
   (p. ej. "Explorar los productos"), que sin esto salía como texto plano. */
/* Excepción: los enlaces DENTRO de un banner de aviso (p. ej. «Confirmar
   dirección de correo electrónico» en Pedidos) no se tocan. WooCommerce los
   fuerza a enlace de texto con
   `.wc-block-components-notice-banner > … .wc-forward { background: transparent
   !important; color: #2f2f2f !important }`, y ese gris sobre el fondo del banner
   ya cumple contraste de sobra, así que competir a base de !important solo
   dejaría CSS que no aplica. */
/* Misma exclusión que arriba: los enlaces de acción de Pedidos ya llevan
   .btn con su variante (ver woocommerce/myaccount/orders.php). */
.woocommerce-account .account-content a.button:not(.btn),
.woocommerce-account .account-content a.wc-forward:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-account .account-content a.button:not(.btn):hover,
.woocommerce-account .account-content a.wc-forward:not(.btn):hover { background: var(--color-steel); }
.woocommerce-account fieldset { margin-bottom: var(--space-6); border: 0; padding: 0; }

/* ============================================================
 * Woocommerce "Pedido recibido" — plantilla de bloque nativa FSE
 * "Order Confirmation" (woocommerce/order-confirmation-*). El endpoint
 * order-received la usa SIEMPRE (con independencia de que la página
 * Checkout siga en el shortcode clásico [woocommerce_checkout]): WooCommerce
 * la resuelve como wp_template propio (slug "order-confirmation", ver
 * OrderConfirmationTemplate::is_active_template()) por encima de
 * themes/telemax/templates/page-checkout.html. El tema no tiene su propio
 * templates/order-confirmation.html, así que se usa el por defecto de
 * WooCommerce (plugins/woocommerce/templates/templates/order-confirmation.html)
 * tal cual — aquí solo se reskinea con los tokens Telemax. Los <h1>/<h2>
 * (título de la página y "Detalles del pedido"/"Dirección de envío"/
 * "Dirección de facturación") ya heredan la tipografía de marca de las
 * reglas globales h1/h2 de style.css, así que no hace falta tocarlos.
 * NOTA: por privacidad, WooCommerce solo rellena estos bloques con los
 * datos del pedido cuando la sesión/usuario tiene permiso para verlo
 * (justo tras pagar, o logueado como dueño del pedido); un curl sin sesión
 * solo ve el aviso genérico, así que la verificación real es visual en
 * el navegador tras completar una compra.
 * ============================================================ */

/* El <main> de esta plantilla (order-confirmation.html) no tiene el div
   .woocommerce que sí tienen Cart/Checkout, así que las reglas
   ".woocommerce-checkout main .woocommerce" de más arriba no le aplican:
   sin esto queda pegado al header/footer. */
body.woocommerce-order-received main {
  padding: var(--space-6) var(--container-padding-desktop) var(--space-12);
}
@media (max-width: 767.98px) {
  body.woocommerce-order-received main {
    padding: var(--space-4) var(--container-padding-mobile) var(--space-8);
  }
}

.wc-block-order-confirmation-status {
  margin: 0 0 var(--space-4);
}
.wc-block-order-confirmation-status-description {
  color: var(--color-steel);
  margin: 0 0 var(--space-4);
}
.wc-block-order-confirmation-status-description .button {
  color: var(--color-brand-orange);
  font-weight: 600;
  text-decoration: none;
}
.wc-block-order-confirmation-status-description .button:hover {
  color: var(--color-brand-red);
}

/* --- Resumen (N.º de pedido / fecha / total / email / pago) --- */
.wc-block-order-confirmation-summary {
  margin: 0 0 var(--space-6);
}
/* WooCommerce trae su propio "order-confirmation-summary.css" con el
   selector ".wc-block-order-confirmation-summary ul{padding:0}" (clase +
   elemento = más específico que una clase sola): hay que igualar esa
   especificidad calificando también con el div padre, si no el padding
   pierde el cascade pese a cargarse después. */
.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  list-style: none;
  margin: 0;
  padding: var(--space-6) var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.wc-block-order-confirmation-summary-list-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
}
.wc-block-order-confirmation-summary-list-item__key {
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-steel);
}
.wc-block-order-confirmation-summary-list-item__value {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-ink);
}
@media (max-width: 767.98px) {
  .wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list {
    gap: var(--space-4);
    padding: var(--space-4);
  }
}

/* --- Tabla "Detalles del pedido" --- */
.wc-block-order-confirmation-totals-wrapper {
  margin: 0 0 var(--space-6);
}
.wc-block-order-confirmation-totals__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  margin: 0 0 var(--space-3);
}
.wc-block-order-confirmation-totals__table thead th {
  padding: var(--space-3) var(--space-4);
  background: var(--color-mist);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-steel);
  text-align: left;
}
.wc-block-order-confirmation-totals__table th.wc-block-order-confirmation-totals__total,
.wc-block-order-confirmation-totals__table td.wc-block-order-confirmation-totals__total {
  text-align: right;
}
.wc-block-order-confirmation-totals__table tbody td,
.wc-block-order-confirmation-totals__table tfoot th,
.wc-block-order-confirmation-totals__table tfoot td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-steel);
  text-align: left;
}
.wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__product a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}
.wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__product a:hover {
  color: var(--color-brand-orange);
}
.wc-block-order-confirmation-totals__table .product-quantity {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-steel);
}
.wc-block-order-confirmation-totals__table td.wc-block-order-confirmation-totals__total,
.wc-block-order-confirmation-totals__table tfoot td {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* --- Nota del cliente (debajo de la tabla, dentro del mismo bloque Totals) --- */
.wc-block-order-confirmation-order-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-mist);
  border-radius: var(--radius-md);
  color: var(--color-steel);
}
.wc-block-order-confirmation-order-note p { margin: 0; }
.wc-block-order-confirmation-order-note__label {
  margin: 0 0 var(--space-1);
  font-weight: 700;
  color: var(--color-ink);
}

/* --- Direcciones de envío / facturación (wp:columns con className fijo
   en la plantilla de bloque, ver order-confirmation.html) --- */
.wc-block-order-confirmation-address-wrapper {
  gap: var(--space-6);
  margin: 0 0 var(--space-6);
  align-items: stretch;
}
.wc-block-order-confirmation-address-wrapper .wp-block-column {
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.wc-block-order-confirmation-address-wrapper h2 {
  margin: 0 0 var(--space-3);
}
.wc-block-order-confirmation-address-wrapper address {
  font-style: normal;
  line-height: 1.6;
  color: var(--color-ink);
}
.wc-block-order-confirmation-address-wrapper .woocommerce-customer-details--phone {
  margin: var(--space-1) 0 0;
  font-size: var(--text-small);
  color: var(--color-steel);
}
@media (max-width: 767.98px) {
  .wc-block-order-confirmation-address-wrapper {
    flex-direction: column;
  }
}

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled,
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled {
  gap: var(--space-2);
  display: flex;
}
/* --- Colección de productos con la plantilla por defecto de WooCommerce ------
   El bloque "Puede interesarte" de la ficha es un woocommerce/product-collection
   cuyo interior sustituimos por tlx/product-card dentro de un
   woocommerce/product-template con className "product-grid product-grid--compact".

   Cuando desde el editor se cambia la colección ("Elegir colección" → Productos
   por etiquetas, Más vendidos, Novedades…), WooCommerce NO conserva el interior:
   su `applyCollection` hace replaceBlock() con createBlock(…, variación.attributes,
   createBlocksFromInnerBlocksTemplate(variación.innerBlocks)), así que se pierden
   a la vez nuestra tarjeta y las clases .product-grid, y en su lugar quedan
   product-image + core/post-title + product-price + product-button "pelados".
   Sin estilos propios eso se veía como lo reportó el cliente el 7-oct-2026:
   títulos con pinta de titular y en naranja (son enlaces), botones negros de
   píldora y, en cuanto un título ocupaba dos líneas, cada botón a una altura
   distinta porque el <li> no era una caja de altura completa.

   Por eso aquí se viste la plantilla POR DEFECTO para que se parezca a la
   tarjeta del tema. El :not(.product-grid) deja fuera nuestro propio marcado,
   que ya tiene sus reglas, y de paso sube la especificidad a (0,3,0) para ganar
   a .wc-block-product-template__responsive.columns-N (0,2,0), que es inline y
   va después en la cascada. Vale para cualquier colección y para cualquier
   página donde la peguen, no solo para la ficha. --- */
/* La rejilla, solo para la disposición en cuadrícula: si eligen "Lista" o
   "Carrusel", WooCommerce marca el <ul> con is-product-collection-layout-list /
   -carousel y pone su propio layout, que no hay que pisar. */
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid):not(.is-product-collection-layout-list):not(.is-product-collection-layout-carousel) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  grid-gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 560px) {
  .wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid):not(.is-product-collection-layout-list):not(.is-product-collection-layout-carousel) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid):not(.is-product-collection-layout-list):not(.is-product-collection-layout-carousel).columns-3 { grid-template-columns: repeat(3, 1fr); }
  .wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid):not(.is-product-collection-layout-list):not(.is-product-collection-layout-carousel).columns-4 { grid-template-columns: repeat(4, 1fr); }
  .wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid):not(.is-product-collection-layout-list):not(.is-product-collection-layout-carousel).columns-5 { grid-template-columns: repeat(5, 1fr); }
  .wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid):not(.is-product-collection-layout-list):not(.is-product-collection-layout-carousel).columns-6 { grid-template-columns: repeat(6, 1fr); }
}

/* La caja. flex-direction: column + el margin-top:auto del botón es lo que
   alinea los "Añadir al carrito" aunque los títulos midan distinto. */
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) > li.wc-block-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0 0 var(--space-4);
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Todo lo que cuelgue de la tarjeta respira por los lados, menos la imagen,
   que va a sangre. Se escribe en genérico para que un bloque que añadan luego
   (valoración, stock, SKU…) no salga pegado al borde. */
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) > li.wc-block-product > * {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  margin-block: 0 var(--space-3);
}
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) > li.wc-block-product > .wc-block-components-product-image {
  padding: 0;
  margin-bottom: var(--space-4);
  background: var(--color-mist);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) > li.wc-block-product > .wc-block-components-product-image a,
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) > li.wc-block-product > .wc-block-components-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-5);
  box-sizing: border-box;
}

/* Título: es un core/post-title con isLink, así que el naranja venía del enlace.
   Mismo tratamiento que .product-card__name. */
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wp-block-post-title {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-ink);
}
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wp-block-post-title a:hover {
  color: var(--color-brand-orange);
}

.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-price {
  font-family: var(--font-mono);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1;
}
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-price del {
  font-size: var(--text-small);
  color: var(--color-steel);
  margin-right: var(--space-1);
}
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-price ins { text-decoration: none; }

.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-summary,
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-sku,
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-stock-indicator {
  font-size: var(--text-small);
  color: var(--color-steel);
  text-align: inherit;
}

/* El botón es el último bloque de la tarjeta: margin-top:auto lo empuja abajo
   y así todos quedan a la misma altura. Se le da el aspecto de .btn--primary;
   WooCommerce pinta el <a>/<button> con .wp-block-button__link. */
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-button {
  margin-top: auto;
  margin-bottom: 0;
}
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-brand-orange);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  transition: background .15s;
}
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-button .wp-block-button__link:hover {
  background: var(--color-brand-red);
  color: var(--color-white);
}
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-button .wp-block-button__link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* "Ver carrito" que WooCommerce añade tras el AJAX: enlace, no segundo botón. */
.wp-block-woocommerce-product-collection .wc-block-product-template:not(.product-grid) .wc-block-components-product-button .added_to_cart {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-steel);
}

/* Paginación: solo aparece si suben "Productos por página" por encima del total. */
.wp-block-woocommerce-product-collection .wp-block-query-pagination {
  margin-top: var(--space-6);
  gap: var(--space-2);
  font-size: var(--text-small);
}
.wp-block-woocommerce-product-collection .wp-block-query-pagination a,
.wp-block-woocommerce-product-collection .wp-block-query-pagination .page-numbers {
  color: var(--color-steel);
  text-decoration: none;
}
.wp-block-woocommerce-product-collection .wp-block-query-pagination .page-numbers.current {
  color: var(--color-ink);
  font-weight: 700;
}