/**
 * JOVI — WooCommerce.
 * Migrado del snippet "JOVI Brand CSS" (id 11), recoloreado a #C00000 / #E01414.
 *
 * Los !important que quedan son los estrictamente necesarios para ganarle a la hoja de
 * estilos de WooCommerce, que trae sus propias reglas con alta especificidad.
 * Cada uno está justificado; no agregar más sin comentario.
 */

/* --- Botones --- */

.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.single_add_to_cart_button {
	/* WooCommerce define color/background en .woocommerce a.button — hay que forzarlo. */
	background-color: var(--jovi-red) !important;
	color: var(--jovi-white) !important;
	border: none !important;
	border-radius: var(--jovi-radius-sm) !important;
	font-family: var(--jovi-font-display);
	font-weight: 500;
	transition: background-color var(--jovi-duration) var(--jovi-ease) !important;
}

.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.single_add_to_cart_button:hover {
	background-color: var(--jovi-red-hover) !important;
}

.woocommerce a.button:active,
.woocommerce button.button:active {
	background-color: var(--jovi-red-deep) !important;
}

/* Botón secundario: el checkout deja de competir con la asesoría por WhatsApp.
   Decisión de negocio 2026-08-11 — WhatsApp es el canal principal de conversión. */
.jovi-btn-quiet,
.woocommerce a.button.jovi-btn-quiet {
	background-color: transparent !important;
	color: var(--jovi-ink) !important;
	border: 1px solid var(--jovi-border) !important;
}

.jovi-btn-quiet:hover,
.woocommerce a.button.jovi-btn-quiet:hover {
	background-color: var(--jovi-surface) !important;
	border-color: var(--jovi-ink) !important;
}

/* --- Tarjeta de producto --- */

.woocommerce ul.products li.product {
	border-radius: var(--jovi-radius);
	overflow: hidden;
	transition:
		transform var(--jovi-duration) var(--jovi-ease),
		box-shadow var(--jovi-duration) var(--jovi-ease);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--jovi-shadow);
}

/* Sin movimiento en listas largas para quien lo pidió. */
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover {
		transform: none;
	}
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--jovi-text-base);
	font-weight: 500;
	line-height: 1.35;
}

/* --- Precio --- */

.woocommerce .price,
.woocommerce .price .woocommerce-Price-amount {
	color: var(--jovi-red);
	font-weight: 700;
}

/* El precio tachado no debe gritar: es contexto, no la oferta. */
.woocommerce .price del,
.woocommerce .price del .woocommerce-Price-amount {
	color: var(--jovi-muted);
	font-weight: 400;
	text-decoration-thickness: 1px;
}

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

/* --- Etiqueta de oferta --- */

.woocommerce span.onsale {
	background-color: var(--jovi-red);
	color: var(--jovi-white);
	font-family: var(--jovi-font-display);
	font-weight: 500;
	border-radius: var(--jovi-radius-pill);
	padding: 2px var(--jovi-space-3);
	min-height: 0;
	min-width: 0;
	line-height: 1.8;
}

/* --- Avisos --- */

.woocommerce-info,
.woocommerce-message {
	border-top-color: var(--jovi-red);
	background-color: var(--jovi-red-tint);
}

.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--jovi-red);
}

/* =============================================
   TIENDA — cabecera
   ============================================= */

/* Banda gris con borde inferior, como el PageHero de la maqueta. Se saca del contenedor de
   Blocksy con la misma técnica del Home: el fondo llega a los bordes, el contenido no. */
.jovi-tienda__head {
	background: var(--jovi-surface);
	border-bottom: 1px solid var(--jovi-border);
	padding-block: var(--jovi-space-10);
	margin-bottom: var(--jovi-space-8);
}

.jovi-tienda__titulo {
	margin: var(--jovi-space-2) 0 0;
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
	line-height: 1.1;
	color: var(--jovi-graphite);
	text-wrap: balance;
}

.jovi-tienda__bajada {
	max-width: 46ch;
	margin: var(--jovi-space-3) 0 0;
	color: var(--jovi-muted);
}

/* --- Buscador grande --- */

.jovi-tienda__buscar {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 42rem;
	margin-top: var(--jovi-space-6);
}

.jovi-tienda__buscar svg {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	color: var(--jovi-muted);
	pointer-events: none;
}

.jovi-tienda__buscar input[type="search"] {
	width: 100%;
	height: 52px;
	padding: 0 18px 0 46px;
	background: var(--jovi-white);
	border: 1px solid var(--jovi-border);
	border-radius: var(--jovi-radius);
	font-size: 1rem;
	color: var(--jovi-text);
	transition: border-color var(--jovi-duration) var(--jovi-ease);
}

.jovi-tienda__buscar input[type="search"]:focus {
	outline: none;
	border-color: var(--jovi-red);
}

/* --- Pastillas de categoría --- */

/* Se desplazan en horizontal cuando no caben, en vez de romper en varias filas: con pocas
   categorías se ven todas, y cuando la clasificación avance seguirán cabiendo. */
.jovi-tienda__pastillas {
	display: flex;
	gap: var(--jovi-space-2);
	margin-top: var(--jovi-space-6);
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.jovi-pastilla {
	flex-shrink: 0;
	padding: 9px 18px;
	background: var(--jovi-white);
	border: 1px solid var(--jovi-border);
	border-radius: var(--jovi-radius-pill);
	font-size: var(--jovi-text-sm);
	font-weight: 500;
	color: var(--jovi-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--jovi-duration) var(--jovi-ease), color var(--jovi-duration) var(--jovi-ease);
}

.jovi-pastilla:hover,
.jovi-pastilla:focus-visible {
	border-color: rgba(192, 0, 0, 0.4);
	color: var(--jovi-graphite);
	text-decoration: none;
}

.jovi-pastilla.is-activa {
	background: var(--jovi-graphite);
	border-color: var(--jovi-graphite);
	color: var(--jovi-white);
}

/* =============================================
   TIENDA — barra de filtros
   ============================================= */

.jovi-tienda__barra {
	margin-bottom: var(--jovi-space-6);
}

.jovi-tienda__filtros {
	display: grid;
	gap: var(--jovi-space-3);
	margin-bottom: var(--jovi-space-5);
}

@media (min-width: 640px) {
	.jovi-tienda__filtros {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.jovi-tienda__filtros {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Los <select> nativos: se les quita la apariencia del sistema y se les pone la flecha propia,
   para que los cuatro controles se vean como una sola familia. */
.jovi-campo {
	position: relative;
	display: block;
}

.jovi-campo::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--jovi-muted);
	border-bottom: 2px solid var(--jovi-muted);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.jovi-campo select {
	width: 100%;
	height: 44px;
	padding: 0 40px 0 16px;
	appearance: none;
	background: var(--jovi-white);
	border: 1px solid var(--jovi-border);
	border-radius: var(--jovi-radius);
	font-family: inherit;
	font-size: var(--jovi-text-sm);
	color: var(--jovi-graphite);
	cursor: pointer;
}

.jovi-campo select:focus-visible {
	outline: 2px solid var(--jovi-red);
	outline-offset: 1px;
}

.jovi-tienda__toggle,
.jovi-tienda__compat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--jovi-border);
	border-radius: var(--jovi-radius);
	background: var(--jovi-white);
	font-family: var(--jovi-font-display);
	font-size: var(--jovi-text-sm);
	font-weight: 600;
	color: var(--jovi-graphite);
	text-decoration: none;
	transition: background-color var(--jovi-duration) var(--jovi-ease), border-color var(--jovi-duration) var(--jovi-ease);
}

.jovi-tienda__toggle svg {
	width: 17px;
	height: 17px;
}

.jovi-tienda__toggle:hover,
.jovi-tienda__toggle:focus-visible {
	border-color: var(--jovi-graphite);
	color: var(--jovi-graphite);
	text-decoration: none;
}

/* Activo: se ve pulsado, no solo distinto. */
.jovi-tienda__toggle.is-activo {
	background: var(--jovi-graphite);
	border-color: var(--jovi-graphite);
	color: var(--jovi-white);
}

/* El cuarto control es el de WhatsApp: se marca en verde su borde al pasar, para que se lea
   como "esto abre el chat" y no como un filtro más. */
.jovi-tienda__compat:hover,
.jovi-tienda__compat:focus-visible {
	border-color: var(--jovi-whatsapp);
	color: var(--jovi-whatsapp-hover);
	text-decoration: none;
}

.jovi-tienda__conteo {
	margin: 0;
	font-size: var(--jovi-text-sm);
	color: var(--jovi-muted);
}

.jovi-tienda__conteo strong {
	color: var(--jovi-graphite);
}

/* =============================================
   TIENDA — sin resultados
   ============================================= */

.jovi-tienda__vacio {
	padding: var(--jovi-space-12) var(--jovi-gutter);
	border: 1px dashed var(--jovi-border);
	border-radius: var(--jovi-radius-lg);
	text-align: center;
}

.jovi-tienda__vacio-titulo {
	margin: 0;
	font-family: var(--jovi-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--jovi-graphite);
}

.jovi-tienda__vacio-texto {
	max-width: 46ch;
	margin: var(--jovi-space-3) auto var(--jovi-space-6);
	font-size: var(--jovi-text-sm);
	color: var(--jovi-muted);
}

/* =============================================
   TIENDA — tarjetas del catálogo
   ============================================= */

/* Se reaprovecha el aspecto de la tarjeta del Home sobre el marcado que ya pinta WooCommerce:
   así la paginación, el orden y la búsqueda siguen siendo los suyos, sin plantillas propias. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--jovi-white);
	border: 1px solid var(--jovi-border);
	border-radius: var(--jovi-radius-lg);
	transition: box-shadow var(--jovi-duration) var(--jovi-ease);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--jovi-shadow-lift);
}

.woocommerce ul.products li.product img {
	aspect-ratio: 1;
	padding: var(--jovi-space-3);
	object-fit: contain;
	background: var(--jovi-white);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: var(--jovi-text-sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--jovi-graphite);
}

.woocommerce ul.products li.product .price {
	font-family: var(--jovi-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--jovi-graphite);
}

.woocommerce ul.products li.product .jovi-prod__disp {
	margin: 4px 0 var(--jovi-space-3);
	font-size: var(--jovi-text-xs);
	font-weight: 600;
}

.woocommerce ul.products li.product .jovi-prod__compat {
	display: block;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--jovi-border);
	border-radius: var(--jovi-radius-sm);
	font-family: var(--jovi-font-display);
	font-size: var(--jovi-text-xs);
	font-weight: 600;
	text-align: center;
	color: var(--jovi-graphite);
	text-decoration: none;
}

.woocommerce ul.products li.product .jovi-prod__compat:hover {
	border-color: var(--jovi-whatsapp);
	color: var(--jovi-whatsapp-hover);
}

/* =============================================
   TIENDA — alineación con el resto del sitio
   ============================================= */

/*
 * El contenedor de Blocksy usa su propio ancho y no coincide con el del header ni con el de la
 * cabecera de la tienda: tres alineaciones distintas en la misma página.
 *
 * Como en el Home, no basta con `max-width`: Blocksy fija `width` en píxeles, y `max-width` no
 * lo toca. Se anulan los dos y el contenedor pasa a ser una banda; el <section> de dentro
 * recupera el ancho de JOVI, el mismo del header y el footer.
 */
.woocommerce-page .ct-container,
.tax-product_cat .ct-container {
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.woocommerce-page .ct-container > section,
.tax-product_cat .ct-container > section {
	max-width: var(--jovi-container);
	margin-inline: auto;
	padding-inline: var(--jovi-gutter);
}

/* La cabecera se imprime como hija directa de <main>, fuera del contenedor de Blocksy, así que
   ya ocupa todo el ancho por sí sola. No lleva truco de 100vw: ese incluye la barra de
   desplazamiento y hacía que la banda sobresaliera 8 px por cada lado. */

/* La rejilla de productos: 2 columnas en móvil, 4 desde escritorio, como en el Home. */
.woocommerce ul.products.columns-4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jovi-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
}

/* --- Compactar la tarjeta del catálogo ---
   Blocksy dejaba 25 px bajo la imagen y márgenes de 10 px entre cada pieza; sumado a los tres
   botones, la tarjeta medía 466 px de alto en móvil. Con dos columnas eso es media pantalla por
   producto. Se aprieta el ritmo interno y se iguala al de la tarjeta del Home. */

.woocommerce ul.products li.product > * {
	margin-bottom: 0;
}

.woocommerce ul.products li.product figure,
.woocommerce ul.products li.product > a:first-child {
	margin: 0;
	border-bottom: 1px solid var(--jovi-border);
}

/* La foto, cuadrada de verdad: Blocksy la dejaba en 160×140. */
.woocommerce ul.products li.product figure img,
.woocommerce ul.products li.product > a:first-child img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: var(--jovi-space-4) var(--jovi-space-4) 0;
}

.woocommerce ul.products li.product .jovi-prod__disp {
	margin: 6px var(--jovi-space-4) 0;
}

.woocommerce ul.products li.product .price {
	margin: 4px var(--jovi-space-4) 0;
}

/* Los dos botones que quedan, al pie de la tarjeta y siempre a la misma altura entre tarjetas. */
.woocommerce ul.products li.product .ct-woo-card-actions {
	margin: auto var(--jovi-space-4) 0;
	padding-top: var(--jovi-space-3);
}

.woocommerce ul.products li.product .jovi-prod__compat {
	margin: 6px var(--jovi-space-4) var(--jovi-space-4);
	padding: 10px 8px;
}

/* =============================================
   FICHA DE PRODUCTO
   ============================================= */

/*
 * Dos columnas: galería a la izquierda, todo lo demás a la derecha. Igual que la maqueta.
 *
 * ⚠️ La rejilla va en `.product-entry-wrapper`, **no** en `div.product`. Blocksy mete ese
 * envoltorio entre medio, así que una rejilla puesta en `div.product` tiene un solo hijo: el
 * envoltorio ocupaba la primera columna y la segunda quedaba vacía, con la galería encogida al
 * 50% dentro. Costó un rato verlo porque el ancho no venía de ninguna regla CSS que se pudiera
 * encontrar inspeccionando la galería — venía de la maquetación del padre.
 *
 * Al quitar la barra lateral, Blocksy además cambia `.ct-container` por `.ct-container-full`.
 */
.single-product .ct-container-full,
.single-product .ct-container {
	width: auto;
	max-width: none;
	padding-inline: 0;
}

/* `.is-width-constrained` de Blocksy calcula su propio margen lateral —22,5 px medidos en
   móvil— que no coincide con el gutter del resto del sitio. Se incluye la clase en el selector
   para ganarle sin `!important` y dejar la ficha en la misma línea que el header y el footer. */
.single-product .product-entry-wrapper.is-width-constrained,
.single-product .product-entry-wrapper,
.single-product .related {
	/* `width: auto` es la clave: `.is-width-constrained` fija un ancho calculado (330 px de 375
	   en móvil) y lo centra, con lo que el contenido caía en x=43 mientras el header estaba en
	   x=20. Anulado el ancho, el gutter propio hace el resto. */
	width: auto;
	max-width: var(--jovi-container);
	margin-inline: auto;
	padding-inline: var(--jovi-gutter);
}

/*
 * Blocksy ya maqueta este envoltorio con **flex**, y su regla le gana a un `display: grid`
 * puesto aquí: la rejilla se computaba pero no se aplicaba, y las columnas quedaban en 936 y
 * 232 px. En vez de forzar el modelo con `!important`, se usa el suyo — dos hijos flexibles al
 * mismo tamaño.
 *
 * `min-width: 0` es imprescindible: sin él, un hijo flex no baja de su tamaño natural, y la
 * foto del producto viene a 800 px o más.
 */
.single-product .product-entry-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--jovi-space-8);
	margin-bottom: var(--jovi-space-16);
}

@media (min-width: 900px) {
	.single-product .product-entry-wrapper {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--jovi-space-12);
	}

	.single-product .woocommerce-product-gallery,
	.single-product div.product .summary {
		flex: 1 1 0;
		min-width: 0;
	}
}

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

.single-product .woocommerce-product-gallery,
.single-product div.product .summary {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

.single-product .woocommerce-product-gallery__wrapper {
	overflow: hidden;
	border: 1px solid var(--jovi-border);
	border-radius: var(--jovi-radius-lg);
	background: var(--jovi-surface);
}

/* `contain` y no `cover`: recortar un producto para llenar el cuadro esconde justo lo que la
   persona vino a mirar. */
.single-product .woocommerce-product-gallery img {
	aspect-ratio: 1;
	object-fit: contain;
	padding: var(--jovi-space-6);
}

/* --- Columna de datos --- */

.jovi-fp__ante {
	margin: 0 0 var(--jovi-space-2);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.jovi-fp__ante a {
	color: var(--jovi-muted);
	text-decoration: none;
}

.jovi-fp__ante a:hover {
	color: var(--jovi-red);
}

.single-product .product_title {
	margin: 0 0 var(--jovi-space-4);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	line-height: 1.2;
	color: var(--jovi-graphite);
}

.single-product div.product p.price {
	margin: 0;
	font-family: var(--jovi-font-display);
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--jovi-graphite);
}

.single-product div.product p.price del {
	margin-left: 10px;
	font-size: 0.62em;
	font-weight: 400;
	color: var(--jovi-muted);
}

.single-product div.product p.price ins {
	text-decoration: none;
}

.jovi-fp__disp {
	margin: var(--jovi-space-2) 0 0;
	font-size: var(--jovi-text-sm);
	font-weight: 600;
}

.jovi-fp__disp--hay   { color: var(--jovi-whatsapp-hover); }
.jovi-fp__disp--pocas { color: var(--jovi-red); }
.jovi-fp__disp--no    { color: var(--jovi-muted); }

/* --- Garantías --- */

.jovi-fp__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jovi-space-2);
	margin: var(--jovi-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.jovi-fp__badges li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 7px 14px;
	border-radius: var(--jovi-radius-pill);
	background: var(--jovi-surface);
	font-size: var(--jovi-text-xs);
	font-weight: 500;
	color: var(--jovi-graphite);
}

.jovi-fp__badges svg {
	width: 15px;
	height: 15px;
	color: var(--jovi-red);
}

/* --- Descripción --- */

.jovi-fp__desc,
.jovi-fp__sin-desc {
	margin: var(--jovi-space-6) 0 0;
	font-size: var(--jovi-text-sm);
	line-height: 1.6;
	color: var(--jovi-muted);
}

.jovi-fp__desc p {
	margin: 0 0 var(--jovi-space-3);
}

.jovi-fp__desc :is(p, li):last-child {
	margin-bottom: 0;
}

/* Sin descripción, el texto es una invitación a preguntar: se marca como tal, no como si
   fuera la ficha técnica que falta. */
.jovi-fp__sin-desc {
	padding: var(--jovi-space-4);
	border-left: 3px solid var(--jovi-red);
	background: var(--jovi-surface);
	border-radius: 0 var(--jovi-radius-sm) var(--jovi-radius-sm) 0;
}

/* --- Botones --- */

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jovi-space-3);
	align-items: center;
	margin: var(--jovi-space-6) 0 0 !important;
}

.single-product form.cart .quantity input {
	height: 56px;
	width: 5rem;
	padding: 0 10px;
	border: 1px solid var(--jovi-border);
	border-radius: var(--jovi-radius);
	font-size: 1rem;
	text-align: center;
}

.single-product form.cart button[type="submit"] {
	flex: 1;
	min-width: 12rem;
	min-height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--jovi-radius);
	background: var(--jovi-red);
	color: var(--jovi-white);
	font-family: var(--jovi-font-display);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--jovi-duration) var(--jovi-ease);
}

.single-product form.cart button[type="submit"]:hover {
	background: var(--jovi-red-strong);
}

.jovi-fp__compat {
	display: block;
	margin-top: var(--jovi-space-3);
	padding: 15px 20px;
	border: 1px solid var(--jovi-border);
	border-radius: var(--jovi-radius);
	font-family: var(--jovi-font-display);
	font-size: var(--jovi-text-sm);
	font-weight: 600;
	text-align: center;
	color: var(--jovi-graphite);
	text-decoration: none;
	transition: border-color var(--jovi-duration) var(--jovi-ease), color var(--jovi-duration) var(--jovi-ease);
}

.jovi-fp__compat:hover,
.jovi-fp__compat:focus-visible {
	border-color: var(--jovi-whatsapp);
	color: var(--jovi-whatsapp-hover);
	text-decoration: none;
}

/* --- Especificaciones --- */

.jovi-fp__specs {
	margin-top: var(--jovi-space-8);
}

.jovi-fp__specs h2 {
	margin: 0 0 var(--jovi-space-3);
	font-size: 1.0625rem;
	color: var(--jovi-graphite);
}

.jovi-fp__specs dl {
	margin: 0;
	border: 1px solid var(--jovi-border);
	border-radius: var(--jovi-radius);
	overflow: hidden;
}

.jovi-fp__specs dl > div {
	display: grid;
	grid-template-columns: 40% minmax(0, 1fr);
	gap: var(--jovi-space-3);
	padding: 12px var(--jovi-space-4);
	font-size: var(--jovi-text-sm);
}

.jovi-fp__specs dl > div + div {
	border-top: 1px solid var(--jovi-border);
}

.jovi-fp__specs dt {
	margin: 0;
	color: var(--jovi-muted);
}

.jovi-fp__specs dd {
	margin: 0;
	font-weight: 500;
	color: var(--jovi-graphite);
}

/* --- Relacionados --- */

.single-product .related {
	clear: both;
	padding-top: var(--jovi-space-12);
	border-top: 1px solid var(--jovi-border);
}

.single-product .related > h2 {
	margin: 0 0 var(--jovi-space-6);
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
	color: var(--jovi-graphite);
}

/* El código de inventario: dato de apoyo, no titular. Es lo que la persona dicta por WhatsApp
   para que le confirmen de qué artículo habla. */
.jovi-fp__sku {
	margin: var(--jovi-space-4) 0 0;
	font-size: var(--jovi-text-xs);
	color: var(--jovi-muted);
}

.jovi-fp__sku span {
	font-family: var(--jovi-font-display);
	font-weight: 600;
	color: var(--jovi-graphite);
}

/*
 * Los relacionados venían con `ct-hidden-sm ct-hidden-md` del Customizer de Blocksy: solo se
 * veían en escritorio. En una tienda cuyo tráfico es mayoritariamente móvil, esconder
 * "Complementá tu compra" justo ahí es perder la venta cruzada donde más ocurre.
 *
 * Se revierte **solo para esta sección**, no para las clases en general: son utilidades del
 * tema y puede haber otras cosas que sí deban esconderse en móvil.
 */
/* Las utilidades de visibilidad de Blocksy usan `!important`, así que hay que responder en el
   mismo idioma. Es de los pocos casos donde se justifica. */
.single-product .related.ct-hidden-sm,
.single-product .related.ct-hidden-md {
	display: block !important;
}