/*
 * Detalles de WooCommerce que replican el tema Whisper.
 * Los colores y tipografías salen de las variables de theme.json.
 */

/* --- Píldoras de variante: borde fino al 55% y radio completo --- */
.wc-block-components-product-button__button,
.woocommerce div.product form.cart .variations select,
ul.wc-block-product-template__responsive li {
	font-family: var(--wp--preset--font-family--cuerpo);
}

.woocommerce div.product form.cart .variations td.value select,
.wc-block-components-form .wc-blocks-components-select__container,
.woocommerce .quantity input[type="number"],
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"] {
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 40px;
	padding: 12px 20px;
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
}

/* Variantes como botones (no desplegable) cuando el tema las pinta así */
.alexia-variant-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: 10px 18px;
	margin: 0 6px 6px 0;
	border: 1px solid rgb(0 0 0 / 55%);
	border-radius: 40px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.alexia-variant-pill[aria-pressed="true"],
.alexia-variant-pill:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* --- Tarjetas de producto: sin borde, sin radio, texto a la izquierda --- */
.wc-block-grid__product,
ul.products li.product {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: left;
}

/* Imagen en retrato, como el image_ratio del tema original */
ul.products li.product img,
.wc-block-grid__product-image img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
	width: 100%;
	border-radius: 0;
}



/* --- Precio: el tachado en gris, el vigente en negro --- */
.woocommerce div.product p.price del,
.wc-block-components-product-price del {
	color: var(--wp--preset--color--gris-medio);
	opacity: 1;
	margin-right: 8px;
}

.woocommerce div.product p.price ins,
.wc-block-components-product-price ins {
	text-decoration: none;
	font-weight: 500;
}

/* --- Secciones sin separación, como spacing_sections = 0 en Whisper --- */
.wp-site-blocks > * + * { margin-block-start: 0; }


/* El contenedor necesita posición para anclar la insignia */
.woocommerce ul.products li.product,
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery { position: relative; }



/* Título y precio de la tarjeta */
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	padding: 10px 0 2px;
}

ul.products li.product .price {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

/* --- Rejilla de productos ---------------------------------------------
 * WooCommerce maqueta con floats y anchos en %, con selectores de alta
 * especificidad (.woocommerce ul.products li.product). Hay que igualar
 * esa especificidad para sustituirlo por una rejilla real.
 * -------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 4px;
	row-gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	text-align: left;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	margin: 0 0 8px;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	margin-top: 8px;
	padding: 10px 18px;
	border-radius: 4px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	padding: 0 0 2px;
}

/* El aviso de "este producto tiene variantes" sobra en la rejilla */
.woocommerce ul.products li.product .woocommerce-variation-availability,
.woocommerce ul.products li.product small.woocommerce-loop-product__link-description { display: none; }

@media (max-width: 989px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* --- Cabecera -----------------------------------------------------------
 * Tres zonas: menú a la izquierda, logo centrado, iconos a la derecha.
 * Se usa grid (1fr auto 1fr) en vez de flex space-between para que el logo
 * quede centrado respecto a la página, no respecto al hueco que le dejan
 * el menú y los iconos, que tienen anchos distintos.
 * ----------------------------------------------------------------------- */
.alexia-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	max-width: 1600px;
	margin: 0 auto;
}

/* Sin min-width:0 las columnas 1fr no pueden encogerse por debajo del ancho
   de su contenido, así que el menú (7 enlaces) empujaba el logo 212px a la
   derecha. Con esto las dos columnas laterales miden igual y el menú envuelve
   a dos líneas, como en el tema original. */
.alexia-header__bar > * { min-width: 0; }

.alexia-header__bar > .alexia-nav { justify-self: start; }
.alexia-header__bar > .alexia-logo { justify-self: center; margin: 0; }
.alexia-header__bar > .alexia-header__icons { justify-self: end; }

.alexia-logo img { display: block; height: auto; }

/* El menú conserva la capitalización escrita (REBAJAS va en mayúsculas
   porque así se llama la colección, no por estilo). */
.alexia-nav {
	font-size: 0.875rem;
	row-gap: 4px;
}

.alexia-nav .wp-block-navigation__container { flex-wrap: wrap; }

.alexia-nav a {
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.alexia-nav a:hover { border-bottom-color: currentColor; }

/* Iconos de buscar / cuenta / carrito, al mismo tamaño y grosor */
.alexia-header__icons svg { width: 20px; height: 20px; }

.alexia-header__icons .wp-block-search__button,
.alexia-header__icons .wc-block-customer-account,
.alexia-header__icons .wc-block-mini-cart__button {
	background: transparent;
	border: 0;
	padding: 4px;
	color: var(--wp--preset--color--contrast);
}

/* El buscador es solo lupa hasta que se pulsa */
.alexia-search .wp-block-search__input { display: none; }
.alexia-search.is-open .wp-block-search__input { display: block; }

.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* En móvil el menú colapsa a hamburguesa. El tema original oculta el icono
   de cuenta en pantallas pequeñas (clase small-hide de Dawn); aquí se hace lo
   mismo, porque con los tres iconos las columnas laterales no dan de sí y se
   montaban encima del logo. */
@media (max-width: 781px) {
	.alexia-header__bar { gap: 6px; }
	.alexia-logo img { width: 128px !important; }
	.alexia-header__icons .wp-block-woocommerce-customer-account { display: none; }
	.alexia-header__icons { gap: 6px; }
	.alexia-header__icons svg { width: 18px; height: 18px; }
}

/* --- Hero: dos imágenes a sangre con el texto encima ------------------
 * El banner original de Shopify usa dos fotos lado a lado y superpone el
 * titular sobre la unión, con un velo oscuro al 30%.
 * --------------------------------------------------------------------- */
.alexia-hero { position: relative; }

.alexia-hero__media {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
}

.alexia-hero__media .alexia-hero__img {
	flex: 1 1 50%;
	margin: 0;
	min-width: 0;
}

.alexia-hero__media .alexia-hero__img img {
	display: block;
	width: 100%;
	height: 88vh;
	min-height: 420px;
	object-fit: cover;
}

.alexia-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 0 24px;
	background: rgb(0 0 0 / 30%);
	pointer-events: none;
}

.alexia-hero__overlay > * { pointer-events: auto; margin: 0; }

@media (max-width: 781px) {
	.alexia-hero__media { flex-wrap: wrap; }
	.alexia-hero__media .alexia-hero__img { flex: 1 1 100%; }
	.alexia-hero__media .alexia-hero__img img { height: 58vh; min-height: 320px; }
	/* Con las fotos apiladas el velo cubriría las dos: se limita a la primera */
	.alexia-hero__overlay { inset: 0 0 auto 0; height: 58vh; min-height: 320px; }
}

/* --- Insignias «Sale» / «Sold out» -------------------------------------
 * Copiadas del tema original: Poppins 12px, sin mayúsculas forzadas, 1px de
 * espaciado, píldora de radio 40px y ancladas abajo a la izquierda de la foto
 * (clase badge--bottom-left en Dawn). «Sale» va en arena, «Sold out» en niebla.
 * ----------------------------------------------------------------------- */
.alexia-badge,
.woocommerce span.onsale {
	position: absolute;
	top: auto;
	right: auto;
	bottom: 12px;
	left: 12px;
	z-index: 2;
	display: inline-block;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 5px 13px 6px;
	border-radius: 40px;
	background: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: none;
}

.alexia-badge--soldout {
	background: var(--wp--preset--color--niebla);
	color: var(--wp--preset--color--tinta);
}

/* En la ficha las insignias se anclan a la galería, no al contenedor entero,
   que abarca también la columna del resumen. */
.woocommerce div.product > .alexia-badge,
.woocommerce div.product > span.onsale {
	bottom: auto;
	top: 12px;
	left: 12px;
}

/* --- Pie de página -----------------------------------------------------
 * Igual que el footer de Dawn/Whisper: arriba el newsletter a la izquierda y
 * las redes a la derecha; abajo, separados por una línea fina, los íconos de
 * pago y la línea legal centrados. theme.json pinta los enlaces en negro, así
 * que aquí se fijan los colores del original: #f9f9f9 al 100% para títulos y
 * redes, y al 75% para el texto secundario.
 * ----------------------------------------------------------------------- */
.alexia-footer {
	color: rgb(249 249 249 / 75%);
}

.alexia-footer__top,
.alexia-footer__bottom {
	max-width: 1200px;
	margin: 0 auto;
}

.alexia-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	padding-bottom: 40px;
}

.alexia-footer__newsletter {
	flex: 0 1 360px;
}

.alexia-footer__heading {
	color: #f9f9f9;
	font-size: 16px;
	margin: 0 0 18px;
}

.alexia-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-top: 32px;
	border-top: 1px solid rgb(249 249 249 / 8%);
}

.alexia-footer__links {
	color: rgb(249 249 249 / 75%);
	font-size: 11px;
	line-height: 1.9;
	margin: 0;
}

/* Los enlaces del pie heredan el color del pie, no el negro global */
.alexia-footer a,
.alexia-footer__links a {
	color: rgb(249 249 249 / 75%);
	text-decoration: none;
}

.alexia-footer a:hover,
.alexia-footer__links a:hover {
	color: #f9f9f9;
	text-decoration: underline;
}

.alexia-footer__social a { color: #f5f4f0; }

.alexia-footer__social .wp-social-link { background: transparent; }

@media (max-width: 749px) {
	.alexia-footer__top { flex-direction: column; align-items: center; text-align: center; }
	.alexia-footer__newsletter { flex-basis: auto; width: 100%; max-width: 360px; }
	.alexia-footer__social { justify-content: center !important; }
}

/* --- Newsletter: campo píldora con la flecha dentro, como Dawn ---------- */
.alexia-newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.alexia-newsletter__field {
	position: relative;
}

.alexia-newsletter__field input {
	width: 100%;
	height: 45px;
	box-sizing: border-box;
	padding: 18px 52px 4px 20px;
	border: 1px solid rgb(249 249 249 / 55%);
	border-radius: 40px;
	background: transparent;
	color: #f9f9f9;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 14px;
	outline: none;
}

.alexia-newsletter__field input:focus {
	border-color: #f9f9f9;
	box-shadow: 0 0 0 1px #f9f9f9;
}

.alexia-newsletter__field input::placeholder { color: transparent; }

/* Etiqueta flotante: dentro del campo hasta que se escribe */
.alexia-newsletter__field label {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	color: rgb(249 249 249 / 75%);
	font-size: 14px;
	pointer-events: none;
	transition: top 100ms ease, font-size 100ms ease;
}

.alexia-newsletter__field input:focus + label,
.alexia-newsletter__field input:not(:placeholder-shown) + label {
	top: 12px;
	font-size: 10px;
}

.alexia-newsletter__field button {
	position: absolute;
	top: 0;
	right: 0;
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: #f9f9f9;
	cursor: pointer;
}

.alexia-newsletter__field button svg { width: 14px; height: 10px; }

.alexia-newsletter__msg {
	margin: 10px 0 0;
	color: #f9f9f9;
	font-size: 13px;
}

/* --- Íconos de pago ----------------------------------------------------- */
.alexia-payment {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alexia-payment__item { line-height: 0; }

.alexia-payment svg { width: 38px; height: 24px; }

/* --- Colección destacada de la portada: a todo el ancho, sin márgenes --- */
.alexia-featured .woocommerce { margin: 0; }

/* --- Ficha de producto ---------------------------------------------------
 * Main-product de Whisper con media_size "large": galería al 65% apilada
 * (gallery_layout "stacked") y columna de información al 35%, fija al hacer
 * scroll (enable_sticky_info).
 * ----------------------------------------------------------------------- */
@media (min-width: 990px) {
	.woocommerce div.product {
		display: grid;
		grid-template-columns: 65% 1fr;
		column-gap: 4rem;
		align-items: start;
	}

	.woocommerce div.product > * { grid-column: 1 / -1; }

	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		width: auto;
		float: none;
		margin: 0;
	}

	.woocommerce div.product div.images { grid-column: 1; }

	.woocommerce div.product div.summary {
		grid-column: 2;
		align-self: stretch;
	}

	.alexia-summary-sticky {
		position: sticky;
		top: 24px;
	}

	.woocommerce div.product > .alexia-badge,
	.woocommerce div.product > span.onsale { grid-column: 1; grid-row: 1; align-self: start; }
}

/* Galería apilada: todas las fotos a ancho completo, una debajo de otra */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
	width: 100%;
	float: none;
	padding: 0;
	margin: 0;
	display: block;
}

.woocommerce div.product div.images img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger { display: none; }

@media (max-width: 989px) {
	/* En móvil Dawn muestra la galería y luego la información, sin miniaturas */
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary { width: 100%; float: none; }
	.woocommerce div.product div.summary { margin-top: 24px; }
}

/* Marca, título y precio */
.alexia-vendor {
	margin: 0 0 6px;
	font-size: 13px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgb(0 0 0 / 75%);
}

.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
	font-weight: 400;
	margin: 0 0 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	margin: 0 0 4px;
}

.woocommerce div.product .single_variation .price { margin: 12px 0 0; }

.alexia-shipping-note {
	margin: 0 0 24px;
	font-size: 13px;
	color: rgb(0 0 0 / 75%);
}

.alexia-shipping-note a { text-decoration: underline; }

/* Variantes: una fila por atributo, etiqueta encima y botones píldora */
.woocommerce div.product form.cart .variations {
	margin: 0 0 8px;
	border: 0;
}

.woocommerce div.product form.cart .variations tr {
	display: block;
	margin-bottom: 14px;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	line-height: 1.4;
}

.woocommerce div.product form.cart .variations th label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 400;
	color: rgb(0 0 0 / 75%);
}

.woocommerce div.product form.cart .variations select.alexia-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.alexia-variant-group {
	display: flex;
	flex-wrap: wrap;
}

.alexia-variant-pill {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--cuerpo);
}

.alexia-variant-pill.is-unavailable {
	opacity: 0.4;
	text-decoration: line-through;
	cursor: default;
}

.woocommerce div.product form.cart .reset_variations { display: none !important; }

/* Cantidad: píldora con − y + */
.woocommerce div.product form.cart .alexia-qty {
	display: inline-flex;
	align-items: center;
	float: none;
	width: 140px;
	height: 45px;
	margin: 0 0 16px;
	border: 1px solid rgb(0 0 0 / 55%);
	border-radius: 40px;
}

.woocommerce div.product form.cart .alexia-qty input.qty {
	flex: 1;
	width: 40px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	-moz-appearance: textfield;
}

.woocommerce div.product form.cart .alexia-qty input.qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .alexia-qty input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.alexia-qty-btn {
	width: 45px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 18px;
	cursor: pointer;
}

/* Botón de compra a todo el ancho de la columna */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	width: 100%;
	min-height: 45px;
	float: none;
	margin: 0;
	border-radius: 40px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button.disabled { opacity: 0.4; }

/* Descripción y compartir */
.alexia-description {
	margin: 28px 0 0;
	font-size: 15px;
	line-height: 1.8;
	color: rgb(0 0 0 / 75%);
}

.alexia-description p { margin: 0 0 12px; }

.alexia-share { margin-top: 20px; font-size: 13px; }

.alexia-share__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	cursor: pointer;
}

.alexia-share__done { margin-left: 10px; color: rgb(0 0 0 / 60%); }

/* Guía de tallas (bloque ai_gen_block_ccddd1a, mismos valores) */
.alexia-size-guide {
	grid-column: 1 / -1;
	padding: 40px 20px;
	background: #ffffff;
}

.alexia-size-guide__inner { max-width: 1000px; margin: 0 auto; }

.alexia-size-guide__header { text-align: center; margin-bottom: 32px; }

.alexia-size-guide__header h2 { margin: 0 0 12px; font-size: 32px; font-weight: 600; }

.alexia-size-guide__header p { margin: 0; font-size: 16px; opacity: 0.8; }

.alexia-size-guide__table {
	overflow-x: auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.alexia-size-guide table { width: 100%; border-collapse: collapse; margin: 0; border: 0; }

.alexia-size-guide th {
	padding: 16px 12px;
	background: #000000;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	border-bottom: 2px solid #e5e5e5;
}

.alexia-size-guide td {
	padding: 14px 12px;
	font-size: 14px;
	border-bottom: 1px solid #e5e5e5;
}

.alexia-size-guide tbody tr:hover { background: #f9f9f9; }

.alexia-size-guide tbody tr:last-child td { border-bottom: 0; }

.alexia-size-guide__note {
	margin-top: 24px;
	padding: 16px;
	background: #f5f5f5;
	border-left: 4px solid #000000;
	border-radius: 4px;
}

.alexia-size-guide__note p { margin: 0; font-size: 14px; line-height: 1.6; }

@media (max-width: 749px) {
	.alexia-size-guide { padding: 24px 16px; }
	.alexia-size-guide__header h2 { font-size: 25.6px; }
	.alexia-size-guide th,
	.alexia-size-guide td { padding: 10px 8px; font-size: 12.6px; }
}

/* Productos relacionados («You may also like»): fotos cuadradas */
.woocommerce div.product .related {
	grid-column: 1 / -1;
	padding: 36px 0 28px;
}

.woocommerce div.product .related > h2 {
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 400;
}

.woocommerce div.product .related ul.products li.product img { aspect-ratio: 1 / 1; }

/* Insignia junto al precio, como en la ficha de Shopify */
.woocommerce div.product div.summary p.price { display: inline-block; margin-right: 10px; vertical-align: middle; }
.woocommerce div.product div.summary .alexia-badge { position: static; vertical-align: middle; }

/* Insignia de la tarjeta abajo a la izquierda de la FOTO (no de la tarjeta,
   que incluye nombre y precio). La foto ocupa todo el ancho con proporción
   fija, así que su alto se calcula con unidades de contenedor. */
ul.products li.product { container-type: inline-size; }

ul.products li.product .alexia-badge,
.woocommerce ul.products li.product .onsale {
	top: calc(150cqw - 12px);
	bottom: auto;
	transform: translateY(-100%);
}

.woocommerce div.product .related ul.products li.product .alexia-badge {
	top: calc(100cqw - 12px);
}

/* --- Colecciones ---------------------------------------------------------
 * main-collection-banner con el esquema oscuro (#1a1919 / #f9f9f9).
 * ----------------------------------------------------------------------- */
.alexia-collection-hero {
	background: var(--wp--preset--color--carbon);
	color: #f9f9f9;
}

.alexia-collection-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px 40px;
}

.alexia-collection-hero__title {
	margin: 0;
	color: #f9f9f9;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.5rem);
	font-weight: 400;
}

.alexia-collection-hero__description {
	margin-top: 12px;
	max-width: 640px;
	color: rgb(249 249 249 / 75%);
	font-size: 15px;
}

.alexia-collection-hero__description p { margin: 0; }

/* Recuento y orden en una línea, como la barra de filtros de Dawn */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin: 0 0 28px;
	font-size: 13px;
	color: rgb(0 0 0 / 75%);
}

.woocommerce .woocommerce-ordering select {
	border: 0;
	background: transparent;
	font-size: 13px;
}

/* Botón de compra rápida (quick_add "standard"): ancho completo, contorno */
.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 12px;
	padding: 12px 18px;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 40px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: none;
}

.woocommerce ul.products li.product .button:hover {
	box-shadow: 0 0 0 1px var(--wp--preset--color--contrast);
}

/* Segunda foto al pasar el ratón */
ul.products li.product .alexia-card__secondary {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

@media (hover: hover) {
	ul.products li.product:hover .alexia-card__secondary { opacity: 1; }
}

/* Sección «AT MEN / capsule I» */
.alexia-at-men {
	padding: 36px 0 0;
}

.alexia-at-men__title {
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 400;
}

.alexia-at-men__all {
	margin: 32px 0 0;
	text-align: center;
}

.alexia-button {
	display: inline-block;
	padding: 14px 34px;
	border-radius: 40px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base) !important;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-decoration: none !important;
}

.woocommerce ul.products li.product .button.alexia-button--soldout {
	opacity: 0.5;
	pointer-events: none;
}

/* En móvil Dawn no apila las fotos: carrusel deslizable de una en una
   (mobile_thumbnails "hide"), para llegar rápido al precio y la talla. */
@media (max-width: 989px) {
	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
		flex-direction: row;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin: 0 -24px;
	}

	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }

	.woocommerce div.product div.images .woocommerce-product-gallery__image,
	.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}
}

/* woocommerce-smallscreen.css (<768px) da a cada tarjeta width:48% y float
   con un selector más específico ([class*=columns-]); dentro de la rejilla
   eso dejaba cada tarjeta a media columna. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
}

/* Shopify no mostraba cuántas unidades quedan («1 disponibles»), solo si
   la variante está agotada. */
.woocommerce div.product .stock.in-stock { display: none; }