/**
 * El Sultán Beauty — componentes de interfaz.
 * Réplica de components/core/core.css y commerce/commerce.css del sistema de diseño.
 * Se carga después de tokens.css, así que puede sobrescribir variables.
 */

/* ==========================================================================
   1. Degradado dorado — SIN rosa
   El token original arranca en #cea1a3 (dorado rosa). Por decisión de marca los
   degradados son ORO puro: el rosa se reserva para botones y acentos planos.
   Al redefinir la variable, todo lo que ya la usa hereda el cambio.
   ========================================================================== */
:root {
	--gradient-dorado: linear-gradient(115deg, #c2a878 0%, #d4bd8f 45%, #dbc889 100%);
	--gradient-dorado-inverso: linear-gradient(115deg, #dbc889 0%, #d4bd8f 55%, #c2a878 100%);
	--gradient-dorado-suave: linear-gradient(115deg, #f6efdd 0%, #fbf7f0 100%);
}

/* ==========================================================================
   2. Iconos del prototipo
   Elementor inyecta el SVG en línea; Lucide usa `stroke: currentColor`.
   ========================================================================== */
/* Se apunta al propio SVG (`class="lucide …"`) y no al contenedor: cada widget
   envuelve el icono en una clase distinta (.elementor-icon, .elementor-icon-list-icon,
   .elementor-button-icon…) y Elementor les mete `fill` en todas. Sin esto los
   iconos salen RELLENOS en vez de con el trazo fino de Lucide. */
svg.lucide,
.elementor svg.lucide {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
}

/* Lucide se dibuja sobre una caja de 24; sin esto Elementor lo recorta a 1em. */
.elementor-icon-list-icon svg.lucide,
.elementor-icon svg.lucide {
	width: 1em;
	height: 1em;
}

/* ==========================================================================
   3. Botones — core.css:.es-btn
   ========================================================================== */
.esb-btn .elementor-button,
.esb-btn > a,
a.esb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-ui);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	border: var(--hairline) solid transparent;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	text-decoration: none;
	transition: all .24s cubic-bezier(.22, .61, .36, 1), filter .16s ease;
}

/* Tamaños */
.esb-btn--sm .elementor-button { font-size: var(--text-2xs); padding: 9px 18px; }
.esb-btn--md .elementor-button { font-size: var(--text-xs); padding: 13px 26px; }
.esb-btn--lg .elementor-button { font-size: var(--text-sm); padding: 17px 34px; }

/* Oro: el CTA insignia */
.esb-btn--gold .elementor-button {
	background: var(--gradient-dorado);
	color: var(--tinta-900);
	box-shadow: var(--shadow-sm), var(--shadow-inset-veil);
}
.esb-btn--gold .elementor-button:hover {
	filter: brightness(1.05);
	transform: translateY(-2px);
	box-shadow: var(--shadow-glow-dorado), var(--shadow-inset-veil);
	color: var(--tinta-900);
}

/* Orquídea: el rosa de marca, plano */
.esb-btn--orquidea .elementor-button {
	background: var(--orquidea-400);
	color: var(--tinta-900);
	box-shadow: var(--shadow-sm);
}
.esb-btn--orquidea .elementor-button:hover {
	background: var(--orquidea-300);
	transform: translateY(-2px);
	box-shadow: var(--shadow-glow-orquidea);
	color: var(--tinta-900);
}

/* Tinta */
.esb-btn--ink .elementor-button {
	background: var(--tinta-900);
	color: var(--tinta-0);
}
.esb-btn--ink .elementor-button:hover {
	background: var(--tinta-800);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	color: var(--tinta-0);
}

/* Contorno dorado */
.esb-btn--outline .elementor-button {
	background: transparent;
	border-color: var(--border-gold);
	color: var(--text-gold);
}
.esb-btn--outline .elementor-button:hover {
	background: var(--dorado-50);
	border-color: var(--dorado-500);
	color: var(--dorado-800);
}

/* Fantasma: para "Ver todo" */
.esb-btn--ghost .elementor-button {
	background: transparent;
	color: var(--text-strong);
	padding-left: 0;
	padding-right: 0;
}
.esb-btn--ghost .elementor-button:hover {
	color: var(--orquidea-700);
	background: transparent;
}

/* WhatsApp — commerce.css:.es-wa */
.esb-btn--wa .elementor-button {
	background: transparent;
	color: var(--whatsapp-oscuro);
	border-color: var(--whatsapp);
	font-weight: var(--weight-bold);
}
.esb-btn--wa .elementor-button:hover {
	background: rgba(37, 211, 102, .09);
	color: var(--whatsapp-oscuro);
	transform: translateY(-2px);
}

/* ==========================================================================
   4. Tarjeta de producto — commerce.css:.es-prodcard
   Todas las tarjetas de una fila miden lo mismo.
   ========================================================================== */
.esb-loop .elementor-grid > div,
.esb-loop .e-loop-item {
	display: flex;
	height: 100%;
}

.esb-loop .e-loop-item > .e-con {
	width: 100%;
	height: 100%;
}

/* El cuerpo empuja el pie hacia abajo, así los precios quedan alineados. */
.esb-card-body { flex: 1 1 auto; }
.esb-card-foot { margin-top: auto; }

/* El nombre ocupa siempre dos líneas para que el pie no baile. */
.esb-card-title .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.4em;
}

/* Botón "+" circular dorado — ProductCard.jsx:39 (IconButton variant="gold").
   Hace falta subir especificidad y usar !important en tamaño y tipografía:
   WooCommerce estiliza `.woocommerce button.button` (0,2,1) y gana a `.esb-card-add .button`,
   dejando el texto visible y el botón deformado. */
.esb-card-add .cart .button,
.esb-card-add a.button,
.esb-card-add button.button,
.woocommerce .esb-card-add .button {
	width: 42px !important;
	height: 42px !important;
	min-width: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--gradient-dorado) !important;
	color: var(--tinta-900) !important;
	overflow: hidden;
}

.esb-card-add .button {
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gradient-dorado);
	color: var(--tinta-900);
	font-size: 0;
	line-height: 0;
	box-shadow: var(--shadow-sm), var(--shadow-inset-veil);
	transition: all .24s cubic-bezier(.22, .61, .36, 1);
	display: block;
}

/* El glifo se pinta con máscara, igual que en el prototipo (Icon.jsx),
   y así queda ópticamente centrado — nada de baselines de texto. */
.esb-card-add .cart .button::after,
.esb-card-add a.button::after,
.esb-card-add button.button::after,
.esb-card-add .button::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--esb-icon-plus) center / contain no-repeat;
	mask: var(--esb-icon-plus) center / contain no-repeat;
}

.esb-card-add .button:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-glow-dorado), var(--shadow-inset-veil);
}

/* Agotado: sin botón, se avisa en texto */
.esb-card-add .stock.out-of-stock {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* ==========================================================================
   5. Acciones de la cabecera — Chrome.jsx IconButton variant="plain"
   ========================================================================== */
.esb-hdr-act .elementor-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--text-body);
	transition: all .2s ease;
}
.esb-hdr-act .elementor-icon:hover {
	background: var(--surface-blush);
	color: var(--orquidea-700);
}
.esb-hdr-act svg { width: 21px; height: 21px; }

/* ==========================================================================
   6. Punto contador de la cabecera — .dot (site.css:38)
   Mismo estilo para carrito y favoritos: fondo ROSA de marca, número en tinta.
   ========================================================================== */
.esb-hdr-act,
.esb-hdr-fav { position: relative; }

.esb-dot,
.esb-hdr-cart .elementor-button-icon-qty {
	position: absolute;
	top: -1px;
	right: -1px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--orquidea-400);
	color: var(--tinta-900);
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	display: grid;
	place-items: center;
	text-indent: 0;
}

/* El corazón necesita el ancla como referencia de posición. */
.esb-hdr-fav .elementor-icon-wrapper,
.esb-hdr-fav a { position: relative; display: inline-grid; place-items: center; }

/* ==========================================================================
   7. Tarjeta — precio como PriceTag del prototipo (commerce.css:2-9)
   ========================================================================== */
/* En tarjetas el secundario es corto: "Bs 3.770,00" a secas. */
.esb-prodcard .esb-bs__approx,
.esb-prodcard .esb-bs__tag { display: none; }

/* Precio anterior tachado (.es-price__was): 12px, gris, tras el precio. */
.esb-prodcard .esb-card-foot del {
	font-size: 12px;
	color: var(--text-faint);
	font-weight: 400;
	margin-left: 6px;
}
.esb-prodcard .esb-card-foot del .esb-bs { display: none; }
.esb-prodcard .esb-card-foot ins { text-decoration: none; }

/* ==========================================================================
   8. Badges de la tarjeta — Badge del prototipo (.es-prodcard__flags)
   Se pintan desde las clases que WooCommerce pone en el loop item
   (sale / outofstock): sin widgets, y automáticos para todo el catálogo.
   ========================================================================== */
.esb-prodcard { position: relative; }

.e-loop-item.sale .esb-prodcard::after,
.e-loop-item.outofstock .esb-prodcard::after {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 10px;
	border-radius: 999px;
	font: 700 10px/1 var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Oferta: rosa de marca (badgeTone del prototipo para descuentos). */
.e-loop-item.sale .esb-prodcard::after {
	content: "Oferta";
	background: var(--orquidea-200);
	color: var(--orquidea-900);
}

/* Agotado: neutro, y la foto en gris (commerce.css:26). */
.e-loop-item.outofstock .esb-prodcard::after {
	content: "Agotado";
	background: var(--tinta-100);
	color: var(--tinta-600);
}
.e-loop-item.outofstock .esb-card-media { filter: grayscale(1); opacity: .55; }

/* ==========================================================================
   9. Chrome móvil — App.jsx:87 y Chrome.jsx:95-112
   ========================================================================== */
/* En móvil el HEADER va primero y la barra de anuncios debajo. */
@media (max-width: 900px) {
	[data-elementor-type="header"] { display: flex; flex-direction: column; }
	[data-elementor-type="header"] .esb-announce { order: 2; }
	[data-elementor-type="header"] .esb-hdr { order: 1; }
}

/* Nav inferior: estado activo en orquídea según la página (mnav button[data-on]). */
.home .esb-mnav--home .elementor-icon,
.home .esb-mnav--home .elementor-icon-box-title,
.post-type-archive-product .esb-mnav--shop .elementor-icon,
.post-type-archive-product .esb-mnav--shop .elementor-icon-box-title,
.tax-product_cat .esb-mnav--shop .elementor-icon,
.tax-product_cat .esb-mnav--shop .elementor-icon-box-title,
.page-id-630 .esb-mnav--fav .elementor-icon,
.page-id-630 .esb-mnav--fav .elementor-icon-box-title,
.woocommerce-cart .esb-mnav--cart .elementor-icon,
.woocommerce-cart .esb-mnav--cart .elementor-icon-box-title,
.woocommerce-account .esb-mnav--account .elementor-icon,
.woocommerce-account .esb-mnav--account .elementor-icon-box-title {
	color: var(--orquidea-700) !important;
}

/* Contadores de la nav inferior: el mismo punto rosa del header. */
.esb-mnav__item .elementor-icon-box-icon { position: relative; }
.esb-mnav__item .esb-dot {
	top: -6px;
	right: -10px;
	left: auto;
}

/* ==========================================================================
   10. Ficha — badges junto a la marca y corazón de guardar (ProductScreen.jsx)
   ========================================================================== */
.esb-pdp-flags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esb-pdp-flags .esb-flags { display: inline-flex; gap: 8px; }

.esb-badge {
	padding: 5px 10px;
	border-radius: 999px;
	font: 700 10px/1 var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.esb-badge--rosa    { background: var(--orquidea-200); color: var(--orquidea-900); }
.esb-badge--alerta  { background: var(--alerta-fondo);  color: var(--alerta-fuerte); }
.esb-badge--neutral { background: var(--tinta-100);     color: var(--tinta-600); }

/* Botón de YITH como corazón outline junto al CTA (IconButton variant=outline). */
.esb-pdp__info .yith-wcwl-add-to-wishlist { margin: 0; }
.esb-pdp__info .yith-wcwl-add-button a,
.esb-pdp__info .yith-wcwl-wishlistaddedbrowse a,
.esb-pdp__info .yith-wcwl-wishlistexistsbrowse a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--border-gold);
	border-radius: 50%;
	background: transparent;
	color: var(--dorado-700);
	font-size: 0;
	overflow: hidden;
	transition: all .2s ease;
}
.esb-pdp__info .yith-wcwl-add-to-wishlist a::after {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--esb-icon-heart) center / contain no-repeat;
	mask: var(--esb-icon-heart) center / contain no-repeat;
}
.esb-pdp__info .yith-wcwl-add-to-wishlist a:hover {
	background: var(--dorado-50);
	border-color: var(--dorado-500);
}
.esb-pdp__info .yith-wcwl-add-to-wishlist i,
.esb-pdp__info .yith-wcwl-add-to-wishlist img.yith-wcwl-icon { display: none !important; }

/* ==========================================================================
   11. Avisos de WooCommerce con la voz de la marca (Toast/empty del prototipo)
   ========================================================================== */
.woocommerce-info,
.woocommerce-message,
.wc-block-components-notice-banner,
.cart-empty.woocommerce-info {
	border: 1px solid var(--border-subtle) !important;
	border-top-color: var(--dorado-400) !important;
	background: var(--surface-card) !important;
	color: var(--text-body) !important;
	border-radius: var(--radius-md);
	font-family: var(--font-ui);
	font-size: 14px;
	padding: 16px 20px !important;
}
.woocommerce-info::before,
.woocommerce-message::before { color: var(--dorado-600); }

.woocommerce .button.wc-backward,
.woocommerce-info .button,
.return-to-shop .button {
	background: var(--gradient-dorado) !important;
	color: var(--tinta-900) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font: 700 12px var(--font-ui) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 13px 26px !important;
}

/* ==========================================================================
   12. TIPOGRAFÍA GLOBAL DE WOOCOMMERCE — nada del tema base se cuela
   ========================================================================== */
.woocommerce,
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce .cart_totals,
.woocommerce form,
.woocommerce input,
.woocommerce select,
.woocommerce textarea,
.woocommerce label,
.woocommerce .button,
.elementor-menu-cart__container,
.widget_shopping_cart_content {
	font-family: var(--font-ui) !important;
}

.woocommerce h2,
.woocommerce h3,
.cart_totals h2,
.e-cart-section .e-cart-section__title,
.elementor-menu-cart__main .woocommerce-mini-cart__title {
	font-family: var(--font-display) !important;
	font-weight: 400;
	color: var(--text-strong);
	letter-spacing: -.01em;
}

/* Tablas del carrito: sin bordes de tabla clásica, líneas sutiles */
.woocommerce table.shop_table {
	border: 0 !important;
	border-radius: 0;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--border-subtle) !important;
	font-size: 14px;
	color: var(--text-body);
}
.woocommerce table.shop_table .product-name a {
	font-family: var(--font-display) !important;
	font-size: 17px;
	color: var(--text-strong);
	text-decoration: none;
	line-height: 1.15;
}

/* Botones secundarios de Woo (aplicar cupón, actualizar…): píldora contorno.
   OJO: solo selectores POSITIVOS. La versión anterior era
   `.woocommerce .button:not(...):not(...)` y cada :not(clase) suma
   especificidad: (0,5,0) con !important ganaba a TODO — dejó el "+" de las
   tarjetas transparente, con texto y forma de píldora. */
.woocommerce-cart-form .coupon .button,
.woocommerce-cart-form button[name="update_cart"],
.checkout_coupon .button,
.woocommerce-MyAccount-content .button:where(:not(.wc-backward)),
.woocommerce-form-track-order .button,
.wishlist_table .button:where(:not(.add_to_cart)) {
	background: transparent !important;
	color: var(--text-strong) !important;
	border: 1px solid var(--border-default) !important;
	border-radius: 999px !important;
	font: 600 11px var(--font-ui) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 12px 22px !important;
	transition: all .2s ease;
}
.woocommerce-cart-form .coupon .button:hover,
.woocommerce-cart-form button[name="update_cart"]:hover,
.checkout_coupon .button:hover,
.woocommerce-MyAccount-content .button:where(:not(.wc-backward)):hover {
	border-color: var(--tinta-900) !important;
	background: var(--tinta-900) !important;
	color: var(--tinta-0) !important;
}

/* Inputs de Woo: los del sistema (core.css .es-input) */
.woocommerce input.input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea {
	border: 1px solid var(--border-default) !important;
	border-radius: var(--radius-field) !important;
	padding: 13px 14px !important;
	font-size: 14px !important;
	color: var(--text-strong);
	background: var(--surface-card);
}
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
	border-color: var(--orquidea-300) !important;
}
.woocommerce form .form-row label {
	font: 600 11px var(--font-ui) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 6px;
}

/* ==========================================================================
   13. DRAWER DEL CARRITO (side-cart) — .drawer del prototipo (site.css:163-168)
   ========================================================================== */
.elementor-menu-cart__container {
	z-index: 9999 !important;
	background: var(--surface-overlay) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.elementor-menu-cart__main {
	width: 420px !important;
	max-width: 92vw !important;
	height: 100vh;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: var(--shadow-xl) !important;
	background: var(--surface-card) !important;
	display: flex;
	flex-direction: column;
}
@media (max-width: 900px) {
	.elementor-menu-cart__main { width: 100vw !important; max-width: 100vw !important; }
}
/* Filete dorado superior del Drawer */
.elementor-menu-cart__main::before {
	content: "";
	display: block;
	flex: 0 0 1.5px;
	background: var(--gradient-dorado);
}
/* X de cierre fina (Lucide), 40px, hover blush.
   Va ABSOLUTA arriba a la derecha, en la misma fila que "Tu carrito"
   (el head se inyecta antes que ella y la empujaba bajo la barra de envío). */
/* NO poner position:relative en __main: pisa el position:fixed de Elementor
   y el drawer abre por la IZQUIERDA. El fixed ya ancla la ✕ absoluta. */
.elementor-menu-cart__close-button {
	position: absolute;
	top: 18px;
	right: 16px;
	z-index: 3;
	align-self: flex-end;
	margin: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid !important;
	place-items: center;
	cursor: pointer;
	font-size: 0 !important;
	transition: background .2s ease;
}
.elementor-menu-cart__close-button::before,
.elementor-menu-cart__close-button::after { content: none !important; }
.elementor-menu-cart__close-button {
	background-image: none !important;
}
.elementor-menu-cart__close-button i,
.elementor-menu-cart__close-button svg { display: none !important; }
.elementor-menu-cart__close-button::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	transform: none !important; /* Elementor la gira 45° para su aspa de barras */
	background-color: var(--text-body);
	-webkit-mask: var(--esb-icon-x) center / contain no-repeat;
	mask: var(--esb-icon-x) center / contain no-repeat;
}
.elementor-menu-cart__close-button:hover { background: var(--surface-blush); }

/* Cuerpo del drawer */
.elementor-menu-cart__main .widget_shopping_cart_content {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 6px 24px 20px !important;
}
/* Título "Tu carrito" simulado con el heading del widget si existe */
.elementor-menu-cart__products { border: 0 !important; }
.elementor-menu-cart__product {
	display: grid !important;
	grid-template-columns: 72px 1fr auto;
	gap: 14px;
	padding: 16px 0 !important;
	border-top: 1px solid var(--border-subtle) !important;
	border-bottom: 0 !important;
	align-items: start;
}
.elementor-menu-cart__product:first-child { border-top: 0 !important; }
.elementor-menu-cart__product-image { width: 72px !important; }
.elementor-menu-cart__product-image img {
	width: 72px !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
	background: var(--tinta-50);
}
.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a {
	font-family: var(--font-display) !important;
	font-size: 17px !important;
	line-height: 1.15;
	color: var(--text-strong) !important;
	text-decoration: none;
	border: 0 !important;
}
.elementor-menu-cart__product-price {
	font: 600 13px var(--font-ui) !important;
	color: var(--text-strong);
}
.elementor-menu-cart__product-price .esb-bs { font-size: 11px; }
/* (El "eliminar" de cada línea se estiliza en §19 como "✕ QUITAR".) */

/* Pie del drawer: subtotal + botones (drawer__f) */
.elementor-menu-cart__footer-buttons {
	flex: 0 0 auto;
	padding: 20px 24px calc(20px + env(safe-area-inset-bottom)) !important;
	border-top: 1px solid var(--border-subtle);
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	grid-template-columns: none !important;
}
.elementor-menu-cart__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font: 400 14px var(--font-ui) !important;
	color: var(--text-body);
	padding: 0 24px 10px;
	border: 0 !important;
}
.elementor-menu-cart__subtotal strong { font-weight: 600; color: var(--text-strong); }
/* Orden del prototipo: "Ir al pago" (oro) primero, "Ver el carrito completo" debajo. */
.elementor-menu-cart__footer-buttons .elementor-button--checkout { order: 1; }
.elementor-menu-cart__footer-buttons .elementor-button--view-cart { order: 2; }
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
	background: var(--gradient-dorado) !important;
	color: var(--tinta-900) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font: 700 13px var(--font-ui) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 17px 28px !important;
	box-shadow: var(--shadow-sm), var(--shadow-inset-veil);
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	background: transparent !important;
	color: var(--text-strong) !important;
	border: 0 !important;
	font: 600 12px var(--font-ui) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 8px !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover { color: var(--orquidea-700) !important; }

/* ==========================================================================
   14. POPUPS DE ELEMENTOR (drawers de menú / favoritos / buscador / login)
   ========================================================================== */
/* Drawers laterales: panel a TODA la altura, sin recortes */
.elementor-popup-modal.esb-drawer .dialog-widget-content {
	height: 100vh !important;
	max-height: 100vh !important;
	border-radius: 0 !important;
	box-shadow: var(--shadow-xl) !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.elementor-popup-modal.esb-drawer .dialog-widget-content::before {
	content: "";
	flex: 0 0 1.5px;
	background: var(--gradient-dorado);
}
.elementor-popup-modal.esb-drawer .dialog-message {
	flex: 1 1 auto;
	padding: 0 !important;
	overflow-y: auto;
	width: auto !important;
}
.elementor-popup-modal.esb-drawer .dialog-message .elementor { min-height: 100%; }

/* X de cierre de TODOS los popups: fina, Lucide */
.elementor-popup-modal .dialog-close-button {
	top: 16px !important;
	right: 16px !important;
	left: auto !important;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid !important;
	place-items: center;
	background: var(--surface-card);
	transition: background .2s ease;
	z-index: 3;
}
.elementor-popup-modal .dialog-close-button:hover { background: var(--surface-blush); }
.elementor-popup-modal .dialog-close-button i { display: none !important; }
.elementor-popup-modal .dialog-close-button svg { display: none !important; }
.elementor-popup-modal .dialog-close-button::after {
	content: "";
	width: 20px;
	height: 20px;
	background-color: var(--text-body);
	-webkit-mask: var(--esb-icon-x) center / contain no-repeat;
	mask: var(--esb-icon-x) center / contain no-repeat;
}

/* Velo de los popups con blur (scrim) */
.elementor-popup-modal {
	background-color: var(--surface-overlay) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Buscador (SearchSheet): lámina superior con sombra y borde dorado abajo */
.elementor-popup-modal.esb-searchsheet-popup .dialog-widget-content {
	border-radius: 0 !important;
	box-shadow: var(--shadow-lg) !important;
	border-bottom: 1.5px solid var(--dorado-300);
}

/* Modal de login (Dialog): tarjeta centrada 400px radio 18 */
.elementor-popup-modal.esb-login-modal .dialog-widget-content {
	width: 400px !important;
	max-width: 92vw !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-xl) !important;
	overflow: hidden;
}
.elementor-popup-modal.esb-login-modal .dialog-widget-content::before {
	content: "";
	display: block;
	height: 1.5px;
	background: var(--gradient-dorado);
}
.elementor-popup-modal.esb-login-modal .dialog-message { padding: 0 !important; }

/* Widget login de Elementor con la piel del sistema */
.esb-login .elementor-login .elementor-field-group > label {
	font: 600 11px var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.esb-login .elementor-login input {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-field);
	padding: 13px 14px;
	font: 400 14px var(--font-ui);
}
.esb-login .elementor-button {
	background: var(--gradient-dorado) !important;
	color: var(--tinta-900) !important;
	border-radius: 999px !important;
	font: 700 12px var(--font-ui) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 15px 28px !important;
	width: 100%;
}
.esb-login .elementor-login__logged-in-message { font: 400 14px var(--font-ui); }

/* ==========================================================================
   15. TOASTS — los avisos de WooCommerce como Toast del prototipo
   ========================================================================== */
@keyframes esb-toast-in {
	from { transform: translateY(10px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
body > .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	position: fixed;
	right: 24px;
	bottom: 92px;
	z-index: 9999;
	max-width: 360px;
	margin: 0 !important;
	padding: 16px 18px 16px 20px !important;
	background: var(--surface-card) !important;
	border: 1px solid var(--border-subtle) !important;
	border-left: 3px solid var(--dorado-400) !important;
	border-radius: var(--radius-md) !important;
	box-shadow: var(--shadow-xl) !important;
	font: 500 13.5px/1.5 var(--font-ui) !important;
	color: var(--text-strong) !important;
	animation: esb-toast-in .32s cubic-bezier(.22,.61,.36,1);
}
.woocommerce-notices-wrapper .woocommerce-error { border-left-color: var(--error) !important; }
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before { display: none !important; }
.woocommerce-notices-wrapper .woocommerce-message .button {
	float: none !important;
	display: inline-block;
	margin-top: 8px;
}
@media (max-width: 900px) {
	body > .woocommerce-message,
	.woocommerce-notices-wrapper .woocommerce-message,
	.woocommerce-notices-wrapper .woocommerce-info,
	.woocommerce-notices-wrapper .woocommerce-error {
		left: 12px; right: 12px; bottom: 160px; max-width: none;
	}
}

/* ==========================================================================
   16. FICHA — variaciones sin caja gris, como .shades del prototipo
   ========================================================================== */
.esb-pdp__cart .variations,
.esb-pdp__cart table.variations,
.esb-pdp__cart .variations td,
.esb-pdp__cart .variations th {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block;
	width: 100%;
}
.esb-pdp__cart .variations tbody,
.esb-pdp__cart .variations tr { display: block; width: 100%; }
.esb-pdp__cart .variations .label,
.esb-pdp__cart .variations th.label label {
	font: 600 11px var(--font-ui) !important;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-gold);
	margin: 0 0 10px;
	display: block;
}
.esb-pdp__cart .esb-swatches__head { margin-bottom: 10px; }
.esb-pdp__cart .reset_variations {
	font: 600 10px var(--font-ui) !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-faint) !important;
}
.esb-pdp__cart .quantity input.qty {
	height: 52px !important;
	width: 92px !important;
	border-radius: 999px !important;
	text-align: center;
	font: 600 14px var(--font-ui) !important;
}
.esb-pdp__cart .woocommerce-variation-price { margin: 4px 0 10px; }
.esb-pdp__cart .woocommerce-variation-price .price { font: 600 17px var(--font-ui); color: var(--text-strong); }

/* El flotante de WhatsApp no va en el checkout (el mockup no lo tiene ahí). */
.woocommerce-checkout .esb-wa-float { display: none !important; }

/* Ancho del drawer a prueba de breakpoints del popup (site.css:163 y 219). */
.elementor-popup-modal.esb-drawer .dialog-widget-content { width: 420px !important; max-width: 92vw !important; }
@media (max-width: 900px) {
	.elementor-popup-modal.esb-drawer .dialog-widget-content { width: 100vw !important; max-width: 100vw !important; }
}

/* X de los popups: sin anillo de focus del navegador ni borde. */
.elementor-popup-modal .dialog-close-button,
.elementor-popup-modal .dialog-close-button:focus,
.elementor-popup-modal .dialog-close-button:focus-visible {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Nav del drawer: SOLO la lista principal; el widget imprime además un
   dropdown móvil propio (fondo oscuro) que aquí sobra. */
.esb-drawer__nav .elementor-menu-toggle { display: none !important; }
.esb-drawer__nav nav.elementor-nav-menu--dropdown { display: none !important; }
.esb-drawer__nav nav.elementor-nav-menu--main { display: block !important; }

/* Toast: X de cierre y animación de salida (el JS la dispara a los 4 s). */
.esb-toast__x {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.esb-toast__x::after {
	content: "";
	width: 14px;
	height: 14px;
	background-color: var(--text-faint);
	-webkit-mask: var(--esb-icon-x) center / contain no-repeat;
	mask: var(--esb-icon-x) center / contain no-repeat;
}
.esb-toast__x:hover { background: var(--surface-blush); }
.esb-toast__x:hover::after { background-color: var(--text-strong); }
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error { padding-right: 44px !important; }
.esb-toast--out { opacity: 0; transform: translateY(10px); transition: all .3s ease; }

/* ==========================================================================
   17. Mini-carrito: cabecera, líneas y notas (CartDrawer)
   ========================================================================== */
.esb-minicart__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 18px 24px 6px;
}
.esb-minicart__title {
	font-family: var(--font-display) !important;
	font-size: 22px !important;
	font-weight: 400;
	color: var(--text-strong);
	margin: 0;
}
.esb-minicart__sub { font: 400 12px var(--font-ui); color: var(--text-muted); }
.esb-minicart__ship { padding: 8px 24px 4px; }
.esb-minicart__note {
	font: 400 11px var(--font-ui);
	color: var(--text-muted);
	text-align: right;
	margin: 4px 24px 0;
}
/* Marca micro + nombre serif en cada línea. */
.esb-line__brand {
	display: block;
	font: 600 10px var(--font-ui);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-gold);
}
.esb-line__name { display: block; }

/* ==========================================================================
   18. Checkout: pasos, cupón sobre rosa y filas con foto (ckline)
   ========================================================================== */
.esb-ck__steps {
	display: flex;
	gap: 10px;
	align-items: center;
	font: 400 12px var(--font-ui);
	color: var(--tinta-600);
	padding: 0 0 26px;
}
.esb-ck__steps b { font-weight: 600; color: var(--text-strong); }
.esb-ck__steps i { width: 22px; height: 1px; background: var(--border-default); }

/* Filas del resumen con foto 64px (site.css:132-133). */
.esb-ckline__img img {
	width: 64px !important;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	background: rgba(255,255,255,.5);
	display: block;
}
.e-checkout__column-end .product-name {
	display: flex !important;
	gap: 14px;
	align-items: center;
}
.e-checkout__column-end .esb-line__brand { color: var(--tinta-800); opacity: .65; }

/* Cupón sobre el rosa: sin tarjeta blanca. */
.e-checkout__column-end .woocommerce-form-coupon-toggle .woocommerce-info {
	position: static !important;
	max-width: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	animation: none !important;
	color: var(--tinta-900) !important;
	padding: 10px 0 !important;
	font-weight: 500 !important;
}
.e-checkout__column-end .woocommerce-form-coupon-toggle a { color: var(--tinta-900); text-decoration: underline; }
.e-checkout__column-end .checkout_coupon {
	border: 1px solid rgba(27,20,26,.25) !important;
	border-radius: 12px;
	background: transparent !important;
	padding: 14px !important;
}
.e-checkout__column-end .checkout_coupon .button {
	background: var(--tinta-900) !important;
	color: var(--tinta-0) !important;
	border-radius: 999px !important;
}

/* ==========================================================================
   19. Drawer del carrito — línea .dline del prototipo (site.css:167-168):
       [foto 72] [marca+nombre / stepper+quitar] [precio]
   El div __product-price pasa a display:contents para poder colocar el precio
   (col. derecha) y la píldora de cantidad (bajo el nombre) en celdas distintas.
   ========================================================================== */
.elementor-menu-cart__product {
	position: relative;
	grid-template-columns: 72px minmax(0, 1fr) auto !important;
	grid-template-rows: auto auto;
	gap: 6px 14px !important;
	align-items: start;
}
.elementor-menu-cart__product-image { grid-area: 1 / 1 / 3 / 2; }
.elementor-menu-cart__product-name  { grid-area: 1 / 2 / 2 / 3; }
.elementor-menu-cart__product-price { display: contents !important; }

.esb-line__price {
	grid-area: 1 / 3 / 2 / 4;
	justify-self: end;
	font: 600 15px var(--font-ui);
	color: var(--text-strong);
	text-align: right;
	white-space: nowrap;
}
.esb-line__price .esb-bs { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
/* En la línea compacta solo "Bs 1.234" (PriceTag secondary), sin "≈" ni coletilla. */
.esb-line__price .esb-bs__approx,
.esb-line__price .esb-bs__tag { display: none; }

/* Píldora de cantidad — .es-stepper (forms.css:44-48), aquí decorativa:
   el cambio real de cantidad se hace en la página del carrito. */
.esb-qtypill {
	grid-area: 2 / 2 / 3 / 3;
	justify-self: start;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 106px;
	height: 36px;
	border: 1px solid var(--border-default);
	border-radius: 999px;
	background: var(--tinta-0);
	font: 600 14px var(--font-ui);
	color: var(--text-strong);
	font-variant-numeric: tabular-nums;
	position: relative;
}
.esb-qtypill::before,
.esb-qtypill::after {
	font-weight: 400;
	font-size: 15px;
	color: var(--text-body);
	position: absolute;
}
.esb-qtypill::before { content: "−"; left: 14px; }
.esb-qtypill::after  { content: "+"; right: 14px; }

/* "✕ QUITAR" junto a la píldora, como el CartLine del prototipo.
   Los enlaces de Elementor van encima, invisibles, para conservar el clic;
   sus barras giradas (::before/::after) se anulan o atraviesan la línea. */
.elementor-menu-cart__product-remove {
	grid-area: 2 / 2 / 3 / 3;
	justify-self: start;
	align-self: center;
	margin: 0 0 0 120px !important;
	position: static !important;
	width: auto !important;
	height: 36px !important; /* misma caja que la píldora: quedan a ras */
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	border: 0 !important;          /* Elementor lo dibuja como circulito con borde */
	border-radius: 0 !important;
	background: none !important;
	transform: none !important;
	overflow: visible !important;
}
.elementor-menu-cart__product-remove::before {
	content: "";
	width: 11px;
	height: 11px;
	transform: none !important;
	background-color: var(--text-muted);
	-webkit-mask: var(--esb-icon-x) center / contain no-repeat;
	mask: var(--esb-icon-x) center / contain no-repeat;
}
.elementor-menu-cart__product-remove::after {
	content: "Quitar" !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	-webkit-mask: none !important;
	mask: none !important;
	background-color: transparent;
	transform: none !important;
	font: 700 10px var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.elementor-menu-cart__product-remove:hover::before { background-color: var(--error); }
.elementor-menu-cart__product-remove:hover::after { color: var(--error); }
.elementor-menu-cart__product-remove a {
	position: absolute !important;
	inset: -6px !important;
	width: auto !important;
	height: auto !important;
	font-size: 0 !important;
	opacity: 0 !important;
	z-index: 2;
}
.elementor-menu-cart__product-remove a::before,
.elementor-menu-cart__product-remove a::after { content: none !important; display: none !important; }
.elementor-menu-cart__product-remove { position: relative !important; }

/* La meta de variación ("Tono: …") en gris pequeño. */
.elementor-menu-cart__product .variation {
	font: 400 12px var(--font-ui);
	color: var(--text-muted);
	margin: 2px 0 0;
	display: block;
}
.elementor-menu-cart__product .variation dt,
.elementor-menu-cart__product .variation dd { display: inline; margin: 0; }

/* ==========================================================================
   20. Checkout — bloques de la izquierda (Entrega / Pago) y detalles del mockup
   ========================================================================== */
.esb-ckblock { padding: 26px 0 0; margin-top: 26px; border-top: 1px solid var(--border-subtle); }
.esb-ckh { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 16px; }
.esb-ckh h3 {
	font-family: var(--font-display) !important;
	font-size: 22px;
	font-weight: 400;
	color: var(--text-strong);
	margin: 0;
	border: 0 !important;
	padding: 0 !important;
}
.esb-ckh__tag {
	font: 700 10px var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-gold);
}

/* Radios de envío como optbox (site.css:125-129). */
.esb-optbox ul#shipping_method,
.esb-optbox ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	overflow: hidden;
}
.esb-optbox ul li {
	margin: 0 !important;
	padding: 15px 16px;
	border-top: 1px solid var(--border-subtle);
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font: 400 14px var(--font-ui);
	color: var(--text-body);
}
.esb-optbox ul li:first-child { border-top: 0; }
.esb-optbox ul li:has(input:checked) { background: var(--surface-blush); }
.esb-optbox input[type="radio"] { accent-color: var(--orquidea-600); margin-top: 3px; }
.esb-optbox label { font: 400 14px var(--font-ui) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-strong) !important; }
.esb-optbox .woocommerce-Price-amount { font-weight: 600; color: var(--text-strong); }

/* El checkbox de novedades (CONTACTO). */
.esb-optin { display: flex !important; gap: 10px; align-items: center; }
.esb-optin .woocommerce-input-wrapper { display: inline-flex; }
.esb-optin input[type="checkbox"] { accent-color: var(--dorado-500); width: 18px; height: 18px; }
.esb-optin label { text-transform: none !important; letter-spacing: 0 !important; font: 400 14px var(--font-ui) !important; color: var(--text-body) !important; }

/* "¿Ya tienes cuenta? Entra" junto al título Contacto. */
.e-checkout__column-start .woocommerce-form-login-toggle .woocommerce-info {
	position: static !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	animation: none;
	padding: 0 0 8px !important;
	text-align: right;
	font: 500 13px var(--font-ui) !important;
	color: var(--text-muted) !important;
}
.e-checkout__column-start .woocommerce-form-login-toggle a { color: var(--orquidea-700); text-decoration: underline; }

/* Pago dentro de la izquierda: métodos como optbox y bankbox. */
.esb-ckblock--pago #payment { background: transparent !important; }
.esb-ckblock--pago #payment ul.wc_payment_methods {
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	overflow: hidden;
	padding: 0;
	margin: 0 0 4px;
}
.esb-ckblock--pago #payment ul.wc_payment_methods li {
	list-style: none;
	margin: 0;
	padding: 15px 16px;
	border-top: 1px solid var(--border-subtle);
}
.esb-ckblock--pago #payment ul.wc_payment_methods li:first-child { border-top: 0; }
.esb-ckblock--pago #payment ul.wc_payment_methods li:has(input:checked) { background: var(--surface-blush); }
.esb-ckblock--pago #payment input[type="radio"] { accent-color: var(--orquidea-600); }
.esb-ckblock--pago #payment label { font: 600 14px var(--font-ui) !important; text-transform: none !important; letter-spacing: 0 !important; }
/* bankbox (site.css:130-131) */
.esb-ckblock--pago #payment div.payment_box {
	background: var(--surface-sunken) !important;
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	padding: 18px !important;
	font: 400 13.5px/1.6 var(--font-ui);
	color: var(--text-strong);
	margin-top: 10px;
}
.esb-ckblock--pago #payment div.payment_box::before { display: none !important; }
/* El botón del pedido viaja con el bloque de pago (mockup: al final del flujo). */
.esb-ckblock--pago #payment .form-row.place-order { padding: 18px 0 0; }

/* Columna rosa: total grande serif + sellos. */
.e-checkout__column-end .order-total .woocommerce-Price-amount {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
}
.esb-ck__trust {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-top: 18px;
	margin-top: 8px;
	border-top: 1px solid rgba(27,20,26,.22);
	font: 400 13px var(--font-ui);
	color: var(--tinta-900);
}

/* Checkout: la col2-set de Woo a ancho completo (rompía el formulario en 47%). */
.e-checkout__column-start .col2-set,
.e-checkout__column-start .col2-set .col-1,
.e-checkout__column-start .col2-set .col-2 {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* El envío se elige a la IZQUIERDA; la fila de radios de la derecha sobra. */
.e-checkout__column-end tr.woocommerce-shipping-totals { display: none !important; }

/* Nombre/Apellido a dos columnas reales. */
.e-checkout__column-start .form-row-first { width: 48% !important; float: left !important; }
.e-checkout__column-start .form-row-last  { width: 48% !important; float: right !important; }

/* Pasos del checkout: bajo el logo, alineados con el borde izquierdo del
   formulario (el contenido de la mitad blanca mide 590px pegado a su derecha). */
form.checkout .esb-ck__steps {
	box-sizing: border-box;
	width: 50%;
	padding: 112px 56px 0 max(20px, calc(50vw - 646px));
	justify-content: flex-start;
}
@media (max-width: 900px) {
	form.checkout .esb-ck__steps { width: 100%; padding: 18px 20px 0; justify-content: flex-start; }
}

/* Tras añadir por AJAX, Woo mete "Ver carrito" (a.added_to_cart) junto al "+":
   en la tarjeta sobra — el drawer se abre solo y además hay toast. */
.esb-card-add .added_to_cart { display: none !important; }
/* Spinner de carga del botón: dentro del círculo, no debajo. */
.esb-card-add .button.loading { color: transparent !important; }
.esb-card-add .button.loading::after {
	-webkit-mask: none;
	mask: none;
	background: transparent;
	width: 16px;
	height: 16px;
	border: 2px solid var(--tinta-900);
	border-top-color: transparent;
	border-radius: 50%;
	animation: esb-spin .7s linear infinite;
}
@keyframes esb-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   21. Checkout — resumen rosa idéntico al mockup (checkout-real.png)
   ========================================================================== */
/* Icono genérico por máscara (Lucide). */
.esb-ick {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.esb-ick[data-esb-i="truck"]        { -webkit-mask-image: var(--esb-icon-truck); mask-image: var(--esb-icon-truck); }
.esb-ick[data-esb-i="shield-check"] { -webkit-mask-image: var(--esb-icon-shield-check); mask-image: var(--esb-icon-shield-check); }
.esb-ick[data-esb-i="banknote"]     { -webkit-mask-image: var(--esb-icon-banknote); mask-image: var(--esb-icon-banknote); }
.esb-ick[data-esb-i="shopping-bag"] { -webkit-mask-image: var(--esb-icon-shopping-bag); mask-image: var(--esb-icon-shopping-bag); }

/* El título del widget y la cabecera de la tabla sobran: la cabecera del
   mockup es la fila "TU PEDIDO · N ARTÍCULOS". */
.e-checkout__column-end h3#order_review_heading { display: none !important; }
.e-checkout__column-end table.shop_table thead { display: none !important; }

.esb-ck__ordhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font: 700 11px var(--font-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 0 0 14px;
}
.esb-ck__ordhead-row td { border: 0 !important; padding: 0 !important; }
.e-checkout__column-end table.shop_table tr.cart_item td {
	border-top: 1px solid rgba(27, 20, 26, .18) !important;
	border-bottom: 0 !important;
	padding: 14px 0 !important;
	vertical-align: top;
}

/* Línea de producto: foto 56 | marca/nombre/meta | precio a la derecha. */
.e-checkout__column-end td.product-name {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.esb-ckline__img { flex: 0 0 56px; }
.esb-ckline__img img {
	width: 56px !important;
	height: 56px !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 12px;
	background: var(--tinta-0);
	display: block;
}
.e-checkout__column-end .esb-line__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.e-checkout__column-end .esb-line__name { font-family: var(--font-display); font-size: 16px; line-height: 1.2; }
.e-checkout__column-end .esb-line__meta { font: 400 12px var(--font-ui); color: rgba(27, 20, 26, .62); }
.e-checkout__column-end td.product-total {
	text-align: right;
	font: 600 14px var(--font-ui);
	white-space: nowrap;
}

/* Cupón del mockup: etiqueta + campo blanco + APLICAR tinta. */
.esb-ck__coupon-row td { border: 0 !important; padding: 16px 0 4px !important; border-top: 1px solid rgba(27,20,26,.18) !important; }
.esb-ck__coupon label {
	display: block;
	font: 700 11px var(--font-ui) !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.esb-ck__coupon-line { display: flex; gap: 10px; }
.esb-ck__coupon-line input {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--tinta-0) !important;
	border: 1px solid rgba(27, 20, 26, .14) !important;
	border-radius: 10px;
	padding: 12px 14px;
	font: 400 14px var(--font-ui);
	color: var(--text-strong);
}
.esb-ck__coupon-line .esb-coupon-apply {
	background: var(--tinta-900);
	color: var(--tinta-0) !important;
	border: 0;
	border-radius: 999px;
	font: 700 11px var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 0 22px;
	cursor: pointer;
}
.esb-ck__coupon-line .esb-coupon-apply:hover { background: var(--tinta-800); }

/* Totales: filas limpias, "Delivery Caracas · Gratis". */
.e-checkout__column-end table.shop_table tfoot th,
.e-checkout__column-end table.shop_table .cart-subtotal th,
.e-checkout__column-end table.shop_table .esb-ck__ship-row th {
	font: 400 14px var(--font-ui) !important;
	text-align: left;
}
.e-checkout__column-end .cart-subtotal td,
.e-checkout__column-end .esb-ck__ship-row td {
	text-align: right;
	font: 600 14px var(--font-ui);
}
.e-checkout__column-end .esb-ck__ship-row th,
.e-checkout__column-end .esb-ck__ship-row td { border-top: 0 !important; }
.e-checkout__column-end .order-total th { font: 400 17px var(--font-display) !important; }
.e-checkout__column-end .order-total td { text-align: right; }
.e-checkout__column-end .order-total td strong {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -.01em;
}
.e-checkout__column-end .order-total td .esb-bs { display: block; font-size: 12px; font-weight: 400; }

/* Sellos con icono. */
.esb-ck__trust span { display: flex; align-items: center; gap: 10px; }

/* País oculto (solo Venezuela) y línea de login junto a "Contacto". */
#billing_country_field { display: none !important; }
.esb-ck__login {
	text-align: right;
	font: 500 13px var(--font-ui);
	color: var(--text-muted);
	margin: -38px 0 18px;
}
.esb-ck__login a { color: var(--orquidea-700); text-decoration: underline; }

/* Pasos: separador "›" fino, sin rayas. */
.esb-ck__steps i {
	font-style: normal;
	color: var(--text-faint);
	background: none !important;
	width: auto !important;
	height: auto !important;
}

/* Método de envío en dos líneas + precio a la derecha (optbox del mockup). */
.esb-optbox ul li label { display: flex !important; flex: 1 1 auto; gap: 12px; align-items: flex-start; }
.esb-ship__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.esb-ship__t { font: 600 14px var(--font-ui); color: var(--text-strong); }
.esb-ship__d { font: 400 12.5px var(--font-ui); color: var(--text-muted); }
.esb-ship__price { font: 700 12px var(--font-ui); color: var(--text-strong); white-space: nowrap; }

/* Pago: subtítulo bajo el título del método + icono a la derecha. */
.esb-ckblock--pago #payment li.payment_method_bacs { position: relative; }
.esb-ckblock--pago #payment li.payment_method_bacs > label::after {
	content: "En bolívares, a la tasa BCV del día.";
	display: block;
	font: 400 12.5px var(--font-ui);
	color: var(--text-muted);
	text-transform: none;
	letter-spacing: 0;
	margin-top: 3px;
}
.esb-ckblock--pago #payment li.payment_method_bacs::after {
	content: "";
	position: absolute;
	top: 18px;
	right: 16px;
	width: 18px;
	height: 18px;
	background-color: var(--text-muted);
	-webkit-mask: var(--esb-icon-banknote) center / contain no-repeat;
	mask: var(--esb-icon-banknote) center / contain no-repeat;
}
/* Filas del banco dentro de la caja gris (descripción del método). */
.esb-bank__row { display: flex; gap: 14px; padding: 3px 0; }
.esb-bank__row b {
	flex: 0 0 72px;
	font-weight: 400;
	color: var(--text-muted);
}

/* El cupón propio va como fila del resumen: la caja plegable del widget sobra. */
.e-checkout__column-end .e-coupon-box,
.e-checkout__column-end .woocommerce-form-coupon-toggle,
.e-checkout__column-end .checkout_coupon { display: none !important; }

/* La celda del nombre ocupa el ancho; el precio, fijo a la derecha. */
.e-checkout__column-end table.shop_table { table-layout: auto; width: 100%; }
.e-checkout__column-end td.product-name { width: 100%; }
.e-checkout__column-end td.product-total { width: 96px; }

/* Zona + Punto de referencia en una fila (mockup). */
.e-checkout__column-start #billing_city_field { width: 48% !important; float: left !important; }
.e-checkout__column-start #billing_address_2_field { width: 48% !important; float: right !important; }

/* Las líneas del resumen como flex: el algoritmo de tabla encogía el nombre
   a una palabra por línea. */
.e-checkout__column-end tr.cart_item {
	display: flex;
	align-items: flex-start;
	border-top: 1px solid rgba(27, 20, 26, .18);
	padding: 14px 0;
}
.e-checkout__column-end tr.cart_item td,
.e-checkout__column-end tr.cart_item td.product-name {
	border: 0 !important;
	padding: 0 !important;
	width: auto;
}
.e-checkout__column-end tr.cart_item td.product-name { flex: 1 1 auto; min-width: 0; }
.e-checkout__column-end tr.cart_item td.product-total { flex: 0 0 auto; margin-left: 14px; }
.e-checkout__column-end .esb-ck__ordhead { border-bottom: 0; }

/* Total en una línea; el "≈ Bs" sin coletilla (mockup: solo la cifra). */
.e-checkout__column-end .order-total td { white-space: nowrap; }
.e-checkout__column-end .order-total td .esb-bs { white-space: nowrap; }
.e-checkout__column-end .order-total td .esb-bs__tag { display: none; }

/* El aviso de privacidad no está en el mockup. */
.woocommerce-checkout .woocommerce-privacy-policy-text { display: none; }

/* El resumen deja de ser tabla: los tr flex dentro de una tabla real encogían
   a min-content (líneas cortas, nombres palabra a palabra). */
.e-checkout__column-end table.shop_table { display: block; }
.e-checkout__column-end table.shop_table tbody,
.e-checkout__column-end table.shop_table tfoot { display: block; width: 100%; }
.e-checkout__column-end table.shop_table tbody tr { display: flex; width: 100%; }
.e-checkout__column-end tr.cart_item td.product-total { margin-left: auto; }
.e-checkout__column-end table.shop_table tfoot tr {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: baseline;
	padding: 7px 0;
}
.e-checkout__column-end table.shop_table tfoot th,
.e-checkout__column-end table.shop_table tfoot td {
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.e-checkout__column-end tr.esb-ck__coupon-row td,
.e-checkout__column-end tr.esb-ck__trust-row td,
.e-checkout__column-end tr.esb-ck__ordhead-row td { flex: 1 1 100%; }
.e-checkout__column-end tr.esb-ck__coupon-row,
.e-checkout__column-end tr.esb-ck__trust-row { display: flex; width: 100%; }
.e-checkout__column-end tr.cart-subtotal { border-top: 1px solid rgba(27,20,26,.18); padding-top: 14px !important; margin-top: 4px; }
.e-checkout__column-end tr.order-total { padding-top: 12px !important; }
.e-checkout__column-end tr.esb-ck__trust-row td { border-top: 0 !important; }

/* Ayudas bajo los campos ("Por aquí te confirmamos…"). */
.e-checkout__column-start .form-row .description,
.e-checkout__column-start .form-row span.description {
	display: block !important;
	font: 400 12.5px var(--font-ui);
	color: var(--text-muted);
	margin: 6px 0 0;
}

/* El fixup de tablas ignora el reparto flex de los td: anchos explícitos. */
.e-checkout__column-end tr.cart_item td.product-name { width: calc(100% - 110px) !important; }
.e-checkout__column-end tr.cart_item td.product-total { width: 96px !important; text-align: right; }

/* La ayuda del teléfono sin el bocadillo azul del widget. */
.e-checkout__column-start .form-row .description {
	background: transparent !important;
	color: var(--text-muted) !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	pointer-events: none;
}
.e-checkout__column-start .form-row .description::before,
.e-checkout__column-start .form-row .description::after { content: none !important; display: none !important; }

/* Chrome se empeña en re-encajar los td como tabla: display:contents y que
   la foto, el cuerpo y el precio sean los items flex del propio tr. */
.e-checkout__column-end tr.cart_item { gap: 14px; }
.e-checkout__column-end tr.cart_item td.product-name,
.e-checkout__column-end tr.cart_item td.product-total { display: contents !important; }
.e-checkout__column-end tr.cart_item .esb-line__body { flex: 1 1 auto; min-width: 0; }
.e-checkout__column-end tr.cart_item .esb-ckline__img { flex: 0 0 56px; }
.e-checkout__column-end tr.cart_item td.product-total .woocommerce-Price-amount,
.e-checkout__column-end tr.cart_item td.product-total > * {
	margin-left: auto;
	font: 600 14px var(--font-ui);
	white-space: nowrap;
}

/* Línea fina sobre el Total (mockup) y filete completo entre líneas. */
.e-checkout__column-end tr.order-total { border-top: 1px solid rgba(27, 20, 26, .18); margin-top: 6px; }

/* ==========================================================================
   22. PÁGINA DEL CARRITO — CartScreen del prototipo (líneas + aside Resumen)
   ========================================================================== */
/* Dos columnas: líneas a la izquierda, Resumen 372px pegajoso a la derecha. */
.esb-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 0 44px;
	align-items: start;
}
.esb-cart .woocommerce-cart-form { grid-column: 1; }
.esb-cart .cart-collaterals {
	grid-column: 2;
	grid-row: 1 / span 3;
	position: sticky;
	top: 104px;
	width: 100%;
}
.esb-cart .esb-cart__note { grid-column: 1; }
@media (max-width: 900px) {
	.esb-cart .woocommerce { display: block; }
	.esb-cart .cart-collaterals { position: static; margin-top: 26px; }
}

/* La tabla clásica se convierte en las líneas .line del prototipo. */
.esb-cart table.cart { border: 0 !important; }
.esb-cart table.cart thead { display: none; }
.esb-cart table.cart,
.esb-cart table.cart tbody { display: block; width: 100%; }
.esb-cart table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	grid-template-areas:
		"img cuerpo precio"
		"img controles precio";
	gap: 4px 18px;
	padding: 24px 0;
	border-bottom: 1px solid var(--border-subtle);
	position: relative;
}
.esb-cart table.cart td { border: 0 !important; padding: 0 !important; background: transparent !important; }
.esb-cart td.product-thumbnail { grid-area: img; }
.esb-cart td.product-thumbnail img {
	width: 104px !important;
	height: 104px !important;
	object-fit: cover;
	border-radius: 14px;
	background: var(--tinta-50);
	display: block;
}
.esb-cart td.product-name {
	grid-area: cuerpo;
	font-family: var(--font-display) !important;
	font-size: 20px !important;
}
.esb-cart td.product-name a {
	color: var(--text-strong) !important;
	text-decoration: none;
	border: 0 !important;
	font-family: var(--font-display) !important;
	font-size: 20px !important;
	line-height: 1.15;
}
.esb-cart td.product-name .esb-line__brand { margin-bottom: 2px; }
.esb-cart td.product-name .variation {
	font: 400 13px var(--font-ui);
	color: var(--text-muted);
	margin: 4px 0 0;
}
.esb-cart td.product-name .variation dt,
.esb-cart td.product-name .variation dd { display: inline; margin: 0; }
/* Precio de línea (subtotal) arriba a la derecha con su Bs. */
.esb-cart td.product-price { display: none; }
.esb-cart td.product-subtotal {
	grid-area: precio;
	text-align: right;
	font: 600 20px var(--font-ui) !important;
	color: var(--text-strong) !important;
}
.esb-cart td.product-subtotal .esb-bs {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--text-muted);
}
.esb-cart td.product-subtotal .esb-bs__approx,
.esb-cart td.product-subtotal .esb-bs__tag { display: none; }
/* Cantidad: la píldora del prototipo con − y + reales. */
.esb-cart td.product-quantity { grid-area: controles; align-self: end; }
.esb-cart td.product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border-default);
	border-radius: 999px;
	background: var(--tinta-0);
	overflow: hidden;
	height: 38px;
}
.esb-cart td.product-quantity .screen-reader-text { display: none; }
.esb-cart .esb-step {
	width: 38px;
	height: 38px;
	border: 0;
	background: transparent;
	color: var(--text-body);
	font-size: 17px;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .2s ease;
}
.esb-cart .esb-step:hover { background: var(--surface-blush); color: var(--orquidea-800); }
.esb-cart td.product-quantity input.qty {
	width: 34px;
	border: 0 !important;
	background: transparent !important;
	text-align: center;
	font: 600 14px var(--font-ui);
	color: var(--text-strong);
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 0 !important;
}
.esb-cart td.product-quantity input.qty::-webkit-inner-spin-button,
.esb-cart td.product-quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }
/* ✕ QUITAR junto a la píldora (como el CartLine). */
.esb-cart td.product-remove {
	grid-area: controles;
	justify-self: start;
	align-self: end;
	margin-left: 132px;
	height: 38px;
	display: flex;
	align-items: center;
}
.esb-cart td.product-remove a.remove {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: auto !important;
	height: auto !important;
	font-size: 0 !important;
	color: var(--text-muted) !important;
	background: none !important;
	border-radius: 0;
	text-decoration: none;
}
.esb-cart td.product-remove a.remove::before {
	content: "";
	width: 11px;
	height: 11px;
	background-color: currentColor;
	-webkit-mask: var(--esb-icon-x) center / contain no-repeat;
	mask: var(--esb-icon-x) center / contain no-repeat;
}
.esb-cart td.product-remove a.remove::after {
	content: "Quitar";
	font: 700 10px var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.esb-cart td.product-remove a.remove:hover { color: var(--error) !important; }
/* La fila de acciones (cupón ya movido + actualizar) desaparece: el stepper
   actualiza solo y el cupón vive en el aside. */
.esb-cart table.cart tr:not(.cart_item) { display: none; }

/* Nota para el pedido. */
.esb-cart__note { margin: 22px 0 0; }
.esb-cart__note label {
	display: block;
	font: 700 11px var(--font-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 10px;
}
.esb-cart__note textarea {
	width: 100%;
	border: 1px solid var(--border-default);
	border-radius: 12px;
	background: var(--tinta-0);
	padding: 14px;
	font: 400 14px var(--font-ui);
	color: var(--text-strong);
	resize: vertical;
}

/* ── Aside "Resumen" ── */
.esb-cart .cart_totals {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	background: var(--surface-card);
	padding: 26px;
	width: 100% !important;
	float: none !important;
}
.esb-cart .cart_totals h2 {
	font-family: var(--font-display) !important;
	font-size: 24px;
	font-weight: 400;
	margin: 0 0 18px;
}
.esb-aside__label {
	display: block;
	font: 700 11px var(--font-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 10px;
}
.esb-aside__coupon { margin: 0 0 18px; }
.esb-aside__coupon .coupon { display: flex; gap: 10px; }
.esb-aside__coupon .coupon input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--border-default);
	border-radius: 10px;
	padding: 11px 13px;
	font: 400 14px var(--font-ui);
}
.esb-aside__coupon .coupon .button {
	background: var(--tinta-900) !important;
	color: var(--tinta-0) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font: 700 11px var(--font-ui) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 0 20px !important;
}
.esb-cart .cart_totals table,
.esb-cart .cart_totals tbody { display: block; width: 100%; border: 0 !important; }
.esb-cart .cart_totals tr { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.esb-cart .cart_totals th,
.esb-cart .cart_totals td { border: 0 !important; padding: 0 !important; background: transparent !important; font: 400 14px var(--font-ui); text-align: left; }
.esb-cart .cart_totals td { text-align: right; font-weight: 600; }
.esb-cart .cart_totals .esb-aside__label-row { padding: 12px 0 0; }
/* Radios de envío como optbox. */
.esb-cart .cart_totals tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: 8px; }
.esb-cart .cart_totals tr.woocommerce-shipping-totals th { display: none; }
.esb-cart .cart_totals ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	overflow: hidden;
}
.esb-cart .cart_totals ul#shipping_method li {
	margin: 0;
	padding: 13px 14px;
	border-top: 1px solid var(--border-subtle);
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.esb-cart .cart_totals ul#shipping_method li:first-child { border-top: 0; }
.esb-cart .cart_totals ul#shipping_method li:has(input:checked) { background: var(--surface-blush); }
.esb-cart .cart_totals ul#shipping_method input[type="radio"] { accent-color: var(--orquidea-600); margin-top: 3px; }
.esb-cart .cart_totals ul#shipping_method label { display: flex !important; flex: 1; gap: 10px; font: 400 13px var(--font-ui) !important; }
/* Calculadora: solo la zona, siempre abierta, sin el enlace. */
.esb-cart .woocommerce-shipping-calculator > .shipping-calculator-button { display: none; }
.esb-cart .shipping-calculator-form { display: block !important; margin-top: 10px; }
.esb-cart .shipping-calculator-form .button {
	background: transparent !important;
	color: var(--text-strong) !important;
	border: 1px solid var(--border-default) !important;
	border-radius: 999px !important;
	font: 600 11px var(--font-ui) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 10px 18px !important;
}
.esb-cart .woocommerce-shipping-destination { font: 400 12.5px var(--font-ui); color: var(--text-muted); }
/* Total + botones. */
.esb-cart .cart_totals tr.order-total { border-top: 1px solid var(--border-subtle); margin-top: 10px; padding-top: 14px; }
.esb-cart .cart_totals tr.order-total th { font: 400 17px var(--font-display) !important; }
.esb-cart .cart_totals tr.order-total td strong { font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.esb-cart .cart_totals tr.order-total .esb-bs { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.esb-cart .cart_totals tr.order-total .esb-bs__tag { display: none; }
.esb-cart .wc-proceed-to-checkout { padding: 16px 0 0 !important; }
.esb-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	background: var(--gradient-dorado) !important;
	color: var(--tinta-900) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font: 700 13px var(--font-ui) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 16px 28px !important;
	box-shadow: var(--shadow-sm), var(--shadow-inset-veil);
}
.esb-cart__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 12px;
	border: 1px solid var(--whatsapp);
	border-radius: 999px;
	padding: 13px 22px;
	font: 700 12px var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--whatsapp-oscuro) !important;
	text-decoration: none !important;
	transition: background .2s ease;
}
.esb-cart__wa:hover { background: rgba(37, 211, 102, .09); }
.esb-cart__nota {
	margin: 12px 0 0;
	font: 400 11.5px var(--font-ui);
	letter-spacing: .04em;
	color: var(--text-muted);
	text-align: center;
}

/* ── Drawer: fila de subtotal del mockup (≈Bs + "Envío y cupón…") ── */
.elementor-menu-cart__subtotal { flex-wrap: wrap; row-gap: 2px; }
.elementor-menu-cart__subtotal .esb-bs {
	flex: 1 1 100%;
	display: flex;
	justify-content: space-between;
	font: 400 12px var(--font-ui);
	color: var(--text-muted);
}
.elementor-menu-cart__subtotal .esb-bs__tag { display: none; }
.elementor-menu-cart__subtotal .esb-bs::after {
	content: "Envío y cupón en el siguiente paso";
	font: 400 12px var(--font-ui);
	color: var(--text-muted);
}
.esb-minicart__ship .esb-freeship__row { display: flex; align-items: center; gap: 8px; }
.esb-minicart__ship .esb-ick { width: 15px; height: 15px; color: var(--text-body); }

/* §22-bis — el widget envuelve en .e-cart__container con column-start/end:
   la rejilla va AHÍ (lo anterior apuntaba a .woocommerce y a clases e-cart
   que no existen en esta versión). */
.esb-cart .woocommerce { display: block; }
.esb-cart .e-cart__container {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 0 44px;
	align-items: start;
}
.esb-cart .e-cart__column-start { min-width: 0; }
.esb-cart .e-cart__column-end { min-width: 0; }
.esb-cart .e-cart__column-inner { position: sticky; top: 104px; }
@media (max-width: 900px) {
	.esb-cart .e-cart__container { display: block !important; }
	.esb-cart .e-cart__column-inner { position: static; }
	.esb-cart .e-cart__column-end { margin-top: 26px; }
}
/* Secciones del widget sin su tarjeta por defecto; la caja la pone .cart_totals. */
.esb-cart .e-shop-table.e-cart-section,
.esb-cart .e-cart-totals.e-cart-section {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
}
/* Actualizar carrito: lo dispara el stepper; el botón queda fuera de vista. */
.esb-cart button[name="update_cart"] {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}
.esb-cart .e-clear { display: none; }
/* Cupón dentro del Resumen. */
.esb-aside__coupon .coupon { border: 0 !important; background: transparent !important; padding: 0 !important; }
.esb-aside__coupon .form-row.coupon-col { display: flex !important; gap: 10px; margin: 0 !important; }
.esb-aside__coupon .coupon-col-start { flex: 1 1 auto; min-width: 0; }
.esb-aside__coupon .coupon-col-start input { width: 100% !important; }
.esb-aside__coupon .coupon-col-end { flex: 0 0 auto; }
.esb-aside__coupon .coupon-col-end .button { height: 100%; }
/* Filas de totales: etiqueta izquierda, valor derecha. */
.esb-cart .cart_totals th { margin-right: auto; }
/* El aviso nativo de envío sobra: la pista del mockup va bajo la zona. */
.esb-cart .woocommerce-shipping-destination { display: none; }
.esb-cart .shipping-calculator-form::after {
	content: "Fuera de Caracas coordinamos por WhatsApp.";
	display: block;
	margin-top: 8px;
	font: 400 12.5px var(--font-ui);
	color: var(--text-muted);
}
.esb-cart .shipping-calculator-form label { display: none; }
.esb-cart .shipping-calculator-form .form-row { margin: 0 0 8px !important; }
.esb-cart .shipping-calculator-form input,
.esb-cart .shipping-calculator-form select {
	width: 100%;
	border: 1px solid var(--border-default);
	border-radius: 10px;
	background: var(--tinta-0);
	padding: 11px 13px;
	font: 400 14px var(--font-ui);
	color: var(--text-strong);
}

/* §22-tris — el CSS del widget pisa el display de las filas: !important. */
.esb-cart .cart_totals tr { display: flex !important; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.esb-cart .cart_totals tr.woocommerce-shipping-totals { flex-direction: column !important; align-items: stretch; }
.esb-cart .cart_totals tr.woocommerce-shipping-totals th { display: none !important; }
.esb-cart .cart_totals tr.woocommerce-shipping-totals td { width: 100%; }
/* El coste suelto que pinta el widget bajo la calculadora sobra. */
.esb-cart tr.woocommerce-shipping-totals td > .woocommerce-Price-amount { display: none !important; }
/* Más iconos de máscara. */
.esb-ick[data-esb-i="message-circle"] { -webkit-mask-image: var(--esb-icon-message-circle); mask-image: var(--esb-icon-message-circle); }
/* La barra de envío gratis termina donde empieza el aside (mockup). */
.esb-sec--cart .esb-freeship { max-width: calc(100% - 416px); }
@media (max-width: 900px) { .esb-sec--cart .esb-freeship { max-width: none; } }
/* La calculadora se aplica sola al cambiar la zona: botón fuera. */
.esb-cart .shipping-calculator-form .button { display: none !important; }

/* Remaches del aside: fuera el th "Envío" y la etiqueta "Ciudad:". */
.esb-cart .cart_totals tr.woocommerce-shipping-totals > th {
	display: none !important;
	font-size: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}
.esb-cart label[for="calc_shipping_city"] { display: none !important; }

/* §22-final — el widget esconde los th y pinta la etiqueta con
   td::before{content:attr(data-title)}: se invierte (th reales, sin ::before). */
.esb-cart .cart_totals table td::before { content: none !important; display: none !important; }
.esb-cart .cart_totals tr {
	width: 100% !important;
	min-width: 0;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	padding: 6px 0;
}
.esb-cart .cart_totals tr > th {
	display: block !important;
	font: 400 14px var(--font-ui) !important;
	color: var(--text-body);
	text-align: left;
}
.esb-cart .cart_totals tr > td { text-align: right; font-weight: 600; }
.esb-cart .cart_totals tr.esb-aside__label-row,
.esb-cart .cart_totals tr.woocommerce-shipping-totals { grid-template-columns: 1fr !important; }
.esb-cart .cart_totals tr.woocommerce-shipping-totals > th { display: none !important; }
.esb-cart .cart_totals tr.woocommerce-shipping-totals > td { text-align: left; font-weight: 400; }
.esb-cart .cart_totals tr.order-total > th { font: 400 17px var(--font-display) !important; }
.esb-cart .cart_totals tr.order-total { border-top: 1px solid var(--border-subtle); margin-top: 10px; padding-top: 14px; }

/* ==========================================================================
   23. Buscador a todo lo ancho (searchsheet del prototipo) + favoritos vacío
   ========================================================================== */
.esb-searchsheet-popup .dialog-widget-content {
	width: 100vw !important;
	max-width: 100vw !important;
	left: 0 !important;
	right: 0 !important;
	border-radius: 0 !important;
}
.esb-searchsheet-popup .dialog-message { padding: 26px 32px 30px !important; }
.esb-searchsheet-popup .elementor-section-wrap > *,
.esb-searchsheet-popup .e-con { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }

/* El estado vacío de favoritos se esconde en cuanto hay tarjetas. */
.elementor-popup-modal:has(.esb-drawer__loop .e-loop-item) .esb-fav-empty { display: none !important; }

/* Etiquetas del aside sin quiebres raros. */
.esb-aside__label { white-space: nowrap; letter-spacing: .12em; }

/* ==========================================================================
   24. Remaches ronda 3 — drawer (pie anclado), checkout (rosa hasta arriba),
       tienda (filtros pegajosos de verdad)
   ========================================================================== */
/* Drawer: los productos hacen scroll y el bloque subtotal+botones queda ANCLADO
   abajo; la línea separadora va SOBRE el subtotal, no sobre los botones. */
.elementor-menu-cart__main .widget_shopping_cart_content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	padding: 6px 24px 0 !important;
}
.elementor-menu-cart__products { flex: 1 1 auto; overflow-y: auto; }
.elementor-menu-cart__subtotal {
	margin-top: auto !important;
	border-top: 1px solid var(--border-subtle) !important;
	padding: 16px 0 4px !important;
}
.elementor-menu-cart__footer-buttons {
	border-top: 0 !important;
	padding-top: 10px !important;
}

/* Checkout: el rosa de la derecha llega hasta el borde superior. El logo ya es
   absoluto; los pasos también, y la columna blanca hace hueco con su padding. */
.woocommerce-checkout form.checkout { position: relative; }
form.checkout .esb-ck__steps {
	position: absolute;
	top: 108px;
	left: 0;
	z-index: 5;
	padding: 0 56px 0 max(20px, calc(50vw - 646px));
}
.woocommerce-checkout .e-checkout__column-start { padding-top: 170px !important; }
@media (max-width: 900px) {
	form.checkout .esb-ck__steps { position: static; width: 100%; padding: 18px 20px 0; }
	.woocommerce-checkout .e-checkout__column-start { padding-top: 16px !important; }
}

/* Tienda: el sticky de los filtros no corría porque el flex los estiraba. */
.esb-filters { align-self: flex-start !important; }

/* Fila ≈Bs del drawer: "≈ Bs 8.164" junto a la izquierda, la nota a la derecha. */
.elementor-menu-cart__subtotal .esb-bs { justify-content: flex-start; gap: 4px; }
.elementor-menu-cart__subtotal .esb-bs::after { margin-left: auto; }

/* ==========================================================================
   25. Corazón de favoritos (tarjeta + ficha) y remaches de la ficha
   ========================================================================== */
/* Tarjeta: corazón arriba a la derecha de la foto (es-prodcard__fav). */
.esb-prodcard { position: relative; }
.esb-card-fav {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: auto !important;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .2s ease, transform .2s ease;
}
.esb-prodcard:hover .esb-card-fav,
.esb-card-fav:focus-within { opacity: 1; transform: none; }
@media (hover: none) { .esb-card-fav { opacity: 1; transform: none; } }

.esb-card-fav .yith-wcwl-add-to-wishlist { margin: 0 !important; }
.esb-card-fav .yith-wcwl-add-button a,
.esb-card-fav .yith-wcwl-wishlistaddedbrowse a,
.esb-card-fav .yith-wcwl-wishlistexistsbrowse a {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	border: 1px solid var(--border-subtle);
	border-radius: 50%;
	background: var(--surface-card);
	box-shadow: var(--shadow-sm);
	font-size: 0 !important;
	color: var(--tinta-700);
	text-decoration: none !important;
}
.esb-card-fav .yith-wcwl-add-button a::before,
.esb-card-fav .yith-wcwl-wishlistaddedbrowse a::before,
.esb-card-fav .yith-wcwl-wishlistexistsbrowse a::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--esb-icon-heart) center / contain no-repeat;
	mask: var(--esb-icon-heart) center / contain no-repeat;
}
.esb-card-fav .yith-wcwl-add-button a:hover { color: var(--orquidea-700); border-color: var(--orquidea-300); }
.esb-card-fav .yith-wcwl-wishlistaddedbrowse a,
.esb-card-fav .yith-wcwl-wishlistexistsbrowse a { color: var(--orquidea-600); border-color: var(--orquidea-300); }
.esb-card-fav .yith-wcwl-add-to-wishlist .feedback,
.esb-card-fav .yith-wcwl-add-to-wishlist img.yith-wcwl-icon-loading { display: none !important; }

/* Ficha: la fila de compra en flex y el corazón como IconButton outline 52px. */
.esb-pdp__cart form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.esb-pdp__cart .yith-wcwl-add-to-wishlist { margin: 0 !important; flex: 0 0 auto; }
.esb-pdp__cart .yith-wcwl-add-button a,
.esb-pdp__cart .yith-wcwl-wishlistaddedbrowse a,
.esb-pdp__cart .yith-wcwl-wishlistexistsbrowse a {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0 !important;
	border: 1px solid var(--border-default);
	border-radius: 50%;
	background: var(--tinta-0);
	font-size: 0 !important;
	color: var(--tinta-700);
	text-decoration: none !important;
	transition: all .2s ease;
}
.esb-pdp__cart .yith-wcwl-add-button a::before,
.esb-pdp__cart .yith-wcwl-wishlistaddedbrowse a::before,
.esb-pdp__cart .yith-wcwl-wishlistexistsbrowse a::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--esb-icon-heart) center / contain no-repeat;
	mask: var(--esb-icon-heart) center / contain no-repeat;
}
.esb-pdp__cart .yith-wcwl-add-button a:hover { color: var(--orquidea-700); border-color: var(--orquidea-400); }
.esb-pdp__cart .yith-wcwl-wishlistaddedbrowse a,
.esb-pdp__cart .yith-wcwl-wishlistexistsbrowse a { color: var(--orquidea-600); border-color: var(--orquidea-300); }
.esb-pdp__cart .yith-wcwl-add-to-wishlist .feedback { display: none !important; }

/* CTA con la bolsita del prototipo (Button iconLeft="shopping-bag"). */
.esb-pdp__cart .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; }
.esb-pdp__cart .single_add_to_cart_button::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	margin-right: 10px;
	background-color: currentColor;
	-webkit-mask: var(--esb-icon-shopping-bag) center / contain no-repeat;
	mask: var(--esb-icon-shopping-bag) center / contain no-repeat;
}

/* Cantidad de la ficha: píldora .es-stepper (forms.css:44-48). */
.esb-pdp__cart .quantity {
	display: inline-flex !important;
	align-items: center;
	border: 1px solid var(--border-default);
	border-radius: 999px;
	background: var(--tinta-0);
	height: 52px;
	overflow: hidden;
	margin: 0 !important;
}
.esb-pdp__cart .quantity input.qty {
	border: 0 !important;
	width: 38px !important;
	height: 100% !important;
	border-radius: 0 !important;
	text-align: center;
	font: 600 14px var(--font-ui);
	color: var(--text-strong);
	background: transparent !important;
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 0 !important;
}
.esb-pdp__cart .quantity input.qty::-webkit-inner-spin-button,
.esb-pdp__cart .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.esb-pdp__cart .quantity .esb-step {
	width: 44px;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--text-body);
	font-size: 17px;
	cursor: pointer;
	transition: background .2s ease;
}
.esb-pdp__cart .quantity .esb-step:hover { background: var(--surface-blush); color: var(--orquidea-800); }

/* Ayuda de tono bajo los swatches. */
.esb-tono-help { font: 400 13px var(--font-ui); color: var(--text-muted); margin: 8px 0 0; }
.esb-tono-help a { color: var(--orquidea-700); text-decoration: underline; }

/* Pestañas subrayadas (los selectores de Woo ganaban al custom_css del build). */
.woocommerce div.product .esb-pdp__tabs ul.wc-tabs {
	display: flex;
	gap: 32px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--border-subtle) !important;
	background: none !important;
}
.woocommerce div.product .esb-pdp__tabs ul.wc-tabs::before,
.woocommerce div.product .esb-pdp__tabs ul.wc-tabs li::before,
.woocommerce div.product .esb-pdp__tabs ul.wc-tabs li::after { display: none !important; }
.woocommerce div.product .esb-pdp__tabs ul.wc-tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}
.woocommerce div.product .esb-pdp__tabs ul.wc-tabs li a {
	padding: 0 0 16px !important;
	font: 600 12px var(--font-ui) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted) !important;
}
.woocommerce div.product .esb-pdp__tabs ul.wc-tabs li.active a {
	color: var(--text-strong) !important;
	background-image: var(--gradient-dorado);
	background-size: 100% 2px;
	background-position: left bottom;
	background-repeat: no-repeat;
}

/* Acordeón: + fino a la DERECHA, sin cajas (site.css:93). */
.esb-acc details > summary,
.esb-acc .e-n-accordion-item-title {
	display: flex !important;
	align-items: center;
	justify-content: space-between !important;
	width: 100%;
}
.esb-acc .e-n-accordion-item-title-icon { order: 2; margin-left: auto; }
.esb-acc details { border: 0 !important; }

/* Remaches ficha: un solo corazón (fuera el <i> de YITH), acordeón sin cajas
   con título Montserrat, subrayado de tab en ORO. */
.esb-card-fav .yith-wcwl-add-to-wishlist a i,
.esb-pdp__cart .yith-wcwl-add-to-wishlist a i { display: none !important; }
.esb-acc details {
	border: 0 !important;
	border-top: 1px solid var(--border-subtle) !important;
	border-radius: 0 !important;
	background: none !important;
}
.esb-acc details > summary { padding: 18px 0 !important; background: none !important; }
.esb-acc summary,
.esb-acc .e-n-accordion-item-title-text {
	font: 600 13px/1.4 var(--font-ui) !important;
	color: var(--text-strong) !important;
	letter-spacing: .02em;
}
.woocommerce div.product .esb-pdp__tabs ul.wc-tabs li.active a {
	box-shadow: none !important;
	border-bottom: 0 !important;
}

/* Tarjeta agotada: badge y sin botón (mockup); el enlace queda en la foto/nombre. */
.e-loop-item.outofstock .esb-card-add { display: none !important; }

/* Swatches de texto (números/tallas): píldoras como las CategoryPill. */
.esb-pdp__cart .variations th.label label {
	font: 600 11px var(--font-ui);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-gold);
}
.esb-pdp__cart .variations .esb-swatches__selected {
	font: 400 13px var(--font-ui);
	color: var(--text-muted);
}
.esb-pdp__cart .esb-swatches--label .esb-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.esb-pdp__cart .esb-swatches--label .esb-swatch {
	appearance: none;
	border: 1px solid var(--border-default);
	border-radius: 999px;
	background: var(--tinta-0);
	padding: 9px 16px;
	font: 600 12px var(--font-ui);
	letter-spacing: .04em;
	color: var(--text-strong);
	cursor: pointer;
	transition: all .2s ease;
}
.esb-pdp__cart .esb-swatches--label .esb-swatch:hover {
	border-color: var(--orquidea-400);
	background: var(--surface-blush);
	color: var(--orquidea-800);
}
.esb-pdp__cart .esb-swatches--label .esb-swatch[aria-checked="true"] {
	background: var(--tinta-900);
	border-color: var(--tinta-900);
	color: var(--tinta-0);
}

/* YITH imprime los tres estados del corazón; los .hide deben seguir ocultos
   (mi display:inline-flex de arriba los resucitaba: salían 2-3 corazones). */
.esb-card-fav .yith-wcwl-add-to-wishlist .hide,
.esb-pdp__cart .yith-wcwl-add-to-wishlist .hide,
.esb-card-fav .yith-wcwl-add-to-wishlist .hide a,
.esb-pdp__cart .yith-wcwl-add-to-wishlist .hide a { display: none !important; }

/* YITH ya trae su corazón SVG inline: fuera mis máscaras (salían duplicados). */
.esb-card-fav .yith-wcwl-add-button a::before,
.esb-card-fav .yith-wcwl-wishlistaddedbrowse a::before,
.esb-card-fav .yith-wcwl-wishlistexistsbrowse a::before,
.esb-pdp__cart .yith-wcwl-add-button a::before,
.esb-pdp__cart .yith-wcwl-wishlistaddedbrowse a::before,
.esb-pdp__cart .yith-wcwl-wishlistexistsbrowse a::before { content: none !important; }
.esb-card-fav .yith-wcwl-add-to-wishlist a svg.yith-wcwl-icon-svg { width: 16px; height: 16px; display: block; }
.esb-pdp__cart .yith-wcwl-add-to-wishlist a svg.yith-wcwl-icon-svg { width: 20px; height: 20px; display: block; }
.esb-card-fav .yith-wcwl-add-to-wishlist a > *:not(svg),
.esb-pdp__cart .yith-wcwl-add-to-wishlist a > *:not(svg) { display: none !important; }

/* YITH también pinta corazón por ::after en su CSS: solo queda el SVG. */
.esb-card-fav .yith-wcwl-add-to-wishlist a::after,
.esb-pdp__cart .yith-wcwl-add-to-wishlist a::after,
.esb-card-fav .yith-wcwl-add-to-wishlist a::before,
.esb-pdp__cart .yith-wcwl-add-to-wishlist a::before { content: none !important; display: none !important; }

/* ==========================================================================
   26. REFACTOR NEGRO (decisión de cliente, 28-jul-2026)
   Cabecera y nav móvil negras, columna del checkout negra, stickybar y toasts
   negros. El fondo de página sigue blanco; el oro queda para los CTAs de
   compra y los acentos; el rosa para hovers/activos puntuales.
   ========================================================================== */

/* ── Cabecera: menú blanco con DORADO DEGRADADO (no mate) en hover/activo ── */
.esb-hdr .elementor-nav-menu--main .elementor-item {
	transition: none; /* el clip de texto no interpola bien el color */
}
.esb-hdr .elementor-nav-menu--main .elementor-item:hover,
.esb-hdr .elementor-nav-menu--main .elementor-item.elementor-item-active {
	background-image: var(--gradient-dorado);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--dorado-400); /* fallback si el clip no está soportado */
}
/* Subrayado dorado fino bajo el item activo, como remate del efecto. */
.esb-hdr .elementor-nav-menu--main .elementor-item.elementor-item-active {
	box-shadow: inset 0 -2px 0 0 var(--dorado-500);
}
/* Desplegables del menú sobre negro. */
.esb-hdr .elementor-nav-menu--dropdown {
	background: var(--tinta-900) !important;
	border: 1px solid rgba(255, 255, 255, .08) !important;
	box-shadow: var(--shadow-lg);
}
.esb-hdr .elementor-nav-menu--dropdown .elementor-item {
	color: var(--tinta-200) !important;
}
.esb-hdr .elementor-nav-menu--dropdown .elementor-item:hover {
	background: rgba(255, 255, 255, .06) !important;
	color: var(--dorado-400) !important;
	-webkit-text-fill-color: var(--dorado-400);
}
/* Red de seguridad: cualquier icono de acción de la cabecera, en blanco. */
.esb-hdr .esb-hdr-act .elementor-icon,
.esb-hdr .esb-hdr-act svg.lucide { color: var(--tinta-0); }
.esb-hdr .esb-hdr-act:hover .elementor-icon { color: var(--dorado-400); }

/* ── Nav inferior móvil sobre negro: activo en orquídea CLARA (legible) ── */
.home .esb-mnav--home .elementor-icon,
.home .esb-mnav--home .elementor-icon-box-title,
.post-type-archive-product .esb-mnav--shop .elementor-icon,
.post-type-archive-product .esb-mnav--shop .elementor-icon-box-title,
.tax-product_cat .esb-mnav--shop .elementor-icon,
.tax-product_cat .esb-mnav--shop .elementor-icon-box-title,
.page-id-630 .esb-mnav--fav .elementor-icon,
.page-id-630 .esb-mnav--fav .elementor-icon-box-title,
.woocommerce-cart .esb-mnav--cart .elementor-icon,
.woocommerce-cart .esb-mnav--cart .elementor-icon-box-title,
.woocommerce-account .esb-mnav--account .elementor-icon,
.woocommerce-account .esb-mnav--account .elementor-icon-box-title {
	color: var(--orquidea-300) !important;
}

/* ── Stickybar de la ficha (móvil) en negro ── */
.esb-stickybar {
	background: rgba(20, 14, 19, .95) !important;
	border-top: 1px solid rgba(255, 255, 255, .08) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.esb-stickybar,
.esb-stickybar .elementor-heading-title,
.esb-stickybar .woocommerce-Price-amount { color: var(--tinta-0) !important; }
.esb-stickybar .esb-bs { color: var(--tinta-300) !important; }

/* ── Toasts negros con filete dorado ── */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info:not(.cart-empty),
.woocommerce-notices-wrapper .woocommerce-error {
	background: var(--tinta-900) !important;
	color: var(--tinta-0) !important;
	border: 0 !important;
	overflow: hidden;
}
.woocommerce-notices-wrapper .woocommerce-message::after,
.woocommerce-notices-wrapper .woocommerce-info:not(.cart-empty)::after,
.woocommerce-notices-wrapper .woocommerce-error::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 1.5px;
	background: var(--gradient-dorado);
}
.woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-notices-wrapper .woocommerce-info a,
.woocommerce-notices-wrapper .woocommerce-error a { color: var(--dorado-300) !important; }
.woocommerce-notices-wrapper .woocommerce-message .esb-toast__x,
.woocommerce-notices-wrapper .woocommerce-info .esb-toast__x,
.woocommerce-notices-wrapper .woocommerce-error .esb-toast__x { color: var(--tinta-0); }
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before { color: var(--dorado-400); }
.woocommerce-notices-wrapper .woocommerce-message .button {
	background: var(--gradient-dorado) !important;
	color: var(--tinta-900) !important;
}

/* ── Checkout: la columna del resumen ahora es NEGRA — flip de los grises ── */
.e-checkout__column-end tr.cart_item { border-top-color: rgba(255, 255, 255, .18); }
.e-checkout__column-end tr.cart-subtotal { border-top-color: rgba(255, 255, 255, .18); }
.e-checkout__column-end tr.order-total { border-top-color: rgba(255, 255, 255, .18); }
.esb-ck__coupon-row td { border-top-color: rgba(255, 255, 255, .18) !important; }
.e-checkout__column-end .esb-line__meta { color: rgba(255, 255, 255, .62); }
.e-checkout__column-end .esb-line__brand { color: var(--dorado-300); opacity: 1; }
.esb-ck__trust { border-top-color: rgba(255, 255, 255, .22); color: var(--tinta-0); }
.esb-ck__coupon label { color: var(--tinta-0) !important; }
/* APLICAR: sobre negro, el botón va en ORO (el negro desaparecía). */
.esb-ck__coupon-line .esb-coupon-apply {
	background: var(--gradient-dorado) !important;
	color: var(--tinta-900) !important;
}
.esb-ck__coupon-line .esb-coupon-apply:hover { background: var(--gradient-dorado) !important; filter: brightness(1.06); }
.e-checkout__column-end .order-total td .esb-bs { color: rgba(255, 255, 255, .6); }
.e-checkout__column-end .esb-ck__ordhead { color: var(--tinta-0); }

/* ==========================================================================
   27. TIPOGRAFÍAS NUEVAS (decisión de cliente 28-jul): las de Claritas.
   Poppins para títulos, Lato para todo lo demás y Sofia como acento script.
   tokens.css define --font-display/--font-ui; esta hoja carga después y
   las pisa, así TODO lo que usa las variables cambia de golpe.
   ========================================================================== */
:root {
	--font-display: 'Poppins', Arial, Helvetica, sans-serif;
	--font-ui: 'Lato', Arial, Helvetica, sans-serif;
	--font-accent: 'Sofia', cursive;
}

/* Poppins delgada (300) se pierde en titulares: los display van en 600
   (mismo peso que usa Claritas en --wd-title-font-weight). */
.esb-d1 .elementor-heading-title,
.esb-d2 .elementor-heading-title,
.esb-d3 .elementor-heading-title,
.esb-d4 .elementor-heading-title,
.esb-pagehead .esb-d2 .elementor-heading-title,
.esb-minicart__title,
.esb-cart .cart_totals h2,
.woocommerce h2,
.woocommerce h3,
.cart_totals h2 {
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
}
/* Nombres de producto (tarjeta, líneas, resumen): peso 500 como Woodmart. */
.esb-card-title .elementor-heading-title,
.elementor-menu-cart__product-name a,
.e-checkout__column-end .esb-line__name,
.esb-cart td.product-name a,
.woocommerce table.shop_table .product-name a {
	font-weight: 500 !important;
}
/* Precio grande de la ficha: Poppins pide menos tamaño que la serif. */
.esb-price--lg .woocommerce-Price-amount { font-weight: 600; }

/* Acento script Sofia: cualquier <em> dentro de un titular display. */
.esb-d1 .elementor-heading-title em,
.esb-d2 .elementor-heading-title em,
.esb-d3 .elementor-heading-title em,
.esb-banner .swiper-slide .elementor-slide-heading em {
	font-family: var(--font-accent);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
}

/* ==========================================================================
   28. Remaches del barrido (post refactor negro + tipografías)
   ========================================================================== */
/* La bolsa del carrito en la cabecera: la hoja del widget carga DESPUÉS del
   CSS del documento y pintaba el ICONO (no el botón) en gris #69727d. El
   blanco va directo al icono y a su máscara. */
.esb-hdr .esb-hdr-cart .elementor-menu-cart__toggle .elementor-button,
.esb-hdr .esb-hdr-cart .elementor-menu-cart__toggle .elementor-button-icon {
	color: var(--tinta-0) !important;
}
.esb-hdr .esb-hdr-cart .elementor-menu-cart__toggle .elementor-button-icon::before {
	background-color: var(--tinta-0) !important;
}
.esb-hdr .esb-hdr-cart .elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon,
.esb-hdr .esb-hdr-cart .elementor-menu-cart__toggle .elementor-button:hover {
	color: var(--dorado-400) !important;
}
.esb-hdr .esb-hdr-cart .elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon::before {
	background-color: var(--dorado-400) !important;
}

/* Checkout negro: la var de Pro --order-summary-items-color pintaba los
   precios de línea en negro sobre negro. */
.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .cart_item td {
	color: var(--tinta-0) !important;
}

/* Botones oro: el texto SIEMPRE en tinta (el submit del formulario de
   contacto salía blanco sobre oro, ilegible). */
.esb-btn--gold .elementor-button,
.esb-btn--gold .elementor-button:hover,
.esb-btn--gold button[type="submit"] {
	color: var(--tinta-900) !important;
}

/* Activo de navegación SIEMPRE dorado (nav inferior y menú móvil iban en rosa). */
.home .esb-mnav--home .elementor-icon,
.home .esb-mnav--home .elementor-icon-box-title,
.post-type-archive-product .esb-mnav--shop .elementor-icon,
.post-type-archive-product .esb-mnav--shop .elementor-icon-box-title,
.tax-product_cat .esb-mnav--shop .elementor-icon,
.tax-product_cat .esb-mnav--shop .elementor-icon-box-title,
.page-id-630 .esb-mnav--fav .elementor-icon,
.page-id-630 .esb-mnav--fav .elementor-icon-box-title,
.woocommerce-cart .esb-mnav--cart .elementor-icon,
.woocommerce-cart .esb-mnav--cart .elementor-icon-box-title,
.woocommerce-account .esb-mnav--account .elementor-icon,
.woocommerce-account .esb-mnav--account .elementor-icon-box-title {
	color: var(--dorado-400) !important;
}
.elementor-popup-modal .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--dorado-600) !important;
}

/* Drawer fantasma: el ocultador de Elementor exige `body.elementor-default`
   (`body.elementor-default .elementor-widget-…:not(--shown) .container{scale(0)}`);
   si esa clase de body falta o llega tarde, el scrim queda pintado. Se replica
   la regla SIN esa dependencia — la clase --shown va en el WIDGET. */
.elementor-widget-woocommerce-menu-cart:not(.elementor-menu-cart--shown) .elementor-menu-cart__container {
	background-color: transparent;
	transform: scale(0);
	transition: background-color .4s, transform 0s .4s;
}

/* Barra de anuncios en móvil: los tres sellos caben sin recorte. */
@media (max-width: 520px) {
	.esb-announce .elementor-icon-list-item,
	.esb-announce .elementor-icon-list-text {
		font-size: 9px !important;
		letter-spacing: .04em !important;
	}
	.esb-announce .elementor-icon-list-items { gap: 8px !important; }
	.esb-announce .elementor-icon-list-icon { font-size: 12px !important; }
}

/* Ubicaciones del pie en móvil: una columna a todo el ancho. */
@media (max-width: 520px) {
	.esb-ft__ubis > .e-con-inner { flex-direction: column !important; }
	.esb-ft__ubis .esb-ft__ubi { width: 100% !important; max-width: none !important; }
}

/* Carrito en móvil: el CSS responsive del widget de Pro re-imponía la tabla
   clásica (etiquetas 'Producto:', miniatura oculta, remove colapsado). */
@media (max-width: 900px) {
	.esb-cart table.cart td::before { content: none !important; display: none !important; }
	.esb-cart td.product-thumbnail {
		display: block !important;
		width: 104px !important;
		grid-area: img;
	}
	.esb-cart td.product-thumbnail img { display: block !important; }
	.esb-cart table.cart tr.cart_item {
		display: grid !important;
		grid-template-columns: 84px minmax(0, 1fr) auto;
		grid-template-areas:
			"img cuerpo precio"
			"img controles precio";
	}
	.esb-cart td.product-thumbnail img { width: 84px !important; height: 84px !important; }
	.esb-cart td.product-name { text-align: left !important; grid-area: cuerpo; }
	.esb-cart td.product-subtotal { grid-area: precio; }
	.esb-cart td.product-quantity { grid-area: controles; }
	.esb-cart td.product-remove {
		grid-area: controles;
		position: static !important;
		width: auto !important;
		height: 38px !important;
		margin-left: 128px;
		display: flex !important;
	}
	.esb-cart td.product-price { display: none !important; }
}

/* Ficha: el CTA deshabilitado de Woo (morado #7f54b3) pasa a oro atenuado. */
.esb-pdp__cart .single_add_to_cart_button.disabled,
.esb-pdp__cart .single_add_to_cart_button.wc-variation-selection-needed {
	background: var(--gradient-dorado) !important;
	color: var(--tinta-900) !important;
	opacity: .55;
}

/* Acordeón: el contenedor del contenido sin el borde gris por defecto. */
.esb-acc .e-n-accordion-item > .e-con {
	border: 0 !important;
	box-shadow: none !important;
}

/* Pestañas de la ficha en móvil: etiquetas alineadas por base y más compactas. */
@media (max-width: 520px) {
	.woocommerce div.product .esb-pdp__tabs ul.wc-tabs { gap: 18px; align-items: flex-end; }
	.woocommerce div.product .esb-pdp__tabs ul.wc-tabs li a { font-size: 11px !important; padding-bottom: 12px !important; }
}

/* Filtro de marca: nombre y contador en la misma línea. */
.esb-filters .wp-block-woocommerce-brand-nav li,
.esb-filters .widget_woocommerce_brand_nav li,
.esb-filters .esb-fgroup li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.esb-filters .esb-fgroup li .count { white-space: nowrap; }

/* Carrito móvil, remate: nombre a la izquierda de verdad (la hoja responsive
   del widget alinea los td a la derecha y carga después) y el ✕ QUITAR
   abajo a la derecha, sin pisar el stepper. */
@media (max-width: 900px) {
	.woocommerce .esb-cart table.cart td.product-name,
	.woocommerce-page .esb-cart table.cart td.product-name {
		text-align: left !important;
	}
	.esb-cart td.product-remove {
		grid-area: precio !important;
		justify-self: end;
		align-self: end;
		margin-left: 0 !important;
	}
}

/* ==========================================================================
   29. Popups con ADMIN BAR en ≤1024px: Elementor los vuelve sticky
   ========================================================================== */
/* common.css de Elementor trae `body.admin-bar .dialog-type-lightbox
   {position:sticky;height:100vh}` bajo @media(max-width:1024px). Sticky NO
   saca el modal del flujo: como se pinta al FINAL del body, queda al fondo
   del documento y al abrirse (el diálogo recibe foco) el navegador hace
   scroll hasta abajo — buscador/favoritos/login/menú "bajan" la página y se
   ven descolocados. Solo lo sufre quien tiene sesión de admin con barra;
   una clienta jamás lo ve. Se fuerza fixed como en escritorio. */
@media (max-width: 1024px) {
	body.admin-bar .dialog-type-lightbox {
		position: fixed !important;
		top: 0 !important;
		height: 100% !important;
	}
}
/* Entre 601 y 1024px la admin bar de WP es fija (32px): el popup arranca
   debajo para que la barra no tape la lámina. ≤600px la barra es absolute
   (se va al hacer scroll) y el popup ocupa toda la pantalla. */
@media (min-width: 601px) and (max-width: 1024px) {
	body.admin-bar .dialog-type-lightbox {
		top: var(--wp-admin--admin-bar--height, 32px) !important;
		height: calc(100% - var(--wp-admin--admin-bar--height, 32px)) !important;
	}
}