/* ==========================================================================
   Ficha · «Tu talla, resuelta» (propuesta 2, 2026-10-29)
   Lo pinta template-parts/ficha-talla-*.php y lo mueve initModuloTalla
   (assets/js/product.js). Solo carga en las fichas (inc/ficha-talla.php).

   Colores: los cuatro de marca más text-muted (4,83:1 sobre blanco). Los
   fondos azulados son el azul de marca al 8 %, no un color nuevo.

   Los selectores van con dos clases a propósito: las reglas de botón de Astra
   ponen `padding: 15px 30px` a los <button> y con una sola clase ganan ellas
   —ya pasó con las flechas de la galería y con el botón «Entrar»—.
   ========================================================================== */

/* ── El selector ─────────────────────────────────────────────────────────── */
/* `min-width: 0` en toda la cadena: un carrusel es más ancho que la pantalla,
   y un hijo de flex con `min-width: auto` se estira hasta él en vez de dejarlo
   desplazarse. Medido: el selector llegaba a 1.965 px a 375. */
.gk-talla-mod,
.gk-talla-mod__sin,
.gk-purchase-main:has(.gk-talla-mod),
.gk-container-product:has(.gk-talla-mod),
.gk-purchase-container:has(.gk-talla-mod),
.gk-ficha-otros {
	min-width: 0;
	max-width: 100%;
}

/* La columna única del celular es `1fr` = `minmax(auto, 1fr)`, así que crecía
   hasta el contenido más ancho de cualquier elemento —la foto
   o una fila de tallas—. Medido en producción a 375 px: 444 px dentro de una
   columna de 364, con la talla «41.5 CO» y el selector de talla cortados por
   la derecha. Venía de antes; afecta a todas las fichas. */
/* Mismas proporciones que style.css, con mínimo 0. Sin esto, en escritorio el
   carrusel de «no hay» ensanchaba la columna de compra a 1.964 px. */
.gk-product-layout { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }

/* Va DESPUÉS de la regla de arriba a propósito: esta hoja carga tras style.css,
   así que la de arriba pisaría también su columna única del celular. */
@media (max-width: 1023px) {
	/* En la pista y no en los hijos: aquí `.gk-product-esp` es `display:
	   contents`, así que la galería y la tarjeta de confianza son elementos de
	   rejilla sueltos y un `min-width` en los hijos no los alcanza. */
	.gk-product-layout { grid-template-columns: minmax(0, 1fr); }
}

.gk-talla-mod {
	border: 2px solid var(--color-greyka-onyx, #1A1C20);
	border-radius: 16px;
	padding: 12px;
	margin-bottom: 20px;
}

/* El rótulo de siempre queda para lectores de pantalla y para el mensaje de
   WhatsApp; a la vista, la pregunta lo sustituye. */
.gk-talla-mod .gk-talla-mod__rotulo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* La pregunta va en UNA línea; si hay talla guardada y no cabe al lado, la
   etiqueta baja. Sin talla guardada (lo más común) no gasta una línea. */
.gk-talla-mod__cab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
}

.gk-talla-mod__titulo {
	white-space: nowrap;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-greyka-onyx, #1A1C20);
}

.gk-talla-mod__guardada {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	color: var(--color-kinetic-blue, #2952FF);
	background: rgba(41, 82, 255, 0.08);
	border-radius: 999px;
	padding: 4px 8px;
}

.gk-talla-mod__guardada[hidden] { display: none; }

.gk-talla-mod .gk-talla-mod__chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
	gap: 6px;
	margin-top: 10px;
}

.gk-talla-mod .gk-chip-co {
	min-width: 0;
	min-height: 44px;
	height: auto;
	padding: 4px 2px;
	border: 1.5px solid #D9DCE1;
	border-radius: 8px;
	background-color: #FFFFFF;
	color: var(--color-greyka-onyx, #1A1C20);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.15;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.gk-talla-mod .gk-chip-co:hover { border-color: var(--color-greyka-onyx, #1A1C20); }

.gk-talla-mod .gk-chip-co:focus-visible {
	outline: 2px solid var(--color-kinetic-blue, #2952FF);
	outline-offset: 2px;
}

.gk-talla-mod .gk-chip-co .gk-size-swatch__eq { margin-top: 2px; }

.gk-talla-mod .gk-chip-co.gk-swatch-active {
	background-color: var(--color-greyka-onyx, #1A1C20);
	border-color: var(--color-greyka-onyx, #1A1C20);
	color: #FFFFFF;
}

.gk-talla-mod .gk-chip-co.gk-swatch-active .gk-size-swatch__eq { color: #FFFFFF; }

/* Agotada y «no hay»: se ven distintas pero SE PUEDEN PULSAR, porque pulsarlas
   enseña otros tenis en esa talla. `.gk-swatch-disabled` les quita los clics
   (pointer-events: none) y aquí se devuelven. */
.gk-talla-mod .gk-chip-co.gk-swatch-agotado,
.gk-talla-mod .gk-chip-co--sin {
	pointer-events: auto;
	cursor: pointer;
	opacity: 1;
	color: var(--color-text-muted, #6B7280);
	border-style: dashed;
	background-image: none;
}

.gk-talla-mod .gk-chip-co.gk-swatch-agotado::after { display: none; }

.gk-talla-mod .gk-chip-co--elegida {
	border: 2px solid var(--color-greyka-onyx, #1A1C20);
	color: var(--color-greyka-onyx, #1A1C20);
}

/* La respuesta */
.gk-talla-mod__res {
	margin-top: 12px;
	background: var(--color-vapor-white, #F4F5F7);
	border-radius: 12px;
	padding: 12px;
}

.gk-talla-mod__res[hidden] { display: none; }

.gk-talla-mod__res-titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	color: var(--color-greyka-onyx, #1A1C20);
}

.gk-talla-mod__check {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-kinetic-blue, #2952FF);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
}

.gk-talla-mod__datos {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 10px 0 0;
	text-align: center;
}

.gk-talla-mod__datos > div[hidden] { display: none; }

.gk-talla-mod__datos dt {
	font-size: 11px;
	color: #4B5563;
	margin: 0;
}

.gk-talla-mod__datos dd {
	margin: 2px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-greyka-onyx, #1A1C20);
}

/* «Este modelo no tiene 43» y otros que sí */
.gk-talla-mod__sin {
	margin-top: 12px;
	border: 1px dashed var(--color-text-muted, #6B7280);
	border-radius: 12px;
	padding: 12px;
}

.gk-talla-mod__sin[hidden] { display: none; }

.gk-talla-mod__sin-titulo {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-greyka-onyx, #1A1C20);
}

.gk-talla-mod__sin-texto {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #374151;
}

/* Lleva a «Otros tenis en tu talla»; los pares ya no van dentro del recuadro. */
.gk-talla-mod__sin-ver {
	font-weight: 700;
	color: var(--color-kinetic-blue, #2952FF);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gk-ficha-otros__lista {
	list-style: none;
	margin: 12px 0 0;
	padding: 0 0 4px;
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

/* Mide tu pie */
.gk-medir__pasos {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.5;
	color: #374151;
}

.gk-medir__consejo {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #4B5563;
}

.gk-medir .gk-pie { display: block; max-width: 100%; height: auto; }

.gk-talla-mod__medir { margin-top: 12px; }

.gk-talla-mod__medir > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-greyka-onyx, #1A1C20);
	cursor: pointer;
}

.gk-talla-mod__medir > summary::-webkit-details-marker { display: none; }

.gk-talla-mod__medir > summary::after {
	content: '+';
	font-size: 20px;
	font-weight: 400;
	color: #4B5563;
}

.gk-talla-mod__medir[open] > summary::after { content: '−'; }

.gk-talla-mod__medir > summary:focus-visible {
	outline: 2px solid var(--color-kinetic-blue, #2952FF);
	outline-offset: 2px;
}

.gk-medir__cuerpo {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding-bottom: 4px;
}

.gk-talla-mod__cambio {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid #E5E7EB;
	font-size: 13px;
	line-height: 1.45;
	color: #374151;
}

.gk-talla-mod__cambio strong { color: var(--color-greyka-onyx, #1A1C20); }

.gk-talla-mod .gk-size-guide-trigger-btn {
	background: none;
	border: 0;
	padding: 0;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-kinetic-blue, #2952FF);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* ── Colores con «hay / no hay en 40» ────────────────────────────────────── */
.gk-variant-group--pastillas .gk-color-swatches { gap: 6px; }

.gk-color-swatch.gk-color-pill {
	width: auto;
	height: auto;
	min-height: 44px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #D9DCE1;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--color-greyka-onyx, #1A1C20);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none;
}

.gk-color-swatch.gk-color-pill:hover { transform: none; border-color: var(--color-greyka-onyx, #1A1C20); }

.gk-color-swatch.gk-color-pill.gk-swatch-active {
	border: 2px solid var(--color-greyka-onyx, #1A1C20);
	padding: 0 9px;
	box-shadow: none;
}

.gk-color-pill__punto {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #D9DCE1;
	background: #D1D5DB;
}

.gk-color-pill__hay {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-kinetic-blue, #2952FF);
}

.gk-color-pill__hay:empty { display: none; }

/* Sin tu talla: tachado y «no hay en 40». La diagonal roja de
   `.gk-swatch-disabled` se pensó para un círculo y en una pastilla larga
   atraviesa el texto; aquí se tacha el nombre. */
.gk-color-swatch.gk-color-pill.gk-swatch-disabled,
.gk-color-swatch.gk-color-pill.gk-swatch-agotado {
	opacity: 1;
	background-image: none;
	color: var(--color-text-muted, #6B7280);
	border-style: dashed;
}

.gk-color-swatch.gk-color-pill.gk-swatch-disabled::after { display: none; }

.gk-color-pill.gk-swatch-disabled .gk-color-pill__nombre,
.gk-color-pill.gk-swatch-agotado .gk-color-pill__nombre { text-decoration: line-through; }

.gk-color-pill.gk-swatch-disabled .gk-color-pill__hay,
.gk-color-pill.gk-swatch-agotado .gk-color-pill__hay { color: var(--color-text-muted, #6B7280); }

.gk-color-pill.gk-swatch-disabled .gk-color-pill__punto { opacity: 0.5; }

/* ── Guía y dibujo en escritorio ─────────────────────────────────────────── */
.gk-talla-guia { display: none; }

@media (min-width: 1024px) {
	/* Aquí el dibujo va abierto junto a la tabla; el plegable sobra. */
	.gk-talla-mod__medir { display: none; }

	.gk-talla-guia { display: block; margin: 8px 0 36px; }

	.gk-talla-guia__fila {
		display: grid;
		grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}

	.gk-talla-guia__medir {
		display: grid;
		grid-template-columns: 176px minmax(0, 1fr);
		gap: 18px;
		align-items: center;
		/* Blanco y no vapor: la página ya es vapor y la tarjeta desaparecía. */
		background: #FFFFFF;
		border: 1px solid #E5E7EB;
		border-radius: 18px;
		padding: 22px;
	}

	.gk-talla-guia__tabla-wrap {
		background: #FFFFFF;
		border: 1px solid #E5E7EB;
		border-radius: 18px;
		padding: 18px 22px 8px;
	}

	.gk-talla-guia__h {
		margin: 0 0 10px;
		font-size: 18px;
		font-weight: 700;
		color: var(--color-greyka-onyx, #1A1C20);
	}

	.gk-talla-guia__medir .gk-medir__pasos { font-size: 14px; line-height: 1.55; }

	.gk-talla-guia__tabla {
		width: 100%;
		border: 0;
		border-collapse: collapse;
		margin: 0;
		font-size: 14px;
	}

	.gk-talla-guia__tabla th {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #4B5563;
		padding: 8px 10px;
		border: 0;
		border-bottom: 1px solid #E5E7EB;
		background: transparent;
		text-align: center;
	}

	.gk-talla-guia__tabla td {
		padding: 9px 10px;
		text-align: center;
		border: 0;
		border-bottom: 1px solid #E5E7EB;
		color: var(--color-greyka-onyx, #1A1C20);
	}

	.gk-talla-guia__tabla tr:last-child td { border-bottom: 0; }

	.gk-talla-guia__tabla tr.is-tuya td {
		background: rgba(41, 82, 255, 0.08);
		font-weight: 700;
	}

	.gk-talla-guia__tuya { display: none; }

	.gk-talla-guia__tabla tr.is-tuya .gk-talla-guia__tuya { display: inline; }
}

/* ── Preguntas: quién contesta ───────────────────────────────────────────── */
.gk-qna-quien {
	margin: 10px 0 16px;
	font-size: 13px;
	line-height: 1.5;
	color: #4B5563;
}

.gk-qna-quien .gk-qna-wa {
	display: flex;
	width: fit-content;
	align-items: center;
	min-height: 44px;
	margin-top: 8px;
	padding: 0 16px;
	border: 1px solid #128C7E;
	border-radius: 10px;
	color: #0B6E63;
	font-weight: 700;
	text-decoration: none;
}

.gk-qna-quien .gk-qna-wa:focus-visible {
	outline: 2px solid var(--color-kinetic-blue, #2952FF);
	outline-offset: 2px;
}

/* ── Otros tenis en tu talla ─────────────────────────────────────────────── */
/* Vive al final de `.gk-product-esp`, bajo la galería. En escritorio llena el
   hueco de esa columna, que queda mucho más corta que la de compra. En celular
   esa columna es `display: contents`, así que la sección es un elemento suelto
   de la rejilla: `order: 4` la pone tras el módulo de tranquilidad (3). */
.gk-ficha-otros { margin: 0; scroll-margin-top: 90px; }

.gk-ficha-otros[hidden] { display: none; }

.gk-ficha-otros__cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.gk-ficha-otros__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-greyka-onyx, #1A1C20);
}

.gk-ficha-otros__mas {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-kinetic-blue, #2952FF);
	text-decoration: none;
}

.gk-ficha-otros__carrusel { position: relative; }

.gk-ficha-otros__lista > li {
	flex: 0 0 160px;
	scroll-snap-align: start;
	margin: 0;
}

/* Las flechas solo en pantallas con ratón: en táctil se desliza con el dedo. */
.gk-ficha-otros .gk-ficha-otros__flecha { display: none; }

@media (max-width: 1023px) {
	/* Mismo margen que el módulo de tranquilidad, que va justo encima. */
	.gk-ficha-otros { order: 4; margin: 20px 15px 8px; }
}

@media (min-width: 768px) {
	.gk-ficha-otros__lista > li { flex-basis: 200px; }
}

@media (min-width: 1024px) {
	/* Mismo sangrado que el módulo de tranquilidad, que va justo encima. */
	.gk-ficha-otros { margin: 8px 20px 0; }

	.gk-ficha-otros__titulo { font-size: 20px; }

	/* Carrusel de tres a la vista en el ancho de la galería, como los de la
	   portada: se mueve con las flechas o deslizando, sin barra. */
	.gk-ficha-otros__lista {
		gap: 16px;
		scrollbar-width: none;
	}

	.gk-ficha-otros__lista::-webkit-scrollbar { display: none; }

	.gk-ficha-otros__lista > li { flex-basis: calc((100% - 32px) / 3); }

	.gk-ficha-otros .gk-ficha-otros__flecha {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 30%;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid #D9DCE1;
		border-radius: 50%;
		background: #fff;
		color: var(--color-greyka-onyx, #1A1C20);
		box-shadow: 0 2px 8px rgba(26, 28, 32, 0.12);
		cursor: pointer;
		z-index: 2;
	}

	.gk-ficha-otros .gk-ficha-otros__flecha:hover { background: var(--color-vapor-white, #F4F5F7); color: var(--color-greyka-onyx, #1A1C20); }
	.gk-ficha-otros .gk-ficha-otros__flecha:focus-visible { outline: 2px solid var(--color-kinetic-blue, #2952FF); outline-offset: 2px; }
	.gk-ficha-otros .gk-ficha-otros__flecha[hidden] { display: none; }
	.gk-ficha-otros__flecha--prev { left: -18px; }
	.gk-ficha-otros__flecha--next { right: -18px; }
}