/* ============================================================
   Érase una vez — superficies genéricas de WooCommerce
   ------------------------------------------------------------
   Alcance:
   · .wc-generic          → PDP genérica (productos SIN plantilla
     propia; las PDPs 2911/2123 y el checkout NO cargan este CSS).
   · body.woocommerce-cart → página de carrito clásica.
   Se carga DESPUÉS de woocommerce-general/layout/smallscreen, por
   eso algunos selectores repiten contexto (div.product, table.cart)
   para igualar o superar la especificidad de los estilos nativos.
   Mobile-first, breakpoints 768 / 900 / 1024. Tokens --e1v-* en main.css.
   ============================================================ */

/* ============================================================
   1) Avisos globales de WooCommerce (PDP genérica + carrito)
   ============================================================ */

.wc-generic .woocommerce-notices-wrapper:empty,
body.woocommerce-cart .woocommerce-notices-wrapper:empty {
	display: none;
}

.wc-generic .woocommerce-message,
.wc-generic .woocommerce-info,
.wc-generic .woocommerce-error,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 0;
	border-radius: var(--e1v-radius-selector);
	list-style: none;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
}

/* Fuera el icono y el border-top grueso por defecto de WC */
.wc-generic .woocommerce-message::before,
.wc-generic .woocommerce-info::before,
.wc-generic .woocommerce-error::before,
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before {
	content: none;
}

/* Éxito: verde sobre fondo suave */
.wc-generic .woocommerce-message,
body.woocommerce-cart .woocommerce-message {
	background: #EAF7F0;
	color: #1F7A50;
}

/* Info: cielo */
.wc-generic .woocommerce-info,
body.woocommerce-cart .woocommerce-info {
	background: var(--e1v-cielo-suave);
	color: #1F5E80;
}

/* Error: rojo sobre rosa muy pálido */
.wc-generic .woocommerce-error,
body.woocommerce-cart .woocommerce-error {
	background: #FFF5F6;
	color: var(--e1v-error);
}

.wc-generic ul.woocommerce-error li,
body.woocommerce-cart ul.woocommerce-error li {
	margin: 0;
	list-style: none;
}

/* Botón dentro del aviso («Ver carrito») como mini píldora blanca */
.wc-generic .woocommerce-message .button,
.wc-generic .woocommerce-info .button,
.wc-generic .woocommerce-error .button,
body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-cart .woocommerce-info .button,
body.woocommerce-cart .woocommerce-error .button {
	float: right;
	margin: -3px 0 0 14px;
	padding: 7px 16px;
	border: 0;
	border-radius: var(--e1v-radius-pill);
	background: #fff;
	color: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(36, 43, 87, .12);
	transition: box-shadow .15s ease, transform .15s ease;
}

.wc-generic .woocommerce-message .button:hover,
body.woocommerce-cart .woocommerce-message .button:hover {
	box-shadow: 0 3px 10px rgba(36, 43, 87, .18);
}

/* ============================================================
   2) PDP genérica — contenedor y breadcrumb
   ============================================================ */

.wc-generic {
	max-width: var(--e1v-container);
	margin: 0 auto;
	padding: 24px 16px 16px;
}

.wc-generic .woocommerce-breadcrumb {
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--e1v-secundario);
}

.wc-generic .woocommerce-breadcrumb a {
	color: var(--e1v-secundario);
	text-decoration: none;
	transition: color .15s ease;
}

.wc-generic .woocommerce-breadcrumb a:hover,
.wc-generic .woocommerce-breadcrumb a:focus-visible {
	color: var(--e1v-magenta);
}

/* ============================================================
   3) PDP genérica — layout del producto
   (WC flota galería/summary al 48%; aquí se resetea y se usa grid)
   ============================================================ */

.wc-generic div.product {
	position: relative; /* ancla del badge .onsale */
}

.wc-generic div.product div.images,
.wc-generic div.product div.summary {
	float: none;
	width: 100%;
	margin-bottom: var(--e1v-space-4);
}

@media (min-width: 900px) {
	.wc-generic div.product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--e1v-space-6);
		align-items: start;
	}

	.wc-generic div.product div.images,
	.wc-generic div.product div.summary {
		margin-bottom: 0;
	}

	/* Tabs y relacionados ocupan el ancho completo bajo las 2 columnas */
	.wc-generic div.product .woocommerce-tabs,
	.wc-generic div.product section.related {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   4) PDP genérica — galería
   ============================================================ */

.wc-generic .woocommerce-product-gallery {
	position: relative;
}

/* Con JS (flexslider) el visor es .flex-viewport; sin JS, el wrapper */
.wc-generic .woocommerce-product-gallery .flex-viewport,
.wc-generic .woocommerce-product-gallery__wrapper {
	border-radius: var(--e1v-radius-card);
	overflow: hidden;
	background: var(--e1v-crema);
	box-shadow: var(--e1v-shadow-card);
}

.wc-generic .woocommerce-product-gallery__image a,
.wc-generic .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
}

/* Lupa/zoom (si el sitio la activa) */
.wc-generic .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 9;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--e1v-shadow-card);
}

/* Miniaturas que genera flexslider */
.wc-generic div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}

.wc-generic div.product div.images .flex-control-thumbs li {
	float: none;
	width: auto;
	margin: 0;
}

.wc-generic div.product div.images .flex-control-thumbs li img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--e1v-radius-input);
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s ease;
}

.wc-generic div.product div.images .flex-control-thumbs li img:hover,
.wc-generic div.product div.images .flex-control-thumbs li img.flex-active {
	opacity: 1;
}

/* ============================================================
   5) PDP genérica — summary (título, precio, descripción corta)
   ============================================================ */

.wc-generic div.product .product_title {
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.1;
	margin: 0 0 6px;
}

.wc-generic div.product p.price {
	margin: 4px 0 16px;
	color: var(--e1v-magenta);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
}

.wc-generic div.product p.price del {
	color: var(--e1v-secundario);
	font-size: .6em;
	font-weight: 600;
	opacity: .75;
}

.wc-generic div.product p.price ins {
	text-decoration: none;
}

.wc-generic .woocommerce-product-details__short-description {
	color: #4B4E6D;
	font-size: 15.5px;
	line-height: 1.65;
	margin: 0 0 20px;
}

.wc-generic .woocommerce-product-details__short-description p {
	margin: 0 0 10px;
}

/* ============================================================
   6) PDP genérica — form.cart nativo (cantidad + añadir)
   ============================================================ */

.wc-generic div.product form.cart {
	margin: 4px 0 24px;
}

.wc-generic div.product form.cart div.quantity {
	float: none;
	display: inline-flex;
	margin: 0 12px 12px 0;
	vertical-align: middle;
}

.wc-generic div.product form.cart .qty {
	width: 88px;
	height: 52px;
	padding: 0 8px;
	text-align: center;
	font-weight: 700;
}

.wc-generic form.cart button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	float: none;
	vertical-align: middle;
	min-height: 52px;
	margin: 0 0 12px;
	padding: 12px 32px;
	border: 0;
	border-radius: var(--e1v-radius-pill);
	background: var(--e1v-magenta);
	color: #fff;
	font-family: var(--e1v-font-body);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: var(--e1v-shadow-cta);
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.wc-generic form.cart button.single_add_to_cart_button:hover,
.wc-generic form.cart button.single_add_to_cart_button:focus-visible {
	background: var(--e1v-magenta-hover);
	color: #fff;
}

.wc-generic form.cart button.single_add_to_cart_button:disabled,
.wc-generic form.cart button.single_add_to_cart_button.disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* ============================================================
   7) PDP genérica — formulario de personalización inyectado
   (snippets tipo «product-778-form»: label + input de nombre,
   precio dinámico y su propio botón; se presenta como tarjeta rosa)
   ============================================================ */

.wc-generic div.product form.cart[class*="-form"] {
	display: block;
	margin: 0 0 24px;
	padding: 20px;
	border-radius: var(--e1v-radius-selector);
	background: var(--e1v-rosa-suave);
}

.wc-generic form.cart .option-group {
	margin: 0 0 14px;
}

.wc-generic form.cart .option-group label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 800;
	color: var(--e1v-tinta);
}

/* El input hereda de main.css (52px, radio 12, foco magenta + halo);
   estados que añade el JS del personalizador */
.wc-generic form.cart .option-group.invalid input {
	border-color: var(--e1v-error);
}

.wc-generic form.cart .option-group.valid input {
	border-color: var(--e1v-exito);
}

.wc-generic form.cart .price-info {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--e1v-secundario);
}

.wc-generic form.cart .price-info #current-price {
	font-size: 18px;
	font-weight: 800;
	color: var(--e1v-tinta);
}

.wc-generic form.cart .buttons-container {
	margin: 0;
}

.wc-generic form.cart .buttons-container .single_add_to_cart_button {
	width: 100%;
	margin: 0;
}

/* Snackbar (toast) que usa el JS del personalizador */
.wc-generic .snackbar {
	position: fixed;
	left: 50%;
	bottom: 92px; /* por encima del WhatsApp flotante */
	transform: translateX(-50%);
	z-index: 70;
	visibility: hidden;
	opacity: 0;
	min-width: 250px;
	max-width: calc(100vw - 32px);
	padding: 13px 22px;
	border-radius: var(--e1v-radius-pill);
	background: var(--e1v-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	box-shadow: 0 10px 26px rgba(27, 32, 68, .3);
	transition: opacity .2s ease, visibility .2s ease;
}

.wc-generic .snackbar.show {
	visibility: visible;
	opacity: 1;
}

.wc-generic .snackbar.error {
	background: var(--e1v-error);
}

.wc-generic .snackbar.success {
	background: var(--e1v-exito);
}

/* ============================================================
   8) PDP genérica — meta del producto (categorías, SKU…)
   ============================================================ */

.wc-generic div.product .product_meta {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px dashed var(--e1v-borde);
	font-size: 13px;
	color: var(--e1v-secundario);
}

.wc-generic div.product .product_meta > span {
	display: block;
	margin: 0 0 4px;
}

.wc-generic div.product .product_meta a {
	color: var(--e1v-secundario);
	text-decoration: underline;
	transition: color .15s ease;
}

.wc-generic div.product .product_meta a:hover,
.wc-generic div.product .product_meta a:focus-visible {
	color: var(--e1v-magenta);
}

/* ============================================================
   9) PDP genérica — pestañas (Descripción, etc.) como píldoras
   ============================================================ */

.wc-generic div.product .woocommerce-tabs {
	margin: 40px 0 0;
}

.wc-generic div.product .woocommerce-tabs ul.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
	list-style: none;
}

/* Fuera las esquinitas y bordes dibujados por WC */
.wc-generic div.product .woocommerce-tabs ul.wc-tabs::before,
.wc-generic div.product .woocommerce-tabs ul.wc-tabs::after,
.wc-generic div.product .woocommerce-tabs ul.wc-tabs li::before,
.wc-generic div.product .woocommerce-tabs ul.wc-tabs li::after {
	content: none;
	border: 0;
	box-shadow: none;
}

.wc-generic div.product .woocommerce-tabs ul.wc-tabs li {
	margin: 0;
	padding: 0;
	border: 2px solid var(--e1v-borde);
	border-radius: var(--e1v-radius-pill);
	background: #fff;
	transition: border-color .15s ease, background .15s ease;
}

.wc-generic div.product .woocommerce-tabs ul.wc-tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 9px 22px;
	color: var(--e1v-secundario);
	font-size: 14.5px;
	font-weight: 800;
	text-decoration: none;
}

.wc-generic div.product .woocommerce-tabs ul.wc-tabs li:hover {
	border-color: var(--e1v-navy);
}

.wc-generic div.product .woocommerce-tabs ul.wc-tabs li.active {
	border-color: var(--e1v-navy);
	background: var(--e1v-navy);
}

.wc-generic div.product .woocommerce-tabs ul.wc-tabs li.active a {
	color: #fff;
}

/* Panel como tarjeta blanca */
.wc-generic div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	margin: 0;
	padding: 24px 26px;
	border: 1px solid var(--e1v-borde);
	border-radius: var(--e1v-radius-card);
	background: #fff;
	box-shadow: var(--e1v-shadow-card);
	font-size: 15.5px;
	line-height: 1.65;
	color: #4B4E6D;
}

.wc-generic div.product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
	margin: 0 0 12px;
	font-size: 22px;
	color: var(--e1v-tinta);
}

/* ============================================================
   10) Tarjetas de producto en grid
   (related y cross-sells comparten estilo; el carrito reutiliza
   estas reglas para .cross-sells, por eso el doble scope)
   ============================================================ */

.wc-generic div.product section.related {
	margin: 56px 0 0;
}

.wc-generic .related.products > h2,
body.woocommerce-cart .cross-sells > h2 {
	margin: 0 0 20px;
	font-size: clamp(24px, 3vw, 30px);
}

/* El clearfix ::before/::after del CSS core de WooCommerce se convierte
   en un ITEM FANTASMA dentro de display:grid (ocupa la primera celda y
   corre todas las tarjetas una posición): fuera. */
.wc-generic ul.products::before,
.wc-generic ul.products::after,
body.woocommerce-cart ul.products::before,
body.woocommerce-cart ul.products::after {
	display: none;
}

.wc-generic ul.products,
body.woocommerce-cart ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-generic ul.products li.product,
.wc-generic ul.products[class*="columns-"] li.product,
body.woocommerce-cart ul.products li.product,
body.woocommerce-cart ul.products[class*="columns-"] li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border-radius: var(--e1v-radius-card);
	background: #fff;
	box-shadow: var(--e1v-shadow-card);
	overflow: hidden;
	transition: box-shadow .15s ease, transform .15s ease;
}

.wc-generic ul.products li.product:hover,
body.woocommerce-cart ul.products li.product:hover {
	box-shadow: var(--e1v-shadow-card-hover);
	transform: translateY(-3px);
}

.wc-generic ul.products li.product .woocommerce-LoopProduct-link,
body.woocommerce-cart ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

/* Imagen 1:1 */
.wc-generic ul.products li.product a img,
body.woocommerce-cart ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	background: var(--e1v-crema);
}

.wc-generic ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-cart ul.products li.product .woocommerce-loop-product__title {
	margin: 14px 18px 4px;
	padding: 0;
	font-size: 18px;
	line-height: 1.25;
	color: var(--e1v-tinta);
	transition: color .15s ease;
}

.wc-generic ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--e1v-magenta);
}

.wc-generic ul.products li.product .price,
body.woocommerce-cart ul.products li.product .price {
	display: block;
	margin: auto 18px 6px; /* empuja el precio al fondo del enlace */
	padding-top: 6px;
	color: var(--e1v-tinta);
	font-size: 16px;
	font-weight: 800;
}

/* Botón «Añadir al carrito» del loop */
.wc-generic ul.products li.product .button,
body.woocommerce-cart ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin: 8px 18px 18px;
	padding: 9px 20px;
	min-height: 48px;
	border: 0;
	border-radius: var(--e1v-radius-pill);
	background: var(--e1v-magenta);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}

.wc-generic ul.products li.product .button:hover,
.wc-generic ul.products li.product .button:focus-visible,
body.woocommerce-cart ul.products li.product .button:hover,
body.woocommerce-cart ul.products li.product .button:focus-visible {
	background: var(--e1v-magenta-hover);
	color: #fff;
}

/* Enlace «Ver carrito» que añade el AJAX (estilo base en main.css) */
.wc-generic ul.products li.product .added_to_cart,
body.woocommerce-cart ul.products li.product .added_to_cart {
	margin: -8px 18px 16px;
}

@media (min-width: 768px) {
	.wc-generic ul.products,
	body.woocommerce-cart ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.wc-generic ul.products,
	body.woocommerce-cart ul.products {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Los cross-sells viven en la columna de la tabla: máx. 2 por fila */
	body.woocommerce-cart .cross-sells ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   11) Badge de oferta (.onsale) como píldora navy
   ============================================================ */

.wc-generic span.onsale,
body.woocommerce-cart span.onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 5px 14px;
	border-radius: var(--e1v-radius-pill);
	background: var(--e1v-navy);
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .5px;
	line-height: 1.4;
	text-transform: uppercase;
}

/* En las tarjetas del grid, un pelín más cerrado */
.wc-generic ul.products li.product span.onsale,
body.woocommerce-cart ul.products li.product span.onsale {
	top: 12px;
	left: 12px;
}

/* ============================================================
   12) Carrito — layout general
   Estructura real: .entry__content > .woocommerce > [notices +
   form.woocommerce-cart-form + .cart-collaterals (.cart_totals)]
   ============================================================ */

body.woocommerce-cart .entry__title {
	font-size: clamp(30px, 4.5vw, 40px);
	margin: 0 0 20px;
}

/* Reset de los floats del layout nativo de WC */
body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-cart .cart-collaterals .cross-sells {
	float: none;
	width: 100%;
}

/* El clearfix de WC core (content:" "; display:table) sobrevive al
   display:contents de .cart-collaterals y se cuela como ítem fantasma
   del grid: ::before roba la celda (1,2) y empuja .cart_totals a la
   fila 2 (vacío blanco gigante). Mismo bug que el ghost de ul.products. */
body.woocommerce-cart .entry__content .cart-collaterals::before,
body.woocommerce-cart .entry__content .cart-collaterals::after {
	display: none;
}

body.woocommerce-cart .cart-collaterals .cross-sells {
	margin-top: var(--e1v-space-4);
}

@media (min-width: 900px) {
	body.woocommerce-cart .entry__content > .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: var(--e1v-space-4);
		align-items: start;
	}

	body.woocommerce-cart .entry__content > .woocommerce > .woocommerce-notices-wrapper,
	body.woocommerce-cart .wc-empty-cart-message,
	body.woocommerce-cart .return-to-shop {
		grid-column: 1 / -1;
	}

	/* Los hijos de .cart-collaterals pasan a ser ítems del grid:
	   totales a la derecha (sticky), cross-sells bajo la tabla */
	body.woocommerce-cart .cart-collaterals {
		display: contents;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		grid-column: 2;
		position: sticky;
		top: calc(var(--e1v-header-h) + 20px);
	}

	body.woocommerce-cart .cart-collaterals .cross-sells {
		grid-column: 1;
		margin-top: 0;
	}
}

/* ============================================================
   13) Carrito — tabla de productos como tarjeta blanca
   ============================================================ */

body.woocommerce-cart form.woocommerce-cart-form table.shop_table {
	margin: 0 0 24px;
	padding: 8px 20px 14px;
	border: 0;
	border-radius: var(--e1v-radius-card);
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	box-shadow: var(--e1v-shadow-card);
}

body.woocommerce-cart table.shop_table th {
	padding: 14px 12px;
	border: 0;
	border-bottom: 1px solid var(--e1v-borde);
	color: var(--e1v-secundario);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .6px;
	text-align: left;
	text-transform: uppercase;
}

body.woocommerce-cart table.shop_table td {
	padding: 16px 12px;
	border: 0;
	border-bottom: 1px dashed var(--e1v-borde); /* filas punteadas */
	background: none;
	font-size: 15px;
	vertical-align: middle;
}

/* Miniatura 80px con radio 12.
   min-width es OBLIGATORIO: con table-layout auto, una meta larga sin
   espacios (dedicatorias, historias) expande la columna del nombre y
   aplasta esta celda — width solo es una sugerencia para la tabla. */
body.woocommerce-cart table.shop_table td.product-thumbnail {
	width: 96px;
	min-width: 96px;
}

body.woocommerce-cart table.shop_table td.product-thumbnail img {
	display: block;
	width: 80px;
	min-width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--e1v-radius-input);
}

/* Metas del ítem (nombres, historia, dedicatoria): las cadenas largas
   sin espacios quiebran línea en vez de deformar la tabla. */
body.woocommerce-cart table.shop_table dl.variation dd,
body.woocommerce-cart table.shop_table dl.variation dt,
body.woocommerce-cart table.shop_table td.product-name {
	overflow-wrap: anywhere;
}

/* Nombre del producto en tinta negrita */
body.woocommerce-cart table.shop_table td.product-name a {
	color: var(--e1v-tinta);
	font-weight: 800;
	text-decoration: none;
	transition: color .15s ease;
}

body.woocommerce-cart table.shop_table td.product-name a:hover,
body.woocommerce-cart table.shop_table td.product-name a:focus-visible {
	color: var(--e1v-magenta);
}

/* Etiquetas de personalización (dl.variation) discretas */
body.woocommerce-cart table.shop_table td.product-name dl.variation {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2px 6px;
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--e1v-secundario);
}

body.woocommerce-cart table.shop_table td.product-name dl.variation dt {
	float: none;
	clear: none;
	margin: 0;
	font-weight: 700;
}

body.woocommerce-cart table.shop_table td.product-name dl.variation dd {
	margin: 0;
}

body.woocommerce-cart table.shop_table td.product-name dl.variation dd p {
	margin: 0;
}

/* Quitar: círculo en rojo suave (36px, tap target razonable en tabla) */
body.woocommerce-cart table.shop_table a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #FFF5F6;
	color: var(--e1v-error) !important; /* WC trae color rojo !important */
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

body.woocommerce-cart table.shop_table a.remove:hover,
body.woocommerce-cart table.shop_table a.remove:focus-visible {
	background: var(--e1v-error);
	color: #fff !important;
}

/* Cantidad compacta (44px): excepción documentada al spec de 52px por densidad de la tabla */
body.woocommerce-cart table.shop_table .quantity .qty {
	width: 72px;
	height: 44px;
	padding: 0 6px;
	text-align: center;
	font-weight: 700;
}

/* Precio y subtotal */
body.woocommerce-cart table.shop_table td.product-price {
	color: var(--e1v-secundario);
}

body.woocommerce-cart table.shop_table td.product-subtotal {
	font-weight: 800;
	color: var(--e1v-tinta);
}

/* ============================================================
   14) Carrito — fila de acciones: cupón + actualizar
   ============================================================ */

body.woocommerce-cart table.cart td.actions {
	padding: 18px 12px 6px;
	border-bottom: 0;
}

body.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
}

body.woocommerce-cart table.cart td.actions .coupon .input-text {
	float: none;
	flex: 1 1 170px;
	max-width: 240px;
	height: 52px;
	margin: 0;
	padding: 0 14px;
	border: 2px solid var(--e1v-borde);
	border-radius: var(--e1v-radius-input);
	font-size: 14px;
}

body.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
	border-color: var(--e1v-magenta);
	box-shadow: var(--e1v-focus-ring);
}

/* Botones secundarios del carrito: píldora outline navy
   (aplicar cupón, vaciar carrito, actualizar carrito) */
body.woocommerce-cart table.cart td.actions .coupon .button,
body.woocommerce-cart table.cart td.actions > .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: auto;
	min-height: 48px;
	margin: 0;
	padding: 10px 22px;
	border: 2px solid var(--e1v-navy);
	border-radius: var(--e1v-radius-pill);
	background: #fff;
	color: var(--e1v-navy);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}

body.woocommerce-cart table.cart td.actions .coupon .button:hover,
body.woocommerce-cart table.cart td.actions > .button:hover {
	background: #F0F2FA;
	color: var(--e1v-navy);
}

body.woocommerce-cart table.cart td.actions > .button:disabled,
body.woocommerce-cart table.cart td.actions > .button.disabled {
	background: #fff;
	color: var(--e1v-navy);
	opacity: .4;
	cursor: not-allowed;
}

/* ============================================================
   15) Carrito — totales como tarjeta (sticky en desktop, §12)
   ============================================================ */

body.woocommerce-cart .cart_totals {
	padding: 24px;
	border-radius: var(--e1v-radius-card);
	background: #fff;
	box-shadow: var(--e1v-shadow-card);
}

body.woocommerce-cart .cart_totals h2 {
	margin: 0 0 10px;
	font-size: 22px;
}

body.woocommerce-cart .cart_totals table.shop_table {
	margin: 0 0 18px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

body.woocommerce-cart .cart-collaterals .cart_totals tr th,
body.woocommerce-cart .cart-collaterals .cart_totals tr td {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px dashed var(--e1v-borde);
	background: none;
	font-size: 14.5px;
	vertical-align: top;
}

body.woocommerce-cart .cart_totals tr th {
	width: 40%;
	color: var(--e1v-secundario);
	font-weight: 700;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

body.woocommerce-cart .cart_totals tr td {
	text-align: right;
	color: var(--e1v-tinta);
}

body.woocommerce-cart .cart_totals tr.shipping td.message em {
	font-style: normal;
	font-size: 13px;
	color: var(--e1v-secundario);
}

body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total th,
body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td {
	padding-top: 16px;
	border-bottom: 0;
	color: var(--e1v-tinta);
	font-size: 16px;
}

body.woocommerce-cart .cart_totals tr.order-total td strong {
	font-size: 20px;
	font-weight: 800;
}

/* Finalizar compra: píldora magenta grande a todo el ancho */
body.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 14px 24px;
	border: 0;
	border-radius: var(--e1v-radius-pill);
	background: var(--e1v-magenta);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--e1v-shadow-cta);
	transition: background .15s ease, transform .15s ease;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background: var(--e1v-magenta-hover);
	color: #fff;
}

/* ============================================================
   16) Carrito vacío
   ============================================================ */

body.woocommerce-cart .cart-empty.woocommerce-info {
	padding: 32px 24px;
	text-align: center;
	font-size: 17px;
}

body.woocommerce-cart .return-to-shop {
	margin: 8px 0 40px;
	text-align: center;
}

body.woocommerce-cart .return-to-shop a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--e1v-radius-pill);
	background: var(--e1v-magenta);
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: var(--e1v-shadow-cta);
	transition: background .15s ease;
}

body.woocommerce-cart .return-to-shop a.button:hover,
body.woocommerce-cart .return-to-shop a.button:focus-visible {
	background: var(--e1v-magenta-hover);
	color: #fff;
}

/* ============================================================
   17) Carrito — modo apilado en móvil
   (woocommerce-smallscreen.css ya colapsa la tabla ≤768px con
   td::before attr(data-title); aquí solo se re-estiliza)
   ============================================================ */

@media (max-width: 768px) {
	body.woocommerce-cart form.woocommerce-cart-form table.shop_table {
		padding: 6px 16px 12px;
	}

	body.woocommerce-cart table.shop_table_responsive tr {
		display: block;
		padding: 12px 0;
		border-bottom: 1px dashed var(--e1v-borde);
	}

	body.woocommerce-cart table.shop_table_responsive tr:last-child {
		border-bottom: 0;
	}

	/* El borde punteado pasa a la fila; fuera el zebra por defecto */
	body.woocommerce-cart table.shop_table_responsive tr td {
		padding: 7px 0;
		border-bottom: 0;
	}

	body.woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td {
		background: transparent;
	}

	/* Etiqueta apilada (data-title) en negrita tinta */
	body.woocommerce-cart table.shop_table_responsive tr td::before {
		content: attr(data-title);
		float: left;
		margin-right: 12px;
		color: var(--e1v-tinta);
		font-size: 13px;
		font-weight: 800;
	}

	/* La X de eliminar queda alineada a la derecha en su bloque */
	body.woocommerce-cart table.shop_table td.product-remove a.remove {
		margin-left: auto;
	}

	body.woocommerce-cart table.shop_table_responsive .quantity .qty {
		width: 88px;
	}

	/* Cupón y botones a todo el ancho en apilado */
	body.woocommerce-cart table.cart td.actions .coupon .input-text,
	body.woocommerce-cart table.cart td.actions .coupon .button,
	body.woocommerce-cart table.cart td.actions > .button {
		width: 100%;
		max-width: none;
		flex: 1 1 100%;
	}

	body.woocommerce-cart table.cart td.actions > .button {
		margin-top: 4px;
	}
}

/* ============================================================
   18) Breakpoints del contenedor de la PDP genérica
   ============================================================ */

@media (min-width: 768px) {
	.wc-generic {
		padding: 32px 24px 24px;
	}
}

@media (min-width: 1024px) {
	.wc-generic {
		padding: 32px 32px 32px;
	}
}

/*
 * Si el producto tiene formulario de personalización propio (snippet 3009:
 * form.cart.product-NNN-form), el form nativo de añadir al carrito se oculta
 * para que haya UN solo camino de compra (antes convivían los dos botones y
 * se podía añadir la agenda sin nombre).
 */
.wc-generic div.product:has(form.cart[class*="-form"]) .summary > form.cart:not([class*="-form"]) {
	display: none;
}