/**
 * Tienda (WooCommerce): catálogo, ficha, carrito, pago, pedido recibido, minicarrito, «Mi cuenta» clásica,
 * cabecera del pago y «Próximamente».
 *
 * La carga functions.php (handle jl-woocommerce) solo con WooCommerce activo. Móvil primero; ordenador desde
 * 782 px. Solo variables de theme.json: ningún color escrito a mano.
 * Sobre fondo oscuro los errores van en rosa (9,75:1) y con su icono: el rojo de WooCommerce no llega a 4,5:1.
 * WooCommerce pinta casi todo en blanco con letra oscura; aquí se pasa a fondo oscuro con letra clara.
 * Donde hace falta ganar a WooCommerce se sube la especificidad con «body» en vez de usar !important.
 */

/* ------------------------------------------------------------------------------------------------------------
 * 1. Variables de WooCommerce (formularios clásicos, avisos y botones) con los colores del tema.
 * --------------------------------------------------------------------------------------------------------- */

body {
	--wc-primary: var(--wp--preset--color--rosa);
	--wc-primary-text: var(--wp--preset--color--tinta);
	--wc-secondary: var(--wp--preset--color--ciruela);
	--wc-secondary-text: var(--wp--preset--color--blanco-roto);
	--wc-highlight: var(--wp--preset--color--rosa);
	--wc-highligh-text: var(--wp--preset--color--tinta);
	--wc-content-bg: var(--wp--preset--color--negro);
	--wc-subtext: var(--wp--preset--color--gris-rosado);
	--wc-red: var(--wp--preset--color--rosa);
	--wc-destructive: var(--wp--preset--color--rosa);
	--wc-green: var(--wp--custom--color--borde-campo);
	--wc-separator-color: var(--wp--preset--color--borde);
	--wc-form-color-background: var(--wp--preset--color--ciruela);
	--wc-form-color-text: var(--wp--preset--color--blanco-roto);
	--wc-form-border-color: var(--wp--custom--color--borde-campo);
	--wc-form-border-width: 1px;
	--wc-form-border-radius: 0;
	--wc-card-border-radius: 0;
}

/* ------------------------------------------------------------------------------------------------------------
 * 2. Piezas comunes: foco, migas, avisos, precio, oferta, existencias y buscador.
 * --------------------------------------------------------------------------------------------------------- */

/* Foco visible en todo lo que se pulsa y no es enlace ni botón del tema. */
body :is(
	.wc-block-product-filter-chips__item,
	.wc-block-components-quantity-selector__button,
	.wc-block-components-quantity-selector__input,
	.wc-block-next-previous-buttons__button,
	.wc-block-product-gallery-dialog__close-button,
	.wc-block-components-drawer__close,
	.wc-block-components-panel__button,
	.wc-block-cart-item__remove-link,
	.wc-block-components-totals-coupon-link,
	.wc-block-mini-cart__button,
	.wp-block-accordion-heading__toggle,
	.wc-block-components-product-image a,
	.wp-block-post-title a,
	.wp-block-query-pagination a,
	.woocommerce-MyAccount-navigation a,
	.jl-tienda-volver a
):focus-visible {
	outline: 2px solid var(--wp--preset--color--rosa);
	outline-offset: 3px;
	box-shadow: none;
}

/* El botón de bloques trae un halo azul propio de WooCommerce y cantidades un
   borde interior. La mayor especificidad conserva el foco de la marca. */
body .wc-block-components-button:not(.is-link):focus-visible,
body .wc-block-components-quantity-selector :is(.wc-block-components-quantity-selector__button, .wc-block-components-quantity-selector__input):focus-visible {
	outline: 2px solid var(--wp--preset--color--rosa);
	outline-offset: 3px;
	box-shadow: none;
}

/* Campos: borde de 3:1, letra clara y foco con contorno rosa. */
body :is(
	.wc-block-catalog-sorting select,
	.wp-block-search__input,
	.wc-block-components-textarea,
	.wc-block-gateway-input,
	.woocommerce form .input-text,
	.woocommerce form select
):focus-visible {
	outline: 2px solid var(--wp--preset--color--rosa);
	outline-offset: 2px;
}

/* Migas de pan. */
.jl-tienda-migas,
.wp-block-woocommerce-breadcrumbs {
	margin-block: 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--gris-rosado);
	font-size: var(--wp--preset--font-size--pequeno);
	text-align: left;
}

/* El gris de WooCommerce (.woocommerce .woocommerce-breadcrumb) no llega a 4,5:1 sobre negro. */
body .wc-block-breadcrumbs .woocommerce-breadcrumb {
	margin: 0;
	color: var(--wp--preset--color--gris-rosado);
	font-size: inherit;
}

body .wc-block-breadcrumbs .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--blanco-roto);
	text-decoration: underline;
}

body .wc-block-breadcrumbs .woocommerce-breadcrumb a:hover,
body .wc-block-breadcrumbs .woocommerce-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--rosa);
	text-decoration: underline;
}

/* Avisos de la tienda (bloques y clásicos de «Mi cuenta»). */
.wp-block-woocommerce-store-notices {
	text-align: left;
}

body .wc-block-components-notice-banner {
	border: 1px solid var(--wp--custom--color--borde-campo);
	border-radius: 0;
	background-color: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
	font-size: var(--wp--preset--font-size--pequeno);
	text-align: left;
}

body .wc-block-components-notice-banner:is(.is-error, .is-warning, .is-success, .is-info) {
	background-color: var(--wp--preset--color--ciruela);
}

body .wc-block-components-notice-banner:is(.is-error, .is-warning, .is-success, .is-info) {
	border-color: var(--wp--preset--color--rosa);
}

body .wc-block-components-notice-banner > svg,
body .wc-block-components-notice-banner:is(.is-error, .is-warning, .is-success, .is-info) > svg {
	background-color: var(--wp--preset--color--rosa);
	fill: var(--wp--preset--color--tinta);
}

/* WooCommerce pone el color de estos enlaces con !important; hay que igualarlo para que se lean. */
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward,
body .wc-block-components-notice-banner > .wc-block-components-button {
	color: var(--wp--preset--color--rosa) !important;
	opacity: 1;
}

body :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) {
	border-top: 2px solid var(--wp--preset--color--rosa);
	background-color: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
	font-size: var(--wp--preset--font-size--pequeno);
	text-align: left;
}

body :is(.woocommerce-error, .woocommerce-info, .woocommerce-message)::before {
	color: var(--wp--preset--color--rosa);
}

body :is(.woocommerce-store-notice, p.demo_store) {
	background-color: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
}

body :is(.woocommerce-store-notice, p.demo_store) a {
	color: var(--wp--preset--color--tinta);
}

/* Precio: rosa; el tachado, en gris rosado. */
.wc-block-components-product-price,
.woocommerce .price {
	color: var(--wp--preset--color--rosa);
}

.wc-block-components-product-price del,
.woocommerce .price del {
	color: var(--wp--preset--color--gris-rosado);
	opacity: 1;
}

.wc-block-components-product-price ins,
.woocommerce .price ins {
	text-decoration: none;
}

/* Etiqueta de oferta: rosa macizo, sin redondeo. */
body .wc-block-components-product-sale-badge {
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--rotulo);
	font-weight: 700;
	letter-spacing: 2px;
	padding: 0.35em 0.8em;
	text-transform: uppercase;
}

/* Existencias. */
.wc-block-components-product-stock-indicator {
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.wc-block-components-product-stock-indicator--out-of-stock {
	color: var(--wp--preset--color--rosa);
}

/* Buscador de productos (clases encadenadas para ganar al ancho de la maquetación del núcleo). */
.wp-block-search.jl-tienda-buscador {
	max-width: 30rem;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--40);
}

.jl-tienda-buscador .wp-block-search__input {
	min-height: 44px;
	border: 1px solid var(--wp--custom--color--borde-campo);
	border-radius: 0;
	background: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
	padding: 0.75em 1em;
}

.jl-tienda-buscador .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--gris-rosado);
	opacity: 1;
}

/* ------------------------------------------------------------------------------------------------------------
 * 3. Catálogo, búsqueda y relacionados: cabecera, barra y tarjetas de producto.
 * --------------------------------------------------------------------------------------------------------- */

/* Secciones de la tienda: menos aire arriba que las de las páginas, para llegar antes a los productos y a los
   formularios (tres clases, para ganar a «.wp-block-group.jl-seccion» de tema.css). */
.wp-block-group.jl-seccion:is(.jl-tienda-catalogo, .jl-tienda-producto, .jl-tienda-carrito, .jl-tienda-pago, .jl-tienda-pedido) {
	padding-top: var(--wp--preset--spacing--50);
}

/* Cabecera del catálogo y de la búsqueda: el título es un «Título de la consulta», no un Título; se le da
   el mismo hueco hasta la entradilla que a las cabeceras de página (tema.css). */
.wp-block-group.jl-tienda-titulo > .wp-block-query-title {
	margin-block-end: 25px;
}

.wp-block-term-description.jl-tienda-descripcion {
	max-width: 600px;
	margin-inline: auto;
	color: var(--wp--preset--color--texto-suave);
	line-height: 1.8;
}

/* Categorías de la tienda: una fila de enlaces que salta de línea, con «Todo» delante y la actual en rosa
   (functions.php). Mismo aspecto que los botones de variante; 44 px de zona táctil. */
.wp-block-group.jl-tienda-categorias {
	margin-block: 0 var(--wp--preset--spacing--40);
	text-align: left;
}

.jl-tienda-categorias ul.wc-block-product-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jl-tienda-categorias li.wc-block-product-categories-list-item {
	margin: 0;
}

.jl-tienda-categorias .wc-block-product-categories-list-item a {
	box-sizing: border-box; /* los 44 px, con el relleno y el borde dentro */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5em 0.8em;
	border: 1px solid var(--wp--custom--color--borde-campo);
	color: var(--wp--preset--color--blanco-roto);
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.3;
	text-decoration: none;
}

@media (min-width: 600px) {
	.jl-tienda-categorias .wc-block-product-categories-list-item a {
		padding-inline: 1.1em;
	}
}

.jl-tienda-categorias .wc-block-product-categories-list-item a:hover {
	border-color: var(--wp--preset--color--rosa);
}

.jl-tienda-categorias .wc-block-product-categories-list-item a[aria-current] {
	border-color: var(--wp--preset--color--rosa);
	background: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
}

.jl-tienda-barra {
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--gris-rosado);
	font-size: var(--wp--preset--font-size--pequeno);
	text-align: left;
}

.jl-tienda-barra .woocommerce-result-count,
.jl-tienda-barra p {
	margin: 0;
}

/* 16 px: con menos, Safari del iPhone amplía la página al tocarlo. Selector más concreto que el de WooCommerce. */
body .woocommerce.wc-block-catalog-sorting select.orderby {
	min-height: 44px;
	border: 1px solid var(--wp--custom--color--borde-campo);
	border-radius: 0;
	background-color: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
	font-size: var(--wp--preset--font-size--texto);
	padding: 0 1em;
}

/* Opciones de los desplegables de la tienda (Chrome y Edge las pintan con estos colores). */
body :is(.woocommerce, .wc-block-catalog-sorting, .wc-blocks-components-select) select option {
	background-color: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
}

/* Rejilla: 2 columnas en el móvil, 3 en el ordenador. */
.jl-tienda-productos .wc-block-product-template.wc-block-product-template__responsive {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tarjeta como las del concepto: fondo ciruela, borde, foto 4:5, nombre en Playfair, precio rosa y botón con borde. */
.jl-tienda-productos .wc-block-product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--borde);
	background: var(--wp--preset--color--ciruela);
	color: var(--wp--custom--color--texto-tarjeta);
	padding-bottom: var(--wp--preset--spacing--30);
	text-align: center;
}

.jl-tienda-productos .wc-block-components-product-image {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* Sin existencias también se reconoce antes de entrar en la ficha. La etiqueta de oferta va al otro lado. */
.jl-tienda-productos .wc-block-product.outofstock .wc-block-components-product-image::after {
	content: "Agotado";
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	padding: 0.35em 0.8em;
	background: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--rotulo);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
	pointer-events: none;
}

/* WooCommerce pone la proporción en línea según el recorte de miniaturas (1:1 de serie): se fuerza 4:5. */
.jl-tienda-productos .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5 !important;
	object-fit: cover;
}

/* El foco de la foto, por dentro: la tarjeta recorta lo que sale (overflow: hidden). */
.jl-tienda-productos .wc-block-components-product-image a:focus-visible {
	outline-offset: -2px;
}

.jl-tienda-productos .wc-block-product .wp-block-post-title {
	margin: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 400;
	line-height: 1.3;
}

.jl-tienda-productos .wc-block-product .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.jl-tienda-productos .wc-block-product .wp-block-post-title a:hover {
	color: var(--wp--preset--color--rosa);
}

.jl-tienda-productos .wc-block-product .wc-block-components-product-price {
	margin: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--pequeno);
}

.jl-tienda-productos .wc-block-components-product-button {
	margin-top: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

/* El botón de la tarjeta, con borde (el macizo queda para la ficha). */
.jl-tienda-productos .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--rosa);
	background: transparent;
	color: var(--wp--preset--color--rosa);
	font-size: var(--wp--preset--font-size--rotulo);
	padding: 0.75em 1em;
}

.jl-tienda-productos .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
}

.jl-tienda-productos .added_to_cart {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--rosa);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* Paginación. */
.jl-tienda-productos .wp-block-query-pagination {
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--pequeno);
}

.jl-tienda-productos .wp-block-query-pagination :is(a, .page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--wp--preset--color--blanco-roto);
	text-decoration: none;
}

.jl-tienda-productos .wp-block-query-pagination .page-numbers.current {
	border: 1px solid var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--rosa);
}

.jl-tienda-productos .wp-block-query-pagination a:hover {
	color: var(--wp--preset--color--rosa);
}

/* Sin resultados. */
.jl-tienda-sin-resultados {
	padding-block: var(--wp--preset--spacing--50);
	text-align: center;
}

.jl-tienda-sin-resultados .jl-acciones {
	justify-content: center;
}

/* Relacionados: sin sección alrededor, para que no quede una franja vacía si no hay ninguno. */
.jl-tienda-relacionados {
	padding-block: var(--wp--preset--spacing--60);
	text-align: center;
}

.jl-tienda-relacionados > .wp-block-heading {
	margin: 14px 0 38px;
}

/* ------------------------------------------------------------------------------------------------------------
 * 4. Ficha de producto: galería, datos, variantes en botones, cantidad y detalles.
 * --------------------------------------------------------------------------------------------------------- */

.jl-tienda-ficha {
	gap: var(--wp--preset--spacing--50);
}

.jl-tienda-ficha__datos .wp-block-post-title {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--titulo);
}

.jl-tienda-ficha__datos .wc-block-components-product-price {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--grande);
}

.jl-tienda-resumen {
	color: var(--wp--preset--color--texto-suave);
	line-height: 1.8;
}

.jl-tienda-categorias {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--gris-rosado);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* Galería: hueco 4:5 como las fotos de producto, fondo ciruela mientras carga. */
.jl-tienda-ficha .wc-block-product-gallery-large-image {
	background: var(--wp--preset--color--ciruela);
}

.jl-tienda-ficha .wc-block-product-gallery-large-image__wrapper {
	aspect-ratio: 4 / 5;
}

.jl-tienda-ficha .wc-block-next-previous-buttons__button {
	width: 44px;
	height: 44px;
	background: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
}

.wc-block-product-gallery-thumbnails__thumbnail__image:focus-visible {
	outline-offset: -2px;
}

/* Vista ampliada: oscura, como el resto. */
.wc-block-product-gallery-dialog {
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco-roto);
}

.wc-block-product-gallery-dialog__close-button {
	min-width: 44px;
	min-height: 44px;
	fill: var(--wp--preset--color--blanco-roto);
}

/* Añadir al carrito con opciones. */
.wc-block-add-to-cart-with-options {
	margin-block: var(--wp--preset--spacing--40);
}

/* Antes de elegir todas las opciones WooCommerce usa la clase disabled, sin
   atributo disabled. Su opacidad al 50 % pierde contraste: se distingue por el
   fondo oscuro y el borde, manteniendo legible la indicación del botón. */
body .wc-block-add-to-cart-with-options .wp-block-button__link.disabled {
	opacity: 1;
	background-color: var(--wp--preset--color--borde);
	border-color: var(--wp--custom--color--borde-campo);
	color: var(--wp--preset--color--gris-rosado);
}

.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	color: var(--wp--preset--color--rosa);
	font-size: var(--wp--preset--font-size--rotulo);
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Variantes (curva, grosor, largo) en botones rectos de 44 px. */
.wc-block-add-to-cart-with-options .wp-block-woocommerce-product-filter-chips {
	font-size: var(--wp--preset--font-size--pequeno);
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__items {
	gap: var(--wp--preset--spacing--20);
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item {
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--wp--custom--color--borde-campo);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--blanco-roto);
	padding: 0.5em 1.1em;
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item:hover:not(:disabled) {
	border-color: var(--wp--preset--color--rosa);
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item[aria-checked="true"] {
	border-color: var(--wp--preset--color--rosa);
	background: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
}

.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item:focus:not(:focus-visible) {
	outline: none;
}

.wp-block-woocommerce-add-to-cart-with-options-variation-description {
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

.wc-block-add-to-cart-with-options .wp-block-group:has(> .wp-block-woocommerce-product-button) {
	gap: var(--wp--preset--spacing--20);
}

/* Cantidad: recta, con botones de 44 px. */
body :is(.wc-block-add-to-cart-with-options__quantity-selector, .wc-block-components-quantity-selector) {
	border-color: var(--wp--custom--color--borde-campo);
	border-radius: 0;
}

body .wc-block-add-to-cart-with-options__quantity-selector {
	border: 1px solid var(--wp--custom--color--borde-campo);
}

body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 44px;
	min-height: 44px;
	color: var(--wp--preset--color--blanco-roto);
	opacity: 1;
}

body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	min-height: 44px;
	color: var(--wp--preset--color--blanco-roto);
	font-size: var(--wp--preset--font-size--texto);
}

/* En el carrito móvil, la celda de producto mide unos 132 px. El control de 158 px forzaba el ancho de toda
   la tabla y dejaba el total fuera de pantalla. Conserva 44 px de alto y 16 px de letra; solo se estrecha aquí. */
@media (max-width: 600px) {
	body :is(.wc-block-cart-items, .wc-block-mini-cart__items) .wc-block-cart-item__product {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	body :is(.wc-block-cart-items, .wc-block-mini-cart__items) .wc-block-components-quantity-selector {
		width: fit-content;
		min-width: 0;
		max-width: 100%;
	}

	body :is(.wc-block-cart-items, .wc-block-mini-cart__items) .wc-block-components-quantity-selector__button {
		flex: 0 0 36px;
		width: 36px;
		min-width: 36px;
		min-height: 44px;
	}

	body :is(.wc-block-cart-items, .wc-block-mini-cart__items) input.wc-block-components-quantity-selector__input {
		box-sizing: border-box;
		flex: 0 1 2.6rem;
		width: 2.6rem;
		min-width: 0;
		padding-inline: 0;
	}
}

/* Detalles en acordeón (descripción y características; WooCommerce oculta las que vienen vacías). */
.wp-block-woocommerce-product-details.jl-tienda-detalles {
	max-width: var(--wp--style--global--content-size);
	margin-block: 0 var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--borde);
}

.jl-tienda-detalles .wp-block-accordion-item {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.jl-tienda-detalles .wp-block-accordion-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--grande);
}

.jl-tienda-detalles .wp-block-accordion-heading__toggle {
	min-height: 44px;
	padding-block: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--blanco);
}

.jl-tienda-detalles .wp-block-accordion-heading__toggle-icon {
	color: var(--wp--preset--color--rosa);
	font-family: var(--wp--preset--font-family--texto);
}

.jl-tienda-detalles .wp-block-accordion-panel {
	padding-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--texto-suave);
}

.jl-tienda-detalles table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--pequeno);
}

.jl-tienda-detalles :is(th, td) {
	border-bottom: 1px solid var(--wp--preset--color--borde);
	padding: 0.75em 0.75em 0.75em 0;
	text-align: left;
	vertical-align: top;
}

.jl-tienda-detalles th {
	color: var(--wp--preset--color--gris-rosado);
	font-weight: 400;
}

/* Aviso del modo escaparate (lo añade el plugin tras «Añadir al carrito»). */
.jl-tienda-aviso {
	margin-block: var(--wp--preset--spacing--30);
	border-left: 2px solid var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--pequeno);
	padding: 0.75em 1em;
}

/* Escaparate, producto con variantes: sus opciones a la vista, sin elegir (las pinta el plugin en lugar del selector,
   que WooCommerce no enseña si no se puede comprar). Con el aspecto de los botones de variante, pero sin ser botones. */
.jl-tienda-opciones {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.jl-tienda-opciones dl,
.jl-tienda-opciones dd {
	margin: 0;
}

.jl-tienda-opciones__grupo + .jl-tienda-opciones__grupo {
	margin-block-start: var(--wp--preset--spacing--30);
}

.jl-tienda-opciones dt {
	color: var(--wp--preset--color--rosa);
	font-size: var(--wp--preset--font-size--rotulo);
	letter-spacing: 2px;
	text-transform: uppercase;
}

.jl-tienda-opciones ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.jl-tienda-opciones li {
	border: 1px solid var(--wp--custom--color--borde-campo);
	color: var(--wp--preset--color--blanco-roto);
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.4;
	padding: 0.5em 1.1em;
}

.jl-tienda-opciones__agotado {
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--texto-suave);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* Modo escaparate: sin minicarrito ni compra (el plugin ya quita el carrito y el pago). */
body.jl-tienda-escaparate :is(.wp-block-woocommerce-mini-cart, .wc-block-mini-cart),
body.jl-tienda-escaparate .wc-block-add-to-cart-with-options :is(.wc-block-add-to-cart-with-options__quantity-selector, .wp-block-woocommerce-product-button) {
	display: none;
}

/* ------------------------------------------------------------------------------------------------------------
 * 5. Carrito, pago y minicarrito (bloques de WooCommerce) sobre fondo oscuro.
 * --------------------------------------------------------------------------------------------------------- */

.jl-tienda-ancho > .wp-block-post-title {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
}

/* Campos de texto. */
body .wc-block-components-form .wc-block-components-text-input :is(input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"]),
body .wc-block-components-text-input :is(input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"]) {
	border: 1px solid var(--wp--custom--color--borde-campo);
	border-radius: 0;
	background-color: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
}

body .wc-block-components-form .wc-block-components-text-input :is(input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"]):focus,
body .wc-block-components-text-input :is(input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"]):focus {
	border-color: var(--wp--preset--color--rosa);
	background-color: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
	outline: 2px solid var(--wp--preset--color--rosa);
	outline-offset: 2px;
}

body .wc-block-components-form .wc-block-components-text-input label,
body .wc-block-components-text-input label {
	color: var(--wp--preset--color--texto-suave);
}

body .wc-block-components-text-input .wc-block-components-text-input__date-icon {
	color: var(--wp--preset--color--blanco-roto);
}

/* Errores: borde, etiqueta y mensaje en rosa, con el icono de WooCommerce. */
body .wc-block-components-form .wc-block-components-text-input.has-error input,
body .wc-block-components-text-input.has-error input,
body .has-error .wc-blocks-components-select .wc-blocks-components-select__container {
	border-color: var(--wp--preset--color--rosa);
}

body .wc-block-components-form .wc-block-components-text-input.has-error label,
body .wc-block-components-text-input.has-error label,
body .wc-block-components-validation-error,
body .wc-block-components-checkbox.has-error,
body .wc-block-components-checkbox.has-error a {
	color: var(--wp--preset--color--rosa);
}

body .wc-block-components-validation-error {
	font-size: var(--wp--preset--font-size--pequeno);
}

/* Desplegables (país, provincia). */
body .wc-blocks-components-select .wc-blocks-components-select__container {
	border-radius: 0;
	background: var(--wp--preset--color--ciruela);
}

body .wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid var(--wp--custom--color--borde-campo);
	border-radius: 0;
	color: var(--wp--preset--color--blanco-roto);
}

body .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--rosa);
	outline: 2px solid var(--wp--preset--color--rosa);
	outline-offset: 2px;
}

body .wc-blocks-components-select .wc-blocks-components-select__label {
	color: var(--wp--preset--color--texto-suave);
}

/* Notas del pedido. */
body .wc-block-components-textarea,
body .wc-block-components-textarea:not(:placeholder-shown),
body .wc-block-components-textarea:focus {
	border: 1px solid var(--wp--custom--color--borde-campo);
	border-radius: 0;
	background-color: var(--wp--preset--color--ciruela);
	box-shadow: none;
	color: var(--wp--preset--color--blanco-roto);
}

/* Casillas y opciones. */
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1px solid var(--wp--custom--color--borde-campo);
	border-radius: 0;
	background-color: var(--wp--preset--color--ciruela);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--rosa);
	background: var(--wp--preset--color--rosa);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--tinta);
}

body .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input,
body .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:focus {
	border-color: var(--wp--preset--color--rosa);
	outline-color: var(--wp--preset--color--rosa);
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input:focus-visible,
body .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--rosa);
	outline-offset: 3px;
}

body .wc-block-components-radio-control .wc-block-components-radio-control__input {
	border: 1px solid var(--wp--custom--color--borde-campo);
	background: var(--wp--preset--color--ciruela);
}

body .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--rosa);
}

body .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--rosa);
}

body .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected {
	background: var(--wp--preset--color--ciruela);
	border-color: var(--wp--preset--color--rosa);
}

/* Pasarela y sugerencias de dirección. */
body .wc-block-gateway-container,
body .wc-block-gateway-container:focus,
body .wc-block-gateway-container .wc-block-gateway-input,
body .wc-block-gateway-container .wc-block-gateway-input:focus {
	border-radius: 0;
	background-color: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
}

body .wc-block-gateway-container .wc-block-gateway-input {
	border-color: var(--wp--custom--color--borde-campo);
}

body .wc-block-gateway-container label {
	color: var(--wp--preset--color--texto-suave);
}

body .wc-block-components-address-autocomplete-suggestions {
	border: 1px solid var(--wp--custom--color--borde-campo);
	border-radius: 0;
	background: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
}

/* Botones de texto de WooCommerce (vienen en gris oscuro). */
body .wc-block-components-button:not(.is-link).text {
	color: var(--wp--preset--color--blanco-roto);
}

/* Títulos de pasos y líneas del carrito. */
.wc-block-components-checkout-step__title,
.wc-block-components-title.wc-block-components-title {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 400;
}

.wc-block-components-checkout-step__description,
.wc-block-components-product-metadata,
.wc-block-checkout__terms {
	color: var(--wp--preset--color--texto-suave);
}

/* La descripción abreviada se cortaba a mitad de palabra. Nombre, variantes y precio siguen a la vista. */
:is(.wc-block-cart, .wc-block-checkout, .wc-block-mini-cart__items) .wc-block-components-product-metadata__description {
	display: none;
}

body .wc-block-components-order-summary {
	border-radius: 0;
}

/* «Ahorra…», con la misma etiqueta recta y rosa que la oferta de la ficha. */
body .wc-block-components-product-badge {
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--rotulo);
	font-weight: 700;
	padding: 0.35em 0.6em;
	white-space: normal;
}

.wc-block-cart-items th,
.wc-block-cart .wc-block-cart__totals-title {
	color: var(--wp--preset--color--gris-rosado);
	font-size: var(--wp--preset--font-size--rotulo);
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.wc-block-components-product-name {
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--titulares);
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--wp--preset--color--rosa);
}

body .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--gris-rosado);
	font-size: var(--wp--preset--font-size--pequeno);
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	border: 0;
	background: var(--wp--preset--color--rosa);
	box-shadow: none;
	color: var(--wp--preset--color--tinta);
}

body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	color: var(--wp--preset--color--tinta);
}

/* Botón de pagar fijo abajo en el móvil: fondo oscuro, no blanco. */
@media (max-width: 781px) {
	body .wc-block-cart .wc-block-cart__submit-container--sticky {
		border-top: 1px solid var(--wp--custom--color--linea-cabecera);
		background: var(--wp--preset--color--negro);
	}
}

/* Minicarrito: el botón y su contador los estiliza la cabecera (tema.css); aquí, el panel que se abre. */
/* El cajón cerrado sigue montado fuera de pantalla. Ocultarlo también en CSS
   impide que Tab alcance sus enlaces mientras aria-hidden lo excluye del lector.
   Al abrir, WooCommerce cambia aria-hidden y recupera su animación habitual. */
body .wc-block-mini-cart__drawer[aria-hidden="true"] {
	visibility: hidden;
}

body .wc-block-components-drawer,
.wp-block-woocommerce-mini-cart-contents {
	background: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--blanco-roto);
}

body .wc-block-components-drawer__close {
	min-width: 44px;
	min-height: 44px;
	opacity: 1;
}

.wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 400;
}

body .wc-block-mini-cart__shopping-button a:is(:hover, :focus) {
	border-color: var(--wp--preset--color--rosa);
	background-color: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
}

/* ------------------------------------------------------------------------------------------------------------
 * 6. Pedido recibido.
 * --------------------------------------------------------------------------------------------------------- */

.wc-block-order-confirmation-status h1 {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.wc-block-order-confirmation-status p {
	color: var(--wp--preset--color--texto-suave);
}

.wc-block-order-confirmation-summary {
	margin-block: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	background: var(--wp--preset--color--ciruela);
	padding: var(--wp--preset--spacing--30);
}

.wc-block-order-confirmation-summary ul {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-order-confirmation-summary-list-item__key {
	display: block;
	color: var(--wp--preset--color--gris-rosado);
	font-size: var(--wp--preset--font-size--rotulo);
	letter-spacing: 2px;
	text-transform: uppercase;
}

.jl-tienda-pedido .wp-block-heading {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--grande);
}

.jl-tienda-pedido table {
	width: 100%;
	border-collapse: collapse;
}

.jl-tienda-pedido :is(th, td) {
	border-bottom: 1px solid var(--wp--preset--color--borde);
	padding: 0.75em 0.75em 0.75em 0;
	text-align: left;
}

/* Direcciones de envío y facturación: una bajo otra en el móvil, lado a lado en el ordenador. */
.wp-block-columns.jl-tienda-direcciones {
	gap: var(--wp--preset--spacing--40);
}

.jl-tienda-pedido address {
	border: 1px solid var(--wp--preset--color--borde);
	color: var(--wp--preset--color--texto-suave);
	font-style: normal;
	padding: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------------------------------------------------
 * 7. «Mi cuenta» clásica (atajo de WooCommerce en la plantilla «page»).
 * --------------------------------------------------------------------------------------------------------- */

/* Menú arriba, en botones con borde que saltan de línea (la columna es estrecha para dos columnas). */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid var(--wp--custom--color--borde-campo);
	color: var(--wp--preset--color--blanco-roto);
	font-size: var(--wp--preset--font-size--rotulo);
	letter-spacing: 1px;
	padding: 0 1em;
	text-decoration: none;
	text-transform: uppercase;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	border-color: var(--wp--preset--color--rosa);
}

body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	border-color: var(--wp--preset--color--rosa);
	background: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
}

.woocommerce-MyAccount-content mark {
	background: transparent;
	color: var(--wp--preset--color--rosa);
	font-weight: 700;
}

/* Los formularios y enlaces clásicos de la cuenta no reciben el botón de bloques del tema. */
body.woocommerce-account .woocommerce-MyAccount-content :is(a.button, button.button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	max-width: 100%;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 700;
	line-height: 1.3;
	padding: 15px 25px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: normal;
}

body.woocommerce-account .woocommerce-MyAccount-content :is(a.button, button.button):hover {
	background: var(--wp--preset--color--blanco-roto);
	color: var(--wp--preset--color--tinta);
}

body.woocommerce-account .woocommerce-MyAccount-content :is(a.button, button.button):focus-visible {
	outline: 2px solid var(--wp--preset--color--blanco-roto);
	outline-offset: 3px;
}

/* Historial propio: cada visita conserva su servicio, estado y acciones en la misma tarjeta. */
body.woocommerce-account .jl-clientas-citas {
	margin-block-start: var(--wp--preset--spacing--50);
}

body.woocommerce-account .jl-clientas-cita {
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--borde);
	background: var(--wp--preset--color--ciruela);
	overflow-wrap: anywhere;
}

body.woocommerce-account .jl-clientas-cita > :first-child {
	margin-block-start: 0;
}

body.woocommerce-account .jl-clientas-cita > :last-child {
	margin-block-end: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content :is(#jl-resena-puntuacion, #jl-resena-texto) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-block-start: 0.5em;
	font-size: var(--wp--preset--font-size--texto);
}

body.woocommerce-account #jl-resena-texto {
	resize: vertical;
}

/* Tablas de pedidos y descargas. */
body .woocommerce table.shop_table {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 0;
}

body .woocommerce table.shop_table :is(th, td) {
	border-color: var(--wp--preset--color--borde);
}

body .woocommerce table.shop_table th {
	color: var(--wp--preset--color--gris-rosado);
	font-size: var(--wp--preset--font-size--rotulo);
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Formularios clásicos: los colores salen de las variables del apartado 1. */
body .woocommerce form .form-row label {
	color: var(--wp--preset--color--texto-suave);
}

body .woocommerce form .form-row :is(.input-text, select) {
	min-height: 44px;
	font-size: var(--wp--preset--font-size--texto);
	padding: 0.75em 1em;
}

/* Ojo de «Mostrar contraseña»: WooCommerce lo dibuja casi negro y a 22 px; sobre ciruela no se ve. */
body .woocommerce form .show-password-input {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	right: 0;
}

body .woocommerce form .show-password-input::before {
	filter: invert(1);
}

body .woocommerce form .password-input .input-text {
	padding-right: 48px;
}

body .woocommerce :is(form.login, form.register, form.checkout_coupon, form.lost_reset_password) {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 0;
	background: var(--wp--preset--color--ciruela);
	padding: var(--wp--preset--spacing--40);
}

/* Desplegable de país (select2): la opción elegida no puede quedar en gris claro con letra clara. */
body .select2-container--default .select2-results__option[aria-selected="true"],
body .select2-container--default .select2-results__option[data-selected="true"] {
	background-color: var(--wp--preset--color--borde);
	color: var(--wp--preset--color--blanco-roto);
}

body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
}

/* Fuerza de la contraseña: WooCommerce pone fondos claros; la letra, oscura. */
.woocommerce-password-strength {
	color: var(--wp--preset--color--tinta);
}

.woocommerce-password-hint {
	color: var(--wp--preset--color--texto-suave);
}

/* Direcciones guardadas. */
.woocommerce-Address address,
.woocommerce-customer-details address {
	color: var(--wp--preset--color--texto-suave);
	font-style: normal;
}

.woocommerce-Address-title :is(h2, h3),
.woocommerce-column__title,
.woocommerce-order-details__title {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--grande);
	font-weight: 400;
}

/* Quitar del carrito clásico: WooCommerce pone rojo y blanco con !important; blanco sobre rosa no se lee. */
body .woocommerce a.remove:hover {
	color: var(--wp--preset--color--tinta) !important;
}

/* ------------------------------------------------------------------------------------------------------------
 * 8. Cabecera del pago (parte checkout-header).
 * --------------------------------------------------------------------------------------------------------- */

.jl-tienda-cabecera {
	border-bottom: 1px solid var(--wp--custom--color--linea-cabecera);
	padding-block: var(--wp--preset--spacing--30);
}

.jl-tienda-cabecera__fila {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.jl-tienda-volver {
	margin: 0;
	font-size: var(--wp--preset--font-size--pequeno);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.jl-tienda-volver a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 44px;
	color: var(--wp--preset--color--rosa);
	text-decoration: none;
}

/* Flecha hacia atrás dibujada (no es texto, para que no salga como emoji). */
.jl-tienda-volver a::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-bottom: 1px solid currentColor;
	border-left: 1px solid currentColor;
	transform: rotate(45deg);
}

.jl-tienda-volver a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------------------------------------------------
 * 9. «Próximamente» (plantilla coming-soon): logo, frase y datos del salón, a pantalla completa.
 * --------------------------------------------------------------------------------------------------------- */

.jl-tienda-proximamente {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-block: var(--wp--preset--spacing--60);
	text-align: center;
}

.jl-tienda-proximamente .jl-logo {
	display: flex;
	justify-content: center;
	margin-block: 0 var(--wp--preset--spacing--50);
}

.jl-tienda-proximamente .jl-logo img {
	width: auto;
	height: clamp(5.5rem, 16vw, 8.75rem);
}

.jl-tienda-proximamente h1 {
	margin-block: var(--wp--preset--spacing--30);
}

.jl-tienda-proximamente .jl-etiqueta {
	width: fit-content;
	margin-inline: auto;
}

.jl-tienda-proximamente .jl-entradilla {
	margin-inline: auto;
}

.jl-tienda-proximamente .jl-acciones {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40);
}

.jl-tienda-proximamente__datos {
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

/* Si no hay Instagram ni WhatsApp, el plugin quita los dos datos: que no quede el hueco. */
.jl-tienda-proximamente__datos:not(:has(.jl-dato)) {
	display: none;
}

.jl-tienda-proximamente__datos .jl-dato__valor {
	justify-content: center;
}

/* ------------------------------------------------------------------------------------------------------------
 * 10. Ordenador (desde 782 px).
 * --------------------------------------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.jl-tienda-productos .wc-block-product-template.wc-block-product-template__responsive {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}

	.jl-tienda-productos .wc-block-product .wp-block-post-title {
		margin-inline: var(--wp--preset--spacing--30);
		font-size: var(--wp--preset--font-size--grande);
	}

	.jl-tienda-productos .wc-block-product .wc-block-components-product-price {
		font-size: var(--wp--preset--font-size--texto);
	}

	.jl-tienda-productos .wc-block-components-product-button {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.jl-tienda-productos .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
		font-size: var(--wp--preset--font-size--pequeno);
	}

	/* Ficha: galería algo más ancha que los datos. */
	.wp-block-columns.jl-tienda-ficha > .wp-block-column.jl-tienda-ficha__galeria {
		flex-grow: 6;
	}

	.wp-block-columns.jl-tienda-ficha > .wp-block-column.jl-tienda-ficha__datos {
		flex-grow: 5;
	}

	.wc-block-order-confirmation-summary ul {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}
}

/* ------------------------------------------------------------------------------------------------------------
 * 11. Movimiento: transiciones suaves solo si la persona no ha pedido reducirlo.
 * --------------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.jl-tienda-productos .wc-block-components-product-button__button,
	.wc-block-add-to-cart-with-options .wc-block-product-filter-chips__item,
	body.woocommerce-account .woocommerce-MyAccount-navigation a {
		transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	}
}