/* ============================================================
   Unified "Open Carts" header panel.
   The panel shell itself (#pxl-cart-sidebar, .pxl-widget-cart-sidebar,
   .widget_shopping_head/.widget_shopping_title) is the theme's existing,
   already-styled single-cart popup markup — kept as-is on purpose so its
   slide-in animation / sizing / .active show-hide CSS keeps working
   untouched. Only the 3-card body layout below is new.
   ============================================================ */

/**
 * Pre-existing bug in the theme's own compiled style.css (line ~18339):
 * the hidden state is `transform: translateX(100%)` (slide out to the
 * right) but the ".active" state that's supposed to slide it back in sets
 * `transform: translateY(0%)` instead — a different axis entirely, so it
 * never actually cancels the X-axis offset. The panel was rendering fully
 * off-screen on every click. This likely predates any of these Open Carts
 * changes — the site's real header uses Elementor Pro's Menu Cart, so this
 * single-cart popup markup was probably never previously exercised/tested.
 * Same specificity as the buggy rule (#pxl-cart-sidebar.active
 * .pxl-widget-cart-sidebar); wins because this stylesheet is enqueued
 * after style.css.
 */
#pxl-cart-sidebar.active .pxl-widget-cart-sidebar {
	transform: translateX(0);
}

/**
 * Narrower panel width override (theme default is 420px). Same specificity
 * as the theme's own rule; wins because this stylesheet is enqueued after
 * style.css.
 */
#pxl-cart-sidebar .pxl-widget-cart-sidebar {
	width: 370px;
}

/**
 * Second pre-existing conflict, this time from Additional CSS (Customizer,
 * not a file in this codebase): a site-wide `.widget_shopping_cart {
 * display: none; }` rule (added at some point to hide the classic
 * WooCommerce "Cart" widget elsewhere) collateral-damages this panel's own
 * `.widget_shopping_cart` content wrapper, since it's a bare class
 * selector with no ancestor scoping. Scoping ours under #pxl-cart-sidebar
 * gives it higher specificity (1 ID + 1 class beats 1 class), so it wins
 * regardless of the Additional CSS printing later in <head>.
 */
#pxl-cart-sidebar .widget_shopping_cart {
	display: block;
}

.pxl-open-carts-body {
	padding-right: 6px;
}

.pxl-open-cart-card {
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 18px;
	margin-bottom: 16px;
}
.pxl-open-cart-card:last-child {
	margin-bottom: 0;
}

.pxl-open-cart-card-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
}

.pxl-open-cart-card-preview {
	min-height: 40px;
	margin-bottom: 14px;
}

.pxl-open-cart-card-empty {
	color: #888;
	font-size: 13px;
	text-align: center;
	padding: 12px 0;
	list-style: none;
}

.pxl-open-cart-card-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pxl-open-cart-card-thumb {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border: 1px solid #ececec;
	border-radius: 4px;
}

.pxl-open-cart-card-total {
	margin: 12px 0 0;
	font-size: 14px;
}

.pxl-open-cart-card-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px 16px;
	border: 1px solid var(--primary-color, #274e13);
	border-radius: 4px;
	background: #fff;
	color: var(--primary-color, #274e13);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
}
.pxl-open-cart-card-btn:hover {
	background: var(--primary-color, #274e13);
	color: #fff;
}

/* ============================================================
   Elementor Pro's own "Menu Cart" widget is the header's actual live cart
   icon on this site (not the theme's icon_cart widget). Its own dropdown is
   permanently hidden here — open-carts.js repoints its toggle button at our
   unified panel instead (see that file's header comment for the full
   rationale: this avoids editing the Elementor header template's data).
   ============================================================ */
.elementor-menu-cart__container {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Combined count badge on the header trigger icon. */
.pxl-cart-sidebar-button {
	position: relative;
}
.pxl-open-carts-counter {
	display: none;
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	padding: 2px 5px;
	border-radius: 999px;
	background: var(--primary-color, #274e13);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	text-align: center;
}
.pxl-open-carts-counter.pxl-has-items {
	display: inline-block;
}