/* ============================================================
   Carrito lateral premium — María Español
   Reestiliza el mini-cart de Elementor (widget "Menú carrito") al lenguaje
   visual del checkout premium y da forma al stepper de cantidad.

   Todo va SCOPADO a .elementor-menu-cart* para no filtrar a ningún otro sitio.
   Se usa !important puntual donde Elementor pinta con selectores de alta
   especificidad (.elementor-12 .elementor-element-XXXX ...), igual que el
   módulo de checkout. Modo claro (como el checkout).
   ============================================================ */

/* Tokens (idénticos al checkout). Se definen en __main, que NO se reemplaza
   con los fragments AJAX, así que heredan a todo el contenido repintado. */
.elementor-menu-cart__main {
	--mc-surface:#fff; --mc-surface-2:#f6faf9;
	--mc-ink:#122320; --mc-muted:#5d6f69; --mc-line:#dde8e4; --mc-line-2:#e7f0ed;
	--mc-teal:#1f7d72; --mc-teal-ink:#0f5a52;
	--mc-orange:#e8511e; --mc-orange-2:#d44510;
	--mc-radius:16px; --mc-radius-sm:11px;
	--mc-shadow-sm:0 3px 12px rgba(18,45,40,.07);
	--mc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* ---- Panel del drawer ----
   OJO: NO tocar `position`. En el tipo side-cart, Elementor da a __main
   `position:fixed` (lo ancla a la derecha, a pantalla completa). Sobreescribirlo
   rompe el drawer (se colapsa arriba a la izquierda). El botón de cerrar, con
   position:absolute, ya se ancla a __main porque `fixed` es bloque contenedor. */
.elementor-menu-cart__main {
	background:var(--mc-surface) !important;
	width:420px !important; max-width:100vw;
	padding:40px 24px 22px !important;
	font-family:var(--mc-font);
	box-shadow:-18px 0 50px rgba(18,45,40,.22) !important;
}

/* Botón de cerrar: reubicado arriba a la derecha (sobre la cabecera). */
.elementor-menu-cart__close-button {
	position:absolute !important; top:40px; right:24px;
	width:34px !important; height:34px !important; margin:0 !important;
	border:1px solid var(--mc-line); border-radius:10px; background:#fff;
	--cart-close-button-color:#8aa39c; --cart-close-button-hover-color:var(--mc-teal-ink);
	transition:border-color .18s;
}
.elementor-menu-cart__close-button:hover { border-color:var(--mc-teal); }
.elementor-menu-cart__close-button::before,
.elementor-menu-cart__close-button::after { width:15px !important; left:9px; height:2.4px; }

/* ---- Mini-efecto de carga premium ----
   Feedback visual mientras se sincroniza con el servidor (cambio de cantidad o
   borrado). SOLO visual: pointer-events:none, nunca bloquea el stepper. El JS
   añade/quita .mae-mc-syncing en .elementor-menu-cart__main (elemento estable,
   no se reemplaza con los fragments).

   (1) Barra superior fina con degradado luminoso que barre con easing suave y un
       leve glow teal. */
.elementor-menu-cart__main::before {
	content:""; position:absolute; top:0; left:0; right:0; height:2.5px;
	border-radius:0 0 3px 3px;
	background-image:linear-gradient(90deg,
		rgba(31,125,114,0) 0%, var(--mc-teal) 34%, var(--mc-teal-2) 50%, var(--mc-teal) 66%, rgba(31,125,114,0) 100%);
	background-repeat:no-repeat; background-size:45% 100%; background-position:-55% 0;
	opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:10;
}
.elementor-menu-cart__main.mae-mc-syncing::before {
	opacity:1;
	box-shadow:0 0 9px rgba(79,184,171,.55);
	animation:mae-mc-load 1.15s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes mae-mc-load {
	0%   { background-position:-55% 0; }
	100% { background-position:155% 0; }
}

/* (2) Spinner fino junto a "Subtotal" mientras recalcula. SIEMPRE visible
       (va en el contenido, no lo tapa nada) y el importe nunca desaparece. */
.elementor-menu-cart__main.mae-mc-syncing .elementor-menu-cart__subtotal strong::after {
	content:""; display:inline-block; width:13px; height:13px; margin-left:9px;
	vertical-align:-2px; box-sizing:border-box;
	border:2px solid rgba(31,125,114,.22); border-top-color:var(--mc-teal);
	border-radius:50%; animation:mae-mc-spin .62s linear infinite;
}
/* El importe se atenúa muy sutilmente mientras llega el nuevo valor. */
.elementor-menu-cart__main.mae-mc-syncing .elementor-menu-cart__subtotal .amount,
.elementor-menu-cart__main.mae-mc-syncing .elementor-menu-cart__subtotal .woocommerce-Price-amount {
	opacity:.45; transition:opacity .2s ease;
}
@keyframes mae-mc-spin { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
	.elementor-menu-cart__main.mae-mc-syncing::before { animation:none; opacity:.9; }
	.elementor-menu-cart__main.mae-mc-syncing .elementor-menu-cart__subtotal strong::after { animation:none; border-top-color:var(--mc-teal); }
}

/* ---- Cabecera "Tu carrito" (CSS puro; sobrevive al refresco de fragments) ---- */
.elementor-menu-cart__main .widget_shopping_cart_content::before {
	content:"Tu carrito";
	display:block; margin:2px 46px 14px 0;
	padding-left:28px;
	font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
	color:var(--mc-teal-ink); line-height:24px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7d72' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") no-repeat left center/20px 20px;
}

/* ---- Lista de productos ---- */
.elementor-menu-cart__products { padding:0 !important; margin:0 !important; }

/* Cada línea: rejilla [miniatura] [centro] [eliminar]. */
.elementor-menu-cart__product {
	grid-template-columns:60px 1fr auto !important;
	grid-template-rows:auto auto !important;
	gap:3px 14px !important;
	align-items:start !important;
	padding:18px 0 !important;
	border-width:0 0 1px !important;
	border-bottom:1px solid var(--mc-line-2) !important;
}

/* Miniatura redondeada (columna 1, ocupa las dos filas). */
.elementor-menu-cart__product-image {
	grid-column:1 !important; grid-row:1 / span 2 !important;
	width:60px !important; height:60px !important;
}
.elementor-menu-cart__product-image img,
.elementor-menu-cart__product-image a img {
	width:60px !important; height:60px !important; border-radius:13px !important;
	object-fit:cover; border:1px solid var(--mc-line-2); display:block;
}

/* Nombre (columna 2, fila 1). */
.elementor-menu-cart__product-name {
	grid-column:2 !important; grid-row:1 !important; margin:0 !important;
	font-size:14.5px !important; font-weight:700 !important; line-height:1.3 !important;
}
.elementor-menu-cart__product-name a {
	font-size:14.5px !important; color:var(--mc-ink) !important; text-decoration:none;
}

/* Celda de precio (columna 2, fila 2): badge + stepper + precio. */
.elementor-menu-cart__product-price {
	grid-column:2 !important; grid-row:2 !important;
	display:flex !important; flex-direction:column; align-items:flex-start; gap:8px;
	font-size:14px !important; margin-top:2px;
}
/* Elementor envuelve el precio nativo en .quantity; en las líneas editables lo
   sustituimos por nuestro marcado, pero mantenemos margen 0 por si acaso. */
.elementor-menu-cart__product-price .quantity { display:contents; }

.mae-mc-badge {
	font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
	color:var(--mc-teal-ink); background:#eaf5f2; border:1px solid #cfe4dd;
	border-radius:999px; padding:2px 8px; line-height:1.4;
}
.mae-mc-ctrl { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.mae-mc-price {
	font-size:13px; font-weight:600; color:var(--mc-muted);
	font-variant-numeric:tabular-nums;
}
.mae-mc-price .amount { font-weight:700; color:var(--mc-ink); }

/* ---- Stepper ---- */
.mae-mc-qty {
	display:inline-flex; align-items:center; background:#fff;
	border:1.5px solid var(--mc-line); border-radius:11px; overflow:hidden;
	box-shadow:var(--mc-shadow-sm);
}
/* Selector reforzado (.mae-mc-qty button.mae-mc-qty__btn = 0,2,1) + !important:
   el tema pinta TODOS los <button> con fondo naranja vía
   `button:not(:disabled){background:#e84f21 !important}` (especificidad 0,1,1).
   Sin esta especificidad extra, el stepper saldría naranja. */
.mae-mc-qty button.mae-mc-qty__btn {
	width:32px; height:32px; border:0 !important; background:#fff !important; cursor:pointer;
	color:var(--mc-teal-ink) !important; font-size:17px; font-weight:700; line-height:1;
	display:grid; place-items:center; padding:0; box-shadow:none !important;
	transition:background .15s, color .15s;
}
.mae-mc-qty button.mae-mc-qty__btn:hover { background:var(--mc-surface-2) !important; }
.mae-mc-qty button.mae-mc-qty__btn:disabled { color:#b9c8c3 !important; cursor:not-allowed; background:#fff !important; }
.mae-mc-qty button.mae-mc-qty__btn:focus-visible { outline:2px solid var(--mc-teal); outline-offset:-2px; }
.mae-mc-qty__n {
	min-width:36px; height:32px; display:grid; place-items:center;
	text-align:center; font-size:15px; font-weight:800; color:var(--mc-ink);
	font-variant-numeric:tabular-nums;
	border-left:1.5px solid var(--mc-line); border-right:1.5px solid var(--mc-line);
}
/* Cantidad fija (líneas no editables): sin bordes internos, más compacta. */
.mae-mc-qty--fixed { border:0; box-shadow:none; background:transparent; }
.mae-mc-qty--fixed .mae-mc-qty__n {
	border:0; min-width:0; height:auto; font-size:13px; font-weight:700; color:var(--mc-muted);
}

/* ---- Botón eliminar (columna 3, arriba) ----
   Elementor YA dibuja la × con los pseudo-elementos ::before/::after del
   CONTENEDOR (dos barras rotadas 45°/-45°, color var --remove-item-button-color)
   y en :hover les añade un `border:1px` (eso creaba el "círculo"). REUTILIZAMOS
   esa × —no dibujamos otra o se solapaban y parecía un ⊗— y solo la recoloreamos:
   gris en reposo, naranja + fondo melocotón (sin borde) al pasar. Como el artefacto. */
.elementor-menu-cart__product-remove {
	grid-column:3 !important; grid-row:1 / span 2 !important;
	align-self:center; justify-self:end; margin:0;
	position:relative; width:28px; height:28px; border-radius:8px;
	--remove-item-button-color:#a4b3ad;
	--remove-item-button-hover-color:#a4b3ad;
	transition:background-color .15s;
}
.elementor-menu-cart__product-remove:hover {
	background-color:#fdece7; border:0 !important;
	--remove-item-button-color:#d44510;
	--remove-item-button-hover-color:#d44510;
}
/* Ocultar el ancla duplicada; dejar la nativa transparente y llenando el
   contenedor para que siga siendo clicable sobre la × de Elementor. */
.elementor-menu-cart__product-remove a.elementor_remove_from_cart_button { display:none !important; }
.elementor-menu-cart__product-remove a.remove_from_cart_button {
	display:block !important; width:100% !important; height:100% !important;
	background:none !important; color:transparent !important; font-size:0 !important; border:0 !important;
}

/* ---- Subtotal ----
   El subtotal + botones van justo bajo la lista de productos (NO anclados al
   fondo del drawer; decisión del usuario tras comparar). */
.elementor-menu-cart__subtotal {
	display:flex !important; align-items:baseline; justify-content:space-between;
	border:0 !important; padding:18px 0 4px !important; margin:0 !important;
	font-size:14px !important; font-weight:600 !important; color:var(--mc-muted) !important;
}
.elementor-menu-cart__subtotal strong { font-weight:600 !important; color:var(--mc-muted); }
.elementor-menu-cart__subtotal .woocommerce-Price-amount,
.elementor-menu-cart__subtotal .amount {
	font-size:26px !important; font-weight:800 !important; color:var(--mc-ink) !important;
	font-variant-numeric:tabular-nums;
}

/* ---- Botones del pie: apilados, "Finalizar compra" primario naranja ---- */
.elementor-menu-cart__footer-buttons {
	display:flex !important; flex-direction:column; gap:10px;
	margin-top:14px !important; grid-template-columns:none !important;
}
.elementor-menu-cart__footer-buttons .elementor-button {
	width:100%; border-radius:14px !important; font-family:var(--mc-font) !important;
	font-weight:800 !important; letter-spacing:.01em; border:0; box-shadow:none;
	display:flex; align-items:center; justify-content:center;
	transition:transform .2s, box-shadow .2s, background .18s;
}
/* Finalizar compra (primario) — mismo gradiente naranja que el botón PAGAR. */
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
	order:0; height:54px; font-size:16px;
	background:linear-gradient(135deg,var(--mc-orange),var(--mc-orange-2)) !important;
	color:#fff !important; box-shadow:0 8px 22px rgba(232,81,30,.30);
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
	transform:translateY(-2px); box-shadow:0 13px 30px rgba(232,81,30,.36);
}
/* Ver carrito (secundario) — contorno teal. */
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	order:1; height:48px; font-size:15px;
	background:#fff !important; color:var(--mc-teal-ink) !important;
	border:1.5px solid var(--mc-teal) !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
	background:var(--mc-surface-2) !important; transform:none; box-shadow:none;
}

/* Línea de confianza bajo los botones (CSS puro).
   order:2 → va DESPUÉS de "Finalizar compra" (0) y "Ver carrito" (1); si no,
   quedaría en medio (los pseudo-elementos flex nacen con order 0). */
.elementor-menu-cart__footer-buttons::after {
	content:"Pago cifrado y protegido";
	order:2;
	display:block; margin-top:4px; padding-left:20px;
	font-size:12px; font-weight:700; color:var(--mc-teal-ink); text-align:center;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7d72' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat left center/14px 14px;
	background-position:calc(50% - 82px) center;
}

/* ---- Carrito vacío ---- */
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
	color:var(--mc-muted) !important; font-size:15px !important; font-weight:600 !important;
	padding:8px 0 4px;
}

/* ---- Móvil ---- */
@media (max-width:480px){
	.elementor-menu-cart__main { width:100vw !important; padding:20px 18px 20px !important; }
}

@media (prefers-reduced-motion:reduce){
	.elementor-menu-cart__main * { transition:none !important; }
}