/* =========================================================================
 * Catálogo / Tienda — cosmetica
 * Diseño de referencia + tipografías y colores del sitio (STYLEGUIDE).
 * ====================================================================== */

/* ------------------------------------------------------------------ Fuentes */
/* Variables fonts locales (colocar los .woff2 en assets/fonts/). */
@font-face {
	font-family: 'Bodoni Moda';
	src: url('../fonts/BodoniModa[opsz,wght].woff2') format('woff2');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto[wdth,wght].woff2') format('woff2');
	font-weight: 100 900;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------ Tokens */
:root {
	--color-primario:   #1a1a1d;
	--color-secundario: #c36170;
	--color-fondo-1:    #ffffff;
	--color-fondo-2:    #fdeeee;

	--fuente-titulos: 'Bodoni Moda', Georgia, serif;
	--fuente-texto:   'Roboto', system-ui, sans-serif;

	--ancho-body: 90vw;
}

/* ============================================================= Layout base */
.cosmetica-catalog {
	width: var(--ancho-body);
	max-width: 1440px;
	margin-inline: auto;
	font-family: var(--fuente-texto);
	color: var(--color-primario);
}
.cosmetica-catalog--has-sidebar {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: flex-start;
}
.cosmetica-catalog__content { min-width: 0; }
/* El título de la columna de contenido debe arrancar a la misma altura que el
   primer módulo del sidebar. La h1 traía margin-top del reset de Hello/Woo/kit
   que lo bajaba ~8px; se elimina la causa (sin compensar con paddings). */
.cosmetica-catalog__content .page-title { margin-top: 0; }

/* ================================================================ Sidebar */
.cosmetica-catalog__sidebar { position: relative; }
.cosmetica-catalog__sidebar-inner {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.cosmetica-sb__module { margin: 0; }
.cosmetica-catalog .cosmetica-sb__title,
.cosmetica-catalog .widget-title,
.cosmetica-sb__price .widgettitle {
	font-family: var(--fuente-titulos);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 16px;
	color: var(--color-primario);
}

/* Buscador */
.cosmetica-sb-search {
	display: flex;
	border: 1px solid var(--color-primario);
	background: var(--color-fondo-1);
}
.cosmetica-sb-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 11px 14px;
	font-family: var(--fuente-texto);
	font-size: 0.9375rem;
	color: var(--color-primario);
}
.cosmetica-sb-search input[type="search"]:focus { outline: none; }
.cosmetica-sb-search button {
	border: 0;
	border-radius: 0;
	background: var(--color-primario);
	color: var(--color-fondo-1);
	padding-inline: 14px;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .25s ease;
}
.cosmetica-sb-search button:hover { background: var(--color-secundario); }

/* Categorías */
.cosmetica-sb-cats { list-style: none; margin: 0; padding: 0; }
.cosmetica-sb-cats li { margin: 0; }
.cosmetica-sb-cats a {
	display: block;
	padding: 8px 0;
	color: var(--color-primario);
	text-decoration: none;
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--color-fondo-2);
	transition: color .2s ease;
}
.cosmetica-sb-cats a:hover { color: var(--color-secundario); }
.cosmetica-sb-cats .children { margin-left: 14px; }

/* Novedades */
.cosmetica-sb-products { list-style: none; margin: 0; padding: 0; }
.cosmetica-sb-product { margin: 0 0 16px; }
.cosmetica-sb-product:last-child { margin-bottom: 0; }
.cosmetica-sb-product a {
	display: flex;
	gap: 12px;
	align-items: center;
	text-decoration: none;
	color: var(--color-primario);
}
.cosmetica-sb-product img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	background: var(--color-fondo-2);
	flex: 0 0 auto;
}
.cosmetica-sb-product__info { display: flex; flex-direction: column; gap: 4px; }
.cosmetica-sb-product__name {
	font-size: 0.9375rem;
	line-height: 1.25;
	color: var(--color-primario);
}
.cosmetica-sb-product__price,
.cosmetica-sb-product__price .amount {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-secundario);
}

/* Carrito */
.cosmetica-sb-cart { font-size: 0.9375rem; }
.cosmetica-sb-cart .woocommerce-mini-cart__empty-message { margin: 0; color: var(--color-primario); }
/* Nombre de producto, X de eliminar y demás links del widget: marca del sitio. */
.cosmetica-sb-cart a:not(.button) {
	color: var(--color-primario);
	text-decoration: none;
}
.cosmetica-sb-cart a:not(.button):hover { color: var(--color-secundario); }
/* La X de eliminar: WooCommerce fuerza `color: var(--wc-red) !important`, se
   sobrescribe con !important (tokens, ningún hex suelto). */
.cosmetica-sb-cart a.remove_from_cart_button {
	color: var(--color-primario) !important;
	background: transparent;
}
.cosmetica-sb-cart a.remove_from_cart_button:hover {
	color: var(--color-secundario) !important;
	background: transparent;
}
/* Precios y subtotal en primario. */
.cosmetica-sb-cart .woocommerce-mini-cart__total,
.cosmetica-sb-cart .amount { color: var(--color-primario); }
/* Botones "Ver carrito" / "Finalizar compra": apilados y a 100%. El look sale
   del botón global de style.css (hero); acá solo queda el layout. */
.cosmetica-sb-cart .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 12px 0 0;
}
.cosmetica-sb-cart .woocommerce-mini-cart__buttons a.button {
	width: 100%;
	margin: 0;
}

/* Filtro de precio */
.cosmetica-sb__price .price_slider_wrapper { margin-top: 4px; }
.cosmetica-sb__price .ui-slider {
	position: relative;
	height: 4px;
	background: var(--color-fondo-2);
	margin: 18px 0;
	border-radius: 2px;
}
.cosmetica-sb__price .ui-slider .ui-slider-range {
	position: absolute;
	height: 100%;
	background: var(--color-secundario);
	border-radius: 2px;
}
.cosmetica-sb__price .ui-slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	transform: translateY(-50%);
	background: var(--color-primario);
	border-radius: 50%;
	cursor: pointer;
}
.cosmetica-sb__price .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 0.8125rem;
}
/* Botón "Filtrar": solo el orden dentro del flex; el look sale del global. */
.cosmetica-sb__price .price_slider_amount .button { order: 1; }
.cosmetica-sb__price .price_label { order: 2; color: var(--color-primario); }

/* ================================================================ Toolbar */
.cosmetica-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--color-fondo-2);
}
/* Contenedor de notices vacío: es el primer hijo flex de la toolbar y, con
   justify-content:space-between, empuja el contador a la derecha. Al ocultarlo
   cuando está vacío, el contador pasa a ser el primer ítem y queda alineado
   a la izquierda con el borde del título "Tienda". */
.cosmetica-toolbar > .woocommerce-notices-wrapper:empty {
	display: none;
}
.cosmetica-catalog .woocommerce-result-count {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-primario);
	text-align: left;
	float: none;
}
.cosmetica-catalog .woocommerce-ordering { margin: 0; float: none; }
.cosmetica-catalog .woocommerce-ordering select,
.cosmetica-catalog .cosmetica-cat-filter__select {
	font-family: var(--fuente-texto);
	font-size: 0.875rem;
	padding: 9px 14px;
	border: 1px solid var(--color-primario);
	background: var(--color-fondo-1);
	color: var(--color-primario);
}
/* Filtro de categorías: solo ≤1024px (se muestra en el bloque responsive). */
.cosmetica-cat-filter { display: none; }

/* Selector de columnas */
.cosmetica-view-toggle { display: inline-flex; gap: 6px; }
.cosmetica-view-toggle__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--color-primario);
	color: var(--color-primario);
	background: var(--color-fondo-1);
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.cosmetica-view-toggle__btn:hover {
	background: var(--color-fondo-2);
	color: var(--color-primario);
}
/* El botón de 1 columna solo se muestra en móvil (ver bloque responsive).
   Va después de la regla base `display:grid` para vencerla por orden. */
.cosmetica-view-toggle__btn--grid-1 { display: none; }
.cosmetica-view-toggle__btn.is-active {
	background: var(--color-secundario);
	border-color: var(--color-secundario);
	color: var(--color-fondo-1);
}

/* ============================================================ Grid + cards */
.cosmetica-catalog ul.products.cosmetica-products {
	display: grid;
	gap: 36px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cosmetica-products::before,
.cosmetica-products::after { content: none !important; }
/* cols-1 solo aplica 1 columna en móvil (bloque responsive). En desktop/tablet
   el botón de 1 columna está oculto, pero la preferencia (cookie) puede filtrarse
   entre anchos: por eso el fallback aquí es 2 columnas, para no dejar desktop en
   una sola columna. */
.cosmetica-products--cols-1 { grid-template-columns: repeat(2, 1fr); }
.cosmetica-products--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cosmetica-products--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cosmetica-products--cols-4 { grid-template-columns: repeat(4, 1fr); }

.cosmetica-catalog ul.products li.product.cosmetica-card {
	width: auto;
	margin: 0;
	float: none;
	text-align: center;
}
/* Borde + sombra en todas las cards de producto (tienda, categorías, marcas,
   búsqueda, relacionados del single y "Recién llegados"). El rgba de la sombra
   es el único color literal permitido y es el mismo en todo el sitio. */
li.product.cosmetica-card,
.woocommerce ul.products li.product.cosmetica-card {
	box-sizing: border-box;
	padding: 16px;
	border: 1px solid var(--color-primario);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(26, 26, 29, 0.12);
	transition: border-color .25s ease, box-shadow .25s ease;
}
li.product.cosmetica-card:hover,
.woocommerce ul.products li.product.cosmetica-card:hover {
	border-color: var(--color-secundario);
}

.cosmetica-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--color-fondo-1);
	overflow: hidden;
	/* Anula el padding de la card solo para la imagen (llega de borde a borde);
	   el resto del contenido conserva el padding. El radius iguala el interior
	   de la card (8px del borde − 1px del border). */
	margin: -16px -16px 16px;
	border-radius: 7px 7px 0 0;
}
.cosmetica-card__media-link { display: block; width: 100%; height: 100%; }
.cosmetica-card__img {
	position: absolute;
	inset: 0;
	display: block;
}
.cosmetica-card__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.cosmetica-card__img--hover {
	opacity: 0;
	transition: opacity .4s ease;
}
.cosmetica-card:hover .cosmetica-card__img--hover { opacity: 1; }

.cosmetica-card__title-link { text-decoration: none; }
/* Especificidad (0,5,2) para vencer a WooCommerce
   (.woocommerce ul.products li.product .woocommerce-loop-product__title = 0,4,2,
   que fija font-size:1em). Sin !important. Cubre todas las grillas
   (tienda/categorías/marcas/búsqueda/relacionados: todas en body.woocommerce).
   El segundo selector (0,4,2) cubre "Recién llegados": la home no lleva la clase
   .woocommerce en el body, así que sin él ganaba .elementor-kit-N h2 (0,1,1). */
.woocommerce ul.products li.product .cosmetica-card__title.woocommerce-loop-product__title,
.cosmetica-recien__grid li.product .cosmetica-card__title.woocommerce-loop-product__title {
	font-family: var(--fuente-titulos);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.25;
	color: var(--color-primario);
	margin: 0 0 8px;
	padding: 0;
}
.cosmetica-card__price.price,
.cosmetica-card__price .amount {
	font-family: var(--fuente-texto);
	font-weight: 600;
	font-size: 17px;
	color: var(--color-secundario);
}
@media (min-width: 768px) {
	.cosmetica-card__price.price,
	.cosmetica-card__price .amount { font-size: 18px; }
}
@media (min-width: 1024px) {
	.cosmetica-card__price.price,
	.cosmetica-card__price .amount { font-size: 20px; }
}
.cosmetica-card__price del { opacity: .5; margin-right: 6px; font-weight: 400; }
.cosmetica-card__price ins { text-decoration: none; }

/* Grilla de productos en móvil (≤767px, siempre 2 columnas): título y precio
   más compactos. Solo el loop de WooCommerce (tienda, categorías, etiquetas,
   búsqueda); no toca ficha, carrito, quick view ni "recién llegados". Se
   iguala la especificidad de las reglas base del card para ganar sin
   !important; el precio visible es .amount, por eso se incluye. */
@media (max-width: 767px) {
	/* 2 columnas (por defecto en móvil): título 16px, precio 18px. */
	.woocommerce ul.products li.product .cosmetica-card__title.woocommerce-loop-product__title {
		font-size: 16px;
	}
	.woocommerce ul.products li.product .cosmetica-card__price.price,
	.woocommerce ul.products li.product .cosmetica-card__price .amount {
		font-size: 18px;
	}
	/* 1 columna: título 18px, precio 20px. Mayor especificidad (clase de la
	   grilla) para ganarle a la regla de 2 columnas de arriba. */
	.woocommerce ul.products.cosmetica-products--cols-1 li.product .cosmetica-card__title.woocommerce-loop-product__title {
		font-size: 18px;
	}
	.woocommerce ul.products.cosmetica-products--cols-1 li.product .cosmetica-card__price.price,
	.woocommerce ul.products.cosmetica-products--cols-1 li.product .cosmetica-card__price .amount {
		font-size: 20px;
	}
	/* 1 columna en móvil: card horizontal (imagen izquierda + info derecha). Solo
	   este modo; en 2 columnas la card sigue vertical y centrada. */
	.cosmetica-products--cols-1 li.product.cosmetica-card {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		text-align: left;
	}
	.cosmetica-products--cols-1 li.product.cosmetica-card .cosmetica-card__media {
		flex: 0 0 40%;
		max-width: 140px;
		margin: 0;                /* anula el bleed negativo de la versión vertical */
		border-radius: 7px;
	}
	.cosmetica-products--cols-1 li.product.cosmetica-card .cosmetica-card__img img {
		object-fit: cover;        /* imagen cuadrada llena en horizontal */
	}
	.cosmetica-products--cols-1 li.product.cosmetica-card .cosmetica-card__info {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	/* "Recién agregados" del home (grilla propia, sin ancestro .woocommerce, por
	   eso no la tocan las reglas de arriba): título 18px, precio 20px. Se incluye
	   .amount porque es el número visible del precio. Misma especificidad que la
	   regla base del título (0,4,2) y orden posterior para ganarle. */
	.cosmetica-recien__grid li.product .cosmetica-card__title.woocommerce-loop-product__title {
		font-size: 18px;
	}
	.cosmetica-recien__grid li.product .cosmetica-card__price.price,
	.cosmetica-recien__grid li.product .cosmetica-card__price .amount {
		font-size: 20px;
	}
}

/* ====================================================== Card: overlay QV */
.cosmetica-card__actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 10px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .28s ease, transform .28s ease;
	pointer-events: none;
}
.cosmetica-card:hover .cosmetica-card__actions {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.cosmetica-card__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: var(--color-fondo-1);
	color: var(--color-primario);
	box-shadow: 0 2px 10px rgba(26, 26, 29, .16);
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.cosmetica-card__btn:hover {
	background: var(--color-secundario);
	color: var(--color-fondo-1);
}
.cosmetica-card__btn.added { background: var(--color-primario); color: var(--color-fondo-1); }

/* ============================================================ Quick View */
.cosmetica-qv-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 20px;
}
.cosmetica-qv-modal[hidden] { display: none; }
.cosmetica-qv-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 29, .55);
}
.cosmetica-qv-modal__dialog {
	position: relative;
	width: min(920px, 100%);
	max-height: 90vh;
	overflow: auto;
	background: var(--color-fondo-1);
	padding: 32px;
	box-shadow: 0 20px 60px rgba(26, 26, 29, .3);
}
.cosmetica-qv-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--color-primario);
	cursor: pointer;
}
.cosmetica-qv-modal__close:hover { color: var(--color-fondo-1); }
.cosmetica-qv-modal__content.is-loading { min-height: 200px; }
.cosmetica-qv-modal__content.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 3px solid var(--color-fondo-2);
	border-top-color: var(--color-secundario);
	border-radius: 50%;
	animation: cosmetica-spin .7s linear infinite;
}
@keyframes cosmetica-spin { to { transform: rotate(360deg); } }

.cosmetica-qv {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}
/* Media: thumbs en columna a la izquierda + imagen principal a la derecha. */
.cosmetica-qv__media {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.cosmetica-qv__main {
	flex: 1 1 auto;
	min-width: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.cosmetica-qv__main-img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Carrusel vertical de thumbs (el wrap con flechas lo inyecta el JS).
   --qv-thumb / --qv-gap definen el tamaño del thumb y el gap; la altura del
   contenedor = exactamente 3 thumbs + 2 gaps. */
.cosmetica-qv__thumbs-wrap {
	--qv-thumb: 76px;
	--qv-gap: 8px;
	order: -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--qv-gap);
	width: var(--qv-thumb);
	flex: 0 0 var(--qv-thumb);
}
.cosmetica-qv__thumb-arrow {
	display: none;
	place-items: center;
	width: 100%;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-primario);
	cursor: pointer;
	flex: 0 0 auto;
}
.cosmetica-qv__thumbs-wrap.has-overflow .cosmetica-qv__thumb-arrow { display: grid; }
.cosmetica-qv__thumb-arrow.is-disabled { opacity: .3; pointer-events: none; }
.cosmetica-qv__thumb-arrow svg { display: block; }

.cosmetica-qv__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--qv-gap);
	width: 100%;
	flex: 0 0 auto;
	max-height: calc( var(--qv-thumb) * 3 + var(--qv-gap) * 2 );
	overflow: hidden;
	scroll-behavior: smooth;
}
.cosmetica-qv__thumb {
	box-sizing: border-box;
	width: 100%;
	height: var(--qv-thumb);
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid transparent;
	background: var(--color-fondo-2);
	cursor: pointer;
}
.cosmetica-qv__thumb.is-active { border-color: var(--color-secundario); }
.cosmetica-qv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cosmetica-qv__title {
	font-family: var(--fuente-titulos);
	font-weight: 500;
	font-size: 1.75rem;
	line-height: 1.15;
	margin: 0 0 12px;
	color: var(--color-primario);
}
/* Solo el Quick View (modal): título del producto un 30% más chico que el 1.75rem
   base. Acotado a .cosmetica-qv-modal (0,2,0) para NO tocar la ficha, que comparte
   .cosmetica-qv__title (usa 1.75rem en <1024 y 50px en ≥1024). Sin clamp ⇒ un solo
   valor; el modal no tiene tamaño propio en ningún breakpoint. */
.cosmetica-qv-modal .cosmetica-qv__title { font-size: 1.225rem; } /* 1.75rem × 0.7 */
.cosmetica-qv__price,
.cosmetica-qv__price .amount {
	font-family: var(--fuente-texto);
	font-size: 20px;
	font-weight: 600;
	color: var(--color-secundario);
}
@media (min-width: 768px) {
	.cosmetica-qv__price,
	.cosmetica-qv__price .amount { font-size: 24px; }
}
@media (min-width: 1024px) {
	.cosmetica-qv__price,
	.cosmetica-qv__price .amount { font-size: 26px; }
	/* Ficha de producto (single) en desktop: precio 30px. No toca el Quick View. */
	.cosmetica-single-product .cosmetica-qv__price,
	.cosmetica-single-product .cosmetica-qv__price .amount { font-size: 30px; }
	/* Ficha de producto (single) en desktop: nombre del producto 50px. */
	.cosmetica-single-product .cosmetica-qv__title { font-size: 50px; }
}
.cosmetica-qv__desc { margin: 16px 0 0; padding-bottom: 20px; font-size: 0.9375rem; line-height: 1.6; color: var(--color-primario); }
.cosmetica-qv__sep { border-bottom: 1px solid var(--color-primario); margin-bottom: 20px; }
.cosmetica-qv__cap { padding-bottom: 20px; font-family: var(--fuente-texto); color: var(--color-primario); }
/* Ocultar el texto de stock (viene del template add-to-cart de WooCommerce). */
.cosmetica-qv__summary .stock { display: none; }
/* Cantidad + botón en la misma línea. */
.cosmetica-qv__summary form.cart {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.cosmetica-qv__summary form.cart .quantity {
	margin: 0;
	flex: 0 0 auto;
}
.cosmetica-qv__summary form.cart .quantity input.qty {
	width: 72px;
	height: 48px;
	padding: 0 10px;
	border: 1px solid var(--color-primario);
	background: var(--color-fondo-1);
	color: var(--color-primario);
	font-family: var(--fuente-texto);
	text-align: center;
}
/* Botón "Añadir al carrito" (Quick View y ficha): solo evita que el flex lo
   estire. Forma, colores, borde, radius, padding, tipografía, hover y flecha
   salen del botón global de style.css (look del hero). */
.cosmetica-qv__summary button.single_add_to_cart_button { flex: 0 0 auto; }

/* Móvil: thumbs vuelven a fila horizontal debajo de la imagen (sin carrusel). */
@media (max-width: 767px) {
	.cosmetica-qv__media { flex-direction: column; }
	.cosmetica-qv__thumbs-wrap {
		order: 0;
		flex-direction: row;
		width: auto;
		flex: 0 0 auto;
	}
	.cosmetica-qv__thumbs {
		flex-direction: row;
		width: 100%;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.cosmetica-qv__thumb { width: var(--qv-thumb); }
	.cosmetica-qv__thumbs-wrap.has-overflow .cosmetica-qv__thumb-arrow { display: none; }
}
/* Ficha (single): la galería mantiene la disposición VERTICAL (thumbs a la
   izquierda) también en móvil — misma estructura que desktop/tablet, solo se
   adapta el tamaño del thumb (56px). Anula el flip horizontal de arriba SOLO
   para .cosmetica-single-product (especificidad 0,2,0); el Quick View no se
   toca. El carrusel vertical (JS + flechas) sigue operativo. */
@media (max-width: 767px) {
	.cosmetica-single-product .cosmetica-qv__media { flex-direction: row; }
	.cosmetica-single-product .cosmetica-qv__thumbs-wrap {
		--qv-thumb: 56px;
		order: -1;
		flex-direction: column;
		width: var(--qv-thumb);
		flex: 0 0 var(--qv-thumb);
	}
	.cosmetica-single-product .cosmetica-qv__thumbs {
		flex-direction: column;
		max-height: calc( var(--qv-thumb) * 3 + var(--qv-gap) * 2 );
		overflow-x: hidden;
	}
	.cosmetica-single-product .cosmetica-qv__thumb { width: 100%; }
	.cosmetica-single-product .cosmetica-qv__thumbs-wrap.has-overflow .cosmetica-qv__thumb-arrow { display: grid; }
}
@media (max-width: 640px) {
	.cosmetica-qv { grid-template-columns: 1fr; gap: 20px; }
	.cosmetica-qv-modal__dialog { padding: 24px 18px; }
}
/* Ficha: en tablet y menos (hasta 1024px inclusive → cubre iPad landscape) las
   dos columnas del layout superior se APILAN igual que en móvil — galería a ancho
   completo (--ancho-body) arriba y la columna derecha (título, precio, resumen,
   capacidad, cantidad, carrito) debajo. Acotado a .cosmetica-single-product
   (0,2,0): el bloque de arriba (compartido con el Quick View) queda intacto, por
   eso NO se sube su breakpoint. La galería conserva sus thumbs verticales a la izq. */
@media (max-width: 1024px) {
	.cosmetica-single-product .cosmetica-qv { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================ Single product: carrusel de thumbs (desktop) */
/* La columna de thumbs iguala su alto al de la imagen principal: 4 visibles y
   el alto de cada thumb lo calcula el JS en --qv-thumb-h (el ancho de columna
   queda fijo → la imagen no cambia de tamaño). No afecta al Quick View ni al
   layout horizontal de móvil (<768px). */
@media (min-width: 768px) {
	.cosmetica-single-product .cosmetica-qv__thumb {
		height: var(--qv-thumb-h, var(--qv-thumb));
	}
	.cosmetica-single-product .cosmetica-qv__thumbs {
		max-height: calc( var(--qv-thumb-h, var(--qv-thumb)) * 4 + var(--qv-gap) * 3 );
	}
}

/* ============================================ Home: "Recién llegados" */
/* Ancho del sitio, sin tope: el H2 de Elementor, el logo y el header usan
   var(--ancho-body) a secas. El `max-width: 1440px` que tenía antes capaba la
   sección por debajo de 90vw en pantallas grandes (a 1920: grilla en 232 vs
   H2/logo en 88) y la desalineaba. Sin paddings propios. */
.cosmetica-recien {
	width: var(--ancho-body);
	margin-inline: auto;
	font-family: var(--fuente-texto);
	color: var(--color-primario);
}
/* Se traen 10 productos en el markup y cada breakpoint oculta los sobrantes:
   desktop 10 en 5 columnas · tablet 8 en 3 · móvil 4 en 2.
   minmax(0, 1fr) evita que el min-content de un nombre largo desiguale las
   columnas (con 1fr a secas la grilla salía despareja). */
.cosmetica-recien__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 36px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cosmetica-recien__grid::before,
.cosmetica-recien__grid::after { content: none !important; }
.cosmetica-recien__grid li.product.cosmetica-card {
	width: auto;
	margin: 0;
	float: none;
	text-align: center;
}
.cosmetica-recien__cta {
	margin-top: 40px;
	text-align: center;
}
@media (max-width: 1023px) {
	.cosmetica-recien__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cosmetica-recien__grid li.product:nth-child(n + 9) { display: none; }
}
@media (max-width: 767px) {
	.cosmetica-recien__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cosmetica-recien__grid li.product:nth-child(n + 5) { display: none; }
}

/* ==================================== Single product: También te puede… */
/* La ficha reusa .cosmetica-qv__* (media + summary). Los relacionados reusan
   el grid y la card del catálogo (reglas .cosmetica-catalog ul.products…, ya
   que la single está envuelta en .cosmetica-catalog); aquí solo se fija el
   número de columnas y el título de la sección. */
/* Panel: título + grilla dentro de un bloque con fondo (nunca imagen). Ocupa
   el ancho del contenido (= var(--ancho-body) que aporta .cosmetica-catalog). */
.cosmetica-related {
	margin-top: 50px;
	background: #fbd1d2;
	padding: 50px 50px 30px;
}
.cosmetica-related__title,
.cosmetica-descripcion-larga__title {
	font-family: var(--fuente-titulos);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 40px;
	color: var(--color-primario);
}
.cosmetica-catalog .cosmetica-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; }
@media (max-width: 1023px) {
	.cosmetica-catalog .cosmetica-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.cosmetica-related { padding-left: 24px; padding-right: 24px; }
	.cosmetica-catalog .cosmetica-related__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* ============================================================ Paginación */
.cosmetica-catalog .woocommerce-pagination {
	margin-top: 48px;
	text-align: center;
}
.cosmetica-catalog .woocommerce-pagination ul { border: 0; display: inline-flex; gap: 6px; }
.cosmetica-catalog .woocommerce-pagination ul li { border: 0; margin: 0; }
.cosmetica-catalog .woocommerce-pagination ul li a,
.cosmetica-catalog .woocommerce-pagination ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	line-height: 1;
	border: 1px solid var(--color-primario);
	border-radius: 0;
	background: transparent;
	color: var(--color-primario);
	font-family: var(--fuente-texto);
	font-size: 0.9375rem;
	transition: background .25s ease, color .25s ease;
}
.cosmetica-catalog .woocommerce-pagination ul li a:hover {
	background: var(--color-secundario);
	color: var(--color-fondo-1);
}
.cosmetica-catalog .woocommerce-pagination ul li span.page-numbers.current {
	background: var(--color-primario);
	border: 1px solid var(--color-primario);
	color: var(--color-fondo-1);
}

/* ============================ Estado de carga del grid (AJAX de columnas) */
.cosmetica-catalog__content { position: relative; }
.cosmetica-catalog--loading ul.products {
	opacity: .45;
	pointer-events: none;
	transition: opacity .15s ease;
}
.cosmetica-catalog--loading::after {
	content: "";
	position: absolute;
	top: 140px;
	left: 50%;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	border: 3px solid var(--color-fondo-2);
	border-top-color: var(--color-secundario);
	border-radius: 50%;
	animation: cosmetica-spin .7s linear infinite;
	z-index: 5;
}
@keyframes cosmetica-spin { to { transform: rotate(360deg); } }

/* ============================================================ Responsive */
@media (max-width: 1024px) {
	.cosmetica-catalog--has-sidebar {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.cosmetica-catalog__sidebar-inner { position: static; }
	/* Sidebar completo oculto: contenido a ancho completo. */
	.cosmetica-catalog__sidebar { display: none; }
	/* Contador oculto; en su lugar aparece el filtro de categorías. */
	.cosmetica-catalog .woocommerce-result-count { display: none; }
	.cosmetica-cat-filter { display: block; }
	.cosmetica-products--cols-2,
	.cosmetica-products--cols-3,
	.cosmetica-products--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	/* Grilla: solo 1 o 2 columnas según la selección del switcher. */
	.cosmetica-products--cols-1 { grid-template-columns: 1fr; }
	.cosmetica-products--cols-2,
	.cosmetica-products--cols-3,
	.cosmetica-products--cols-4 { grid-template-columns: repeat(2, 1fr); }
	/* Ordenamiento oculto en móvil (sigue visible en tablet y desktop). */
	.cosmetica-catalog .woocommerce-ordering { display: none; }
	/* Switcher: en móvil solo 1 y 2 columnas. */
	.cosmetica-view-toggle__btn--grid-1 { display: grid; }
	.cosmetica-view-toggle__btn--grid-3,
	.cosmetica-view-toggle__btn--grid-4 { display: none; }
}
@media (max-width: 480px) {
	.cosmetica-products--cols-2,
	.cosmetica-products--cols-3,
	.cosmetica-products--cols-4 { grid-template-columns: repeat(2, 1fr); }
}