/**
 * cart.css — the slide-out mini cart.
 *
 * Owns three things and nothing else: the drawer in
 * template-parts/header/mini-cart.php, its line items, and the header's live
 * count badge (the header module renders that badge; this file paints it, and
 * assets/js/cart.js writes its value — the contract between the three is the
 * [data-bedi-cart-count] attribute).
 *
 * WHAT THIS PASS CHANGED
 *
 * Skin only. The drawer is still a drawer, the phone variant is still a
 * full-height sheet with a grab handle, and the checkout bar is still pinned to
 * the bottom edge. Every focus trap, every aria attribute, the Escape handler,
 * the focus return and the scroll lock are untouched — they live in cart.js and
 * in the template, and nothing here weakens them.
 *
 * What changed is that this was dark frosted glass and is now the original
 * bedishop.ge identity: a #FFFFFF panel, #E5E5E5 hairlines, #252531 ink, the
 * kit's #2D81FF checkout button, an #FFEF00 count chip, and a plain
 * rgba(0, 0, 0, 0.5) scrim with no blur.
 *
 * THE PALETTE IS DECLARED HERE, AND THE SELECTOR LIST MATTERS
 *
 * Section 1 restates the same extracted kit values header.css section 1 carries.
 * base.css's :root has SINCE been flipped to the light kit, so its tokens now
 * agree with these values exactly on a normal request; what section 1 still does
 * is keep <html data-theme="dark"> from reaching this drawer, which is deliberate
 * and is documented in full at the top of header.css. Change one of the three
 * blocks, change all three.
 *
 * The block names BOTH .bedi-cart-drawer and [data-bedi-cart-count], and the
 * second is not redundant. cart.js moves the drawer to <body>, but the count
 * badge is rendered by the header module and stays in the header bar — it is
 * never a descendant of the drawer, so a palette scoped only to the drawer would
 * never reach it and the chip would fall back to an unresolved var().
 *
 * MOTION
 * Transform and opacity only: nothing here animates width, height, top or left,
 * so every state change stays on the compositor. Durations and easings are read
 * from motion tokens with the design system's documented values as fallbacks.
 *
 * MOBILE IS A DIFFERENT SHAPE, NOT A SMALLER ONE
 * This file is mobile-first, and the phone layout is not the desktop drawer
 * scaled down: on a phone the cart is a full-height sheet that rises from the
 * bottom edge with a grab handle and a thumb-reachable checkout bar, while from
 * 768px up it becomes a panel that slides in from the inline end. The two use
 * different axes, so they are written as two separate states rather than one
 * with overrides.
 *
 * @package Bedi\Theme
 */

/* =========================================================================
 * 1. TOKENS
 *
 * The extracted palette, then the component's own lengths and motion aliases.
 * See header.css section 1 for the full provenance and the frequency counts.
 *
 * --bedi-cart-alert is #D50045, the kit's alert red, NOT the #F50000 alert badge
 * from header template 4148. The distinction is contrast: #F50000 on white is
 * 4.3:1 and fails the 4.5:1 body text needs, while #D50045 is 5.4:1 and passes.
 * Every use of it below is text or a border around text. #F50000 would still be
 * correct as a badge FILL, where only the 3:1 non-text threshold applies.
 * ====================================================================== */

.bedi-cart-drawer,
[data-bedi-cart-count] {
	--bedi-cart-surface: #ffffff;
	--bedi-cart-wash: #f2f5f9;

	--bedi-cart-ink: #252531;
	--bedi-cart-ink-muted: #777777;

	--bedi-cart-line: #e5e5e5;
	--bedi-cart-line-strong: #d5d5db;

	--bedi-cart-accent: #2d81ff;
	--bedi-cart-accent-deep: #0668fc;
	--bedi-cart-ink-on-accent: #ffffff;

	/* The count chip. #FFEF00 is the extracted badge highlight and it is a very
	   light yellow, so the ink on it has to be dark — #252531 on #FFEF00 is
	   12.68:1. White ink on this fill would be 1.19:1: a chip with an invisible
	   number, which is the whole reason the pair is stated together. */
	--bedi-cart-badge: #ffef00;
	--bedi-cart-badge-ink: #252531;

	--bedi-cart-alert: #d50045;

	--bedi-cart-scrim: rgba(0, 0, 0, 0.5);
	--bedi-cart-shadow: 0 1px 0 0 rgba(41, 43, 46, 0.1), 0 18px 40px -22px rgba(41, 43, 46, 0.1);

	/* 3.69:1 against #FFFFFF, so it clears the 3:1 WCAG 1.4.11 asks of a focus
	   indicator. --bedi-accent is #4FB3E8 under base.css's dark palette — 2.35:1
	   on white, a ring nobody can see — and #2D81FF under its light :root. Stated
	   here so it is 3.69:1 either way. See header.css section 16. */
	--bedi-cart-focus: var(--bedi-cart-accent);
}

.bedi-cart-drawer {
	--bedi-cart-panel-width: min(27rem, 100vw);
	--bedi-cart-thumb: 4rem;
	--bedi-cart-radius: var(--bedi-radius-lg, 12px);

	/* The design system's motion scale, under the names motion.css actually
	   publishes (--bedi-dur-micro / --bedi-dur / --bedi-dur-lg and
	   --bedi-ease-in / --bedi-ease-out). This file was written against a
	   proposed --bedi-duration-* / --bedi-ease-entrance spelling that never
	   shipped, so every one of these silently resolved to its literal fallback
	   and the drawer was decoupled from the theme's motion scale. The fallbacks
	   stay — they are the documented values — but the tokens now resolve. */
	--bedi-cart-micro: var(--bedi-dur-micro, 120ms);
	--bedi-cart-reveal: var(--bedi-dur, 220ms);
	--bedi-cart-large: var(--bedi-dur-lg, 420ms);
	--bedi-cart-in: var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1));
	--bedi-cart-out: var(--bedi-ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}

/* =========================================================================
 * 2. THE SHELL
 * ====================================================================== */

/* The root is display:block, which outranks the user-agent rule for [hidden]
   — author styles always beat UA styles, at any specificity. So the hidden
   state has to be restated explicitly. Without this line the drawer is visible
   from first paint, over the whole page, before cart.js has run. */
.bedi-cart-drawer {
	display: block;
	inset: 0;
	position: fixed;
	z-index: var(--bedi-z-drawer, 200);
}

.bedi-cart-drawer[hidden] {
	display: none;
}

/* While closing, the element stays in the document for the length of the
   transition. Without this it would spend that time as an invisible sheet of
   glass over the page, swallowing every click. */
.bedi-cart-drawer:not(.is-open) {
	pointer-events: none;
}

.bedi-cart-drawer.is-open {
	pointer-events: auto;
}

/* ---- 2a. Scrim ---------------------------------------------------------
 *
 * The extracted overlay scrim, rgba(0, 0, 0, 0.5), and nothing else. The
 * blur(8px) saturate(120%) this carried belonged to the dark pass: a
 * backdrop-filter across the whole viewport is the most expensive thing a phone
 * GPU can be asked for, and a plain 50% black already does the only job a scrim
 * has, which is to push the page behind the drawer out of the reading order. */

.bedi-cart-drawer__scrim {
	background-color: var(--bedi-cart-scrim);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity var(--bedi-cart-large) var(--bedi-cart-out);
}

.bedi-cart-drawer.is-open .bedi-cart-drawer__scrim {
	opacity: 1;
	transition-timing-function: var(--bedi-cart-in);
}

/* ---- 2b. Panel --------------------------------------------------------- */

/*
 * THE SURFACE, AND WHY THE SELECTOR CARRIES ITS OWN ANCESTOR.
 *
 * mini-cart.php writes `class="bedi-cart-drawer__panel bedi-glass"`. That
 * template belongs to another module in this pass, so the frosted recipe has to
 * be overridden from here — and a bare `.bedi-cart-drawer__panel` cannot do it.
 * motion.css's `.bedi-glass` is also (0,1,0), so the two would TIE and the
 * winner would be whichever stylesheet the enqueue order happened to print
 * last. That is not a thing to leave to chance on the one overlay that has to
 * stay readable: an unreadable cart is lost orders, not a cosmetic regression.
 *
 * `.bedi-cart-drawer .bedi-cart-drawer__panel` is (0,2,0) and beats (0,1,0)
 * deterministically, whatever the load order. It is used for exactly the four
 * properties .bedi-glass declares — background, border, box-shadow and
 * backdrop-filter — and for nothing else; geometry stays on the plain class.
 *
 * It also does not NAME .bedi-glass, so the day that class is removed from the
 * template this rule keeps painting the panel white instead of leaving it
 * transparent. Overriding via `.bedi-cart-drawer__panel.bedi-glass` would have
 * broken at exactly that moment.
 *
 * The fill is flat #FFFFFF. It was --bedi-glass-strong over a blur, which never
 * worked here anyway: a drawer sits over arbitrary page content, and on this
 * shop that content is a wall of white product photography, which a blur does
 * not darken. Opaque was always the right answer and it is what the original
 * used.
 */
.bedi-cart-drawer .bedi-cart-drawer__panel {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: var(--bedi-cart-surface);
	border: 0;
	box-shadow: var(--bedi-cart-shadow);
}

.bedi-cart-drawer__panel {
	color: var(--bedi-cart-ink);
	display: flex;
	flex-direction: column;
	max-width: 100%;
	overflow: hidden;
	position: absolute;
	transition:
		transform var(--bedi-cart-large) var(--bedi-cart-out),
		opacity var(--bedi-cart-large) var(--bedi-cart-out);
}

.bedi-cart-drawer.is-open .bedi-cart-drawer__panel {
	transition-timing-function: var(--bedi-cart-in);
}

/* cart.js focuses the panel on open so the dialog and its title are announced.
   That is programmatic focus and must not draw a ring; :focus-visible, which
   only a keyboard path can reach, is left completely alone. */
.bedi-cart-drawer__panel:focus {
	outline: none;
}

/* ---- 2c. Phone: a sheet that rises from the bottom --------------------- */

.bedi-cart-drawer__panel {
	inset: 0;
	transform: translateY(100%);
}

.bedi-cart-drawer.is-open .bedi-cart-drawer__panel {
	transform: translateY(0);
}

/* The grab handle. Purely an affordance: it says "this came up from the bottom
   and it is a sheet", which is the whole point of the phone treatment. It is
   aria-hidden in the markup and never the control anything depends on.
   #D5D5DB rather than the #E5E5E5 hairline — a colour tuned to read as a 1px
   line is too faint to read as a 4px grab bar. Both are kit greys. */
.bedi-cart-drawer__grip {
	background-color: var(--bedi-cart-line-strong);
	block-size: 4px;
	border-radius: 999px;
	flex: 0 0 auto;
	inline-size: 2.5rem;
	margin: var(--bedi-space-2xs) auto 0;
}

/* ---- 2d. Tablet and up: a panel from the inline end --------------------
 *
 * The border rule here carries the same ancestor as the surface block in 2b, and
 * for the same reason plus one more: `border: 0` up there is (0,2,0), and a
 * media query adds NO specificity, so a bare `.bedi-cart-drawer__panel` here
 * would be (0,1,0) and the desktop panel would silently lose its leading edge.
 * Matching (0,2,0) and coming later in the file is what makes this win. */

@media (min-width: 48em) {
	.bedi-cart-drawer .bedi-cart-drawer__panel {
		border-inline-start: var(--bedi-border-width) solid var(--bedi-cart-line);
	}

	.bedi-cart-drawer__panel {
		border-start-start-radius: var(--bedi-cart-radius);
		border-end-start-radius: var(--bedi-cart-radius);
		inline-size: var(--bedi-cart-panel-width);
		/* Logical, not `inset: 0 0 0 auto`. A physical inset would pin the panel
		   to the RIGHT edge in RTL too, and the translateX(-100%) below would
		   then park it one width to the left of that — mid-screen — instead of
		   off-canvas. inset-inline flips with `dir`, so the panel hangs off the
		   correct edge in both directions. Logical and physical declarations
		   cascade together in source order, so this overrides the `inset: 0`
		   the phone layout set above. */
		inset-block: 0;
		inset-inline: auto 0;
		transform: translateX(100%);
	}

	.bedi-cart-drawer.is-open .bedi-cart-drawer__panel {
		transform: translateX(0);
	}

	/* Logical properties flip for RTL by themselves; translateX is physical and
	   does not. `dir` is set on <html> by language_attributes(), and cart.js
	   moves the drawer to <body>, so a plain descendant selector matches. */
	[dir="rtl"] .bedi-cart-drawer__panel {
		transform: translateX(-100%);
	}

	[dir="rtl"] .bedi-cart-drawer.is-open .bedi-cart-drawer__panel {
		transform: translateX(0);
	}

	.bedi-cart-drawer__grip {
		display: none;
	}
}

@media (min-width: 64em) {
	.bedi-cart-drawer {
		--bedi-cart-panel-width: min(29rem, 100vw);
	}
}

/* =========================================================================
 * 3. CANCELLING .bedi-glow ON THE CHECKOUT BUTTON
 *
 * mini-cart.php writes `class="bedi-cart-action bedi-cart-action--primary
 * bedi-glow"`. The animated conic border was dark-pass language and the button
 * is now a flat #2D81FF fill, so both of motion.css's glow branches have to be
 * neutralised — and it has two, which is the trap here.
 *
 * Branch one is the masked ::before, at (0,1,1). Branch two only exists where
 * mask-composite is unsupported, has no pseudo-element at all, and recolours the
 * element's own border on hover and focus at (0,2,0). Cancelling only the first
 * leaves the button growing a bright accent outline on hover in exactly the
 * browsers that could not draw the ring — a difference nobody would notice
 * testing on a current Chrome.
 *
 * Branch two has THREE selectors, not two: `:hover`, `:focus-within` and
 * `.bedi-glow.is-inview`, all at (0,2,0). The first two are cancelled below.
 * .is-inview is the one that matters most and it was missed: assets/js/motion.js
 * watches `.bedi-reveal, .bedi-glow` and adds .is-inview while the element is on
 * screen, so an open drawer's checkout button carries it for as long as the
 * drawer is open. At (0,2,0) it outranks section 5's rest-state
 * `.bedi-cart-action--primary { border-color: ... }` at (0,1,0) outright — no
 * enqueue order saves that one — and the button's leading edge would be painted
 * from base.css's --bedi-accent instead of this file's token. Identical today,
 * because base.css's light :root sets --bedi-accent to the same #2D81FF; a
 * mismatched 1px edge the moment that token differs.
 *
 * The selectors below are (0,2,1) and (0,3,0) and win on specificity alone.
 * ====================================================================== */

.bedi-cart-drawer .bedi-cart-action--primary::before {
	content: none;
	display: none;
}

/* Must stay ABOVE the :hover / :focus-within rule that follows: that rule is
   also (0,3,0), so source order is what lets it still win while the button is
   actually hovered or focused. */
.bedi-cart-drawer .bedi-cart-action--primary.is-inview {
	border-color: var(--bedi-cart-accent);
}

.bedi-cart-drawer .bedi-cart-action--primary:hover,
.bedi-cart-drawer .bedi-cart-action--primary:focus-within {
	border-color: var(--bedi-cart-accent-deep);
}

/* =========================================================================
 * 4. HEAD, BODY, FOOT
 *
 * A flex column: the head and the foot are fixed-size children and only the
 * body scrolls, so the checkout bar is pinned to the bottom edge of the panel
 * at every viewport size without position: sticky and without a scroll
 * listener. On a phone that bar lands exactly where the thumb is.
 * ====================================================================== */

.bedi-cart-drawer__head {
	align-items: center;
	border-block-end: var(--bedi-border-width) solid var(--bedi-cart-line);
	display: flex;
	flex: 0 0 auto;
	gap: var(--bedi-space-sm);
	justify-content: space-between;
	padding: var(--bedi-space-sm) var(--bedi-space-md);
}

.bedi-cart-drawer__title {
	color: var(--bedi-cart-ink);
	font-size: var(--bedi-text-lg);
	line-height: var(--bedi-leading-tight);
	margin: 0;
}

.bedi-cart-drawer__close {
	align-items: center;
	block-size: 2.5rem;
	border: var(--bedi-border-width) solid transparent;
	border-radius: 999px;
	color: var(--bedi-cart-ink-muted);
	display: inline-flex;
	flex: 0 0 auto;
	inline-size: 2.5rem;
	justify-content: center;
	transition:
		color var(--bedi-cart-micro) var(--bedi-cart-out),
		border-color var(--bedi-cart-micro) var(--bedi-cart-out),
		background-color var(--bedi-cart-micro) var(--bedi-cart-out),
		transform var(--bedi-cart-micro) var(--bedi-cart-out);
}

.bedi-cart-drawer__close:hover,
.bedi-cart-drawer__close:focus-visible {
	background-color: var(--bedi-cart-wash);
	border-color: var(--bedi-cart-line);
	color: var(--bedi-cart-ink);
}

.bedi-cart-drawer__close:hover .bedi-cart-drawer__close-icon {
	transform: rotate(90deg);
}

.bedi-cart-drawer__close:active {
	transform: scale(0.94);
}

.bedi-cart-drawer__close-icon {
	transition: transform var(--bedi-cart-reveal) var(--bedi-cart-in);
}

.bedi-cart-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--bedi-space-md);
	/* scrollbar-color inherits from html, scrollbar-width does not. base.css
	   names this list as one of the two scroll containers that has to set it
	   itself. */
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.bedi-cart-drawer__foot {
	border-block-start: var(--bedi-border-width) solid var(--bedi-cart-line);
	flex: 0 0 auto;
	padding: var(--bedi-space-sm) var(--bedi-space-md);
	/* Clear of the home indicator on a phone, and unchanged on hardware that
	   reports no inset. */
	padding-block-end: calc(var(--bedi-space-sm) + env(safe-area-inset-bottom, 0px));
}

.bedi-cart-drawer__foot[hidden] {
	display: none;
}

.bedi-cart-drawer__subtotal {
	align-items: baseline;
	display: flex;
	gap: var(--bedi-space-sm);
	justify-content: space-between;
	margin: 0;
}

.bedi-cart-drawer__subtotal-label {
	color: var(--bedi-cart-ink-muted);
	font-size: var(--bedi-text-sm);
}

.bedi-cart-drawer__subtotal-value {
	color: var(--bedi-cart-ink);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-bold);
	font-variant-numeric: tabular-nums;
}

.bedi-cart-drawer__note {
	color: var(--bedi-cart-ink-muted);
	font-size: var(--bedi-text-xs);
	margin: var(--bedi-space-3xs) 0 var(--bedi-space-sm);
}

/*
 * STACKED, NOT SIDE BY SIDE.
 *
 * Two 1fr columns inside a ~340px drawer gives each button about 150px, and
 * "შეკვეთის გაფორმება" does not fit that at the theme's 16px display face — it
 * wrapped to two lines and both buttons grew to match. Georgian does not
 * hyphenate, so there is no shorter way to set it either.
 *
 * Stacking gives each label the drawer's full width and puts the primary
 * action first, which is also the order of intent: the drawer exists to send
 * someone to checkout, and "view cart" is the way out of that.
 */
.bedi-cart-drawer__actions {
	display: grid;
	gap: var(--bedi-space-2);
	grid-template-columns: minmax(0, 1fr);
}

/* Source order is view-cart then checkout, which is right for the keyboard —
   the safer action first. `order` puts the primary on top visually without
   changing that. */
.bedi-cart-drawer__actions .bedi-cart-action--primary { order: 1; }
.bedi-cart-drawer__actions .bedi-cart-action--ghost   { order: 2; }

/* =========================================================================
 * 5. ACTIONS
 *
 * Scoped to the cart on purpose. The drawer must not inherit a button style
 * from another module and change shape when that module is edited.
 * ====================================================================== */

/*
 * THE DRAWER'S TWO BUTTONS ARE THE THEME'S BUTTONS.
 *
 * They were a component of their own — a 6px radius (`--bedi-radius-md`), 13px
 * text (`--bedi-text-sm`), 44px tall and in the body face — sitting under a
 * drawer whose primary action is the same "go to checkout" the buy rail
 * renders as a 52px accent button. Two different-looking answers to the same
 * question, and the smaller one was on the surface with the most intent behind
 * it.
 *
 * Now: the shared 12px radius (--bedi-radius-lg), MarkGEO at 16px/500, 48px.
 * Same as `.bedi-buy-now` and the generic Woo button, so the whole site has
 * one button — and at 12px they finally match --bedi-cart-radius, the panel
 * they sit in.
 */
.bedi-cart-action {
	align-items: center;
	border: var(--bedi-border-width) solid transparent;
	border-radius: var(--bedi-radius-lg);
	display: inline-flex;
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-medium);
	justify-content: center;
	min-block-size: 48px;
	padding: 0 var(--bedi-space-5);
	position: relative;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--bedi-cart-micro) var(--bedi-cart-out),
		border-color var(--bedi-cart-micro) var(--bedi-cart-out),
		color var(--bedi-cart-micro) var(--bedi-cart-out),
		box-shadow var(--bedi-cart-micro) var(--bedi-cart-out),
		transform var(--bedi-cart-micro) var(--bedi-cart-out);
}

.bedi-cart-action--ghost {
	background-color: var(--bedi-cart-surface);
	border-color: var(--bedi-cart-line);
	color: var(--bedi-cart-ink);
}

.bedi-cart-action--ghost:hover,
.bedi-cart-action--ghost:focus-visible {
	background-color: var(--bedi-cart-wash);
	border-color: var(--bedi-cart-line-strong);
	color: var(--bedi-cart-ink);
}

/*
 * The one control this drawer exists to deliver the visitor to. The kit's
 * #2D81FF with #FFFFFF ink — the pair, never the fill with a guessed ink.
 *
 * #FFFFFF on #2D81FF measures 3.69:1. That clears the 3:1 for a non-text
 * control but is under the 4.5:1 AA wants for this 14px / 500 label, and it is
 * recorded rather than quietly fixed: #2D81FF is the client's own kit accent and
 * the brief asks for the identity reproduced exactly. header.css section 1 has
 * the full note and the one-line remedy — the kit's own #0668FC, already this
 * button's hover fill, carries white at 4.78:1.
 *
 * It was --bedi-accent over --bedi-on-accent, which in the dark palette is
 * #4FB3E8 with near-black ink. Both are gone with the dark pass.
 */
.bedi-cart-action--primary {
	background-color: var(--bedi-cart-accent);
	border-color: var(--bedi-cart-accent);
	color: var(--bedi-cart-ink-on-accent);
}

.bedi-cart-action--primary:hover,
.bedi-cart-action--primary:focus-visible {
	background-color: var(--bedi-cart-accent-deep);
	border-color: var(--bedi-cart-accent-deep);
	color: var(--bedi-cart-ink-on-accent);
	box-shadow: var(--bedi-cart-shadow);
	transform: translateY(-1px);
}

/*
 * Last in the section on purpose. :active and --primary:hover both score
 * (0,2,0), so at equal specificity source order decides — with this rule above
 * the hover rules a mouse press on the primary button kept the -1px hover lift
 * and showed no press feedback at all, because a pressed button is always also
 * hovered. Declared after them, the press wins for as long as it lasts.
 */
.bedi-cart-action:active {
	transform: translateY(0) scale(0.985);
}

/* =========================================================================
 * 6. LINE ITEMS
 * ====================================================================== */

.bedi-cart-items {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-cart-items[hidden] {
	display: none;
}

.bedi-cart-item {
	align-items: start;
	border-block-end: var(--bedi-border-width) solid var(--bedi-cart-line);
	column-gap: var(--bedi-space-xs);
	display: grid;
	grid-template-columns: var(--bedi-cart-thumb) minmax(0, 1fr) auto;
	padding-block: var(--bedi-space-sm);
	position: relative;
	row-gap: var(--bedi-space-2xs);
	transition: opacity var(--bedi-cart-reveal) var(--bedi-cart-out);
	/* `backwards`, never `forwards` or `both`. A finished animation with a
	   forward fill keeps winning the cascade over normal declarations, so a
	   `to { opacity: 1 }` would permanently outrank the [data-pending] dimming
	   below and the pending state would never be visible. */
	animation: bedi-cart-item-in var(--bedi-cart-reveal) var(--bedi-cart-in) backwards;
}

.bedi-cart-item:last-child {
	border-block-end: 0;
}

@keyframes bedi-cart-item-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* A row whose removal is in flight. Its controls are genuinely disabled by
   cart.js as well — this only makes that state visible. */
.bedi-cart-item[data-pending] {
	opacity: 0.5;
}

.bedi-cart-item[data-pending] .bedi-cart-item__remove {
	cursor: progress;
}

.bedi-cart-item__media {
	background-color: var(--bedi-cart-wash);
	block-size: var(--bedi-cart-thumb);
	border: var(--bedi-border-width) solid var(--bedi-cart-line);
	border-radius: var(--bedi-radius-md);
	inline-size: var(--bedi-cart-thumb);
	overflow: hidden;
}

.bedi-cart-item__media-link {
	display: block;
	block-size: 100%;
}

/*
 * CONTAIN, NOT COVER, AND THE PAD IS PART OF THE SAME DECISION.
 *
 * These are catalogue product shots — a cable, a battery, a router — cut out on
 * white and rarely square. `cover` filled the 1:1 thumb by cropping, so a wide
 * product lost both its ends and a customer checking their cart saw the middle
 * third of a cable. `contain` shows the whole thing, and the 6px inset keeps it
 * off the thumb's rounded corner instead of touching it.
 *
 * The well behind it is white for the same reason it is white in the product
 * rail: these photographs already have a white background, and a tinted well
 * behind one draws a rectangle the eye mistakes for the product's own edge.
 */
.bedi-cart-item__img {
	background-color: var(--bedi-surface, #ffffff);
	block-size: 100%;
	inline-size: 100%;
	object-fit: contain;
	padding: 6px;
	transition: transform var(--bedi-cart-reveal) var(--bedi-cart-in);
}

.bedi-cart-item:hover .bedi-cart-item__img {
	transform: scale(1.06);
}

.bedi-cart-item__text {
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-3xs);
	min-inline-size: 0;
}

.bedi-cart-item__name {
	color: var(--bedi-cart-ink);
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
	line-height: var(--bedi-leading-snug);
	text-decoration: none;
	transition: color var(--bedi-cart-micro) var(--bedi-cart-out);
}

a.bedi-cart-item__name:hover,
a.bedi-cart-item__name:focus-visible {
	color: var(--bedi-cart-accent-deep);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.bedi-cart-item__meta {
	color: var(--bedi-cart-ink-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--bedi-text-xs);
	gap: 0 var(--bedi-space-3xs);
	margin: 0;
}

.bedi-cart-item__meta dt {
	margin: 0;
}

/* Direct children only. cart.js builds a flat <dl> whose <dt> is the bare
   attribute name, so it needs the separator added here — but
   wc_get_formatted_cart_item_data() already writes "Size:" into its own <dt>,
   one level deeper, and a descendant selector would render that as "Size::". */
.bedi-cart-item__meta > dt::after {
	content: ":";
}

.bedi-cart-item__meta dd {
	margin: 0 var(--bedi-space-2xs) 0 0;
}

/* WooCommerce's own variation markup, which wc_get_formatted_cart_item_data()
   returns for the server-rendered rows: a <dl class="variation"> nested one
   level deeper than the flat <dl> cart.js builds. Flattening it here means a
   re-render after a removal does not visibly reflow the remaining rows. */
.bedi-cart-item__meta .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--bedi-space-3xs);
	margin: 0;
}

.bedi-cart-item__meta p {
	margin: 0;
}

.bedi-cart-item__qty {
	color: var(--bedi-cart-ink-muted);
	font-size: var(--bedi-text-xs);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.bedi-cart-item__side {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-2xs);
	text-align: end;
}

.bedi-cart-item__total {
	color: var(--bedi-cart-ink);
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-bold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* WooCommerce wraps prices in its own spans; keep them from inheriting a link
   colour or a smaller size from woo.css. */
.bedi-cart-item__total .amount,
.bedi-cart-drawer__subtotal-value .amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.bedi-cart-item__remove {
	align-items: center;
	block-size: 2rem;
	border: var(--bedi-border-width) solid transparent;
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-cart-ink-muted);
	display: inline-flex;
	inline-size: 2rem;
	justify-content: center;
	transition:
		background-color var(--bedi-cart-micro) var(--bedi-cart-out),
		border-color var(--bedi-cart-micro) var(--bedi-cart-out),
		color var(--bedi-cart-micro) var(--bedi-cart-out),
		opacity var(--bedi-cart-micro) var(--bedi-cart-out),
		transform var(--bedi-cart-micro) var(--bedi-cart-out);
}

/* The control is always reachable, never revealed only on hover: a hover-only
   affordance does not exist on a touch screen, and this drawer is used mostly
   on phones. Hover only strengthens it.
   The 0.75 idle opacity the dark version used is gone: #777777 at 75% over
   white composites to roughly #9B9B9B, about 2.8:1, which fails the 3:1 a
   non-text control needs. Full strength #777777 is 4.48:1. */
.bedi-cart-item__remove:hover,
.bedi-cart-item__remove:focus-visible {
	background-color: var(--bedi-cart-wash);
	border-color: var(--bedi-cart-line);
	color: var(--bedi-cart-alert);
}

.bedi-cart-item__remove:active {
	transform: scale(0.9);
}

.bedi-cart-item__remove:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

/* =========================================================================
 * 7. ERRORS
 *
 * Never colour alone: each message carries a leading mark, so it still reads
 * as an error in monochrome, at any contrast setting, and for a visitor who
 * cannot distinguish the danger hue.
 * ====================================================================== */

.bedi-cart-item__error,
.bedi-cart-drawer__notice {
	color: var(--bedi-cart-alert);
	font-size: var(--bedi-text-xs);
	line-height: var(--bedi-leading-snug);
	margin: 0;
}

.bedi-cart-item__error {
	grid-column: 1 / -1;
}

.bedi-cart-item__error::before,
.bedi-cart-drawer__notice::before {
	content: "\26a0\fe0e\00a0";
}

.bedi-cart-item__error[hidden],
.bedi-cart-drawer__notice[hidden] {
	display: none;
}

.bedi-cart-drawer__notice {
	border: var(--bedi-border-width) solid var(--bedi-cart-alert);
	border-radius: var(--bedi-radius-md);
	margin-block-start: var(--bedi-space-sm);
	padding: var(--bedi-space-2xs) var(--bedi-space-xs);
}

/* =========================================================================
 * 8. EMPTY STATE
 * ====================================================================== */

.bedi-cart-empty {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-2xs);
	padding-block: var(--bedi-space-2xl) var(--bedi-space-xl);
	text-align: center;
}

.bedi-cart-empty[hidden] {
	display: none;
}

/*
 * THE ILLUSTRATION. .bedi-cart-empty__icon was a 56px stroked trolley tinted
 * --bedi-cart-line-strong; the rule is retired with the glyph and this replaces
 * it. The size is capped in BOTH axes and the intrinsic ratio is square, so the
 * drawer cannot letterbox it if a future art file arrives at a different size.
 *
 * It enters rather than appearing. .bedi-cart-empty is revealed by toggling
 * [hidden] from cart.js, which is a display switch and cannot be transitioned —
 * so the entrance is an ANIMATION on the illustration, which starts the moment
 * the element is laid out. 420ms, a 12px rise and a 4% scale: enough to register
 * as "this state arrived" and short enough that a visitor emptying their cart
 * does not wait for it. It is switched off wholesale under
 * prefers-reduced-motion in section 14.
 */
.bedi-cart-empty__art {
	animation: bedi-cart-empty-in 420ms var(--bedi-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
	block-size: auto;
	inline-size: min(220px, 62%);
	max-inline-size: 220px;
}

@keyframes bedi-cart-empty-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.bedi-cart-empty__title {
	color: var(--bedi-cart-ink);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-bold);
	margin: 0;
}

.bedi-cart-empty__text {
	color: var(--bedi-cart-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: 0 0 var(--bedi-space-xs);
	max-inline-size: 26ch;
}

/* =========================================================================
 * 9. THE HEADER COUNT BADGE
 *
 * Hooked on the data attribute rather than on a class, because the header
 * module owns the markup and this file must keep working if it renames its
 * own classes. cart.js writes the textContent and flips data-empty.
 *
 * #FFEF00 with #252531 ink — the extracted badge highlight and the only ink
 * that is readable on it. It lives in the header bar, NOT inside the drawer,
 * which is why the palette in section 1 names this attribute selector too.
 * ====================================================================== */

[data-bedi-cart-count] {
	align-items: center;
	background-color: var(--bedi-cart-badge);
	border-radius: var(--bedi-radius-pill, 999px);
	color: var(--bedi-cart-badge-ink);
	display: inline-flex;
	font-size: var(--bedi-text-xs);
	font-variant-numeric: tabular-nums;
	font-weight: var(--bedi-weight-bold);
	justify-content: center;
	line-height: 1;
	min-inline-size: 1.25rem;
	/* Vertical padding is not optional: with `padding: 0` and `line-height: 1`
	   the pill collapses to the cap height of a 12px digit and reads as a
	   coloured smudge beside the icon. */
	padding: 0.15rem 0.35rem;
	transform-origin: center;
	/* The global motion tokens, not the --bedi-cart-* motion aliases in section
	   1: those are declared on .bedi-cart-drawer and this element lives in the
	   header, outside it, so they would not inherit here. */
	transition:
		opacity var(--bedi-dur-micro, 120ms) var(--bedi-ease-out, cubic-bezier(0.4, 0, 0.2, 1)),
		transform var(--bedi-dur-micro, 120ms) var(--bedi-ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}

/* An empty cart shows no badge, but the element stays in the layout so the
   icon beside it never shifts when the first product is added. */
[data-bedi-cart-count][data-empty="true"] {
	opacity: 0;
	transform: scale(0.5);
}

/* `backwards` for the same cascade reason as the row animation: a forward fill
   would hold `transform: scale(1)` after the pop and outrank the empty state
   above, leaving a full-size badge on an emptied cart if cart.js ever failed to
   strip the class. */
[data-bedi-cart-count].is-bumped {
	animation: bedi-cart-pop 320ms var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1)) backwards;
}

@keyframes bedi-cart-pop {
	0% {
		transform: scale(1);
	}

	35% {
		transform: scale(1.28);
	}

	100% {
		transform: scale(1);
	}
}

/* =========================================================================
 * 10. FOCUS — CHECKED AGAINST THE NEW WHITE SURFACES
 *
 * Same correction, and for the same reason, as header.css section 16: base.css
 * rings every focusable element with --bedi-accent, which is #4FB3E8 under its
 * dark palette and scores 2.35:1 against #FFFFFF. On the dark canvas that was
 * fine; on this white drawer it is a ring nobody can see, and WCAG 2.2
 * SC 1.4.11 asks for 3:1.
 *
 * `.bedi-cart-drawer :focus-visible` is (0,2,0) and beats base.css's bare
 * `:focus-visible` at (0,1,0), so this holds whatever the load order.
 *
 * THE CHECKOUT BUTTON RE-POINTS THE TOKEN. It is a solid #2D81FF fill, so a
 * #2D81FF ring two pixels off it is invisible whatever it scores against the
 * page behind it. #252531 is 15.13:1 on white and still reads where the ring
 * crosses the blue. This is the trap the brief asked to be checked and it is
 * real: the previous ring was tuned for a dark surface.
 *
 * Nothing here removes an indicator. The only `outline: none` in this file is on
 * .bedi-cart-drawer__panel:focus — plain :focus, never :focus-visible — because
 * cart.js focuses the panel programmatically on open to get the dialog
 * announced, and a ring there would appear on every mouse-opened drawer.
 * ====================================================================== */

.bedi-cart-drawer :focus-visible,
.bedi-cart-drawer__panel:focus-visible {
	outline: var(--bedi-focus-width) solid var(--bedi-cart-focus);
	outline-offset: var(--bedi-focus-offset);
}

/*
 * Drawn INSIDE the panel's own edge: an outline offset outwards from a panel
 * pinned to the viewport edge is clipped by the viewport and the visitor sees
 * about a third of a ring.
 *
 * The ancestor in the selector is required, not decoration. The panel is a CHILD
 * of .bedi-cart-drawer, so the rule above matches it at (0,2,0); a bare
 * `.bedi-cart-drawer__panel:focus-visible` here would be (0,1,1), lose, and the
 * clipped outward ring would be exactly what shipped. With the ancestor this is
 * (0,2,1) and wins.
 */
.bedi-cart-drawer .bedi-cart-drawer__panel:focus-visible {
	outline-offset: calc(var(--bedi-focus-offset) * -2);
}

.bedi-cart-drawer .bedi-cart-action--primary:focus-visible {
	--bedi-cart-focus: var(--bedi-cart-ink);
}

/* =========================================================================
 * 11. BACKGROUND SCROLL LOCK
 *
 * cart.js adds the class and publishes the scrollbar's width as
 * --bedi-scrollbar-gap, so removing the scrollbar does not shift the page
 * sideways behind the open drawer.
 * ====================================================================== */

body.bedi-cart-is-open {
	overflow: hidden;
	padding-inline-end: var(--bedi-scrollbar-gap, 0px);
}

/* =========================================================================
 * 12. REDUCED MOTION
 *
 * base.css already collapses durations globally. This block goes further, as
 * the design system requires: every drawer movement becomes a near-instant
 * opacity change rather than a fast slide, because a 420ms translate reduced
 * to 1ms is still a translate, and a large sliding surface is exactly what
 * triggers vestibular symptoms.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bedi-cart-drawer__panel {
		opacity: 0;
		transform: none !important;
		transition: opacity 1ms linear !important;
	}

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

	.bedi-cart-item,
	.bedi-cart-empty__art,
	[data-bedi-cart-count].is-bumped {
		animation: none !important;
	}

	.bedi-cart-item:hover .bedi-cart-item__img,
	.bedi-cart-drawer__close:hover .bedi-cart-drawer__close-icon,
	.bedi-cart-action:active,
	.bedi-cart-action--primary:hover,
	.bedi-cart-item__remove:active,
	.bedi-cart-drawer__close:active {
		transform: none;
	}
}

/* =========================================================================
 * 13. FORCED COLOURS
 *
 * In Windows High Contrast the palette in section 1 is discarded entirely and
 * the user's own is substituted. What must survive is structure: the panel has
 * to read as a panel over the page, the two actions have to read as buttons,
 * and the count chip must not vanish into the header.
 * ====================================================================== */

@media (forced-colors: active) {
	.bedi-cart-drawer .bedi-cart-drawer__panel {
		border: 1px solid CanvasText;
	}

	.bedi-cart-action,
	[data-bedi-cart-count] {
		border: 1px solid CanvasText;
	}
}

/* =========================================================================
 * 14. PRINT
 *
 * A drawer is screen furniture. It never belongs on paper.
 * ====================================================================== */

@media print {
	.bedi-cart-drawer {
		display: none !important;
	}
}

/* The cart is an ordinary page too, so it renders inside
   `.bedi-entry__content` and picked up the same prose underline on every link
   in the table and the totals. Same opt-out, same specificity reasoning as
   account.css. */

.bedi-entry__content .bedi-woo a {
	text-decoration: none;
}