/* =============================================================================
   Ficha de producto (templates/single-product.html, .pdp de docs/ux/ficha.html)
   -----------------------------------------------------------------------------
   Se carga solo en la ficha (inc/product-page.php). Zona de compra en dos columnas
   (galería y panel de compra, que queda fijo al bajar si cabe en la pantalla),
   historia y ficha técnica, contenido del pack y relacionados. Hasta 1023 px todo
   va en una columna y aparece la barra de compra fija.
   Solo tokens de theme.json: los px quedan en anchos, altos y @media.
   ============================================================================= */

.ws-pdp-page {
	--ws-pdp-gap: var(--wp--preset--spacing--90);
	--ws-pdp-line-width: 1px; /* bordes y contornos */
	--ws-pdp-quote-width: 2px; /* línea de la cita */
	--ws-pdp-spec-label-width: 140px; /* columna de etiquetas de la ficha técnica */
	padding-block-start: 0; /* las migas quedan a la misma distancia del header que en el archivo de productos */
}

/* ---- Zona de compra ------------------------------------------------------------ */
.ws-pdp-page .ws-pdp {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--ws-pdp-gap);
	align-items: start;
}

/* Galería (Product Gallery de WooCommerce): miniaturas a la izquierda (abajo desde 600 px, lo
   resuelve WooCommerce con el porcentaje de la plantilla) y la foto cuadrada. */
.ws-pdp .ws-pdp-gallery {
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}

.ws-pdp-gallery .wc-block-product-gallery-large-image {
	border-radius: var(--wp--preset--border-radius--xx-large);
	overflow: hidden;
	background: var(--wp--preset--color--surface-sunken);
}

.ws-pdp-gallery .wc-block-product-gallery-thumbnails__thumbnail {
	border-radius: var(--wp--preset--border-radius--medium);
	overflow: hidden;
	border: var(--ws-pdp-line-width) solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface-sunken);
}

.ws-pdp-gallery .wc-block-product-gallery-thumbnails__thumbnail img {
	border-radius: 0;
}

.ws-pdp-gallery .wc-block-product-gallery-thumbnails__thumbnail--active,
.ws-pdp-gallery .wc-block-product-gallery-thumbnails__thumbnail:has(img[aria-current="true"]) {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 var(--ws-pdp-line-width) var(--wp--preset--color--primary);
}

.ws-pdp-gallery .wc-block-product-gallery-thumbnails__thumbnail__overlay {
	display: none;
}

/* Distinciones arriba a la izquierda y descuento arriba a la derecha, como en la card, a la misma distancia del
   borde de la foto. La capa de WooCommerce sobre la foto (inner-blocks) es una columna: el descuento sale de ella,
   porque bajaba según cuántas distinciones tuviera el producto. */
.ws-pdp-gallery .wc-block-product-gallery-large-image__inner-blocks {
	inset: var(--wp--preset--spacing--40);
	width: auto;
	height: auto;
}

.ws-pdp-gallery .wc-block-product-gallery-large-image__inner-blocks > .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	margin: 0;
}

.ws-pdp-gallery .wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
	position: static;
	margin: 0;
}

/* Hasta 1023 px la card saca las distinciones a una capa propia (product-card.css): en la galería, a la misma
   distancia del borde que el descuento. */
.ws-pdp-gallery .ws-product-badges .ws-flags {
	top: 0;
	left: 0;
}

/* Panel de compra: fijo al bajar mientras se lee la ficha, si cabe en la pantalla. */
.ws-pdp .ws-pdp__buybox {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--header--row-height) + var(--wp--custom--header--nav-height) + var(--wp--preset--spacing--50));
}

.ws-pdp__buybox > * {
	margin-block: 0;
}

@media (max-height: 820px) {
	.ws-pdp .ws-pdp-gallery {
		width: 100%;
		max-width: 600px;
		margin-inline: auto;
	}

	.ws-pdp .ws-pdp__buybox {
		position: static;
	}
}

/* Nombre con el degradado de marca (.ws-gradient-text de theme.css), como en docs/ux. */
.ws-pdp .ws-pdp__title {
	display: inline-block;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
}

/* Bajada, composición del mix y link a sus vinos. */
.ws-pdp-subtitle > * {
	margin: 0;
}

.ws-pdp-subtitle__text {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lead);
}

.ws-pdp-subtitle .ws-pdp-subtitle__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-block-start: var(--wp--preset--spacing--30);
}

.ws-pdp-subtitle__chips .ws-chip {
	height: 30px;
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
}

.ws-pdp-subtitle .ws-pdp-subtitle__summary {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
}

.ws-pdp-subtitle__link {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.ws-pdp-subtitle__link:hover {
	text-decoration: underline;
}

/* Precio: monto grande, su referencia y el ahorro de la caja. */
.ws-pdp-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: var(--ws-pdp-line-width) solid var(--wp--preset--color--border);
}

.ws-pdp-price > p {
	margin: 0;
}

.ws-pdp-price__amount {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--none);
}

.ws-pdp-price__amount del {
	margin-inline-end: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
}

.ws-pdp-price__amount ins {
	text-decoration: none;
}

.ws-pdp-price__note {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body-small);
}

.ws-pdp-price .ws-pdp-price__savings {
	flex-basis: 100%;
	color: var(--wp--preset--color--success);
	font-size: var(--wp--preset--font-size--body-small);
}

/* Formatos: cada uno es un link a su ficha; el actual va marcado. */
.ws-pdp-formats {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ws-pdp-formats > p {
	margin: 0;
}

.ws-pdp-formats__label {
	margin-block-end: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}

.ws-pdp-formats .ws-pdp-formats__label {
	margin-block-end: var(--wp--preset--spacing--30);
}

.ws-pdp-formats__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-auto-flow: column;
	gap: var(--wp--preset--spacing--30);
}

.ws-format {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: var(--ws-pdp-line-width) solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--preset--border-radius--large);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	transition: border-color var(--wp--custom--transition--fast);
}

.ws-format:hover {
	border-color: var(--wp--preset--color--primary);
}

.ws-format[aria-current="page"] {
	border-color: var(--wp--preset--color--foreground);
	box-shadow: 0 0 0 var(--ws-pdp-line-width) var(--wp--preset--color--foreground);
}

.ws-format__name {
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 700;
}

.ws-format__detail {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.ws-format__price {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 700;
}

.ws-format__savings,
.ws-format__note {
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.ws-format__savings {
	color: var(--wp--preset--color--success);
}

.ws-format__note {
	color: var(--wp--preset--color--muted);
}

.ws-pdp-formats .ws-pdp-formats__others {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ws-pdp-formats__others a,
.ws-pdp-also a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}

.ws-pdp-formats__others a:hover,
.ws-pdp-also a:hover {
	text-decoration: underline;
}

/* Compra: cantidad y botón de alto completo; abajo, el resultado y el stock. */
.ws-pdp-buy {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ws-buy--large {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
}

.ws-buy--large .ws-qty {
	height: 52px;
}

.ws-buy--large .ws-qty button {
	width: 42px;
}

.ws-buy--large .ws-qty output {
	min-width: 28px;
	font-size: var(--wp--preset--font-size--body);
}

.ws-buy--large .ws-buy__add--large {
	min-height: 52px;
	font-size: var(--wp--preset--font-size--body-small);
}

.ws-pdp-buy .ws-unavailable {
	display: block;
	font-size: var(--wp--preset--font-size--body);
}

.ws-pdp-stock {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ws-pdp-stock__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--success);
}

.ws-pdp-stock--onbackorder .ws-pdp-stock__dot {
	background: var(--wp--preset--color--warning);
}

/* Beneficios (patrón em-wine-store/product-perks): íconos core/icon con la colección del theme. */
.ws-pdp__buybox .ws-perks {
	margin-block-start: var(--wp--preset--spacing--50);
	border: var(--ws-pdp-line-width) solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--x-large);
	background: var(--wp--preset--color--surface);
}

.ws-pdp__buybox .ws-pdp-also {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Historia y ficha técnica -------------------------------------------------- */
.ws-pdp-page .ws-pdp-story {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--ws-pdp-gap);
	align-items: start;
	margin-block-start: var(--wp--preset--spacing--100);
}

.ws-pdp-story.is-single-column {
	grid-template-columns: minmax(0, 1fr);
}

.ws-pdp-story__text > *,
.ws-pdp-story__sheet > * {
	margin-block: 0;
}

.ws-pdp-story__text p {
	max-width: 60ch;
	margin-block: var(--wp--preset--spacing--40) 0;
}

.ws-pdp-story .ws-pdp-story__title {
	font-size: var(--wp--preset--font-size--x-large);
}

.ws-pdp-story .ws-pdp-story__quote {
	margin: var(--wp--preset--spacing--50) 0;
	padding: 0 0 0 var(--wp--preset--spacing--40);
	border-left: var(--ws-pdp-quote-width) solid var(--wp--preset--color--primary);
}

.ws-pdp-story__quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--subtitle);
	line-height: var(--wp--custom--line-height--normal);
}

.ws-pdp-story__quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
}

.ws-pdp-story .ws-pdp-story__subtitle {
	margin-block: var(--wp--preset--spacing--60) 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0;
}

.ws-pdp-story__subtitle + p {
	margin-block-start: var(--wp--preset--spacing--10);
}

.ws-pdp-story .ws-pdp-story__sheet-title {
	margin-block-end: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.ws-spec {
	margin: 0;
	border: var(--ws-pdp-line-width) solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--x-large);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.ws-spec > div {
	display: grid;
	grid-template-columns: var(--ws-pdp-spec-label-width) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-bottom: var(--ws-pdp-line-width) solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--body-small);
}

.ws-spec > div:last-child {
	border-bottom: 0;
}

.ws-spec dt {
	color: var(--wp--preset--color--muted);
}

.ws-spec dd {
	margin: 0;
	font-weight: 600;
}

/* ---- Qué trae el pack y relacionados ------------------------------------------- */
.ws-pdp-page .ws-pack-contents,
.ws-pdp-page .ws-pdp-related {
	margin-block-start: var(--wp--preset--spacing--100);
}

.ws-pack-contents__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.ws-pdp-related .wp-block-woocommerce-product-collection {
	margin: 0;
}

/* Relacionados en una sola fila: lo que no cabe en la fila según el ancho se oculta
   (cards compactas: 6 → 5 → 4 → 2 por fila; packs: 4 → 3 → 1). */

/* ---- Barra de compra fija (≤1023 px) --------------------------------------------- */
.ws-buybar {
	display: none;
}

/* ---- Desktop angosto (1024–1279 px) ---------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
	.ws-pdp-page {
		--ws-pdp-gap: var(--wp--preset--spacing--70);
	}

	.ws-pdp .ws-pdp__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.ws-pdp-related:not(.ws-pdp-related--packs) .wc-block-product:nth-child(n+6) {
		display: none;
	}
}

/* ---- Compacto (≤1023 px): una columna y barra de compra fija ---------------------- */
@media (max-width: 1023px) {
	.ws-pdp-page .ws-pdp,
	.ws-pdp-page .ws-pdp-story {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70);
	}

	.ws-pdp .ws-pdp-gallery {
		width: 100%;
		max-width: 600px;
		margin-inline: auto;
	}

	.ws-pdp .ws-pdp__buybox {
		position: static;
		width: 100%;
		max-width: 640px;
		margin-inline: auto;
	}

	.ws-pdp-page .ws-pdp-story {
		margin-block-start: var(--wp--preset--spacing--90);
	}

	.ws-pdp-related:not(.ws-pdp-related--packs) .wc-block-product:nth-child(n+5) {
		display: none;
	}

	.ws-buybar {
		position: fixed;
		inset: auto 0 0;
		z-index: 140;
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom));
		border-top: var(--ws-pdp-line-width) solid var(--wp--preset--color--border-strong);
		background: var(--wp--preset--color--surface);
		transform: translateY(110%);
		transition: transform var(--wp--custom--transition--base) ease;
	}

	/* La sombra, solo a la vista: oculta abajo de la pantalla, su difuminado asomaba sobre el contenido. */
	.ws-buybar.is-visible {
		box-shadow: var(--wp--preset--shadow--drawer);
		transform: none;
	}

	.ws-buybar__info {
		flex: 1;
		min-width: 0;
	}

	.ws-buybar__info > p {
		margin: 0;
	}

	.ws-buybar__name {
		overflow: hidden;
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		letter-spacing: var(--wp--custom--letter-spacing--heading);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ws-buybar__detail,
	.ws-buybar__status {
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}

	.ws-buybar__status:empty {
		display: none;
	}

	.ws-buybar__status:not(:empty) {
		color: var(--wp--preset--color--success);
	}

	.ws-buybar__status.is-error {
		color: var(--wp--preset--color--danger);
	}

	.ws-buybar__status:not(:empty) + .ws-buybar__detail,
	.ws-buybar__detail:has(+ .ws-buybar__status:not(:empty)) {
		display: none;
	}

	/* El footer no queda tapado por la barra. */
	body:has(.ws-buybar.is-visible) .wp-site-blocks {
		--ws-pdp-buybar-height: 76px;
		padding-block-end: var(--ws-pdp-buybar-height);
	}
}

/* Tablet y teléfono en horizontal (poco alto): foto y panel de compra lado a lado, como en desktop. En una
   columna, la foto llenaba la primera pantalla y el nombre, el precio y "Agregar al carro" quedaban abajo. */
@media (min-width: 700px) and (max-width: 1023px) and (orientation: landscape) and (max-height: 600px) {
	.ws-pdp-page .ws-pdp {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: var(--wp--preset--spacing--60);
	}

	.ws-pdp .ws-pdp-gallery,
	.ws-pdp .ws-pdp__buybox {
		max-width: none;
		margin-inline: 0;
	}
}

/* ---- Tablet vertical (700–1023 px) -------------------------------------------------- */
@media (min-width: 700px) and (max-width: 1023px) {
	.ws-pack-contents__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ws-pdp-related--packs .wc-block-product:nth-child(n+4) {
		display: none;
	}
}

/* ---- Mobile (≤699 px) ----------------------------------------------------------------- */
@media (max-width: 699px) {
	.ws-pdp .ws-pdp__title {
		font-size: var(--wp--preset--font-size--large);
	}

	.ws-pdp-subtitle__text {
		font-size: var(--wp--preset--font-size--body);
	}

	.ws-pdp-price__amount {
		font-size: var(--wp--preset--font-size--large);
	}

	.ws-pdp-formats__list {
		gap: var(--wp--preset--spacing--20);
	}

	.ws-format {
		padding: var(--wp--preset--spacing--30);
	}

	.ws-pdp-story__quote p {
		font-size: var(--wp--preset--font-size--lead);
	}

	.ws-pdp-page {
		--ws-pdp-spec-label-width: 104px;
	}

	.ws-spec > div {
		padding: var(--wp--preset--spacing--30);
	}

	.ws-pack-contents__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
	}
}