/* Ficha de producto. La rejilla es la del div.product de WooCommerce: foto y compra arriba, y debajo, a lo
   ancho, la descripción, las preguntas, las valoraciones y los relacionados. */

.ov-woo__migas {
	padding-top: clamp(18px, 2.5vw, 28px);
}

.ov-woo__avisos:empty,
.ov-woo__avisos:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info)) {
	display: none;
}

.ov-woo__avisos {
	padding-top: 12px;
}

.ov-ficha {
	display: grid;
	grid-template-columns: minmax(var(--ov-medianil), 1fr) minmax(0, 620px) minmax(0, 620px) minmax(var(--ov-medianil), 1fr);
	align-items: start;
	padding-top: clamp(12px, 2vw, 24px);
}

.ov-ficha > * {
	grid-column: 2 / 4;
	min-width: 0;
}

/* La foto no se pega al bajar: en la rejilla de la ficha, una foto sticky se quedaba fija encima de la
   descripción y los relacionados hasta el final de la página. */
.ov-ficha__foto {
	grid-column: 2;
	position: relative;
	margin: 0 clamp(24px, 4vw, 64px) 0 0;
	background: var(--ov-crema-clara);
	border: var(--ov-filete);
	aspect-ratio: 1;
	overflow: hidden;
}

.ov-ficha__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ov-ficha__foto .ov-sellos {
	top: 16px;
	left: 16px;
}

.ov-ficha > .summary {
	grid-column: 3;
	margin: 0;
	padding-bottom: clamp(40px, 5vw, 72px);
}

.ov-ficha > .ov-ficha__detalle {
	grid-column: 1 / -1;
}

.ov-ficha > .related,
.ov-ficha > .up-sells {
	grid-column: 2 / 4;
	padding-block: var(--ov-seccion);
}

.ov-ficha > .related > h2,
.ov-ficha > .up-sells > h2 {
	margin-bottom: clamp(24px, 3vw, 36px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ov-dorado);
	font-size: var(--ov-t-titular);
}

/* Compra */
.ov-ficha .product_title {
	margin: 0 0 12px;
	font-size: var(--ov-t-producto);
	line-height: 1.12;
}

.ov-ficha .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font: 500 var(--ov-t-etiqueta) / 1.3 var(--ov-sans);
	color: var(--ov-tinta-suave);
}

.ov-ficha .woocommerce-review-link {
	color: var(--ov-tinta-suave);
}

/* Estrellas de WooCommerce sin su hoja ni su fuente de iconos: el mismo dibujo que ov_estrellas(), por
   máscara, porque el marcado (un span con el ancho de la nota) lo pone WooCommerce */
.star-rating {
	--ov-estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L14.5 8.5 21 9.3 16 14.1 17.3 20.7 12 17.5 6.7 20.7 8 14.1 3 9.3 9.5 8.5z'/%3E%3C/svg%3E");
	position: relative;
	display: inline-block;
	width: 90px;
	height: 16px;
	overflow: hidden;
	background: var(--ov-dorado-claro);
	color: transparent;
	font-size: 16px;
	line-height: 1;
	-webkit-mask: var(--ov-estrella) 0 0 / 18px 16px repeat-x;
	mask: var(--ov-estrella) 0 0 / 18px 16px repeat-x;
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	padding-top: 1.5em;
	background: var(--ov-dorado-oscuro);
}

.ov-ficha .summary > .price {
	margin: 0 0 18px;
	font-size: var(--ov-t-precio);
	line-height: 1.1;
}

.ov-ficha .summary > .price .ov-desde {
	font-size: var(--ov-t-etiqueta);
}

.ov-ficha .woocommerce-product-details__short-description {
	margin-bottom: 22px;
	color: var(--ov-tinta-suave);
	font-size: var(--ov-t-cuerpo);
	line-height: 1.6;
}

.ov-ficha .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Formulario: formato, cantidad y botón */
.ov-ficha form.cart {
	margin: 0 0 14px;
	padding-top: 20px;
	border-top: var(--ov-filete);
}

.ov-ficha table.variations {
	width: 100%;
	margin: 0 0 16px;
	border-collapse: collapse;
}

.ov-ficha table.variations th,
.ov-ficha table.variations td {
	display: block;
	padding: 0;
	text-align: left;
}

.ov-ficha table.variations th.label {
	margin-bottom: 8px;
}

.ov-ficha table.variations label {
	font: 600 var(--ov-t-etiqueta) / 1.3 var(--ov-sans);
	letter-spacing: 0.01em;
	color: var(--ov-tinta-suave);
}

.ov-ficha table.variations select {
	max-width: 22rem;
}

.ov-ficha .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font: 500 var(--ov-t-etiqueta) / 1.3 var(--ov-sans);
}

/* Formato como botones de opción (los pone ficha.js sobre el select de WooCommerce, que sigue mandando) */
.ov-opciones {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.ov-opciones legend {
	margin-bottom: 8px;
	padding: 0;
	font: 600 var(--ov-t-etiqueta) / 1.3 var(--ov-sans);
	letter-spacing: 0.01em;
	color: var(--ov-tinta-suave);
}

.ov-opciones__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ov-opcion {
	position: relative;
}

.ov-opcion input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.ov-opcion span {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 20px;
	border: 1px solid var(--ov-apagado);
	background: var(--ov-blanco);
	color: var(--ov-verde-oscuro);
	font: 600 var(--ov-t-pequeno) / 1.2 var(--ov-sans);
	transition: border-color var(--ov-d-estado) ease, background-color var(--ov-d-estado) ease, color var(--ov-d-estado) ease, transform var(--ov-d-pulsar) var(--ov-ease-salida);
}

.ov-opcion input:checked + span {
	border-color: var(--ov-verde-oscuro);
	background: var(--ov-verde-oscuro);
	color: var(--ov-crema-clara);
}

.ov-opcion input:focus-visible + span {
	outline: 2px solid var(--ov-foco);
	outline-offset: 3px;
}

.ov-opcion input:disabled + span {
	opacity: 0.45;
	text-decoration: line-through;
	cursor: not-allowed;
}

.ov-opcion input:active + span {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.ov-opcion input:not(:checked):not(:disabled):hover + span {
		border-color: var(--ov-verde-imagotipo);
	}
}

.ov-js .ov-ficha .woocommerce-variation-price,
.ov-js .ov-ficha .reset_variations {
	display: none !important;
}

.ov-ficha .woocommerce-variation-availability .stock {
	margin: 0 0 12px;
}

.ov-ficha .woocommerce-variation-add-to-cart,
.ov-ficha form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.ov-ficha form.cart:not(.variations_form) > :not(.quantity):not(.single_add_to_cart_button) {
	flex-basis: 100%;
}

/* Cantidad con botones − y + (los añade ficha.js; sin JavaScript, el campo numérico de siempre) */
.ov-ficha .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ov-apagado);
	background: var(--ov-blanco);
}

.ov-ficha .quantity .qty {
	width: 56px;
	min-height: 52px;
	padding: 0 4px;
	border: 0;
	text-align: center;
	font: 600 var(--ov-t-cuerpo) / 1 var(--ov-sans);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

.ov-ficha .quantity .qty::-webkit-outer-spin-button,
.ov-ficha .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ov-cantidad__boton {
	width: 46px;
	border: 0;
	background: none;
	color: var(--ov-verde-oscuro);
	cursor: pointer;
	transition: background-color var(--ov-d-estado) ease;
}

.ov-cantidad__boton .ov-icono {
	width: 18px;
	height: 18px;
	margin: auto;
}

.ov-cantidad__boton:active {
	background: var(--ov-crema);
}

@media (hover: hover) and (pointer: fine) {
	.ov-cantidad__boton:hover {
		background: var(--ov-crema-clara);
	}
}

.ov-ficha .single_add_to_cart_button {
	flex: 1;
	min-width: 220px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 14px 28px;
	border: 1px solid var(--ov-verde-imagotipo);
	background: var(--ov-verde-imagotipo);
	color: var(--ov-blanco);
	font: 600 var(--ov-t-pequeno) / 1.2 var(--ov-sans);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color var(--ov-d-estado) ease, border-color var(--ov-d-estado) ease, transform var(--ov-d-pulsar) var(--ov-ease-salida);
}

.ov-ficha .single_add_to_cart_button:active {
	transform: scale(0.97);
}

.ov-ficha .single_add_to_cart_button.disabled,
.ov-ficha .single_add_to_cart_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
	.ov-ficha .single_add_to_cart_button:not(.disabled):hover {
		border-color: var(--ov-verde-oscuro);
		background: var(--ov-verde-oscuro);
	}
}

.ov-ficha .stock.out-of-stock {
	display: inline-block;
	margin: 0 0 16px;
	padding: 8px 12px;
	border: 1px solid var(--ov-verde-oscuro);
	color: var(--ov-verde-oscuro);
	font: 600 var(--ov-t-etiqueta) / 1.2 var(--ov-sans);
	letter-spacing: 0.01em;
}

.ov-ficha__stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	color: var(--ov-verde-principal);
	font: 600 var(--ov-t-etiqueta) / 1.3 var(--ov-sans);
	letter-spacing: 0.01em;
}

.ov-ficha__stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

/* Garantías: una línea, sin tarjetas */
.ov-garantias {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 20px;
	margin: 0 0 22px;
	padding: 16px 0;
	list-style: none;
	border-block: var(--ov-filete);
}

.ov-garantias li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--ov-tinta-suave);
	font: 500 var(--ov-t-etiqueta) / 1.45 var(--ov-sans);
}

.ov-garantias strong {
	display: block;
	background: none;
	color: var(--ov-verde-oscuro);
	font-weight: 600;
	font-size: var(--ov-t-pequeno);
}

.ov-garantias .ov-icono {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--ov-verde-imagotipo);
}

/* Datos de la pieza en el marco de etiqueta */
.ov-ficha__datos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 28px;
	margin: 0 0 22px !important;
}

dl.ov-ficha__datos > div:nth-last-child(2):nth-child(odd) {
	border-bottom: 0;
}

/* Gastos de envío */
.ov-envio {
	border: var(--ov-filete);
	background: var(--ov-blanco);
}

.ov-envio summary {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding: 12px 16px;
	cursor: pointer;
	list-style: none;
}

.ov-envio summary::-webkit-details-marker {
	display: none;
}

.ov-envio__icono {
	width: 24px;
	height: 24px;
	color: var(--ov-verde-imagotipo);
}

.ov-envio__resumen {
	flex: 1;
	display: grid;
	gap: 2px;
}

.ov-envio__titulo {
	color: var(--ov-verde-oscuro);
	font-size: var(--ov-t-cuerpo);
}

.ov-envio__nota {
	color: var(--ov-tinta-suave);
	font: 500 var(--ov-t-etiqueta) / 1.3 var(--ov-sans);
}

.ov-envio__flecha {
	width: 22px;
	height: 22px;
	color: var(--ov-verde-imagotipo);
	transition: transform var(--ov-d-estado) var(--ov-ease-salida);
}

.ov-envio[open] .ov-envio__flecha {
	transform: rotate(180deg);
}

.ov-envio::details-content {
	block-size: 0;
	overflow-y: clip;
	transition: block-size var(--ov-d-menu) var(--ov-ease-salida), content-visibility var(--ov-d-menu) allow-discrete;
}

.ov-envio[open]::details-content {
	block-size: auto;
}

.ov-envio__cuerpo {
	padding: 4px 16px 18px;
	color: var(--ov-tinta-suave);
	font-size: var(--ov-t-pequeno);
}

.ov-envio__tabla {
	width: 100%;
	margin: 0 0 14px;
	border-collapse: collapse;
}

.ov-envio__tabla th,
.ov-envio__tabla td {
	padding: 10px 0;
	border-bottom: var(--ov-filete);
	text-align: left;
	font: 500 var(--ov-t-pequeno) / 1.3 var(--ov-sans);
}

.ov-envio__tabla td {
	color: var(--ov-verde-oscuro);
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ov-envio__islas {
	margin: 0;
}

/* Debajo de la compra */
.ov-ficha__descripcion {
	padding-block: var(--ov-seccion);
	border-top: var(--ov-filete);
}

.ov-ficha__descripcion .ov-medida {
	margin-inline: auto;
}

.ov-ficha__valoraciones {
	padding-block: var(--ov-seccion);
}

.ov-ficha__valoraciones .ov-medida {
	margin-inline: auto;
}

/* Valoraciones de WooCommerce */
.woocommerce-Reviews-title,
#reply-title {
	font-size: var(--ov-t-titular);
}

.woocommerce-Reviews .commentlist {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.woocommerce-Reviews .commentlist li {
	padding: 20px 0;
	border-bottom: var(--ov-filete);
}

.woocommerce-Reviews .comment_container {
	display: flex;
	gap: 16px;
}

.woocommerce-Reviews .avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.woocommerce-Reviews .comment-text .meta {
	margin: 6px 0;
	color: var(--ov-tinta-suave);
	font: 500 var(--ov-t-etiqueta) / 1.4 var(--ov-sans);
}

.woocommerce-Reviews .comment-text .description p:last-child {
	margin-bottom: 0;
}

.woocommerce-noreviews {
	color: var(--ov-tinta-suave);
}

#review_form .comment-form {
	display: grid;
	gap: 16px;
}

#review_form .comment-form p {
	margin: 0;
}

#review_form label {
	display: block;
	margin-bottom: 6px;
}

#review_form .form-submit input,
#review_form .submit {
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid var(--ov-verde-imagotipo);
	background: var(--ov-verde-imagotipo);
	color: var(--ov-blanco);
	font: 600 var(--ov-t-etiqueta) / 1 var(--ov-sans);
	letter-spacing: 0.01em;
	cursor: pointer;
}

/* Estrellas para valorar (las crea el guion de WooCommerce sobre el select) */
p.stars {
	margin: 4px 0 0;
}

p.stars span {
	display: inline-flex;
	gap: 4px;
}

p.stars a {
	position: relative;
	display: inline-block;
	width: 32px;
	height: 32px;
	overflow: hidden;
	color: transparent;
	text-decoration: none;
}

p.stars a::before {
	content: "\2606";
	position: absolute;
	inset: 0;
	color: var(--ov-dorado-oscuro);
	font: 400 28px / 32px "Segoe UI Symbol", "Apple Symbols", sans-serif;
	text-align: center;
}

p.stars:hover a::before,
p.stars.selected a.active::before,
p.stars.selected a:not(.active)::before {
	content: "\2605";
}

p.stars a:hover ~ a::before,
p.stars.selected a.active ~ a::before {
	content: "\2606";
}

/* Barra de compra fija en el móvil */
.ov-barra-compra {
	position: fixed;
	inset: auto 0 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px var(--ov-medianil) calc(10px + env(safe-area-inset-bottom));
	background: var(--ov-blanco);
	border-top: 1px solid var(--ov-dorado);
	box-shadow: 0 -10px 28px -18px rgba(16, 44, 20, 0.4);
	transform: translateY(110%);
	transition: transform var(--ov-d-panel) var(--ov-ease-cajon);
}

.ov-barra-compra[data-ov-visible] {
	transform: translateY(0);
}

.ov-barra-compra__datos {
	flex: 1;
	min-width: 0;
}

.ov-barra-compra__nombre {
	margin: 0;
	overflow: hidden;
	color: var(--ov-verde-oscuro);
	font: 500 var(--ov-t-etiqueta) / 1.3 var(--ov-sans);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ov-barra-compra__precio {
	margin: 2px 0 0;
	font: 700 var(--ov-t-cuerpo) / 1.2 var(--ov-sans);
	color: var(--ov-verde-oscuro);
}

.ov-barra-compra__precio .ov-desde {
	font-size: var(--ov-t-etiqueta);
}

.ov-barra-compra__boton {
	flex: none;
	min-height: 48px;
	padding: 12px 18px;
}

/* El botón del chat (60 px, abajo a la derecha) queda sobre el hueco de la derecha, no sobre el botón */
.ov-barra-compra--chat {
	padding-right: calc(var(--ov-medianil) + 76px);
}

@media (min-width: 901px) {
	.ov-barra-compra {
		display: none;
	}
}

/* Móvil y tableta: una columna, la compra justo después de la foto */
@media (max-width: 900px) {
	.ov-ficha {
		grid-template-columns: var(--ov-medianil) minmax(0, 1fr) var(--ov-medianil);
	}

	.ov-ficha > *,
	.ov-ficha > .summary,
	.ov-ficha > .related,
	.ov-ficha > .up-sells {
		grid-column: 2;
	}

	.ov-ficha > .ov-ficha__detalle {
		grid-column: 1 / -1;
	}

	.ov-ficha__foto {
		grid-column: 2;
		width: min(100%, 420px);
		margin: 0 auto 24px;
	}

	.ov-garantias {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.ov-ficha__foto {
		width: 78%;
	}

	.ov-ficha__datos {
		grid-template-columns: 1fr;
	}

	dl.ov-ficha__datos > div:nth-last-child(2):nth-child(odd) {
		border-bottom: var(--ov-filete);
	}

	.ov-ficha .single_add_to_cart_button {
		min-width: 0;
	}
}

/* Foto de la ficha sobre el papel crema: el blanco de las fotos de catálogo se funde con él */
.ov-ficha__foto img {
	mix-blend-mode: multiply;
}

/* Información nutricional: mismo desplegable que el envío; azúcares y saturadas, sangradas bajo su grupo */
.ov-nutricion {
	margin-top: 12px;
}

.ov-nutricion .ov-envio__tabla {
	margin: 0;
}

.ov-nutricion tr.es-hija th {
	padding-left: 16px;
	font-weight: 400;
}