/*
 * woocommerce.css — estilo de marca KLIC para las páginas de WooCommerce
 * (tienda, producto individual, carrito, checkout, mi cuenta).
 *
 * Por qué archivo aparte (no dentro de style.css):
 * - Se enqueua condicionalmente, SOLO en páginas de WooCommerce (ver
 *   functions.php: is_woocommerce() || is_cart() || is_checkout() ||
 *   is_account_page()) -- igual que el CSS del Home solo se enqueua en
 *   is_front_page(). Mezclarlo dentro de style.css habría obligado a cargar
 *   todo el CSS del Home en la tienda (o a complicar el enqueue con
 *   @media/print hacks), rompiendo la separación ya acordada.
 * - No depende de reset.css/variables.css/etc. del Home (esos tampoco se
 *   cargan aquí, a propósito, para no mezclar el reset agresivo del Home
 *   con el HTML que genera WooCommerce). Por eso los tokens de marca se
 *   redeclaran abajo, copiados tal cual de docs/design-system.md -- son
 *   los mismos valores, en un :root propio y aislado.
 *
 * Todo lo de aquí apunta a clases que WooCommerce ya genera por defecto
 * (plantillas clásicas, sin overrides en woocommerce/ dentro del tema).
 * No se creó ninguna plantilla nueva.
 */

:root {
	--wc-color-bg: #ffffff;
	--wc-color-surface: #f7f9fc;
	--wc-color-surface-alt: #ffffff;
	--wc-color-border: #dfe4ee;
	--wc-color-text: #13294b;
	--wc-color-text-muted: #5f718f;
	--wc-color-primary: #1b3fa0;
	--wc-color-primary-strong: #142f70;
	--wc-color-secondary: #f97316;
	--wc-color-secondary-soft: #ffe4cf;
	--wc-color-success: #1f9d55;
	--wc-color-warning: #f59e0b;
	--wc-color-danger: #dc2626;

	--wc-font-family-base: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--wc-font-family-display: "Space Grotesk", Inter, system-ui, sans-serif;

	--wc-space-xxs: 0.25rem;
	--wc-space-xs: 0.5rem;
	--wc-space-sm: 0.75rem;
	--wc-space-md: 1rem;
	--wc-space-lg: 1.5rem;
	--wc-space-xl: 2rem;
	--wc-space-2xl: 3rem;

	--wc-radius-sm: 8px;
	--wc-radius-md: 14px;
	--wc-radius-lg: 24px;

	--wc-shadow-sm: 0 4px 12px rgba(19, 41, 75, 0.06);
	--wc-shadow-md: 0 10px 28px rgba(19, 41, 75, 0.08);

	--wc-focus-ring: 0 0 0 4px rgba(53, 105, 255, 0.16);
}

/* ==========================================================================
   Base — solo en las páginas que usan este CSS (mismas 4 body classes que
   WordPress ya agrega automáticamente en exactamente esos 4 casos).
   ========================================================================== */

/* Causa raíz de una serie de bugs de overflow encontrados y corregidos
   uno por uno en varias rondas (botón "Añadir al carrito", inputs de
   Crear cuenta, select de Cuenta profesional, inputs de precio de
   filtros): este archivo NO carga reset.css del Home a propósito (ver
   docblock del archivo), así que nunca heredó box-sizing:border-box --
   con el default del navegador (content-box), cualquier elemento con
   width:100% + padding se sale de su contenedor por el padding. En vez
   de seguir parchando selector por selector, se corrige la causa raíz
   una sola vez aquí (los box-sizing:border-box ya agregados en selectores
   puntuales quedan como refuerzo, no hacen daño). Scoped a las mismas 4
   body classes que todo este archivo, nunca un `*` sin acotar. */
body.woocommerce-page *,
body.woocommerce-cart *,
body.woocommerce-checkout *,
body.woocommerce-account * {
	box-sizing: border-box;
}

body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
	font-family: var(--wc-font-family-base);
	color: var(--wc-color-text);
	background: var(--wc-color-bg);
	line-height: 1.5;
}

body.woocommerce-page :focus-visible,
body.woocommerce-cart :focus-visible,
body.woocommerce-checkout :focus-visible,
body.woocommerce-account :focus-visible {
	outline: 3px solid var(--wc-color-primary);
	outline-offset: 2px;
}

#main.site-main {
	width: min(100%, 1200px);
	margin-inline: auto;
	padding: var(--wc-space-lg) var(--wc-space-md) var(--wc-space-2xl);
}

/* ==========================================================================
   Header simple (logo + Cuenta/Carrito) — solo estas páginas, no el Home.
   ========================================================================== */
.klic-shop-header {
	background: var(--wc-color-primary);
	border-bottom: 1px solid var(--wc-color-primary-strong);
}

.klic-shop-header__inner {
	width: min(100%, 1200px);
	margin-inline: auto;
	padding: var(--wc-space-sm) var(--wc-space-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wc-space-md);
}

.klic-shop-header__logo img {
	height: 32px;
	width: auto;
	display: block;
}

.klic-shop-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wc-space-lg);
}

.klic-shop-header__link {
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--wc-space-xxs);
}

.klic-shop-header__link:hover {
	color: var(--wc-color-secondary-soft);
}

.klic-shop-header__link:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
	border-radius: var(--wc-radius-sm);
}

.klic-shop-header__cart-count {
	background: var(--wc-color-secondary);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	min-width: 1.4rem;
	height: 1.4rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 0.3rem;
}

/* ==========================================================================
   Footer simple (copyright + WhatsApp) — solo estas páginas, no el Home.
   ========================================================================== */
.klic-shop-footer {
	border-top: 1px solid var(--wc-color-border);
	background: var(--wc-color-surface);
	color: var(--wc-color-text-muted);
	margin-top: var(--wc-space-2xl);
}

.klic-shop-footer__inner {
	width: min(100%, 1200px);
	margin-inline: auto;
	padding: var(--wc-space-lg) var(--wc-space-md);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wc-space-sm);
	font-size: 0.9rem;
}

.klic-shop-footer__contact {
	color: var(--wc-color-primary);
	font-weight: 700;
	text-decoration: none;
}

.klic-shop-footer__contact:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Botones genéricos de WooCommerce (Añadir al carrito, Actualizar carrito,
   Proceder al pago, Realizar pedido...) -- mismo lenguaje que .button /
   .button--secondary del Home (naranja, relleno, texto blanco, 700).
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce-account .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1.2rem;
	height: 44px;
	min-height: 44px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	background: var(--wc-color-secondary);
	color: #ffffff;
	transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--wc-shadow-sm);
	background: var(--wc-color-secondary);
	color: #ffffff;
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: none;
	box-shadow: var(--wc-focus-ring);
}

/* Acciones secundarias (Seguir comprando, Vaciar carrito, quitar cupón...):
   estilo outline, no relleno, para no competir con la acción principal. */
.woocommerce a.wc-backward,
.woocommerce .cart .button[name="update_cart"],
.woocommerce-cart .coupon .button {
	background: transparent;
	border-color: var(--wc-color-text);
	color: var(--wc-color-text);
}

.woocommerce a.wc-backward:hover,
.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce-cart .coupon .button:hover {
	background: transparent;
	color: var(--wc-color-text);
}

/* CTA principal de compra: variante "primary" (navy) para que resalte por
   encima de los botones secundarios en la misma pantalla (carrito ->
   checkout, checkout -> realizar pedido). */
.woocommerce a.checkout-button,
.woocommerce #place_order {
	background: var(--wc-color-primary);
}
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
	background: var(--wc-color-primary);
}

/* ==========================================================================
   Encabezado de /tienda/ y de cada categoría, y barra de pills
   (klic_render_categoria_pills(), inyectada vía hooks sobre las
   plantillas NATIVAS de WooCommerce -- ver inc/categorias-helper.php,
   sección "Hooks sobre las plantillas NATIVAS", para el porqué no hay
   ningún archivo de template propio).
   El <h1> del título NO es nuestro -- es el que WooCommerce ya genera
   (".woocommerce-products-header__title.page-title"), solo se le da
   estilo aquí; el texto se cambia vía el filtro woocommerce_page_title
   (solo en /tienda/, las categorías ya muestran su nombre real nativo).
   ========================================================================== */
.woocommerce-products-header__title.page-title {
	font-family: var(--wc-font-family-display);
	font-size: 1.75rem;
	color: var(--wc-color-text);
	margin: 0 0 0.3rem;
}
.klic-shop-heading__subtitle {
	color: var(--wc-color-text-muted);
	margin: 0 0 var(--wc-space-sm);
}

.klic-cat-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--wc-space-md) 0 var(--wc-space-lg);
	/* Scroll horizontal en movil si no caben todas -- nunca genera overflow
	   de pagina completa, el scroll queda contenido aqui mismo. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.klic-cat-pills::-webkit-scrollbar {
	display: none;
}
.klic-cat-pills__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 1rem;
	border-radius: 999px;
	background: var(--wc-color-surface);
	border: 1px solid var(--wc-color-border);
	color: var(--wc-color-text);
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
/* Pill es un <a> real -- sin esto, un navegador la pinta subrayada y/o
   morada (color de "visitado") en cuanto el usuario hace clic una vez,
   pareciendo un link roto en vez de un filtro. :visited necesita su
   propia regla explícita (el color de "visitado" del navegador le gana
   en especificidad a una regla sin :visited, aunque ambas fijen color). */
.klic-cat-pills__item:link,
.klic-cat-pills__item:visited {
	color: var(--wc-color-text);
	text-decoration: none;
}
.klic-cat-pills__item:hover,
.klic-cat-pills__item:focus {
	border-color: var(--wc-color-primary);
	text-decoration: none;
}
.klic-cat-pills__item:active {
	text-decoration: none;
}
.klic-cat-pills__item.is-active,
.klic-cat-pills__item.is-active:link,
.klic-cat-pills__item.is-active:visited {
	background: var(--wc-color-primary);
	border-color: var(--wc-color-primary);
	color: #ffffff;
}

/* ==========================================================================
   Grid de la tienda (/tienda/) — mismo lenguaje visual que .product-card
   del Home (src/styles/cards.css + home.css): superficie clara, borde
   suave, radio grande, imagen contenida, título a 2 líneas, precio en
   navy y negrita. Aquí en grid normal (no carrusel), porque es el
   catálogo completo, no una tira de destacados.
   ========================================================================== */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wc-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wc-space-lg); }
}
@media (min-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: var(--wc-color-surface);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-lg);
	padding: 0.8rem;
	transition: transform 180ms ease, box-shadow 180ms ease;
	position: relative;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--wc-shadow-md);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__link:link,
.woocommerce ul.products li.product .woocommerce-loop-product__link:visited {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link:hover .woocommerce-loop-product__title {
	color: var(--wc-color-primary);
}

.woocommerce ul.products li.product img {
	width: 100%;
	height: 160px;
	object-fit: contain;
	background: var(--wc-color-surface-alt);
	border-radius: 8px;
}

/* Sin truncar ni recortar -- crece a las lineas que haga falta y la tarjeta
   (flex-column) crece con el. Los valores explicitos de height/max-height/
   overflow en "none"/"visible" son deliberados: cancelan cualquier altura
   fija que el propio woocommerce.css por defecto del plugin pudiera traer
   para este mismo selector (esa mezcla -- su altura fija + nuestro
   line-height -- era lo que producia el texto cortado con letras
   superpuestas). */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0.4rem 0 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wc-color-text);
	display: block;
	height: auto;
	max-height: none;
	overflow: visible;
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
	/* min-height (NO height/max-height, esas fueron la causa del bug de
	   texto cortado/superpuesto documentado arriba) reserva el espacio de 2
	   líneas siempre -- nunca recorta un nombre largo (puede crecer a más de
	   2 líneas si hace falta), solo evita que un nombre corto de 1 línea
	   deje el precio de esa tarjeta más arriba que el de las demás. */
	min-height: 2.6em;
}

.woocommerce ul.products li.product .price {
	margin-top: auto;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--wc-color-primary);
}

.woocommerce ul.products li.product .price del {
	color: var(--wc-color-text-muted);
	font-weight: 400;
	font-size: 0.9em;
	opacity: 0.8;
	margin-right: 0.4rem;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--wc-color-primary);
}

.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	background: var(--wc-color-secondary);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.6rem;
	border-radius: var(--wc-radius-sm);
	margin: 0;
}

.woocommerce ul.products li.product .star-rating {
	font-size: 0.85rem;
	color: var(--wc-color-secondary);
}

.woocommerce ul.products li.product .button {
	width: 100%;
	/* Sin esto, width:100% + el padding del .button base (content-box es
	   el default del navegador, este archivo no trae ningún reset global)
	   sumaban el padding POR FUERA del 100% y el botón se salía de la
	   tarjeta -- confirmado con medición real a 320px (28px de overflow).
	   Acotado a este selector a propósito, sin tocar el resto de botones
	   de WooCommerce que no tenían este problema (nunca usan width:100%). */
	box-sizing: border-box;
	margin-top: var(--wc-space-sm);
	text-decoration: none;
}
/* Desktop/tablet (mismo breakpoint donde el grid ya pasa a 3 columnas):
   el botón deja de estirarse borde a borde -- ancho automático, centrado
   dentro de la tarjeta (align-self:center pisa el align-items:stretch por
   defecto del contenedor flex-column), con un tope de ancho para que no
   domine visualmente la tarjeta. Alto/radio ya vienen del `.button` base
   (44px / 10px, mismo lenguaje que el resto de KLIC) -- sin cambios ahí. */
@media (min-width: 768px) {
	.woocommerce ul.products li.product .button {
		width: auto;
		min-width: 130px;
		max-width: 170px;
		align-self: center;
	}
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	color: var(--wc-color-text-muted);
	font-size: 0.9rem;
}
.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	padding: 0.5rem 0.75rem;
	background: var(--wc-color-surface-alt);
	color: var(--wc-color-text);
}

/* ==========================================================================
   Página de producto individual.
   ========================================================================== */
.woocommerce div.product {
	display: grid;
	gap: var(--wc-space-xl);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.woocommerce div.product .woocommerce-product-gallery {
	background: var(--wc-color-surface);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-lg);
	padding: var(--wc-space-md);
}
/* Fix real 26/08/2026 (reportado: en móvil la imagen ocupa "muchísimo
   espacio vertical", ver output/saturday_final_round/07_PRODUCT_MOBILE_QA.md):
   esta imagen nunca tuvo width/max-width/max-height -- este archivo no
   carga reset.css del Home (a propósito, ver nota de box-sizing más
   arriba), así que sin esta regla la imagen podía renderizarse a su
   tamaño intrínseco (el atributo width/height que WordPress ya imprime en
   el <img>), sin encogerse al ancho real del contenedor en móvil. Mismo
   patrón que el resto del sitio (docs/convenciones.md): width/max-width
   para redimensionar, height:auto + object-fit:contain para no deformar
   ni recortar, nunca transform:scale(). max-height acota cuánto scroll
   hace falta para llegar al precio/CTA debajo -- object-fit:contain
   asegura que la imagen completa siga visible dentro de ese límite, sin
   recortar producto. */
.woocommerce div.product .woocommerce-product-gallery img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 340px;
	margin-inline: auto;
	border-radius: var(--wc-radius-md);
	object-fit: contain;
	background: var(--wc-color-surface-alt);
}
@media (min-width: 900px) {
	.woocommerce div.product .woocommerce-product-gallery img {
		max-height: 480px; /* en escritorio hay columna propia (grid 2 columnas), más espacio vertical disponible sin sacrificar precio/CTA */
	}
}

.woocommerce div.product .product_title {
	font-family: var(--wc-font-family-display);
	font-size: 1.75rem;
	color: var(--wc-color-text);
	margin: 0 0 var(--wc-space-sm);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wc-color-primary);
	margin-bottom: var(--wc-space-sm);
}

/* Etiqueta de nivel (Precio público/cerrajero/distribuidor) -- SIEMPRE
   visible, arriba del precio nativo de WooCommerce (klic_precio_etiqueta_nivel(),
   prioridad 9, antes del precio en prioridad 10). Terminología KLIC
   obligatoria: nunca "profesional"/"técnico" aquí. */
.klic-precio-etiqueta {
	margin: 0 0 0.2rem;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wc-color-text-muted);
}
.klic-precio-etiqueta--activo {
	color: var(--wc-color-success);
}

.klic-precio-aviso {
	font-size: 0.85rem;
	color: var(--wc-color-text-muted);
	background: var(--wc-color-surface);
	border-left: 3px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	padding: var(--wc-space-xs) var(--wc-space-sm);
	margin: 0 0 var(--wc-space-sm);
}
.klic-precio-aviso a {
	color: var(--wc-color-primary);
	font-weight: 700;
}

/* Línea discreta en la tarjeta de /tienda/ (klic_precio_hint_tarjeta()) --
   1 sola línea, sin botón nuevo, solo para quien todavía ve precio
   público. */
.klic-precio-hint {
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--wc-color-text-muted);
}
.klic-precio-hint span {
	text-decoration: underline;
	text-decoration-color: var(--wc-color-border);
	text-underline-offset: 2px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--wc-color-text-muted);
	line-height: 1.6;
	margin-bottom: var(--wc-space-md);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wc-space-sm);
	margin-bottom: var(--wc-space-lg);
}

.woocommerce div.product .quantity .qty {
	width: 4.5rem;
	height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	background: var(--wc-color-surface-alt);
	color: var(--wc-color-text);
	text-align: center;
}
.woocommerce div.product .quantity .qty:focus {
	outline: none;
	border-color: var(--wc-color-primary);
	box-shadow: var(--wc-focus-ring);
}

.woocommerce div.product .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 200px;
}
/* "Comprar ahora" (inc/compra-rapida.php) -- segundo submit dentro del
   mismo form.cart, mismo tamaño que Añadir al carrito pero estilo
   secundario (outline) para no competir visualmente con el CTA principal.
   Selector con la MISMA especificidad que ".woocommerce button.button"
   (arriba, en la base de botones) a propósito: por especificidad igual,
   gana el que aparece después en el archivo -- sin esto, la regla base
   ganaba y el botón se veía idéntico al de Añadir al carrito. */
.woocommerce button.klic-comprar-ahora,
.woocommerce a.klic-comprar-ahora {
	flex: 1 1 auto;
	min-width: 200px;
	background: transparent;
	color: var(--wc-color-primary);
	border: 2px solid var(--wc-color-primary);
}
.woocommerce button.klic-comprar-ahora:hover,
.woocommerce a.klic-comprar-ahora:hover,
.woocommerce button.klic-comprar-ahora:focus,
.woocommerce a.klic-comprar-ahora:focus {
	background: var(--wc-color-primary);
	color: #ffffff;
}

/* Mini-carrito (inc/compra-rapida.php + klic-mini-carrito.js) -- toast fijo
   abajo, aparece tras un Añadir-al-carrito AJAX exitoso en /tienda/ o
   categoría. No es un modal (no bloquea el resto de la página, el cliente
   puede seguir viendo/filtrando productos detrás). */
.klic-mini-carrito {
	position: fixed;
	left: 50%;
	bottom: var(--wc-space-lg);
	transform: translate(-50%, 140%);
	z-index: 1100;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wc-space-md);
	max-width: min(92vw, 460px);
	background: var(--wc-color-bg);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-md);
	box-shadow: var(--wc-shadow-md);
	padding: var(--wc-space-sm) var(--wc-space-md);
	transition: transform 0.2s ease;
}
.klic-mini-carrito.is-visible {
	transform: translate(-50%, 0);
}
.klic-mini-carrito__mensaje {
	margin: 0;
	font-weight: 700;
	color: var(--wc-color-success);
	white-space: nowrap;
}
.klic-mini-carrito__acciones {
	display: flex;
	align-items: center;
	gap: var(--wc-space-sm);
	margin-left: auto;
}
.klic-mini-carrito__cerrar {
	background: none;
	border: none;
	color: var(--wc-color-text-muted);
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 0.4rem;
}
.klic-mini-carrito__checkout {
	white-space: nowrap;
}
@media (max-width: 480px) {
	.klic-mini-carrito {
		left: var(--wc-space-sm);
		right: var(--wc-space-sm);
		bottom: var(--wc-space-sm);
		transform: translateY(140%);
		max-width: none;
	}
	.klic-mini-carrito.is-visible {
		transform: translateY(0);
	}
}

/* Quick-buy panel de "Comprar ahora" (§21, ronda nocturna v8,
   inc/klic-quick-buy.php + klic-quick-buy.js). Modal simple: backdrop +
   panel centrado en escritorio, bottom-sheet en móvil (ancla abajo, esquinas
   superiores redondeadas, ocupa el ancho completo) -- mismo criterio ya
   usado en el resto del tema de "hoja inferior en móvil, panel centrado en
   escritorio" para overlays. */
.klic-quick-buy[hidden] { display: none; }
.klic-quick-buy {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
}
.klic-quick-buy__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(19, 41, 75, 0.55);
}
.klic-quick-buy__panel {
	position: relative;
	background: var(--wc-color-bg);
	border-radius: var(--wc-radius-lg, var(--wc-radius-md));
	box-shadow: var(--wc-shadow-md);
	padding: var(--wc-space-lg);
	/* v8.2.1: 420px -> 480px -- el modo "explorar" (buscador + resultados)
	   necesita más aire que el modo resumen de un solo producto; en
	   escritorio "suficientemente amplio" (pedido explícito), en móvil
	   sigue yendo a 100% por el media query de abajo. */
	width: min(92vw, 480px);
	max-height: 90vh;
	overflow-y: auto;
	display: grid;
	gap: var(--wc-space-sm);
}
.klic-quick-buy__close {
	position: absolute;
	top: var(--wc-space-sm);
	right: var(--wc-space-sm);
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wc-color-text-muted);
	cursor: pointer;
	padding: 0.4rem;
	min-width: 44px;
	min-height: 44px;
}
.klic-quick-buy__title {
	margin: 0;
	padding-right: 2rem;
	font-size: 1.1rem;
	color: var(--wc-color-success);
}
.klic-quick-buy__item {
	display: flex;
	align-items: center;
	gap: var(--wc-space-sm);
}
.klic-quick-buy__item-img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: var(--wc-radius-sm);
	background: var(--wc-color-surface);
	flex-shrink: 0;
}
.klic-quick-buy__item-name { margin: 0; font-weight: 600; color: var(--wc-color-text); }
.klic-quick-buy__item-price { margin: 0.2rem 0 0; color: var(--wc-color-text-muted); }
.klic-quick-buy__qty { display: flex; align-items: center; justify-content: space-between; }
.klic-quick-buy__qty-control { display: flex; align-items: center; gap: var(--wc-space-sm); }
.klic-quick-buy__qty-btn {
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--wc-radius-sm);
	border: 1px solid var(--wc-color-border);
	background: var(--wc-color-surface);
	font-size: 1.1rem;
	cursor: pointer;
}
.klic-quick-buy__qty-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.klic-quick-buy__qty-value { min-width: 1.5rem; text-align: center; font-weight: 600; }
.klic-quick-buy__more { width: 100%; margin-top: var(--wc-space-sm); }

/* Cuerpo intercambiable (resumen <-> explorar, ronda V8.2.1) -- solo uno
   de los dos está visible a la vez, alternado por JS quitando/poniendo
   [hidden] (nunca ambos, nunca ninguno). */
.klic-quick-buy__body[hidden] { display: none; }
.klic-quick-buy__body { display: grid; gap: var(--wc-space-sm); }

.klic-quick-buy__back {
	background: none;
	border: none;
	color: var(--wc-color-primary);
	font-weight: 700;
	padding: 0.4rem 0;
	text-align: left;
	cursor: pointer;
	min-height: 44px;
}

.klic-quick-buy__explore-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wc-space-sm);
	max-height: 40vh;
	overflow-y: auto;
}
.klic-quick-buy__explore-item {
	display: flex;
	align-items: center;
	gap: var(--wc-space-sm);
	padding: var(--wc-space-sm);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
}
.klic-quick-buy__explore-item-img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: var(--wc-radius-sm);
	background: var(--wc-color-surface);
	flex-shrink: 0;
}
.klic-quick-buy__explore-item-info { flex: 1 1 auto; min-width: 0; }
.klic-quick-buy__explore-item-name { margin: 0; font-weight: 600; color: var(--wc-color-text); font-size: 0.9rem; }
.klic-quick-buy__explore-item-price { margin: 0.15rem 0 0; color: var(--wc-color-text-muted); font-size: 0.85rem; }
.klic-quick-buy__explore-item-add {
	flex-shrink: 0;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
}
.klic-quick-buy__explore-item-add:disabled { opacity: 0.6; cursor: not-allowed; }
.klic-quick-buy__explore-vacio,
.klic-quick-buy__explore-error {
	margin: 0;
	color: var(--wc-color-text-muted);
	font-size: 0.9rem;
	text-align: center;
	padding: var(--wc-space-sm) 0;
}

/* Pie persistente (ronda V8.2.1) -- visible en AMBOS modos, nunca se
   oculta al explorar: "el resumen permanece accesible" es un requisito
   explícito, no solo un detalle visual. */
.klic-quick-buy__footer {
	border-top: 1px solid var(--wc-color-border);
	padding-top: var(--wc-space-sm);
	display: grid;
	gap: var(--wc-space-sm);
}
.klic-quick-buy__subtotal { margin: 0; color: var(--wc-color-text); }
.klic-quick-buy__shipping[hidden] { display: none; }
.klic-quick-buy__error[hidden] { display: none; }
.klic-quick-buy__error { margin: 0; color: var(--wc-color-danger); font-size: 0.85rem; }
@media (max-width: 599px) {
	.klic-quick-buy { align-items: flex-end; }
	.klic-quick-buy__panel {
		width: 100%;
		max-width: none;
		border-radius: var(--wc-radius-lg, var(--wc-radius-md)) var(--wc-radius-lg, var(--wc-radius-md)) 0 0;
		max-height: 85vh;
	}
}

/* Barra de envío gratis (§23-25, inc/klic-envio-gratis.php). Sin porcentaje
   en texto (regla explícita) -- solo el mensaje real + una barra visual
   proporcional cuando aplica. Reutilizable: se pinta dentro de
   .klic-quick-buy__shipping hoy, y del carrito en el siguiente módulo. */
.klic-shipping-bar__message { margin: 0; font-size: 0.9rem; color: var(--wc-color-text); }
.klic-shipping-bar__track {
	margin-top: 0.4rem;
	height: 6px;
	border-radius: 999px;
	background: var(--wc-color-border);
	overflow: hidden;
}
.klic-shipping-bar__fill {
	height: 100%;
	background: var(--wc-color-secondary);
	border-radius: inherit;
	transition: width 0.3s ease;
}
/* "Entrega: X" (ronda V8.2.1, §3) -- solo visibilidad de la calculadora
   de envío nativa de WooCommerce, nunca la reemplaza. */
.klic-cart-entrega-actual {
	margin: 0 0 var(--wc-space-sm);
	font-size: 0.9rem;
	color: var(--wc-color-text);
}
.klic-cart-entrega-actual__cambiar {
	color: var(--wc-color-text-muted);
	font-weight: 400;
}
.klic-cart-shipping-bar[hidden] { display: none; }
.klic-cart-shipping-bar {
	margin-bottom: var(--wc-space-md);
	padding: var(--wc-space-sm) var(--wc-space-md);
	background: var(--wc-color-surface);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-md);
}

/* Resumen persistente de carrito (§22) -- chip fijo, discreto, visible
   mientras el visitante sigue navegando tienda/categorías/carrito/producto
   tras "Agregar más productos". A diferencia del mini-carrito (toast que se
   cierra solo), este permanece mientras el carrito tenga productos. */
.klic-cart-summary[hidden] { display: none; }
.klic-cart-summary {
	position: fixed;
	right: var(--wc-space-lg);
	bottom: var(--wc-space-lg);
	z-index: 1100;
	display: flex;
	align-items: center;
	gap: var(--wc-space-md);
	background: var(--wc-color-bg);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-md);
	box-shadow: var(--wc-shadow-md);
	padding: var(--wc-space-sm) var(--wc-space-md);
}
.klic-cart-summary__text { font-weight: 600; color: var(--wc-color-text); white-space: nowrap; }
@media (max-width: 599px) {
	.klic-cart-summary {
		left: var(--wc-space-sm);
		right: var(--wc-space-sm);
		bottom: var(--wc-space-sm);
		justify-content: space-between;
	}
}

.woocommerce div.product .product_meta {
	font-size: 0.85rem;
	color: var(--wc-color-text-muted);
	border-top: 1px solid var(--wc-color-border);
	padding-top: var(--wc-space-sm);
}
.woocommerce div.product .product_meta a {
	color: var(--wc-color-primary);
}

.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--wc-space-xl);
	border-top: 1px solid var(--wc-color-border);
	padding-top: var(--wc-space-lg);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--wc-space-sm);
	list-style: none;
	margin: 0 0 var(--wc-space-md);
	padding: 0;
	border-bottom: 1px solid var(--wc-color-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.6rem 0.9rem;
	font-weight: 700;
	color: var(--wc-color-text-muted);
	text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wc-color-primary);
	border-bottom: 3px solid var(--wc-color-primary);
}
.woocommerce div.product .woocommerce-tabs .panel {
	color: var(--wc-color-text);
	line-height: 1.7;
}

/* "Información técnica" (inc/klic-product-page.php) -- reemplaza la
   pestaña nativa "Información adicional" (quitada, ver ese archivo) para
   eliminar los campos duplicados que esa pestaña mostraba. Se imprime
   justo debajo de Añadir al carrito/Comprar ahora (prioridad 35 del hook
   woocommerce_single_product_summary), dentro de la columna derecha del
   grid de 2 columnas -- por eso NO lleva grid-column:1/-1 como
   .related.products (ese sí necesita salirse del grid, esto no). */
.klic-info-tecnica {
	margin-top: var(--wc-space-md);
	padding-top: var(--wc-space-md);
	border-top: 1px solid var(--wc-color-border);
}
.klic-info-tecnica__titulo {
	margin: 0 0 var(--wc-space-sm);
	font-family: var(--wc-font-family-display);
	font-size: 1.1rem;
	color: var(--wc-color-text);
}
.klic-info-tecnica__lista { margin: 0; }
.klic-info-tecnica__fila {
	display: flex;
	gap: var(--wc-space-sm);
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--wc-color-border);
	font-size: 0.92rem;
}
.klic-info-tecnica__fila:last-child { border-bottom: none; }
.klic-info-tecnica__fila dt {
	flex: 0 0 40%;
	font-weight: 700;
	color: var(--wc-color-text-muted);
}
.klic-info-tecnica__fila dd { margin: 0; flex: 1 1 auto; color: var(--wc-color-text); }
.klic-info-tecnica__fila--compatibilidad dd { line-height: 1.5; }
@media (max-width: 480px) {
	.klic-info-tecnica__fila { flex-direction: column; gap: 0.15rem; }
	.klic-info-tecnica__fila dt { flex-basis: auto; }
}

/* Fix real (§29, ronda "auditoría profunda"): confirmado leyendo la
   plantilla real de WooCommerce (content-single-product.php) que
   `woocommerce_after_single_product_summary` -- donde se engancha
   `woocommerce_output_related_products()` -- se dispara DENTRO de
   `div.product`, ANTES de que ese div cierre. Como `.woocommerce div.product`
   es un grid de 2 columnas desde 900px (galería | resumen), ".related.products"
   entraba como un TERCER elemento de ese mismo grid -- ocupando solo una
   columna (~50% del ancho), la "columna estrecha" reportada. `grid-column:
   1 / -1` lo saca de esa restricción y le da el ancho completo, sin tocar
   el grid de 2 columnas de arriba (galería/resumen no cambian). */
.woocommerce div.product .related.products {
	grid-column: 1 / -1;
	margin-top: var(--wc-space-2xl);
	border-top: 1px solid var(--wc-color-border);
	padding-top: var(--wc-space-lg);
}
.woocommerce div.product .related.products > h2 {
	font-family: var(--wc-font-family-display);
	color: var(--wc-color-text);
}

/* ==========================================================================
   Carrito (/carrito/).
   ========================================================================== */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wc-color-surface-alt);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-md);
	overflow: hidden;
}

.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
	text-align: left;
	background: var(--wc-color-surface);
	color: var(--wc-color-text-muted);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: var(--wc-space-sm) var(--wc-space-md);
}

.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td {
	padding: var(--wc-space-sm) var(--wc-space-md);
	border-top: 1px solid var(--wc-color-border);
	vertical-align: middle;
}

.woocommerce-cart table.shop_table td.product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: var(--wc-color-surface);
	border-radius: var(--wc-radius-sm);
}

.woocommerce-cart table.shop_table td.product-name a {
	color: var(--wc-color-text);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-cart table.shop_table .product-price,
.woocommerce-cart table.shop_table .product-subtotal {
	color: var(--wc-color-primary);
	font-weight: 700;
	white-space: nowrap;
}

.woocommerce-cart table.shop_table td.product-quantity .qty {
	width: 4rem;
	height: 40px;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	background: var(--wc-color-surface-alt);
	color: var(--wc-color-text);
	text-align: center;
}

.woocommerce-cart table.shop_table td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	color: var(--wc-color-danger);
	font-weight: 700;
	text-decoration: none;
	background: rgba(220, 38, 38, 0.08);
}
.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
	background: rgba(220, 38, 38, 0.16);
}

.woocommerce-cart .cart-collaterals {
	margin-top: var(--wc-space-xl);
	display: flex;
	justify-content: flex-end;
}
.woocommerce-cart .cart_totals {
	width: min(100%, 420px);
}
.woocommerce-cart .cart_totals h2 {
	font-family: var(--wc-font-family-display);
	color: var(--wc-color-text);
}
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
	color: var(--wc-color-primary);
	font-size: 1.25rem;
	font-weight: 700;
}
.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: var(--wc-space-md);
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	width: 100%;
}

.woocommerce-cart .coupon {
	display: flex;
	gap: var(--wc-space-sm);
	align-items: center;
	flex-wrap: wrap;
}
.woocommerce-cart .coupon #coupon_code {
	height: 44px;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	background: var(--wc-color-surface-alt);
}

/* ==========================================================================
   Checkout (/finalizar-compra/ o como se haya nombrado la página).
   ========================================================================== */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
	display: grid;
	gap: var(--wc-space-lg);
}
@media (min-width: 900px) {
	.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: var(--wc-space-xl);
		align-items: start;
	}
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	background: var(--wc-color-surface);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-lg);
	padding: var(--wc-space-lg);
	margin-bottom: var(--wc-space-lg);
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #ship-to-different-address {
	font-family: var(--wc-font-family-display);
	color: var(--wc-color-text);
}

.woocommerce-checkout .form-row {
	margin-bottom: var(--wc-space-sm);
}
.woocommerce-checkout .form-row label {
	display: block;
	font-weight: 600;
	color: var(--wc-color-text);
	margin-bottom: 0.3rem;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	background: var(--wc-color-surface-alt);
	color: var(--wc-color-text);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--wc-color-primary);
	box-shadow: var(--wc-focus-ring);
}

.woocommerce-checkout #order_review {
	background: var(--wc-color-surface-alt);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-lg);
	padding: var(--wc-space-lg);
}
.woocommerce-checkout #order_review h3 {
	font-family: var(--wc-font-family-display);
	color: var(--wc-color-text);
	margin-top: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total .woocommerce-Price-amount,
.woocommerce-checkout .order-total .woocommerce-Price-amount {
	color: var(--wc-color-primary);
	font-weight: 700;
}

.woocommerce-checkout #payment {
	background: var(--wc-color-surface);
	border-radius: var(--wc-radius-md);
	margin-top: var(--wc-space-md);
	padding: var(--wc-space-md);
}
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--wc-space-sm);
	padding: 0;
}
.woocommerce-checkout #payment li.wc_payment_method label {
	font-weight: 600;
	color: var(--wc-color-text);
}
.woocommerce-checkout #payment .payment_box {
	background: var(--wc-color-surface-alt);
	border-radius: var(--wc-radius-sm);
	padding: var(--wc-space-sm) var(--wc-space-md);
	margin-top: var(--wc-space-xs);
	color: var(--wc-color-text-muted);
	font-size: 0.9rem;
}

.woocommerce-checkout #place_order {
	width: 100%;
	margin-top: var(--wc-space-sm);
}

/* ==========================================================================
   Mi cuenta (login/registro y panel de cuenta).
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--wc-space-lg);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wc-space-sm);
	border-bottom: 1px solid var(--wc-color-border);
	padding-bottom: var(--wc-space-sm);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:link,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:visited {
	color: var(--wc-color-text-muted);
	font-weight: 700;
	text-decoration: none;
	padding: 0.4rem 0.7rem;
	border-radius: var(--wc-radius-sm);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--wc-color-text);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:link,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:visited {
	color: #ffffff;
	background: var(--wc-color-primary);
}

/* "Cerrar sesión" discreto (§11, ronda nocturna v8) -- mismo lugar del
   menú (al final, ya lo hace inc/roles-profesionales.php), pero SIN el
   tratamiento visual de una pestaña más: texto subrayado, sin fondo, más
   pequeño -- para que no compita con las secciones reales de la cuenta. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:link,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:visited {
	background: none;
	color: var(--wc-color-text-muted);
	font-weight: 400;
	font-size: 0.85rem;
	text-decoration: underline;
	margin-left: auto;
}

/* Modal de confirmación de logout (inc/klic-cuenta-auth.php +
   klic-logout-confirm.js) -- mismo patrón que el resto de modales del
   tema esta ronda (backdrop + panel centrado). "Cancelar" es la acción
   visualmente prominente (botón secundario/relleno); "Cerrar sesión" es
   la de salida (outline) -- a propósito, para no incentivar accidentalmente
   cerrar sesión de un clic. */
.klic-logout-confirm[hidden] { display: none; }
.klic-logout-confirm {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
}
.klic-logout-confirm__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(19, 41, 75, 0.55);
}
.klic-logout-confirm__panel {
	position: relative;
	background: var(--wc-color-bg);
	border-radius: var(--wc-radius-md);
	box-shadow: var(--wc-shadow-md);
	padding: var(--wc-space-lg);
	width: min(92vw, 380px);
	display: grid;
	gap: var(--wc-space-md);
	text-align: center;
}
.klic-logout-confirm__title { margin: 0; font-weight: 700; color: var(--wc-color-text); }
.klic-logout-confirm__actions { display: flex; gap: var(--wc-space-sm); }
.klic-logout-confirm__actions .button { flex: 1 1 0; }

/* Texto explicativo de "Olvidé mi contraseña" (§12). */
.klic-recuperacion-intro { margin: 0 0 var(--wc-space-md); color: var(--wc-color-text-muted); font-size: 0.9rem; }
.klic-recuperacion-soporte { margin-top: var(--wc-space-md); font-size: 0.85rem; color: var(--wc-color-text-muted); }
.klic-recuperacion-soporte a { color: var(--wc-color-primary); font-weight: 700; }

/* "Seguridad" colapsable en "Editar datos de mi cuenta" (§7). El h2 lo
   imprime PHP siempre; el botón de colapso lo inserta JS (ver
   klic-cuenta-seguridad.js) -- sin JS, .klic-cuenta-seguridad nunca lleva
   [hidden], así que se ve exactamente como el formulario nativo de
   WooCommerce de hoy (nunca peor). */
.klic-cuenta-seguridad__titulo {
	margin: var(--wc-space-lg) 0 var(--wc-space-sm);
	font-size: 1.05rem;
	color: var(--wc-color-text);
}
.klic-cuenta-seguridad__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--wc-color-surface);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	padding: 0.6rem 0.9rem;
	min-height: 44px;
	font-weight: 600;
	color: var(--wc-color-primary);
	cursor: pointer;
	margin-bottom: var(--wc-space-sm);
}
.klic-cuenta-seguridad[hidden] { display: none; }

.woocommerce-account form.login,
.woocommerce-account form.register {
	max-width: 420px;
	background: var(--wc-color-surface);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-lg);
	padding: var(--wc-space-lg);
}
.woocommerce-account form .form-row label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3rem;
	color: var(--wc-color-text);
}
/* WooCommerce marca los campos obligatorios con <span class="required">*</span>
   -- sin esto se ve como texto plano negro, indistinguible del resto de la
   etiqueta (este archivo desactiva el CSS base del plugin a propósito, ver
   woocommerce_enqueue_styles más abajo, así que nunca heredó este color). */
.required {
	color: var(--wc-color-danger);
}
.woocommerce-account form .input-text {
	width: 100%;
	/* Mismo bug encontrado y corregido en el botón "Añadir al carrito"
	   (content-box es el default del navegador, este archivo no trae
	   ningún reset global): sin esto, width:100% + el padding se sumaban
	   por fuera y el input se salía un poco de su <p class="form-row">.
	   Se corrige aquí porque los 2 campos nuevos de Nombre/Apellido usan
	   esta misma clase. */
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	background: var(--wc-color-surface-alt);
	margin-bottom: var(--wc-space-sm);
}
/* Nombre/Apellido lado a lado en escritorio (form-row-first/last, misma
   convención -- float, no inline-block -- que WooCommerce usa en
   checkout; con inline-block el espacio en blanco entre las 2 etiquetas
   del HTML sumaba unos px extra y forzaba un salto de línea aun cuando
   "cabían" por cálculo, confirmado al medir en el navegador). En móvil
   se apilan completas, nunca a 48% (evita inputs angostos incómodos de
   tocar). El <div class="clear"> ya presente en el HTML limpia el float. */
.woocommerce-account form .form-row-first,
.woocommerce-account form .form-row-last {
	width: 100%;
}
@media (min-width: 480px) {
	.woocommerce-account form .form-row-first,
	.woocommerce-account form .form-row-last {
		width: calc(50% - 0.5rem);
		float: left;
	}
	.woocommerce-account form .form-row-first {
		margin-right: 1rem;
	}
	.woocommerce-account form .clear {
		clear: both;
	}
}

/* ==========================================================================
   Cuenta profesional (/mi-cuenta/cuenta-profesional/) -- solo CSS/marcado,
   sin tocar nonce/handlers/roles/aprobacion/precios (ver
   inc/roles-profesionales.php: klic_render_endpoint_cuenta_profesional()
   solo gano clases nuevas en el HTML ya existente, la logica es identica).
   Mismo lenguaje visual que la card de login/registro de arriba (surface +
   borde + radius-lg), pero con jerarquia mas fuerte: titulo propio, campos
   en columna con label arriba (no al lado), inputs mas altos.
   ========================================================================== */
.klic-pro-account {
	max-width: 480px;
}

.klic-pro-account__form {
	background: var(--wc-color-surface);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-lg);
	padding: var(--wc-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--wc-space-md);
}

.klic-pro-account__title {
	margin: 0;
	font-family: var(--wc-font-family-display);
	font-size: 1.35rem;
	color: var(--wc-color-text);
}

.klic-pro-account__intro {
	margin: 0;
	color: var(--wc-color-text-muted);
	line-height: 1.6;
}

.klic-pro-account__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.klic-pro-account__field label {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--wc-color-text);
}

/* select/input a todo el ancho, altura tactil comoda (>=48px), mismo
   lenguaje que el resto del checkout/cuenta (radius-sm, borde, fondo
   surface-alt) -- el select necesita su propio selector porque los <select>
   no heredan estilos de .input-text/.woocommerce-account form .input-text
   (esas reglas de arriba no cubren <select> sin la clase, y aqui no se le
   puso esa clase para no acoplar este bloque a marcado ajeno). */
.klic-pro-account__field select,
.klic-pro-account__field input[type="text"],
.klic-pro-account__field input[type="tel"] {
	width: 100%;
	/* Mismo bug ya corregido en el botón "Añadir al carrito" y en los
	   inputs de Crear cuenta (content-box es el default del navegador,
	   este archivo no trae reset global) -- sin esto, width:100% + el
	   padding se salían de .klic-pro-account__field. */
	box-sizing: border-box;
	height: 48px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	background: var(--wc-color-surface-alt);
	color: var(--wc-color-text);
	font-size: 1rem;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.klic-pro-account__field select:focus,
.klic-pro-account__field input:focus {
	outline: none;
	border-color: var(--wc-color-primary);
	box-shadow: var(--wc-focus-ring);
}

.klic-pro-account__submit {
	width: 100%;
	height: 52px;
	font-size: 1rem;
	margin-top: 0.25rem;
}

/* Estados (pendiente/aprobado/rechazado) -- misma card, borde de color
   segun el estado, para que la jerarquia visual comunique el estatus de
   un vistazo sin depender solo del texto. */
.klic-pro-account__status {
	background: var(--wc-color-surface);
	border: 1px solid var(--wc-color-border);
	border-left: 4px solid var(--wc-color-border);
	border-radius: var(--wc-radius-lg);
	padding: var(--wc-space-md) var(--wc-space-lg);
	color: var(--wc-color-text);
	line-height: 1.6;
	font-weight: 600;
}
.klic-pro-account__status--pendiente {
	border-left-color: var(--wc-color-warning);
}
.klic-pro-account__status--aprobado {
	border-left-color: var(--wc-color-success);
}
.klic-pro-account__status--rechazado {
	border-left-color: var(--wc-color-danger);
}

/* Fila de 2 campos (Nombre/Apellido, Ciudad/Estado) -- una columna en
   movil de entrada (mobile-first), 2 columnas desde 480px. Mismo criterio
   que el resto del proyecto: nunca depender de un ancho fijo. */
.klic-pro-account__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wc-space-md);
}
@media (min-width: 480px) {
	.klic-pro-account__row {
		grid-template-columns: 1fr 1fr;
	}
}
.klic-pro-account__optional {
	font-weight: 400;
	color: var(--wc-color-text-muted);
	font-size: 0.85em;
}

/* Movil: la card ya es fluida (max-width, no width fijo) asi que no
   necesita su propio breakpoint para no desbordar -- se confirma sin
   overflow en la auditoria adjunta. Unico ajuste: un poco menos de padding
   para no comerse tanto ancho util en pantallas angostas. */
@media (max-width: 480px) {
	.klic-pro-account__form {
		padding: var(--wc-space-md);
	}
	.klic-pro-account__status {
		padding: var(--wc-space-sm) var(--wc-space-md);
	}
}

/* ==========================================================================
   Login / Registro (/mi-cuenta/, visitante sin sesión) -- WooCommerce ya
   genera #customer_login con 2 columnas (.u-column1 = login, .u-column2 =
   registro) cuando el registro está activo en Ajustes. Aquí solo se le da
   jerarquía visual clara -- misma card que el resto del sitio, título
   grande por columna, para que jamás parezca "solo entran clientes que ya
   existen". El registro no aparece hasta que actives esa opción en
   WooCommerce (ver 12_ACCOUNT_UX_REPORT.md) -- este CSS ya queda listo.
   ========================================================================== */
.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wc-space-lg);
	max-width: 900px;
}
@media (min-width: 700px) {
	.woocommerce-account #customer_login {
		grid-template-columns: 1fr 1fr;
	}
}
.woocommerce-account #customer_login > div {
	background: var(--wc-color-surface);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-lg);
	padding: var(--wc-space-lg);
}
.woocommerce-account #customer_login h2 {
	margin: 0 0 var(--wc-space-sm);
	font-family: var(--wc-font-family-display);
	font-size: 1.35rem;
	color: var(--wc-color-text);
}
/* Columna de registro: antes tenía una franja naranja de 4px arriba de
   toda la card -- a simple vista parecía un botón cortado/una barra de
   carga, no un acento decorativo (encontrado en la revisión visual). Se
   reemplaza por un detalle pequeño junto al título (un punto de 8px,
   igual de reconocible como "esto es lo nuevo" pero sin ambigüedad
   visual) -- la card en sí queda con el mismo borde/sombra suave que
   "Iniciar sesión", sin ningún borde de color. */
.woocommerce-account #customer_login .u-column2 h2 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.woocommerce-account #customer_login .u-column2 h2::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wc-color-secondary);
	flex-shrink: 0;
}
.woocommerce-account #customer_login .woocommerce-form-row {
	margin-bottom: var(--wc-space-sm);
}
.woocommerce-account #customer_login button.button {
	width: 100%;
}
.woocommerce-account .woocommerce-LostPassword {
	margin-top: var(--wc-space-sm);
	font-size: 0.9rem;
}
.woocommerce-account .woocommerce-LostPassword a {
	color: var(--wc-color-primary);
	font-weight: 700;
}

/* Mensajes de WooCommerce (éxito, error, "carrito actualizado", etc.) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	list-style: none;
	background: var(--wc-color-surface);
	border-left: 4px solid var(--wc-color-primary);
	border-radius: var(--wc-radius-sm);
	padding: var(--wc-space-sm) var(--wc-space-md);
	margin: 0 0 var(--wc-space-lg);
	color: var(--wc-color-text);
}
.woocommerce-error {
	border-left-color: var(--wc-color-danger);
}
.woocommerce-message .button {
	margin-left: var(--wc-space-sm);
}

/* ==========================================================================
   Responsive: tablas de carrito/checkout a formato "tarjeta" en móvil
   (mismo criterio mobile-first del resto del proyecto).
   ========================================================================== */
@media (max-width: 767px) {
	.woocommerce-cart table.shop_table thead {
		display: none;
	}
	.woocommerce-cart table.shop_table tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wc-space-sm);
		padding: var(--wc-space-sm) var(--wc-space-md);
	}
	.woocommerce-cart table.shop_table td {
		border-top: none;
		padding: 0.2rem 0;
	}
	.woocommerce-checkout {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Ocultar el sidebar/widgets por defecto de WordPress en páginas de
   WooCommerce (lista sin estilo de "Buscar / Páginas / Archivos" que WP
   agrega por defecto) -- no lo pedimos, no aporta nada al comprador. Se
   cubren varios selectores de contenedor genéricos porque, sin acceso al
   HTML real del sitio en vivo, no hay forma de saber con certeza cuál usa
   este tema/instalación en particular -- y se apuntan también las clases
   núcleo de WordPress de esos 3 widgets específicos (search/pages/archive),
   que son fijas sin importar el contenedor que los envuelva. !important es
   deliberado aquí (única excepción en este archivo): estamos ocultando
   markup que no controlamos y cuya especificidad tampoco conocemos. */
body.woocommerce-page #secondary,
body.woocommerce-page .widget-area,
body.woocommerce-page aside.widget-area,
body.woocommerce-page #sidebar,
body.woocommerce-page .sidebar,
body.woocommerce-cart #secondary,
body.woocommerce-cart .widget-area,
body.woocommerce-checkout #secondary,
body.woocommerce-checkout .widget-area,
body.woocommerce-account #secondary,
body.woocommerce-account .widget-area,
.widget_search,
.widget_pages,
.widget_archive,
.widget_meta,
.widget_categories,
.widget_recent_entries,
.widget_recent_comments {
	display: none !important;
}

/* ==========================================================================
   Filtros avanzados de /tienda/ y categorías (inc/filtros-tienda.php).
   REDISEÑO 22/08/2026 (reportado: doble scroll de página + sidebar fijo,
   demasiadas secciones abiertas a la vez). Ya NO hay sidebar fijo de 2
   columnas (.klic-shop-layout se eliminó) -- el grid de productos usa su
   ancho completo (ver "ul.products", más arriba en este archivo: 4
   columnas desde 1024px, sin ninguna regla que lo angoste).
   Mobile-first, mismo <aside id="klic-filtros"> para las 2 presentaciones,
   sin HTML duplicado ni 2 formularios con los mismos name= de campo:
   - Móvil/tablet angosta (<900px): drawer fuera de pantalla (como antes),
     pero cada faceta es ahora un acordeón nativo <details
     name="klic-filtro-seccion"> -- abrir uno cierra los demás, sin JS
     (soporte nativo del navegador para <details> con el mismo name
     compartido).
   - Escritorio (>=900px, ver nota 26/08/2026 más abajo en el bloque
     @media): la MISMA lista de <details> se despliega en una barra
     horizontal -- cada uno es un botón que abre su contenido como dropdown
     (position:absolute), nunca una columna fija que compita con el scroll
     de la página.
   ========================================================================== */

.klic-filtros-barra {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wc-space-sm);
	margin-bottom: var(--wc-space-xs);
}
.klic-filtros-chips-barra {
	margin-bottom: var(--wc-space-sm);
}
.klic-filtros-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 40px;
	padding: 0 1rem;
	border-radius: 999px;
	border: 1px solid var(--wc-color-border);
	background: var(--wc-color-surface);
	color: var(--wc-color-text);
	font-weight: 700;
	cursor: pointer;
}
.klic-filtros-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--wc-color-primary);
	color: #ffffff;
	font-size: 0.75rem;
}
.klic-filtros-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.klic-filtros-chip,
.klic-filtros-chip:link,
.klic-filtros-chip:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	height: 32px;
	padding: 0 0.75rem;
	border-radius: 999px;
	background: var(--wc-color-secondary-soft);
	color: var(--wc-color-text);
	font-size: 0.85rem;
	text-decoration: none;
	border: 1px solid transparent;
}
.klic-filtros-chip:hover,
.klic-filtros-chip:focus {
	border-color: var(--wc-color-secondary);
	text-decoration: none;
}
/* "Limpiar filtros": acción secundaria discreta a propósito -- sin
   subrayado permanente (que la hacía verse como un link de texto suelto,
   no una acción de la interfaz) ni color de "visitado". Se agrega
   underline solo en hover, como pista sutil de que es interactivo. */
.klic-filtros-limpiar,
.klic-filtros-limpiar:link,
.klic-filtros-limpiar:visited {
	font-size: 0.85rem;
	color: var(--wc-color-text-muted);
	text-decoration: none;
}
.klic-filtros-limpiar:hover,
.klic-filtros-limpiar:focus {
	color: var(--wc-color-text);
	text-decoration: underline;
}

/* Drawer (mobile-first): fijo, fuera de pantalla por defecto. Layout en
   3 franjas via flexbox (header fijo / cuerpo con su propio scroll /
   acciones fijas al fondo) -- a propósito NO se usa position:sticky para
   el pie de "Ver resultados": con poco contenido, sticky+bottom se pega
   casi de inmediato y tapa los últimos grupos (Botones/Chip/FCC) en vez
   de dejarlos hacer scroll primero. Con flexbox nunca se solapan. */
.klic-filtros {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(85vw, 360px);
	max-width: 100vw;
	background: var(--wc-color-bg);
	border-left: 1px solid var(--wc-color-border);
	box-shadow: var(--wc-shadow-md);
	z-index: 1000;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: var(--wc-space-md);
	transform: translateX(100%);
	transition: transform 0.25s ease;
}
.klic-filtros.is-open {
	transform: translateX(0);
}
/* Scroll lock (26/08/2026, gap real encontrado en la auditoría de esta
   ronda -- ver output/saturday_final_round/04_FILTERS_DESKTOP_MOBILE.md):
   con el drawer abierto, la página detrás podía seguir haciendo scroll con
   el dedo/rueda -- confuso en móvil, donde el fondo oscurecido sugiere un
   modal pero no se comportaba como uno. Se quita en el breakpoint de
   escritorio (más abajo), donde nunca hay drawer. */
body.klic-filtros-abiertos {
	overflow: hidden;
}
body.klic-filtros-abiertos::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(19, 41, 75, 0.45);
	z-index: 999;
}
.klic-filtros__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wc-space-md);
	flex-shrink: 0;
}
.klic-filtros__header h2 {
	margin: 0;
	font-family: var(--wc-font-family-display);
	font-size: 1.2rem;
}
.klic-filtros__cerrar {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid var(--wc-color-border);
	background: var(--wc-color-surface);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.klic-filtros__form {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.klic-filtros__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}
/* Cada faceta (Marca/Frecuencia/Botones/Chip/Precio/Más filtros): acordeón
   nativo en móvil. name="klic-filtro-seccion" (impreso en PHP) agrupa
   todos los <details> hermanos -- abrir uno cierra los demás, sin JS. */
.klic-filtros__seccion {
	border-bottom: 1px solid var(--wc-color-border);
	padding: 0.5rem 0;
}
.klic-filtros__seccion:first-child {
	padding-top: 0;
}
.klic-filtros__seccion-titulo {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wc-color-text);
	padding: 0.3rem 0;
}
.klic-filtros__seccion-titulo::-webkit-details-marker {
	display: none;
}
.klic-filtros__seccion-titulo::after {
	content: "▾";
	margin-left: auto;
	font-size: 0.75em;
	color: var(--wc-color-text-muted);
	transition: transform 0.15s ease;
}
.klic-filtros__seccion[open] > .klic-filtros__seccion-titulo::after {
	transform: rotate(180deg);
}
.klic-filtros__seccion-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	border-radius: 999px;
	background: var(--wc-color-primary);
	color: #ffffff;
	font-size: 0.6rem;
}
.klic-filtros__grupo {
	margin-top: 0.5rem;
}
.klic-filtros__precio-inputs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.klic-filtros__precio-inputs input {
	width: 0;
	flex: 1 1 0;
	box-sizing: border-box;
	height: 40px;
	padding: 0 0.6rem;
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	font-size: 0.95rem;
}
.klic-filtros__checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0;
	font-size: 0.9rem;
	cursor: pointer;
}
.klic-filtros__checkbox input {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.klic-filtros__conteo {
	color: var(--wc-color-text-muted);
	font-size: 0.85em;
}
/* Marca del vehículo: "Marcas destacadas" arriba + "Ver todas las marcas"
   (A-Z completo) debajo -- ver klic_filtros_render_grupo_marca() en
   inc/filtros-tienda.php. Reutiliza .klic-filtros__checkbox tal cual
   dentro de ambas secciones, sin reinventar un estilo de "pill". */
.klic-filtros__subtitulo {
	margin: 0 0 0.2rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wc-color-text-muted);
}
.klic-filtros__destacadas {
	margin-bottom: 0.2rem;
}
.klic-filtros__ver-todas-marcas {
	margin-top: 0.4rem;
}
/* Buscador dentro de un grupo con muchos valores (ej. Marca del vehículo,
   21+ marcas) -- para que una marca de baja frecuencia como Mazda no
   dependa de expandir "Ver más" a mano. */
.klic-filtros__buscar-valor {
	width: 100%;
	box-sizing: border-box;
	height: 36px;
	padding: 0 0.6rem;
	margin-bottom: 0.4rem;
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	font-size: 0.85rem;
}
/* <details>/<summary> nativo -- "Ver N más" sin JS, con estilo coherente
   con el resto de los checkboxes del grupo. */
.klic-filtros__ver-mas {
	margin-top: 0.2rem;
}
.klic-filtros__ver-mas summary {
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wc-color-primary);
	padding: 0.3rem 0;
	list-style: none;
}
.klic-filtros__ver-mas summary::-webkit-details-marker {
	display: none;
}
.klic-filtros__ver-mas summary::before {
	content: "+ ";
}
.klic-filtros__ver-mas[open] summary::before {
	content: "− ";
}
#klic-filtro-fcc {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	padding: 0 0.6rem;
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	font-size: 0.95rem;
}
.klic-filtros__acciones {
	flex-shrink: 0;
	margin-top: var(--wc-space-md);
	padding-top: var(--wc-space-md);
	border-top: 1px solid var(--wc-color-border);
	display: flex;
	flex-direction: column;
	gap: var(--wc-space-sm);
	align-items: stretch;
}
.klic-filtros__aplicar {
	width: 100%;
	text-align: center;
}
.klic-filtros__limpiar-form,
.klic-filtros__limpiar-form:link,
.klic-filtros__limpiar-form:visited {
	text-align: center;
	font-size: 0.9rem;
	color: var(--wc-color-text-muted);
	text-decoration: none;
}
.klic-filtros__limpiar-form:hover,
.klic-filtros__limpiar-form:focus {
	color: var(--wc-color-text);
	text-decoration: underline;
}

@media (min-width: 900px) {
	/* Umbral bajado de 1024px a 900px (26/08/2026, ver
	   output/saturday_final_round/04_FILTERS_DESKTOP_MOBILE.md): reportado en
	   producción como "caja grande que crece y empuja productos" -- verificado
	   con un mockup fiel (mismo HTML/CSS reales, servidor local) que a
	   >=1024px el comportamiento YA es el correcto (dropdown position:absolute,
	   no empuja nada); la causa más probable es una ventana/laptop con ancho
	   real entre 900-1023px (frecuente) cayendo en el modo acordeón móvil, que
	   sí crece verticalmente por diseño. 900px sigue siendo un breakpoint ya
	   documentado del proyecto (docs sección "breakpoints usuales") -- no se
	   inventa uno nuevo. Ya no hay columna de 260px que "robarle" al grid de
	   productos --
	   ul.products vuelve a su regla general (4 columnas desde 1024px,
	   definida arriba en este archivo), ahora con todo el ancho del
	   contenedor de 1200px. Único scroll en escritorio: el de la página --
	   ningún contenedor de este bloque tiene overflow-y propio salvo el
	   contenido puntual de un dropdown abierto (ver más abajo), del mismo
	   modo que cualquier <select>/menú desplegable normal. */
	.klic-filtros-toggle {
		display: none; /* el botón "Filtros" es solo del drawer móvil -- en escritorio la barra ya está siempre visible */
	}
	.klic-filtros__header,
	.klic-filtros__cerrar {
		display: none;
	}
	body.klic-filtros-abiertos::before {
		display: none;
	}
	body.klic-filtros-abiertos {
		overflow: visible; /* nunca hay drawer en escritorio -- el scroll lock móvil no aplica aquí */
	}

	.klic-filtros {
		position: static;
		width: auto;
		max-width: none;
		max-height: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		transform: none;
		transition: none;
		overflow: visible;
		padding: 0;
		z-index: auto;
		display: block;
	}
	.klic-filtros__form {
		display: block;
	}
	.klic-filtros__body {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--wc-space-sm);
		overflow: visible;
		flex: initial;
		min-height: 0;
	}
	/* Cada faceta pasa de "fila de acordeón" a "botón que abre un dropdown"
	   -- mismo <details>, solo reposicionado. */
	.klic-filtros__seccion {
		position: relative;
		border-bottom: none;
		padding: 0;
	}
	.klic-filtros__seccion-titulo {
		height: 40px;
		padding: 0 0.9rem;
		border: 1px solid var(--wc-color-border);
		border-radius: 999px;
		background: var(--wc-color-surface);
		white-space: nowrap;
	}
	.klic-filtros__seccion[open] > .klic-filtros__seccion-titulo {
		border-color: var(--wc-color-primary);
		color: var(--wc-color-primary);
	}
	/* El panel del dropdown: position:absolute lo saca del flujo -- nunca
	   empuja ni agranda la barra, y max-height+overflow-y acotan SOLO este
	   panel (un menú desplegable con scroll propio es normal; lo que se
	   eliminó fue el scroll independiente de TODO el panel de filtros). */
	.klic-filtros__grupo {
		position: absolute;
		top: calc(100% + 0.4rem);
		left: 0;
		z-index: 20;
		width: max(260px, 100%);
		max-height: 320px;
		overflow-y: auto;
		background: var(--wc-color-bg);
		border: 1px solid var(--wc-color-border);
		border-radius: var(--wc-radius-md);
		box-shadow: var(--wc-shadow-md);
		padding: var(--wc-space-sm);
		margin-top: 0;
	}
	/* Los últimos 2 botones de la barra (Chip, Más filtros) quedan cerca
	   del borde derecho del contenedor de 1200px -- alinear su dropdown a
	   la derecha evita que se salga del viewport en pantallas más angostas
	   dentro de este mismo rango (1024-1279px). */
	.klic-filtros__seccion:nth-last-child(-n+2) .klic-filtros__grupo {
		left: auto;
		right: 0;
	}
	.klic-filtros__acciones {
		flex-direction: row;
		align-items: center;
		gap: var(--wc-space-md);
		margin-top: 0;
		padding-top: 0;
		border-top: none;
		flex-shrink: 0;
	}
	.klic-filtros__aplicar {
		width: auto;
		padding-inline: 1.4rem;
	}
	.klic-filtros__limpiar-form {
		white-space: nowrap;
	}
}

/* ==========================================================================
   Checkout mobile-first (inc/checkout-movil.php + klic-checkout-movil.js).
   Patrón UX inspirado en flujos de e-commerce mexicanos de bajo abandono
   (pocas decisiones por pantalla, jerarquía clara, CTA de pago siempre
   accesible) -- identidad 100% KLIC, sin colores/iconografía ajena. El
   checkout es WooCommerce BLOCKS (ver auditoría en
   output/final_prelaunch_round/01_MOBILE_CHECKOUT_AUDIT.md) -- todo aquí
   apunta a los `data-block-name`/clases que WooCommerce ya genera, nunca
   se reemplaza ningún bloque ni se duplica el botón de envío del pedido.
   ========================================================================== */

/* Encabezados numerados de sección (insertados por JS, solo lectura) --
   dan la sensación de "pocas decisiones por pantalla" sin tocar los
   campos reales del formulario. */
.klic-checkout__paso {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: var(--wc-space-lg) 0 var(--wc-space-sm);
	font-family: var(--wc-font-family-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wc-color-text);
}
.klic-checkout__paso:first-of-type {
	margin-top: 0;
}
.klic-checkout__paso-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--wc-color-primary);
	color: #ffffff;
	font-size: 0.85rem;
	font-weight: 700;
}

/* Aviso B2B discreto -- 1 línea, nunca un banner grande, nunca bloquea el
   pago (§13 del pedido: "NO interrumpir el pago"). */
.klic-checkout__aviso-b2b {
	margin: 0 0 var(--wc-space-md);
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-sm);
	background: var(--wc-color-surface);
	font-size: 0.85rem;
	color: var(--wc-color-text-muted);
}
.klic-checkout__aviso-b2b a {
	color: var(--wc-color-primary);
	font-weight: 700;
}

/* Cada sección de bloque queda visualmente agrupada (tarjeta con borde) --
   ayuda a "bloques grandes, jerarquía clarísima" sin necesitar tocar el
   contenido interno de cada bloque. */
body.woocommerce-checkout [data-block-name="woocommerce/checkout-contact-information-block"],
body.woocommerce-checkout [data-block-name="woocommerce/checkout-shipping-address-block"],
body.woocommerce-checkout [data-block-name="woocommerce/checkout-shipping-method-block"],
body.woocommerce-checkout [data-block-name="woocommerce/checkout-payment-block"] {
	padding: var(--wc-space-md);
	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-md);
	background: var(--wc-color-surface-alt);
	margin-bottom: var(--wc-space-sm);
}

/* Inputs más grandes -- teclado móvil cómodo, autofill legible (§5:
   "inputs grandes", "mínimos clics"). No se tocan name/autocomplete (los
   pone WooCommerce Blocks nativamente, ya correctos: email, tel,
   address-line1, postal-code, etc. -- no se reinventan aquí). */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-address-form input,
body.woocommerce-checkout select.wc-block-components-country-input,
body.woocommerce-checkout select.wc-block-components-state-input {
	min-height: 48px;
	font-size: 1rem;
}

/* Errores cerca del campo (ya es el comportamiento nativo de WooCommerce
   Blocks) -- solo se refuerza el color/peso para que se note de inmediato
   en una pantalla chica. */
body.woocommerce-checkout .wc-block-components-validation-error {
	color: var(--wc-color-danger);
	font-weight: 600;
	font-size: 0.85rem;
}

/* --- Barra de acciones fija SOLO en móvil (<768px) -- el botón sigue
   siendo el nativo "Realizar pedido" de WooCommerce, nunca uno nuevo. --- */
@media (max-width: 767px) {
	body.woocommerce-checkout {
		/* Espacio para que la barra fija no tape el último campo/nota. */
		padding-bottom: 84px;
	}
	body.woocommerce-checkout [data-block-name="woocommerce/checkout-actions-block"] {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 500;
		display: flex;
		align-items: center;
		gap: var(--wc-space-sm);
		background: var(--wc-color-bg);
		border-top: 1px solid var(--wc-color-border);
		box-shadow: 0 -4px 16px rgba(19, 41, 75, 0.08);
		padding: 0.7rem var(--wc-space-md);
		/* Safe area de iPhone (notch/home indicator) -- nunca tapado, nunca
		   con hueco feo debajo del botón. */
		padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
	}
	.klic-checkout-sticky__total {
		flex-shrink: 0;
		font-family: var(--wc-font-family-display);
		font-weight: 700;
		font-size: 1rem;
		color: var(--wc-color-text);
		white-space: nowrap;
	}
	body.woocommerce-checkout [data-block-name="woocommerce/checkout-actions-block"] .wc-block-components-checkout-place-order-button {
		flex: 1 1 auto;
		min-height: 48px;
	}
}

/* Layout de escritorio (§29-30, "espacio vacío a la izquierda") --
   investigación real (ver output/klic_nightly_v8/09_CHECKOUT_AUDIT.md):
   WooCommerce Blocks construye el checkout con `SidebarLayout`, una clase
   ESTABLE y documentada por WooCommerce (`.wc-block-components-sidebar-layout`,
   ver developer.woocommerce.com "Cart and checkout blocks theming") que pasa
   de columna única a fila (65% formulario / 35% resumen) a partir de 700px.
   `#main.site-main` ya limita el ancho total a 1200px (regla existente,
   arriba en este archivo) -- eso NO es la causa. La causa más probable,
   dado que WooCommerce documenta esas clases como "privadas" (pueden no
   tener anchos máximos simétricos entre main/sidebar por versión), es que
   la columna de formulario no está forzada a ocupar el espacio restante de
   forma predecible en pantallas anchas. Esta regla FIJA explícitamente la
   proporción (en vez de heredar el default de WooCommerce, que esta ronda
   no pudo inspeccionar en el DOM real de producción) y un `max-width` de
   lectura cómoda sin dejar hueco -- si WooCommerce Blocks cambia esta clase
   en una actualización futura, la regla simplemente deja de aplicar (no
   rompe nada, el checkout nativo sigue funcionando).
   ESTADO DE PRUEBA: STATIC ONLY -- no hay forma de renderizar el bundle
   React real de WooCommerce Blocks en este entorno; Iván debe comparar
   antes/después con una captura real de /finalizar-compra/ en escritorio. */
@media (min-width: 1024px) {
	body.woocommerce-checkout .wc-block-components-sidebar-layout,
	body.woocommerce-checkout .wc-block-checkout {
		display: flex;
		align-items: flex-start;
		gap: var(--wc-space-lg);
		width: 100%;
	}
	body.woocommerce-checkout .wc-block-components-main,
	body.woocommerce-checkout .wc-block-checkout__main {
		flex: 1 1 60%;
		min-width: 0; /* evita que un input largo empuje la columna más allá de su flex-basis */
	}
	body.woocommerce-checkout .wc-block-components-sidebar,
	body.woocommerce-checkout .wc-block-checkout__sidebar {
		flex: 1 1 38%;
		max-width: 440px;
	}
}

/* prefers-reduced-motion: sin animaciones nuevas agregadas por esta
   sección (la barra no anima su aparición), documentado por completitud
   de accesibilidad -- nada que desactivar aquí. */