/**
 * Window Well Supply – cart drawer (UAEL off-canvas mini cart) item rows.
 * Home Depot–style rows: large image on the left; name, "Includes" list,
 * quantity and price on the right. Works for linked and unlinked rows (the
 * theme wraps image + name in an <a> only when the product has a link).
 */

.uael-mc-offcanvas {
	width: min(420px, 100vw) !important;
	max-width: 100vw !important;
}

/* Row grid */
.uael-mc-offcanvas .woocommerce-mini-cart-item {
	display: grid !important;
	grid-template-columns: 110px minmax(0, 1fr) max-content;
	grid-template-areas:
		"img name  name"
		"img meta  meta"
		"img qty   price";
	grid-template-rows: auto auto 1fr;
	column-gap: 16px;
	row-gap: 6px;
	align-items: start;
	position: relative;
	padding: 20px 0 !important;
	border-bottom: 1px solid #e3e6e8;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item > a:not(.remove) {
	display: contents;
}

/* Image (selector beats UAEL's `body .uael-mc ul li.woocommerce-mini-cart-item a img { width: 4em !important }`) */
body .uael-mc .uael-mc-offcanvas ul li.woocommerce-mini-cart-item img {
	grid-area: img;
	float: none !important;
	position: static !important;
	top: auto !important;
	transform: none !important;
	width: 110px !important;
	height: 110px !important;
	max-width: none !important;
	object-fit: contain;
	margin: 0 !important;
}

/* Name */
.uael-mc-offcanvas .woocommerce-mini-cart-item .ast-product-image {
	grid-area: name;
	margin: 0;
	padding-right: 30px; /* room for the remove × */
}
.uael-mc-offcanvas .woocommerce-mini-cart-item .ast-product-name {
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
	color: #003340;
}

/* "Includes:" (kits) and variation details */
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation {
	grid-area: meta;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 13px;
	line-height: 1.45;
	color: #5b6b73;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dt,
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dd {
	display: block !important;
	float: none !important;
	width: auto !important;
	text-align: left !important;
	margin: 0;
	padding: 0;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dt {
	font-weight: 600;
	margin-bottom: 2px;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dd p {
	margin: 0;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item ul.wws-includes {
	list-style: disc !important;
	margin: 2px 0 0 18px !important;
	padding: 0 !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item ul.wws-includes li {
	display: list-item !important;
	list-style: disc !important;
	position: static !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 0 1px !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: 1.45 !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item ul.wws-includes li::after {
	content: none !important;
	display: none !important;
}

/* Quantity + price on one line */
.uael-mc-offcanvas .woocommerce-mini-cart-item .quantity {
	grid-area: qty;
	align-self: end;
	width: auto !important;
	flex: none;
	margin: 8px 0 0 !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item .quantity input.qty {
	width: 44px !important;
	min-width: 0 !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item .ast-mini-cart-price-wrap {
	grid-area: price;
	align-self: end;
	justify-self: end;
	float: none !important;
	max-width: none !important;
	white-space: nowrap;
	margin: 8px 0 0 !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 34px;
	color: #003340;
}

/* Remove: plain × like the info pop-up close, not a circled icon */
.uael-mc-offcanvas .woocommerce-mini-cart-item a.remove {
	position: absolute !important;
	top: 20px;
	right: 0;
	float: none !important;
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #666 !important;
	text-align: center;
	text-decoration: none !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item a.remove > span,
.uael-mc-offcanvas .woocommerce-mini-cart-item a.remove svg {
	display: none !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item a.remove::before {
	content: "\00d7" !important;
	display: block !important;
	position: static !important;
	transform: none !important;
	width: 24px !important;
	height: 24px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: inherit !important;
	font: 400 26px/24px "Work Sans", sans-serif !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item a.remove:hover,
.uael-mc-offcanvas .woocommerce-mini-cart-item a.remove:focus {
	color: #003340 !important;
	background: transparent !important;
}

/* ---- 1.4.8 ------------------------------------------------------------ */

/* Thumbnails: square frame, whole image visible, so rows line up. */
body .uael-mc .uael-mc-offcanvas ul li.woocommerce-mini-cart-item img {
	aspect-ratio: 1 / 1;
	height: auto !important;
	object-fit: contain;
}

/* Remove ×: line up with the first line of the title. */
.uael-mc-offcanvas .woocommerce-mini-cart-item a.remove {
	top: 18px !important;
}

/* Smaller quantity stepper. */
.uael-mc-offcanvas .woocommerce-mini-cart-item .quantity {
	height: 30px !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item .quantity .minus,
.uael-mc-offcanvas .woocommerce-mini-cart-item .quantity .plus,
.uael-mc-offcanvas .woocommerce-mini-cart-item .quantity input.qty {
	height: 30px !important;
	min-height: 30px !important;
	line-height: 28px !important;
	font-size: 14px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item .quantity .minus,
.uael-mc-offcanvas .woocommerce-mini-cart-item .quantity .plus {
	width: 30px !important;
	min-width: 30px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item .quantity input.qty {
	width: 38px !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item .ast-mini-cart-price-wrap {
	line-height: 30px;
}

/* Header: "3 item(s) in cart" instead of the cart icon + badge, and no
   subtotal up top (it's already shown above the buttons). */
.uael-mc-offcanvas .uael-mc-offcanvas__header-text,
.uael-mc-offcanvas .uael-mc-dropdown__header-icon {
	display: none !important;
}
.uael-mc-offcanvas .uael-mc-offcanvas__icon-wrap {
	display: block !important;
}
.uael-mc-offcanvas .uael-mc-offcanvas__header-badge {
	position: static !important;
	display: inline !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #003340 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	transform: none !important;
}
.uael-mc-offcanvas .uael-mc-offcanvas__header-badge::after {
	content: " items in cart";
}
/* Singular: set by assets/js/mini-cart.js when the count is 1. */
.uael-mc-offcanvas .uael-mc-offcanvas__header-badge.wws-count-one::after {
	content: " item in cart";
}

/* View cart / Checkout: share the full width of the row. */
.uael-mc-offcanvas .woocommerce-mini-cart__buttons {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	width: 100%;
}
.uael-mc-offcanvas .woocommerce-mini-cart__buttons .button {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	text-align: center;
	box-sizing: border-box;
}

/* ---- 1.4.10 ----------------------------------------------------------- */
/* Checkout page: Astra adds a second thumbnail inside the product name
   (.ast-product-thumbnail, meant for the order summary). The drawer uses the
   same name output, so hide it there; the row's own image is kept. */
.uael-mc-offcanvas .woocommerce-mini-cart-item .ast-product-thumbnail {
	display: none !important;
}

/* ---- 1.4.11 — Checkout "Order summary": same row style as the drawer ----- */
.wc-block-components-order-summary .wc-block-components-order-summary-item:not(.is-bundled__hidden) {
	display: grid !important;
	grid-template-columns: 110px minmax(0, 1fr);
	grid-template-areas:
		"img desc"
		"img total";
	grid-template-rows: auto 1fr;
	column-gap: 16px;
	row-gap: 6px;
	align-items: start;
	padding: 16px 0 !important;
	border-bottom: 1px solid #e3e6e8;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item:last-child {
	border-bottom: 0;
}

/* Image: 110px square, whole image visible (quantity badge stays on its corner). */
.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
	grid-area: img;
	position: relative;
	width: 110px !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image img {
	width: 110px !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Name */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	grid-area: desc;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-name {
	margin: 0 0 6px !important;
	font-size: 15px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
	color: #003340 !important;
}

/* Like the drawer: no unit price / strikethrough / "Save" badge / short description. */
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-cart-item__prices,
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-metadata__description,
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-sale-badge,
.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price .wc-block-components-product-price__regular {
	display: none !important;
}

/* Details: one per line; kit "Includes:" as a bulleted list. */
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-metadata {
	margin: 0 !important;
	font-size: 13px;
	line-height: 1.45;
	color: #5b6b73;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details > span {
	display: block;
	margin: 0 0 1px !important;
	line-height: 1.45;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details span[aria-hidden="true"] {
	display: none !important; /* the " / " separators */
}
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details:has(.wc-block-components-product-details__includes)::before {
	content: "Includes:";
	display: block;
	margin-bottom: 2px;
	font-weight: 600;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details__includes {
	display: list-item !important;
	list-style: disc;
	margin-left: 18px !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details__includes .wc-block-components-product-details__name {
	display: none !important;
}

/* Line total, bottom right. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	grid-area: total;
	justify-self: end;
	align-self: end;
	margin: 0 !important;
	padding: 0 !important;
	white-space: nowrap;
	font-size: 17px;
	font-weight: 700;
	color: #003340;
}

/* ---- 1.4.12 / 1.4.13 — Order summary: quantity as "Quantity: 1" text at the
   bottom of the row (where the drawer has its quantity stepper), with the line
   total beside it. The image wrapper is flattened (display: contents) so the
   quantity badge, which WooCommerce renders inside it, can be placed in the
   row's own grid. ------------------------------------------------------- */
.wc-block-components-order-summary {
	container-type: inline-size;
	container-name: wws-order-summary;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item:not(.is-bundled__hidden) {
	grid-template-columns: 110px minmax(0, 1fr) max-content;
	grid-template-areas:
		"img desc desc"
		"img qty  total";
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
	display: contents !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image img {
	grid-area: img;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	grid-area: qty;
	align-self: end;
	justify-self: start;
	position: static !important;
	transform: none !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	padding: 0 !important; /* WooCommerce pads the badge text 0.4em; that indented it past the price when stacked */
	color: #5b6b73 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 26px !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span[aria-hidden="true"]::before {
	content: "Quantity: ";
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	line-height: 26px;
}

/* Not enough room for quantity and price side by side: stack them. */
@container wws-order-summary (max-width: 330px) {
	.wc-block-components-order-summary .wc-block-components-order-summary-item:not(.is-bundled__hidden) {
		grid-template-columns: 110px minmax(0, 1fr);
		grid-template-areas:
			"img desc"
			"img qty"
			"img total";
		grid-template-rows: auto 1fr auto;
		row-gap: 2px;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
		justify-self: start;
	}
}

/* ---- 1.4.13 — Cart drawer: same stacking when the drawer is narrow (phones). */
.uael-mc-offcanvas .uael-mc-offcanvas__items {
	container-type: inline-size;
	container-name: wws-mini-cart;
}
@container wws-mini-cart (max-width: 340px) {
	.uael-mc-offcanvas .woocommerce-mini-cart-item {
		grid-template-columns: 110px minmax(0, 1fr);
		grid-template-areas:
			"img name"
			"img meta"
			"img qty"
			"img price";
		grid-template-rows: auto auto 1fr auto;
	}
	.uael-mc-offcanvas .woocommerce-mini-cart-item .ast-mini-cart-price-wrap {
		justify-self: start;
		margin-top: 2px !important;
	}
}

/* Drawer above the checkout's PayPal / Venmo buttons (their iframes use
   z-index 100; the drawer shipped at 99, so on phones they showed through).
   The panel sits one above its own dark overlay. */
.uael-mc-offcanvas-wrap {
	z-index: 100000 !important;
}
.uael-mc-offcanvas {
	z-index: 100001 !important;
}

/* ---- 1.4.15 — Very narrow: stack the image above the text so the name and
   details don't get squeezed into a thin column. -------------------------- */
@container wws-order-summary (max-width: 290px) {
	.wc-block-components-order-summary .wc-block-components-order-summary-item:not(.is-bundled__hidden) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"img"
			"desc"
			"qty"
			"total";
		grid-template-rows: auto;
		row-gap: 8px;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__image img {
		justify-self: start;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
		justify-self: start;
	}
}
@container wws-mini-cart (max-width: 290px) {
	.uael-mc-offcanvas .woocommerce-mini-cart-item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"img"
			"name"
			"meta"
			"qty"
			"price";
		grid-template-rows: auto;
		row-gap: 8px;
	}
	.uael-mc-offcanvas .woocommerce-mini-cart-item .ast-mini-cart-price-wrap {
		justify-self: start;
	}
}


/* ---- 1.4.16 — Details text: one size everywhere (13px), and bullets drawn
   as a "•" in a fixed indent instead of list markers, which sat at different
   heights from the text depending on the browser and the theme's font sizes.
   ------------------------------------------------------------------------ */

/* Cart drawer */
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation,
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation * {
	font-size: 13px !important;
	line-height: 1.45 !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item ul.wws-includes {
	list-style: none !important;
	margin: 2px 0 0 !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item ul.wws-includes li {
	display: block !important;
	list-style: none !important;
	position: relative !important;
	padding: 0 0 0 14px !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item ul.wws-includes li::before {
	content: "\2022" !important;
	display: block !important;
	position: absolute !important;
	left: 2px !important;
	top: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	color: inherit !important;
}

/* Checkout order summary */
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details,
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details *,
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details::before {
	font-size: 13px !important;
	line-height: 1.45 !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details__includes {
	display: block !important;
	list-style: none !important;
	position: relative !important;
	margin: 0 0 1px !important;
	padding: 0 0 0 14px !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-product-details__includes::before {
	content: "\2022";
	position: absolute;
	left: 2px;
	top: 0;
}

/* ---- 1.4.17 — Thumbnails sized as a share of the row (24%) instead of a
   fixed 110px, so they shrink with narrower drawers / summaries. ---------- */

/* Cart drawer */
.uael-mc-offcanvas .woocommerce-mini-cart-item {
	grid-template-columns: 24% minmax(0, 1fr) max-content;
}
body .uael-mc .uael-mc-offcanvas ul li.woocommerce-mini-cart-item img {
	width: 100% !important;
	height: auto !important;
}
@container wws-mini-cart (max-width: 340px) {
	.uael-mc-offcanvas .woocommerce-mini-cart-item {
		grid-template-columns: 24% minmax(0, 1fr);
	}
}
@container wws-mini-cart (max-width: 290px) {
	.uael-mc-offcanvas .woocommerce-mini-cart-item {
		grid-template-columns: minmax(0, 1fr);
	}
	body .uael-mc .uael-mc-offcanvas ul li.woocommerce-mini-cart-item img {
		width: 96px !important;
	}
}

/* Checkout order summary */
.wc-block-components-order-summary .wc-block-components-order-summary-item:not(.is-bundled__hidden) {
	grid-template-columns: 24% minmax(0, 1fr) max-content;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image img {
	width: 100% !important;
}
@container wws-order-summary (max-width: 330px) {
	.wc-block-components-order-summary .wc-block-components-order-summary-item:not(.is-bundled__hidden) {
		grid-template-columns: 24% minmax(0, 1fr);
	}
}
@container wws-order-summary (max-width: 290px) {
	.wc-block-components-order-summary .wc-block-components-order-summary-item:not(.is-bundled__hidden) {
		grid-template-columns: minmax(0, 1fr);
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__image img {
		width: 96px !important;
	}
}

/* ---- 1.5.2 — No drop shadow on thumbnails (drawer + order summary). ---- */
body .uael-mc .uael-mc-offcanvas ul li.woocommerce-mini-cart-item img,
.uael-mc-offcanvas .woocommerce-mini-cart-item a,
.wc-block-components-order-summary .wc-block-components-order-summary-item__image img {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

/* ---- 1.6.3 — Drawer: selected options read "Label: value" on one line when
   they fit (the value wraps after the label otherwise), with tighter lines
   and a little more space between options. ---------------------------- */
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation,
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation * {
	line-height: 1.3 !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dt,
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dd {
	display: inline !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dd p {
	display: inline !important;
	margin: 0 !important;
}
/* Each option starts on its own line, 6px below the previous one. */
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dt::before {
	content: "";
	display: block;
	height: 6px;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dt:first-of-type::before {
	height: 0;
}
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dt::after {
	content: " ";
}
/* Kit "Includes:" keeps its bulleted list on the lines below. */
.uael-mc-offcanvas .woocommerce-mini-cart-item dl.variation dd ul.wws-includes {
	display: block !important;
	margin-top: 3px !important;
}

/* Drawer header: "3 items in cart" on the same line as the close button
   (the button is lifted out of the flow into the top-right corner), with
   less space above and below. */
.uael-mc-offcanvas .uael-mc-offcanvas__close-btn {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	margin: 0 !important;
	z-index: 2;
}
.uael-mc-offcanvas .uael-mc-offcanvas__header {
	min-height: 22px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 40px 12px 10px !important; /* right: room for the close button */
	align-items: center !important;
}