/**
 * Restyles the Elementor "Menu Cart" side-panel to match the Hyperion
 * mockup. Elementor Pro renders its own markup for this widget - it does
 * not use WooCommerce's standard mini-cart template or its hooks, so every
 * selector here targets the widget's own elementor-menu-cart__* classes
 * (confirmed against the live rendered fragment), not the generic
 * woocommerce-mini-cart ones.
 */

/* The cart panel is fixed but trapped inside the header, which sits in a
   low (z-index: 2) stacking context created by Elementor's header
   containers - so later-in-DOM sections (the product area, the footer) paint
   on top of it no matter how high the panel's own z-index goes. Lifting the
   whole header above page content (but below the 99999 admin bar) frees the
   panel with it. */
.elementor-location-header {
	position: relative !important;
	z-index: 9999 !important;
}

/* Panel: slide in from the right, full height, plain white background.
   Selector carries the widget class so it matches Elementor's own
   .elementor-menu-cart--cart-type-side-cart .elementor-menu-cart__container
   rule on specificity - without it, Elementor's width wins and the panel
   collapses to its content width (0), leaving a gap on the right. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__container {
	background: #fff !important;
	width: 400px !important;
	max-width: 100vw !important;
	height: 100vh !important;
	right: 0 !important;
	left: auto !important;
	top: 0 !important;
	/* Above every product-page element (some, like the add-to-cart button and
	   the footer, otherwise punch through the panel on their own stacking
	   context). */
	z-index: 2000000 !important;
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18) !important;
}

/* The header holds two Menu Cart widgets; only the one that is currently
   open carries the elementor-menu-cart--shown class. Keep the other one's
   panel fully hidden so the two don't stack into a visible double layer. */
.elementor-widget-woocommerce-menu-cart:not( .elementor-menu-cart--shown ) .elementor-menu-cart__container {
	display: none !important;
}

/* Pin the open panel flush to the right edge at its full width - Elementor's
   own slide-in transform could leave it offset, showing a gap on the right. */
.elementor-menu-cart--shown .elementor-menu-cart__container {
	transform: none !important;
	right: 0 !important;
	left: auto !important;
	margin: 0 !important;
}

/* Widget-class prefix so this beats Elementor's own __main width rule -
   without it the container is full width but __main stays narrow, leaving
   the same gap on the right. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	padding: 20px !important;
	box-sizing: border-box !important;
}

/* Elementor fades the panel content in by transitioning __main's opacity
   from 0 - but only the open widget should be visible, so scope the forced
   opacity to the shown widget (forcing it on all of them was making the
   second, closed widget's content show through as a doubled layer). */
.elementor-menu-cart--shown .elementor-menu-cart__main {
	opacity: 1 !important;
}

/* Close button: pin to the panel's top-right so it sits on the same row as
   the "YOUR CART" header instead of stacking below it. It stays a
   positioning context (absolute) so Elementor's ::before/::after X, drawn at
   width:100%, resolves against this 20px box rather than a huge ancestor. */
.elementor-menu-cart__close-button {
	position: absolute !important;
	top: 22px !important;
	right: 20px !important;
	z-index: 1 !important;
	width: 20px !important;
	height: 20px !important;
	font-size: 16px !important;
	line-height: 20px !important;
	overflow: hidden !important;
	color: #6b6a66 !important;
	cursor: pointer;
}

/* Header we insert via JS (Elementor's own markup has no title of its own). */
.zvd-cart-header {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	color: #16181d !important;
	padding: 0 28px 16px 0 !important;
	margin-bottom: 16px !important;
	border-bottom: 1px solid #e1ded7 !important;
}

/* Cart items: a flex column so the trailing shipping-note/buttons/continue
   group (margin-top: auto, below) can be pinned to the bottom of the panel
   instead of sitting right under the subtotal. */
.widget_shopping_cart_content {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	overflow-y: auto !important;
}

.elementor-menu-cart__products {
	margin: 0 !important;
	padding: 0 !important;
}

.elementor-menu-cart__product {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 4px 12px !important;
	padding: 16px 28px 16px 0 !important;
	border-bottom: 1px solid #e1ded7 !important;
}

.elementor-menu-cart__product-image {
	flex: 0 0 64px !important;
	width: 64px !important;
	max-width: 64px !important;
}

.elementor-menu-cart__product-image img {
	display: block !important;
	width: 64px !important;
	height: 64px !important;
	max-width: 64px !important;
	object-fit: cover !important;
}

.elementor-menu-cart__product-name {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.elementor-menu-cart__product-name a {
	display: block !important;
	color: #16181d !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

/* Variation "Size: X" line injected via the mini-cart name filter. */
.zvd-cart-variation {
	display: block !important;
	margin-top: 2px !important;
	color: #6b6a66 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

/* The default WooCommerce variation meta (dl.variation) would duplicate the
   size we now render ourselves, so hide it inside the panel. */
.elementor-menu-cart__product-name dl.variation {
	display: none !important;
}

/* Widget-class prefix so the flex row beats Elementor's own product-price
   display rule - without it the stepper and the price stack vertically
   (price ends up below the stepper instead of beside it). */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price {
	flex: 0 0 100% !important;
	/* padding, not margin: with border-box this keeps the row's total width
	   at 100% so it can't overflow the panel and shove the price off-screen. */
	margin-left: 0 !important;
	padding-left: 76px !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	color: #16181d !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

/* The line-price span collapses to width:0 as a flex item under Elementor's
   own rules - force it to take its content width so it shows beside the
   stepper instead of disappearing. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price .quantity {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: max-content !important;
	display: inline-flex !important;
	align-items: center !important;
	white-space: nowrap !important;
}

.elementor-menu-cart__product-price .woocommerce-Price-amount {
	color: #16181d !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}

/* Quantity stepper injected into each cart line (JS). */
.zvd-cart-qty {
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid var(--border, #e1ded7) !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	flex: 0 0 auto !important;
}

.zvd-cart-qty button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #16181d !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

.zvd-cart-qty button:hover {
	background: #eceae5 !important;
	color: var(--gold-deep, #8a6f38) !important;
}

.zvd-cart-qty .zvd-qty-val {
	min-width: 28px !important;
	text-align: center !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #16181d !important;
}

/* Two remove links render for each item (an AJAX-enhanced one Elementor
   swaps in via JS, and a plain fallback) - force both to the same small,
   contained size regardless of any inherited font-size, since an unstyled
   one was rendering the bare "x" character at a huge inherited size. */
.elementor-menu-cart__product-remove {
	position: absolute !important;
	top: 16px !important;
	right: 0 !important;
	width: 20px !important;
	height: 20px !important;
}

.elementor-menu-cart__product-remove a {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 20px !important;
	height: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #6b6a66 !important;
	background: transparent !important;
	border-radius: 999px !important;
	font-size: 16px !important;
	line-height: 1 !important;
	text-decoration: none !important;
}

.elementor-menu-cart__product-remove a:hover {
	color: #16181d !important;
	background: #eceae5 !important;
}

/* Subtotal. margin-top: auto consumes the flexible space in the
   .widget_shopping_cart_content column, pinning the subtotal and everything
   after it (shipping note, buttons, continue link) to the bottom of the
   panel - matching the mockup, where the items sit at the top and this whole
   group sits at the bottom. */
.elementor-menu-cart__subtotal {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin: auto 0 0 !important;
	padding-top: 16px !important;
	border-top: 1px solid #e1ded7 !important;
	font-size: 15px !important;
}

.elementor-menu-cart__subtotal strong {
	font-weight: 700 !important;
	color: #16181d !important;
}

.elementor-menu-cart__subtotal .woocommerce-Price-amount {
	color: #16181d !important;
	font-weight: 700 !important;
}

/* Shipping note, inserted via JS between the subtotal and the buttons. */
.zvd-cart-shipping-note {
	margin: 6px 0 0 !important;
	font-size: 12px !important;
	color: #6b6a66 !important;
}

/* Buttons */
.elementor-menu-cart__footer-buttons {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin-top: 16px !important;
}

.elementor-menu-cart__footer-buttons .elementor-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 48px !important;
	box-sizing: border-box !important;
	border-radius: 0 !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout {
	background: linear-gradient( 135deg, #c9a86a 0%, #b99a5b 100% ) !important;
	color: #16181d !important;
	border: 0 !important;
}

.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	display: none !important;
}

/* "Continue Shopping" link, inserted via JS right after the buttons. */
.zvd-cart-continue {
	display: block !important;
	text-align: center !important;
	margin-top: 12px !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: #6b6a66 !important;
	text-decoration: none !important;
}

.zvd-cart-continue:hover {
	color: #16181d !important;
}

/* While the cart panel is open, hide the product page's own sticky
   add-to-cart bar so it doesn't sit on top of / compete with the panel. */
body:has( .elementor-menu-cart--shown ) .zivaldi-product aside[aria-label='Add to cart'] {
	display: none !important;
}