/* 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. */

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

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

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

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

.op-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. */
.op-ficha__foto {
	grid-column: 2;
	position: relative;
	margin: 0 clamp(24px, 4vw, 64px) 0 0;
	background: var(--op-crema-clara);
	border: var(--op-filete);
	aspect-ratio: 1;
	overflow: hidden;
}

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

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

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

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

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

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

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

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

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

/* Estrellas de WooCommerce sin su hoja ni su fuente de iconos: el mismo dibujo que op_estrellas(), por
   máscara, porque el marcado (un span con el ancho de la nota) lo pone WooCommerce */
.star-rating {
	--op-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(--op-dorado-claro);
	color: transparent;
	font-size: 16px;
	line-height: 1;
	-webkit-mask: var(--op-estrella) 0 0 / 18px 16px repeat-x;
	mask: var(--op-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(--op-dorado-oscuro);
}

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

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

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

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

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

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

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

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

.op-ficha table.variations label {
	font: 600 var(--op-t-etiqueta) / 1.3 var(--op-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--op-tinta-suave);
}

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

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

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

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

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

.op-opcion {
	position: relative;
}

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

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

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

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

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

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

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

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

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

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

.op-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) */
.op-ficha .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--op-apagado);
	background: var(--op-blanco);
}

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

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

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

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

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

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

.op-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(--op-granate);
	background: var(--op-granate);
	color: var(--op-blanco);
	font: 600 var(--op-t-pequeno) / 1.2 var(--op-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--op-d-estado) ease, border-color var(--op-d-estado) ease, transform var(--op-d-pulsar) var(--op-ease-salida);
}

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

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

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

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

.op-ficha__stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	color: var(--op-granate);
	font: 600 var(--op-t-etiqueta) / 1.3 var(--op-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

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

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

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

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

.op-garantias .op-icono {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--op-granate);
}

/* Datos del producto */
.op-ficha__datos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 28px;
	margin: 0 0 22px !important;
}

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

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

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

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

.op-envio__icono {
	width: 24px;
	height: 24px;
	color: var(--op-granate);
}

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

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

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

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

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

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

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

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

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

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

.op-envio__tabla td {
	color: var(--op-granate-oscuro);
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.op-envio__islas {
	margin: 0;
}

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

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

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

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

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

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

.woocommerce-Reviews .commentlist li {
	padding: 20px 0;
	border-bottom: var(--op-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(--op-tinta-suave);
	font: 500 var(--op-t-etiqueta) / 1.4 var(--op-sans);
}

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

.woocommerce-noreviews {
	color: var(--op-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(--op-granate);
	background: var(--op-granate);
	color: var(--op-blanco);
	font: 600 var(--op-t-etiqueta) / 1 var(--op-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	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(--op-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 */
.op-barra-compra {
	position: fixed;
	inset: auto 0 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px var(--op-medianil) calc(10px + env(safe-area-inset-bottom));
	background: var(--op-blanco);
	border-top: 1px solid var(--op-dorado);
	box-shadow: 0 -10px 28px -18px rgba(46, 12, 18, 0.4);
	transform: translateY(110%);
	transition: transform var(--op-d-panel) var(--op-ease-cajon);
}

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

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

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

.op-barra-compra__precio {
	margin: 2px 0 0;
	font: 600 var(--op-t-cuerpo) / 1.2 var(--op-sans);
	color: var(--op-granate-oscuro);
}

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

.op-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 */
.op-barra-compra--chat {
	padding-right: calc(var(--op-medianil) + 76px);
}

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

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

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

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

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

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

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

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

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

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

/* Galería: las demás fotos del producto, en miniatura bajo la grande */
.op-ficha__galeria {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.op-ficha__galeria a {
	display: block;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border: var(--op-filete);
	border-radius: 8px;
	background: var(--op-blanco);
}

.op-ficha__galeria img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
	.op-ficha__galeria a:hover {
		border-color: var(--op-granate);
	}
}

/* WhatsApp, junto al botón de compra */
/* Con una sola unidad en stock, WooCommerce deja la cantidad como campo oculto: sin su marco */
.op-ficha .quantity:has(input[type="hidden"]) {
	display: none;
}

.op-ficha__whatsapp {
	margin: 0 0 22px;
}

.op-ficha__whatsapp .op-boton {
	width: 100%;
	justify-content: center;
}

/* Marca y categoría: una caja de 1 px como las demás, sin el doble filete de las etiquetas */
dl.op-etiqueta.op-ficha__datos {
	outline: 0;
	border-color: var(--op-dorado-claro);
}