/**
 * Mini cart drawer (redesign). Styles the <dialog> shell and the standard
 * woocommerce_mini_cart() markup inside it.
 * Not designed in Figma: built from tokens to match the redesign.
 */

/* ==========================================================================
   Drawer shell
   ========================================================================== */

.dh-mini-cart {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(var(--dh-drawer-width), 100%);
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--dh-color-bg);
	color: var(--dh-color-text);
	font-family: var(--dh-font-body);
}

.dh-mini-cart::backdrop {
	background: var(--dh-overlay-backdrop);
}

.dh-mini-cart[open] {
	animation: dh-drawer-in var(--dh-transition);
}

@keyframes dh-drawer-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

/* No page scroll behind the open drawer. */
html:has(.dh-mini-cart[open]) {
	overflow: hidden;
}

/* The panel fills the dialog, so clicks outside it land on the backdrop. */
.dh-mini-cart__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.dh-mini-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dh-space-16);
	padding: var(--dh-space-24);
	background: var(--dh-color-bg-dark);
	color: var(--dh-color-text-on-dark);
	--dh-color-focus: var(--dh-color-focus-on-dark);
}

.dh-mini-cart__title {
	color: var(--dh-color-text-on-dark);
	font-size: var(--dh-fs-heading-32);
	line-height: 1;
}

.dh-mini-cart__close {
	display: inline-flex;
	padding: var(--dh-space-4);
	border: 0;
	background: none;
	color: var(--dh-color-text-on-dark);
	cursor: pointer;
}

.dh-mini-cart__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--dh-space-24);
}

/* ==========================================================================
   woocommerce_mini_cart() markup
   ========================================================================== */

.dh-mini-cart .woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-mini-cart .woocommerce-mini-cart-item {
	position: relative;
	min-height: calc(var(--dh-thumb-md) + var(--dh-space-32));
	padding: var(--dh-space-16) var(--dh-space-32) var(--dh-space-16) calc(var(--dh-thumb-md) + var(--dh-space-16));
	border-bottom: var(--dh-border-width) solid var(--dh-color-border);
}

/* Product link wraps the thumbnail and the name. The thumbnail is placed in
 * the left gutter so the link keeps a normal box (visible focus ring). */
.dh-mini-cart .woocommerce-mini-cart-item > a:not(.remove) {
	display: block;
	color: var(--dh-color-heading);
	font-family: var(--dh-font-display);
	font-size: var(--dh-fs-heading-20);
	line-height: var(--dh-lh-tight);
	letter-spacing: var(--dh-ls-button);
	text-decoration: none;
	text-transform: uppercase;
}

.dh-mini-cart .woocommerce-mini-cart-item img {
	position: absolute;
	top: var(--dh-space-16);
	left: 0;
	width: var(--dh-thumb-md);
	height: var(--dh-thumb-md);
	border-radius: var(--dh-radius-button);
	object-fit: cover;
}

.dh-mini-cart .woocommerce-mini-cart-item .variation {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 var(--dh-space-4);
	margin: var(--dh-space-4) 0 0;
	font-size: var(--dh-fs-body-15);
}

.dh-mini-cart .woocommerce-mini-cart-item .variation dd,
.dh-mini-cart .woocommerce-mini-cart-item .variation p {
	margin: 0;
}

.dh-mini-cart .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: var(--dh-space-4);
	color: var(--dh-color-text);
	font-size: var(--dh-fs-body-16);
}

.dh-mini-cart .woocommerce-mini-cart-item .quantity .amount {
	color: var(--dh-color-accent-text);
	font-weight: var(--dh-fw-bold);
}

/* Remove (×) */
.dh-mini-cart .woocommerce-mini-cart-item .remove {
	position: absolute;
	top: var(--dh-space-16);
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dh-space-24);
	height: var(--dh-space-24);
	border: var(--dh-border-width) solid var(--dh-color-border);
	border-radius: var(--dh-radius-round);
	color: var(--dh-color-text);
	font-size: var(--dh-fs-body-18);
	line-height: 1;
	text-decoration: none;
}

.dh-mini-cart .woocommerce-mini-cart-item .remove:hover {
	border-color: var(--dh-color-heading);
	color: var(--dh-color-heading);
}

/* Subtotal */
.dh-mini-cart .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	margin: var(--dh-space-24) 0;
	color: var(--dh-color-heading);
	font-size: var(--dh-fs-body-18);
}

.dh-mini-cart .woocommerce-mini-cart__total strong {
	font-weight: var(--dh-fw-semibold);
}

.dh-mini-cart .woocommerce-mini-cart__total .amount {
	font-weight: var(--dh-fw-bold);
}

/* Buttons: same look as .dh-btn (WooCommerce outputs its own classes). */
.dh-mini-cart .woocommerce-mini-cart__buttons {
	display: grid;
	gap: var(--dh-space-12);
	margin: 0;
}

.dh-mini-cart .woocommerce-mini-cart__buttons .button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--dh-btn-padding);
	border: var(--dh-border-width-button) solid var(--dh-color-green-900);
	border-radius: var(--dh-radius-button);
	background: transparent;
	color: var(--dh-color-green-900);
	font-family: var(--dh-font-display);
	font-size: var(--dh-btn-font-size);
	font-weight: var(--dh-fw-regular);
	line-height: 1;
	letter-spacing: var(--dh-ls-button);
	text-decoration: none;
	text-transform: uppercase;
}

.dh-mini-cart .woocommerce-mini-cart__buttons .button.checkout {
	border-color: transparent;
	background: var(--dh-btn-bg);
	color: var(--dh-btn-color);
}

.dh-mini-cart .woocommerce-mini-cart__buttons .button:hover {
	filter: brightness(0.92);
}

/* Empty cart */
.dh-mini-cart .woocommerce-mini-cart__empty-message {
	margin: 0;
	color: var(--dh-color-text);
	text-align: center;
}

/* WooCommerce adds .loading / blockUI while removing an item. */
.dh-mini-cart .blockUI.blockOverlay {
	background: var(--dh-color-bg) !important;
}