/**
 * Ficha de producto.
 *
 * Portada de la vista `/azul/$producto` de Lovable. Toda la página va sobre
 * el azul suave de la línea; la foto a la izquierda y la compra a la derecha.
 *
 * Equivalencias Tailwind → px: py-20=80 · gap-16=64 · mt-10=40 · text-5xl=48
 * text-sm=14 · text-xs=12
 *
 * ⚠ Todo en px, nunca rem: OceanWP declara `html { font-size: 62.5% }`.
 *
 * El botón es el `<button>` de WooCommerce: aquí solo se le da el aspecto del
 * resto de botones del sitio.
 *
 * Los selectores que apuntan a markup generado por WooCommerce llevan delante
 * `body.ms-tienda`. Sin eso pierden: OceanWP pinta `.woocommerce button.button.alt`
 * y `.woocommerce .amount` (verde #57bf6d) con más especificidad y más tarde.
 * Comprobado en la vista previa: sin el prefijo el botón salía verde, redondeado
 * y en minúsculas.
 */

.ms-ficha-page {
	background-color: var(--ms-azul-soft);
}

.ms-ficha {
	padding-block: clamp(32px, 4vw, 48px) clamp(56px, 8vw, 96px);
}

/* -------------------------------------------------------------------------
 * 1. Volver al catálogo
 * ---------------------------------------------------------------------- */

.ms-ficha__volver {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 40px;
	color: var(--ms-azul-ink);
	font-family: var(--ms-font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--ms-tracking-ui, 0.12em);
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
}

.ms-ficha__volver:hover {
	color: var(--ms-azul-ink);
	opacity: 0.8;
}

.ms-ficha__volver-icon {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.ms-ficha__volver:hover .ms-ficha__volver-icon {
	transform: translateX(-3px);
}

/* -------------------------------------------------------------------------
 * 2. Rejilla
 * ---------------------------------------------------------------------- */

.ms-ficha__grid {
	display: grid;
	gap: 40px;
}

@media (min-width: 900px) {

	.ms-ficha__grid {
		grid-template-columns: 1fr 0.92fr;
		align-items: start;
		gap: 64px;
	}
}

.ms-ficha__media,
.ms-ficha__body {
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * 3. Fotos
 * ---------------------------------------------------------------------- */

.ms-ficha__foto {
	overflow: hidden;
	background-color: var(--ms-card);
}

.ms-ficha__img,
.ms-ficha__foto .ms-img-placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ms-ficha__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ms-ficha__thumb-item {
	margin: 0;
}

.ms-ficha__thumb {
	display: block;
	width: 84px;
	padding: 0;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}

.ms-ficha__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ms-ficha__thumb:hover {
	opacity: 0.85;
}

.ms-ficha__thumb.is-active {
	border-color: var(--ms-azul-ink);
}

.ms-ficha__thumb:focus-visible {
	outline: 2px solid var(--ms-azul-ink);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 4. Datos del producto
 * ---------------------------------------------------------------------- */

.ms-ficha__eyebrow {
	margin: 0;
	color: var(--ms-azul-ink);
}

.ms-ficha__title {
	margin: 24px 0 0;
	font-family: var(--ms-font-display);
	font-size: clamp(34px, 4.4vw, 48px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.ms-ficha__claim {
	margin: 20px 0 0;
	font-size: clamp(15px, 1.4vw, 17px);
	font-style: italic;
	line-height: 1.5;
	color: var(--ms-azul-ink);
}

/*
 * El precio lo genera WooCommerce con sus propios <span> anidados y OceanWP
 * los pinta de verde (`.amount { color: #57bf6d }`), así que el color hay que
 * aplicarlo también a los descendientes. Mismo truco que en la tarjeta.
 */
body.ms-tienda .ms-ficha .ms-ficha__precio,
body.ms-tienda .ms-ficha .ms-ficha__precio * {
	font-family: var(--ms-font-sans);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ms-azul-ink);
}

.ms-ficha__precio {
	margin-top: 32px;
}

body.ms-tienda .ms-ficha .ms-ficha__precio del,
body.ms-tienda .ms-ficha .ms-ficha__precio del * {
	margin-right: 10px;
	font-size: 19px;
	color: var(--ms-muted-foreground);
}

body.ms-tienda .ms-ficha .ms-ficha__precio ins {
	text-decoration: none;
}

.ms-ficha__nota {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ms-muted-foreground);
}

.ms-ficha__desc {
	margin-top: 32px;
}

.ms-ficha__desc > * {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--ms-muted-foreground);
}

.ms-ficha__desc > *:last-child {
	margin-bottom: 0;
}

.ms-ficha__desc a {
	color: var(--ms-azul-ink);
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * 5. Características
 * ---------------------------------------------------------------------- */

.ms-ficha__lista {
	margin: 32px 0 0;
	padding: 32px 0 0;
	border-top: 1px solid rgba(121, 167, 179, 0.4);
	list-style: none;
}

.ms-ficha__lista-item {
	position: relative;
	margin: 0 0 16px;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ms-muted-foreground);
}

.ms-ficha__lista-item:last-child {
	margin-bottom: 0;
}

/* La viñeta redonda del diseño, en el azul de la línea. */
.ms-ficha__lista-item::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--ms-azul);
}

/* -------------------------------------------------------------------------
 * 6. Compra (formulario de WooCommerce)
 * ---------------------------------------------------------------------- */

body.ms-tienda .ms-ficha__compra {
	margin-top: 40px;
}

body.ms-tienda .ms-ficha__compra form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 0;
}

/* Selector de cantidad, con la misma caja que los campos del sitio. */
body.ms-tienda .ms-ficha__compra .quantity {
	display: flex;
	margin: 0;
}

body.ms-tienda .ms-ficha__compra .quantity input.qty,
body.ms-tienda .ms-ficha__compra .quantity .input-text {
	width: 84px;
	height: 56px;
	padding: 0 8px;
	border: 1px solid rgba(121, 167, 179, 0.55);
	border-radius: 0;
	background-color: var(--ms-background);
	color: var(--ms-foreground);
	font-family: var(--ms-font-sans);
	font-size: 15px;
	text-align: center;
	-moz-appearance: textfield;
}

body.ms-tienda .ms-ficha__compra .quantity input.qty:focus {
	border-color: var(--ms-azul-ink);
	outline: none;
	box-shadow: none;
}

/*
 * OceanWP mete dos enlaces «-» y «+» dentro de `.quantity` y le pone la clase
 * `buttons_added`. Se dejan (son cómodos) pero con la caja del sitio: tres
 * celdas de 56px con un solo borde alrededor.
 */
body.ms-tienda .ms-ficha__compra .quantity.buttons_added {
	align-items: stretch;
	border: 1px solid rgba(121, 167, 179, 0.55);
	background-color: var(--ms-background);
}

body.ms-tienda .ms-ficha__compra .quantity.buttons_added input.qty {
	width: 56px;
	border: 0;
	border-inline: 1px solid rgba(121, 167, 179, 0.35);
	background: none;
}

body.ms-tienda .ms-ficha__compra .quantity a.minus,
body.ms-tienda .ms-ficha__compra .quantity a.plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 56px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ms-azul-ink);
	font-family: var(--ms-font-sans);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

body.ms-tienda .ms-ficha__compra .quantity a.minus:hover,
body.ms-tienda .ms-ficha__compra .quantity a.plus:hover {
	background-color: var(--ms-azul-soft);
	color: var(--ms-azul-ink);
}

/* Botón de añadir al carrito: el sólido del sitio, en azul tinta. */
body.ms-tienda .ms-ficha__compra .button,
body.ms-tienda .ms-ficha__compra button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	min-width: 280px;
	padding: 16px 40px;
	border: 0;
	border-radius: 0;
	background-color: var(--ms-azul-ink);
	color: var(--ms-background);
	font-family: var(--ms-font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

body.ms-tienda .ms-ficha__compra .button:hover,
body.ms-tienda .ms-ficha__compra button.single_add_to_cart_button:hover {
	background-color: var(--ms-azul-ink);
	color: var(--ms-background);
	opacity: 0.9;
}

body.ms-tienda .ms-ficha__compra .button:focus-visible,
body.ms-tienda .ms-ficha__compra button.single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--ms-azul-ink);
	outline-offset: 3px;
}

body.ms-tienda .ms-ficha__compra .button.disabled,
body.ms-tienda .ms-ficha__compra button.single_add_to_cart_button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

@media (max-width: 599px) {

	body.ms-tienda .ms-ficha__compra form.cart {
		flex-direction: column;
	}

	body.ms-tienda .ms-ficha__compra .button,
	body.ms-tienda .ms-ficha__compra button.single_add_to_cart_button {
		width: 100%;
		min-width: 0;
	}
}

/* Aviso de «sin existencias» y variaciones. */
body.ms-tienda .ms-ficha__compra .stock {
	margin: 0 0 16px;
	flex: 1 0 100%;
	font-size: 13px;
	color: var(--ms-muted-foreground);
}

body.ms-tienda .ms-ficha__compra .stock.out-of-stock {
	color: var(--ms-destructive);
}

body.ms-tienda .ms-ficha__compra table.variations {
	flex: 1 0 100%;
	margin: 0 0 16px;
	border: 0;
}

body.ms-tienda .ms-ficha__compra table.variations th,
body.ms-tienda .ms-ficha__compra table.variations td {
	padding: 0 0 12px;
	border: 0;
	background: none;
	text-align: left;
	vertical-align: middle;
}

body.ms-tienda .ms-ficha__compra table.variations label {
	font-family: var(--ms-font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--ms-tracking-eyebrow, 0.22em);
	text-transform: uppercase;
	color: var(--ms-muted-foreground);
}

body.ms-tienda .ms-ficha__compra table.variations select {
	width: 100%;
	height: 48px;
	padding: 0 12px;
	border: 1px solid rgba(121, 167, 179, 0.55);
	border-radius: 0;
	background-color: var(--ms-background);
	font-family: var(--ms-font-sans);
	font-size: 14px;
	color: var(--ms-foreground);
}

.ms-ficha__sku {
	margin: 24px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ms-muted-foreground);
}

.ms-ficha__sku span {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}