/**
 * Cart drawer redesign — design tokens + component styles.
 * Tokens sourced from Figma file v96S5hLuHGfpP4uZORFMPy, node 253:52 (CARRITO).
 * Namespaced as --cart-* to avoid colliding with Flatsome's own --fs-color-* tokens,
 * which are generated dynamically from the Customizer (see inc/functions/function-custom-css.php).
 */

/* Figma-specified fonts, scoped to the cart drawer only (#cart-popup) so the rest of
 * the site — still on the theme's default typography until the full refactor — is untouched. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;800&family=Lilita+One&display=swap');

#cart-popup {
	font-family: 'Baloo 2', sans-serif;
}

#cart-popup .cart-drawer-item__title a,
#cart-popup .cart-drawer-item__price,
#cart-popup .cart-drawer-cross-sells__info .product-title,
#cart-popup .cart-drawer-cross-sells__title {
	font-family: 'Lilita One', cursive;
}

:root {
	--cart-azul-textos: #2b56c0;
	--cart-salmon-principal: #fd4883;
	--cart-amarillo-principal: #fed319;
	--cart-borde-claro: #d5d4d4;
	--cart-iconos-destacados: #8c8f8d;
	--cart-celeste-principal: #44aaec;
	--cart-verde-oscuro: #0da36f;
	--cart-amarillo-naranja: #ffae00;
	--cart-rosa-trazos: #fdd3e0;
	--cart-radio-bordes: 25px;
}

/* Drawer sizing: slides in from the right, stays open (static) until closed.
 * Width is primarily set via the `cart_drawer_width` Customizer theme_mod (480px),
 * reinforced here; full-screen takeover on mobile per design direction. */
.off-canvas-right .mfp-content {
	--drawer-width: 480px;
	max-width: 90vw;
}

@media (max-width: 600px) {
	.off-canvas-right .mfp-content {
		--drawer-width: 100vw;
		max-width: 100vw;
	}
}

/* We render our own close button inside the drawer header; hide Magnific Popup's
 * auto-generated one (closeBtnInside: false puts it outside .mfp-content, overlapping ours). */
.off-canvas-right .mfp-close {
	display: none;
}

/* Flatsome's off-canvas overlay defaults to solid black (rgb(11,11,11) @ opacity 1),
 * set via inline style during Magnific Popup's fade-in — needs !important to win.
 * Dim the page instead of hiding it completely, like a standard modal backdrop. */
.mfp-bg.off-canvas-right {
	opacity: 0.5 !important;
}

/* Flatsome's own .mfp-content background is semi-transparent white (rgba(255,255,255,0.95))
 * by default — that's a second, separate transparency from the .mfp-bg overlay above, and it
 * makes the DRAWER ITSELF show a hint of the page through it. Only the .mfp-bg (the area behind
 * the drawer) should be see-through; the drawer surface itself must be fully opaque. */
.off-canvas-right .mfp-content {
	background-color: #ffffff !important;
}

/* Drawer header */
#cart-popup .cart-drawer-redesign {
	position: relative;
}

.cart-drawer-close {
	position: absolute;
	top: 0;
	right: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--cart-iconos-destacados);
}

.cart-popup-title .cart-drawer-title-logo {
	max-width: 220px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}

.cart-drawer-subtitle {
	color: var(--cart-azul-textos);
	font-size: 16px;
	margin-top: 4px;
}

/* Cart items */
li.woocommerce-mini-cart-item.cart-drawer-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 14px;
	padding-bottom: 18px;
	margin-bottom: 12px;
	list-style: none;
	overflow: visible !important;
	height: auto !important;
	max-height: none !important;
}

/* WooCommerce/Flatsome's default product thumbnail is position:absolute (for aspect-ratio
 * cropping in other contexts), which pulls it out of flow here and overlaps the title.
 * Pin it back into normal flex flow as a fixed-size sibling. */
.cart-drawer-item__media {
	position: relative;
	width: 70px;
	height: 70px;
	flex: 0 0 70px;
}

.cart-drawer-item__media img {
	position: static !important;
	width: 70px !important;
	height: 70px !important;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid var(--cart-borde-claro);
}

.cart-drawer-item__body {
	flex: 1;
	min-width: 0;
	/* Column flex instead of float:right on the remove link below — floats
	   inside this flex item weren't being contained by the parent's height,
	   letting the "Quitar" pill escape past this card's bottom edge and sit
	   on top of the next item. align-self on the link handles the same
	   right-alignment without that failure mode. */
	display: flex;
	flex-direction: column;
}

.cart-drawer-item__heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}

.cart-drawer-item__title {
	font-family: inherit;
	color: var(--cart-salmon-principal);
}

.cart-drawer-item__title a {
	color: var(--cart-salmon-principal);
	font-weight: 700;
	font-size: 20px;
}

.cart-drawer-item__collection {
	display: block;
	color: var(--cart-salmon-principal);
	font-size: 15px;
	font-weight: 400;
}

/* Flatsome forces every non-.remove link in a cart-list item to
   display:block (ul.product_list_widget li a:not(.remove)) — meant for
   the product title, but it also catches these category links, stacking
   them and stranding the ", " separator text on its own line. */
.cart-drawer-item__collection a {
	display: inline !important;
	font-size: 15px;
	font-weight: 400;
}

.cart-drawer-item__body .variation {
	font-size: 17px;
	color: var(--cart-azul-textos);
	margin: 2px 0 8px;
}

.cart-drawer-item__body .variation dt,
.cart-drawer-item__body .variation dd {
	display: inline;
	margin: 0;
	padding: 0;
}

.cart-drawer-item__body .variation dd p {
	display: inline;
	margin: 0;
}

.cart-drawer-item__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}

.cart-drawer-item__qty {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 2px solid #dedede;
	border-radius: 3px;
	padding: 4px 8px;
}

.cart-drawer-item__qty .qty {
	width: 30px;
	border: none;
	text-align: center;
	color: var(--cart-azul-textos);
}

.cart-drawer-item__qty .ux-quantity__button {
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--cart-azul-textos);
	width: 16px;
}

.cart-drawer-item__price {
	color: var(--cart-salmon-principal);
	font-weight: 700;
	font-size: 20px;
	padding-right: 30px;
}

.cart-drawer-item__price .woocommerce-Price-amount {
	color: var(--cart-salmon-principal) !important;
}

/* Figma shows a plain pink heart outline, not Flatsome's default gray circle-button look. */
.cart-drawer-item__wishlist .wishlist-button,
.cart-drawer-cross-sells__actions .wishlist-button {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
	color: var(--cart-salmon-principal) !important;
	padding: 0 !important;
}

.cart-drawer-item__wishlist .wishlist-button svg,
.cart-drawer-cross-sells__actions .wishlist-button svg {
	width: 22px;
	height: 22px;
	stroke: var(--cart-salmon-principal);
}

a.remove_from_cart_button.cart-drawer-item__remove {
	/* WooCommerce's stock .remove_from_cart_button is position:absolute
	   (top/right pinned) — that silently wins over both float and align-self,
	   which is why neither approach visibly moved this element until this
	   was found and overridden. */
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: auto !important;
	height: auto !important;
	line-height: normal !important;
	align-self: flex-end;
	margin-top: 12px;
	margin-bottom: 4px;
	color: var(--cart-iconos-destacados) !important;
	font-size: 16px;
	text-decoration: none;
	border: none !important;
}

.cart-drawer-item__remove-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cart-iconos-destacados);
	flex-shrink: 0;
}

/* Flatsome's "ul.product_list_widget li img" rule (meant for the 60x60
   product thumbnail) matches any <img> inside each <li>, including this
   one — it wins on specificity and also sets position:absolute, so both
   need overriding here, not just the size. */
.cart-drawer-item__remove-icon img {
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: 12px !important;
	height: 12px !important;
	object-fit: none !important;
	margin: 0 !important;
}

/* Footer / subtotal / CTAs */
.cart-drawer-footer {
	background: #d9f5f4 !important;
	border-radius: var(--cart-radio-bordes);
	padding: 10px 10px 30px !important;
	margin: 16px 0 !important;
	width: auto !important;
	box-sizing: border-box;
}

.cart-drawer-footer .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	color: var(--cart-azul-textos);
	font-size: 20px;
	border-bottom: none !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* WooCommerce wraps the price in .woocommerce-Price-amount with its own (dark) color,
 * which otherwise overrides the blue set on the parent line above. */
.cart-drawer-footer .woocommerce-mini-cart__total .woocommerce-Price-amount {
	color: var(--cart-salmon-principal) !important;
	font-family: 'Lilita One', cursive;
}

.cart-drawer-footer__shipping-note {
	color: var(--cart-iconos-destacados);
	font-size: 15px;
	margin: 0 0 12px;
}

.cart-drawer-footer .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* WooCommerce renders "View cart" before "Checkout" (hook priorities 10/20) — Figma wants
 * checkout (COMPRAR AHORA) on top. Reorder visually rather than touching the action hooks,
 * so any other plugin hooked into woocommerce_widget_shopping_cart_buttons is unaffected. */
.cart-drawer-footer .woocommerce-mini-cart__buttons a.checkout {
	order: -1;
}

.cart-drawer-footer .woocommerce-mini-cart__buttons a.button {
	border-radius: var(--cart-radio-bordes);
	text-align: center;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 18px;
	padding: 14px;
}

.cart-drawer-footer .woocommerce-mini-cart__buttons a.checkout {
	background: var(--cart-salmon-principal);
	color: #fff;
	position: relative;
	z-index: 0;
}

/* The exported "estrellas" asset is a single wide decoration (star—dotted line—star),
 * not a standalone icon — place it once, behind the button label, spanning most of the width. */
.cart-drawer-footer .woocommerce-mini-cart__buttons a.checkout {
	overflow: hidden;
}

.cart-drawer-footer .woocommerce-mini-cart__buttons a.checkout::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: 55%;
	background: url('../images/cart/menibolsa-estrellas.svg') no-repeat center / contain;
	z-index: -1;
	pointer-events: none;
}

.cart-drawer-footer .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
	background: transparent;
	border: 2px solid var(--cart-azul-textos);
	color: var(--cart-azul-textos);
}

/* Cross-sells ("Completa tu look") */
.cart-drawer-cross-sells__title {
	color: var(--cart-salmon-principal);
	font-weight: 700;
	margin: 16px 0 10px;
}

.cart-drawer-cross-sells .ux-mini-cart-cross-sells__list {
	display: flex;
	gap: 10px;
	list-style: none;
	padding: 0;
}

.cart-drawer-cross-sells .ux-mini-cart-cross-sells__list-item {
	flex: 1;
	border: 2px solid var(--cart-borde-claro);
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	text-align: center;
	padding-bottom: 8px;
}

.cart-drawer-cross-sells__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.cart-drawer-cross-sells__info .product-title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-top: 6px;
}

.cart-drawer-cross-sells__info .price-wrapper {
	font-size: 13px;
	color: var(--cart-salmon-principal);
}

.cart-drawer-cross-sells__actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}