/**
Theme Name: Kaioverse
Author: ThinkFocus
Author URI: https://thinkfocus.es
Description: Plantilla a medida para Kaioverse
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaioverse
Template: astra
*/

/* =============================================================================
   KAIOVERSE — CSS PERSONALIZADO (child theme de Astra)
   =============================================================================

   ÍNDICE:
   0. GLOBAL — Fondo con textura "plexus" (nodos + líneas, SVG data-URI)
   1. FICHA DE PRODUCTO
      1.1  Form carrito — layout (cantidad + botón añadir al carrito)
      1.2  Galería — overlay lightbox PhotoSwipe
      1.3  Botones (añadir al carrito, comprar ahora, campo cantidad)
      1.4  Imágenes del producto
      1.5  Lista con icono personalizado (Dragon Ball)
      1.6  Wishlist title
      1.7  Bloque info producto — fondo y borde (col derecha, Elementor)
      1.8  Selector de método de pago (YITH Deposits)
      1.9  Wishlist — botón bajo la disponibilidad (fila completa)
      1.10 Selector de variaciones — pills de marca (Astra button group)
      1.11 Lista de espera (WooCommerce Waitlist) — tarjeta de marca
      1.12 Indicador de taxonomía — Tipo / Franquicia / Estudio-Marca
   2. CATÁLOGO / TIENDA
      2.1  Área de contenido — relleno general
      2.2  Tarjetas de producto (borde, hover, radio)
      2.3  Imágenes en tarjetas de catálogo (rellenan zona visible, cover)
      2.4  Títulos de producto en grid (máx. 2 líneas con elipsis)
      2.5  Botones en catálogo y widgets relacionados
      2.6  Paginación WooCommerce
   3. BADGES (Oferta / Preorder / Stock / Agotado + banda «Agotado» de Astra)
   4. SIDEBAR
   5. GRAVITY FORMS
      5.0  Campos — contraste y delimitación global
      5.1  Etiquetas blancas en la página de contacto (ID 272, frame Elementor)
   6. MI CUENTA — Navegación de iconos ilustrados (override navigation.php)
      6.1  Layout (nav full-width arriba, contenido debajo)
      6.2  Rejilla de iconos (auto-fit → 7 cols escritorio / 3 móvil)
      6.3  Tile (icono + etiqueta)
      6.4  Estados (hover/foco, sección activa)
      6.5  Panel de contenido del endpoint
      6.6  Wishlist de YITH dentro del endpoint (tab "Lista de deseos")
   7. ANIMACIÓN DE SUBRAYADO EN ENLACES
      7.1  Footer, migas de pan, categorías de ficha, páginas de texto
   8. NAVEGACIÓN / MEGAMENU
      8.1  Panel full-width y layout de columnas
      8.2  Cabeceras de columna
      8.3  Ítems de columna (enlaces)
      8.4  Indicadores STOCK / PREORDER
      8.5  Ajustes mobile (breakpoint Astra)
   9. ICONO DE CUENTA (cabecera) — isotipo Kaioverse vía CSS
  10. CABECERA DE ARCHIVO WOO — Banner cómic (categorías / tienda / etiquetas)
  11. TARJETA DE FORMULARIO — navy + borde rojo (réplica del form de contacto)
      11.1 Legibilidad dentro del panel navy y estados de validación
  12. FOOTER — 3 columnas curadas (marca · colecciones+comprar · ayuda)
  13. PORTADA — Bloque de ventajas ("rework")
  14. SERVICIO POSTVENTA — Valores (iconos Harry Potter)
  15. CABECERA — Selectores de moneda (Aelia) e idioma (TranslatePress)
  16. MI CUENTA — Historial de puntos (tab "Mis puntos", Bravo Points + snippet 23)
  17. LISTA DE DESEOS — Página dedicada (/lista-de-deseos/, page-id 1145), igualada a §6.7
  20. THANK YOU PAGE — Banner de campaña por idioma
  21. MI CUENTA — Acciones del saldo (YITH Deposits) siempre visibles
  22. CARRITO Y CHECKOUT — Etiquetas de la tabla de totales

   NORMAS:
   · Todo CSS front-end personalizado va aquí.
   · El Personalizador WP y el Elementor Kit permanecen vacíos.
   · CSS solo de admin: en el snippet/plugin correspondiente (admin_head).
   ============================================================================= */


/* =============================================================================
   0. GLOBAL — Fondo con textura "plexus" (red de nodos + líneas)
   Patrón tipo constelación: nodos de tamaño variable unidos por líneas finas.
   Las líneas no se pueden dibujar con radial-gradient, así que se usa un SVG
   incrustado como data-URI (no hay peticiones externas, no hay JS, cacheable,
   ~4KB y gzipa a <1KB). El SVG es tileable sin costuras (elementos del borde
   replicados con desplazamiento). Color = navy de marca a baja opacidad.
   Se ve en zonas blancas/abiertas; cards, sidebar y bloques con fondo propio
   lo cubren, así el texto queda siempre limpio.
   Regenerable con scripts/genplexus.py (semilla fija = patrón reproducible).
   ----------------------------------------------------------------------------- */

body {
	/* !important necesario: Astra define `body { background: #fff }` (shorthand)
	   que resetea background-image a none. Sin !important, Astra gana la cascada. */
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22460%22%20height%3D%22460%22%20viewBox%3D%220%200%20460%20460%22%3E%3Cg%20stroke%3D%22%23223057%22%20stroke-width%3D%220.7%22%20stroke-opacity%3D%220.10%22%3E%3Cline%20x1%3D%2233%22%20y1%3D%22247%22%20x2%3D%2227%22%20y2%3D%22233%22%2F%3E%3Cline%20x1%3D%22265%22%20y1%3D%22182%22%20x2%3D%22269%22%20y2%3D%22208%22%2F%3E%3Cline%20x1%3D%22265%22%20y1%3D%22182%22%20x2%3D%22294%22%20y2%3D%22171%22%2F%3E%3Cline%20x1%3D%22294%22%20y1%3D%22171%22%20x2%3D%22313%22%20y2%3D%22197%22%2F%3E%3Cline%20x1%3D%22269%22%20y1%3D%22208%22%20x2%3D%22264%22%20y2%3D%22242%22%2F%3E%3Cline%20x1%3D%2254%22%20y1%3D%22192%22%20x2%3D%2270%22%20y2%3D%22225%22%2F%3E%3Cline%20x1%3D%2233%22%20y1%3D%22247%22%20x2%3D%2270%22%20y2%3D%22225%22%2F%3E%3Cline%20x1%3D%2227%22%20y1%3D%22233%22%20x2%3D%2270%22%20y2%3D%22225%22%2F%3E%3Cline%20x1%3D%22294%22%20y1%3D%22171%22%20x2%3D%22269%22%20y2%3D%22208%22%2F%3E%3Cline%20x1%3D%2266%22%20y1%3D%2254%22%20x2%3D%2229%22%20y2%3D%2227%22%2F%3E%3Cline%20x1%3D%2227%22%20y1%3D%22233%22%20x2%3D%2254%22%20y2%3D%22192%22%2F%3E%3Cline%20x1%3D%22265%22%20y1%3D%22182%22%20x2%3D%22313%22%20y2%3D%22197%22%2F%3E%3Cline%20x1%3D%2233%22%20y1%3D%22247%22%20x2%3D%2254%22%20y2%3D%22192%22%2F%3E%3Cline%20x1%3D%22149%22%20y1%3D%2269%22%20x2%3D%22199%22%20y2%3D%2232%22%2F%3E%3Cline%20x1%3D%22375%22%20y1%3D%2283%22%20x2%3D%22336%22%20y2%3D%22132%22%2F%3E%3Cline%20x1%3D%22365%22%20y1%3D%22322%22%20x2%3D%22307%22%20y2%3D%22352%22%2F%3E%3Cline%20x1%3D%22313%22%20y1%3D%22197%22%20x2%3D%22264%22%20y2%3D%22242%22%2F%3E%3Cline%20x1%3D%22149%22%20y1%3D%2269%22%20x2%3D%2266%22%20y2%3D%2254%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%22-65%22%20x2%3D%2229%22%20y2%3D%2227%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%22395%22%20x2%3D%2229%22%20y2%3D%22487%22%2F%3E%3Cline%20x1%3D%22199%22%20y1%3D%2232%22%20x2%3D%22195%22%20y2%3D%22-80%22%2F%3E%3Cline%20x1%3D%22199%22%20y1%3D%22492%22%20x2%3D%22195%22%20y2%3D%22380%22%2F%3E%3Cline%20x1%3D%22195%22%20y1%3D%22380%22%20x2%3D%22307%22%20y2%3D%22352%22%2F%3E%3Cline%20x1%3D%22264%22%20y1%3D%22242%22%20x2%3D%22307%22%20y2%3D%22352%22%2F%3E%3Cline%20x1%3D%22-85%22%20y1%3D%2283%22%20x2%3D%2229%22%20y2%3D%2227%22%2F%3E%3Cline%20x1%3D%22375%22%20y1%3D%2283%22%20x2%3D%22489%22%20y2%3D%2227%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%22-65%22%20x2%3D%2266%22%20y2%3D%2254%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%22395%22%20x2%3D%2266%22%20y2%3D%22514%22%2F%3E%3Cline%20x1%3D%22195%22%20y1%3D%22380%22%20x2%3D%22103%22%20y2%3D%22289%22%2F%3E%3Cline%20x1%3D%22103%22%20y1%3D%22289%22%20x2%3D%2221%22%20y2%3D%22395%22%2F%3E%3Cline%20x1%3D%22199%22%20y1%3D%2232%22%20x2%3D%22336%22%20y2%3D%22132%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23223057%22%20fill-opacity%3D%220.34%22%3E%3Ccircle%20cx%3D%22149%22%20cy%3D%2269%22%20r%3D%222.7%22%2F%3E%3Ccircle%20cx%3D%2233%22%20cy%3D%22247%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2227%22%20cy%3D%22233%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22199%22%20cy%3D%2232%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%22195%22%20cy%3D%22380%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%22103%22%20cy%3D%22289%22%20r%3D%223.3%22%2F%3E%3Ccircle%20cx%3D%22265%22%20cy%3D%22182%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%22395%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2266%22%20cy%3D%2254%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%22375%22%20cy%3D%2283%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%22294%22%20cy%3D%22171%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2227%22%20r%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%22313%22%20cy%3D%22197%22%20r%3D%222.0%22%2F%3E%3Ccircle%20cx%3D%22269%22%20cy%3D%22208%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%22322%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%22264%22%20cy%3D%22242%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%22336%22%20cy%3D%22132%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%2254%22%20cy%3D%22192%22%20r%3D%222.9%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22225%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22307%22%20cy%3D%22352%22%20r%3D%222.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
	background-size: 460px 460px !important;
	background-position: 0 0 !important;
	background-repeat: repeat !important;
	background-attachment: scroll !important;
}


/* =============================================================================
   1. FICHA DE PRODUCTO
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1.1  Form carrito — layout
   Alineación flexbox del selector de cantidad con el botón "Añadir al carrito".
   Origen: Elementor Default Kit (migrado 2026-05-14).
   ----------------------------------------------------------------------------- */

.single-product form.cart {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

/* Productos con variaciones: WooCommerce mete cantidad + botones (y el mensaje de
   puntos, y el selector de depósito YITH) DENTRO de .woocommerce-variation-add-to-cart,
   un nivel más anidado que en un producto simple. Ese contenedor no hereda el flex de
   form.cart (el flex solo alcanza a sus hijos directos) — sin este bloque, cantidad y
   botones pierden el layout en fila y salen apretados/descuadrados. */
.single-product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	width: 100%;
}

/* YITH Deposits — ocupa fila completa encima de cantidad+botón */
.single-product form.cart .yith-wcdp {
	flex: 0 0 100% !important;
	width: 100% !important;
}

/* Mensajes de puntos (Bravo Points) — fila propia, no compiten con cantidad/botón.
   Nota: Bravo puede pintar aquí dos mensajes distintos a la vez (el habitual + el de
   "primera compra" si el plugin lo tiene activado) — no es un error de maquetación,
   ver docs/decisiones.md. .tf-woopr-extra-message = mensaje "extra" renombrado por JS
   (tf_kaioverse_fix_woopr_duplicate_message en functions.php) para que el selector
   de Bravo no lo sobreescriba al elegir variación; mismo tratamiento visual. */
.single-product form.cart .woopr-product-message,
.single-product form.cart .tf-woopr-extra-message {
	flex: 0 0 100% !important;
	width: 100% !important;
	margin: 0 0 4px;
}

/* Selector de cantidad — estilo tarjeta (grid: botón | input | botón) */
.single-product form.cart .quantity {
	display: grid !important;
	grid-template-columns: 44px 1fr 44px !important;
	align-items: stretch !important;
	position: relative !important;
	flex: 0 0 120px !important;
	width: 120px !important;
	margin-right: 0 !important;
	height: 48px !important;
	max-height: none !important;
	border: 1px solid var(--ast-global-color-0) !important;
	border-radius: 6px !important;
	background-color: #fff !important;
	overflow: hidden;
	box-sizing: border-box;
}

/* Stock máximo = 1 (una sola unidad, o "vendido individualmente"): WooCommerce
   renderiza el input de cantidad como type="hidden" (sin número ni botones ±) y
   Astra no le añade los controles +/−. Sin esto, nuestra tarjeta de cantidad se
   quedaba como un RECUADRO VACÍO junto a "Añadir al carrito" (se veía en las figuras
   de 1 sola unidad — ej. variaciones de Infinity Studio con "1 disponibles"). Cuando
   la cantidad está bloqueada a 1 no tiene sentido el selector: se oculta la tarjeta y
   el botón "Añadir al carrito" ocupa la fila (su flex:1 0 0 lo estira solo). Genérico:
   aplica a simples y variables, y en variables se re-evalúa al cambiar de variación. */
.single-product form.cart .quantity:has(input.qty[type="hidden"]) {
	display: none !important;
}

/* Screen-reader elements: fuera del flujo del grid */
.single-product form.cart .quantity .screen-reader-text {
	position: absolute !important;
}

/* Input: posicionado entre los dos botones de 44px */
.single-product form.cart .quantity input.qty {
	position: absolute !important;
	left: 44px !important;
	right: 44px !important;
	top: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	min-width: calc(100% - 88px) !important;
	height: 100% !important;
	border: none !important;
	background: transparent !important;
	text-align: center !important;
	font-size: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
}

.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product form.cart .quantity a.minus {
	grid-column: 1 !important;
}

.single-product form.cart .quantity a.plus {
	grid-column: 3 !important;
}

.single-product form.cart .quantity a.minus,
.single-product form.cart .quantity a.plus {
	width: 100% !important;
	height: 100% !important;
	background-color: transparent !important;
	color: var(--ast-global-color-0) !important;
	border: none !important;
	font-size: 18px !important;
	line-height: 1 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	text-decoration: none !important;
	transition: background-color 0.2s linear, color 0.2s linear !important;
}

.single-product form.cart .quantity a.minus:hover,
.single-product form.cart .quantity a.plus:hover {
	background-color: var(--ast-global-color-1) !important;
	color: #fff !important;
}

.single-product form.cart button.single_add_to_cart_button {
	flex: 1 0 0 !important;
	height: 48px !important;
	line-height: 48px !important;
	padding: 0 24px !important;
	white-space: nowrap;
	width: auto !important;
	margin-right: 0 !important;
	/* Astra (woocommerce-grid.css) aplica margin-left:-1em al botón de carrito cuando la
	   cantidad está oculta (su propio `:has(.quantity input[type="hidden"])` y
	   `.sold-individually`) para "rellenar" el hueco de la cantidad. Como el botón
	   "Comprar ahora" también lleva la clase .single_add_to_cart_button y aquí ya
	   ocultamos la tarjeta de cantidad (display:none, arriba), ese -1em solo descuadra:
	   desplaza los botones a la izquierda y ensancha el de carrito ~15px más que el de
	   "Comprar ahora". Lo neutralizamos para que ambos midan igual (como en simples). */
	margin-left: 0 !important;
}

/* Botón "Comprar ahora" — fila propia, mismo ancho que cantidad+carrito.
   Necesita !important para anular el flex: 1 0 0 que hereda de single_add_to_cart_button. */
.single-product form.cart button.wc-buy-now-btn-single {
	flex: 0 0 100% !important;
	width: 100% !important;
}

/* "Ver carrito" link que WooCommerce inyecta tras añadir al carrito — fila propia */
.single-product form.cart a.added_to_cart {
	flex: 0 0 100% !important;
	width: 100% !important;
	display: block !important;
}

/* Honeypot anti-spam (.altEmail_container) — sacarlo del flujo flex para que no genere gap */
.single-product form.cart .altEmail_container {
	position: absolute !important;
	left: -9999px !important;
}


/* -----------------------------------------------------------------------------
   1.2  Galería — overlay lightbox PhotoSwipe
   Overlay invisible sobre la imagen principal. JS asociado en snippet-19.
   Origen: snippet-19 (migrado 2026-05-14).
   ----------------------------------------------------------------------------- */

.woocommerce-product-gallery__image {
	position: relative;
}

.kv-zoom-overlay {
	position: absolute;
	inset: 0;
	z-index: 9;
	cursor: zoom-in;
	background: transparent;
}

/* Solo imagen principal, no miniaturas */
.flex-control-thumbs .woocommerce-product-gallery__image .kv-zoom-overlay {
	display: none;
}


/* -----------------------------------------------------------------------------
   1.3  Botones y campo cantidad
   Origen: Personalizador WP (migrado 2026-05-14).
   ----------------------------------------------------------------------------- */

/* Campo cantidad */
.woocommerce div.quantity .qty {
	width: 50px;
	text-align: center;
	border: 1px solid #000;
	border-radius: 5px;
	margin-right: 10px;
}

/* Botón "Añadir al carrito" — color y forma */
.woocommerce .single_add_to_cart_button {
	background-color: #fff;
	color: #000;
	border: 2px solid #000;
	text-transform: uppercase;
	border-radius: 5px;
	margin-right: 10px;
}

/* Botón "Comprar ahora" */
.woocommerce .wc-buy-now-btn {
	background-color: var(--ast-global-color-1) !important;
	color: #fff !important;
	border-color: var(--ast-global-color-1) !important;
	text-transform: uppercase;
	border-radius: 5px;
	padding: 10px 20px;
	width: 100%;
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce .wc-buy-now-btn:hover {
	opacity: 0.8;
}

/* Hover del "Comprar ahora": negro sólido (anula el burdeos de Astra con !important) */
.woocommerce .wc-buy-now-btn:hover {
	background-color: #000 !important;
	opacity: 1;
}


/* -----------------------------------------------------------------------------
   1.4  Imágenes del producto
   Proporción cuadrada con object-fit contain. Aplica también a catálogo (2.3).
   Origen: Personalizador WP (migrado 2026-05-14).
   ----------------------------------------------------------------------------- */

.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background-color: transparent;
}


/* -----------------------------------------------------------------------------
   1.5  Lista con icono de marca (isotipo Kaioverse)
   Sustituye los bullets de <ul>/<li> de la descripción corta del producto por el
   isotipo navy de marca. Neutro a franquicia (sirve igual en Iron Man, Dragon
   Ball, etc.) sobre fondo blanco. Icono ~28px de alto, interlineado 1.7.
   Asset: assets/kaioverse-isotipo-bullet.png (ratio ~0.46, vertical).
   Reactivado y rediseñado 2026-06-09. Sustituye al antiguo icono Dragon Ball
   (desactivado 2026-05-16).
   ----------------------------------------------------------------------------- */

.woocommerce-product-details__short-description ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.woocommerce-product-details__short-description li {
	list-style: none;
	position: relative;
	padding-left: 38px;
	line-height: 1.7;
	margin-bottom: 14px;
}

.woocommerce-product-details__short-description li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 20px;
	height: 28px;
	background: url(/wp-content/themes/tf-kaioverse/assets/kaioverse-isotipo-bullet.png) no-repeat center center;
	background-size: contain;
}


/* -----------------------------------------------------------------------------
   1.6  Wishlist — ocultar título del bloque
   Origen: Personalizador WP (migrado 2026-05-14).
   ----------------------------------------------------------------------------- */

.wishlist-title {
	display: none;
}


/* -----------------------------------------------------------------------------
   1.7  Bloque info producto — fondo y borde (col derecha ficha de producto)
   Selector: .summary.entry-summary (WooCommerce estándar, confirmado en DOM).
   Mismo tratamiento visual que tarjetas de catálogo (2.2) pero radio 24px.
   ----------------------------------------------------------------------------- */

.woocommerce div.product .summary.entry-summary {
	background-color: color-mix(in srgb, var(--ast-global-color-0) 4%, #fff) !important;
	border: 1px solid var(--ast-border-color) !important;
	border-radius: 24px !important;
	padding: clamp(16px, 2vw, 28px) !important;
}


/* -----------------------------------------------------------------------------
   1.8  Selector de método de pago — YITH Deposits
   Opciones "pagar todo" / "pagar depósito" como cards seleccionables.
   ----------------------------------------------------------------------------- */

/* Opciones apiladas verticalmente */
.yith-wcdp-single-add-to-cart-fields {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

/* Card por opción — altura igual a qty+botón (48px) */
.yith-wcdp label {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	min-height: 48px !important;
	padding: 13px 16px !important;
	background-color: #fff !important;
	/* Borde gris-azulado visible (navy de marca al 42%) — separa de fondo #fafafa */
	border: 1.5px solid color-mix(in oklch, var(--ast-global-color-0) 42%, #fff) !important;
	border-radius: 6px !important;
	box-sizing: border-box !important;
	cursor: pointer;
	margin: 0 !important;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Opción seleccionada — tinte navy más marcado + halo suave (no doble-borde duro).
   Sube de 7% a 11% para diferenciarse del fondo navy-4% del bloque summary. */
.yith-wcdp label:has(input:checked) {
	border-color: var(--ast-global-color-0) !important;
	background-color: color-mix(in oklch, var(--ast-global-color-0) 11%, #fff) !important;
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--ast-global-color-0) 18%, #fff) !important;
}

/* Texto y precio de la opción seleccionada — navy + más peso para reforzar */
.yith-wcdp label:has(input:checked) .label {
	color: var(--ast-global-color-0) !important;
	font-weight: 600 !important;
}

/* Hover en opción no seleccionada — borde navy + leve tinte */
.yith-wcdp label:not(:has(input:checked)):hover {
	border-color: var(--ast-global-color-0) !important;
	background-color: color-mix(in oklch, var(--ast-global-color-0) 5%, #fff) !important;
}

/* Focus visible para teclado */
.yith-wcdp label:has(input:focus-visible) {
	outline: 2px solid var(--ast-global-color-0);
	outline-offset: 2px;
}

/* Radio nativo: oculto visualmente pero accesible */
.yith-wcdp input[type="radio"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
}

/* Span de texto: flex para colocar texto y precio en extremos */
.yith-wcdp .label {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	flex: 1 !important;
	padding-left: 26px !important;
	font-size: 14px;
	line-height: 1.4;
}

/* Bullet de radio personalizado */
.yith-wcdp .label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid color-mix(in oklch, var(--ast-global-color-0) 50%, #fff);
	background: #fff;
	box-sizing: border-box;
	flex-shrink: 0;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Bullet seleccionado: relleno con punto blanco interior */
.yith-wcdp label:has(input:checked) .label::before {
	border-color: var(--ast-global-color-0);
	background-color: var(--ast-global-color-0);
	box-shadow: inset 0 0 0 3px #fff;
}

/* Precio: negrita, color de acento, alineado a la derecha */
.yith-wcdp .price-label {
	font-weight: 600 !important;
	color: var(--ast-global-color-0) !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}


/* -----------------------------------------------------------------------------
   1.9  Wishlist — botón bajo la disponibilidad (fila completa)
   El botón lo inserta tf_kaioverse_wishlist_under_stock() (functions.php) tras el
   HTML de disponibilidad. En simples sale bajo ".stock"; en variables, bajo la
   disponibilidad de la variación elegida. Fila propia, buen área táctil en móvil.
   ----------------------------------------------------------------------------- */

.tf-wishlist-under-stock {
	width: 100%;
	margin: 12px 0 4px;
	/* Alineado con el texto de disponibilidad (izquierda), no centrado.
	   YITH/Astra aplican text-align:center a un ancestro → lo forzamos. */
	text-align: left !important;
}

/* El contenedor de YITH: flex a la izquierda para que el enlace (que YITH pinta
   centrado dentro del wrapper) arranque en el mismo borde que la disponibilidad. */
.tf-wishlist-under-stock .yith-wcwl-add-to-wishlist {
	margin: 0 !important;
	width: 100%;
	display: flex !important;
	justify-content: flex-start !important;
	text-align: left !important;
}
.tf-wishlist-under-stock .yith-wcwl-add-to-wishlist a {
	margin: 0 !important;
}

/* Enlace = fila completa, icono + texto, con buen área táctil */
.tf-wishlist-under-stock .yith-wcwl-add-to-wishlist a.add_to_wishlist,
.tf-wishlist-under-stock .yith-wcwl-add-to-wishlist .yith-wcwl-add-button > a,
.tf-wishlist-under-stock .yith-wcwl-wishlistaddedbrowse > a,
.tf-wishlist-under-stock .yith-wcwl-wishlistexistsbrowse > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ast-global-color-0);      /* navy de marca */
	text-decoration: none;
	transition: color .15s ease;
}

.tf-wishlist-under-stock .yith-wcwl-add-to-wishlist a:hover {
	color: var(--ast-global-color-1);      /* burdeos de marca */
}

/* Icono (corazón) de YITH alineado con el texto */
.tf-wishlist-under-stock .yith-wcwl-add-to-wishlist i,
.tf-wishlist-under-stock .yith-wcwl-add-to-wishlist svg {
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
}

/* Mensajes de feedback ("añadido", "ya en la lista") en su propia línea */
.tf-wishlist-under-stock .yith-wcwl-add-to-wishlist .feedback,
.tf-wishlist-under-stock .yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button + .yith-wcwl-wishlistaddresponse {
	display: block;
}


/* -----------------------------------------------------------------------------
   1.10  Selector de variaciones — pills de marca (Astra button group)
   Astra Pro ya pinta el grupo de botones (.ast-variation-button-group con
   .ast-single-variation[data-slug]) y sincroniza un <select> oculto por JS.
   De serie salen como texto plano tipo enlace; aquí se convierten en un selector
   de tarjetas/pills, genérico para CUALQUIER atributo de variación (versiones,
   acabados, tamaños, escala…). Estados que gestiona el JS de Astra:
     · Seleccionada → clase .active
     · No disponible con la combinación actual → aria-disabled="true" (+opacidad inline)
   Seleccionada en NAVY de marca (el burdeos queda reservado al botón de compra, 1.3).
   Reversible: borrar esta subsección + bump de versión.
   ----------------------------------------------------------------------------- */

/* Cada atributo en bloque: etiqueta encima de los botones (no en columna estrecha).
   No altera el orden del DOM, así que el JS de Astra (closest('td')/previousSibling)
   sigue funcionando. */
.woocommerce div.product form.cart table.variations {
	border: 0;
	margin: 0 0 4px;
}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr {
	display: block;
}
.woocommerce div.product form.cart table.variations tr + tr {
	margin-top: 18px;
}
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value {
	display: block;
	width: auto;
	padding: 0;
	text-align: left;
}
.woocommerce div.product form.cart table.variations th.label {
	margin: 0 0 10px;
}
.woocommerce div.product form.cart table.variations th.label label {
	margin: 0;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ast-global-color-0);          /* navy de marca */
}

/* Grupo de botones */
.ast-variation-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Cada opción = pill/tarjeta */
.ast-variation-button-group .ast-single-variation {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	min-width: 84px;
	padding: 10px 20px;
	border: 2px solid #d7dbe4;                  /* gris frío neutro */
	border-radius: 12px;
	background: #fff;
	color: var(--ast-global-color-0);          /* navy de marca */
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.1;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.18s ease, background-color 0.18s ease,
		color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

/* Hover / foco por teclado (Astra hace los botones focusables con role=button) */
.ast-variation-button-group .ast-single-variation:hover,
.ast-variation-button-group .ast-single-variation:focus-visible {
	border-color: var(--ast-global-color-0);
	box-shadow: 0 4px 12px rgba(34, 48, 87, 0.12);
	transform: translateY(-1px);
	outline: none;
}

/* Seleccionada (.active) — navy sólido, tick sutil */
.ast-variation-button-group .ast-single-variation.active {
	border-color: var(--ast-global-color-0);
	background: var(--ast-global-color-0);
	color: #fff;
	box-shadow: 0 6px 16px rgba(34, 48, 87, 0.22);
	transform: none;
}
.ast-variation-button-group .ast-single-variation.active::before {
	content: "\2713";                          /* ✓ */
	margin-right: 8px;
	font-size: 0.85em;
	font-weight: 700;
}

/* No disponible con la combinación elegida (Astra pone opacity/pointer-events inline) */
.ast-variation-button-group .ast-single-variation[aria-disabled="true"] {
	border-style: dashed;
	color: #9aa1b0;
	background: #f6f7f9;
	text-decoration: line-through;
	box-shadow: none;
	transform: none;
}

/* Ocultar el <select> nativo cuando hay grupo de botones (Astra lo sincroniza).
   Se oculta accesiblemente (sigue en el DOM para el JS y los lectores de pantalla). */
.woocommerce div.product form.cart table.variations td.value .ast-variation-button-group ~ select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Enlace "Limpiar" discreto (WooCommerce solo lo muestra tras elegir opción) */
.woocommerce div.product form.cart table.variations td.value a.reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.8rem;
	color: #8a90a0;
	text-decoration: underline;
}
.woocommerce div.product form.cart table.variations td.value a.reset_variations:hover {
	color: var(--ast-global-color-1);          /* burdeos de marca */
}


/* -----------------------------------------------------------------------------
   1.11  Lista de espera (WooCommerce Waitlist) — tarjeta de marca
   Widget nativo del plugin WooCommerce Waitlist (.wcwl_elements), bajo el botón
   de wishlist (1.9) cuando el producto está agotado. De serie sale como texto
   plano + checkbox nativo + botón outline neutro de Astra, sin relación visual
   con la marca. Se envuelve en una tarjeta navy suave (mismo lenguaje que el
   selector de depósito YITH, 1.8), con icono de campana, checkbox a medida y
   botón navy sólido → burdeos al hover (misma convención que 1.9/1.10: el
   burdeos queda para "Comprar ahora", el navy para acciones secundarias).
   Ojo: YITH Wishlist y WC Waitlist son plugins distintos (ver nota en 1.9).
   Reversible: borrar esta subsección + bump de versión.
   ----------------------------------------------------------------------------- */

.woocommerce div.product .wcwl_elements {
	margin: 16px 0 4px;
	padding: 18px 20px;
	background-color: color-mix(in srgb, var(--ast-global-color-0) 5%, #fff);
	border: 1px solid color-mix(in oklch, var(--ast-global-color-0) 24%, #fff);
	border-radius: 16px;
}

/* Texto introductorio + icono de campana (SVG inline, sin peticiones externas) */
.woocommerce div.product .wcwl_elements .wcwl_intro p {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: #444;
}
.woocommerce div.product .wcwl_elements .wcwl_intro p::before {
	content: '';
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 50%;
	background-color: var(--ast-global-color-0);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%202a6%206%200%200%200-6%206v3.09c0%20.74-.29%201.45-.8%201.98L4%2014.5A1%201%200%200%200%204.7%2016h14.6a1%201%200%200%200%20.7-1.5l-1.2-1.43a2.8%202.8%200%200%201-.8-1.98V8a6%206%200%200%200-6-6zm0%2020a2.5%202.5%200%200%200%202.45-2h-4.9A2.5%202.5%200%200%200%2012%2022z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}

/* Checkbox de consentimiento — custom, se rellena en navy al marcar */
.woocommerce div.product .wcwl_elements .wcwl_optin {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
}
.woocommerce div.product .wcwl_elements .wcwl_optin input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	border: 1.5px solid color-mix(in oklch, var(--ast-global-color-0) 50%, #fff);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition: border-color .15s ease, background-color .15s ease;
}
.woocommerce div.product .wcwl_elements .wcwl_optin input[type="checkbox"]:checked {
	background: var(--ast-global-color-0);
	border-color: var(--ast-global-color-0);
}
.woocommerce div.product .wcwl_elements .wcwl_optin input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.woocommerce div.product .wcwl_elements .wcwl_optin input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ast-global-color-0);
	outline-offset: 2px;
}
.woocommerce div.product .wcwl_elements .wcwl_optin label {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: #767c8a;
	cursor: pointer;
}

/* Botón — navy sólido, burdeos al hover, fila completa */
.woocommerce div.product .wcwl_elements a.wcwl_control {
	display: block;
}
.woocommerce div.product .wcwl_elements button.woocommerce_waitlist.button {
	width: 100%;
	min-height: 46px;
	background-color: var(--ast-global-color-0) !important;
	color: #fff !important;
	border: 2px solid var(--ast-global-color-0) !important;
	border-radius: 8px !important;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.woocommerce div.product .wcwl_elements button.woocommerce_waitlist.button:hover {
	background-color: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1) !important;
	transform: translateY(-1px);
}
.woocommerce div.product .wcwl_elements button.woocommerce_waitlist.button:focus-visible {
	outline: 2px solid var(--ast-global-color-0);
	outline-offset: 2px;
}

/* Aviso AJAX (éxito/error tras enviar) — mismos redondeos que la tarjeta */
.woocommerce div.product .wcwl_elements .wcwl_notice.woocommerce-message {
	margin: 0 0 14px;
	border-radius: 6px;
}

/* Campo de email para invitados (solo si "Guest Sign Ups" está activo en el
   plugin) — mismo borde/foco que el resto de formularios del sitio (ver 6.8). */
.woocommerce div.product .wcwl_elements .wcwl_email_elements input[type="email"],
.woocommerce div.product .wcwl_elements .wcwl_email_elements input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #b7becb;
	border-radius: 5px;
	background: #f7f7f7;
	padding: 10px 12px;
	margin-bottom: 10px;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.woocommerce div.product .wcwl_elements .wcwl_email_elements input[type="email"]:focus,
.woocommerce div.product .wcwl_elements .wcwl_email_elements input[type="text"]:focus {
	border-color: var(--ast-global-color-0);
	box-shadow: 0 0 0 3px rgba(34, 48, 87, .16);
	background: #fff;
	outline: none;
}

/* Spinner de carga (AJAX) alineado con el botón */
.woocommerce div.product .wcwl_elements .spinner {
	float: none;
	vertical-align: middle;
	margin-left: 8px;
}


/* -----------------------------------------------------------------------------
   1.12  Indicador de taxonomía — Tipo / Franquicia / Estudio-Marca
   Sustituye a la categoría por defecto que pinta Astra en la ficha (método propio
   Astra_Woocommerce::single_product_category(), NO la plantilla estándar de
   WooCommerce — este tema no tiene 'meta' en su single-product-structure). Se
   descarta con un buffer en functions.php (tf_kaioverse_taxonomy_indicator_buffer_*)
   y se pinta este bloque en su lugar. Cada dato en su propia línea, enlazado a su
   archivo; la fila se omite si el producto no tiene ese dato (catálogo aún sin
   categorizar del todo — ver docs/pendientes.md). Los enlaces comparten la misma
   animación de subrayado que el resto del sitio (añadidos al selector de la
   sección 7.1).
   Reversible: borrar esta subsección + el bloque de functions.php + bump de versión.
   ----------------------------------------------------------------------------- */

/* Tarjeta de características (rediseño 2026-08-24). Antes era una lista de líneas
   sueltas "Etiqueta: valor"; ahora es un panel con rejilla de 2 columnas donde cada
   dato lleva su icono, para que se lea como la ficha técnica de la pieza y no como
   texto suelto perdido bajo el botón de compra.
   Los iconos son SVG en `mask-image` (data-URI, sin peticiones ni fuente de iconos) y
   se pintan con `background-color`, así heredan el navy de marca y basta cambiar esa
   propiedad para recolorearlos. Mismo patrón que el icono de lápiz de §6.8. */

.tf-product-taxonomy {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px 14px;
	margin: 18px 0 0;
	padding: 16px 18px;
	background: #fff;                               /* blanco: el summary de la ficha es gris claro */
	border: 1px solid rgba(34, 48, 87, 0.10);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(34, 48, 87, 0.06);
}

.tf-product-taxonomy .tf-product-taxonomy-row {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: start;
	column-gap: 9px;
	font-size: 0.92rem;
	line-height: 1.35;
	color: #3a3a3a;
	overflow-wrap: anywhere;                        /* nombres largos de estudio */
}

/* Icono: cuadro suave con la silueta en navy. */
.tf-product-taxonomy .tf-product-taxonomy-row::before {
	content: "";
	grid-row: span 2;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background-color: var(--ast-global-color-0);    /* navy de marca */
	opacity: 0.9;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 17px 17px;
	mask-size: 17px 17px;
}

.tf-product-taxonomy .tf-product-taxonomy-label {
	display: block;
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(34, 48, 87, 0.62);                  /* navy de marca, atenuado */
	margin: 0 0 1px;
}

.tf-product-taxonomy .tf-product-taxonomy-row a {
	color: var(--ast-global-color-0);               /* navy de marca */
	font-weight: 600;
}
.tf-product-taxonomy .tf-product-taxonomy-row a:hover {
	color: var(--ast-global-color-1);               /* burdeos de marca */
}

/* --- Iconos por dato (SVG inline en data-URI, trazo redondeado) --- */

/* Tipo: capas */
.tf-product-taxonomy .tf-product-tipo::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 2 7l10 5 10-5-10-5Z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 2 7l10 5 10-5-10-5Z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/></svg>');
}

/* Franquicia: estrella */
.tf-product-taxonomy .tf-product-franquicia::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z"/></svg>');
}

/* Estudio/Marca: sello */
.tf-product-taxonomy .tf-product-marca::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></svg>');
}

/* Material: gota */
.tf-product-taxonomy .tf-product-material::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69 17.66 8.34A8 8 0 1 1 6.34 8.34L12 2.69Z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69 17.66 8.34A8 8 0 1 1 6.34 8.34L12 2.69Z"/></svg>');
}

/* Escala: regla */
.tf-product-taxonomy .tf-product-escala::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 8.7 8.7 21.3a1 1 0 0 1-1.4 0l-4.6-4.6a1 1 0 0 1 0-1.4L15.3 2.7a1 1 0 0 1 1.4 0l4.6 4.6a1 1 0 0 1 0 1.4Z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/><path d="m13.5 4.5 2 2"/><path d="m4.5 13.5 2 2"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.3 8.7 8.7 21.3a1 1 0 0 1-1.4 0l-4.6-4.6a1 1 0 0 1 0-1.4L15.3 2.7a1 1 0 0 1 1.4 0l4.6 4.6a1 1 0 0 1 0 1.4Z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/><path d="m13.5 4.5 2 2"/><path d="m4.5 13.5 2 2"/></svg>');
}

/* Medidas: cubo */
.tf-product-taxonomy .tf-product-medidas::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>');
}

/* Estado: check en círculo */
.tf-product-taxonomy .tf-product-estado::before {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.8 10A10 10 0 1 1 17 3.34"/><path d="m9 11 3 3L22 4"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.8 10A10 10 0 1 1 17 3.34"/><path d="m9 11 3 3L22 4"/></svg>');
}

/* --- Estado como píldora de color. La clase por valor la añade functions.php
   (tf-estado-<slug>): 'en-stock' y 'preorder' vienen del slug de la etiqueta de
   producto; 'agotado' y 'bajo-reserva' se generan con sanitize_title del literal.
   El burdeos de marca NO se usa aquí: está reservado al botón de compra (§1.3). --- */

.tf-product-taxonomy .tf-product-estado > a,
.tf-product-taxonomy .tf-product-estado > .tf-product-taxonomy-value {
	display: inline-block;
	justify-self: start;                            /* en grid el hijo se estira por
	                                                   defecto: `inline-block` no basta
	                                                   para que la píldora se ajuste a
	                                                   su texto */
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Disponible */
.tf-product-taxonomy .tf-estado-en-stock > a {
	background: #e6f4ec;
	color: #1c6b45 !important;
}
.tf-product-taxonomy .tf-estado-en-stock > a:hover {
	background: #d5ecdf;
	color: #145234 !important;
}
.tf-product-taxonomy .tf-estado-en-stock::before {
	background-color: #1c6b45;
}

/* Reserva anticipada */
.tf-product-taxonomy .tf-estado-preorder > a,
.tf-product-taxonomy .tf-estado-bajo-reserva > .tf-product-taxonomy-value {
	background: #fdf2e0;
	color: #8a5a08 !important;
}
.tf-product-taxonomy .tf-estado-preorder > a:hover {
	background: #f8e6c9;
	color: #6d4706 !important;
}
.tf-product-taxonomy .tf-estado-preorder::before,
.tf-product-taxonomy .tf-estado-bajo-reserva::before {
	background-color: #8a5a08;
}

/* Sin existencias */
.tf-product-taxonomy .tf-estado-agotado > .tf-product-taxonomy-value {
	background: #efefef;
	color: #5f5f5f;
}
.tf-product-taxonomy .tf-estado-agotado::before {
	background-color: #7a7a7a;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>');
}

/* Las medidas y el estado ocupan la fila entera: la primera es un texto largo y el
   segundo es la conclusión del bloque. */
.tf-product-taxonomy .tf-product-medidas,
.tf-product-taxonomy .tf-product-estado {
	grid-column: 1 / -1;
}

/* Nota: aquí NO se usa container query. Haría falta declarar `container-type` en un
   ancestro (una container query no puede reestilar al elemento que la declara, ver
   §6.9) y el único ancestro sería el `.summary` de la ficha, que es de Astra. El
   `auto-fit` del grid de arriba ya resuelve el responsive solo: cuando la tarjeta no
   da para dos columnas de 170px, pasa a una sin necesidad de ninguna query. */


/* =============================================================================
   2. CATÁLOGO / TIENDA
   ============================================================================= */

/* -----------------------------------------------------------------------------
   2.1  Área de contenido — relleno general en tienda y categorías
   Origen: Personalizador WP (migrado 2026-05-14).
   ----------------------------------------------------------------------------- */

.woocommerce #content.site-content,
.woocommerce-page #content.site-content {
	padding: clamp(16px, 3vw, 40px) !important;
}

/* Contenedor de las tarjetas (catálogo/categoría) — sin fondo, deja ver la
   textura plexus del body detrás de los productos. No afecta al sidebar. */
.woocommerce .ast-woocommerce-container,
.woocommerce-page .ast-woocommerce-container {
	background-color: transparent !important;
}


/* -----------------------------------------------------------------------------
   2.2  Tarjetas de producto — borde, hover y radio
   Origen: Personalizador WP (migrado 2026-05-14).
   ----------------------------------------------------------------------------- */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	border: 1px solid var(--ast-border-color);
	border-radius: 12px;
	background-color: color-mix(in srgb, var(--ast-global-color-0) 4%, #fff);
	overflow: hidden;
	box-sizing: border-box;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	border-color: color-mix(in oklch, var(--ast-border-color) 80%, black 50%);
	background-color: color-mix(in oklch, var(--ast-border-color) 100%, white 0%) !important;
}

/* Wrapper de contenido (título/precio/botón) — separación lateral del borde */
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
	padding-left: 20px !important;
	padding-right: 20px !important;
}


/* -----------------------------------------------------------------------------
   2.3  Imágenes en tarjetas de catálogo — rellenan la zona visible
   La proporción 1:1 viene de 1.4. Aquí se sobrescribe object-fit a "cover" y se
   quita el padding para que la imagen ocupe todo el alto/ancho de la tarjeta,
   sin márgenes. La ficha de producto (1.4) sigue con "contain" intacta.
   ----------------------------------------------------------------------------- */

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	padding: 0;
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
	padding: 0;
	border-radius: 0;
	object-fit: cover;
	box-sizing: border-box;
}


/* -----------------------------------------------------------------------------
   2.4  Títulos de producto en grid — máximo 2 líneas con elipsis
   Aplica a cualquier grid WooCommerce (ul.products): catálogo, tienda, portada,
   relacionados, upsells, vistos recientemente. Recorte solo CSS (line-clamp).
   ----------------------------------------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Reserva siempre el alto de 2 líneas para igualar tarjetas (1 ó 2 líneas) */
	line-height: 1.4;
	min-height: 2.8em;        /* 2 líneas × line-height */
}


/* -----------------------------------------------------------------------------
   2.5  Botones en catálogo y productos relacionados / upsells
   Origen: Personalizador WP (migrado 2026-05-14).
   ----------------------------------------------------------------------------- */

.woocommerce.archive .products .button,
.woocommerce .related .button,
.woocommerce .upsells .button,
.woocommerce .recently-viewed-products .button {
	padding: 6px 12px;
	font-size: 12px;
	width: 100%;
	text-align: center;
	display: block;
}


/* -----------------------------------------------------------------------------
   2.6  Paginación WooCommerce — estilo botón secundario Astra
   Origen: Personalizador WP (migrado 2026-05-14).
   ----------------------------------------------------------------------------- */

.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 24px 0;
}

.woocommerce-pagination ul.page-numbers li {
	padding: 0;
	margin: 0;
}

.woocommerce-pagination ul.page-numbers a.page-numbers,
.woocommerce-pagination ul.page-numbers span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 38px;
	padding: 0 12px;
	border-radius: var(--ast-button-border-radius, 6px);
	background-color: var(--ast-global-color-8);
	color: var(--ast-global-color-0);
	border: none;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

/* Página activa */
.woocommerce-pagination ul.page-numbers span.page-numbers.current,
.woocommerce-pagination ul.page-numbers a.page-numbers:hover {
	background-color: var(--ast-global-color-1);
	color: var(--ast-global-color-4);
}

/* Quitar borde nativo de Astra en los items de paginación */
.woocommerce-js nav.woocommerce-pagination ul li {
	border: none !important;
}


/* =============================================================================
   3. BADGES (Preorder / Stock / Oferta)
   El PHP que genera los badges está en snippet-07.
   Origen: Personalizador WP (migrado 2026-05-14).
   ============================================================================= */

/* --- Caja y tipografía COMPARTIDAS por los tres badges ------------------------
   Oferta (Astra Pro), Preorder y Stock (snippet 07) se pintan en el mismo
   sitio y se apilan cuando coinciden, así que comparten TODA la caja y la
   tipografía; lo único que cambia entre ellos es el color de fondo.
   Por qué cada declaración lleva `!important`: el badge de oferta lo genera
   Astra Pro con CSS en línea en el `<head>` (no en un .css encolable), y sus
   reglas `.ast-on-card-button` se cargan después de esta hoja.
   `line-height` fijo (no `normal`) porque el de estado hereda el del contexto:
   daba 31px en la ficha y 26px en el catálogo mientras el de oferta medía 22px.
   `right: auto` es obligatorio: Astra pone `right: 1em`, y con `left` y `right`
   a la vez el navegador estira la caja a todo el ancho del contenedor.
   `min-width: 5.5em` común para que apilados formen una columna recta en vez de un
   escalón, y `white-space: nowrap` porque en las tarjetas estrechas del catálogo la
   etiqueta partía en dos líneas y ese badge medía 32px de alto frente a los 22px del
   de oferta. El min-width va en `em` a propósito: encoge solo con la fuente en cada
   tramo, sin repetirlo en cada media query. Estaba en `7em`, medido sobre «PREORDER»
   —la etiqueta más larga, y la que llevan 2 productos de 573—: con «STOCK», que llevan
   571, el ancho mínimo estiraba el badge un 60% por encima de su texto y era eso, más
   que la fuente, lo que lo hacía tapar la figura. A 5.5em «STOCK» ya no lo alcanza y la
   caja se ajusta a su contenido; «PREORDER» lo desborda y queda algo más ancho que el
   de oferta cuando coinciden, que es un caso de dos productos.

   --- TAMAÑO POR TAMAÑO DE PANTALLA (2026-09-10) ------------------------------
   El badge tapaba parte del producto en las tarjetas del catálogo — la cara de la
   figura, justo el motivo por el que alguien hace clic. Se reduce en tres tramos,
   más agresivo cuanto más estrecha es la tarjeta: la imagen encoge con el viewport,
   pero el badge no lo hacía y por eso ocupaba proporcionalmente cada vez más. */
.ast-on-card-button.ast-onsale-card,
.preorder-badge,
.stock-badge,
.agotado-badge {
	position: absolute !important;
	top: 22px !important;
	left: 22px !important;
	right: auto !important;
	display: inline-block;
	min-width: 5.5em;
	width: auto !important;
	max-width: none !important;
	white-space: nowrap !important;
	padding: 2px 9px !important;
	border-radius: 6px !important;
	box-sizing: border-box;
	font-family: Inter, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: #fff !important;
	z-index: 10;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
}

/* Lo único propio de cada badge: el color. El gris de "Agotado" es deliberado —
   es el único estado que NO invita a comprar, así que no compite con los otros. */
.ast-on-card-button.ast-onsale-card { background-color: var(--ast-global-color-1) !important; }
.preorder-badge                     { background-color: #ff9600 !important; }
.stock-badge                        { background-color: #7c3aed !important; }
.agotado-badge                      { background-color: #6b7280 !important; }

/* --- Apilado ------------------------------------------------------------------
   Escalón = alto del badge (14.79 × 1.2 + 4 de padding ≈ 22px) + 8px de aire.
   Solo hay un caso de apilado: oferta arriba + estado debajo. Desde el 2026-08-26
   el snippet 07 pinta UN único badge de estado (lo decide
   tf_kaioverse_product_status_badge() en el tema), así que no puede haber dos.
   El badge de estado se marca con `kv-badge-below-sale` desde el PHP, no con un
   selector de hermanos: en el catálogo el de oferta lo pinta Astra DENTRO de
   `.astra-shop-thumbnail-wrap` y el de estado cuelga del `<li>`, así que no son
   hermanos y ningún selector los relaciona. */
.preorder-badge.kv-badge-below-sale,
.stock-badge.kv-badge-below-sale,
.agotado-badge.kv-badge-below-sale {
	top: 50px !important;
}

/* --- «Agotado» en el catálogo: la banda de Astra, centrada ---------------------
   (2026-09-12) En el catálogo el estado «Agotado» NO lo pinta nuestro badge de
   arriba —el snippet 07 lo omite en el loop—, sino `astra_woo_shop_out_of_stock()`:
   una banda blanca al 88% con el texto en el burdeos de marca, que Astra ancla al
   PIE de la miniatura. Aquí se centra sobre la foto, que es donde se lee como un
   sello y no como un pie de imagen.

   Tres arreglos, no uno:
   · `top: 50%` + `translateY(-50%)` con `bottom: auto` — sin anular el `bottom`
     que trae Astra, el elemento queda estirado entre las dos anclas.
   · `left/right: 0` en vez de los 17px de Astra: la banda cruza la foto de lado a
     lado y, sobre todo, deja sitio a la palabra.
   · `white-space: nowrap` + tamaño por tramo. Con los 17px fijos de Astra, en móvil
     «AGOTADO» se partía en dos líneas y la banda ocupaba el 39% del alto de la foto.
     Y la palabra no siempre es corta: en alemán es «AUSVERKAUFT».

   `:empty` oculta el `span` que queda cuando Astra cree que el producto está agotado
   —lee el post meta `_stock_status` en crudo— y nuestra fuente única no: ver
   `tf_kaioverse_out_of_stock_string()` en functions.php. */
.astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock {
	top: 50% !important;
	bottom: auto !important;
	left: 0 !important;
	right: 0 !important;
	transform: translateY(-50%);
	white-space: nowrap;
	letter-spacing: 0.04em;
}

.ast-shop-product-out-of-stock:empty {
	display: none !important;
}

/* Astra pinta DOS `.ast-onsale-card` idénticos y superpuestos en cada tarjeta del
   catálogo (no en la ficha). Pasaba inadvertido porque coincidían al píxel; al
   apilar los badges quedaría a la vista un "¡Oferta!" repetido. Se oculta el 2º. */
.astra-shop-thumbnail-wrap .ast-onsale-card ~ .ast-onsale-card {
	display: none !important;
}

/* Tablet: la tarjeta del catálogo baja de ~300px a ~230px de ancho, así que el
   badge se recorta más que en escritorio y se acerca a la esquina. */
@media (max-width: 1024px) {
	.ast-on-card-button.ast-onsale-card,
	.preorder-badge,
	.stock-badge,
	.agotado-badge {
		font-size: 11.5px !important;
		padding: 2px 8px !important;
		top: 14px !important;
		left: 14px !important;
	}

	/* Escalón tablet = 11.5 × 1.2 + 4 ≈ 18px de alto + 6px de aire, sobre top 14 */
	.preorder-badge.kv-badge-below-sale,
	.stock-badge.kv-badge-below-sale,
	.agotado-badge.kv-badge-below-sale {
		top: 38px !important;
	}

	.astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock {
		font-size: 14px !important;
	}
}

/* Móvil: el 70% del tráfico. Aquí el catálogo va a dos columnas y la tarjeta baja
   de ~170px, donde el badge anterior (11px + 77px de ancho mínimo) cubría casi la
   mitad superior de la foto. */
@media (max-width: 600px) {
	.ast-on-card-button.ast-onsale-card,
	.preorder-badge,
	.stock-badge,
	.agotado-badge {
		font-size: 9.5px !important;
		padding: 2px 7px !important;
		top: 6px !important;
		left: 6px !important;
		border-radius: 4px !important;
	}

	/* Escalón móvil = 9.5 × 1.2 + 4 ≈ 15px de alto + 6px de aire, sobre top 6 */
	.preorder-badge.kv-badge-below-sale,
	.stock-badge.kv-badge-below-sale,
	.agotado-badge.kv-badge-below-sale {
		top: 27px !important;
	}

	/* A los 17px de Astra, «AGOTADO» partía en dos líneas sobre una foto de 133px */
	.astra-shop-thumbnail-wrap .ast-shop-product-out-of-stock {
		font-size: 11px !important;
	}
}


/* =============================================================================
   4. SIDEBAR
   Origen: Personalizador WP (migrado 2026-05-14).
   ============================================================================= */

.sidebar-main {
	background-color: #fafafa !important;
	padding: clamp(10px, 2vw, 14px) !important;
	border: 1px solid var(--ast-border-color) !important;
	border-radius: 6px !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Hover del sidebar — igual que las tarjetas de producto */
.sidebar-main:hover {
	border-color: color-mix(in oklch, var(--ast-border-color) 80%, black 50%) !important;
	background-color: color-mix(in oklch, var(--ast-border-color) 100%, white 0%) !important;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Widgets del sidebar: fondo transparente para que se vea el #fafafa del contenedor */
.sidebar-main .widget {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Quitar línea separadora del área principal cuando hay sidebar */
#primary.content-area.primary {
	border-left: none !important;
}

/* Botones del sidebar */
.sidebar-main .widget button,
.sidebar-main .widget input[type="submit"] {
	font-size: 14px !important;
	padding: 4px 10px !important;
}

/* Inputs de precio y texto del sidebar */
.sidebar-main .widget input[type="text"],
.sidebar-main .widget input[type="number"] {
	font-size: 12px !important;
}


/* =============================================================================
   5. GRAVITY FORMS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   5.0  Campos — contraste y delimitación global
   Aplica a todos los formularios del sitio (fondo blanco por defecto).
   ----------------------------------------------------------------------------- */

/* Labels */
.gform_wrapper .gfield_label,
.gform_wrapper .ginput_complex label {
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 6px;
	display: block;
}

/* Inputs de texto */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
	background-color: #f7f7f7;
	border: 2px solid #999999;
	border-radius: 5px;
	padding: 12px 14px;
	color: #1a1a1a;
	font-size: 15px;
	width: 100%;
	box-sizing: border-box;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Focus */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	background-color: #ffffff;
	border-color: #111111;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
	outline: none;
}

/* Placeholder */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: #aaaaaa;
}

/* Textarea */
.gform_wrapper textarea {
	min-height: 120px;
	resize: vertical;
}

/* Select — flecha chevron */
.gform_wrapper select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666666' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 40px;
}

/* Separación entre campos */
.gform_wrapper .gfield {
	margin-bottom: 20px;
}

/* Descripción de campo.
   OJO: Gravity marca el mensaje de error de un campo con .gfield_description
   ADEMÁS de .validation_message, así que cualquier regla de color sobre
   .gfield_description se lo lleva por delante. Se excluye aquí y en §5.1/§11;
   el color de los estados de validación lo fija §11.1. */
.gform_wrapper .gfield_description:not(.validation_message):not(.gfield_validation_message) {
	font-size: 13px;
	color: #666666;
	margin-top: 4px;
}

/* Asterisco requerido (sobre fondo claro; sobre el panel navy manda §11.1) */
.gform_wrapper .gfield_required {
	color: #cc3333;
	margin-left: 3px;
}

/* Error de validación — campo */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: #cc3333 !important;
	box-shadow: 0 0 0 3px rgba(204, 51, 51, 0.1) !important;
}

.gform_wrapper .validation_message {
	color: #cc3333;
	font-size: 13px;
	margin-top: 4px;
}


/* -----------------------------------------------------------------------------
   5.1  Etiquetas blancas en la página de contacto (ID 272)
   La página de contacto pinta el form sobre un "frame" navy montado en Elementor
   (frame-13.avif), así que su texto va en blanco. El resto de formularios recibe
   el mismo tratamiento (panel navy + texto blanco) desde la sección 11 — por eso
   aquí ya solo queda la 272. Origen: Personalizador WP (migrado 2026-05-14).
   ----------------------------------------------------------------------------- */

.page-id-272 .gform_wrapper label,
.page-id-272 .gform_wrapper .gfield_label,
.page-id-272 .gform_wrapper .gfield_description:not(.validation_message):not(.gfield_validation_message),
.page-id-272 .gform_wrapper .ginput_complex label,
.page-id-272 .gform_wrapper .gfield_required,
.page-id-272 .gform_wrapper .gform_drop_instructions,
.page-id-272 .gform_wrapper .gfield_html,
.page-id-272 .gform_wrapper p {
	color: #ffffff !important;
}


/* =============================================================================
   6. MI CUENTA — Navegación de iconos ilustrados
   Override: theme/woocommerce/myaccount/navigation.php
   Lógica (mapa icono + reorden): tf_kaioverse_account_* en functions.php
   La tira de iconos sustituye al menú de texto y se muestra a todo el ancho
   ARRIBA; el contenido del endpoint va debajo. Mobile-first (≈70% del tráfico):
   grid auto-fit que pasa de 7 columnas en escritorio a 3 en móvil sin saltos.
   Colores de marca: navy #223057 · rojo ribbon #c11a20 (igual que el banner).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   6.1  Layout — nav full-width arriba, contenido debajo.
   Tres capas de CSS ajeno pelean este layout y obligan a blindar lo estructural
   con especificidad alta + !important:
   · WooCommerce core: flota nav (30%) y contenido (68%) en columnas.
   · Astra "Modern My Account" (CSS inline en <head>, gana a la hoja del child):
     nav a width 22% + border-right, ul como grid de 2 columnas, enlaces como
     inline-flex con padding 1em. Con la nav al 22%, la rejilla de iconos
     desbordaba por encima del contenido (la "superposición").
   · Elementor Pro (widget My Account): selectores .e-my-account-tab .woocommerce
     .woocommerce-MyAccount-* con más especificidad que los nuestros.
   ----------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation {
	float: none !important;
	width: 100% !important;
	/* separación nav → panel de contenido (única declaración de margen: una
	   segunda regla con menos especificidad sería anulada por esta misma) */
	margin: 0 0 clamp(1.5rem, 4vw, 2.75rem) !important;
	border: none !important;
	position: static !important;
}

.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

/* -----------------------------------------------------------------------------
   6.2  Rejilla de iconos — auto-fit (sin media queries para el reflow base).
   Especificidad alta: Astra impone ul {display:grid; repeat(2,1fr)} inline.
   ----------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul.tf-account-nav__list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
	gap: clamp(0.4rem, 1.8vw, 1.4rem) !important;
}

/* En escritorio fijamos 7 columnas para que los 7 accesos queden en una fila
   limpia y no se estiren de más en contenedores muy anchos. */
@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul.tf-account-nav__list {
		grid-template-columns: repeat(7, 1fr) !important;
	}
}

.woocommerce-account .tf-account-nav .tf-account-nav__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	border: none !important;     /* Astra mete border-top entre items */
	position: static !important; /* Astra: li {position:relative} para su barra */
}
.woocommerce-account .tf-account-nav .tf-account-nav__item::before,
.woocommerce-account .tf-account-nav .tf-account-nav__item::after,
.woocommerce-account .tf-account-nav .tf-account-nav__item::marker {
	content: none !important; /* bullets del tema + barra lateral ::after de Astra */
}

/* -----------------------------------------------------------------------------
   6.3  Tile (icono + etiqueta).
   Selector con ul li a: Astra estila los enlaces con esa ruta (inline-flex,
   padding 1em, color global) y ganaba a .tf-account-nav__link a secas.
   ----------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a.tf-account-nav__link {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	padding: 0.8rem 0.35rem !important;
	width: auto !important;
	text-align: center;
	text-decoration: none;
	border-radius: 16px !important;       /* algo lo dejaba a 0 */
	color: #223057 !important;
	background: transparent !important;   /* Astra/Elementor pintaban #f9fafa por tile */
	transition: transform .25s var(--ast-ease-out, ease),
	            background-color .25s ease,
	            box-shadow .25s ease;
}

.tf-account-nav__icon {
	display: block;
	width: clamp(58px, 15vw, 108px);
	aspect-ratio: 1 / 1;
}
.tf-account-nav__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 3px 7px rgba(34, 48, 87, .20));
	transition: transform .25s var(--ast-ease-out, ease);
}

/* TEMPORAL (2026-07-09) — Caja con emoji para "Lista de deseos" hasta tener el
   PNG de marca definitivo. Oculta el icono heredado del Waitlist ("en espera")
   y muestra un corazón en una caja al tamaño de los demás tiles.
   Revertir: borrar este bloque (el <img> icono-waitlist.png vuelve solo). */
.woocommerce-MyAccount-navigation-link--woocommerce-waitlist .tf-account-nav__icon img {
	display: none;
}
.woocommerce-MyAccount-navigation-link--woocommerce-waitlist .tf-account-nav__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--ast-global-color-0);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 3px 7px rgba(34, 48, 87, .20);
}
.woocommerce-MyAccount-navigation-link--woocommerce-waitlist .tf-account-nav__icon::before {
	content: "\2764\FE0F";
	font-size: clamp(28px, 7vw, 52px);
	line-height: 1;
}

.tf-account-nav__label {
	font-weight: 600;
	font-size: clamp(.76rem, 1.5vw, .95rem);
	line-height: 1.2;
	color: inherit;
}

/* -----------------------------------------------------------------------------
   6.4  Estados — hover/foco y sección activa.
   ----------------------------------------------------------------------------- */
.tf-account-nav__link:hover,
.tf-account-nav__link:focus-visible {
	background: rgba(34, 48, 87, .055) !important;
	transform: translateY(-4px);
	outline: none;
}
.tf-account-nav__link:hover .tf-account-nav__icon img,
.tf-account-nav__link:focus-visible .tf-account-nav__icon img {
	transform: scale(1.07);
}

.woocommerce-MyAccount-navigation-link.is-active .tf-account-nav__link {
	background: #fff !important;
	box-shadow: 0 6px 20px rgba(34, 48, 87, .13);
}
.woocommerce-MyAccount-navigation-link.is-active .tf-account-nav__label {
	color: #c11a20; /* rojo ribbon de marca */
}

/* Accesibilidad: respeta "reduce motion". */
@media (prefers-reduced-motion: reduce) {
	.tf-account-nav__link,
	.tf-account-nav__icon img {
		transition: none;
	}
	.tf-account-nav__link:hover,
	.tf-account-nav__link:focus-visible {
		transform: none;
	}
}

/* -----------------------------------------------------------------------------
   6.5  Panel de contenido del endpoint (tarjeta blanca bajo la nav).
   ----------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content {
	background: #fff;
	border-radius: 16px;
	/* !important: Astra "Modern My Account" fuerza padding-left:72px (y 0 en el
	   resto), pensado para su nav lateral — aquí descuadraba el contenido */
	padding: clamp(1.25rem, 3vw, 2.25rem) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}


/* -----------------------------------------------------------------------------
   6.6  BRANDING de enlaces y botones — TODOS los apartados de Mi Cuenta.
   La página la renderiza el widget "Mi cuenta" de Elementor Pro: los enlaces de
   acción salen en su azul #5bc0de (Ver, Editar pedido, Editar dirección, los
   del escritorio…) y los botones primarios con fondo azul ("Guardar cambios")
   o como botón fantasma gris ("Añadir método de pago"). Se repintan a los
   tokens de marca (navy --ast-global-color-0 #223057 · burdeos
   --ast-global-color-1 #9a1317 hover), anclando al widget para GANAR en
   especificidad a las reglas del propio widget. La wishlist (6.7) va DESPUÉS
   en el archivo y afina sus casos propios (gana en empates por orden de fuente).
   ----------------------------------------------------------------------------- */

/* Enlaces de acción de texto → navy, hover burdeos. Se excluyen los botones. */
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content a:not(.button):not(.add_to_cart_button):not(.remove):not(.remove_from_wishlist) {
	color: var(--ast-global-color-0) !important;
}
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content a:not(.button):not(.add_to_cart_button):not(.remove):not(.remove_from_wishlist):hover {
	color: var(--ast-global-color-1) !important;
}

/* Botones primarios (Guardar cambios, Añadir método de pago, Guardar dirección,
   Explorar productos…) → fondo navy, texto blanco; hover burdeos. */
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content .button,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content button.woocommerce-Button,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content button[type="submit"],
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content input[type="submit"] {
	background-color: var(--ast-global-color-0) !important;
	border: 1px solid var(--ast-global-color-0) !important;
	color: #fff !important;
}
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content .button:hover,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content button.woocommerce-Button:hover,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content input[type="submit"]:hover {
	background-color: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1) !important;
	color: #fff !important;
}

/* Foco de campos de formulario (Detalles de la cuenta, Direcciones) → navy. */
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content input:focus,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content textarea:focus,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content select:focus {
	border-color: var(--ast-global-color-0) !important;
	outline-color: var(--ast-global-color-0) !important;
	box-shadow: none !important;
}


/* -----------------------------------------------------------------------------
   6.7  Wishlist de YITH dentro del endpoint (tab "Lista de deseos")
   El endpoint /mi-cuenta/woocommerce-waitlist/ se repurposa para pintar
   [yith_wcwl_wishlist] (ver tf_kaioverse_wishlist_account_render en functions.php).
   La tabla de YITH puede ser ancha → responsive: scroll horizontal en móvil.
   ----------------------------------------------------------------------------- */

.tf-account-wishlist {
	width: 100%;
}

.tf-account-wishlist table.wishlist_table {
	width: 100%;
	margin: 0;
}

/* Imágenes de producto contenidas */
.tf-account-wishlist table.wishlist_table td.product-thumbnail img {
	max-width: 64px;
	height: auto;
}

/* --- Branding: los enlaces salían en el azul de Elementor (#5bc0de) y los
   botones en su color por defecto. Se repintan a los tokens de marca. Se ancla al
   widget de Elementor (.elementor-widget-woocommerce-my-account) para GANAR en
   especificidad a las reglas del propio widget de "Mi cuenta" (que si no, mandan). */

/* Enlaces de texto (nombre de producto, "ver/buscar lista", editar título): navy */
.elementor-widget-woocommerce-my-account .tf-account-wishlist a:not(.button):not(.add_to_cart_button):not(.remove_from_wishlist):not(.yith-wcwl-ask-an-estimate-button) {
	color: var(--ast-global-color-0) !important;
}
.elementor-widget-woocommerce-my-account .tf-account-wishlist a:not(.button):not(.add_to_cart_button):not(.remove_from_wishlist):not(.yith-wcwl-ask-an-estimate-button):hover {
	color: var(--ast-global-color-1) !important;
}

/* "Añade al carrito" → navy, hover burdeos (todos los botones unificados navy).
   El radio y el tamaño se fijan explícitos: `.add_to_cart_button` hereda de
   Astra un botón de catálogo con border-radius:0 y fuente/alto variables según
   el contexto (más grande aquí que en la página dedicada §17) — sin fijarlo
   queda cuadrado y descuadrado frente a "Eliminar"/"Solicita estimación". */
.elementor-widget-woocommerce-my-account .tf-account-wishlist .shop_table .add_to_cart_button {
	background: var(--ast-global-color-0) !important;
	border-color: var(--ast-global-color-0) !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	height: auto !important;
}
.elementor-widget-woocommerce-my-account .tf-account-wishlist .shop_table .add_to_cart_button:hover {
	background: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1) !important;
}

/* "ELIMINAR" (quitar) y "Solicita estimación" (secundarios) → navy, hover burdeos.
   Mismo radio/tamaño que "Añade al carrito" de arriba, para que las tres
   acciones se vean como un mismo conjunto de botones. */
.elementor-widget-woocommerce-my-account .tf-account-wishlist .shop_table .remove_from_wishlist.button,
.elementor-widget-woocommerce-my-account .tf-account-wishlist .yith-wcwl-ask-an-estimate-button {
	background: var(--ast-global-color-0) !important;
	border-color: var(--ast-global-color-0) !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	height: auto !important;
}
.elementor-widget-woocommerce-my-account .tf-account-wishlist .shop_table .remove_from_wishlist.button:hover,
.elementor-widget-woocommerce-my-account .tf-account-wishlist .yith-wcwl-ask-an-estimate-button:hover {
	background: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1) !important;
}

/* × pequeño de quitar (columna product-remove) → navy */
.elementor-widget-woocommerce-my-account .tf-account-wishlist .product-remove a.remove {
	background: var(--ast-global-color-0) !important;
	border-color: var(--ast-global-color-0) !important;
	color: #fff !important;
}

/* Acciones "Editar/Guardar/Cancelar título": son enlaces de texto (aunque traen
   .button) → navy sin fondo; el icono SVG hereda el color (currentColor). */
.elementor-widget-woocommerce-my-account .tf-account-wishlist .show-title-form,
.elementor-widget-woocommerce-my-account .tf-account-wishlist .hide-title-form,
.elementor-widget-woocommerce-my-account .tf-account-wishlist .save-title-form {
	background: transparent !important;
	border: 0 !important;
	color: var(--ast-global-color-0) !important;
}
.elementor-widget-woocommerce-my-account .tf-account-wishlist .show-title-form:hover,
.elementor-widget-woocommerce-my-account .tf-account-wishlist .hide-title-form:hover,
.elementor-widget-woocommerce-my-account .tf-account-wishlist .save-title-form:hover {
	color: var(--ast-global-color-1) !important;
}

/* Layout: los dos botones de la celda de acción, apilados con aire y a un ancho
   (evita el "amontonamiento" de "Añade al carrito" + "Eliminar" pegados). */
.elementor-widget-woocommerce-my-account .tf-account-wishlist .shop_table td.product-add-to-cart {
	white-space: normal !important;
}
.elementor-widget-woocommerce-my-account .tf-account-wishlist .shop_table td.product-add-to-cart .add_to_cart_button,
.elementor-widget-woocommerce-my-account .tf-account-wishlist .shop_table td.product-add-to-cart .remove_from_wishlist.button {
	display: block !important;
	width: 100% !important;
	margin: 4px 0 !important;
	text-align: center !important;
	float: none !important;
}

/* Foco de inputs (form de presupuesto) → navy */
.tf-account-wishlist input:focus,
.tf-account-wishlist textarea:focus,
.tf-account-wishlist select:focus {
	border-color: var(--ast-global-color-0) !important;
	outline-color: var(--ast-global-color-0) !important;
}

/* Móvil: evitar desborde de la tabla dentro de la tarjeta */
@media (max-width: 600px) {
	.tf-account-wishlist {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.tf-account-wishlist table.wishlist_table {
		min-width: 520px;
	}
}


/* =============================================================================
   6.8  MI CUENTA — Pedidos (miniaturas + botones), campos de formulario e
        icono de lápiz en "Editar".
   Lógica PHP: tf_kaioverse_orders_thumb_number / tf_kaioverse_orderitem_thumb
   en functions.php. Reversible: borrar esta sección + ese bloque PHP.
   ============================================================================= */

/* --- 6.8.1  Listado de pedidos: miniatura + número de pedido, fecha, estado
   en píldora y total.

   La tarjeta la monta Astra (opción "show-woo-grid-orders") con la celda
   "order-number" en ABSOLUTO a la izquierda (60px de ancho, alto completo) y
   las demás celdas desplazadas con margin-left:80px; en escritorio las acciones
   también van en absoluto, arriba a la derecha. Aquí la foto sube a 112px, así
   que hay que ampliar ese hueco y dar altura a la fila para que quepa centrada.

   El NÚMERO de pedido no cabía en su celda (es la de la foto, y es absoluta:
   el texto se solapaba con el estado), así que lo imprime
   tf_kaioverse_orders_numero_y_fecha() encabezando el bloque de texto, con la
   fecha debajo en segundo plano. El estado lo pinta
   tf_kaioverse_orders_estado_pildora() como píldora de color por grupo. --- */
.ast-orders-table__cell-order-number {
	display: flex !important;
	align-items: center;
	/* Astra le da 60px de ancho y luego 50% a TODAS las celdas dentro del media
	   query de escritorio, que gana por orden de fuente (misma especificidad):
	   en escritorio la celda acababa midiendo medio ancho de la tarjeta y por
	   debajo de 544px volvía a 60px, así que la foto de 112px se comprimía a
	   60x112 (deformada) justo en móvil, que es el 70% del tráfico. Se fija al
	   ancho real de la foto en los dos tramos. */
	width: 112px !important;
}
.ast-orders-table__cell-order-number .tf-order-thumb img {
	width: 112px;
	height: 112px;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid #e6e8ee;
	display: block;
	margin: 0;
	box-shadow: 0 3px 10px rgba(34, 48, 87, .12);
}
/* La miniatura es una celda ABSOLUTA; Astra reserva su hueco con margin-left:80px
   en las celdas de contenido (para foto de 60px). Al doblar la foto (112px) hay
   que ampliar ese hueco y dar altura a la fila para que quepa centrada. */
.ast-orders-table__row {
	min-height: 152px;
}
.ast-orders-table__cell-order-date,
.ast-orders-table__cell-order-status,
.ast-orders-table__cell-order-total {
	margin-left: 136px !important;
}
/* En móvil (< 544px, breakpoint de Astra) la celda de acciones deja de ser
   absoluta a la derecha y vuelve a bloque con margin-left:80 → con la foto de
   112px se solaparía. Se le da el mismo hueco. */
@media (max-width: 543px) {
	.ast-orders-table__cell-order-actions {
		margin-left: 136px !important;
	}
}

/* Número de pedido = título de la tarjeta. El color (navy, hover burdeos) ya lo
   pone §6.6 para cualquier enlace de Mi Cuenta con especificidad (0,6,1); aquí
   solo se fija tamaño, peso y subrayado. */
.ast-orders-table__cell-order-date {
	display: flex;
	flex-direction: column;
	gap: .1em;
	line-height: 1.3;
}
.tf-order-number {
	align-self: flex-start;
	font-size: 1.25em;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none !important;
	white-space: nowrap;
}
.tf-order-date {
	font-size: .92em;
	color: #6b7383;
}

/* Estado en píldora. El grupo lo decide el PHP (clase tf-order-estado--<grupo>)
   a partir del slug, así que los 6 estados a medida del plugin de estados van
   con los nativos equivalentes y uno desconocido cae en gris neutro. */
.tf-order-estado {
	display: inline-block;
	padding: .3em .85em;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: .82em;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tf-order-estado--ok {
	background: #e6f4ec;
	border-color: #bfe2ce;
	color: #0f6b39;
}
.tf-order-estado--progreso {
	background: #e9edf6;
	border-color: #c6d0e6;
	color: var(--ast-global-color-0);
}
.tf-order-estado--espera {
	background: #fdf2dd;
	border-color: #f0dcb0;
	color: #8a5a00;
}
.tf-order-estado--aviso {
	background: #fbe9ea;
	border-color: #f0c9cb;
	color: var(--ast-global-color-1);
}
.tf-order-estado--neutro {
	background: #eef0f4;
	border-color: #dcdfe7;
	color: #5b6577;
}

/* --- 6.8.2  Botones de la fila de acciones → botones de marca.
   El color se ancla con la MISMA especificidad que la regla genérica de enlaces
   de §6.6 (0,6,1: prefijo widget+content + 3 :not) para GANARLE por orden de
   fuente; si no, el texto saldría navy (§6.6) sobre fondo navy = invisible. --- */
.ast-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
/* En escritorio esta celda va en absoluto arriba a la derecha con text-align a
   la derecha, que un contenedor flex ignora: los botones se quedaban pegados a
   la izquierda de su caja. El margen entre ellos lo pone ahora el gap, no el
   margin-right de Astra (se sumaban). */
.ast-orders-table__cell-order-actions a {
	margin-right: 0 !important;
}
@media (min-width: 544px) {
	.ast-orders-table__cell-order-actions {
		justify-content: flex-end;
	}
}
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content .ast-orders-table__cell-order-actions a:not(.button):not(.add_to_cart_button):not(.remove) {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	background: var(--ast-global-color-0) !important;
	color: #fff !important;
	border: 1px solid var(--ast-global-color-0) !important;
	border-radius: 10px;
	padding: .5em 1em;
	font-weight: 600;
	font-size: .9em;
	line-height: 1.1;
	text-decoration: none !important;
	transition: background-color .18s ease, border-color .18s ease;
}
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content .ast-orders-table__cell-order-actions a:not(.button):not(.add_to_cart_button):not(.remove):hover {
	background: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1) !important;
	color: #fff !important;
}

/* --- 6.8.3  Detalle de pedido (view-order): miniatura antes del nombre --- */
.tf-orderitem-thumb {
	display: inline-block;
	vertical-align: middle;
	margin-right: .7em;
}
.tf-orderitem-thumb img {
	width: 92px !important;
	height: 92px !important;
	object-fit: cover;
	border-radius: 14px !important;
	border: 1px solid #e6e8ee;
	display: block;
	margin: 0;
	box-shadow: 0 3px 10px rgba(34, 48, 87, .12);
}

/* --- 6.8.4  Campos de formulario (Detalles, Direcciones): borde visible como
   el del formulario de contacto (2px + radio) + FOCO navy con anillo. --- */
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content textarea,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content select {
	border: 2px solid #b7becb !important;
	border-radius: 5px !important;
	background: #f7f7f7 !important;
	padding: 10px 12px !important;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):focus,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content textarea:focus,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content select:focus {
	border-color: var(--ast-global-color-0) !important;
	box-shadow: 0 0 0 3px rgba(34, 48, 87, .16) !important;
	background: #fff !important;
	outline: none !important;
}

/* --- 6.8.5  Icono de lápiz en los enlaces "Editar" (direcciones + editar
   pedido). Máscara SVG monocroma que hereda el color del enlace/botón
   (navy en direcciones, blanco dentro del botón de acción). --- */
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content a.edit::before,
.ast-orders-table__cell-order-actions a.edit-order::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .45em;
	vertical-align: -.14em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* -----------------------------------------------------------------------------
   6.9  Login / Registro — vista deslogueada de Mi Cuenta (2026-07-16).
   El icono de cabecera ("Mi cuenta") ya no abre el popup de Astra (Header
   Builder → Account → Click Action, cambiado de "Login Popup" a "Link" vía
   Customizer) — enlaza directo a esta página, que ya trae login+registro en
   la misma tarjeta (WooCommerce + "Modern My Account" de Astra). No hacía
   falta crear página nueva. WooCommerce pinta ese login/registro
   (.woocommerce-form-login / .woocommerce-form-register, dentro de
   .u-column1/.u-column2 bajo #customer_login) FUERA de .woocommerce-
   MyAccount-content, así que la 6.6 (branding del resto de Mi Cuenta) no los
   alcanzaba y seguían con el azul #5bc0de por defecto de Elementor. Al ser
   ahora la puerta de entrada principal, se les aplica el mismo navy/burdeos
   que el resto de la web.
   Ajuste 2026-07-16 (2ª pasada): por defecto Astra solo muestra UNO de los
   dos formularios — su JS propio (my-account-form-switcher.js) fija
   `style.display` inline en #customer_login > .u-column2 a "none" al cargar
   la página, y lo alterna por los enlaces #createaccount/#login. Se pidió
   ver los dos a la vez: se fuerza `display:block !important` en ambas
   columnas (un !important en hoja externa gana a un display puesto por JS
   vía .style.display, aunque se reescriba en cada click) y se ocultan los
   enlaces de alternar (ya no alternan nada, quedarían como ruido).
   Ajuste 2026-07-16 (3ª pasada — responsive): se pidió lado a lado en
   pantallas grandes y adaptado en pequeñas. El ancho de la tarjeta NO
   escala en proporción al viewport: el widget "Mi cuenta" de Elementor Pro
   pone `.woocommerce{max-width:540px}` FIJO (no responsive), así que
   #customer_login tiene un TECHO de ~458px (540 menos su padding) en
   cualquier pantalla ancha — tablet incluida, no solo escritorio — y solo
   se estrecha por debajo de eso en pantallas realmente pequeñas (el ancho
   de página disponible cae por debajo de esos ~540+padding). Un media
   query por ANCHO DE VENTANA no sirve aquí (esos ~458px se alcanzan ya en
   tablet, no solo en escritorios grandes). Se usa una *container query*
   (se adapta al ancho real de la tarjeta, no al del viewport — mismo
   criterio "CSS moderno" que los swatches con :has() de la 1.10), con el
   corte a 400px de tarjeta (bajo el techo de ~458px, pero por encima del
   ancho que tiene en un móvil real): por debajo, login y registro
   apilados (con separador horizontal); a partir de 400px, lado a lado con
   separador vertical entre columnas.
   Ojo 1: el `container-type` se declara en el `.woocommerce` PADRE de
   #customer_login, no en #customer_login mismo — una container query no
   puede reestilar al propio elemento contenedor, solo a sus descendientes.
   Ojo 2: ese mismo `.woocommerce` trae de Elementor Pro un `max-width:540px`
   fijo — con solo ~458px útiles, dos columnas quedaban a ~205px cada una y
   el texto ("Acceder", "ACCESO"…) se partía letra a letra. Se amplía ese
   tope a 960px (solo afecta al ancho MÁXIMO en pantallas anchas; en móvil
   no cambia nada porque ahí manda el ancho de viewport, no el tope) para
   que el contenido de cada columna (texto y botones) respire.
   ----------------------------------------------------------------------------- */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce {
	container-type: inline-size;
	container-name: tf-account-auth;
	max-width: 960px !important;
}
.elementor-widget-woocommerce-my-account #customer_login > .u-column1,
.elementor-widget-woocommerce-my-account #customer_login > .u-column2 {
	display: block !important;
	float: none !important;
	width: 100% !important;
}
.elementor-widget-woocommerce-my-account #customer_login > .u-column2 {
	margin-top: 40px !important;
	padding-top: 32px !important;
	border-top: 1px solid rgba(34, 48, 87, .15);
}
.elementor-widget-woocommerce-my-account #customer_login .ast-woo-form-actions {
	display: none !important;
}

/* --- Tarjeta ≥400px: login y registro lado a lado. --- */
@container tf-account-auth (min-width: 400px) {
	.elementor-widget-woocommerce-my-account #customer_login {
		display: flex !important;
		align-items: flex-start;
		gap: 48px;
	}
	.elementor-widget-woocommerce-my-account #customer_login > .u-column1,
	.elementor-widget-woocommerce-my-account #customer_login > .u-column2 {
		width: 0 !important;
		flex: 1 1 0%;
	}
	.elementor-widget-woocommerce-my-account #customer_login > .u-column2 {
		margin-top: 0 !important;
		padding-top: 0 !important;
		padding-left: 48px !important;
		border-top: none;
		border-left: 1px solid rgba(34, 48, 87, .15);
	}
	/* Salvaguarda: con el ancho de columna ya holgado (960px de tope) no
	   debería hacer falta, pero evita que un texto de botón largo se
	   parta en dos líneas. */
	.elementor-widget-woocommerce-my-account #customer_login .woocommerce-form-login__submit,
	.elementor-widget-woocommerce-my-account #customer_login .woocommerce-form-register__submit {
		white-space: nowrap;
	}
}

.elementor-widget-woocommerce-my-account .u-column1 h2,
.elementor-widget-woocommerce-my-account .u-column2 h2 {
	color: var(--ast-global-color-0) !important;
}

.elementor-widget-woocommerce-my-account .woocommerce-form-login__submit,
.elementor-widget-woocommerce-my-account .woocommerce-form-register__submit {
	background-color: var(--ast-global-color-0) !important;
	border-color: var(--ast-global-color-0) !important;
	color: #fff !important;
}
.elementor-widget-woocommerce-my-account .woocommerce-form-login__submit:hover,
.elementor-widget-woocommerce-my-account .woocommerce-form-register__submit:hover {
	background-color: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1) !important;
}

.elementor-widget-woocommerce-my-account .woocommerce-LostPassword a,
.elementor-widget-woocommerce-my-account .woocommerce-privacy-policy-link {
	color: var(--ast-global-color-0) !important;
}
.elementor-widget-woocommerce-my-account .woocommerce-LostPassword a:hover,
.elementor-widget-woocommerce-my-account .woocommerce-privacy-policy-link:hover {
	color: var(--ast-global-color-1) !important;
}

.elementor-widget-woocommerce-my-account .woocommerce-form-login input:not([type="checkbox"]):not([type="hidden"]):focus,
.elementor-widget-woocommerce-my-account .woocommerce-form-register input:not([type="hidden"]):focus {
	border-color: var(--ast-global-color-0) !important;
	box-shadow: 0 0 0 3px rgba(34, 48, 87, .16) !important;
	outline: none !important;
}


/* =============================================================================
   7. ANIMACIÓN DE SUBRAYADO EN ENLACES (hover slide left → right)
   Solo CSS — scaleX en GPU, sin reflow, sin JS.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   7.1  Contextos con animación de subrayado
   · Footer
   · Migas de pan (Astra + WooCommerce)
   · Categorías y etiquetas en ficha de producto (.posted_in, .tagged_as)
   · (2026-08-24: la tarjeta de características de la ficha, §1.12, SALIÓ de aquí — el
     subrayado deslizante la hacía parecer un menú en vez de una ficha técnica)
   · Contenido de páginas de texto (aviso legal, política de privacidad, etc.)
   Excluye botones en los contextos que pueden contenerlos.
   ----------------------------------------------------------------------------- */

.site-footer a:not(.button):not([class*="btn"]):not([role="button"]),
.ast-breadcrumbs a,
.woocommerce-breadcrumb a,
.posted_in a,
.tagged_as a,
.entry-content a:not(.button):not([class*="btn"]):not([role="button"]) {
	position: relative;
	text-decoration: none !important;
}

.site-footer a:not(.button):not([class*="btn"]):not([role="button"])::after,
.ast-breadcrumbs a::after,
.woocommerce-breadcrumb a::after,
.posted_in a::after,
.tagged_as a::after,
.entry-content a:not(.button):not([class*="btn"]):not([role="button"])::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.site-footer a:not(.button):not([class*="btn"]):not([role="button"]):hover::after,
.ast-breadcrumbs a:hover::after,
.woocommerce-breadcrumb a:hover::after,
.posted_in a:hover::after,
.tagged_as a:hover::after,
.entry-content a:not(.button):not([class*="btn"]):not([role="button"]):hover::after {
	transform: scaleX(1);
}

/* =============================================================================
   8. NAVEGACIÓN / MEGAMENU
   ============================================================================= */

/* ─── Común a ambos megamenus ─────────────────────────────────────────────── */

/* Wrapper: fondo blanco, borde superior, sombra */
.ast-builder-menu-2 .astra-megamenu-li .astra-full-megamenu-wrapper {
	background-color: #ffffff;
	border-top: 2px solid #111111;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

/* ─── 8.A  MEGAMENU "COLECCIONES" (menu-item-13591) ──────────────────────── */
/* 2 columnas con cabeceras: ANIME | CÓMICS & VIDEOJUEGOS */

/* Grid 2 columnas */
.ast-desktop .menu-item-13591.astra-megamenu-li .astra-megamenu.astra-megamenu-focus {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 !important;
	padding: 28px 44px !important;
}

/* Columnas: override flex:1 de Astra */
.ast-desktop .menu-item-13591.astra-megamenu-li .astra-megamenu.astra-megamenu-focus > .menu-item-heading {
	flex: none !important;
	width: auto !important;
	padding: 0 40px 0 0 !important;
}
.ast-desktop .menu-item-13591.astra-megamenu-li .astra-megamenu.astra-megamenu-focus > .menu-item-heading + .menu-item-heading {
	border-left: 1px solid #e8e8e8;
	padding-left: 40px !important;
}
.ast-desktop .menu-item-13591.astra-megamenu-li .astra-megamenu.astra-megamenu-focus > .menu-item-heading:last-child {
	padding-right: 0 !important;
}

/* Ocultar flechas de acordeón en cabeceras desktop */
.ast-desktop .ast-builder-menu-2 .astra-megamenu > .menu-item-heading > span.menu-link .ast-icon,
.ast-desktop .ast-builder-menu-2 .astra-megamenu > .menu-item-heading > span.menu-link .dropdown-menu-toggle {
	display: none !important;
}

/* Texto de cabecera */
.ast-builder-menu-2 .astra-megamenu > .menu-item-heading > span.menu-link,
.ast-builder-menu-2 .astra-megamenu > .menu-item-heading > span.ast-disable-link {
	display: block;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase !important;
	color: #999999 !important;
	padding: 0 0 10px 0 !important;
	margin-bottom: 12px;
	border-bottom: 1px solid #e8e8e8;
	cursor: default;
	pointer-events: none;
}

/* Sub-menus del panel de Colecciones */
.menu-item-13591.astra-megamenu-li .astra-megamenu.astra-megamenu-focus .sub-menu {
	display: block !important;
	position: static !important;
	background: none !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.menu-item-13591.astra-megamenu-li .astra-megamenu.astra-megamenu-focus .sub-menu > .menu-item {
	display: block !important;
	flex: none !important;
	width: auto !important;
	padding: 0 !important;
}

.menu-item-13591.astra-megamenu-li .astra-megamenu.astra-megamenu-focus .sub-menu .menu-link {
	display: block !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	color: #333333 !important;
	padding: 5px 0 !important;
	line-height: 1.4;
	text-decoration: none !important;
	background: none !important;
	transition: color 0.15s ease, padding-left 0.15s ease;
}

.menu-item-13591.astra-megamenu-li .astra-megamenu.astra-megamenu-focus .sub-menu .menu-link:hover {
	color: #111111 !important;
	padding-left: 6px !important;
	background: none !important;
}

/* ─── 8.B  MEGAMENU "ESTUDIOS" ───────────────────────────────────────────── */
/* Columnas y estilos gestionados íntegramente desde Astra Pro Mega Menu.     */
/* Sin overrides CSS — configuración en wp-admin > Apariencia > Menús.        */

/* ─── 8.C  STOCK / PREORDER — nav bar (fondo azul oscuro rgb(34,48,87)) ─── */

/* Bright verde / naranja legibles sobre fondo oscuro */
.ast-builder-menu-2 .menu-item-1176 > .menu-link {
	color: #6ee7b7 !important;
	font-weight: 700 !important;
}
.ast-builder-menu-2 .menu-item-13589 > .menu-link {
	color: #fcd34d !important;
	font-weight: 700 !important;
}

/* Icono circular de color antes del texto */
.ast-builder-menu-2 .menu-item-1176 > .menu-link::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #6ee7b7;
	margin-right: 6px;
	vertical-align: middle;
	position: relative;
	top: -1px;
}
.ast-builder-menu-2 .menu-item-13589 > .menu-link::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #fcd34d;
	margin-right: 6px;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

/* ─── 8.D  Mobile (breakpoint Astra ≤ 921px) ────────────────────────────── */

@media (max-width: 921px) {
	.ast-builder-menu-2 .astra-megamenu-li .astra-full-megamenu-wrapper {
		box-shadow: none;
		border-top: none;
	}

	/* Colecciones mobile */
	.menu-item-13591.astra-megamenu-li .astra-megamenu.astra-megamenu-focus {
		display: block !important;
		padding: 0 !important;
	}
	.ast-builder-menu-2 .astra-megamenu > .menu-item-heading > span.menu-link,
	.ast-builder-menu-2 .astra-megamenu > .menu-item-heading > span.ast-disable-link {
		font-size: 11px !important;
		padding: 12px 20px 8px !important;
		margin-bottom: 0;
		border-bottom: none;
		border-top: 1px solid #e8e8e8;
		color: #777777 !important;
	}
	.menu-item-13591.astra-megamenu-li .astra-megamenu.astra-megamenu-focus .sub-menu .menu-link {
		padding: 8px 20px 8px 32px !important;
		font-size: 14px !important;
	}

}


/* =============================================================================
   9. ICONO DE CUENTA (cabecera) — isotipo Kaioverse en lugar del SVG de Astra
   El componente "Account" de Astra pinta un SVG dentro de
   .ast-header-account-type-icon .ahfb-svg-iconset. Lo ocultamos y usamos el
   isotipo PNG como fondo (conserva el color azul/oro, sin recolorear).
   Estados cubiertos para que el icono sea SIEMPRE el isotipo:
     · Desconectado → icono (.ast-header-account-type-icon .ahfb-svg-iconset).
     · Conectado → Astra muestra el gravatar (my-account-user-gravatar=1) en
       .ast-header-account-type-avatar img.avatar; lo tapamos con el mismo isotipo.
   Aplica a cabecera desktop y popup mobile. Tamaño 48px desktop / 24px mobile.
   ============================================================================= */

/* Desconectado: SVG de Astra → isotipo */
.ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg {
	display: none;
}

.ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset {
	width: 48px;
	height: 48px;
	background: url('assets/icono-ironman.png') no-repeat center center;
	background-size: contain;
}

/* Conectado: gravatar → mismo isotipo */
.ast-header-account-wrap .ast-header-account-type-avatar img.avatar {
	display: none;
}

.ast-header-account-wrap .ast-header-account-type-avatar {
	display: inline-flex;
	width: 48px;
	height: 48px;
	background: url('assets/icono-ironman.png') no-repeat center center;
	background-size: contain;
}

/* Hover: casco alternativo (ambos estados) */
.ast-header-account-wrap:hover .ast-header-account-type-icon .ahfb-svg-iconset,
.ast-header-account-wrap:hover .ast-header-account-type-avatar {
	background-image: url('assets/Icono-Ironman-hover.png');
}

/* Etiqueta "Mi cuenta" bajo el casco (persistente — el casco solo no comunica
   "cuenta", y con 70% de móvil no hay hover que lo aclare). El texto se inyecta
   por CSS (Astra no imprime texto en modo icono, no hay string que traduzca
   TranslatePress), así que se localiza por el atributo html[lang] que cambia TP.
   Aplica al enlace de cuenta en cabecera desktop y popup mobile. */
.ast-header-account-wrap .ast-header-account-link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	line-height: 1;
}

.ast-header-account-wrap .ast-header-account-link::after {
	content: "Mi cuenta";
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ast-global-color-0);
	white-space: nowrap;
}

/* Color de marca (rojo) en hover, igual que el cambio de casco */
.ast-header-account-wrap:hover .ast-header-account-link::after {
	color: var(--ast-global-color-1);
}

/* Traducciones por idioma (TranslatePress fija el lang del <html>) */
html[lang^="en"] .ast-header-account-wrap .ast-header-account-link::after { content: "My account"; }
html[lang^="fr"] .ast-header-account-wrap .ast-header-account-link::after { content: "Mon compte"; }
html[lang^="it"] .ast-header-account-wrap .ast-header-account-link::after { content: "Il mio account"; }
html[lang^="de"] .ast-header-account-wrap .ast-header-account-link::after { content: "Mein Konto"; }
html[lang^="ja"] .ast-header-account-wrap .ast-header-account-link::after { content: "マイアカウント"; }

@media (max-width: 921px) {
	.ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset,
	.ast-header-account-wrap .ast-header-account-type-avatar {
		width: 24px;
		height: 24px;
	}
}


/* =============================================================================
   10. CABECERA DE ARCHIVO WOO — Banner cómic (categorías / tienda / etiquetas)
   Reemplaza el título nativo de WooCommerce (desactivado en functions.php) por
   un banner de marca: fondo charcoal con semitono de puntos (CSS puro, sin
   imágenes) y ribbon rojo en skew con acento blanco. El H1 dinámico lo imprime
   tf_kaioverse_archive_banner(). Las migas nativas de WC quedan justo debajo.
   ----------------------------------------------------------------------------- */
/* Envoltorio: alinea al ancho del contenido (hereda de .ast-container) */
.tf-cat-banner-wrap {
	margin-top: clamp(16px, 2.5vw, 28px);
}

.tf-cat-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(130px, 21vw, 210px);
	margin: 0 0 14px;
	padding: clamp(34px, 6vw, 52px) clamp(22px, 5vw, 60px);
	border-radius: 22px;
	/* Fondo base: degradado diagonal charcoal */
	background: radial-gradient(125% 150% at 72% 28%, #46494f 0%, #313439 46%, #232529 100%);
}

/* Capa de semitono: rejilla de puntos con viñeta hacia los bordes */
.tf-cat-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(0, 0, 0, .42) 32%, transparent 33%);
	background-size: 13px 13px;
	-webkit-mask-image: radial-gradient(120% 135% at 62% 32%, rgba(0, 0, 0, .18) 28%, #000 100%);
	mask-image: radial-gradient(120% 135% at 62% 32%, rgba(0, 0, 0, .18) 28%, #000 100%);
}

/* Ribbon rojo en skew */
.tf-cat-banner__ribbon {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: clamp(12px, 2.2vw, 18px) clamp(28px, 4.6vw, 52px);
	background: linear-gradient(180deg, #c11a20 0%, #9c1318 100%);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
	transform: skewX(-11deg);
}

/* Acento blanco a la derecha del ribbon */
.tf-cat-banner__ribbon::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -26px;
	width: 14px;
	background: #fff;
}

.tf-cat-banner__title {
	margin: 0;
	transform: skewX(11deg); /* contrarresta el skew del ribbon */
	color: #fff;
	font-weight: 700;
	font-size: clamp(26px, 5.2vw, 54px);
	line-height: 1.05;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/* Migas bajo el banner (reutilizan astra_get_breadcrumb → .ast-breadcrumbs) */
.tf-cat-banner__crumbs {
	margin: 10px 2px 0;
}

.tf-cat-banner__crumbs .ast-breadcrumbs {
	font-size: 14px;
}

/* Móvil (70% del tráfico): el título puede partir en varias líneas */
@media (max-width: 600px) {
	.tf-cat-banner__title {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.tf-cat-banner__ribbon::after {
		right: -18px;
		width: 11px;
	}
}


/* =============================================================================
   11. TARJETA DE FORMULARIO — navy + borde rojo (réplica del form de contacto)
   El formulario de /contacto/ (page-id 272) va sobre un "frame" de marca montado
   en Elementor (imagen frame-13.avif): panel navy con un borde rojo desplazado
   abajo/derecha (estilo viñeta de cómic) y texto en blanco. Aquí se reproduce ese
   mismo tratamiento SOLO con CSS —sin imagen raster, nítido a cualquier tamaño y
   recoloreable— y se aplica al RESTO de Gravity Forms del sitio (servicio
   postventa, condiciones de envío, etc.) para unificar el diseño.

   Colores = los dos tokens de marca, exactamente los del frame original:
     · navy  var(--ast-global-color-0)  #223057
     · rojo  var(--ast-global-color-1)  #9a1317

   Se EXCLUYE la página de contacto (.page-id-272): ya trae el frame en Elementor,
   así no se duplica el tratamiento. Los inputs y el botón conservan el estilo de
   la sección 5 (claros y legibles sobre navy).
   Reversible: borrar esta sección + bump de CHILD_THEME_KAIOVERSE_VERSION.
   ----------------------------------------------------------------------------- */

/* Panel navy con borde rojo desplazado (sombra dura, no afecta al layout) */
body:not(.page-id-272) .gform_wrapper {
	background-color: var(--ast-global-color-0);
	padding: clamp(22px, 4vw, 38px);
	border-radius: 2px;
	box-shadow: clamp(7px, 1.1vw, 12px) clamp(7px, 1.1vw, 12px) 0 0 var(--ast-global-color-1);
	box-sizing: border-box;
}

/* Texto blanco sobre el panel navy (labels, descripciones, títulos de sección,
   bloques HTML, leyenda de obligatorios y mensaje de confirmación). NO se tocan
   inputs ni select: mantienen texto oscuro sobre fondo claro (legibles). */
body:not(.page-id-272) .gform_wrapper .gfield_label,
body:not(.page-id-272) .gform_wrapper legend.gfield_label,
body:not(.page-id-272) .gform_wrapper .ginput_complex label,
body:not(.page-id-272) .gform_wrapper .gchoice label,
body:not(.page-id-272) .gform_wrapper .gfield_description:not(.validation_message):not(.gfield_validation_message),
body:not(.page-id-272) .gform_wrapper .gsection_title,
body:not(.page-id-272) .gform_wrapper h2.gsection_title,
body:not(.page-id-272) .gform_wrapper .gfield_html,
body:not(.page-id-272) .gform_wrapper .gform_required_legend,
body:not(.page-id-272) .gform_wrapper .gform_heading,
body:not(.page-id-272) .gform_wrapper .gform_title,
body:not(.page-id-272) .gform_wrapper .gform_description,
body:not(.page-id-272) .gform_wrapper .gform_confirmation_message {
	color: #ffffff;
}

/* Los campos tipo "HTML" de Gravity (.gfield_html) suelen traer <h4>/<p>/<strong>
   con el color de encabezado del tema (navy) → quedarían navy sobre navy. Forzar
   blanco en TODO su contenido (el contraste manda; de ahí el !important). */
body:not(.page-id-272) .gform_wrapper .gfield_html,
body:not(.page-id-272) .gform_wrapper .gfield_html * {
	color: #ffffff !important;
}

/* Contacto (page-id 272): su panel navy se monta en Elementor con una imagen de
   frame (frame-13.avif, background cover) que RECORTA el borde rojo derecho (el
   panel es más alto que ancho → cover recorta los lados). Para que el form de
   contacto quede igual que el resto, se sustituye esa imagen por el mismo
   tratamiento CSS: navy sólido + borde rojo desplazado abajo Y derecha. El texto
   blanco ya lo da la sección 5.1. */
.elementor-272 .elementor-element.elementor-element-d402d16 {
	background-image: none !important;
	background-color: var(--ast-global-color-0) !important;
	border-radius: 2px;
	box-shadow: clamp(7px, 1.1vw, 12px) clamp(7px, 1.1vw, 12px) 0 0 var(--ast-global-color-1) !important;
}


/* -----------------------------------------------------------------------------
   11.1  Legibilidad dentro del panel navy y estados de validación (2026-09-12)

   TODOS los Gravity Forms del sitio van sobre navy: los demás por el panel de
   arriba, contacto (272) por su frame de Elementor. Eso deja dos familias de
   problema, y son opuestas:

   (a) Piezas que Gravity pinta en NEGRO o en su rojo #C02B0A y que aquí caen
       sobre el navy: las instrucciones de arrastrar archivos (negro, 17px,
       1,63:1), el "(Obligatorio)" de cada campo (2,21:1), los sublabels, el
       contador de caracteres y la lista de archivos ya subidos. Se pasan a
       blanco; el rojo de "obligatorio" se aclara a #ff9a93 (6,4:1 sobre navy)
       para no perder la señal de color.

   (b) Al revés: las cajas de error de Gravity traen fondo casi blanco
       (#fff9f9) con borde rojo, y les llegaba TEXTO BLANCO — invisible. La
       causa es que Gravity marca el mensaje de un campo con .gfield_description
       ADEMÁS de .validation_message, así que lo alcanzaba la regla de arriba
       (excluido ya en §5.0/§5.1/§11). Aquí se fija su color en positivo, junto
       al del resumen de errores de cabecera, para que ningún cambio futuro en
       las reglas de blanco vuelva a dejarlas ilegibles.

   Sin :not(.page-id-272): en contacto el fondo también es navy, así que el
   tratamiento vale igual para los cuatro formularios (contacto, servicio
   postventa, buscamos tu resina, condiciones de envío).
   Reversible: borrar esta subsección + bump de versión.
   ----------------------------------------------------------------------------- */

/* (a) Texto sobre el navy — lo que Gravity deja en negro */
.gform_wrapper .gform_drop_area,
.gform_wrapper .gform_drop_instructions,
.gform_wrapper .ginput_preview,
.gform_wrapper.gravity-theme .ginput_container .ginput_counter,
.gform_wrapper .gfield_consent_label,
.gform_wrapper .gsection_description,
.gform_wrapper .gform_page_footer,
.gform_wrapper .ginput_container > label,
.gform_wrapper .gfield_time_hour label,
.gform_wrapper .gfield_time_minute label,
.gform_wrapper .gfield_date_month label,
.gform_wrapper .gfield_date_day label,
.gform_wrapper .gfield_date_year label {
	color: #ffffff;
}

/* Zona de arrastrar archivos: el punteado #ccc y el fondo rgba(0,0,0,.02) de
   Gravity son invisibles sobre navy → se invierten a claro translúcido.
   El prefijo .gravity-theme y el .ginput_container intermedio no son adorno:
   Gravity pinta esto (y el contador de caracteres) con .gform_wrapper.gravity-theme
   .x (0,3,0), así que un .gform_wrapper .x (0,2,0) pierde la cascada. */
.gform_wrapper.gravity-theme .ginput_container .gform_drop_area {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.38);
}

/* Marca de campo obligatorio: el #C02B0A de Gravity da 2,2:1 sobre navy */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text,
.page-id-272 .gform_wrapper .gfield_required,
.page-id-272 .gform_wrapper .gfield_required_text {
	color: #ff9a93 !important;
}

/* Etiqueta de un campo en error: Gravity la pinta de rojo oscuro; se aclara al
   mismo tono para conservar la señal sin perder legibilidad. */
.gform_wrapper .gfield_error > .gfield_label,
.gform_wrapper .gfield_error > legend,
.page-id-272 .gform_wrapper .gfield_error > .gfield_label,
.page-id-272 .gform_wrapper .gfield_error > legend {
	color: #ff9a93 !important;
}

/* (b) Cajas de error — fondo claro propio de Gravity → texto rojo, nunca blanco */
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .gform_validation_errors,
.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_validation_errors li,
.gform_wrapper .gform_validation_errors a,
.page-id-272 .gform_wrapper .validation_message,
.page-id-272 .gform_wrapper .gfield_validation_message,
.page-id-272 .gform_wrapper .gform_validation_errors,
.page-id-272 .gform_wrapper .gform_validation_errors h2,
.page-id-272 .gform_wrapper .gform_validation_errors li,
.page-id-272 .gform_wrapper .gform_validation_errors a {
	color: #c02b0a !important;
}

/* El mensaje de error del campo hereda el 13px de §5.0 al perder esa regla:
   se le devuelve el tamaño de caja de Gravity. */
.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
	font-size: 15px;
}


/* =============================================================================
   12. FOOTER — 3 columnas curadas
   Antes: col.1 vacía · col.2 "Tienda" volcaba el megamenú entero (~45 enlaces,
   con los placeholders Col1/Col2/Col3 a la vista) · col.3 "Info".
   Ahora (estructura en widgets, ver scripts/tf-footer-setup.php):
     · Col 1 (footer-widget-1): bloque de marca (logo + claim + confianza).
     · Col 2 (footer-widget-2): menú "Colecciones" — 3 primeras franquicias de
       cada tipo del menú superior, como enlaces de taxonomía real (se traducen
       solos). Menú "Comprar" retirado del footer el 2026-09-11 (a wp_inactive_widgets).
     · Col 3 (footer-widget-3): menú "Ayuda" (antes "Info").
   El footer es navy de tema; los enlaces ya son blancos con hover dorado (Astra
   por área), así que aquí solo se afinan títulos, separación y el bloque de marca.
   Colores de marca: navy var(--ast-global-color-0) · rojo var(--ast-global-color-1)
   · dorado var(--ast-global-color-8). Mobile-first (≈70% del tráfico): Astra ya
   apila las columnas; aquí se centra el bloque de marca.
   Reversible: re-ejecutar el script restaurando el backup de backups-db/ + borrar
   esta sección.
   ----------------------------------------------------------------------------- */

/* Equilibrio en escritorio. Astra monta la fila como 2 celdas de 700px
   (Marca+Colecciones en una, Ayuda en la otra) con align-items:center → las
   columnas no alinean arriba y queda un gran vacío a la derecha. Con
   display:contents en las dos secciones, las 3 áreas de widget pasan a ser items
   directos del grid de la fila y se reparten en 3 columnas reales a todo el ancho,
   alineadas arriba. */
@media (min-width: 922px) {
	.site-footer .site-primary-footer-inner-wrap.ast-builder-grid-row {
		grid-template-columns: 1.5fr 1fr 1fr !important;
		gap: clamp(32px, 4vw, 72px) !important;
		align-items: start !important;
	}
	.site-footer .site-footer-primary-section-1,
	.site-footer .site-footer-primary-section-2 {
		display: contents !important;
	}
	.site-footer .footer-widget-area {
		width: auto !important;
	}
}

/* Títulos de columna: versalitas con subrayado rojo de marca (anula el 24px/negro
   global de .widget-title; especificidad 0,3,0 > 0,1,0). */
.site-footer .footer-widget-area .widget-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 16px;
	padding-bottom: 9px;
	border-bottom: 2px solid var(--ast-global-color-1);
}

/* Dos grupos apilados (Colecciones + Comprar) en la columna central */
.site-footer .footer-widget-area .widget + .widget {
	margin-top: clamp(22px, 2.6vw, 32px);
}

/* Listas de menú: limpias y con aire entre ítems */
.site-footer .footer-widget-area .menu,
.site-footer .footer-widget-area ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer .footer-widget-area li {
	margin: 0 0 9px;
	line-height: 1.4;
}

/* --- Bloque de marca (columna 1): logo blanco + claim + confianza + tarjetas --- */
.tf-foot-brand__logo {
	display: inline-block;
	margin: 0 0 18px;
}
.tf-foot-brand__logo img {
	max-width: 210px;   /* logo blanco kaioverse-logo-blanco.png (ratio ~2:1) */
	width: 100%;
	height: auto;
}
.tf-foot-brand__tag {
	color: #b6bfd6;
	font-size: 14px;
	line-height: 1.7;
	margin: 0 0 20px;
	max-width: 42ch;    /* claim ampliado para equilibrar el peso visual de la columna */
}

/* Señales de confianza (check verde) */
.tf-foot-brand__trust {
	list-style: none !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tf-foot-brand__trust .tf-trust {
	position: relative;
	margin: 0;
	padding-left: 26px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #b6bfd6;
}
.tf-foot-brand__trust .tf-trust::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: -1px;
	color: #6ee7b7;     /* verde legible sobre navy (igual que indicadores STOCK) */
	font-weight: 700;
}
.tf-foot-brand__trust a { color: inherit; }

/* Métodos de pago — tarjetas (genera confianza). Marcas en chip blanco; los
   métodos mostrados son los que cubre la pasarela PayPal del sitio. Mastercard
   se dibuja con dos círculos en CSS (sin imágenes ni SVG embebido). AMEX retirado
   el 2026-09-11 a petición de Raúl ("da muchos problemas"). */
.tf-foot-pay__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8d97b4;
	margin: 0 0 9px;
}
.tf-foot-pay__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.tf-pay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 30px;
	background: #ffffff;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: .02em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
	box-sizing: border-box;
}
.tf-pay--visa { color: #1434cb; }
.tf-pay--ppal { color: #003087; font-size: 10px; }
.tf-pay--mc {
	position: relative;
}
.tf-pay--mc::before,
.tf-pay--mc::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	transform: translateY(-50%);
}
.tf-pay--mc::before { left: 9px;  background: #eb001b; }
.tf-pay--mc::after  { right: 9px; background: #f79e1b; mix-blend-mode: multiply; }

/* Móvil (≈70% del tráfico): Astra apila; centramos el bloque de marca */
@media (max-width: 921px) {
	.tf-foot-brand {
		text-align: center;
	}
	.tf-foot-brand__tag {
		margin-left: auto;
		margin-right: auto;
	}
	.tf-foot-brand__trust {
		align-items: center;
	}
	.tf-foot-pay__cards {
		justify-content: center;
	}
	.site-footer .footer-widget-area .widget-title {
		margin-top: 4px;
	}
}


/* =============================================================================
   13. PORTADA — Bloque de ventajas ("rework" 2026-06-17)
   Sección flex nativa de Elementor (contenedor #a1cf000) sobre panel navy
   degradado. 4 columnas en desktop, 2 en tablet/móvil. Cada ventaja: icono
   circular PNG + título tipo "ribbon" cómic (placa blanca con laterales inclinados,
   texto navy en mayúsculas) + descripción blanca. Se ancla al ID del contenedor
   porque Elementor no imprime la clase CSS personalizada del contenedor (sí la de
   los widgets).
   Sustituye al antiguo grid desktop (icon-box ×18 por idioma) + carrusel móvil.
   Reversible: borrar esta sección + restaurar _elementor_data desde
   backups-db/home-268-elementor-2026-06-17.json.

   NOTA panel "boxed": el contenedor exterior de Elementor pinta el degradado a
   sangre completa (ancho de ventana), lo que lo dejaba pegado a los bordes. Para
   que el panel tenga el MISMO ancho que los bloques de abajo (marcas/categorías),
   neutralizamos el fondo/padding del contenedor exterior y repintamos el navy
   sobre su .e-con-inner (que es el "boxed" y sigue los gutters del tema, sin
   hardcodear medidas). En el editor de Elementor el panel se verá a todo el ancho;
   en el front sale boxed. El degradado se duplica aquí a propósito.
   ============================================================================= */

/* Panel navy "boxed": del contenedor exterior (full-bleed) al .e-con-inner */
.elementor-element-a1cf000 {
	background-image: none !important;
	background-color: transparent !important;
	padding: 0 !important;
}
.elementor-element-a1cf000 > .e-con-inner {
	background: linear-gradient(160deg, #34456E 0%, #1B2440 100%);
	border-radius: 28px;
	padding: 48px 40px;
}

/* Columnas: 4 en desktop */
.elementor-element-a1cf000 > .e-con-inner > .e-con {
	flex: 1 1 22%;
	max-width: 24%;
	box-sizing: border-box;
}

/* Icono circular ilustrado (la imagen ya trae el círculo) */
.tf-ventaja-icono img {
	width: 118px;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Título "ribbon": placa blanca con laterales inclinados + texto navy mayúsculas.
   inline-block + clip-path (parallelogramo) → laterales en cuña como en el diseño.
   La clase va en el wrapper del widget; el texto real es .elementor-heading-title. */
.tf-ventaja-titulo .elementor-heading-title {
	display: inline-block;
	background: #ffffff;
	color: var(--ast-global-color-0, #223057);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-size: clamp(13px, 1.05vw, 16px);
	line-height: 1.35;
	padding: 0.32em 0.95em;
	clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

/* Descripción */
.tf-ventaja-desc,
.tf-ventaja-desc p {
	color: #ffffff;
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

/* Tablet y móvil: 2 columnas */
@media (max-width: 1024px) {
	.elementor-element-a1cf000 > .e-con-inner > .e-con {
		flex-basis: 46%;
		max-width: 48%;
	}
	.tf-ventaja-icono img {
		width: 104px;
	}
}
@media (max-width: 600px) {
	.elementor-element-a1cf000 > .e-con-inner {
		padding: 32px 18px;
	}
}
@media (max-width: 480px) {
	.tf-ventaja-icono img {
		width: 92px;
	}
}


/* =============================================================================
   14. SERVICIO POSTVENTA — Valores (iconos Harry Potter)
   Página "Servicio postventa" (page-id 13547). Fila flex nativa de Elementor
   (contenedor #b1d0000) sobre el fondo claro de la página: 4 columnas, cada una
   con icono circular PNG + etiqueta (Eficacia · Compromiso · Organización ·
   Responsabilidad). Sustituye al carrusel anterior (icon-box ×6 por idioma con
   textos largos). Se ancla al ID del contenedor (Elementor no imprime la clase
   custom del contenedor; sí la de los widgets).
   Reversible: borrar esta sección + restaurar _elementor_data desde
   backups-db/postventa-13547-elementor-2026-06-17.json.
   ============================================================================= */

.elementor-element-b1d0000 > .e-con-inner > .e-con {
	flex: 1 1 200px;
	max-width: 24%;
	box-sizing: border-box;
}
.tf-valor-icono img {
	width: 150px;
	height: auto;
	display: block;
	margin: 0 auto;
}
.tf-valor-titulo .elementor-heading-title {
	margin-top: 12px;
	font-size: 18px;
}
.tf-valor-desc,
.tf-valor-desc p {
	font-size: 14.5px;
	line-height: 1.55;
	margin: 8px 0 0;
	text-align: center;
}
@media (max-width: 1024px) {
	.elementor-element-b1d0000 > .e-con-inner > .e-con {
		flex-basis: 46%;
		max-width: 48%;
	}
	.tf-valor-icono img {
		width: 130px;
	}
}
@media (max-width: 480px) {
	.tf-valor-icono img {
		width: 112px;
	}
}


/* =============================================================================
   15. CABECERA — Selectores de moneda (Aelia) e idioma (TranslatePress)
   Widgets en el área "Header Widget 1" (barra superior navy). Antes: dos
   píldoras blancas con borde flotando sobre el navy ("pegote"). Ahora se
   integran: sin caja (fondo/borde transparentes), texto blanco con hover dorado
   (convención del sitio, --ast-global-color-8), banderas pequeñas. Los
   desplegables ABIERTOS conservan fondo claro + texto navy para legibilidad.
   No evidente: el switcher de TRP (v2) trae sus colores/tamaños como custom
   properties INLINE en .trp-shortcode-switcher__wrapper → se sobreescriben con
   !important. El panel abierto de TRP mantiene su --bg claro, por eso se re-pinta
   el texto de sus items a navy (si no, heredaría el --text blanco y sería ilegible).
   Reversible: borrar esta sección + bump de versión.
   ============================================================================= */

/* Sin márgenes del área de widgets de cabecera */
.header-widget-area .widget {
	margin: 0 !important;
}

/* ─── 15.A  Aelia Currency Switcher ──────────────────────────────────────── */

/* Trigger cerrado: sin caja, compacto */
.header-widget-area .wc_aelia_cs_currency_selector.dropdown_selector {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 2px 4px !important;
	min-width: 0 !important;
	width: auto !important;
}

.header-widget-area .wc_aelia_cs_currency_selector .selected_option {
	gap: 6px !important;
	padding: 0 18px 0 0 !important; /* reserva sitio para el chevron a la derecha */
	position: relative !important;
	/* El borde real de la "caja" de Aelia vive aquí (1px silver), no en dropdown_selector */
	border: none !important;
	box-shadow: none !important;
}

/* Chevron de Aelia: es un ::before (cuadrado 45° con bordes). Por defecto cae debajo
   y en gris; se recoloca a la derecha, centrado, y se recolorea a blanco. */
.header-widget-area .wc_aelia_cs_currency_selector .selected_option.selected_currency::before {
	top: 50% !important;
	right: 2px !important;
	left: auto !important;
	bottom: auto !important;
	width: 7px !important;
	height: 7px !important;
	border-color: #fff !important;
	border-width: 0 1.5px 1.5px 0 !important;
	transform: translateY(-65%) rotate(45deg) !important;
}

.header-widget-area .wc_aelia_cs_currency_selector.dropdown_selector:hover .selected_option.selected_currency::before {
	border-color: var(--ast-global-color-8) !important;
}

/* Bandera pequeña */
.header-widget-area .widget_wc_aelia_currencyswitcher_widget .currency_flag img {
	width: 16px !important;
	height: auto !important;
	border-radius: 2px !important;
	display: block !important;
}

/* Código de moneda: blanco, pequeño */
.header-widget-area .widget_wc_aelia_currencyswitcher_widget .selected_currency .currency_name {
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
}

.header-widget-area .wc_aelia_cs_currency_selector.dropdown_selector:hover .selected_currency .currency_name {
	color: var(--ast-global-color-8) !important;
}

/* Abrir en hover (como el de idiomas), no por click. margin-top:0 para que no quede
   una "zona muerta" entre el trigger y el panel que lo cerraría al mover el ratón. */
.header-widget-area .wc_aelia_cs_currency_selector.dropdown_selector:hover .dropdown,
.header-widget-area .wc_aelia_cs_currency_selector.dropdown_selector:focus-within .dropdown {
	display: block !important;
}

/* Desplegable abierto (look COMPARTIDO con el de TRP: tarjeta blanca, borde sutil,
   radio 8px, sombra marcada para destacar sobre el fondo). */
.header-widget-area .wc_aelia_cs_currency_selector .dropdown {
	background: #fff !important;
	border: 1px solid color-mix(in srgb, var(--ast-global-color-0) 14%, #fff) !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
	margin-top: 0 !important;
	padding: 6px !important;
	min-width: 160px !important;
	overflow: visible !important;
}

/* Todas las monedas de golpe (sin scroll): Aelia limita el listado a 190px */
.header-widget-area .wc_aelia_cs_currency_selector .dropdown ul.options,
.header-widget-area .wc_aelia_cs_currency_selector .dropdown .options.currencies {
	max-height: none !important;
	overflow: visible !important;
}

.header-widget-area .wc_aelia_cs_currency_selector .dropdown .option {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
}

.header-widget-area .wc_aelia_cs_currency_selector .dropdown .option .currency_flag img {
	width: 18px !important;
	height: auto !important;
	border-radius: 2px !important;
	display: block !important;
}

.header-widget-area .wc_aelia_cs_currency_selector .dropdown .option .currency_name {
	color: var(--ast-global-color-0) !important;
	font-size: 13px !important;
}

.header-widget-area .wc_aelia_cs_currency_selector .dropdown .option:hover {
	background: color-mix(in srgb, var(--ast-global-color-0) 8%, #fff) !important;
}

/* ─── 15.B  TranslatePress (switcher v2 — custom properties inline) ───────── */

/* Estado cerrado: sin caja, banderas/texto pequeños y blancos.
   Se sobreescriben las custom properties que TRP imprime inline en el wrapper. */
.header-widget-area .trp-shortcode-switcher__wrapper {
	--text: #fff !important;
	--text-hover: var(--ast-global-color-8) !important;
	--bg-hover: rgba(255, 255, 255, 0.12) !important;
	--flag-size: 16px !important;
	--font-size: 12px !important;
	--border-width: 0 !important;
	--border-color: transparent !important;
	--border: 0 none !important;
}

/* Quitar fondo del trigger cerrado. El fondo blanco real está en .trp-shortcode-overlay;
   su hijo .trp-switcher-dropdown-list (panel abierto) tiene su propio --bg y no se ve afectado. */
.header-widget-area .trp-shortcode-anchor,
.header-widget-area .trp-shortcode-overlay,
.header-widget-area .trp-language-item__current {
	background: transparent !important;
}

/* Alineación vertical robusta (escritorio + móvil/tablet): el wrapper de TRP era muy
   alto (~64px) por el padding del anchor placeholder, lo que inflaba la fila e impedía
   que Aelia y TRP centraran igual. Se comprime el trigger de TRP a una altura similar a
   Aelia y se deja que el align-items:center del contenedor Astra los iguale (sin nudges
   de px por breakpoint, que eran frágiles). */
.header-widget-area .trp-shortcode-anchor,
.header-widget-area .trp-shortcode-overlay {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.header-widget-area .trp-shortcode-anchor .trp-language-item__current,
.header-widget-area .trp-shortcode-overlay .trp-language-item__current {
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}

/* Igualar el centro vertical con Aelia. Astra coloca estos widgets en secciones
   DISTINTAS según el viewport (izquierda en escritorio, derecha en la cabecera móvil),
   con alturas de fila distintas → el desajuste es de signo opuesto por breakpoint.
   Se corrige con translateY de px fijos (seguro en abierto y cerrado; un % dependería
   de la altura, que cambia al desplegar). Escritorio: TRP queda ~5px más alto → bajar.
   Móvil/tablet (override en 15.C): TRP queda ~7px más bajo → subir. */
.header-widget-area .trp-shortcode-overlay {
	transform: translateY(5px) !important;
}

/* Panel abierto de TRP — MISMO look que el de Aelia (tarjeta blanca, borde sutil,
   radio 8px, sombra marcada). Scoped al estado abierto (.is-open / aria-expanded)
   porque en cerrado el panel tiene max-height:0 y un borde se vería como línea fina. */
.header-widget-area .trp-shortcode-switcher.is-open .trp-switcher-dropdown-list,
.header-widget-area .trp-shortcode-switcher[aria-expanded="true"] .trp-switcher-dropdown-list {
	background: #fff !important;
	border: 1px solid color-mix(in srgb, var(--ast-global-color-0) 14%, #fff) !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
	margin-top: 8px !important;
	padding: 6px !important;
	min-width: 160px !important;
}

/* Items del panel TRP: bandera + texto navy, alineados, con hover tintado */
.header-widget-area .trp-switcher-dropdown-list .trp-language-item {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	color: var(--ast-global-color-0) !important;
	font-size: 13px !important;
}

.header-widget-area .trp-switcher-dropdown-list .trp-language-item .trp-flag-image {
	width: 18px !important;
	height: auto !important;
	border-radius: 2px !important;
}

/* El nombre del idioma va en un span que hereda --text (#fff, fijado para el estado
   cerrado) → se forzaría blanco sobre blanco. Se re-pinta a navy explícitamente. */
.header-widget-area .trp-switcher-dropdown-list .trp-language-item .trp-language-item-name {
	color: var(--ast-global-color-0) !important;
	font-size: 13px !important;
}

.header-widget-area .trp-switcher-dropdown-list .trp-language-item:hover {
	background: color-mix(in srgb, var(--ast-global-color-0) 8%, #fff) !important;
	color: var(--ast-global-color-0) !important;
}

/* ─── 15.C  Móvil / tablet (breakpoint Astra ≤ 921px) ────────────────────────
   En la cabecera móvil de Astra los dos widgets se colocan a la DERECHA de la barra.
   Sus desplegables abren alineados a left:0 → el de idiomas (el más a la derecha) se
   sale por el borde. Se alinean a la derecha del trigger (right:0) para que siempre
   queden dentro de la pantalla. */
@media (max-width: 921px) {
	/* Astra oculta el área del selector de moneda (header-widget-1) en móvil estrecho,
	   dejando solo idiomas. Se fuerza visible para que AMBOS aparezcan también en móvil.
	   (No afecta a la cabecera de escritorio: su wrapper sigue oculto por el ancestro.) */
	.site-header-above-section-left .header-widget-area,
	.header-widget-area[data-section="sidebar-widgets-header-widget-1"] {
		display: block !important;
	}

	.header-widget-area .wc_aelia_cs_currency_selector .dropdown {
		left: auto !important;
		right: 0 !important;
	}

	.header-widget-area .trp-shortcode-overlay {
		left: auto !important;
		right: 0 !important;
		/* En móvil TRP queda ~7px más bajo que Aelia → subir (anula el +5 de escritorio) */
		transform: translateY(-7px) !important;
	}

	.header-widget-area .trp-switcher-dropdown-list {
		left: auto !important;
		right: 0 !important;
	}
}


/* =============================================================================
   16. MI CUENTA — Historial de puntos (tab "Mis puntos", plugin Bravo Points)
   =============================================================================
   Markup del shortcode [woopr_points_history], envuelto en .tf-woopr-history por
   el snippet 23 (que además arregla el literal "Array" del plugin y traduce las
   cabeceras). Estructura del plugin:

     .tf-woopr-history
       └ .woo-pr-user-log
           ├ h4                      → saldo actual + descuento equivalente
           ├ .woo-pr-user-points
           │   └ table.woo-pr-details  (th: EVENTO/FECHA/PUNTOS/IMPORTE/CADUCIDAD)
           └ .woo-pr-paging > .woo-pr-tablenav-pages > .pagination

   Igual que el resto de Mi Cuenta, la página la pinta el widget "Mi cuenta" de
   Elementor → sus enlaces/botones vienen en azul #5bc0de con especificidad alta.
   Por eso se ancla a .elementor-widget-woocommerce-my-account y se usa !important
   donde compite con el widget (ver nota de la sección 6.6).

   El plugin trae border="1" en línea en la tabla; el snippet 23 lo retira.
   ----------------------------------------------------------------------------- */

.tf-woopr-history {
	width: 100%;
}

/* --- Saldo actual: panel navy de marca ------------------------------------- */
.tf-woopr-history .woo-pr-user-log > h4 {
	margin: 0 0 1.5em;
	padding: 1.1em 1.3em;
	background-color: var(--ast-global-color-0);
	border-radius: 6px;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.5;
}

/* El importe del descuento, resaltado dentro del panel */
.tf-woopr-history .woo-pr-user-log > h4 .woocommerce-Price-amount {
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}

/* --- Tabla del historial ----------------------------------------------------
   Ojo: la página la pinta el widget "Mi cuenta" de Elementor y Astra trae
   estilos base de tabla (`th`/`td` con su propio fondo y borde). Ambos ganan a
   un selector suelto, así que —igual que en la sección 6.6— se ancla al widget
   y se fuerza con !important lo que compite (fondo, color, borde). Sin esto la
   tabla sale sin estilar (cabeceras grises, sin filas alternas). ------------ */
.tf-woopr-history .woo-pr-user-points {
	/* La tabla tiene 5 columnas: en móvil se desplaza en horizontal */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details {
	width: 100%;
	margin: 0;
	border: 1px solid #e2e5ea !important;
	border-collapse: collapse !important;
	border-radius: 6px;
	overflow: hidden;
}

.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details th {
	padding: 0.85em 1em !important;
	background-color: var(--ast-global-color-0) !important;
	border: 0 !important;
	color: #fff !important;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td {
	padding: 0.85em 1em !important;
	border: 0 !important;
	border-top: 1px solid #e9ecf1 !important;
	background-color: #fff !important;
	font-size: 0.92rem;
	vertical-align: middle;
}

/* Filas alternas + hover */
.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details tr:nth-child(even) td {
	background-color: #f8f9fb !important;
}

.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details tr:hover td {
	background-color: #f1f3f7 !important;
}

/* Estado vacío ("Todavía no tienes movimientos de puntos.") */
.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td[colspan] {
	padding: 2.4em 1em !important;
	color: #6b7280 !important;
	font-style: italic;
	text-align: center;
}

/* Fecha, puntos e importe no se parten: «-€550.00» salía con el signo en una línea
   y la cifra en otra. */
.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td:nth-child(2),
.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td:nth-child(3),
.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td:nth-child(4) {
	white-space: nowrap;
}

/* --- Móvil: cada movimiento como tarjeta (2026-09-17, TSK-8790) ----------------
   Con cinco columnas en ~340px la columna EVENTO se partía en siete u ocho líneas,
   y más aún con los nombres traducidos («Puntos canjeados devueltos por cancelación
   o reembolso»). Por debajo de 600px: nombre del movimiento y enlace al pedido a
   todo el ancho; debajo, fecha a la izquierda y puntos e importe a la derecha. La
   cabecera se oculta (sin ella las cifras se leen por su signo y su moneda) y la
   caducidad (∞) también: hoy todos los puntos son sin caducidad.
   La tabla no trae <thead>: la cabecera es la primera fila. ------------------- */
@media (max-width: 600px) {
	.tf-woopr-history .woo-pr-user-points {
		overflow-x: visible;
	}

	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details,
	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details tbody {
		display: block;
	}

	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details tr:first-child:has(th) {
		display: none;
	}

	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details tr {
		display: grid;
		grid-template-columns: 1fr auto auto;
		column-gap: 1em;
		align-items: center;
		padding: 0.9em 1em;
		border-top: 1px solid #e9ecf1;
		background-color: #fff;
	}

	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details tr:nth-child(even) {
		background-color: #f8f9fb;
	}

	/* `tr td` a propósito: otra regla con !important (0,4,2) seguía metiendo 10px de relleno */
	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details tr td {
		padding: 0 !important;
		border: 0 !important;
		background-color: transparent !important;
		line-height: 1.4;
	}

	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td:nth-child(1) {
		grid-column: 1 / -1;
		margin-bottom: 0.45em;
		color: var(--ast-global-color-0) !important;
		font-weight: 600;
	}

	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td:nth-child(2) {
		color: #6b7280;
		font-size: 0.85rem;
	}

	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td:nth-child(3) {
		color: var(--ast-global-color-0) !important;
		font-weight: 600;
		text-align: right;
	}

	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td:nth-child(4) {
		text-align: right;
	}

	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td:nth-child(5) {
		display: none;
	}

	/* Estado vacío: una sola celda a todo el ancho */
	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td[colspan] {
		grid-column: 1 / -1;
		display: block;
	}
}

/* --- Paginación ------------------------------------------------------------- */
.tf-woopr-history .woo-pr-paging {
	margin-top: 1.2em;
}

.tf-woopr-history .woo-pr-tablenav-pages .pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	justify-content: center;
}

.elementor-widget-woocommerce-my-account .tf-woopr-history .pagination a,
.elementor-widget-woocommerce-my-account .tf-woopr-history .pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.6em;
	border: 1px solid #dfe3e9;
	border-radius: 4px;
	color: var(--ast-global-color-0) !important;
	font-size: 0.9rem;
	text-decoration: none;
}

.elementor-widget-woocommerce-my-account .tf-woopr-history .pagination a:hover {
	background-color: var(--ast-global-color-0);
	border-color: var(--ast-global-color-0);
	color: #fff !important;
}

/* Página actual */
.elementor-widget-woocommerce-my-account .tf-woopr-history .pagination .current {
	background-color: var(--ast-global-color-1);
	border-color: var(--ast-global-color-1);
	color: #fff !important;
	font-weight: 600;
}

/* --- Móvil ------------------------------------------------------------------ */
@media (max-width: 544px) {
	.tf-woopr-history .woo-pr-user-log > h4 {
		font-size: 0.98rem;
	}

	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details th,
	.elementor-widget-woocommerce-my-account .tf-woopr-history table.woo-pr-details td {
		padding: 0.7em 0.75em !important;
	}
}


/* =============================================================================
   17. LISTA DE DESEOS — Página dedicada (/lista-de-deseos/, page-id 1145)
   El mismo shortcode [yith_wcwl_wishlist] vive en dos sitios con el MISMO markup
   (mismas clases YITH, verificado): esta página dedicada y el tab "Lista de
   deseos" de Mi Cuenta (§6.7). Ahí ya tenía tratamiento de marca porque las
   reglas anclan a `.elementor-widget-woocommerce-my-account .tf-account-wishlist`
   (el wrapper de esa vista); aquí no existe ese wrapper, así que salía con el
   estilo por defecto de Astra/WooCommerce (botones outline, sin tarjeta). Se
   replican aquí las mismas reglas ancladas a `.page-id-1145` para igualar ambas
   vistas. Reversible: borrar esta sección + bump de versión.
   ============================================================================= */

/* Tarjeta blanca envolvente (mismo lenguaje que el panel de Mi Cuenta, §6.5).
   Ancla al widget de texto que trae el shortcode (id de Elementor — mismo
   patrón que §13/§14, Elementor no imprime una clase custom en el contenedor). */
.page-id-1145 .elementor-element-24109667 .elementor-widget-container {
	background: #fff;
	border-radius: 16px;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}

.page-id-1145 table.wishlist_table {
	width: 100%;
	margin: 0;
}

/* Imágenes de producto contenidas */
.page-id-1145 table.wishlist_table td.product-thumbnail img {
	max-width: 64px;
	height: auto;
}

/* Enlaces de texto (nombre de producto, "editar título", "ver/buscar lista"): navy */
.page-id-1145 #yith-wcwl-form a:not(.button):not(.add_to_cart_button):not(.remove_from_wishlist):not(.yith-wcwl-ask-an-estimate-button),
.page-id-1145 .wishlist-page-links a {
	color: var(--ast-global-color-0) !important;
}
.page-id-1145 #yith-wcwl-form a:not(.button):not(.add_to_cart_button):not(.remove_from_wishlist):not(.yith-wcwl-ask-an-estimate-button):hover,
.page-id-1145 .wishlist-page-links a:hover {
	color: var(--ast-global-color-1) !important;
}

/* "Añade al carrito" → navy, hover burdeos. Radio y tamaño explícitos: aquí
   `.add_to_cart_button` heredaba un botón de catálogo de Astra con
   border-radius:0 y fuente/alto propios (más grandes que en Mi Cuenta §6.7,
   mismo bug de fondo) — sin fijarlo queda cuadrado y desproporcionado frente
   a "Eliminar"/"Solicita estimación". Mismos valores que §6.7 para que ambas
   vistas se vean idénticas. */
.page-id-1145 .shop_table .add_to_cart_button {
	background: var(--ast-global-color-0) !important;
	border-color: var(--ast-global-color-0) !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	height: auto !important;
}
.page-id-1145 .shop_table .add_to_cart_button:hover {
	background: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1) !important;
}

/* "ELIMINAR" y "Solicita estimación" (secundarios) → navy, hover burdeos.
   Mismo radio/tamaño que "Añade al carrito" de arriba (conjunto uniforme). */
.page-id-1145 .shop_table .remove_from_wishlist.button,
.page-id-1145 .yith-wcwl-ask-an-estimate-button {
	background: var(--ast-global-color-0) !important;
	border-color: var(--ast-global-color-0) !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	height: auto !important;
}
.page-id-1145 .shop_table .remove_from_wishlist.button:hover,
.page-id-1145 .yith-wcwl-ask-an-estimate-button:hover {
	background: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1) !important;
}

/* × pequeño de quitar (columna product-remove) → navy */
.page-id-1145 .product-remove a.remove {
	background: var(--ast-global-color-0) !important;
	border-color: var(--ast-global-color-0) !important;
	color: #fff !important;
}

/* Acciones "Editar/Guardar/Cancelar título": enlaces de texto (aunque traen
   .button) → navy sin fondo; el icono SVG hereda el color (currentColor). */
.page-id-1145 .show-title-form,
.page-id-1145 .hide-title-form,
.page-id-1145 .save-title-form {
	background: transparent !important;
	border: 0 !important;
	color: var(--ast-global-color-0) !important;
}
.page-id-1145 .show-title-form:hover,
.page-id-1145 .hide-title-form:hover,
.page-id-1145 .save-title-form:hover {
	color: var(--ast-global-color-1) !important;
}

/* Layout: los dos botones de la celda de acción, apilados con aire y a un
   ancho (evita el "amontonamiento" de "Añade al carrito" + "Eliminar" pegados). */
.page-id-1145 .shop_table td.product-add-to-cart {
	white-space: normal !important;
}
.page-id-1145 .shop_table td.product-add-to-cart .add_to_cart_button,
.page-id-1145 .shop_table td.product-add-to-cart .remove_from_wishlist.button {
	display: block !important;
	width: 100% !important;
	margin: 4px 0 !important;
	text-align: center !important;
	float: none !important;
}

/* Foco de inputs (form de presupuesto) → navy */
.page-id-1145 input:focus,
.page-id-1145 textarea:focus,
.page-id-1145 select:focus {
	border-color: var(--ast-global-color-0) !important;
	outline-color: var(--ast-global-color-0) !important;
}

/* Móvil: evitar desborde de la tabla dentro de la tarjeta */
@media (max-width: 600px) {
	.page-id-1145 .elementor-element-24109667 .elementor-widget-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.page-id-1145 table.wishlist_table {
		min-width: 520px;
	}
}
/* =============================================================================
   18. FILTROS DE TIENDA — BUSCADOR DE CATEGORÍAS
   El JS está en theme/assets/js/tf-filtro-buscador.js (lógica y por qué).
   Resumen: el filtro de Categoría tiene 115 entradas y WooCommerce solo pinta 15,
   escondiendo el resto tras "Mostrar 100 más". Con orden alfabético, esas 15 van
   de "Anime" a "Dorohedoro", así que Dragon Ball, Naruto o One Piece no se ven.
   ============================================================================= */

.tf-filtro-buscador {
	margin: 0 0 0.75rem;
}

/* Astra estiliza `input[type="search"]` desde main.min.css con especificidad
   (0,1,1) — borde gris, radio 0 y 17px de fuente —, así que una clase suelta
   (0,1,0) pierde. Se sube el selector en vez de tirar de !important: repitiendo
   la clase junto al atributo queda en (0,3,1) y gana sin bloquear ajustes futuros. */
.tf-filtro-buscador input[type="search"].tf-filtro-buscador__campo {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ast-global-color-2);
	background-color: #fff;
	border: 1px solid rgba(34, 48, 87, 0.25);
	border-radius: 6px;
	-webkit-appearance: none;
	appearance: none;
}

.tf-filtro-buscador input[type="search"].tf-filtro-buscador__campo:focus {
	outline: none;
	border-color: var(--ast-global-color-0);
	box-shadow: 0 0 0 3px rgba(34, 48, 87, 0.15);
}

.tf-filtro-buscador__aviso {
	min-height: 1em;
	margin: 0.35rem 0 0;
	font-size: 12px;
	color: var(--ast-global-color-3);
}

.tf-filtro-buscador__aviso--vacio {
	color: var(--ast-global-color-1);
}

/* Con una búsqueda activa manda esta hoja y no el atributo [hidden] que pone
   WooCommerce en las entradas que esconde tras "Mostrar más" — sin este
   !important, buscar "Naruto" no encontraría nada, que es el caso a arreglar.
   El JS no toca ese atributo a propósito: lo repone la Interactivity API. */
.wc-block-product-filter-checkbox-list.tf-filtro-buscando .wc-block-product-filter-checkbox-list__item {
	display: block !important;
}

.wc-block-product-filter-checkbox-list.tf-filtro-buscando .wc-block-product-filter-checkbox-list__item.tf-filtro-oculto {
	display: none !important;
}

/* "Mostrar 100 más" no significa nada mientras se busca. */
.wc-block-product-filter-checkbox-list.tf-filtro-buscando .wc-block-product-filter-checkbox-list__show-more {
	display: none !important;
}

/* Una búsqueda poco específica puede devolver decenas de categorías: se acotan
   con scroll propio para que el panel de filtros no se dispare a lo alto. */
.wc-block-product-filter-checkbox-list.tf-filtro-buscando .wc-block-product-filter-checkbox-list__items {
	max-height: 320px;
	overflow-y: auto;
}
/* =============================================================================
   19. TIENDA — WIDGET DE BÚSQUEDA DEL SIDEBAR (bloque "Buscar" de WordPress)
   Widget añadido por Raúl en el sidebar de la tienda. De serie sale desmontado:
   el formulario es `display:block`, así que el campo se queda en ~50px de ancho
   con el botón debajo, y el input hereda de Astra borde gris y radio 0.
   Se le da el mismo lenguaje que al buscador de categorías (§18).
   Ojo con la especificidad: Astra estiliza `input[type="search"]` con (0,1,1)
   desde main.min.css, así que los selectores de aquí van con dos clases.
   ============================================================================= */

.widget_search .wp-block-search {
	margin-bottom: 1.5rem;
}

/* El bloque trae la etiqueta como <label><strong>: se iguala a los títulos
   de los filtros de al lado ("Precio", "Categoría"), que son h3 de Astra. */
.widget_search .wp-block-search__label {
	display: block;
	margin: 0 0 0.625rem;
	font-family: 'Orbitron', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ast-global-color-2);
}

.widget_search .wp-block-search__label strong {
	font-weight: inherit;
}

/* De serie es un div en flujo normal y el campo se estrangula. */
/* Apilados, no en fila. El sidebar de la tienda mide ~200px: con el botón al
   lado, al campo le quedaban unos 100px y no se podía ni leer lo que escribes. */
.widget_search .wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
}

.widget_search .wp-block-search__input,
.widget_search .wp-block-search__button {
	flex: 1 1 100%;
}

/* El `!important` no es pereza: la regla de aquí abajo casa con el elemento y
   se parsea entera (comprobado leyendo cssRules en el navegador), pero el borde
   y el radio los seguía ganando Astra, que sirve sus estilos de formulario como
   CSS en línea en el <head> y por tanto SIEMPRE después de esta hoja. Mismo caso
   que los badges de la §3. Se acota a las propiedades que pierden. */
.widget_search .wp-block-search__input {
	min-width: 0;
	box-sizing: border-box;
	padding: 8px 12px !important;
	font-size: 14px !important;
	line-height: 1.4;
	color: var(--ast-global-color-2);
	background-color: #fff !important;
	border: 1px solid rgba(34, 48, 87, 0.25) !important;
	border-radius: 6px !important;
	-webkit-appearance: none;
	appearance: none;
}

.widget_search .wp-block-search__input:focus {
	outline: none;
	border-color: var(--ast-global-color-0);
	box-shadow: 0 0 0 3px rgba(34, 48, 87, 0.15);
}

/* Navy relleno con hover burdeos: la convención del resto de acciones
   secundarias del sitio (§6.6, §1.11). El burdeos sólido se reserva al
   botón de compra. */
.widget_search .wp-block-search__button {
	margin: 0;
	padding: 8px 16px !important;
	font-size: 14px !important;
	font-weight: 500;
	line-height: 1.4;
	color: #fff !important;
	background-color: var(--ast-global-color-0) !important;
	border: 1px solid var(--ast-global-color-0) !important;
	border-radius: 6px !important;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.widget_search .wp-block-search__button:hover,
.widget_search .wp-block-search__button:focus {
	color: #fff !important;
	background-color: var(--ast-global-color-1) !important;
	border-color: var(--ast-global-color-1) !important;
}

.widget_search .wp-block-search__button:focus-visible {
	outline: 2px solid var(--ast-global-color-0);
	outline-offset: 2px;
}

/* =============================================================================
   20. THANK YOU PAGE — Banner de campaña por idioma (TSK-8763, 2026-09-03)
   ============================================================================= */

/* Va arriba del todo de .woocommerce-order (hook woocommerce_before_thankyou),
   antes del mensaje de agradecimiento y los datos del pedido. */
.tf-thankyou-banner {
	margin: 0 0 30px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.tf-thankyou-banner img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 600px) {
	.tf-thankyou-banner {
		margin-bottom: 20px;
		border-radius: 8px;
	}
}

/* ==========================================================================
   21. MI CUENTA — Acciones del saldo (YITH Deposits) siempre visibles
   ==========================================================================
   En el detalle de un pedido con depósito, la tabla "Detalles del saldo" tiene
   una columna de acciones con un botón de tres puntos que abre el submenú
   (pagar el saldo, ver el pedido...). El plugin lo esconde hasta que el ratón
   pasa por encima de la fila:

       #yith_wcdp_deposits_details tr td.order-actions .button-with-submenu {
           visibility: hidden;
       }
       #yith_wcdp_deposits_details tr:hover ... { visibility: visible; }

   Eso deja la acción invisible mientras no la busques, y en móvil —el 70% del
   tráfico de esta tienda— directamente inalcanzable: sin ratón no hay hover, así
   que no hay forma de abrir ese menú. Aquí se muestra siempre.

   Lleva `!important` porque la regla del plugin tiene la misma especificidad y
   su hoja puede cargarse después de esta según el orden de encolado.
   ========================================================================== */

#yith_wcdp_deposits_details tr td.order-actions .button-with-submenu {
	visibility: visible !important;
}

/* Los tres puntos, con respuesta al ratón: círculo burdeos de marca e icono en
   blanco al pasar por encima (y al enfocar con el teclado). El `!important` es
   por lo mismo que arriba: el plugin pinta ese fondo con la misma especificidad. */

#yith_wcdp_deposits_details td.order-actions .submenu-opener {
	transition: background-color 0.2s linear, color 0.2s linear;
}

#yith_wcdp_deposits_details td.order-actions .submenu-opener:hover,
#yith_wcdp_deposits_details td.order-actions .submenu-opener:focus {
	background-color: var(--ast-global-color-1) !important;
	color: #ffffff !important;
}

/* En móvil la tabla se apila («Pedido:», «Producto:», «Estado:»… con el valor a la
   derecha) y el botón se quedaba pegado a su etiqueta, fuera de la columna de
   valores. No es cosa de YITH: lo hace WooCommerce en
   `woocommerce-smallscreen-grid.css`, que alinea todas las celdas a la derecha
   menos `td.order-actions`, y además con `!important`:

       .woocommerce table.shop_table_responsive tr td { text-align: right !important; }
       .woocommerce table.shop_table_responsive tr td.order-actions { text-align: left !important; }

   Para los botones de texto de la tabla de pedidos («Ver», «Pagar») tiene sentido;
   para este icono redondo lo deja descolocado. Se alinea con el resto. */

@media (max-width: 768px) {

	#yith_wcdp_deposits_details tr td.order-actions {
		text-align: right !important;
	}
}


/* =============================================================================
   22. CARRITO Y CHECKOUT — Etiquetas de la tabla de totales (2026-09-17, TSK-8790)
   =============================================================================
   Astra fija la columna de etiquetas de los totales (~113px en escritorio, tabla con
   table-layout: fixed) con 17px de relleno a cada lado y overflow-wrap: break-word.
   El cargo del canje de puntos se llama «Puntos Descuento» y «Descuento» no cabía:
   salía «Descuent / o». Con menos relleno por la derecha, pegado a la columna de
   importes, cabe entero sin tocar el tamaño de letra ni el ancho de la tabla.
   ----------------------------------------------------------------------------- */
.cart_totals table.shop_table th,
.woocommerce-checkout-review-order-table tfoot th {
	padding-right: 6px !important;
}