/* ==========================================================================
   UXEN — tienda.css
   La tienda (WooCommerce) con el sistema visual del sitio: catálogo, ficha de
   producto, carrito y checkout.

   Sólo se carga en las vistas de la tienda (inc/tienda.php), y sólo reviste lo
   que WooCommerce pinta: aquí no se reescribe ninguna plantilla suya, se le
   ponen los tokens de ui.css encima para que el carrito no parezca de otro
   sitio. El carrito y el checkout de WooCommerce 8+ son bloques, así que hay
   dos familias de selectores —`.woocommerce` (clásico) y `.wc-block-*`— y las
   dos tienen que quedar bien: el día que alguien cambie la página de carrito de
   bloque a shortcode, no se debe caer el estilo.
   ========================================================================== */

/* Marco ---------------------------------------------------------------------*/
.uxen-tienda { padding-block: 40px 72px; }
.uxen-tienda__h1 { margin: 10px 0 24px; }
.uxen-tienda__bd { font-size: .95rem; }

/* El checkout y el carrito respiran mejor sin el clamp de lectura de page.php. */
.uxen-tienda .wc-block-components-main,
.uxen-tienda .woocommerce { max-width: none; }

/* Avisos (añadido al carrito, cupón, errores) -------------------------------*/
.uxen-tienda .woocommerce-message,
.uxen-tienda .woocommerce-info,
.uxen-tienda .woocommerce-error,
.mt-sec .woocommerce-message,
.mt-sec .woocommerce-info,
.mt-sec .woocommerce-error {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid var(--c-border);
	border-left: 3px solid var(--c-accent);
	border-radius: var(--radius);
	background: var(--c-bg-subtle);
	color: var(--c-fg-soft);
	font-size: .9rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.uxen-tienda .woocommerce-message,
.mt-sec .woocommerce-message { border-left-color: var(--c-op); }
.uxen-tienda .woocommerce-error,
.mt-sec .woocommerce-error { border-left-color: #b32020; }
.uxen-tienda .woocommerce-message .button,
.mt-sec .woocommerce-message .button { margin-left: auto; }

/* Botones -------------------------------------------------------------------*/
.uxen-tienda .woocommerce a.button,
.uxen-tienda .woocommerce button.button,
.uxen-tienda .woocommerce input.button,
.uxen-tienda .woocommerce #respond input#submit,
.mt-sec .woocommerce-message .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--c-accent);
	color: var(--c-accent-fg);
	border: 0;
	border-radius: 100px;
	padding: 11px 22px;
	font: 600 .88rem var(--font-sans);
	line-height: 1;
	text-decoration: none;
	transition: background .18s ease;
}
.uxen-tienda .woocommerce a.button:hover,
.uxen-tienda .woocommerce button.button:hover,
.uxen-tienda .woocommerce input.button:hover,
.mt-sec .woocommerce-message .button:hover { background: var(--c-accent-hover); color: #fff; }

.uxen-tienda .woocommerce a.button.alt,
.uxen-tienda .woocommerce button.button.alt { background: var(--c-accent-deep); }

/* Los bloques traen sus propios tokens: se reapuntan en vez de pelearse
   selector a selector con ellos. */
.uxen-tienda .wc-block-components-button:not(.is-link) {
	background: var(--c-accent);
	border-radius: 100px;
	font-weight: 600;
}
.uxen-tienda .wc-block-components-button:not(.is-link):hover { background: var(--c-accent-hover); }

/* Catálogo ------------------------------------------------------------------*/
.uxen-tienda ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.uxen-tienda ul.products::before,
.uxen-tienda ul.products::after { content: none; }
.uxen-tienda ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	background: var(--c-surface);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease;
}
.uxen-tienda ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.uxen-tienda ul.products li.product img { margin: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.uxen-tienda ul.products li.product .woocommerce-loop-product__title {
	font: 600 1rem var(--font-sans);
	padding: 16px 18px 0;
	margin: 0;
}
.uxen-tienda ul.products li.product .price {
	display: block;
	padding: 6px 18px 0;
	color: var(--c-fg);
	font-weight: 600;
}
.uxen-tienda ul.products li.product .price del { color: var(--c-fg-muted); font-weight: 400; }
.uxen-tienda ul.products li.product .button { margin: 16px 18px 18px; }

.uxen-tienda .woocommerce-result-count { color: var(--c-fg-muted); font-size: .85rem; }
.uxen-tienda .woocommerce-ordering select {
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius);
	padding: 8px 12px;
	font: 400 .88rem var(--font-sans);
	background: var(--c-surface);
}

/* Ficha de producto ---------------------------------------------------------*/
.uxen-tienda .product .summary .price { font-size: 1.5rem; font-weight: 600; color: var(--c-fg); }
.uxen-tienda .product .summary .product_title { font-family: var(--font-serif); }
.uxen-tienda .quantity input[type="number"],
.uxen-tienda .woocommerce form .form-row input.input-text,
.uxen-tienda .woocommerce form .form-row textarea,
.uxen-tienda .woocommerce form .form-row select {
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius);
	padding: 10px 12px;
	font: 400 .92rem var(--font-sans);
	background: var(--c-surface);
	color: var(--c-fg);
}
.uxen-tienda .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--c-border); }
.uxen-tienda .woocommerce-tabs ul.tabs li { border: 0; background: none; border-radius: 0; }
.uxen-tienda .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--c-accent); }

/* Carrito y checkout --------------------------------------------------------*/
.uxen-tienda table.shop_table {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	border-collapse: separate;
	overflow: hidden;
}
.uxen-tienda table.shop_table th { background: var(--c-bg-subtle); font-weight: 600; }
.uxen-tienda .cart_totals h2,
.uxen-tienda .woocommerce-billing-fields h3,
.uxen-tienda .woocommerce-checkout-review-order h3 { font-family: var(--font-serif); }

.uxen-tienda .cart-empty,
.uxen-tienda .wc-block-cart__empty-cart__title {
	font-family: var(--font-serif);
	font-size: 1.4rem;
}

/* Pagos: la lista de métodos del checkout (Stripe entra aquí). */
.uxen-tienda #payment,
.uxen-tienda .wc-block-checkout__payment-method {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	background: var(--c-bg-subtle);
}
.uxen-tienda #payment ul.payment_methods { border-bottom: 1px solid var(--c-border); }
.uxen-tienda #payment div.form-row { padding: 18px; }

/* Cuando el checkout se queda sin métodos de pago, WooCommerce lo dice con un
   párrafo discreto que es fácil no ver. Aquí se ve. */
.uxen-tienda .woocommerce-notice--info,
.uxen-tienda .wc-block-checkout__no-payment-methods-placeholder {
	border-left: 3px solid var(--c-dev);
	background: var(--c-dev-soft);
	padding: 14px 18px;
	border-radius: var(--radius);
}

/* Mi cuenta -----------------------------------------------------------------*/
.uxen-tienda .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.uxen-tienda .woocommerce-MyAccount-navigation li a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--c-border);
	border-radius: 100px;
	font-size: .85rem;
	color: var(--c-fg-soft);
}
.uxen-tienda .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--c-accent-soft);
	border-color: var(--c-accent-soft);
	color: var(--c-accent-hover);
	font-weight: 600;
}

@media (max-width: 782px) {
	.uxen-tienda { padding-block: 24px 48px; }
	.uxen-tienda .woocommerce-MyAccount-navigation ul { gap: 6px; }
}

/* La etiqueta «Oferta» de WooCommerce viene en un verde oliva que no es de esta
   marca; se reapunta al acento, igual que la de la mesa de regalos. */
.uxen-tienda span.onsale {
	background: var(--c-accent);
	color: #fff;
	border-radius: 100px;
	padding: 4px 12px;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
	font: 700 .7rem var(--font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
}