/*
 * Cart drawer (design/artboards/cart-drawer.html; tangens-components.md, Commerce → Cart drawer) —
 * the frame; the lines and summary inside are components/cart.css.
 * clamp(440px, 33vw, 600px) from 768 — 475 at 1440 — over a 0.35 scrim; full screen below. The
 * artboard draws the drawer at one density at both widths (the 390 board sets no overrides), so its
 * sizes are fixed rather than clamped. The header and foot stay put; the lines scroll.
 */

.cart-drawer {
	position: fixed;
	/* Below the WordPress admin bar when it is shown. */
	inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
	z-index: 70;
}

.cart-drawer__scrim {
	position: absolute;
	inset: 0;
	background: var(--overlay-drawer);
	opacity: 0;
	transition: opacity var(--dur-panel) var(--ease);
}

.cart-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: clamp(440px, 33vw, 600px);
	max-width: 100%;
	background: var(--canvas);
	color: var(--ink);
	transform: translateX(100%);
	transition: transform var(--dur-panel) var(--ease);
}

.cart-drawer.is-open .cart-drawer__scrim {
	opacity: 1;
}

.cart-drawer.is-open .cart-drawer__panel {
	transform: none;
}

html.has-cart-drawer {
	overflow: hidden;
}

/* ——— Header: title and close, a hairline beneath ——— */
.cart-drawer__head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	padding: calc(1.625rem + env(safe-area-inset-top, 0px)) 2rem 1.375rem;
	border-block-end: var(--hairline) solid var(--line);
}

.cart-drawer__title {
	font-size: 1.625rem;
	font-weight: 300;
	line-height: normal;
}

.cart-drawer__close {
	position: relative;
	width: 1.375rem;
	height: 1.375rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* A 44px target around the 22px cross (tokens §6, touch minimum). */
.cart-drawer__close::before {
	content: "";
	position: absolute;
	inset: calc((var(--touch-min) - 1.375rem) / -2);
}

.cart-drawer__close span {
	position: absolute;
	inset-inline: 0;
	top: 0.625rem;
	height: 1.5px;
	background: var(--ink);
}

.cart-drawer__close span:first-child {
	transform: rotate(45deg);
}

.cart-drawer__close span:last-child {
	transform: rotate(-45deg);
}

/* ——— Content: the lines scroll between the header and the foot ——— */
.cart-drawer__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

/* Add to cart opens the drawer at once (assets/js/cart.js): one meta line in graphite until the
   server answers, the content dimmed beneath it — and an empty cart's text hidden, not contradicting it. */
.cart-drawer__loading {
	flex: none;
	margin: 0;
	padding: 1.25rem 2rem 0;
	color: var(--graphite);
	font-size: var(--fs-meta);
	line-height: var(--lh-meta);
}

.cart-drawer.is-adding .cart-empty {
	visibility: hidden;
}

.cart-drawer__content[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.cart-drawer .cart-lines {
	flex: 1 1 auto;
	padding: 0.5rem 2rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cart-drawer .cart-summary {
	flex: none;
	padding: 1.5rem 2rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
}

.cart-drawer .cart-empty {
	padding: 1.5rem 2rem;
}

/* Full screen below 768. */
@media (max-width: 767px) {
	.cart-drawer__panel {
		width: 100%;
	}
}