/**
 * Cart drawer. Slides in from the right when the basket link is used or
 * an item is added. Contents are the WooCommerce mini cart, kept fresh
 * by WC's cart-fragments (it replaces .widget_shopping_cart_content),
 * so the plugin's plate line items appear exactly as Woo renders them.
 */

.cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 1200;
	pointer-events: none;
	/* Clip the parked panel: it's translated 100% past the wrapper's
	   right edge when closed, and without this it extends the document's
	   scrollable width — the phantom right-hand gap on some viewports.
	   Clipping at the wrapper (= viewport) never touches the open state,
	   whose panel and leftward shadow sit fully inside. */
	overflow: clip;
	/* Hidden when closed so the close button can't be tab-focused from
	   the page behind it. The delayed transition keeps the slide-out
	   animation visible when closing. */
	visibility: hidden;
	transition: visibility 0s linear var(--bp-med);
}

.cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 18, 53, 0.55);
	opacity: 0;
	transition: opacity var(--bp-med) var(--bp-ease);
}

.cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 92vw);
	background: var(--bp-white);
	box-shadow: -12px 0 40px rgba(15, 18, 53, 0.22);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--bp-med) var(--bp-ease);
}

.cart-drawer.is-open { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; }
.cart-drawer.is-open .cart-drawer__panel { transform: none; }

.cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--bp-s4) var(--bp-s5);
	border-bottom: 1px solid var(--bp-border);
	background: var(--bp-navy);
}
.cart-drawer__head h3 { color: var(--bp-white); margin: 0; font-size: var(--bp-text-lg); }
.cart-drawer__close {
	background: none;
	border: 0;
	color: var(--bp-muted-on-navy);
	font-size: 26px;
	line-height: 1;
	padding: 4px 8px;
	border-radius: var(--bp-radius-sm);
}
.cart-drawer__close:hover { color: var(--bp-white); }

.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--bp-s4) var(--bp-s5); }

/* Woo mini cart inside the drawer.
   Markup notes: the DVLA plugin replaces the thumbnail with its
   rendered yellow plate element inside the product link, and wraps
   each option value in a <p> - the rules below are written against
   that real DOM, not Woo's stock square <img> assumption. */
.cart-drawer .widget_shopping_cart_content ul.cart_list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cart-drawer .cart_list li {
	display: block;
	position: relative;
	padding: var(--bp-s4) var(--bp-s6) var(--bp-s4) 0;
	border-bottom: 1px solid var(--bp-border);
	margin: 0;
	font-size: var(--bp-text-sm);
}
.cart-drawer .cart_list li:last-child { border-bottom: 0; }

/* Product link: plate graphic + name side by side */
.cart-drawer .cart_list li > a:not(.remove) {
	display: flex;
	align-items: center;
	gap: var(--bp-s3);
	color: var(--bp-navy);
	font-weight: 600;
	line-height: 1.3;
}
.cart-drawer .cart_list li > a:not(.remove):hover { color: var(--bp-royal); }
.cart-drawer .cart_list li .product-number-cart { flex-shrink: 0; }
.cart-drawer .cart_list li > a img {
	width: 88px;
	height: auto;
	border-radius: 4px;
	flex-shrink: 0;
	float: none;
	margin: 0;
}

/* Option details: compact inline pairs instead of one line each */
.cart-drawer .cart_list li dl.variation {
	margin: var(--bp-s2) 0 0;
	font-size: var(--bp-text-xs);
	color: var(--bp-muted);
	line-height: 1.7;
}
.cart-drawer .cart_list li dl.variation dt {
	display: inline;
	font-weight: 600;
	color: var(--bp-text-soft);
	margin: 0 2px 0 0;
}
.cart-drawer .cart_list li dl.variation dd {
	display: inline;
	margin: 0 var(--bp-s2) 0 0;
}
.cart-drawer .cart_list li dl.variation dd p { display: inline; margin: 0; }

/* Quantity x price line */
.cart-drawer .cart_list li .quantity {
	display: block;
	margin-top: var(--bp-s2);
	font-weight: 600;
	color: var(--bp-navy);
	font-size: 13px;
}

/* Remove button pinned top right */
.cart-drawer .cart_list li a.remove {
	position: absolute;
	top: var(--bp-s4);
	right: 0;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: var(--bp-radius-pill);
	background: var(--bp-danger-soft);
	color: var(--bp-danger) !important;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
}
.cart-drawer .cart_list li a.remove:hover { background: var(--bp-danger); color: var(--bp-white) !important; }

.cart-drawer .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	padding: var(--bp-s4) 0;
	margin: 0;
	font-size: var(--bp-text-base);
	color: var(--bp-navy);
	font-weight: 600;
}
.cart-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	gap: var(--bp-s2);
	margin: 0;
}
.cart-drawer .woocommerce-mini-cart__buttons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px;
	border-radius: var(--bp-radius-pill);
	font-weight: 600;
	font-size: var(--bp-text-sm);
	background: var(--bp-canvas);
	color: var(--bp-navy);
	border: 1px solid var(--bp-border-strong);
}
.cart-drawer .woocommerce-mini-cart__buttons a.checkout {
	background: var(--bp-red);
	border-color: var(--bp-red);
	color: var(--bp-white);
}
.cart-drawer .woocommerce-mini-cart__buttons a.checkout:hover { background: var(--bp-red-deep); }
.cart-drawer .woocommerce-mini-cart__buttons a:not(.checkout):hover { border-color: var(--bp-navy); }

.cart-drawer .woocommerce-mini-cart__empty-message {
	text-align: center;
	color: var(--bp-muted);
	padding: var(--bp-s7) var(--bp-s4);
	margin: 0;
}

body.cart-drawer-open { overflow: hidden; }