/*
 * Ficha de producto: galería con miniaturas, columna de compra,
 * variaciones como botones y sección editorial.
 */

.pdp-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(var(--gutter), 5vw, 96px);
	padding-block: calc(var(--unit) * 10);
}

@media (max-width: 900px) {
	.pdp-grid {
		grid-template-columns: 1fr;
		padding-block: var(--gutter);
	}
}

/* ---------- Galería ---------- */

/* Miniaturas a la izquierda, imagen grande a la derecha (orden del DOM). */
.pdp-gallery {
	display: flex;
	flex-direction: row;
	gap: calc(var(--unit) * 2);
	align-items: flex-start;
}

.pdp-main-image {
	flex: 1;
	aspect-ratio: 4 / 5;
	max-height: min(72vh, 680px);
	overflow: hidden;
	background: var(--surface-container-low);
	cursor: zoom-in;
	position: relative;
}

.pdp-main-image::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 32px;
	height: 32px;
	background: color-mix(in srgb, var(--surface) 85%, transparent) center / 16px no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1c1c' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E");
	opacity: 0;
	transition: opacity var(--duration-fast) ease;
	pointer-events: none;
}

.pdp-main-image:hover::after {
	opacity: 1;
}

.pdp-main-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--duration-fast) ease;
}

/* Sticky en escritorio para acompañar el resumen */
@media (min-width: 901px) {
	.pdp-gallery {
		position: sticky;
		top: 128px;
		align-self: start;
	}
}

/* Lightbox */
.pdp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: rgb(27 28 28 / 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--duration-fast) ease;
}

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

.pdp-lightbox img {
	max-width: min(92vw, 1100px);
	max-height: 90vh;
	object-fit: contain;
	box-shadow: 0 32px 80px rgb(0 0 0 / 0.4);
}

.pdp-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	color: var(--inverse-on-surface);
	padding: 10px;
}

.pdp-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--inverse-on-surface);
	padding: 14px;
	opacity: 0.7;
	transition: opacity var(--duration-fast) ease;
}

.pdp-lightbox-nav:hover {
	opacity: 1;
}

.pdp-lightbox-prev {
	left: 12px;
}

.pdp-lightbox-next {
	right: 12px;
}

.pdp-lightbox-nav .svg-icon,
.pdp-lightbox-close .svg-icon {
	width: 26px;
	height: 26px;
}

.pdp-thumbs {
	display: flex;
	flex-direction: column;
	gap: calc(var(--unit) * 2);
	width: 96px;
	flex-shrink: 0;
}

.pdp-thumb {
	aspect-ratio: 5 / 6;
	overflow: hidden;
	border: 1px solid transparent;
	padding: 0;
	transition: border-color var(--duration-fast) ease;
}

.pdp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pdp-thumb.is-active,
.pdp-thumb:hover {
	border-color: var(--on-surface);
}

@media (max-width: 900px) {
	/* En vertical la foto grande va primero y las miniaturas debajo. */
	.pdp-gallery {
		flex-direction: column-reverse;
	}
	.pdp-thumbs {
		flex-direction: row;
		width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.pdp-thumbs::-webkit-scrollbar {
		display: none;
	}
	.pdp-thumb {
		width: 80px;
		flex-shrink: 0;
	}
}

/* ---------- Columna de compra ---------- */

.cleya-breadcrumb {
	color: var(--on-surface-variant);
	margin-bottom: calc(var(--unit) * 4);
}

.cleya-breadcrumb a:hover {
	color: var(--on-surface);
}

.crumb-sep {
	margin-inline: calc(var(--unit) * 1);
}

.pdp-title {
	margin-bottom: calc(var(--unit) * 1);
}

.pdp-price {
	margin: 0 0 calc(var(--unit) * 6);
}

.pdp-price del {
	opacity: 0.6;
	margin-right: 8px;
}

.pdp-price ins {
	text-decoration: none;
}

.pdp-section-label {
	color: var(--on-surface-variant);
	border-bottom: 1px solid var(--outline-variant);
	padding-bottom: calc(var(--unit) * 1);
	margin-bottom: calc(var(--unit) * 2);
}

.pdp-description {
	margin-bottom: calc(var(--unit) * 6);
}

.pdp-description-text {
	color: var(--on-surface-variant);
	line-height: 1.7;
}

/* ---------- Variaciones como botonera ---------- */

.pdp-cart table.variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: calc(var(--unit) * 3);
}

.pdp-cart table.variations td,
.pdp-cart table.variations th {
	padding: 0 0 calc(var(--unit) * 2);
	text-align: left;
}

.pdp-cart table.variations label {
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
}

/* El JS convierte cada select en botones; el select queda oculto pero operativo. */
.variation-buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(var(--unit) * 1);
	margin-top: calc(var(--unit) * 1);
}

.variation-buttons .variation-btn {
	border: 1px solid var(--outline-variant);
	padding: 12px 8px;
	font-family: var(--font-body);
	font-size: var(--text-body-md);
	text-align: center;
	background: transparent;
	color: var(--on-surface);
	transition: all var(--duration-fast) ease;
}

.variation-buttons .variation-btn:hover {
	border-color: var(--on-surface);
}

.variation-buttons .variation-btn.is-selected {
	background: var(--on-surface);
	border-color: var(--on-surface);
	color: var(--surface);
}

.variation-buttons .variation-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.pdp-cart select {
	border: 1px solid var(--outline-variant);
	padding: 10px;
	background: var(--surface);
}

.pdp-cart .variations select.is-enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.reset_variations {
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
	text-decoration: underline;
}

.woocommerce-variation-price {
	margin-bottom: calc(var(--unit) * 2);
	font-size: var(--text-body-lg);
}

.woocommerce-variation-availability {
	font-size: 14px;
	color: var(--on-surface-variant);
}

/* ---------- Cantidad + añadir ---------- */

.pdp-cart form.cart {
	margin-bottom: calc(var(--unit) * 4);
}

/*
 * La ficha vende de a una pieza; el carrito ajusta cantidades. Lleva
 * !important porque al elegir una talla el script de variaciones de
 * WooCommerce muestra el campo con un estilo en línea.
 */
.pdp-cart form.cart div.quantity {
	display: none !important;
}

.pdp-cart .single_add_to_cart_button {
	width: 100%;
	padding: 20px;
	letter-spacing: 0.2em;
	display: inline-flex;
	justify-content: center;
	gap: calc(var(--unit) * 1.5);
}

/* Flecha en SVG (máscara con currentColor: siempre visible sobre el fondo). */
.pdp-cart .single_add_to_cart_button::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M14 6.5 19.5 12 14 17.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M14 6.5 19.5 12 14 17.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--duration-fast) ease;
}

.pdp-cart .single_add_to_cart_button:hover::after {
	transform: translateX(4px);
}

.pdp-cart .single_add_to_cart_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pdp-cart .stock.out-of-stock {
	color: var(--error);
	font-size: 14px;
}

/* ---------- Garantías + meta ---------- */

.pdp-features {
	list-style: none;
	border-top: 1px solid var(--outline-variant);
	padding-top: calc(var(--unit) * 4);
	display: flex;
	flex-direction: column;
	gap: calc(var(--unit) * 2);
	margin-bottom: calc(var(--unit) * 4);
}

.pdp-features li {
	display: flex;
	align-items: center;
	gap: calc(var(--unit) * 1.5);
	color: var(--on-surface-variant);
}

.pdp-features .svg-icon {
	width: 21px;
	height: 21px;
	color: var(--primary);
}

.pdp-meta .product_meta {
	font-size: 12px;
	color: var(--outline);
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.pdp-meta a {
	color: var(--on-surface-variant);
}

/* ---------- Sección editorial (descripción larga) ---------- */

.pdp-editorial {
	background: var(--surface-container-low);
	padding-block: var(--section-gap);
	padding-inline: var(--margin-mobile);
}

.pdp-editorial-inner {
	max-width: 800px;
	margin-inline: auto;
	text-align: center;
}

.pdp-editorial-content {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(24px, 2vw + 12px, 40px);
	line-height: 1.4;
}

.pdp-editorial-content p + p {
	font-family: var(--font-body);
	font-style: normal;
	font-size: var(--text-body-lg);
	line-height: 2;
	color: var(--on-surface-variant);
	margin-top: calc(var(--unit) * 4);
}

@media (max-width: 900px) {
	.pdp-editorial {
		padding-block: var(--section-gap-mobile);
	}
}

/* ---------- Relacionados / Completa el Look ---------- */

.pdp-related {
	padding-block: var(--section-gap);
}

.pdp-related .related > h2,
.pdp-related .up-sells > h2 {
	font-size: var(--text-headline-md);
	margin-bottom: calc(var(--unit) * 6);
}

@media (max-width: 900px) {
	.pdp-related {
		padding-block: var(--section-gap-mobile);
	}
}

/* ---------- Elección de color y favorito ---------- */

/* Color y talla se leen como un solo bloque: el filete solo va arriba, y el
   selector de talla cierra el grupo. */
.pdp-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gutter);
	padding-block: calc(var(--unit) * 3);
	border-top: 1px solid var(--outline-variant);
	margin-bottom: 0;
}

.pdp-choice + .pdp-rating {
	margin-top: calc(var(--unit) * 1);
}

.pdp-cart {
	padding-top: calc(var(--unit) * 1);
}

.pdp-description {
	border-top: 1px solid var(--outline-variant);
	padding-top: calc(var(--unit) * 3);
}

.pdp-colors {
	display: flex;
	align-items: center;
	gap: calc(var(--unit) * 3);
}

.pdp-colors .color-dot {
	width: 26px;
	height: 26px;
}

/* Corazón: guarda la pieza sin pedir cuenta. */
.favorite-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--on-surface);
	cursor: pointer;
	transition: color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-expo);
}

.favorite-btn:hover {
	transform: scale(1.08);
}

.favorite-btn .svg-icon {
	width: 26px;
	height: 26px;
}

.favorite-btn.is-active {
	color: var(--accent-strong);
}

.favorite-btn.is-active .svg-icon path {
	fill: currentColor;
}

/* ---------- Valoración ---------- */

.pdp-rating {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--unit) * 1.5);
	margin-bottom: calc(var(--unit) * 3);
	color: var(--on-surface-variant);
	font-size: 14px;
}

.pdp-rating .star-rating {
	font-size: 14px;
	color: var(--accent);
}

.pdp-rating:hover .pdp-rating-count {
	color: var(--on-surface);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Reseñas ----------
 * WooCommerce trae su propio marcado y su hoja de estilos está desactivada en
 * este tema, así que la estrella, la lista y el formulario se dibujan aquí.
 * Las estrellas van como imagen repetida: el ancho en porcentaje que Woo pone
 * al span interior marca la parte llena, sin necesidad de JavaScript.
 */

.pdp-reviews {
	padding-block: var(--section-gap) 0;
}

.pdp-reviews #reviews {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: calc(var(--unit) * 6) calc(var(--gutter) * 2);
	align-items: start;
}

.pdp-reviews #comments {
	grid-column: 1;
}

.pdp-reviews #review_form_wrapper {
	grid-column: 2;
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	padding: calc(var(--unit) * 4);
}

@media (max-width: 900px) {
	.pdp-reviews #reviews {
		grid-template-columns: 1fr;
		gap: calc(var(--unit) * 5);
	}
	.pdp-reviews #comments,
	.pdp-reviews #review_form_wrapper {
		grid-column: 1;
	}
	.pdp-reviews #review_form_wrapper {
		padding: calc(var(--unit) * 3);
	}
}

.pdp-reviews #reviews h2 {
	font-family: var(--font-display);
	font-size: clamp(24px, 1.2vw + 18px, 34px);
	color: var(--heading);
	margin: 0 0 calc(var(--unit) * 3);
}

.pdp-reviews .comment-reply-title {
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--heading);
	margin: 0 0 calc(var(--unit) * 3);
}

.pdp-reviews .woocommerce-noreviews {
	color: var(--on-surface-variant);
	font-size: 15px;
	margin: 0;
	padding: calc(var(--unit) * 3);
	border: 1px dashed var(--outline-variant);
	text-align: center;
}

/* ---------- Lista de reseñas ---------- */

.pdp-reviews .commentlist {
	list-style: none;
	display: grid;
	gap: calc(var(--unit) * 2);
	margin: 0;
	padding: 0;
}

.pdp-reviews .commentlist .comment_container {
	display: flex;
	gap: calc(var(--unit) * 2.5);
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	padding: calc(var(--unit) * 3);
}

.pdp-reviews .commentlist img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	flex-shrink: 0;
}

.pdp-reviews .comment-text {
	flex: 1;
	min-width: 0;
}

.pdp-reviews .comment-text .meta {
	font-size: 14px;
	color: var(--on-surface-variant);
	margin: 0 0 calc(var(--unit) * 1);
}

.pdp-reviews .comment-text .meta strong {
	color: var(--on-surface);
	font-weight: 600;
}

.pdp-reviews .comment-text p {
	margin: 0;
	color: var(--on-surface-variant);
	line-height: 1.6;
}

.pdp-reviews .woocommerce-review__verified {
	color: var(--green);
	font-size: 13px;
}

/* ---------- Estrellas de una nota publicada ---------- */

.pdp-rating .star-rating,
.pdp-reviews .star-rating {
	position: relative;
	display: inline-block;
	width: 90px;
	height: 18px;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	margin-bottom: calc(var(--unit) * 1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfc4b6' d='M12 2.5l2.9 5.9 6.6 1-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-1z'/%3E%3C/svg%3E");
	background-size: 18px 18px;
	background-repeat: repeat-x;
}

.pdp-rating .star-rating span,
.pdp-reviews .star-rating span {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	overflow: hidden;
	text-indent: -9999px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%237d674f' d='M12 2.5l2.9 5.9 6.6 1-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-1z'/%3E%3C/svg%3E");
	background-size: 18px 18px;
	background-repeat: repeat-x;
}

/* ---------- Formulario ---------- */

.pdp-reviews .comment-form {
	display: grid;
	gap: calc(var(--unit) * 2);
	margin: 0;
}

.pdp-reviews .comment-form p {
	margin: 0;
}

.pdp-reviews .comment-form label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
	margin-bottom: 6px;
}

.pdp-reviews .comment-form input[type="text"],
.pdp-reviews .comment-form input[type="email"],
.pdp-reviews .comment-form textarea {
	width: 100%;
	border: 1px solid var(--outline-variant);
	border-radius: 0;
	background: var(--surface);
	padding: 13px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--on-surface);
}

.pdp-reviews .comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.pdp-reviews .comment-form input:focus,
.pdp-reviews .comment-form textarea:focus {
	outline: none;
	border-color: var(--accent-strong);
	box-shadow: 0 0 0 1px var(--accent-strong);
}

.pdp-reviews .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--unit) * 1);
}

.pdp-reviews .comment-form-cookies-consent label {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 13px;
	margin: 0;
	color: var(--on-surface-variant);
}

.pdp-reviews .form-submit input[type="submit"] {
	width: 100%;
	border: 1px solid var(--accent-strong);
	border-radius: 0;
	background: var(--accent-strong);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 16px 24px;
	cursor: pointer;
	transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.pdp-reviews .form-submit input[type="submit"]:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

/* ---------- Selector de puntuación ----------
 * WooCommerce entrega cinco enlaces con texto ("1 de 5 estrellas"…). Aquí el
 * texto se oculta y cada enlace se convierte en una estrella que se llena al
 * pasar el cursor; las de la derecha vuelven a apagarse.
 */

.pdp-reviews .comment-form-rating p.stars,
.pdp-reviews .comment-form-rating p.stars span {
	display: flex;
	gap: calc(var(--unit) * 0.5);
	margin: 0;
}

.pdp-reviews .comment-form-rating p.stars a {
	width: 28px;
	height: 28px;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	background-color: var(--outline-variant);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.5l2.9 5.9 6.6 1-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.5l2.9 5.9 6.6 1-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-1z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.pdp-reviews .comment-form-rating p.stars:hover a,
.pdp-reviews .comment-form-rating p.stars.selected a {
	background-color: var(--accent-strong);
}

.pdp-reviews .comment-form-rating p.stars a:hover ~ a,
.pdp-reviews .comment-form-rating p.stars.selected a.active ~ a {
	background-color: var(--outline-variant);
}

.pdp-reviews .comment-form-rating p.stars a:hover {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.pdp-reviews .comment-form-rating p.stars a {
		transition: none;
	}
	.pdp-reviews .comment-form-rating p.stars a:hover {
		transform: none;
	}
}