/* ==========================================================================
   Woo Slide Cart
   Everything is scoped to #wsc so theme and WooCommerce widget styles
   (which use long selectors like `.woocommerce ul.cart_list li img`)
   don't leak into the drawer.
   ========================================================================== */

#wsc {
	--wsc-accent: #3A2A25;
	--wsc-primary: #3A2A25;
	--wsc-primary-hover: #523D36;
	--wsc-ink: #141418;
	--wsc-muted: #5B5B66;
	--wsc-body: #4A4A55;
	--wsc-line: #EEEDE9;
	--wsc-field: #F4F3EF;
	--wsc-surface: #FFFFFF;
	--wsc-width: 460px;
	--wsc-pad: 28px;
	--wsc-radius: 24px;
	--wsc-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--wsc-font-display: var(--wsc-font);
	--wsc-ease: cubic-bezier(.2, .8, .2, 1);

	position: fixed;
	inset: 0;
	z-index: 999999;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear .38s;
	font-family: var(--wsc-font);
	font-size: 15px;
	line-height: 1.45;
	color: var(--wsc-ink);
	-webkit-font-smoothing: antialiased;
}

#wsc.is-open {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s;
}

html.wsc-lock {
	overflow: hidden;
}

#wsc *,
#wsc *::before,
#wsc *::after {
	box-sizing: border-box;
}

#wsc * {
	font-family: var(--wsc-font);
}

#wsc :focus-visible {
	outline: 2px solid var(--wsc-accent);
	outline-offset: 2px;
}

/* ---------- Backdrop ---------- */

#wsc .wsc__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(20, 20, 24, .42);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	box-shadow: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity .3s ease;
}

#wsc.is-open .wsc__scrim {
	opacity: 1;
}

/* ---------- Drawer ---------- */

#wsc .wsc__drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(var(--wsc-width), calc(100vw - 32px));
	display: flex;
	flex-direction: column;
	background: var(--wsc-surface);
	border-radius: var(--wsc-radius) 0 0 var(--wsc-radius);
	box-shadow: -24px 0 60px rgba(20, 20, 24, .18);
	overflow: hidden;
	transform: translateX(100%);
	transition: transform .38s var(--wsc-ease);
	outline: none;
}

#wsc.is-open .wsc__drawer {
	transform: translateX(0);
}

/* ---------- Header ---------- */

#wsc .wsc__header {
	flex-shrink: 0;
	height: 80px;
	padding: 0 16px 0 var(--wsc-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#wsc .wsc__heading {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

#wsc .wsc__title {
	margin: 0;
	padding: 0;
	font-family: var(--wsc-font-display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--wsc-ink);
	text-transform: none;
}

#wsc .wsc__count {
	font-size: 14px;
	color: var(--wsc-muted);
}

#wsc .wsc__close {
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wsc-field);
	color: var(--wsc-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

#wsc .wsc__close:hover {
	background: #E9E8E3;
}

/* ---------- Mini cart content (WooCommerce's own markup) ---------- */

#wsc .widget_shopping_cart_content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* ---------- Items ---------- */

#wsc ul.woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	margin: 0;
	padding: 0 var(--wsc-pad);
	border-top: 1px solid var(--wsc-line);
	border-bottom: 1px solid var(--wsc-line);
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
	position: relative;
	min-height: 148px;
	margin: 0;
	padding: 18px 0 60px 108px;
	list-style: none;
	background: none;
	border: 0;
	font-size: 15px;
	line-height: 1.4;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item + li.woocommerce-mini-cart-item {
	border-top: 1px solid var(--wsc-line);
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item::before,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item::after {
	content: none;
}

/* Thumbnail */
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
	position: absolute;
	top: 18px;
	left: 0;
	width: 92px;
	height: 112px;
	max-width: none;
	margin: 0;
	float: none;
	object-fit: cover;
	border-radius: 14px;
	background: var(--wsc-field);
	box-shadow: none;
}

/* Product name */
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item > a:not(.remove) {
	display: block;
	padding-right: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wsc-ink);
	text-decoration: none;
	box-shadow: none;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item > a:not(.remove):hover,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item > a:not(.remove):focus {
	color: var(--wsc-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Variation attributes (Size: M, Color: Sand) */
#wsc ul.woocommerce-mini-cart dl.variation {
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: 4px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--wsc-muted);
}

#wsc ul.woocommerce-mini-cart dl.variation dt,
#wsc ul.woocommerce-mini-cart dl.variation dd {
	float: none;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

#wsc ul.woocommerce-mini-cart dl.variation dd {
	margin-right: 8px;
}

#wsc ul.woocommerce-mini-cart dl.variation p {
	display: inline;
	margin: 0;
}

/* Lists added under the product name by custom code (e.g. the products inside a bundle).
   Whatever the list items contain (paragraphs, divs, line breaks), keep each one on a single
   line next to its dot, with tight spacing. Font, weight and color are left as they come. */
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ul,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ol {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	border: 0;
	overflow: visible;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ul li,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ol li {
	position: relative;
	display: block;
	min-height: 0;
	margin: 0;
	padding: 0 0 0 14px;
	border: 0;
	font-size: 13px;
	line-height: 1.45;
	list-style: none;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ul li + li,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ol li + li {
	margin-top: 3px;
	border-top: 0;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ul li::marker,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ol li::marker {
	content: none;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ul li::before,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ol li::before {
	content: '';
	position: absolute;
	top: .6em;
	left: 2px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .7;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ul li *,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ol li * {
	display: inline;
	float: none;
	margin: 0;
	padding: 0;
	line-height: inherit;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ul li br,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ol li br {
	display: none;
}

/* The list, and whatever wraps it (a <dd>, <p>, <div> or link added by a bundle plugin or
   custom code), drops any side margin, padding, fixed width or float coming from the theme or
   the plugin, so the list always runs from the name's left edge to the item's right edge. */
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item :not(li, ul, ol):has(ul, ol) {
	float: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item :not(li, ul, ol, dl):has(ul, ol) {
	display: block !important;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ul,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ol {
	display: block !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	columns: auto !important;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ul li,
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item ol li {
	float: none !important;
	width: auto !important;
	max-width: none !important;
}

/* A variation row that only holds a list: let the list use the full width. */
#wsc ul.woocommerce-mini-cart dl.variation dd:has(ul, ol) {
	flex: 1 1 100%;
	margin-right: 0;
}

#wsc ul.woocommerce-mini-cart dl.variation dt:empty {
	display: none;
}

/* Price line: line total at bottom right, on the same row as the remove link,
   so the name and anything under it get the full width. "2 × $68.00" stays under the name. */
#wsc ul.woocommerce-mini-cart .quantity {
	display: block;
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--wsc-muted);
}

#wsc ul.woocommerce-mini-cart .wsc-item__each {
	display: block;
}

#wsc ul.woocommerce-mini-cart .wsc-item__total {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 12px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--wsc-ink);
	white-space: nowrap;
}

#wsc ul.woocommerce-mini-cart .amount {
	font-weight: inherit;
	color: inherit;
}

/* Remove link (overrides WooCommerce's red circular "×") */
#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: auto;
	right: auto;
	bottom: 12px;
	left: 104px;
	width: auto;
	height: 44px;
	margin: 0;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wsc-muted) !important;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: color .15s ease;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove:hover {
	background: transparent;
	color: var(--wsc-ink) !important;
}

/* ---------- Summary ---------- */

#wsc p.woocommerce-mini-cart__total {
	flex-shrink: 0;
	margin: 0;
	padding: 20px var(--wsc-pad) 0;
	border: 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 16px;
	text-align: left;
}

#wsc p.woocommerce-mini-cart__total strong {
	font-weight: 600;
}

#wsc p.woocommerce-mini-cart__total .amount {
	font-family: var(--wsc-font-display);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--wsc-ink);
}

/* ---------- Buttons ---------- */

#wsc p.woocommerce-mini-cart__buttons {
	flex-shrink: 0;
	margin: 0;
	padding: 16px var(--wsc-pad) 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#wsc p.woocommerce-mini-cart__buttons a.button {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid #E2E1DC;
	border-radius: 999px;
	background: #fff;
	color: var(--wsc-ink);
	font-family: var(--wsc-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease;
}

#wsc p.woocommerce-mini-cart__buttons a.button:hover {
	background: var(--wsc-field);
	border-color: #D2D1CB;
	color: var(--wsc-ink);
}

/* Checkout first and dark */
#wsc p.woocommerce-mini-cart__buttons a.button.checkout {
	order: -1;
	height: 56px;
	border-color: var(--wsc-primary);
	background: var(--wsc-primary);
	color: #fff;
	font-size: 16px;
}

#wsc p.woocommerce-mini-cart__buttons a.button.checkout:hover {
	background: var(--wsc-primary-hover);
	border-color: var(--wsc-primary-hover);
	color: #fff;
}

#wsc p.woocommerce-mini-cart__buttons a.button.checkout::before {
	content: '';
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Empty cart ---------- */

#wsc .widget_shopping_cart_content:has(.woocommerce-mini-cart__empty-message) {
	justify-content: center;
	align-items: center;
	padding: 0 48px 80px;
	text-align: center;
}

#wsc p.woocommerce-mini-cart__empty-message {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	font-family: var(--wsc-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--wsc-ink);
}

#wsc p.woocommerce-mini-cart__empty-message::before {
	content: '';
	width: 88px;
	height: 88px;
	border-radius: 999px;
	background: var(--wsc-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141418' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1.2 12H6.7L5.5 8z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E") center / 34px no-repeat;
}

#wsc .wsc-empty {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

#wsc a.wsc-empty__button {
	height: 52px;
	padding: 0 28px;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--wsc-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

#wsc a.wsc-empty__button:hover {
	background: var(--wsc-primary-hover);
	color: #fff;
}

/* ---------- WooCommerce loading overlay while removing ---------- */

#wsc .blockUI.blockOverlay {
	background: rgba(255, 255, 255, .7) !important;
}

/* ---------- The empty-state button shows only inside the drawer ----------
   The mini cart HTML is shared with any other mini cart on the page. */

.widget_shopping_cart_content .wsc-empty {
	display: none;
}

#wsc .widget_shopping_cart_content .wsc-empty {
	display: flex;
}

/* ---------- [wsc_cart_button] shortcode ---------- */

.wsc-button {
	position: relative;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
}

.wsc-badge {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--wsc-accent, #3A2A25);
	color: #fff;
	font: 600 11px/18px 'Outfit', system-ui, sans-serif;
	text-align: center;
}

.wsc-badge.is-empty {
	display: none;
}

/* ==========================================================================
   Hello Elementor + Elementor
   ========================================================================== */

/* Hello Elementor (and Elementor's Global Styles) give every button a pink
   hover/focus fill and every link a pink color. Pin the drawer's own states. */
#wsc .wsc__scrim:hover,
#wsc .wsc__scrim:focus,
#wsc .wsc__scrim:active {
	background: rgba(20, 20, 24, .42);
	border: 0;
	box-shadow: none;
	outline: none;
}

#wsc .wsc__close:focus,
#wsc .wsc__close:active {
	background: var(--wsc-field);
	color: var(--wsc-ink);
	border: 0;
	box-shadow: none;
}

#wsc .wsc__close:hover {
	color: var(--wsc-ink);
}

#wsc a {
	text-decoration: none;
}

#wsc p.woocommerce-mini-cart__buttons a.button:focus {
	color: var(--wsc-ink);
}

#wsc p.woocommerce-mini-cart__buttons a.button.checkout:focus {
	color: #fff;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove:focus {
	background: transparent;
}

#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
	height: 112px;
}

/* Elementor Pro's Menu Cart widget: keep its icon and counter in the header,
   but never show its own side cart or dropdown; this drawer opens instead. */
.elementor-menu-cart__container,
.elementor-menu-cart__main {
	display: none !important;
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
	#wsc {
		--wsc-pad: 20px;
		--wsc-radius: 20px;
	}

	#wsc .wsc__header {
		height: 68px;
		padding-right: 10px;
	}

	#wsc .wsc__title {
		font-size: 22px;
	}


	#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
		min-height: 124px;
		padding: 14px 0 56px 86px;
	}

	#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
		top: 14px;
		width: 72px;
		height: 96px;
		border-radius: 12px;
	}

	#wsc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove {
		left: 82px;
		bottom: 10px;
	}

	#wsc ul.woocommerce-mini-cart .wsc-item__total {
		bottom: 10px;
	}

	#wsc p.woocommerce-mini-cart__buttons {
		padding-bottom: max(20px, env(safe-area-inset-bottom));
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	#wsc,
	#wsc .wsc__drawer,
	#wsc .wsc__scrim {
		transition: none;
	}
}