/*
 * 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; }

/* Radios ("Empresa o autónomo" / "Particular", ver
   telemax_account_address_field_args()). woocommerce_form_field() pinta cada
   opción como <input> + <label class="radio"> hermanos, sin envoltorio por
   opción, así que van en una fila flexible que se parte cuando no cabe. El
   asterisco se repite en cada opción porque WooCommerce reutiliza la etiqueta
   del campo: basta con el del título. */
.account-main .field--radio .woocommerce-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.account-main .field--radio .field__radio {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-brand-orange);
  flex-shrink: 0;
  cursor: pointer;
}
.account-main .field--radio label.radio {
  margin: 0 var(--space-4) 0 0;
  font-weight: 400;
  cursor: pointer;
}
.account-main .field--radio label.radio .required { display: none; }
/* En estrecho el wrap podía dejar un radio al final de una línea y su texto en
   la siguiente: se pasa a rejilla radio|texto, una opción por fila. */
@media (max-width: 479px) {
  .account-main .field--radio .woocommerce-input-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
  }
}
/*
 * 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.
 * Las mismas reglas visten los de país y provincia del checkout (facturación
 * y envío), que antes salían con el borde oscuro y la letra pequeña de
 * select2 junto a inputs del tema.
 */
.account-main .field .select2-container,
.woocommerce-checkout .checkout-block .form-row .select2-container { width: 100%; }
.account-main .field .select2-selection--single,
.woocommerce-checkout .checkout-block .form-row .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,
.woocommerce-checkout .checkout-block .form-row .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,
.woocommerce-checkout .checkout-block .form-row .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,
.woocommerce-checkout .checkout-block .form-row .select2-container--focus .select2-selection--single,
.woocommerce-checkout .checkout-block .form-row .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. Vale para cualquier colección y para cualquier página donde
   la peguen, no solo para la ficha.

   La condición es `li.wc-block-product:not(:has(.product-card))`, o sea "la
   tarjeta que NO es la nuestra", y NO la clase del <ul>. El 20-oct-2026 el
   cliente grabó la ficha con el precio diminuto y los botones a distinta
   altura: el interior ya eran los bloques por defecto de WooCommerce, pero el
   <ul> conservaba la clase .product-grid de antes del cambio de colección, así
   que el viejo :not(.product-grid) tumbaba todas estas reglas y la tarjeta se
   quedaba sin ningún estilo. Mirando el <li> y no el <ul> da igual con qué
   clases quede el contenedor. Además sube la especificidad a (0,4,0), que es
   lo que hace falta para ganarle a .wc-block-product-template__responsive.columns-N
   (0,2,0), que WooCommerce imprime inline y por tanto va después en la cascada. --- */
/* 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. */
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) {
  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. */
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) > * {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  margin-block: 0 var(--space-3);
}
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) > .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;
}
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) > .wc-block-components-product-image a,
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) > .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. */
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .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);
}
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .wp-block-post-title a:hover {
  color: var(--color-brand-orange);
}

.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .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;
}
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .wc-block-components-product-price del {
  font-size: var(--text-small);
  color: var(--color-steel);
  margin-right: var(--space-1);
}
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .wc-block-components-product-price ins { text-decoration: none; }

.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .wc-block-components-product-summary,
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .wc-block-components-product-sku,
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .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. */
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .wc-block-components-product-button {
  margin-top: auto;
  margin-bottom: 0;
}
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .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;
}
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .wc-block-components-product-button .wp-block-button__link:hover {
  background: var(--color-brand-red);
  color: var(--color-white);
}
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .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. */
.wc-block-product-template > li.wc-block-product:not(:has(.product-card)) .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;
}