/* =========================================================
   WooCommerce con la paleta Lumina (plan en PLAN-ESTILO-WOO.md)
   Se encola solo en contexto Woo + la home (las cards de
   destacados comparten estos estilos). Astra pinta todo esto
   con su azul default (#046bd2) y el verde de Woo vía dynamic
   CSS: los selectores de acá calcan los suyos para ganarle
   por orden de carga. Siempre var(--lumina-*): la paleta
   configurable del plugin pinta también la tienda.
   ========================================================= */

/* =========================================================
   Cards de producto (tienda, relacionados y destacados de la home)
   ========================================================= */

/* Label de categoría oculto mientras el catálogo siga sin categorías
   reales ("Sin categorizar"); al categorizarse, sacar esta regla. */
.woocommerce ul.products li.product .ast-woo-product-category,
.lumina-destacados ul.products li.product .ast-woo-product-category {
	display: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.lumina-destacados ul.products li.product .woocommerce-loop-product__title {
	color: var(--lumina-dark);
}

.woocommerce ul.products li.product .price,
.lumina-destacados ul.products li.product .price {
	color: var(--lumina-dark);
	font-weight: 700;
}

.woocommerce ul.products li.product .button,
.lumina-destacados ul.products li.product .button {
	display: inline-block;
	background: var(--lumina-primary);
	color: var(--lumina-white);
	padding: 10px 24px;
	border-radius: 4px;
	font-weight: 700;
	transition: background 0.2s ease;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus,
.lumina-destacados ul.products li.product .button:hover,
.lumina-destacados ul.products li.product .button:focus {
	background: var(--lumina-primary-hover);
	color: var(--lumina-white);
}

/* =========================================================
   Botones de Woo en general (carrito, checkout, cuenta, avisos)
   El .woocommerce-js es la clase que usa la dynamic CSS de Astra.
   ========================================================= */
.woocommerce a.button,
.woocommerce-js a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a.button {
	background: var(--lumina-primary);
	color: var(--lumina-white);
	border: 0;
	border-radius: 4px;
	font-weight: 700;
	transition: background 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce-js a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background: var(--lumina-primary-hover);
	color: var(--lumina-white);
}

/* =========================================================
   Avisos (message/info/error): crema con acento de marca,
   sin el verde/azul default de Woo.
   ========================================================= */
.woocommerce-message,
.woocommerce-info {
	background: var(--lumina-light);
	border-top-color: var(--lumina-primary);
	color: var(--lumina-dark);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--lumina-primary);
}

/* Errores: rojo apagado que convive con la paleta cálida. */
.woocommerce-error {
	background: var(--lumina-light);
	border-top-color: #b3564d;
	color: var(--lumina-dark);
}

.woocommerce-error::before {
	color: #b3564d;
}

/* =========================================================
   Badge de oferta (clásico y variante moderna de Astra)
   ========================================================= */
.woocommerce span.onsale,
.ast-onsale-card {
	background: var(--lumina-primary);
	color: var(--lumina-white);
}

/* =========================================================
   Paginación de archivos de tienda
   ========================================================= */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
	border-color: #d9d2c7;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	color: var(--lumina-dark);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--lumina-primary);
	color: var(--lumina-white);
}

/* =========================================================
   Ficha de producto
   ========================================================= */
.woocommerce div.product .product_title {
	font-family: var(--lumina-font-display);
	color: var(--lumina-dark);
	/* Es el h1 de la página: Astra lo deja al tamaño del body. */
	font-size: 1.8rem;
	line-height: 1.2;
}

/* "Sin categorizar" en la ficha: arriba del título (span propio de
   Astra) y en el meta "Categoría:". Mismo criterio que en las cards:
   se ocultan hasta que el catálogo tenga categorías reales. */
.woocommerce div.product .single-product-category,
.woocommerce div.product .product_meta .posted_in {
	display: none;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--lumina-dark);
	font-weight: 700;
}

.woocommerce div.product .stock {
	color: var(--lumina-muted);
}

/* Cantidad: campo prolijo, sin spinner gigante. */
.woocommerce .quantity .qty {
	border: 1px solid #d9d2c7;
	border-radius: 4px;
	padding: 8px;
}

/* Tabs (Descripción / Valoraciones): activa con acento dorado. La
   rayita de la activa es un ::before que Astra pinta con su azul vía
   dynamic CSS; se recolorea, no se agrega otro borde. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--lumina-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--lumina-dark);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
	background: var(--lumina-primary);
}

/* Miniaturas de la galería: activa marcada en dorado. */
.woocommerce div.product .flex-control-thumbs li img {
	border: 2px solid transparent;
	border-radius: 4px;
}

.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover {
	border-color: var(--lumina-primary);
}

/* =========================================================
   Carrito y checkout
   ========================================================= */
.woocommerce table.shop_table {
	border: 1px solid #e8e2d8;
	border-radius: 4px;
}

.woocommerce table.shop_table th {
	color: var(--lumina-dark);
}

/* Caja de totales del carrito y resumen del checkout en crema. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	background: var(--lumina-light);
	padding: 20px;
	border-radius: 4px;
}

/* El botón de finalizar compra es EL botón: más grande que el resto. */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
	background: var(--lumina-primary);
	color: var(--lumina-white);
	font-size: 1.05rem;
	padding: 14px 28px;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover {
	background: var(--lumina-primary-hover);
}

/* =========================================================
   Mi cuenta
   ========================================================= */
.woocommerce-MyAccount-navigation ul li a {
	color: var(--lumina-dark);
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--lumina-primary-hover);
}

/* =========================================================
   Sidebar de filtros de la tienda (área astra-woo-shop-sidebar,
   sembrada por inc/setup.php; layout tipo proveedor)
   ========================================================= */

/* Títulos de widget con el mismo tratamiento que el "Seguinos"
   del footer: Lato uppercase con tracking y filete inferior. */
#secondary .widget-title {
	font-family: var(--lumina-font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--lumina-dark);
	border-bottom: 1px solid #e8e2d8;
	padding-bottom: 10px;
	margin-bottom: 14px;
}

#secondary .widget {
	margin-bottom: 36px;
}

/* Listas (categorías y atributos): links marrones, hover tostado,
   contadores apagados. */
#secondary .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#secondary .widget ul li {
	padding: 5px 0;
	font-size: 0.95rem;
}

#secondary .widget ul li a {
	color: var(--lumina-dark);
}

#secondary .widget ul li a:hover,
#secondary .widget ul li.current-cat > a,
#secondary .widget ul li.chosen a {
	color: var(--lumina-primary-hover);
}

#secondary .widget .count {
	color: var(--lumina-muted);
	font-size: 0.85em;
}

/* Slider de precio: Woo lo pinta con su lila default. */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--lumina-primary);
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background-color: #e8e2d8;
}

.woocommerce .widget_price_filter .price_slider_amount .price_label {
	color: var(--lumina-muted);
	font-size: 0.9rem;
}

/* Chips de filtros activos: crema con borde dorado. */
.woocommerce .widget_layered_nav_filters ul li a {
	display: inline-block;
	background: var(--lumina-light);
	border: 1px solid var(--lumina-primary);
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 0.85rem;
}

/* =========================================================
   Desktop (>= 922px, breakpoint tablet de Astra: abajo de eso
   la sidebar apila y mandan sus grillas responsive)
   ========================================================= */
@media (min-width: 922px) {
	/* Con sidebar al lado, la grilla respira mejor a 3 columnas.
	   Especificidad calcada de la dynamic CSS de Astra
	   (.woocommerce.columns-4 ul.products:not(...)): mismo peso y
	   el child carga después. */
	body.ast-left-sidebar.woocommerce ul.products:not(.elementor-grid) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================
   Desktop (>= 768px, mismo breakpoint que style.css)
   ========================================================= */
@media (min-width: 768px) {
	.woocommerce div.product .product_title {
		font-size: 2.4rem;
	}
}