/*
 * KitsuneMart — estilos generales del tema.
 *
 * Los colores y tipografías base viven en theme.json y se exponen aquí como
 * variables CSS (--wp--preset--color--km-*, --wp--preset--font-size--*).
 * Este archivo solo cubre layout, estados de foco y detalles que theme.json
 * no puede expresar. No se carga ninguna fuente ni recurso externo.
 */

/* -------------------------------------------------------------------- */
/* Accesibilidad: foco visible y enlaces distinguibles                  */
/* -------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--km-contrast, #241531);
	outline-offset: 2px;
}

/* Los enlaces usan el mismo color que el texto (ver theme.json), así que
   necesitan un indicador distinto del color para diferenciarse (WCAG 1.4.1):
   el subrayado por defecto del navegador se conserva y se refuerza en
   hover/foco. */
a:hover,
a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Anclas internas (#km-categories, #km-budget desde el hero/pie) no deben
   quedar tapadas detrás del encabezado fijo/visualmente pegado arriba. */
[id="km-categories"],
[id="km-budget"] {
	scroll-margin-top: 1.5rem;
}

/* -------------------------------------------------------------------- */
/* Franja de anuncio (envío gratis / retiro) — fiel a la propuesta v3   */
/* -------------------------------------------------------------------- */

.km-announce {
	padding-block: 0.4rem;
}

/* 0.3.4: franja de anuncio ahora con 3 zonas (WhatsApp | envío gratis |
   redes sociales), ver patterns/announce-bar.php. */
.km-announce__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: nowrap;
}

.km-announce__text {
	margin: 0;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	flex: 1 1 auto;
}

.km-announce__whatsapp,
.km-announce__social {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.km-announce__whatsapp {
	gap: 0.4rem;
	color: currentColor;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.km-announce__whatsapp:hover,
.km-announce__whatsapp:focus-visible {
	text-decoration: underline;
}

.km-announce__social {
	gap: 0.6rem;
}

.km-announce__social-link {
	display: inline-flex;
	color: currentColor;
}

.km-announce__social-link:hover,
.km-announce__social-link:focus-visible {
	opacity: 0.8;
}

@media (max-width: 479px) {
	.km-announce__text {
		font-size: 0.7rem;
	}

	.km-announce__whatsapp span {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Encabezado                                                           */
/* -------------------------------------------------------------------- */

.km-header__row {
	gap: var(--wp--preset--spacing--40, 1.5rem);
	padding-block: 0.5rem;
}

.km-header__brand {
	gap: 0.6rem;
}

/* Logo fijo del encabezado (ver patterns/header-logo.php). */
.km-header__logo-link {
	display: flex;
	align-items: center;
	line-height: 0;
}

/* 0.3.6: WooCommerce carga su propia hoja woocommerce-layout.css con la
   regla ".woocommerce img, .woocommerce-page img { height: auto; max-width:
   100%; }" (especificidad 0,1,1). Esa regla le gana a estos selectores de
   una sola clase (especificidad 0,1,0) en CUALQUIER página que WordPress
   marque con la clase body "woocommerce-page" (tienda, producto, carrito,
   checkout, mi cuenta) — pero NO en la portada, porque la portada no lleva
   esa clase. Por eso el logo se veía del tamaño correcto en el home pero
   enorme/roto en /shop/, /cart/, etc (confirmado en vivo comparando
   getComputedStyle en ambas páginas: 52px en home vs 279px en /shop/).
   Los !important de abajo son necesarios específicamente para ganarle a esa
   regla de WooCommerce; no se pueden quitar sin reintroducir el bug. */
.km-header__logo-img {
	display: block !important;
	width: auto !important;
	height: 4.25rem !important;
	max-width: 100% !important;
}

.km-header__actions {
	gap: 0.75rem;
}

/* 0.3.15: el formulario de búsqueda del tema dejó de ser el bloque nativo
   `core/search` (ver `kitsunemart_product_search_form()` en
   functions.php, agregada en la 0.3.14 para mandar la búsqueda como
   búsqueda de productos). Al dejar de ser un bloque `core/search` real
   dentro del contenido de la página, WordPress ya no lo detecta como
   bloque presente y deja de encolar el CSS de bloques que antes daba el
   layout de fila (campo de texto + botón lado a lado) de forma gratuita
   — el negocio reportó en vivo, recién instalada la 0.3.14, que el botón
   "Buscar" caía debajo del campo de texto en vez de quedar al lado.
   Estas reglas reemplazan ese CSS que ya no se puede dar por sentado,
   para las 3 variantes de este formulario (encabezado, página 404,
   "buscar de nuevo" en la página de resultados). */
.km-header__search .wp-block-search__inside-wrapper,
.km-404__search .wp-block-search__inside-wrapper,
.km-search__form .wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--km-contrast);
}

.km-header__search .wp-block-search__input,
.km-404__search .wp-block-search__input,
.km-search__form .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 0.5rem 0.85rem;
	font-size: inherit;
	font-family: inherit;
	color: inherit;
}

.km-header__search .wp-block-search__input:focus,
.km-404__search .wp-block-search__input:focus,
.km-search__form .wp-block-search__input:focus {
	outline: none;
}

.km-header__search .wp-block-search__button,
.km-404__search .wp-block-search__button,
.km-search__form .wp-block-search__button {
	flex: 0 0 auto;
	border: none;
	cursor: pointer;
	padding: 0.5rem 1rem;
	background-color: var(--wp--preset--color--km-primary);
	color: var(--wp--preset--color--km-base);
	font-weight: 600;
	white-space: nowrap;
}

.km-header__search .wp-block-search__button:hover,
.km-404__search .wp-block-search__button:hover,
.km-search__form .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--km-primary-dark);
}

/* 0.3.4: el usuario reportó que el buscador del encabezado "no funciona".
   Revisando el bloque (es el buscador nativo de WordPress, un <form>
   normal que no depende de JavaScript para funcionar) no se encontró un
   bug de lógica, pero sí un riesgo real de layout: dentro de
   .km-header__actions (fila flex con buscador + cuenta + carrito, al lado
   de un menú de 7 enlaces) el buscador no tenía un ancho mínimo ni
   flex-shrink:0, así que en pantallas donde el encabezado queda apretado
   podía terminar comprimido a casi 0px — técnicamente presente pero
   invisible/imposible de usar. Se fuerza un ancho mínimo utilizable y se
   evita que se achique.
   0.3.16: se subió max-width de 220px a 260px porque, aun con el
   placeholder acortado a "Buscar…" (ver functions.php /
   patterns/buscador-header.php), el texto quedaba muy justo al lado del
   botón "Buscar". 260px sigue dejando espacio de sobra para el menú de
   7 enlaces + cuenta + carrito en el mismo renglón. */
.km-header__search {
	max-width: 260px;
	min-width: 140px;
	flex: 0 1 auto;
	flex-shrink: 0;
}

.km-header__search .wp-block-search__inside-wrapper {
	border-radius: 999px;
	overflow: hidden;
	border-color: var(--wp--preset--color--km-contrast);
}

.km-header__search input[type="search"] {
	min-width: 0;
}

.km-header.km-header--scrolled {
	box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
}

/* -------------------------------------------------------------------- */
/* Secciones genéricas de portada                                       */
/* -------------------------------------------------------------------- */

.km-section-heading {
	align-items: baseline;
	gap: 1rem;
}

.km-section-subtitle {
	max-width: 46em;
	opacity: 0.85;
}

/* Hero */
.km-hero {
	padding-block: clamp(2rem, 6vw, 4rem);
}

.km-hero__eyebrow {
	margin: 0 0 0.5rem;
	font-weight: 700;
}

.km-hero__title {
	margin-top: 0;
}

/* Palabra destacada del título, pedida explícitamente en naranja (0.3.3) para
   coincidir con la propuesta visual aprobada. */
.km-hero__title-highlight {
	color: var(--wp--preset--color--km-primary);
}

.km-hero__image img {
	border-radius: var(--wp--preset--spacing--20, 1rem);
}

/* El hero tiene fondo morado (km-secondary) con texto claro (km-base) vía
   atributos de bloque, pero el botón "is-style-outline" no hereda ese color
   automáticamente en todos los casos: se fija explícito, mismo patrón ya
   usado en .km-footer para su fondo oscuro (ver CHANGELOG.md). */
.km-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--km-base);
	border-color: var(--wp--preset--color--km-base);
}

.km-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.km-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--km-primary);
	background-color: var(--wp--preset--color--km-base);
}

.km-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--km-base);
}

.km-hero__media {
	position: relative;
	display: flex;
	justify-content: center;
}

/* Tarjeta decorativa del hero (código QR + sticker de descuento), fiel a
   la propuesta visual aprobada ("v3"). Ver aviso sobre contenido de
   ejemplo en el comentario de patterns/hero-buscar-regalo.php. */
.km-hero__card {
	position: relative;
	z-index: 1;
	width: min(240px, 100%);
	aspect-ratio: 1;
	border-radius: 1.375rem;
	background-color: var(--wp--preset--color--km-surface);
	box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.4rem;
	transform: rotate(2deg);
	margin-inline: auto;
}

.km-hero__card img {
	width: 72%;
	height: auto;
	display: block;
}

/* Carrusel de fotos reales de producto dentro de la tarjeta blanca (0.3.3),
   ver comentario en patterns/hero-buscar-regalo.php. Las fotos van
   superpuestas (position: absolute) y se turnan con opacity vía @keyframes
   generados en PHP; nunca hay JavaScript de por medio. */
.km-hero__card--slideshow {
	padding: 0.9rem;
	overflow: hidden;
}

.km-hero__card-slideshow {
	position: relative;
	width: 100%;
	height: 100%;
}

.km-hero__card-slideshow img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.9rem;
	opacity: 0;
}

.km-hero__sticker {
	position: absolute;
	top: -10px;
	left: -10px;
	background-color: var(--wp--preset--color--km-primary);
	color: var(--wp--preset--color--km-contrast);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 800;
	font-size: 0.65rem;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.05;
	transform: rotate(-10deg);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Buscar / presupuesto (dos formularios independientes y reales) */
.km-quickfinder {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.km-quickfinder__form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 1rem;
	margin-top: 1rem;
}

.km-quickfinder__form--search + .km-quickfinder__form--budget {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--km-contrast) 12%, transparent);
}

.km-quickfinder__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 180px;
}

.km-quickfinder__field--search {
	flex: 1 1 260px;
}

.km-quickfinder__field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.km-quickfinder__field select,
.km-quickfinder__field input[type="search"] {
	padding: 0.6rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--km-contrast) 25%, transparent);
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--km-surface);
	color: var(--wp--preset--color--km-contrast);
	width: 100%;
}

.km-quickfinder__submit {
	flex: 0 0 auto;
	padding: 0.75rem 1.75rem;
	border: none;
	border-radius: 999px;
	background-color: var(--wp--preset--color--km-primary);
	color: var(--wp--preset--color--km-contrast);
	font-weight: 700;
	cursor: pointer;
}

.km-quickfinder__submit:hover {
	background-color: var(--wp--preset--color--km-accent);
}

/* Grids de categorías / fandoms / productos */
.km-fandoms,
.km-featured,
.km-new-arrivals,
.km-budget,
.km-benefits {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* La sección de categorías usa menos padding que el resto: en la propuesta
   ocupa notablemente menos alto que las demás secciones. */
.km-categories {
	padding-block: clamp(1rem, 2.5vw, 1.75rem);
}

/* Categorías curadas (6 fijas desde la 0.3.7, ver
   patterns/categorias-principales.php) */
.km-categories__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-cat__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	text-decoration: none;
}

.km-cat__icon {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in srgb, var(--wp--preset--color--km-primary) 16%, var(--wp--preset--color--km-surface));
}

/* Alterna naranja/morado entre tarjetas, igual que la propuesta visual. */
.km-cat:nth-child(2n) .km-cat__icon {
	background-color: color-mix(in srgb, var(--wp--preset--color--km-secondary) 16%, var(--wp--preset--color--km-surface));
}

.km-cat:nth-child(2n) .km-cat__icon-fallback {
	color: var(--wp--preset--color--km-secondary);
}

.km-cat__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.km-cat__icon-fallback {
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--wp--preset--color--km-primary-dark);
}

.km-cat__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

@media (max-width: 781px) {
	.km-categories__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 479px) {
	.km-categories__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.km-budget__grid {
	flex-wrap: wrap;
}

.km-benefits__item {
	text-align: center;
}

.km-benefits__icon {
	margin: 0;
}

/* Redes sociales: estilos del pattern kitsunemart/newsletter-redes, que
   existe pero no está insertado en templates/front-page.html todavía (ver
   docblock del pattern). */
.km-follow {
	padding-block: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}

/* CTA "Armá tu combo sorpresa" (patterns/combo-sorpresa.php) */
.km-promo {
	margin-block: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: 1.25rem;
	gap: 1.5rem;
}

.km-promo .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--km-contrast);
	border-color: var(--wp--preset--color--km-contrast);
}

.km-promo .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.km-promo .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--km-contrast);
	color: var(--wp--preset--color--km-primary);
}

/* -------------------------------------------------------------------- */
/* Pie de página                                                        */
/* -------------------------------------------------------------------- */

.km-footer {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* Reglas explícitas: el color global de encabezados/enlaces no debe
   depender solo de la herencia dentro de un fondo oscuro. */
.km-footer,
.km-footer h1,
.km-footer h2,
.km-footer h3,
.km-footer h4,
.km-footer h5,
.km-footer h6 {
	color: var(--wp--preset--color--km-base);
}

.km-footer a {
	color: var(--wp--preset--color--km-base);
}

.km-footer a:hover,
.km-footer a:focus-visible {
	color: var(--wp--preset--color--km-accent);
}

.km-footer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--km-base);
	outline-offset: 2px;
}

.km-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-footer__col li {
	margin-bottom: 0.5rem;
}

.km-footer__account {
	margin-top: 0.5rem;
}

/* Bug: dentro de una columna del footer (no un contenedor flex, a
   diferencia del encabezado), el bloque "Mi cuenta" de WooCommerce
   renderizaba el ícono/avatar gigante (ocupando casi todo el ancho de la
   columna). Causa: `.wc-block-customer-account__visual` es un <div> de
   bloque sin ancho propio — al no tener un padre flex que lo encoja a su
   contenido, se estira al 100% del ancho del contenedor, y el avatar
   (posicionado en absoluto al 100% de ese contenedor, ver el código
   fuente de WooCommerce Blocks) crece con él. Se fuerza acá un tamaño
   fijo y `inline-flex` para que no dependa del contexto del bloque
   padre, tanto en el pie de página como en el encabezado. */
.km-header__account .wc-block-customer-account__link,
.km-header__account .wc-block-customer-account__toggle,
.km-footer__account .wc-block-customer-account__link,
.km-footer__account .wc-block-customer-account__toggle {
	display: inline-flex;
}

.km-header__account .wc-block-customer-account__visual,
.km-footer__account .wc-block-customer-account__visual {
	position: relative;
	display: inline-flex;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

.km-header__account .wc-block-customer-account__avatar,
.km-footer__account .wc-block-customer-account__avatar {
	width: calc(100% - 8%);
	height: auto;
}

.km-footer__divider {
	margin-block: 2rem;
	opacity: 0.3;
}

.km-footer__bottom {
	gap: 1rem;
}

/* Logo fijo del pie de página (ver patterns/footer-logo.php). Placa clara
   detrás del logo para que sus colores (incluye morado) se lean bien sobre
   el fondo oscuro del footer. */
.km-footer__logo-link {
	display: inline-flex;
	margin-bottom: 0.75rem;
}

.km-footer__logo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--km-surface);
	border-radius: 0.75rem;
	padding: 0.5rem 0.85rem;
}

/* 0.3.6: mismo bug de especificidad que .km-header__logo-img arriba (ver
   comentario ahí) — WooCommerce le gana a esta regla en /shop/, /cart/,
   /checkout/, etc. con ".woocommerce-page img { height:auto; max-width:
   100%; }". Confirmado en vivo: el logo del footer se veía de 111px en vez
   de 52px en la página de tienda. */
.km-footer__logo-img {
	display: block !important;
	width: auto !important;
	height: 3.25rem !important;
	max-width: 100% !important;
}

/* -------------------------------------------------------------------- */
/* Blog, páginas genéricas, 404, búsqueda                               */
/* -------------------------------------------------------------------- */

.km-main {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* Páginas "Sobre nosotros" / "Contacto" (0.3.3) */
.km-about,
.km-contact {
	padding-block: clamp(1rem, 3vw, 2rem);
}

.km-about .km-promo,
.km-contact .km-promo {
	border-radius: 1rem;
	padding: clamp(1rem, 3vw, 1.75rem);
	margin-block: 1.5rem;
}

/* Rediseño 0.3.13: mapa embebido de "Contacto" (patterns/pagina-contacto.php) */
.km-contact__map-row {
	margin-block: 1.5rem;
	align-items: stretch;
}

.km-contact__map {
	border-radius: 1rem;
	overflow: hidden;
	line-height: 0;
}

.km-contact__map iframe {
	display: block;
	width: 100%;
}

/* -------------------------------------------------------------------- */
/* Tienda (archive-product.html): filtros a un lado + grilla más chica  */
/* -------------------------------------------------------------------- */

.km-shop__intro {
	margin-bottom: 1rem;
}

.km-shop__layout {
	align-items: flex-start;
	gap: 2rem;
}

.km-shop__sidebar {
	position: sticky;
	top: 1rem;
}

.km-shop__sidebar-title {
	margin-top: 0;
}

.km-shop__toolbar {
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--km-contrast) 12%, transparent);
}

/* Lista de categorías del panel lateral (patterns/shop-sidebar-categories.php) */
.km-shop-filter-cats {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--km-contrast) 12%, transparent);
}

.km-shop-filter-cats__list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.km-shop-filter-cats__list a {
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
}

.km-shop-filter-cats__list a:hover,
.km-shop-filter-cats__list a:focus-visible {
	text-decoration: underline;
}

.km-shop-filter-cats__list li.is-active a {
	font-weight: 700;
	color: var(--wp--preset--color--km-primary-dark);
}

.km-shop-filter-cats__count {
	opacity: 0.6;
	font-size: var(--wp--preset--font-size--small);
}

/* 0.3.6: filtro de precio del panel lateral (patterns/shop-sidebar-price.php),
   reemplaza a los bloques woocommerce/price-filter y woocommerce/stock-filter
   confirmados sin salida en el sitio en vivo (ver CHANGELOG.md 0.3.6). */
.km-shop-filter-price {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--km-contrast) 12%, transparent);
}

.km-shop-filter-price__form {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.km-shop-filter-price__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.km-shop-filter-price__input {
	width: 0;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.4rem 0.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--km-contrast) 25%, transparent);
	border-radius: 0.4rem;
	background-color: var(--wp--preset--color--km-surface);
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.km-shop-filter-price__sep {
	opacity: 0.5;
	flex: 0 0 auto;
}

.km-shop-filter-price__submit {
	align-self: flex-start;
	border: none;
	border-radius: 0.4rem;
	padding: 0.45rem 1rem;
	background-color: var(--wp--preset--color--km-primary);
	color: var(--wp--preset--color--km-base);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.km-shop-filter-price__submit:hover,
.km-shop-filter-price__submit:focus-visible {
	background-color: var(--wp--preset--color--km-primary-dark);
}

.km-shop-filter-price__clear {
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	opacity: 0.75;
}

/* Productos más chicos: el bloque product-collection ya arma 4 columnas
   (ver templates/archive-product.html); acá solo se ajusta el tamaño de
   imagen y el espaciado para que se sientan compactos, no gigantes. */
.km-shop__grid .wp-block-woocommerce-product-image img {
	aspect-ratio: 1;
	object-fit: cover;
}

.km-shop__grid .wc-block-components-product-price {
	font-weight: 700;
}

/*
 * 0.3.19: ocultar los swatches de variación (Variation Swatches for
 * WooCommerce) dentro de las cuadrículas de bloques (Tienda, Ofertas,
 * resultados de búsqueda — todas comparten la clase `km-shop__grid` y el
 * bloque nativo `woocommerce/product-collection`). El negocio reportó
 * que, aunque los swatches se ven y se pueden "seleccionar" ahí, el botón
 * se queda pegado en "Seleccionar opciones" sin importar qué variante se
 * elija. Confirmado en vivo: el plugin de swatches SÍ actualiza
 * correctamente el botón a "Añadir al carrito" dentro de "Nuestros
 * favoritos" (que usa el shortcode clásico `[products]`, markup
 * `ul.products`), y también dentro de la página de cada producto — pero
 * NO logra actualizar el botón cuando el producto vive dentro del bloque
 * `woocommerce/product-collection` (usa la Interactivity API de
 * WordPress/WooCommerce, con la que este plugin de terceros no es
 * compatible todavía). Ajustar el "Product Wrapper Selector" del plugin
 * (Ajustes de WooCommerce → Product Swatches → Archive/Shop) no evita que
 * el plugin siga inyectando los swatches ahí (les agrega igual la clase
 * `rtwpvs-product`), así que se oculta por CSS específicamente en estas
 * 3 cuadrículas de bloques — el botón "Seleccionar opciones" vuelve a
 * comportarse como un enlace normal a la página del producto (donde el
 * selector de variantes SÍ funciona bien), sin la trampa visual de un
 * swatch "seleccionable" que en realidad no hace nada ahí. No afecta a
 * "Nuestros favoritos" (clase `km-favorites__grid`, wrapper distinto) ni
 * a la página de producto individual.
 */
.km-shop__grid .rtwpvs-archive-variation-wrapper {
	display: none !important;
}

@media (max-width: 781px) {
	.km-shop__layout {
		flex-wrap: wrap;
	}

	.km-shop__sidebar,
	.km-shop__content {
		flex-basis: 100% !important;
		width: 100%;
	}

	.km-shop__sidebar {
		position: static;
	}
}

.km-blog-list__item {
	margin-bottom: 2rem;
}

.km-404 {
	text-align: center;
}

.km-404__search {
	max-width: 28rem;
	margin-inline: auto;
}

.km-search__form {
	max-width: 28rem;
	margin-bottom: 2rem;
}

/* -------------------------------------------------------------------- */
/* Productos destacados / novedades (WooCommerce Product Collection)    */
/* -------------------------------------------------------------------- */

.km-featured__grid .wp-block-woocommerce-product-template,
.km-new-arrivals__grid .wp-block-woocommerce-product-template {
	gap: 1rem;
}

/* 0.3.7: "Nuestros favoritos" (patterns/productos-destacados.php) pasó de
   un bloque Product Collection al shortcode clásico [products]. El
   shortcode genera markup clásico de WooCommerce (ul.products >
   li.product), distinto del markup de bloques usado en el resto del
   tema — estas reglas lo adaptan al mismo lenguaje visual.

   0.3.9: cambia de CSS Grid (columnas fijas) a Flexbox con ajuste
   automático. Desde la 0.3.9 esta sección muestra TODOS los productos
   marcados como "Destacado" en WooCommerce (cantidad variable — el
   negocio puede marcar 5, 8, 12, los que quiera, sin tocar código), así
   que el diseño no puede asumir un múltiplo exacto de 4. Con flexbox +
   "justify-content: center", una última fila incompleta (ej. 5 → 4 + 1)
   queda centrada en vez de pegada a la izquierda con un hueco al lado. */
.km-favorites__grid ul.products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-favorites__grid ul.products li.product {
	text-align: center;
	/* 0.3.8: WooCommerce's propio woocommerce-layout.css define
	   ".woocommerce ul.products li.product" con "float:left; width:22.05%;
	   margin:0 3.8% 2.992em 0" — misma especificidad que esta regla, y en
	   algunos casos gana la cascada. Eso encogía cada tarjeta a ~22% del
	   ancho de su columna del grid (confirmado en vivo: ~83px de 375px),
	   dejando de sobra espacio vacío entre tarjetas y forzando el texto del
	   botón (pill, border-radius:999px) a partirse en 2-3 líneas dentro de
	   un espacio angosto — por eso se veía como una "bolita" en vez de un
	   botón. Se fuerza con !important para no depender del orden de carga
	   de las hojas de estilo.
	   0.3.9: ancho pasa de "100% de una columna de grid" a un ancho fijo
	   con flex-basis/flex-grow, ya que ahora el layout es flexbox y admite
	   cualquier cantidad de tarjetas por fila. */
	flex: 1 1 260px;
	max-width: 280px;
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.km-favorites__grid ul.products li.product img {
	border-radius: 0.75rem;
	aspect-ratio: 1;
	object-fit: cover;
}

.km-favorites__grid ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin: 0.5rem 0 0.25rem;
}

.km-favorites__grid ul.products li.product .price {
	font-weight: 700;
	color: var(--wp--preset--color--km-contrast);
}

.km-favorites__grid ul.products li.product .button {
	display: inline-block;
	margin-top: 0.75rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--km-primary);
	color: var(--wp--preset--color--km-base);
	padding: 0.5rem 1.25rem;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.km-favorites__grid ul.products li.product .button:hover {
	background-color: var(--wp--preset--color--km-primary-dark);
}

@media (max-width: 781px) {
	/* 0.3.9: con flexbox no hace falta fijar columnas — basta con
	   angostar el flex-basis para que quepan ~2 tarjetas por fila en
	   vez de ~4, y siguen centrándose solas si la última fila queda
	   incompleta. */
	.km-favorites__grid ul.products li.product {
		flex-basis: 42%;
	}
}

@media (max-width: 480px) {
	.km-favorites__grid ul.products li.product {
		flex-basis: 100%;
		max-width: 320px;
	}
}

/* -------------------------------------------------------------------- */
/* TranslatePress: ocultar el selector de idioma flotante                */
/* -------------------------------------------------------------------- */

/*
 * 0.3.4: el usuario confirmó en vivo que el widget flotante de idioma
 * SEGUÍA visible con la regla de la 0.3.2/0.3.3 (`.trp-floating-switcher`).
 * Investigando de nuevo: esa clase corresponde a una versión más vieja del
 * plugin. La versión actual de TranslatePress usa el ID `#trp-floater-ls`
 * para el contenedor del selector flotante (confirmado contra un hilo de
 * soporte oficial en wordpress.org donde el propio equipo de TranslatePress
 * lo indica para personalizar ese elemento). Se deja la regla anterior
 * también, por si aplica en alguna combinación de versión/config, más un
 * selector por atributo bien amplio como red de seguridad final — entre
 * los tres, esto debería cubrir cualquier variante del widget flotante sin
 * desactivar TranslatePress ni las traducciones en sí.
 *
 * Si TODAVÍA se ve después de instalar esto: la opción para apagarlo
 * directamente desde el plugin (sin depender de CSS) vive en Ajustes →
 * TranslatePress → pestaña "Selector de idioma" → sección "Flotante" —
 * ahí se puede desactivar ese tipo de selector por completo.
 */
#trp-floater-ls,
.trp-floating-switcher,
[id^="trp-floater"],
[class*="trp-floating"] {
	display: none !important;
	visibility: hidden !important;
}

/* -------------------------------------------------------------------- */
/* Utilidades responsive                                                */
/* -------------------------------------------------------------------- */

@media (max-width: 599px) {
	.km-quickfinder__form {
		flex-direction: column;
		align-items: stretch;
	}

	.km-quickfinder__submit {
		width: 100%;
	}
}

/* -------------------------------------------------------------------- */
/* Pago en 2 pasos (0.3.21) — ver assets/js/checkout-dos-pasos.js        */
/* -------------------------------------------------------------------- */

.km-checkout-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 2rem;
}

.km-checkout-steps__step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.5;
}

.km-checkout-steps__step--activo {
	opacity: 1;
}

.km-checkout-steps__step--completo {
	opacity: 0.85;
}

.km-checkout-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--km-surface);
	border: 2px solid var(--wp--preset--color--km-primary);
	color: var(--wp--preset--color--km-primary);
	font-weight: 700;
	font-size: 0.9rem;
	flex-shrink: 0;
}

.km-checkout-steps__step--activo .km-checkout-steps__num,
.km-checkout-steps__step--completo .km-checkout-steps__num {
	background-color: var(--wp--preset--color--km-primary);
	color: #fff;
}

.km-checkout-steps__label {
	font-weight: 600;
}

.km-checkout-steps__conector {
	width: 3rem;
	height: 2px;
	background-color: var(--wp--preset--color--km-primary);
	opacity: 0.35;
}

.km-checkout__continuar {
	display: block;
	margin: 1.5rem 0 2rem;
	padding: 0.85rem 2rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--km-primary);
	color: #fff;
	border: none;
	font-weight: 700;
	cursor: pointer;
}

.km-checkout__continuar:hover {
	background-color: var(--wp--preset--color--km-primary-dark);
}

.km-checkout__continuar:disabled {
	opacity: 0.7;
	cursor: wait;
}

.km-checkout__aviso-envio {
	margin: -1rem 0 2rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid #cc1818;
	border-radius: 8px;
	background-color: #fdeaea;
	color: #7a0d0d;
	font-weight: 600;
}

.km-checkout__volver {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0;
	background: none;
	border: none;
	color: var(--wp--preset--color--km-primary);
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}

.km-checkout__editar-carrito {
	display: inline-block;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--km-primary);
	font-weight: 600;
	text-decoration: underline;
}

.km-checkout__editar-carrito:hover {
	color: var(--wp--preset--color--km-primary-dark);
}

@media (max-width: 599px) {
	.km-checkout-steps {
		gap: 0.4rem;
	}

	.km-checkout-steps__label {
		font-size: 0.85rem;
	}

	.km-checkout-steps__conector {
		width: 1.5rem;
	}

	.km-checkout__continuar {
		width: 100%;
	}
}