/**
 * Reskin visual de WooCommerce.
 *
 * Apunta a las clases nativas que WooCommerce ya imprime (.woocommerce,
 * ul.products, .single-product, etc.) para aplicar el design system del
 * documento maestro SIN sobrescribir templates PHP. Esto reduce riesgo
 * de romper compatibilidad en actualizaciones del plugin (ver
 * inc/woocommerce.php).
 */

/* Grilla de tienda / categoría: mismo criterio que .product-grid */
.woocommerce ul.products{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
	list-style:none;
}
@media (max-width:1023px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media (max-width:480px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:12px;}}

.woocommerce ul.products li.product{
	background:var(--color-surface);
	border:1px solid var(--color-border);
	border-radius:var(--radius-card);
	overflow:hidden;
	padding:0 !important;
	margin:0 !important;
	transition:box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover{
	box-shadow:0 12px 28px rgba(34,20,20,.08);
	transform:translateY(-3px);
}
.woocommerce ul.products li.product img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	border-radius:0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--font-body);
	font-size:15px;
	font-weight:600;
	padding:16px 16px 0;
	color:var(--color-text);
}
.woocommerce ul.products li.product .price{
	padding:6px 16px 16px;
	display:block;
	font-size:17px;
	font-weight:700;
	color:var(--color-primary);
}
.woocommerce ul.products li.product .price del{
	color:var(--color-text-secondary);
	font-weight:400;
	font-size:13px;
	opacity:1;
}
.woocommerce ul.products li.product .price ins{
	text-decoration:none;
}

/* Badge de oferta (ver woocommerce_sale_flash filter en inc/woocommerce.php) */
.woocommerce span.onsale,
.woocommerce .tag-badge{
	position:absolute;
	top:12px;left:12px;
	background:var(--color-primary);
	color:#fff;
	font-size:11px;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	padding:5px 10px;
	border-radius:0 4px 4px 0;
	min-height:0;min-width:0;
	line-height:1.4;
}

/* Botones (Añadir al carrito, Ver producto, checkout, etc.) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
	background:var(--color-primary);
	color:#fff;
	border-radius:8px;
	padding:14px 28px;
	font-family:var(--font-body);
	font-weight:600;
	font-size:15px;
	border:none;
	transition:background .18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
	background:var(--color-primary-dark);
	color:#fff;
}
.woocommerce a.button.added::after{display:none;}

/* Ficha de producto individual */
.woocommerce div.product .product_title{
	font-family:var(--font-display);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
	color:var(--color-primary);
	font-size:24px;
	font-weight:700;
}
.woocommerce div.product .woocommerce-product-details__short-description{
	color:var(--color-text-secondary);
}
.woocommerce div.product form.cart{
	margin-top:24px;
}
.woocommerce div.product .quantity input.qty{
	border:1px solid var(--color-border);
	border-radius:8px;
	height:48px;
	text-align:center;
}

/* Tabs (descripción / info adicional / reseñas) */
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
	font-weight:600;
	color:var(--color-text-secondary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
	color:var(--color-primary);
}

/* Carrito y checkout */
.woocommerce table.shop_table{
	border-color:var(--color-border);
	border-radius:var(--radius-card);
}
.woocommerce table.shop_table th{
	font-family:var(--font-body);
	font-weight:600;
}
.woocommerce-checkout #payment{
	background:var(--color-surface);
	border-radius:var(--radius-card);
	border:1px solid var(--color-border);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select{
	border:1px solid var(--color-border);
	border-radius:8px;
	padding:12px;
}

/* Mensajes de estado (éxito/error/info) — accesibles y sin depender
   solo del color (doc sección 15). */
.woocommerce-message,
.woocommerce-info{
	border-top-color:var(--color-primary) !important;
}
.woocommerce-message::before{color:var(--color-primary) !important;}
.woocommerce-error{border-top-color:#B3261E !important;}

/* Estado vacío del carrito (doc sección 7) */
.woocommerce-cart .cart-empty{
	font-size:16px;
	color:var(--color-text-secondary);
}