/**
 * Tandor Comercial by Nezweb — Galería de producto
 *
 * Los tokens toman primero las variables globales del sitio (Oxygen) y
 * caen a los valores de marca si no existen.
 */

.tcn-gallery {
	--tcn-primary: var(--primary-color, #0075bf);
	--tcn-primary-hover: var(--primary-hover-color, #005489);
	--tcn-accent: var(--tertiary-color, #fff100);
	--tcn-dark: var(--dark-color, #201e1e);
	--tcn-muted: var(--paragraph-color, #171717);
	--tcn-surface: #fff;
	/* Deliberadamente NO hereda `--border-color` del sitio: ahí vale #f3f4f6,
	   que sobre fondo blanco es invisible y deja la imagen "flotando". */
	--tcn-border: #dfe4ea;
	--tcn-radius: 10px;
	--tcn-gap: 10px;
	--tcn-ratio: 1 / 1;
	--tcn-thumbs: 5;
	--tcn-pad: 18px;
	/* En px a propósito: el sitio pone el root font-size en 10px, así que un
	   valor en rem quedaría a la mitad de lo esperado. */
	--tcn-max-stage: 480px;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--tcn-gap);
	width: 100%;
	/* El escenario es cuadrado, así que su ancho manda sobre su alto. Limitarlo
	   aquí es lo que impide que la imagen empuje las miniaturas fuera del pliegue.
	   Se ajusta por atributo del shortcode: max_width="560px". */
	max-width: min( 100%, var(--tcn-max-stage) );
	margin-inline: auto;
	box-sizing: border-box;
}

.tcn-gallery *,
.tcn-gallery *::before,
.tcn-gallery *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Escenario (imagen principal)
 * ---------------------------------------------------------------------- */

.tcn-gallery__stage {
	position: relative;
	background: var(--tcn-surface);
	border: 1px solid var(--tcn-border);
	border-radius: var(--tcn-radius);
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 );
	overflow: hidden;
}

/* Sin `scroll-behavior: smooth` a propósito: el JS elige entre salto suave
   (scrollTo) e instantáneo (scrollLeft) según el caso y la preferencia de
   movimiento reducido. Dejarlo aquí haría animado también el salto instantáneo. */
.tcn-gallery__track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tcn-gallery__track::-webkit-scrollbar {
	display: none;
}

.tcn-gallery__track:focus-visible {
	outline: 2px solid var(--tcn-primary);
	outline-offset: -2px;
}

.tcn-gallery__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	aspect-ratio: var(--tcn-ratio);
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--tcn-pad);
	overflow: hidden;
}

.tcn-gallery__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin: 0;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
	will-change: transform;
}

.tcn-gallery--fit-cover .tcn-gallery__slide {
	padding: 0;
}

.tcn-gallery--fit-cover .tcn-gallery__img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

/* Lupa al pasar el cursor — sólo con puntero fino y si hay hover real. */
@media (hover: hover) and (pointer: fine) {
	.tcn-gallery--zoom .tcn-gallery__slide {
		cursor: zoom-in;
	}

	.tcn-gallery--zoom .tcn-gallery__slide.is-magnifying .tcn-gallery__img {
		transform: scale(2);
		transform-origin: var(--tcn-ox, 50%) var(--tcn-oy, 50%);
		transition: transform 0.15s ease-out;
	}
}

/* -------------------------------------------------------------------------
 * Controles del escenario
 * ---------------------------------------------------------------------- */

.tcn-gallery__nav,
.tcn-gallery__expand,
.tcn-gallery__thumbs-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--tcn-border);
	background: rgba(255, 255, 255, 0.94);
	color: var(--tcn-dark);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.tcn-gallery__nav:hover,
.tcn-gallery__expand:hover,
.tcn-gallery__thumbs-nav:hover {
	background: var(--tcn-primary);
	border-color: var(--tcn-primary);
	color: #fff;
}

.tcn-gallery__nav:focus-visible,
.tcn-gallery__expand:focus-visible,
.tcn-gallery__thumb:focus-visible,
.tcn-gallery__thumbs-nav:focus-visible {
	outline: 2px solid var(--tcn-primary);
	outline-offset: 2px;
}

.tcn-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(32, 30, 30, 0.12);
	opacity: 0;
	pointer-events: none;
	z-index: 3;
}

.tcn-gallery__nav--prev {
	left: 12px;
}

.tcn-gallery__nav--next {
	right: 12px;
}

.tcn-gallery__stage:hover .tcn-gallery__nav,
.tcn-gallery__nav:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.tcn-gallery__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* `hidden` debe ganar al display de los botones. */
.tcn-gallery__nav[hidden],
.tcn-gallery__expand[hidden],
.tcn-gallery__thumbs-nav[hidden] {
	display: none;
}

.tcn-gallery__expand {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	z-index: 3;
}

.tcn-gallery__icon {
	width: 20px;
	height: 20px;
	display: block;
}

.tcn-gallery__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 5px 12px;
	border-radius: 3px;
	background: var(--tcn-accent);
	color: var(--tcn-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
}

.tcn-gallery__counter {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(32, 30, 30, 0.72);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.tcn-gallery__stage:hover .tcn-gallery__counter {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Miniaturas
 * ---------------------------------------------------------------------- */

.tcn-gallery__thumbs {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	transition: padding 0.2s ease;
}

/* Sólo cuando la tira desborda se reserva el carril de las flechas,
   así nunca tapan la primera ni la última miniatura. */
.tcn-gallery__thumbs.has-nav {
	padding-left: 34px;
	padding-right: 34px;
}

.tcn-gallery__thumbs-track {
	display: flex;
	gap: var(--tcn-gap);
	margin: 0;
	padding: 2px;
	list-style: none;
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tcn-gallery__thumbs-track::-webkit-scrollbar {
	display: none;
}

.tcn-gallery__thumb-item {
	flex: 0 0 calc((100% - (var(--tcn-thumbs) - 1) * var(--tcn-gap)) / var(--tcn-thumbs));
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.tcn-gallery__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 6px;
	background: var(--tcn-surface);
	border: 1px solid var(--tcn-border);
	border-radius: 6px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tcn-gallery__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.65;
	transition: opacity 0.18s ease;
}

.tcn-gallery__thumb:hover {
	border-color: var(--tcn-primary);
}

.tcn-gallery__thumb:hover .tcn-gallery__thumb-img {
	opacity: 1;
}

.tcn-gallery__thumb.is-active {
	border-color: var(--tcn-primary);
	box-shadow: inset 0 0 0 1px var(--tcn-primary);
}

.tcn-gallery__thumb.is-active .tcn-gallery__thumb-img {
	opacity: 1;
}

.tcn-gallery__thumbs-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(32, 30, 30, 0.14);
}

.tcn-gallery__thumbs-nav .tcn-gallery__icon {
	width: 16px;
	height: 16px;
}

.tcn-gallery__thumbs-nav--prev {
	left: 0;
}

.tcn-gallery__thumbs-nav--next {
	right: 0;
}

/* -------------------------------------------------------------------------
 * Miniaturas laterales (thumbs="left" | "right")
 * ---------------------------------------------------------------------- */

@media (min-width: 992px) {

	.tcn-gallery--thumbs-left,
	.tcn-gallery--thumbs-right {
		flex-direction: row;
		align-items: flex-start;
	}

	.tcn-gallery--thumbs-left .tcn-gallery__stage,
	.tcn-gallery--thumbs-right .tcn-gallery__stage {
		flex: 1 1 auto;
		min-width: 0;
	}

	.tcn-gallery--thumbs-left .tcn-gallery__thumbs,
	.tcn-gallery--thumbs-right .tcn-gallery__thumbs {
		flex: 0 0 92px;
		width: 92px;
	}

	.tcn-gallery--thumbs-left {
		flex-direction: row-reverse;
	}

	.tcn-gallery--thumbs-left .tcn-gallery__thumbs-track,
	.tcn-gallery--thumbs-right .tcn-gallery__thumbs-track {
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		scroll-snap-type: y proximity;
		max-height: 100%;
	}

	.tcn-gallery--thumbs-left .tcn-gallery__thumb-item,
	.tcn-gallery--thumbs-right .tcn-gallery__thumb-item {
		flex: 0 0 auto;
		width: 100%;
	}

	.tcn-gallery--thumbs-left .tcn-gallery__thumbs-nav,
	.tcn-gallery--thumbs-right .tcn-gallery__thumbs-nav {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Lightbox
 * ---------------------------------------------------------------------- */

.tcn-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	background: rgba(18, 17, 17, 0.94);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.tcn-lightbox.is-open {
	opacity: 1;
}

.tcn-lightbox__stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 56px 16px 8px;
	overflow: hidden;
}

.tcn-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: zoom-in;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
	user-select: none;
	-webkit-user-drag: none;
}

.tcn-lightbox.is-zoomed .tcn-lightbox__img {
	cursor: grab;
	transform: scale(2.2);
}

.tcn-lightbox__close,
.tcn-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.18s ease;
}

.tcn-lightbox__close:hover,
.tcn-lightbox__nav:hover {
	background: var(--primary-color, #0075bf);
}

.tcn-lightbox__close:focus-visible,
.tcn-lightbox__nav:focus-visible,
.tcn-lightbox__thumb:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.tcn-lightbox__close {
	top: 14px;
	right: 14px;
	z-index: 2;
}

.tcn-lightbox__nav--prev {
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.tcn-lightbox__nav--next {
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.tcn-lightbox__nav[disabled] {
	opacity: 0.25;
	pointer-events: none;
}

.tcn-lightbox__icon {
	width: 22px;
	height: 22px;
}

.tcn-lightbox__caption {
	flex: 0 0 auto;
	padding: 6px 16px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 13px;
	text-align: center;
	min-height: 1.4em;
}

.tcn-lightbox__thumbs {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	justify-content: center;
	padding: 10px 16px 18px;
	overflow-x: auto;
	scrollbar-width: none;
}

.tcn-lightbox__thumbs::-webkit-scrollbar {
	display: none;
}

.tcn-lightbox__thumb {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	padding: 3px;
	border: 2px solid transparent;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.08);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.18s ease, opacity 0.18s ease;
	opacity: 0.6;
}

.tcn-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.tcn-lightbox__thumb:hover,
.tcn-lightbox__thumb.is-active {
	opacity: 1;
	border-color: var(--tertiary-color, #fff100);
}

.tcn-lightbox__counter {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
}

body.tcn-lightbox-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1168px) {

	.tcn-gallery {
		--tcn-thumbs: 4;
	}
}

@media (max-width: 991px) {

	.tcn-gallery {
		--tcn-pad: 14px;
	}
}

@media (max-width: 767px) {

	.tcn-gallery {
		--tcn-thumbs: 4;
		--tcn-gap: 8px;
		--tcn-pad: 12px;
	}

	/* En táctil el swipe es la interacción natural: fuera flechas, dentro contador. */
	.tcn-gallery__nav {
		display: none;
	}

	.tcn-gallery__counter {
		opacity: 1;
	}

	.tcn-gallery__expand {
		width: 34px;
		height: 34px;
		top: 10px;
		right: 10px;
	}

	.tcn-gallery__thumbs-nav {
		display: none;
	}

	.tcn-lightbox__nav {
		width: 40px;
		height: 40px;
	}

	.tcn-lightbox__thumbs {
		justify-content: flex-start;
	}
}

@media (max-width: 479px) {

	.tcn-gallery {
		/* Media miniatura asomando: pista visual de que hay más. */
		--tcn-thumbs: 3.5;
	}
}

@media (prefers-reduced-motion: reduce) {

	.tcn-gallery__track,
	.tcn-gallery__thumbs-track {
		scroll-behavior: auto;
	}

	.tcn-gallery__img,
	.tcn-lightbox,
	.tcn-lightbox__img {
		transition: none;
	}
}