/**
 * Browsome — Mini-cart UI skin (UI Kit / DESIGN_SYSTEM.md).
 *
 * Scope: only the two mini-cart drawers.
 *   #shoptimizerCartDrawer      — Shoptimizer drawer (the visible one)
 *   .elementor-menu-cart__main  — Elementor Pro side-cart panel
 * Markup comes from Elementor Pro's cart/mini-cart.php override, so nothing here
 * changes structure: we set Elementor's own CSS variables where possible and only
 * add scoped cosmetic rules elsewhere.
 *
 * Rollback: delete this file (skin only) or run live/scripts/rollback-mini-cart-ui.ps1.
 * Sections are independent — you can delete a single numbered block safely.
 */

/* ------------------------------------------------------------------ *
 * 1. Brand tokens (fall back to hex if theme :root vars are missing)
 * ------------------------------------------------------------------ */

#shoptimizerCartDrawer,
.elementor-menu-cart__main {
	--bcp-ink: var(--Ink, #1a1b2e);
	--bcp-ink-2: var(--ink-2, #3b3d56);
	--bcp-muted: var(--muted, #777a96);
	--bcp-line: var(--line, #e3e2ec);
	--bcp-white: var(--white, #ffffff);
	--bcp-peri-tint: var(--peri-tint, #ecedfb);
	--bcp-peri: var(--Periwinkle, #7e84e8);
	--bcp-peri-mid: var(--peri-mid, #5d63d4);
	--bcp-peri-deep: var(--peri-deep, #3f44b5);
	--bcp-peri-ink: var(--peri-ink, #1f2270);
	--bcp-lime: var(--orig, #c7e03d);
	--bcp-product-bg: var(--product-bg, #f8f8f8);
	--bcp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bcp-radius: 14px;
	--bcp-radius-sm: 10px;
	--bcp-gutter: 20px;
	--bcp-footer-pad: 36px;
	/* Vertical space for close button + subtotal + CTAs + order bump guard. */
	--bcp-chrome: 200px;
}

.elementor-menu-cart__main {
	--bcp-chrome: 246px;
	--cart-padding: 16px var(--bcp-gutter) 0;
	--cart-close-icon-size: 25px;
}

/* ------------------------------------------------------------------ *
 * 2. Elementor widget variables — the safe styling API
 * ------------------------------------------------------------------ */

#shoptimizerCartDrawer,
.elementor-menu-cart__main {
	--divider-color: var(--bcp-line);
	--divider-style: solid;
	--divider-width: 1px;
	--product-divider-gap: 18px;
	--product-price-color: var(--bcp-ink);
	--product-variations-color: var(--bcp-muted);
	--menu-cart-subtotal-color: var(--bcp-ink);
	/* Subtotal is a filled lime card now, so drop the kit's hairlines. */
	--subtotal-divider-top-width: 0;
	--subtotal-divider-bottom-width: 0;
	--remove-item-button-color: var(--bcp-line);
	--remove-item-button-hover-color: var(--bcp-peri-deep);
	--remove-item-button-size: 24px;
	--cart-close-button-color: var(--bcp-ink);
	--cart-close-button-hover-color: var(--bcp-peri-deep);
	--cart-footer-buttons-border-radius: 100px;
	--checkout-button-background-color: var(--bcp-peri-deep);
	--checkout-button-text-color: #ffffff;
	--checkout-button-hover-background-color: var(--bcp-peri-mid);
	--checkout-button-hover-text-color: #ffffff;
	--view-cart-button-background-color: var(--bcp-white);
	--view-cart-button-text-color: var(--bcp-ink);
	--view-cart-button-hover-background-color: var(--bcp-white);
	--view-cart-button-hover-text-color: var(--bcp-peri-deep);
	--empty-message-color: var(--bcp-muted);
	--space-between-buttons: 10px;
}

/* ------------------------------------------------------------------ *
 * 3. Drawer header — titleless chrome (matches SL/HR Elementor side-cart)
 *    EN historically opened the Shoptimizer drawer ("Your Cart" + hairline);
 *    SL/HR use Elementor's panel (close X only). Unify both paths here.
 * ------------------------------------------------------------------ */

#shoptimizerCartDrawer {
	background-color: var(--bcp-white);
	font-family: var(--bcp-font);
	color: var(--bcp-ink);
	box-shadow: -8px 0 32px rgb(26 27 46 / 0.1);
}

/* Keep text for screen readers; drawer already has aria-label. */
#shoptimizerCartDrawer .cart-drawer-heading {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Drop the theme's 50px title band + our hairline — content starts under the X. */
#shoptimizerCartDrawer .widget_shopping_cart {
	margin-top: 0;
	height: 100%;
	padding: 48px var(--bcp-gutter) 0;
	box-shadow: none;
	box-sizing: border-box;
}

/* Shoptimizer close — same footprint as Elementor's __close-button. */
#shoptimizerCartDrawer .close-drawer {
	display: block;
	position: absolute;
	top: 16px;
	right: var(--bcp-gutter);
	z-index: 20;
	width: 25px;
	height: 25px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--bcp-ink);
	cursor: pointer;
	transition: color 0.3s;
}

#shoptimizerCartDrawer .close-drawer span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	pointer-events: none;
}

#shoptimizerCartDrawer .close-drawer svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
}

#shoptimizerCartDrawer .close-drawer:hover,
#shoptimizerCartDrawer .close-drawer:focus-visible {
	background: transparent;
	color: var(--bcp-peri-deep);
}

/* Elementor side-cart panel — tighten close button, match gutters. */
.elementor-menu-cart__main {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100vh;
	padding: var(--cart-padding, 16px var(--bcp-gutter) 0);
	box-sizing: border-box;
}

.elementor-menu-cart__main .elementor-menu-cart__close-button {
	align-self: flex-end;
	flex-shrink: 0;
	width: var(--cart-close-icon-size, 25px);
	height: var(--cart-close-icon-size, 25px);
	margin: 0 0 8px;
}

#shoptimizerCartDrawer .shoptimizer-loader .spinner > div {
	background-color: var(--bcp-peri-deep);
}

/* ------------------------------------------------------------------ *
 * 4. Layout — scrollable item list, subtotal + buttons pinned to bottom
 * ------------------------------------------------------------------ */

#shoptimizerCartDrawer .widget_shopping_cart_content {
	height: 100%;
}

/**
 * Elementor's own rule is `.elementor-menu-cart__main .widget_shopping_cart_content
 * { height: 100% }`, but __main is a flex column whose first child is the close
 * button — so 100% of the panel plus the close button overflows the viewport and
 * pushes the CTA row below the fold. Let the content take the *remaining* space.
 */
.elementor-menu-cart__container .elementor-menu-cart__main .widget_shopping_cart_content {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
}

#shoptimizerCartDrawer .elementor-menu-cart__products,
.elementor-menu-cart__main .elementor-menu-cart__products {
	flex: 1 1 auto;
	min-height: 0;
	/* Safety net if the flex chain is ever broken by another plugin. */
	max-height: calc(100vh - var(--bcp-chrome));
	/* Breathing room below the close button before banner / first item. */
	padding-top: 12px;
	padding-right: 2px;
}

#shoptimizerCartDrawer .elementor-menu-cart__subtotal,
.elementor-menu-cart__main .elementor-menu-cart__subtotal,
#shoptimizerCartDrawer .elementor-menu-cart__footer-buttons,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
	flex: 0 0 auto;
}

#shoptimizerCartDrawer .elementor-menu-cart__footer-buttons,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
	background-color: var(--bcp-white);
}

/* ------------------------------------------------------------------ *
 * 5. Cart line items
 * ------------------------------------------------------------------ */

#shoptimizerCartDrawer .elementor-menu-cart__product,
.elementor-menu-cart__main .elementor-menu-cart__product {
	align-items: center;
}

#shoptimizerCartDrawer .elementor-menu-cart__product-image img,
.elementor-menu-cart__main .elementor-menu-cart__product-image img {
	width: 100%;
	height: auto;
	border-radius: var(--bcp-radius-sm);
	background-color: var(--bcp-product-bg);
}

#shoptimizerCartDrawer .elementor-menu-cart__product-name,
.elementor-menu-cart__main .elementor-menu-cart__product-name,
#shoptimizerCartDrawer .elementor-menu-cart__product-price,
.elementor-menu-cart__main .elementor-menu-cart__product-price {
	padding-inline-start: 16px;
}

#shoptimizerCartDrawer .elementor-menu-cart__product-name a,
.elementor-menu-cart__main .elementor-menu-cart__product-name a {
	color: var(--bcp-ink);
	font-family: var(--bcp-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}

#shoptimizerCartDrawer .elementor-menu-cart__product-name a:hover,
.elementor-menu-cart__main .elementor-menu-cart__product-name a:hover {
	color: var(--bcp-peri-deep);
}

#shoptimizerCartDrawer .elementor-menu-cart__product .variation,
.elementor-menu-cart__main .elementor-menu-cart__product .variation {
	margin: 4px 0 0;
	color: var(--bcp-muted);
	font-size: 12px;
	line-height: 18px;
}

#shoptimizerCartDrawer .elementor-menu-cart__product-price,
.elementor-menu-cart__main .elementor-menu-cart__product-price {
	color: var(--bcp-ink);
	font-family: var(--bcp-font);
	font-size: 14px;
	font-weight: 500;
}

#shoptimizerCartDrawer .elementor-menu-cart__product-price .product-quantity,
.elementor-menu-cart__main .elementor-menu-cart__product-price .product-quantity {
	color: var(--bcp-muted);
	font-weight: 400;
}

/* Remove button: centred against the row, circular, brand hover. */
#shoptimizerCartDrawer .elementor-menu-cart__product-remove,
.elementor-menu-cart__main .elementor-menu-cart__product-remove {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	border-radius: 50%;
	transition: background-color 0.3s, border-color 0.3s;
}

#shoptimizerCartDrawer .elementor-menu-cart__product-remove:hover,
.elementor-menu-cart__main .elementor-menu-cart__product-remove:hover {
	background-color: var(--bcp-peri-tint);
}

/* ------------------------------------------------------------------ *
 * 6. Prices — align to UI Kit Ink instead of legacy tan (#baa48b)
 *    Delete this block to restore the previous price colour.
 * ------------------------------------------------------------------ */

#shoptimizerCartDrawer .widget_shopping_cart .elementor-menu-cart__product-price .amount,
.elementor-menu-cart__main .elementor-menu-cart__product-price .amount {
	color: var(--bcp-ink);
	font-size: 15px;
	font-weight: 600;
}

/* Ink (not peri-ink) per UI Kit guidance for text on the lime fill. */
#shoptimizerCartDrawer .widget_shopping_cart .elementor-menu-cart__subtotal .amount,
.elementor-menu-cart__main .elementor-menu-cart__subtotal .amount {
	color: var(--bcp-ink);
	font-size: 19px;
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * 7. Subtotal — filled Chartreuse card so the price reads at a glance
 * ------------------------------------------------------------------ */

#shoptimizerCartDrawer .elementor-menu-cart__subtotal,
.elementor-menu-cart__main .elementor-menu-cart__subtotal {
	margin-top: 14px;
	padding: 15px 16px;
	border-radius: 12px;
	background-color: var(--bcp-lime);
	color: var(--bcp-ink);
	font-family: var(--bcp-font);
	font-size: 15px;
	line-height: 24px;
}

#shoptimizerCartDrawer .elementor-menu-cart__subtotal strong,
.elementor-menu-cart__main .elementor-menu-cart__subtotal strong {
	color: var(--bcp-ink);
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * 8. Footer CTAs — pill buttons per UI Kit (kept side by side)
 * ------------------------------------------------------------------ */

#shoptimizerCartDrawer .elementor-menu-cart__footer-buttons,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: var(--bcp-footer-pad);
}

#shoptimizerCartDrawer .elementor-menu-cart__footer-buttons .elementor-button,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 140px;
	min-height: 54px;
	height: auto;
	padding: 12px 20px;
	border-radius: 100px;
	font-family: var(--bcp-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

#shoptimizerCartDrawer .elementor-menu-cart__footer-buttons .elementor-button--view-cart,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	background-color: var(--bcp-white);
	border: 1px solid var(--bcp-line);
	color: var(--bcp-ink);
}

#shoptimizerCartDrawer .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
	border-color: var(--bcp-peri-deep);
	color: var(--bcp-peri-deep);
	box-shadow: 0 6px 24px rgb(26 27 46 / 0.08);
}

#shoptimizerCartDrawer .elementor-menu-cart__footer-buttons .elementor-button--checkout,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--checkout {
	background-color: var(--bcp-peri-deep);
	border: 1px solid var(--bcp-peri-deep);
	color: #ffffff;
}

#shoptimizerCartDrawer .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover,
.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
	background-color: var(--bcp-peri-mid);
	border-color: var(--bcp-peri-mid);
	color: #ffffff;
	box-shadow: 0 6px 24px rgb(63 68 181 / 0.24);
}

/* ------------------------------------------------------------------ *
 * 9. CommerceKit order bump ("Before you go")
 * ------------------------------------------------------------------ */

/* The last cart row ends with a divider, so lift the bump off that line. */
#shoptimizerCartDrawer .commercekit-order-bump-wrap,
.elementor-menu-cart__main .commercekit-order-bump-wrap {
	padding-top: 20px;
}

#shoptimizerCartDrawer .ckobp-before-you-go,
.elementor-menu-cart__main .ckobp-before-you-go {
	margin-bottom: 8px;
	color: var(--bcp-peri-deep);
	font-family: var(--bcp-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#shoptimizerCartDrawer .commercekit-order-bump,
.elementor-menu-cart__main .commercekit-order-bump {
	margin: 0;
	padding: 14px;
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-radius);
	background-color: var(--bcp-white);
	box-shadow: none;
}

#shoptimizerCartDrawer .commercekit-order-bump .ckobp-title,
.elementor-menu-cart__main .commercekit-order-bump .ckobp-title {
	padding-bottom: 10px;
	color: var(--bcp-ink);
	font-family: var(--bcp-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}

#shoptimizerCartDrawer .commercekit-order-bump .ckobp-image img,
.elementor-menu-cart__main .commercekit-order-bump .ckobp-image img {
	border-radius: 8px;
	background-color: var(--bcp-product-bg);
}

#shoptimizerCartDrawer .commercekit-order-bump .ckobp-name a,
.elementor-menu-cart__main .commercekit-order-bump .ckobp-name a {
	color: var(--bcp-ink);
	font-family: var(--bcp-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	text-decoration: none;
}

#shoptimizerCartDrawer .commercekit-order-bump .ckobp-name a:hover,
.elementor-menu-cart__main .commercekit-order-bump .ckobp-name a:hover {
	color: var(--bcp-peri-deep);
}

#shoptimizerCartDrawer .commercekit-order-bump .ckobp-price,
.elementor-menu-cart__main .commercekit-order-bump .ckobp-price {
	color: var(--bcp-ink);
	font-family: var(--bcp-font);
	font-size: 13px;
	font-weight: 600;
}

#shoptimizerCartDrawer .commercekit-order-bump .ckobp-button button,
.elementor-menu-cart__main .commercekit-order-bump .ckobp-button button {
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid var(--bcp-line);
	border-radius: 100px;
	background-color: var(--bcp-white);
	color: var(--bcp-ink);
	font-family: var(--bcp-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	cursor: pointer;
	transition: border-color 0.3s, color 0.3s, box-shadow 0.3s;
}

#shoptimizerCartDrawer .commercekit-order-bump .ckobp-button button:hover,
.elementor-menu-cart__main .commercekit-order-bump .ckobp-button button:hover {
	border-color: var(--bcp-peri-deep);
	color: var(--bcp-peri-deep);
	box-shadow: 0 6px 24px rgb(26 27 46 / 0.08);
}

#shoptimizerCartDrawer .commercekit-order-bumps-wrap .ckobp-nav,
.elementor-menu-cart__main .commercekit-order-bumps-wrap .ckobp-nav {
	margin: 8px 0 12px;
}

#shoptimizerCartDrawer .commercekit-order-bumps-wrap .ckobp-prev,
#shoptimizerCartDrawer .commercekit-order-bumps-wrap .ckobp-next,
.elementor-menu-cart__main .commercekit-order-bumps-wrap .ckobp-prev,
.elementor-menu-cart__main .commercekit-order-bumps-wrap .ckobp-next {
	color: var(--bcp-ink-2);
	transition: color 0.3s;
}

#shoptimizerCartDrawer .commercekit-order-bumps-wrap .ckobp-prev:hover,
#shoptimizerCartDrawer .commercekit-order-bumps-wrap .ckobp-next:hover,
.elementor-menu-cart__main .commercekit-order-bumps-wrap .ckobp-prev:hover,
.elementor-menu-cart__main .commercekit-order-bumps-wrap .ckobp-next:hover {
	color: var(--bcp-peri-deep);
}

#shoptimizerCartDrawer .ckobp-bullets .ckobp-bullet,
.elementor-menu-cart__main .ckobp-bullets .ckobp-bullet {
	background-color: var(--bcp-line);
	transition: background-color 0.3s;
}

#shoptimizerCartDrawer .ckobp-bullets .ckobp-bullet.active,
.elementor-menu-cart__main .ckobp-bullets .ckobp-bullet.active {
	background-color: var(--bcp-peri-deep);
}

/* ------------------------------------------------------------------ *
 * 10. Empty state + scrollbar
 * ------------------------------------------------------------------ */

#shoptimizerCartDrawer .woocommerce-mini-cart__empty-message,
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
	padding: 32px 0;
	color: var(--bcp-muted);
	font-family: var(--bcp-font);
	font-size: 14px;
	line-height: 22px;
	text-align: center;
}

#shoptimizerCartDrawer .elementor-menu-cart__products,
.elementor-menu-cart__main .elementor-menu-cart__products {
	scrollbar-width: thin;
	scrollbar-color: var(--bcp-line) transparent;
}

#shoptimizerCartDrawer .elementor-menu-cart__products::-webkit-scrollbar,
.elementor-menu-cart__main .elementor-menu-cart__products::-webkit-scrollbar {
	width: 6px;
}

#shoptimizerCartDrawer .elementor-menu-cart__products::-webkit-scrollbar-thumb,
.elementor-menu-cart__main .elementor-menu-cart__products::-webkit-scrollbar-thumb {
	border-radius: 100px;
	background-color: var(--bcp-line);
}

/* ------------------------------------------------------------------ *
 * 11. Focus ring — Periwinkle instead of browser default
 * ------------------------------------------------------------------ */

#shoptimizerCartDrawer a:focus-visible,
#shoptimizerCartDrawer button:focus-visible,
.elementor-menu-cart__main a:focus-visible,
.elementor-menu-cart__main button:focus-visible {
	outline: 2px solid var(--bcp-peri);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 12. Mobile (drawer is full width below 481px)
 * ------------------------------------------------------------------ */

@media (max-width: 480px) {
	#shoptimizerCartDrawer,
	.elementor-menu-cart__main {
		--bcp-gutter: 16px;
		--bcp-footer-pad: 20px;
		--product-divider-gap: 14px;
		--bcp-chrome: 190px;
		--cart-padding: 14px var(--bcp-gutter) 0;
	}

	#shoptimizerCartDrawer .widget_shopping_cart {
		padding: 44px var(--bcp-gutter) 0;
	}

	#shoptimizerCartDrawer .close-drawer {
		top: 14px;
		right: var(--bcp-gutter);
	}

	#shoptimizerCartDrawer .elementor-menu-cart__products,
	.elementor-menu-cart__main .elementor-menu-cart__products {
		padding-top: 10px;
	}

	#shoptimizerCartDrawer .elementor-menu-cart__footer-buttons .elementor-button,
	.elementor-menu-cart__main .elementor-menu-cart__footer-buttons .elementor-button {
		min-height: 48px;
		font-size: 14px;
	}

	#shoptimizerCartDrawer .elementor-menu-cart__footer-buttons,
	.elementor-menu-cart__main .elementor-menu-cart__footer-buttons {
		padding-bottom: max(var(--bcp-footer-pad), env(safe-area-inset-bottom));
	}

	#shoptimizerCartDrawer .elementor-menu-cart__subtotal,
	.elementor-menu-cart__main .elementor-menu-cart__subtotal {
		padding: 14px;
		font-size: 14px;
	}

	#shoptimizerCartDrawer .commercekit-order-bump,
	.elementor-menu-cart__main .commercekit-order-bump {
		padding: 12px;
	}
}

/* ------------------------------------------------------------------ *
 * 13. Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	#shoptimizerCartDrawer *,
	.elementor-menu-cart__main * {
		transition-duration: 0.01ms !important;
	}
}