/*
 * Divi DigiMart: the mini cart.
 *
 * One <dialog class="qndm-cart">, three geometries by class: qndm-cart-slider (off-canvas
 * from the chosen side), qndm-cart-modal (centred, with a backdrop) and qndm-cart-float (a
 * small panel the script anchors to its trigger). Size, gap, padding and radius are the
 * Mini Cart pane's tokens. Divi's own cart (a.et-cart-info, a.et_pb_menu__cart-button) keeps
 * its markup; the circle counter is the theme's badge beside Divi's text.
 */

/* ==========================================================================
   The panel
   ========================================================================== */

.qndm-cart {
	display: none;
	flex-direction: column;
	width: max(320px, var(--qndm-cart-w));
	max-width: 100vw;
	height: var(--qndm-cart-h);
	max-height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--qndm-surface);
	box-shadow: var(--qndm-sh-lg);
	color: var(--qndm-body);
	font-size: var(--qndm-fs-md);
}

.qndm-cart[open] {
	display: flex;
}

.qndm-cart::backdrop {
	background: rgba(0, 0, 0, .45);
	background: color-mix( in srgb, var(--qndm-heading) 45%, transparent );
}

/* Slider */
.qndm-cart-slider {
	position: fixed;
	top: 0;
	bottom: 0;
	max-height: none;
}

.qndm-cart-slider.qndm-cart-right {
	right: 0;
	left: auto;
}

.qndm-cart-slider.qndm-cart-left {
	right: auto;
	left: 0;
}

.qndm-cart-slider.qndm-cart-right[open] {
	animation: qndm-cart-from-right var(--qndm-dur-base) var(--qndm-ease);
}

.qndm-cart-slider.qndm-cart-left[open] {
	animation: qndm-cart-from-left var(--qndm-dur-base) var(--qndm-ease);
}

/* Modal */
.qndm-cart-modal {
	position: fixed;
	inset: 0;
	width: min(560px, max(340px, var(--qndm-cart-w)), calc(100vw - 2 * var(--qndm-sp-4)));
	height: auto;
	max-height: min(var(--qndm-cart-h), calc(100vh - 2 * var(--qndm-sp-4)));
	margin: auto;
	border-radius: var(--qndm-cart-r);
}

.qndm-cart-modal[open] {
	animation: qndm-cart-rise var(--qndm-dur-base) var(--qndm-ease);
}

/* Float: anchored by the script; never wider than the viewport. */
.qndm-cart-float {
	position: fixed;
	z-index: var(--qndm-z-dropdown);
	width: min(400px, calc(100vw - 2 * var(--qndm-sp-3)));
	height: auto;
	max-height: min(var(--qndm-cart-h), calc(100vh - 2 * var(--qndm-sp-6)));
	border: 1px solid var(--qndm-border);
	border-radius: var(--qndm-cart-r);
}

.qndm-cart-float[open] {
	animation: qndm-cart-rise var(--qndm-dur-fast) var(--qndm-ease);
}

@keyframes qndm-cart-from-right {
	from {
		transform: translateX(100%);
	}
}

@keyframes qndm-cart-from-left {
	from {
		transform: translateX(-100%);
	}
}

@keyframes qndm-cart-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* Head */
.qndm-cart-head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--qndm-sp-3);
	padding: var(--qndm-cart-pad);
	padding-bottom: var(--qndm-sp-3);
	border-bottom: 1px solid var(--qndm-border);
}

.qndm-cart-title {
	display: flex;
	align-items: center;
	gap: var(--qndm-sp-2);
	margin: 0;
	padding: 0;
	color: var(--qndm-heading);
	font-family: var(--qndm-font-heading);
	font-size: var(--qndm-fs-lg);
	font-weight: var(--qndm-fw-semibold);
}

.qndm-cart-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--qndm-sp-8);
	height: var(--qndm-sp-8);
	padding: 0;
	border: 0;
	border-radius: var(--qndm-r-circle);
	background: transparent;
	color: var(--qndm-icon);
	cursor: pointer;
	transition: background var(--qndm-dur-fast) var(--qndm-ease);
}

.qndm-cart-close:hover,
.qndm-cart-close:focus-visible {
	background: var(--qndm-muted-bg);
}

.qndm-cart svg,
.qndm-cart-trigger svg,
.qndm-cart-tab svg {
	width: var(--qndm-icon-md);
	height: var(--qndm-icon-md);
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.qndm-cart-notice:empty {
	display: none;
}

.qndm-cart-notice {
	margin: var(--qndm-sp-3) var(--qndm-sp-4) 0;
	padding: var(--qndm-sp-2) var(--qndm-sp-3);
	border-radius: var(--qndm-r-sm);
	background: var(--qndm-info-bg);
	color: var(--qndm-heading);
	font-size: var(--qndm-fs-sm);
}

/* Body: the list scrolls, the footer stays */
.qndm-cart .widget_shopping_cart_content {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.qndm-cart-list.woocommerce-mini-cart {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: var(--qndm-sp-2) var(--qndm-cart-pad);
	overflow-y: auto;
	list-style: none;
}

.qndm-cart .woocommerce-mini-cart-item.mini_cart_item {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax( 0, 1fr ) auto;
	gap: var(--qndm-sp-3);
	align-items: start;
	margin: 0;
	padding: var(--qndm-cart-gap) 0;
	border-bottom: 1px solid var(--qndm-border);
}

.qndm-cart-noimg .woocommerce-mini-cart-item.mini_cart_item {
	grid-template-columns: minmax( 0, 1fr ) auto;
}

.qndm-cart .woocommerce-mini-cart-item:last-child {
	border-bottom: 0;
}

.qndm-cart-thumb img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var(--qndm-r-sm);
	object-fit: cover;
}

.qndm-cart-name {
	display: block;
	color: var(--qndm-heading);
	font-weight: var(--qndm-fw-semibold);
	line-height: var(--qndm-lh-tight);
}

.qndm-cart-info .variation {
	margin: var(--qndm-sp-1) 0 0;
	color: var(--qndm-body);
	font-size: var(--qndm-fs-xs);
}

.qndm-cart-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qndm-sp-2);
	margin-top: var(--qndm-sp-2);
}

.qndm-cart-sub {
	color: var(--qndm-heading);
	font-weight: var(--qndm-fw-semibold);
}

.qndm-cart .woocommerce-mini-cart-item a.remove {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--qndm-r-circle);
	color: var(--qndm-body);
	font-size: var(--qndm-fs-lg);
	line-height: 1;
	text-decoration: none;
	transition: background var(--qndm-dur-fast) var(--qndm-ease), color var(--qndm-dur-fast) var(--qndm-ease);
}

.qndm-cart .woocommerce-mini-cart-item a.remove:hover {
	background: var(--qndm-danger-bg);
	color: var(--qndm-danger);
}

/* Quantity stepper */
.qndm-qty {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--qndm-border);
	border-radius: var(--qndm-r-pill);
}

.qndm-qty-btn {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--qndm-heading);
	font-size: var(--qndm-fs-md);
	cursor: pointer;
	transition: background var(--qndm-dur-fast) var(--qndm-ease);
}

.qndm-qty-btn:hover,
.qndm-qty-btn:focus-visible {
	background: var(--qndm-muted-bg);
}

.qndm-qty-btn[disabled] {
	opacity: .4;
	cursor: not-allowed;
}

.qndm-qty-value {
	min-width: 24px;
	color: var(--qndm-heading);
	font-size: var(--qndm-fs-sm);
	font-weight: var(--qndm-fw-semibold);
	text-align: center;
}

.qndm-cart.is-busy .widget_shopping_cart_content {
	opacity: .55;
	pointer-events: none;
	transition: opacity var(--qndm-dur-fast) var(--qndm-ease);
}

/* Rows: discount, fees, coupons */
.qndm-cart-rows {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--qndm-sp-2);
	padding: var(--qndm-sp-3) var(--qndm-cart-pad) 0;
	border-top: 1px solid var(--qndm-border);
}

.qndm-cart-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qndm-sp-2);
	font-size: var(--qndm-fs-sm);
}

.qndm-cart-row.is-discount strong {
	color: var(--qndm-success);
}

.qndm-cart-coupon {
	display: inline-flex;
	align-items: center;
	gap: var(--qndm-sp-1);
	padding: 2px var(--qndm-sp-2);
	border-radius: var(--qndm-r-pill);
	background: var(--qndm-success-bg);
	color: var(--qndm-success);
	font-size: var(--qndm-fs-xs);
	font-weight: var(--qndm-fw-semibold);
	letter-spacing: .04em;
}

.qndm-cart-coupon svg {
	width: var(--qndm-icon-sm);
	height: var(--qndm-icon-sm);
}

.qndm-cart-coupon-remove {
	display: inline-flex;
	padding: var(--qndm-sp-1);
	border: 0;
	border-radius: var(--qndm-r-circle);
	background: transparent;
	color: var(--qndm-body);
	cursor: pointer;
}

.qndm-cart-coupon-remove svg {
	width: var(--qndm-icon-sm);
	height: var(--qndm-icon-sm);
}

.qndm-cart-coupon-form {
	display: flex;
	gap: var(--qndm-sp-2);
}

.qndm-cart-coupon-form input {
	flex: 1;
	min-width: 0;
	height: 38px;
	padding: 0 var(--qndm-sp-3);
	border: 1px solid var(--qndm-border);
	border-radius: var(--qndm-r-sm);
	background: var(--qndm-surface);
	color: var(--qndm-heading);
	font-size: var(--qndm-fs-sm);
}

.qndm-cart-coupon-form input:focus {
	border-color: var(--qndm-primary);
	box-shadow: 0 0 0 var(--qndm-ring-w) var(--qndm-ring);
	outline: 0;
}

.qndm-cart-coupon-form button {
	height: 38px;
	padding: 0 var(--qndm-sp-4);
	border: 1px solid var(--qndm-border);
	border-radius: var(--qndm-r-sm);
	background: var(--qndm-muted-bg);
	color: var(--qndm-heading);
	font-size: var(--qndm-fs-sm);
	font-weight: var(--qndm-fw-semibold);
	cursor: pointer;
}

/* Footer */
.qndm-cart-foot {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--qndm-sp-3);
	padding: var(--qndm-sp-3) var(--qndm-cart-pad) var(--qndm-cart-pad);
}

.qndm-cart-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	color: var(--qndm-heading);
}

.qndm-cart-total strong {
	font-size: var(--qndm-fs-xl);
	font-weight: var(--qndm-fw-bold);
}

.qndm-cart-btns {
	display: grid;
	grid-template-columns: var(--qndm-cart-btn-cols);
	gap: var(--qndm-sp-2);
}

.qndm-cart .qndm-cart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	text-align: center;
}

/* Empty */
.qndm-cart-empty {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--qndm-sp-3);
	padding: var(--qndm-cart-pad);
	text-align: center;
}

.qndm-cart-empty svg {
	width: 56px;
	height: 56px;
	color: var(--qndm-icon);
	stroke-width: 1.5;
}

.qndm-cart-empty p {
	margin: 0;
	padding: 0;
	color: var(--qndm-body);
}

/* ==========================================================================
   Counters and triggers
   ========================================================================== */

.qndm-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--qndm-r-pill);
	background: var(--qndm-primary);
	color: var(--qndm-surface);
	font-size: var(--qndm-fs-xs);
	font-weight: var(--qndm-fw-bold);
	line-height: 1;
}

.qndm-cart-count.is-empty {
	background: var(--qndm-muted-bg);
	color: var(--qndm-body);
}

/* Divi's cart, restyled: the theme's badge beside it, Divi's own text kept for screen readers. */
a.et-cart-info.qndm-has-count,
a.et_pb_menu__cart-button.qndm-has-count {
	position: relative;
}

a.et-cart-info.qndm-has-count > span:not(.qndm-cart-count),
a.et_pb_menu__cart-button.qndm-has-count .et_pb_menu__cart-count {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

a.et-cart-info.qndm-has-count .qndm-cart-count,
a.et_pb_menu__cart-button.qndm-has-count .qndm-cart-count {
	position: absolute;
	top: -8px;
	right: -12px;
}

.qndm-cart-menu-item[hidden] {
	display: none;
}

.qndm-cart-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--qndm-sp-1);
	color: inherit;
}

.qndm-cart-menu-item .qndm-cart-count {
	position: absolute;
	top: -8px;
	right: -12px;
}

/* Edge tab */
.qndm-cart-tab {
	position: fixed;
	z-index: var(--qndm-z-sticky);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--qndm-sp-1);
	padding: var(--qndm-sp-3) var(--qndm-sp-2);
	border: 0;
	background: var(--qndm-primary);
	box-shadow: var(--qndm-sh-md);
	color: var(--qndm-surface);
	cursor: pointer;
	transition: filter var(--qndm-dur-fast) var(--qndm-ease);
}

.qndm-cart-tab:hover,
.qndm-cart-tab:focus-visible {
	filter: brightness(.92);
}

.qndm-cart-tab .qndm-cart-count {
	background: var(--qndm-surface);
	color: var(--qndm-primary);
}

.qndm-cart-tab--left-top,
.qndm-cart-tab--left-middle,
.qndm-cart-tab--left-bottom {
	left: 0;
	border-radius: 0 var(--qndm-r-md) var(--qndm-r-md) 0;
}

.qndm-cart-tab--right-top,
.qndm-cart-tab--right-middle,
.qndm-cart-tab--right-bottom {
	right: 0;
	border-radius: var(--qndm-r-md) 0 0 var(--qndm-r-md);
}

.qndm-cart-tab--left-top,
.qndm-cart-tab--right-top {
	top: 20%;
}

.qndm-cart-tab--left-middle,
.qndm-cart-tab--right-middle {
	top: 50%;
	transform: translateY(-50%);
}

.qndm-cart-tab--left-bottom,
.qndm-cart-tab--right-bottom {
	bottom: 20%;
}

/* Phone bar: shown below the phone breakpoint only */
.qndm-cart-bar {
	display: none;
}

/* ==========================================================================
   Phone
   ========================================================================== */

@media (max-width: 767px) {
	.qndm-cart-slider,
	.qndm-cart-modal {
		width: 100vw;
	}

	.qndm-cart-modal {
		max-height: 100vh;
		border-radius: 0;
	}

	.qndm-cart-bar:not([hidden]) {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--qndm-z-sticky);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--qndm-sp-3);
		padding: var(--qndm-sp-3) var(--qndm-sp-4);
		border-top: 1px solid var(--qndm-border);
		background: var(--qndm-surface);
		box-shadow: var(--qndm-sh-lg);
	}

	body:has(.qndm-cart-bar:not([hidden])) {
		padding-bottom: 72px;
	}

	.qndm-cart-bar-total {
		display: flex;
		flex-direction: column;
	}

	.qndm-cart-bar-total em {
		color: var(--qndm-body);
		font-size: var(--qndm-fs-xs);
		font-style: normal;
	}

	.qndm-cart-bar-total strong {
		color: var(--qndm-heading);
		font-size: var(--qndm-fs-lg);
	}

	.qndm-cart-bar-btn {
		min-height: 44px;
		padding: 0 var(--qndm-sp-5);
		border: 0;
		border-radius: var(--qndm-r-pill);
		background: var(--qndm-primary);
		color: var(--qndm-surface);
		font-size: var(--qndm-fs-md);
		font-weight: var(--qndm-fw-semibold);
		cursor: pointer;
	}

	.qndm-cart-tab {
		padding: var(--qndm-sp-2);
	}
}