/*
|--------------------------------------------------------------------------
| AMOREA — ARCHIVO DE TIENDA / CATEGORÍA (taxonomy-product_cat.php,
| archive-product.php) — reemplaza por completo el look de WooCommerce.
|--------------------------------------------------------------------------
*/

/*
 * Ancho de contenedor propio de las páginas de tienda/categoría — casi
 * a pantalla completa, dejando sólo un margen delgado fijo a cada
 * lado (no un max-width fijo tipo 1320px, que en monitores anchos
 * seguía dejando franjas grandes en blanco). El padre (<main>) ya
 * ocupa el 100% del viewport, así que este % es relativo a la
 * pantalla real. No toca `.container` en sí, así el resto del sitio
 * (home, etc.) queda intacto.
 */
.shop-page {
	max-width: 1400px;
	padding-top: var(--space-3);
	padding-bottom: var(--space-8);
}

/* Breadcrumb */
.shop-breadcrumb {
	margin-bottom: var(--space-4);
}

.shop-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.shop-breadcrumb li {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.shop-breadcrumb a {
	color: var(--color-text-muted);
}

.shop-breadcrumb a:hover {
	color: var(--color-primary);
}

.shop-breadcrumb [aria-current="page"] {
	color: var(--color-text);
	font-weight: 600;
}

/*
 * Banner — reducido 15% y luego otro 30% más sobre eso (a pedido del
 * cliente, dos rondas), factor acumulado 0.85 * 0.7 = 0.595 sobre
 * cada token, sin dejar de usar la escala de espaciado/tipografía
 * del tema.
 */
/*
 * Fila superior: banner + píldoras + cuadrícula de productos van en
 * una columna (.shop-top__primary), con el sidebar de filtros al
 * costado — a pedido del cliente. `align-items: flex-start` para que
 * el banner mantenga su tamaño reducido de siempre (no se estire a la
 * altura del sidebar).
 */
.shop-top {
	display: flex;
	align-items: flex-start;
	gap: var(--space-6);
}

.shop-top__primary {
	flex: 1;
	min-width: 0;
}

.shop-main {
	margin-top: var(--space-6);
}

/*
 * El padding vertical baja otra vez, ahora 0.4298875 * 0.85 =
 * 0.36540 — cuarta ronda de "bájale el alto un X%" — el
 * padding/gap horizontal (var(--space-8)) sigue igual.
 */
.shop-banner {
	display: flex;
	align-items: center;
	gap: calc(var(--space-8) * 0.595);
	background: rgba(203, 37, 90, 0.05);
	border-radius: var(--radius-xl);
	padding: calc(var(--space-6) * 0.36540) calc(var(--space-8) * 0.595);
}

.shop-banner__content {
	flex: 1;
	min-width: 0;
}

.shop-banner__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: calc(var(--text-4xl) * 0.50575);
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
}

.shop-banner__subtitle {
	color: var(--color-text-muted);
	margin: calc(var(--space-2) * 0.50575) 0 calc(var(--space-6) * 0.50575);
}

.shop-banner__benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(var(--space-4) * 0.50575);
}

/*
 * El texto de los beneficios (2 líneas c/u en columnas angostas) era
 * lo que más alto hacía el banner, más que la foto — se aprieta el
 * padding/gap/line-height del .value-card sólo acá para bajar el
 * resto del alto pedido.
 */
.shop-banner__benefits .value-card {
	align-items: flex-start;
	padding-inline: 0;
	gap: var(--space-2);
	border-left: none; /* quita la rayita separadora entre beneficios sólo en este banner */
}

.shop-banner__benefits .value-card__icon img {
	width: 30px;
	height: 30px;
}

.shop-banner__benefits .value-card__title {
	font-size: 11px;
	line-height: 1.15;
	margin-bottom: 1px;
	text-transform: none;
}

.shop-banner__benefits .value-card__text {
	font-size: 10px;
	line-height: 1.15;
}

/*
 * Alto fijo (igual que antes), ancho automático — el aspect-ratio
 * real de cada foto lo pone banner.php inline (calculado de sus
 * dimensiones reales vía wp_get_attachment_metadata). Una foto
 * cuadrada de un solo producto da 117x117 como siempre; una foto de
 * grupo más ancha (Osos, Peluches, etc.) ensancha la caja sola para
 * llenar el alto completo sin recorte ni relleno — no hay que tocar
 * CSS/PHP por cada categoría nueva, sólo subir la foto ya recortada
 * a su forma real.
 */
.shop-banner__media {
	flex: 0 0 auto;
	height: 117px;
	width: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.shop-banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Variante con foto de fondo (categoría Osos, ver banner.php).
 *
 * `aspect-ratio` + `background-size: 100% 100%` se probó y se
 * descartó: el contenido de texto (título+subtítulo+beneficios)
 * necesita ~158px de alto sin importar el ancho, así que en pantallas
 * angostas el cuadro no se achicaba en la misma proporción que pedía
 * el aspect-ratio — el resultado era una caja más "achatada" que la
 * imagen real (2150x316), y background-size:100% 100% estiraba/
 * comprimía la foto de forma no uniforme para calzarla ahí, lo que se
 * veía como si los osos salieran borrosos/deformados en pantallas
 * angostas ("media pantalla").
 *
 * Con alto fijo (158px, el mismo que ya usa el resto del banner) +
 * background-size: auto 100% + position: right, la imagen SIEMPRE
 * se dibuja a su proporción real (nunca se estira ni se comprime) —
 * en pantallas angostas simplemente se recorta más rosado vacío del
 * lado izquierdo de la propia foto, nunca a los osos ni su nitidez.
 */
.shop-banner--photo {
	position: relative;
	height: 134px; /* 158px * 0.85, reducido 15% a pedido del cliente */
	/*
	 * Al bajar el alto, la foto (auto 100%) ya no cubre todo el ancho
	 * de la caja — el sobrante a la izquierda mostraba el
	 * rgba(203,37,90,0.05) de .shop-banner, un tono distinto al rosa
	 * cálido real de la foto (#fdeae6, tomado del borde izquierdo de
	 * la imagen), y se notaban dos tonos. Con este color sólido de
	 * fondo, el sobrante queda del mismo tono que la foto, sin costura.
	 */
	background-color: #fdeae6;
	background-size: auto 100%;
	background-position: right center;
	background-repeat: no-repeat;
}

.shop-banner--photo .shop-banner__content {
	position: relative;
	z-index: 1;
	flex: none;
	max-width: 560px;
}

/*
 * Fila de píldoras de tamaño + selector de orden, lado a lado — va
 * justo debajo del banner (dentro de .shop-top__primary), con el
 * mismo espaciado que separa el breadcrumb del banner (var(--space-4),
 * ver .shop-breadcrumb). El selector de orden se sube acá desde su
 * posición nativa (ver woocommerce-hooks.php).
 */
.shop-filters-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-4);
}

/* Reducida 20% (calc(... * 0.8)) a pedido del cliente. */
.shop-filters-bar {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--space-2) * 0.8);
	background: var(--color-accent);
	padding: calc(var(--space-2) * 0.8);
	border-radius: var(--radius-lg);
	width: fit-content;
}

.shop-filters-bar__pill {
	padding: calc(var(--space-2) * 0.8) calc(var(--space-5) * 0.8);
	border-radius: var(--radius-md);
	font-size: calc(var(--text-sm) * 0.8);
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.shop-filters-bar__pill.is-active {
	background: var(--color-primary);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.shop-filters-bar__pill:not(.is-active):hover {
	background: rgba(203, 37, 90, 0.12);
}

/*
 * Columna del sidebar: el propio Filtros + la caja promo debajo (ver
 * template-parts/shop/promo.php), como dos tarjetas separadas
 * apiladas, no una dentro de la otra.
 */
.shop-top__aside {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.shop-sidebar {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.shop-sidebar__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--text-base);
	font-weight: 700;
	margin: 0 0 var(--space-5);
}

.shop-sidebar__section {
	padding-block: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.shop-sidebar__section:first-of-type {
	border-top: none;
	padding-top: 0;
}

.shop-sidebar__heading {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
}

/* Slider de precio */
.shop-price-slider {
	position: relative;
	height: 20px;
	margin-bottom: var(--space-2);
}

.shop-price-slider__track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--color-border);
	border-radius: var(--radius-pill);
	transform: translateY(-50%);
}

.shop-price-slider__range {
	position: absolute;
	height: 100%;
	background: var(--color-primary);
	border-radius: var(--radius-pill);
}

.shop-price-slider__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}

.shop-price-slider__input::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-primary);
	border: 2px solid #fff;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
}

.shop-price-slider__input::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-primary);
	border: 2px solid #fff;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
}

.shop-price-slider__values {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text);
}

/* Checkboxes / lista */
.shop-sidebar__list {
	display: grid;
	gap: var(--space-2);
}

.shop-checkbox {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text);
}

.shop-checkbox__box {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--color-border);
	border-radius: 4px;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.shop-checkbox.is-checked .shop-checkbox__box {
	background: var(--color-primary);
	border-color: var(--color-primary);
	background-image: url("../images/icons/badge-check.svg");
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
}

.shop-checkbox__count {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/* Swatches de color */
.shop-sidebar__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.shop-swatch {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.shop-swatch.is-selected {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/*
 * Caja promocional "¿Buscas un regalo completo?" — tarjeta aparte,
 * debajo del sidebar de Filtros (no adentro). Ícono al costado del
 * título arriba; abajo, texto de 2 líneas + botón a la izquierda y
 * la foto de Boxes Amorea a la derecha.
 */
.shop-promo {
	padding: var(--space-4);
	background: rgba(203, 37, 90, 0.06);
	border-radius: var(--radius-lg);
}

.shop-promo__header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.shop-promo__title {
	font-weight: 700;
	font-size: var(--text-sm);
	margin: 0;
}

.shop-promo__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.shop-promo__text-line {
	font-size: var(--text-sm);
	line-height: 1.35;
	color: var(--color-text);
	margin: 0 0 var(--space-3);
}

.shop-promo__text-line strong {
	color: var(--color-primary);
}

.shop-promo__cta {
	display: inline-flex;
	font-size: var(--text-xs);
	padding: var(--space-2) var(--space-4);
}

.shop-promo__media {
	flex: 0 0 auto;
	width: 90px;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.shop-promo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Selector de orden — ahora vive junto a las píldoras de tamaño en
 * .shop-filters-row (el conteo de resultados se quitó del todo, ver
 * woocommerce-hooks.php).
 */
.shop-grid__header {
	display: flex;
	align-items: center;
}

/*
 * Borde/foco rosado (no el azul de foco por defecto del navegador),
 * misma tipografía y fondo blanco del resto del sitio — también en
 * <option> para que el menú desplegable nativo respete el mismo
 * estilo donde el navegador lo permite.
 */
.shop-grid__header .woocommerce-ordering select {
	min-width: 190px;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	cursor: pointer;
	transition: border-color var(--transition-fast);
}

.shop-grid__header .woocommerce-ordering select:focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(203, 37, 90, 0.15);
}

.shop-grid__header .woocommerce-ordering select option {
	background: #fff;
	color: var(--color-text);
	font-family: var(--font-body);
}

/*
 * Menú de orden a medida (ver initSortDropdown() en main.js) — el
 * <select> nativo se queda oculto pero funcional (fallback sin JS);
 * lo que se ve es este menú, con el mismo tema fondo blanco +
 * detalles rosados y tipografía del resto del sitio, en vez de la UI
 * de sistema del navegador que no se puede personalizar.
 */
.shop-sort {
	position: relative;
}

.shop-sort__native {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.shop-sort__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-width: 190px;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	cursor: pointer;
	transition: border-color var(--transition-fast);
}

.shop-sort__trigger:hover {
	border-color: var(--color-primary);
}

.shop-sort__trigger[aria-expanded="true"] {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(203, 37, 90, 0.15);
}

.shop-sort__chevron {
	flex: 0 0 auto;
	color: var(--color-primary);
	transition: transform var(--transition-fast);
}

.shop-sort__trigger[aria-expanded="true"] .shop-sort__chevron {
	transform: rotate(180deg);
}

.shop-sort__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + var(--space-2));
	right: 0;
	min-width: 100%;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: var(--space-2);
	list-style: none;
}

.shop-sort__option {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text);
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.shop-sort__option:hover {
	background: rgba(203, 37, 90, 0.08);
}

.shop-sort__option.is-selected {
	background: var(--color-primary);
	color: #fff;
	font-weight: 600;
}

.shop-grid__empty {
	color: var(--color-text-muted);
	padding: var(--space-8) 0;
}

/* Cuadrícula de productos — 4 columnas, mismo patrón de tarjeta que
   .featured-products__carousel, escalado a este contexto (no reusa la
   misma clase — ver convención en cards.css). */
.shop-grid ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * min-width: 0 es necesario porque esta li es a la vez un item del
 * grid `ul.products` (repeat(4, 1fr)) — sin esto, un grid item no se
 * achica más allá del ancho mínimo de su contenido (min-width: auto
 * por defecto), así que cuando el botón "Ver carrito" (más ancho que
 * el ícono de carrito de siempre) no cabía, la tarjeta entera se
 * salía de su columna y se montaba sobre la tarjeta vecina, en vez de
 * quedarse dentro de su espacio asignado.
 */
.shop-grid .products li.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	min-width: 0;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	padding: 0 var(--space-4) var(--space-4);
}

.shop-grid .products figure {
	grid-column: 1 / -1;
	position: relative;
	margin: 0 calc(-1 * var(--space-4));
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/*
 * Misma causa real y misma corrección que cards.css (Home): el
 * wrapper `<a class="ct-media-container">` de Blocksy no tiene altura
 * definida dentro del `<figure>` cuadrado, y el `<img>` nativo trae
 * `style="aspect-ratio: 3/4"` en línea — sin una altura de contenedor
 * real contra la cual resolver `height:100%`, la imagen caía de
 * vuelta a ese aspect-ratio angosto, dejando franja blanca. Se le da
 * al wrapper una caja 100%×100% garantizada por posición absoluta.
 */
.shop-grid .products figure .ct-media-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.shop-grid .products figure img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/*
 * BUG REAL encontrado en vivo al agregar la insignia real "-X%"
 * (product-card-badge--sale, ver woocommerce-hooks.php): la cinta
 * nativa "SALE" (azul, en inglés) de WooCommerce/Blocksy se imprime
 * en la MISMA esquina y quedaba superpuesta con la insignia nueva —
 * mismo criterio que single-product.css ya aplica en la ficha
 * individual ("nunca formó parte del diseño pedido"): se oculta acá
 * también, el precio de oferta real sigue tachado normalmente.
 */
.shop-grid .onsale {
	display: none;
}

.shop-grid .product-card-toolbar__wishlist {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
}

.shop-grid .woocommerce-loop-product__title {
	grid-column: 1 / -1;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: var(--space-2) 0 0;
}

.shop-grid .woocommerce-loop-product__title a {
	color: var(--color-text);
}

.shop-grid .product-card-characteristic {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-xs);
	line-height: 1.3;
	color: var(--color-text);
	margin: 2px 0 0;
}

.shop-grid .product-card-characteristic svg {
	flex: 0 0 auto;
}

/*
 * `min-height` explícito: un `<p>` vacío (sin `_amorea_height_cm`
 * todavía) no genera caja de línea propia y colapsaría a 0 — debe
 * seguir ocupando el mismo espacio que una tarjeta con medida real
 * para que precio y botón queden alineados entre tarjetas.
 */
.shop-grid .product-card-measure {
	grid-column: 1 / -1;
	min-height: calc(var(--text-xs) * 1.3);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text-muted);
	margin: 2px 0 0;
}

/*
 * Estrellas SIEMPRE visibles (rellenas o vacías, nunca ocultas) — ver
 * inc/setup/woocommerce-hooks.php, reemplaza la capa nativa de
 * Blocksy que ocultaba el bloque entero sin reseñas reales.
 */
.shop-grid .product-card-rating {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 2px 0 0;
}

.shop-grid .product-card-star {
	fill: var(--color-primary);
	stroke: var(--color-primary);
}

.shop-grid .product-card-star.is-empty {
	fill: none;
	stroke: #d7cdd2;
}

.shop-grid .product-card-rating-count {
	margin-left: 2px;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.shop-grid .price {
	grid-column: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Mismo bug real que `.featured-products__carousel .price` (ver ese
	   comentario, cards.css): `blocksy/static/bundle/woocommerce.min.css`
	   se encola después y su `white-space:normal` gana sin `!important`. */
	white-space: nowrap !important;
	margin: 6px 0 0 !important;
	line-height: 1.2;
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-primary);
}

/* El precio vigente (ins) se queda rosado/grande (ya lo hereda de arriba); el tachado (del, sólo con oferta real) se ve plomo y más chico, para distinguir cuál es el precio real a pagar. */
.shop-grid .price del {
	font-size: 0.85em;
	font-weight: 400;
	color: var(--color-text-muted);
}

.shop-grid .price ins {
	text-decoration: none;
}

/*
 * BUG real encontrado (captura desde el celular real, Tienda): con
 * ambos precios en una sola línea, el tachado en gris quedaba tapado
 * por el botón circular del carrito — la tarjeta de Tienda es más
 * angosta que la del carrusel de Home, no le entran los dos precios
 * juntos sin chocar con el botón. Pedido explícito de la usuaria: el
 * tachado (gris, precio anterior) va DEBAJO del vigente (rosado,
 * precio actual).
 *
 * OJO con esto (costó una verificación en vivo descubrirlo, ver mismo
 * comentario largo en cards.css): Blocksy ya trae `.sale-price del {
 * order: 2 }` en su propio CSS base (`ins` se queda en `order: 0`).
 * Como `order` decide la posición dentro del eje ANTES que la
 * dirección del eje, `flex-direction: column-reverse` (usado en un
 * intento anterior, pensando que hacía falta invertir para no tocar
 * el orden real del HTML) en realidad invierte TAMBIÉN el efecto del
 * `order` y deja el tachado ARRIBA — al revés de lo pedido. Con
 * `column` normal (eje top→bottom) el `order` más bajo (`ins`, 0) ya
 * cae arriba y el más alto (`del`, 2) abajo — justo lo pedido, sin
 * tocar `order` ni el HTML real.
 */
.shop-grid .sale-price {
	display: inline-flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	gap: 2px;
}

/* Medido real: a 320px (celular más angosto de uso común, ej. iPhone
   SE) el tachado seguía sobrando ~4px contra el botón incluso ya
   apilado — la columna de precio del grid de la tarjeta mide sólo
   56.8px ahí. Con precios de 3 cifras (ej. "S/ 300.00") 0.78em todavía
   se pasaba 1px en 3 de 12 productos reales — bajado a 0.72em,
   comprobado con los 12 productos reales de la tienda, ninguno se
   pasa ya. SÓLO en este ancho, no toca el resto de tamaños. */
@media (max-width: 340px) {
	.shop-grid .price del {
		font-size: 0.72em;
	}
}

.shop-grid .entry-meta {
	display: none;
}

.shop-grid .ct-woo-card-actions {
	grid-column: 2;
	margin-top: 0;
}

.shop-grid .add_to_cart_button {
	position: relative;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	max-width: 40px;
	max-height: 40px;
	padding: 0;
	border-radius: var(--radius-md);
	background: var(--color-primary);
	font-size: 0;
	color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-base);
}

.shop-grid .add_to_cart_button:hover {
	background: var(--color-primary-hover);
}

.shop-grid .add_to_cart_button::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	display: block;
	width: 18px;
	height: 18px;
	background: url("../images/icons/bag-white.svg") center / contain no-repeat;
}

.shop-grid .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding-inline: var(--space-3);
	border-radius: var(--radius-md);
	background: var(--color-primary) !important;
	color: #fff !important;
	font-size: var(--text-xs);
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-base);
}

.shop-grid .added_to_cart:hover {
	background: var(--color-primary-hover) !important;
}

/*
 * Paginación de Tienda/categoría/búsqueda — NUNCA se renderiza como
 * `.woocommerce-pagination`/`<ul class="page-numbers">` nativo de
 * WooCommerce: Blocksy reemplaza ese template por el suyo propio
 * (`blocksy_display_posts_pagination()`), que imprime
 * `<nav class="ct-pagination" data-pagination="simple">` con los links
 * `<a>`/`<span class="page-numbers">` sueltos, sin `<ul>`. `.ct-hidden-sm`
 * es de Blocksy: ya oculta los números sueltos en pantallas chicas
 * dejando sólo Anterior/Siguiente — no se toca ese comportamiento
 * responsive nativo.
 *
 * CAUSA REAL del color apagado/sin borde de la ronda anterior:
 * Blocksy carga un stylesheet DINÁMICO propio para este componente
 * (`static/bundle/pagination.min.css`, inyectado vía
 * `dynamic_styles_selectors` de ct_localizations, después de nuestro
 * archive.css) con selectores de la MISMA especificidad que los
 * nuestros de entonces (`[data-pagination=simple] .page-numbers.current`
 * = 0,3,0 vs nuestro `.ct-pagination .page-numbers.current` = 0,3,0) —
 * en un empate, gana el que carga después, que resultó ser el de
 * Blocksy: `background: var(--theme-link-hover-color)` (un tono del
 * tema, no el rosado Amorea) y `border: 2px solid rgba(0,0,0,0)`
 * (transparente) en el estado normal. Se corrige subiendo la
 * especificidad de forma determinística — agregando el elemento real
 * `nav` + el atributo real `[data-pagination]` a cada selector — para
 * ganar siempre, sin depender del orden de carga ni de `!important`.
 */
.ct-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-8) 0;
}

.ct-pagination .ct-hidden-sm {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/*
 * Mismo botón que el carrito cuadrado rosado de las tarjetas de
 * producto (`.shop-grid .added_to_cart`, ver arriba) — MISMAS
 * variables reales, nunca un color/tamaño aproximado nuevo:
 * `var(--color-primary)` (#cb255a), `var(--radius-md)` (10px, nunca
 * círculo ni píldora), `var(--shadow-sm)`. Página inactiva: fondo
 * blanco, borde y número rosados — nunca "número suelto" sin botón.
 * Página activa: mismo relleno sólido que ese botón, texto blanco.
 */
nav.ct-pagination[data-pagination] .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-md);
	border: 2px solid var(--color-primary);
	background: #fff;
	color: var(--color-primary);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

nav.ct-pagination[data-pagination] .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/*
 * Anterior/Siguiente rellenos rosados SIEMPRE, sin depender de hover —
 * el ícono usa `fill="currentColor"` (Blocksy, pagination.php del
 * núcleo), así que `color:#fff` ya pinta la flecha blanca sola, sin
 * tocar el SVG.
 */
nav.ct-pagination[data-pagination] .page-numbers.next,
nav.ct-pagination[data-pagination] .page-numbers.prev {
	width: auto;
	padding: 0 var(--space-4);
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/*
 * Hover — oscurece, sigue rosado, nunca espera al foco. Página inactiva
 * pasa de blanco+borde a relleno sólido (misma sensación que el botón
 * de referencia al pasar el mouse); lo que ya es rosado sólo oscurece.
 */
nav.ct-pagination[data-pagination] a.page-numbers:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

nav.ct-pagination[data-pagination] a.page-numbers.current:hover,
nav.ct-pagination[data-pagination] a.page-numbers.next:hover,
nav.ct-pagination[data-pagination] a.page-numbers.prev:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

/*
 * Foco de teclado — UN solo indicador exterior (sombra suave con
 * separación real, nunca un `outline` ni un segundo `border`): se
 * anula explícitamente tanto nuestro propio `outline` anterior como el
 * global de Blocksy (`a:focus-visible{outline:2px solid
 * var(--theme-palette-color-1)}` en main.min.css, aplicado a CUALQUIER
 * `<a>` del sitio) — sin este `outline:none` con especificidad
 * suficiente, ese anillo del tema se sumaba al nuestro y se veían dos
 * bordes encimados. El estado normal/hover no cambia de estructura:
 * `:focus-visible` sólo agrega el `box-shadow`, nunca border/relleno
 * nuevos por sí solo (si además se pasa el mouse, el hover de arriba
 * sigue aplicando normalmente, es una regla aparte).
 */
nav.ct-pagination[data-pagination] .page-numbers:focus-visible {
	outline: none;
	box-shadow: var(--shadow-sm), 0 0 0 4px rgba(203, 37, 90, 0.28);
}

nav.ct-pagination[data-pagination] .page-numbers svg {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
}

@media (max-width: 1024px) {
	.shop-grid ul.products {
		grid-template-columns: repeat(3, 1fr);
	}

	.shop-banner__benefits {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.shop-top {
		flex-direction: column;
	}

	.shop-top__aside {
		flex-basis: auto;
		width: 100%;
	}

	.shop-banner {
		flex-direction: column;
	}

	.shop-banner__media {
		width: 100%;
		height: auto;
	}
}

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

	.ct-pagination {
		gap: var(--space-1);
		margin: var(--space-6) 0;
	}

	nav.ct-pagination[data-pagination] .page-numbers {
		min-width: 32px;
		height: 32px;
		font-size: var(--text-xs);
	}

	nav.ct-pagination[data-pagination] .page-numbers.next,
	nav.ct-pagination[data-pagination] .page-numbers.prev {
		padding: 0 var(--space-2);
	}
}

/*
 * Aviso de listado vacío ("No se encontraron productos que coincidan
 * con tu selección.", ver woocommerce-hooks.php) — conserva el ícono y
 * la semántica nativa (`.woocommerce-info`, `role`/estructura de
 * WooCommerce intactos), sólo el acento de color pasa al rosado
 * Amorea en vez del color de tema por defecto de Blocksy. Acotado a
 * `.shop-main` (Tienda + categorías/subcategorías vía
 * archive-product.php/taxonomy-product_cat.php) para no afectar otros
 * avisos `.woocommerce-info` del sitio (carrito, checkout, etc.).
 */
.shop-main .woocommerce-info {
	border-color: var(--color-accent);
	color: var(--color-text);
}

.shop-main .woocommerce-info::before {
	color: var(--color-primary);
}