/*
 * KitsuneMart — ajustes visuales sobre los bloques nativos de WooCommerce.
 *
 * WooCommerce ya provee su propio CSS base para estos bloques; aquí solo se
 * afinan detalles de marca (colores, radios, espaciados) para que combinen
 * con el resto del tema. Estas reglas aplican tanto a los bloques dentro de
 * las plantillas propias del tema como a las plantillas por defecto de
 * WooCommerce (tienda, categoría, producto, carrito, checkout), que se usan
 * sin modificar en esta primera versión.
 */

/* Mini carrito en el encabezado */
.km-header__cart .wc-block-mini-cart__button {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--km-contrast);
}

/* Insignia del carrito: fondo oscuro + texto claro para asegurar contraste
   AA (≈15:1) en vez de blanco sobre naranja (≈2.45:1, insuficiente). */
.km-header__cart .wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--km-contrast);
	color: var(--wp--preset--color--km-base);
}

/* Botón "Añadir al carrito" dentro de tarjetas de producto.
   El color de texto/fondo se hereda del estilo global de botones definido
   en theme.json (texto km-contrast sobre fondo km-primary, ≈6.2:1). */
.wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-components-product-button__button {
	border-radius: 999px;
}

/* Precio destacado */
.wc-block-components-product-price__value.is-discounted {
	color: var(--wp--preset--color--km-contrast);
}

/* Notificaciones de la tienda (carrito, cupones, errores) */
.wc-block-components-notice-banner {
	border-radius: 0.75rem;
}

/* Mi cuenta: formularios y tablas heredados del shortcode clásico.
   Texto km-contrast sobre fondo km-primary (≈6.2:1) y km-accent en hover
   (≈11:1), igual que el resto de los botones del tema. */
.km-my-account form .woocommerce-Button,
.km-my-account .button {
	border-radius: 999px;
	background-color: var(--wp--preset--color--km-primary);
	color: var(--wp--preset--color--km-contrast);
	border: none;
	padding: 0.65rem 1.5rem;
}

.km-my-account form .woocommerce-Button:hover,
.km-my-account .button:hover {
	background-color: var(--wp--preset--color--km-accent);
}

.km-my-account form .woocommerce-Button:focus-visible,
.km-my-account .button:focus-visible {
	outline: 2px solid var(--wp--preset--color--km-contrast);
	outline-offset: 2px;
}

.km-my-account table.shop_table {
	border-collapse: collapse;
	width: 100%;
}

.km-my-account table.shop_table th,
.km-my-account table.shop_table td {
	padding: 0.75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--km-contrast) 15%, transparent);
	text-align: left;
}

/* Migas de pan del producto (bloque nativo de WooCommerce) */
.wc-block-breadcrumbs {
	margin-bottom: 1rem;
	font-size: var(--wp--preset--font-size--small);
}

/* Categorías principales: miniaturas circulares, tamaño fijo explícito
   (no depender de max-width:100% del bloque, que otros plugins del sitio
   pueden sobrescribir con reglas globales tipo "img { max-width: none }"
   pensadas para sliders) y espaciado más apretado, siguiendo la dirección
   "Pop compacto" elegida. Solo se ajusta el marco (tamaño, forma,
   espaciado); las imágenes y nombres de categoría siguen viniendo tal
   cual de WooCommerce, sin inventar íconos por categoría.

   Nota: woocommerce/product-categories es un bloque de LISTA jerárquica
   (clase "is-list"), no un grid de columnas — el catálogo real tiene
   subcategorías anidadas (se ve en el HTML como listas "depth-0"/
   "depth-1"), así que los atributos "columns"/"rows" no lo convierten en
   un grid: WooCommerce necesita la lista para mostrar esa jerarquía. En
   vez de forzar un grid que no puede representar la jerarquía, se muestra
   solo el nivel superior (las categorías principales) en una fila
   horizontal con salto de línea; las subcategorías siguen existiendo y
   accesibles al entrar a cada categoría, solo no se previsualizan acá. */
.km-categories__grid .wc-block-product-categories-list--depth-0 {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1.5rem;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.km-categories__grid .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	gap: 0.4rem;
	margin: 0 !important;
	text-align: center;
}

.km-categories__grid .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item > a {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}

/* Ocultar la vista previa anidada de subcategorías en esta sección: un
   grid horizontal no puede mostrar jerarquía sin verse roto. */
.km-categories__grid .wc-block-product-categories-list--depth-1 {
	display: none !important;
}

.km-categories__grid .wc-block-product-categories-list-item__image {
	max-width: 72px !important;
	margin: 0 !important;
}

.km-categories__grid .wc-block-product-categories-list-item__image img {
	width: 72px !important;
	height: 72px !important;
	max-width: 72px !important;
	border-radius: 50%;
	object-fit: cover;
}

.km-categories__grid .wc-block-product-categories-list-item__name {
	font-size: 0.85rem;
	font-weight: 600;
}

/* 0.3.6: aviso visible cuando "Actualizar carrito" no puede enviarse
   porque una cantidad supera el stock disponible (ver
   assets/js/carrito-validacion.js para el porqué). Colores de alerta
   propios (no vienen de theme.json, que no define un token de error):
   se elige un rojo de advertencia estándar, consistente con las notices
   nativas de WooCommerce (.woocommerce-error), para que se lea como
   alerta y no se confunda con una caja informativa de marca. */
.km-cart-stock-notice {
	margin-bottom: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 0.75rem;
	background-color: #fbe6e2;
	border: 1px solid #d63631;
	color: #7a1d1a;
	font-weight: 600;
}

.km-cart-stock-notice ul {
	margin: 0;
	padding-left: 1.25rem;
}

.km-cart-stock-notice p {
	margin: 0;
}

.woocommerce-cart-form input.qty.km-qty-invalid {
	border: 2px solid #d63631;
	outline: none;
}