/* Ficha de producto (diseño aprobado: ficha.html y ficha-celular.html, con los cambios del 9 y el 14-oct). */
.product-single,
.product-single::before,
.product-single::after,
.product-single *,
.product-single *::before,
.product-single *::after {
	box-sizing: border-box;
}

.product-single {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Parte de arriba, sobre blanco: galería (7 columnas) e información (4 columnas, desde la 9). El padding de arriba
   incluye el alto del header fijo. */
.product-single__main {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: start;
	padding-top: 136px;
	padding-bottom: 72px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.product-single__crumbs {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	row-gap: 4px;
	margin-bottom: 32px;
	color: var(--wp--preset--color--muted);
}

.product-single__crumbs .text-link {
	color: inherit;
}

.product-single__crumb-current {
	color: var(--wp--preset--color--black);
}

/* Galería: la foto grande y las miniaturas abren el lightbox (no cambian la foto en el lugar). Cursor de lupa y el
   zoom leve de la foto dentro de su recuadro (criterio, punto 5). Sin borde en la miniatura. */
.product-single__gallery {
	grid-column: 1 / span 7;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.product-single__photo,
.product-single__thumb {
	display: block;
	overflow: hidden;
	border-radius: 2px;
	background-color: var(--wp--preset--color--light-gray);
	cursor: zoom-in;
}

.product-single__photo {
	height: 560px;
}

.product-single__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}

/* Sin foto: el mismo criterio que la tarjeta, un poco más grande por el tamaño del recuadro. */
.product-single__placeholder {
	width: clamp(56px, 12%, 96px);
	height: auto;
	opacity: 0.06;
}

.product-single__photo-image,
.product-single__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	transition: transform var(--windtoys-transition);
}

.product-single__photo-image {
	filter: brightness(1.03);
}

.product-single__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.product-single__thumb {
	height: 120px;
}

a.product-single__photo:hover .product-single__photo-image,
a.product-single__photo:focus-visible .product-single__photo-image,
.product-single__thumb:hover img,
.product-single__thumb:focus-visible img {
	transform: scale(1.03);
}

/* Información. */
.product-single__info {
	grid-column: 9 / span 4;
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding-top: 8px;
}

.product-single__meta {
	display: flex;
	gap: 16px;
	color: var(--wp--preset--color--line-dark);
}

.product-single__title {
	margin: -12px 0 0;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 96px;
	font-weight: 700;
	line-height: 0.9;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.product-single__summary {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	color: var(--wp--preset--color--line-dark);
}

.product-single__summary p {
	margin: 0;
}

.product-single__summary p + p {
	margin-top: 12px;
}

.product-single__label {
	color: var(--wp--preset--color--line-dark);
}

/* Talles, precio y estado. */
.product-single__buy {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.product-single__sizes {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(10, 10, 10, 0.14);
}

.product-single__size-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Talles solo texto (9-oct): el elegido en negro, los sin stock en gris. En hover solo cambia el color. */
.product-single__size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 72px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid rgba(10, 10, 10, 0.2);
	border-radius: 2px;
	background-color: transparent;
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--windtoys-transition), color var(--windtoys-transition), border-color var(--windtoys-transition);
}

.product-single__size.is-out {
	border-color: rgba(10, 10, 10, 0.14);
	color: var(--wp--preset--color--muted);
}

.product-single__size:hover,
.product-single__size:focus-visible,
.product-single__size.is-selected {
	border-color: var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* Dos filas, etiqueta a la izquierda y monto a la derecha (4-nov): el precio de lista y, debajo, el descuento con el
   monto de contado, más chico. Sin contado, la segunda fila se oculta. */
.product-single__price {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid rgba(10, 10, 10, 0.14);
}

.product-single__price-row,
.product-single__cash-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.product-single__cash-row[hidden] {
	display: none;
}

.product-single__price-value {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* El descuento, en el gris de las etiquetas; si no entra, pasa a dos renglones y el monto queda a la derecha. */
.product-single__price-discount {
	font-size: var(--wp--preset--font-size--small);
	line-height: 20px;
	color: var(--wp--preset--color--line-dark);
}

.product-single__price-cash {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* El estado va cerca del precio, pero a 18px (4-nov; antes 10px): con las dos filas de precio separadas por 12px, a
   10px parecía una tercera fila. Sin línea de precio, lleva la línea de arriba. */
.product-single__price + .product-single__status {
	margin-top: -2px;
}

.product-single__sizes + .product-single__status,
.product-single__buy > .product-single__status:first-child {
	padding-top: 20px;
	border-top: 1px solid rgba(10, 10, 10, 0.14);
}

.product-single__cta .button {
	justify-content: center;
	width: 100%;
}

/* Abajo, sobre gris: descripción (5 columnas) y características (6, desde la 7). */
.product-single__details {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 72px;
	padding-top: 72px;
	padding-bottom: 72px;
	background-color: var(--wp--preset--color--light-gray);
	color: var(--wp--preset--color--black);
}

.product-single__description,
.product-single__features,
.product-single__specs,
.product-single__video {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.product-single__details .mono-label {
	color: var(--wp--preset--color--line-dark);
}

.product-single__description {
	grid-column: 1 / span 5;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.product-single__description p {
	margin: 0;
}

.product-single__features {
	grid-column: 7 / span 6;
}

/* Sin descripción, las características ocupan su lugar. */
.product-single__features:first-child {
	grid-column: 1 / span 6;
}

.product-single__features ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-single__features li {
	padding: 14px 0;
	border-top: 1px solid rgba(10, 10, 10, 0.14);
	font-size: 17px;
	font-weight: 400;
}

.product-single__specs,
.product-single__video {
	grid-column: 1 / -1;
}

.product-single__specs table {
	width: 100%;
	border-collapse: collapse;
}

.product-single__specs tr {
	border-top: 1px solid rgba(10, 10, 10, 0.14);
}

.product-single__specs th,
.product-single__specs td {
	padding: 14px 0;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	text-align: left;
	vertical-align: top;
}

.product-single__specs th {
	width: 40%;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--line-dark);
}

.product-single__specs td {
	font-size: var(--wp--preset--font-size--small);
}

.product-single__video-frame {
	max-width: 960px;
}

.product-single__video-frame iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Relacionados: misma tarjeta que en el archivo, en 4 columnas. */
.product-single__related {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-top: 72px;
	padding-bottom: 72px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.product-single__related-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 48px;
	font-weight: 700;
	line-height: 0.95;
	text-transform: uppercase;
}

.product-single__related-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 32px;
	row-gap: 56px;
}

/* Lightbox (14-oct, criterio de interacciones, punto 5): fondo negro al 80 % con desenfoque de 14px, la foto
   centrada con esquinas de 2px y el contador abajo. Botones de 52px sin fondo que en hover invierten. Las flechas son
   la flecha única (la de atrás, espejada) y se corren 4px hacia donde apuntan. */
.product-single__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(10, 10, 10, 0.8);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--windtoys-transition), visibility var(--windtoys-transition);
}

.product-single__lightbox[hidden] {
	display: none;
}

.product-single__lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.product-single__lightbox-image {
	display: block;
	width: auto;
	height: auto;
	max-width: min(1200px, 80vw);
	max-height: 84vh;
	object-fit: contain;
	border-radius: 2px;
}

.product-single__lightbox-button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background-color: transparent;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color var(--windtoys-transition), color var(--windtoys-transition);
}

.product-single__lightbox-button:hover,
.product-single__lightbox-button:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.product-single__lightbox-button svg {
	transition: transform var(--windtoys-transition);
}

.product-single__lightbox-close {
	top: 24px;
	right: 24px;
}

.product-single__lightbox-prev,
.product-single__lightbox-next {
	top: 50%;
	margin-top: -26px;
}

.product-single__lightbox-prev {
	left: 24px;
}

.product-single__lightbox-next {
	right: 24px;
}

.product-single__lightbox-prev svg {
	transform: scaleX(-1);
}

.product-single__lightbox-prev:hover svg,
.product-single__lightbox-prev:focus-visible svg {
	transform: scaleX(-1) translateX(4px);
}

.product-single__lightbox-next:hover svg,
.product-single__lightbox-next:focus-visible svg {
	transform: translateX(4px);
}

.product-single__lightbox-count {
	position: absolute;
	right: 0;
	bottom: 28px;
	left: 0;
	text-align: center;
	color: var(--wp--preset--color--muted-on-dark);
}

@media (max-width: 1199px) {
	.product-single__gallery {
		grid-column: 1 / span 6;
	}

	.product-single__info {
		grid-column: 8 / span 5;
	}

	.product-single__title {
		font-size: 72px;
	}

	/* En 4 columnas la tarjeta queda angosta para "Desde $" y "Ver más": van 3, sin dejar una sola en otra fila. */
	.product-single__related-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.product-single__related-grid > :nth-child(n+4) {
		display: none;
	}
}

/* Celular (ficha-celular.html): todo en una columna. El botón de WhatsApp va en una barra fija abajo. */
@media (max-width: 1023px) {
	.product-single__main {
		display: flex;
		flex-direction: column;
		gap: 28px;
		padding-top: 88px;
		padding-bottom: 56px;
	}

	.product-single__crumbs {
		margin-bottom: 0;
	}

	.product-single__gallery {
		gap: 8px;
		width: 100%;
	}

	/* Las proporciones del diseño de celular (335 × 300 y miniaturas de 78 × 72), así acompañan el ancho en tablet. */
	.product-single__photo {
		height: auto;
		aspect-ratio: 335 / 300;
	}

	.product-single__thumbs {
		gap: 8px;
	}

	.product-single__thumb {
		height: auto;
		aspect-ratio: 78 / 72;
	}

	.product-single__info {
		gap: 16px;
		width: 100%;
		padding-top: 0;
	}

	.product-single__meta {
		gap: 12px;
	}

	.product-single__title {
		margin-top: 0;
		font-size: 64px;
	}

	.product-single__summary {
		font-size: var(--wp--preset--font-size--normal);
	}

	.product-single__buy {
		margin-top: 12px;
	}

	.product-single__sizes {
		padding-top: 24px;
	}

	.product-single__size-list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.product-single__size {
		min-width: 0;
	}

	.product-single__price-value {
		font-size: 36px;
	}

	.product-single__cta {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 15;
		padding: 12px var(--windtoys-gutter);
		border-top: 1px solid rgba(10, 10, 10, 0.14);
		background-color: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	.product-single__details {
		display: flex;
		flex-direction: column;
		gap: 48px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.product-single__description,
	.product-single__features {
		gap: 16px;
	}

	.product-single__description {
		font-size: var(--wp--preset--font-size--normal);
	}

	.product-single__features li {
		padding: 12px 0;
		font-size: var(--wp--preset--font-size--normal);
	}

	.product-single__related {
		gap: 32px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.product-single__related .section-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.product-single__related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
		row-gap: 40px;
	}

	/* En dos columnas vuelven los cuatro (dos filas de dos). */
	.product-single__related-grid > :nth-child(n+4) {
		display: flex;
	}

	.product-single__lightbox-image {
		max-width: calc(100vw - 40px);
		max-height: 72vh;
	}

	.product-single__lightbox-close {
		top: 12px;
		right: 12px;
	}

	.product-single__lightbox-prev,
	.product-single__lightbox-next {
		top: auto;
		bottom: 16px;
		margin-top: 0;
	}

	.product-single__lightbox-prev {
		left: 12px;
	}

	.product-single__lightbox-next {
		right: 12px;
	}

	.product-single__lightbox-count {
		bottom: 34px;
	}
}