/* =========================================================================
   cart-page.css — the /cart/ page.

   A SEPARATE HANDLE FROM cart.css, WHICH IS THE MINI-CART DRAWER. That file's
   own header scopes it to "the slide-out mini cart… and nothing else", and it
   is loaded on every page of the site. This one is loaded on one page. Folding
   the cart page into it would put a page's worth of rules on every request to
   save a file.

   IT ALSO DOES NOT BORROW .bedi-co-* FROM checkout.css. The item row here looks
   almost identical to the checkout's order summary and was ported from it, so
   reusing those class names was tempting — and would have made checkout.css a
   hard dependency of the cart page, two files that then have to change
   together forever. Same design, own namespace.

   WooCommerce's own classes appear in a handful of selectors — .qty, .remove,
   .woocommerce-Price-amount, .wc-proceed-to-checkout. Those are not ours to
   rename: they are what core's markup emits from inside woocommerce_quantity_
   input() and wc_cart_totals_*_html(), and reimplementing those helpers to get
   nicer class names would mean reimplementing quantity limits and tax display.
   ========================================================================= */

.bedi-cartpage {
	align-items: start;
	display: grid;
	gap: var(--bedi-space-7);
	grid-template-columns: minmax(0, 1fr);
	margin-block: var(--bedi-space-6);
}

@media (min-width: 62em) {
	.bedi-cartpage {
		/*
		 * 380px for the summary, and the rest for the items. Not a percentage:
		 * the summary holds a fixed set of short label/value pairs and a button,
		 * so it has an ideal width that does not change with the viewport, while
		 * the item list is the part that benefits from every extra pixel.
		 */
		grid-template-columns: minmax(0, 1fr) 380px;
	}
}

/* -------------------------------------------------------------------------
   The item column
   ---------------------------------------------------------------------- */

.bedi-cartpage__head {
	align-items: baseline;
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-3);
	/*
	 * flex-start, not space-between: the heading beside it is clipped to a
	 * single pixel, so space-between pushed the count to the far right of an
	 * otherwise empty rule with nothing to balance against.
	 */
	justify-content: flex-start;
	padding-block-end: var(--bedi-space-4);
}

/*
 * THE HEADING IS THERE FOR SCREEN READERS AND NOT FOR EYES.
 *
 * The page already has an <h1> reading კალათა — page.php renders it from the
 * post title, which src/Woo.php translates — so printing it again immediately
 * below was the same word twice in two sizes. Removing the <h2> outright would
 * have left the item list with no heading of its own in the document outline,
 * which is a real loss for anyone navigating by headings.
 *
 * So it is clipped rather than deleted: present in the outline, absent from the
 * page. Same technique as .screen-reader-text, inlined because this is the only
 * element in this file that needs it.
 */
.bedi-cartpage__head-title {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.bedi-cartpage__head-count {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-base);
}

.bedi-cartpage__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-cartpage__item {
	align-items: center;
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
	column-gap: var(--bedi-space-4);
	display: grid;
	/*
	 * FOUR NAMED AREAS, AND THE PHONE LAYOUT IS THE SAME DOM.
	 *
	 * media | info | controls | line. On a phone the line price moves under the
	 * name and the controls move under that, which is a different grid over
	 * identical markup — no duplicated blocks, no `display: none` pair, and the
	 * tab order is the same at both widths.
	 */
	grid-template-areas:
		"media info line"
		"media controls line";
	grid-template-columns: auto minmax(0, 1fr) auto;
	padding-block: var(--bedi-space-5);
	row-gap: var(--bedi-space-3);
}

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

/*
 * A removing row fades and collapses rather than vanishing. cart-page.js sets
 * this before the request goes out, so the row acknowledges the press
 * immediately and the server's answer only has to confirm it.
 */
.bedi-cartpage__item.is-removing {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity var(--bedi-dur) var(--bedi-ease-out);
}

.bedi-cartpage__item.is-busy {
	opacity: 0.6;
	transition: opacity var(--bedi-dur-micro) var(--bedi-ease-out);
}

/* --- media --- */

.bedi-cartpage__media {
	grid-area: media;
	position: relative;
}

.bedi-cartpage__thumb {
	background-color: var(--bedi-surface-2);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	display: block;
	overflow: hidden;
	inline-size: 88px;
	block-size: 88px;
}

.bedi-cartpage__thumb img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	/* contain, not cover: these are hardware photographs shot on white, and
	   cropping a cable or a keyboard to a square cuts the product in half. */
	object-fit: contain;
	padding: var(--bedi-space-2);
}

.bedi-cartpage__tag {
	background-color: var(--bedi-danger);
	border-radius: var(--bedi-radius-pill);
	color: #fff;
	font-size: var(--bedi-text-xs);
	font-weight: 700;
	inset-block-start: -6px;
	inset-inline-start: -6px;
	line-height: 1;
	padding: 4px 7px;
	position: absolute;
}

/* --- info --- */

.bedi-cartpage__info {
	grid-area: info;
	min-inline-size: 0;
}

.bedi-cartpage__name {
	font-size: var(--bedi-text-lg);
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
}

.bedi-cartpage__name a {
	color: inherit;
	text-decoration: none;
}

.bedi-cartpage__name a:hover,
.bedi-cartpage__name a:focus-visible {
	color: var(--bedi-accent-strong);
}

/*
 * Variation data, printed by wc_get_formatted_cart_item_data() as a <dl>. Core
 * gives it no useful class, so it is reached through the element — this is the
 * one place in the file where that is unavoidable.
 */
.bedi-cartpage__info dl {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: var(--bedi-space-2) 0 0;
}

.bedi-cartpage__info dl dt,
.bedi-cartpage__info dl dd {
	display: inline;
	margin: 0;
}

.bedi-cartpage__info dl dt::after {
	content: ": ";
}

.bedi-cartpage__info dl dd::after {
	content: "";
	display: block;
}

.bedi-cartpage__backorder {
	color: var(--bedi-danger);
	font-size: var(--bedi-text-sm);
	margin: var(--bedi-space-2) 0 0;
}

.bedi-cartpage__unit {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin-block-start: var(--bedi-space-2);
}

.bedi-cartpage__unit-label {
	opacity: 0.8;
}

/* --- controls --- */

.bedi-cartpage__controls {
	align-items: center;
	column-gap: var(--bedi-space-4);
	display: flex;
	grid-area: controls;
}

/*
 * THE QUANTITY STEPPER.
 *
 * woocommerce/global/quantity-input.php is a theme override, so every
 * woocommerce_quantity_input() on this site — product page, cart page, anywhere
 * — comes back as .bedi-stepper markup wrapped in core's own .quantity:
 *
 *   .quantity.bedi-stepper > [data-bedi-step="-1"]
 *                          > .bedi-stepper__value > label + input.qty + ghost
 *                          > [data-bedi-step="1"]
 *
 * The full presentation of that component lives in product-buy.css, which is a
 * 57KB product-page stylesheet and is not loaded here. These rules are a
 * deliberate, SCOPED restatement of the parts the cart needs — a pill, two
 * buttons, a tabular number — rather than:
 *
 *   - enqueueing product-buy.css on /cart/ for forty rules, or
 *   - lifting the component into a shared partial, which is the genuinely right
 *     answer and a refactor of the product page that does not belong in the same
 *     change as a new cart.
 *
 * Every selector below is under .bedi-cartpage, so nothing here can reach the
 * product page's copy. If the component is ever extracted, this block is what
 * gets deleted.
 */
.bedi-cartpage .bedi-stepper {
	align-items: center;
	border: var(--bedi-border-width) solid var(--bedi-rule-strong);
	border-radius: var(--bedi-radius-pill);
	display: inline-flex;
	overflow: hidden;
}

.bedi-cartpage .bedi-stepper__btn {
	align-items: center;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	block-size: 2.25rem;
	color: var(--bedi-ink);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	inline-size: 2.25rem;
	justify-content: center;
	padding: 0;
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-cartpage .bedi-stepper__btn:hover:not(:disabled) {
	background-color: var(--bedi-bg-2);
}

.bedi-cartpage .bedi-stepper__btn:disabled {
	color: var(--bedi-rule-strong);
	cursor: default;
}

.bedi-cartpage .bedi-stepper__btn:focus-visible {
	outline: var(--bedi-focus-width) solid var(--bedi-accent);
	outline-offset: -3px;
}

.bedi-cartpage .bedi-stepper__value {
	display: inline-flex;
	justify-content: center;
	min-inline-size: 0;
	position: relative;
}

/*
 * The ghost is the outgoing digit in product-buy.css's roll animation, and that
 * animation is driven by .is-up / .is-down classes only product-buy.js sets.
 * Unanimated it is a second copy of the number sitting on top of the first, so
 * on this page it is hidden rather than left to overlap.
 */
.bedi-cartpage .bedi-stepper__ghost {
	display: none;
}

.bedi-cartpage .bedi-stepper input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
	background: none;
	border: 0;
	color: var(--bedi-ink);
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-base);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	inline-size: 2.75rem;
	padding: var(--bedi-space-2) var(--bedi-space-1);
	text-align: center;
}

/* The native spinners duplicate the two buttons either side of them. */
.bedi-cartpage .bedi-stepper input.qty::-webkit-outer-spin-button,
.bedi-cartpage .bedi-stepper input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bedi-cartpage .bedi-stepper input.qty:focus-visible {
	outline: var(--bedi-focus-width) solid var(--bedi-accent);
	outline-offset: -2px;
}

/*
 * THE REMOVE CONTROL, AND WHY THE SELECTOR IS THIS LONG.
 *
 * WooCommerce's own stylesheet ships `.woocommerce a.remove` — (0,2,1) — and it
 * is not a colour tweak: it sets `display:block; width:1em; height:1em;
 * border-radius:100%; font-size:1.5em`, because core's remove control is a red
 * × and that rule turns any element into one. Ours says წაშლა, and under core's
 * rule it became a 21px circle with five Georgian characters stacked
 * vertically down the side of the card.
 *
 * cart-page.css does load after woocommerce.css, so matching (0,2,1) would be
 * enough today — and would break the moment a plugin enqueues Woo's stylesheet
 * later, which is exactly the kind of silent reordering that makes CSS bugs
 * expensive. (0,3,1) settles it regardless of order, and every property core
 * sets is reset here rather than left to chance.
 */
.bedi-cartpage .bedi-cartpage__item a.bedi-cartpage__remove {
	background: none;
	block-size: auto;
	border: 0;
	border-radius: 0;
	color: var(--bedi-ink-muted);
	cursor: pointer;
	display: inline-block;
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-sm);
	font-weight: 400;
	inline-size: auto;
	line-height: 1.4;
	padding: var(--bedi-space-1) 0;
	text-align: start;
	text-decoration: none;
	transition: color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-cartpage .bedi-cartpage__item a.bedi-cartpage__remove:hover,
.bedi-cartpage .bedi-cartpage__item a.bedi-cartpage__remove:focus-visible {
	background: none;
	color: var(--bedi-danger);
}

/* --- line total --- */

.bedi-cartpage__line {
	display: flex;
	flex-direction: column;
	grid-area: line;
	align-items: flex-end;
	row-gap: 2px;
	text-align: end;
	white-space: nowrap;
}

.bedi-cartpage__line-was {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	text-decoration: line-through;
}

.bedi-cartpage__line-now {
	font-size: var(--bedi-text-lg);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* --- actions --- */

.bedi-cartpage__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-3);
	padding-block-start: var(--bedi-space-5);
}

.bedi-cartpage__coupon {
	display: flex;
	flex: 1 1 18rem;
	gap: var(--bedi-space-2);
	min-inline-size: 0;
}

.bedi-cartpage__coupon-input {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule-strong);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink);
	flex: 1 1 auto;
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-base);
	min-inline-size: 0;
	padding: var(--bedi-space-3) var(--bedi-space-5);
}

.bedi-cartpage__coupon-input:focus-visible {
	border-color: var(--bedi-accent);
	outline: var(--bedi-focus-width) solid var(--bedi-accent);
	outline-offset: 1px;
}

/*
 * THE CART'S OWN BUTTONS, AND WHY THEY ARE NOT .bedi-btn.
 *
 * These three controls — apply coupon, update cart, and the empty-cart CTA —
 * originally carried `.bedi-btn .bedi-btn--ghost` / `.bedi-btn--primary`,
 * which is this theme's button component and reads like the right thing to
 * reach for. It is defined in ONE place: account.css, which src/Assets.php
 * enqueues only when is_account_page() is true. On /cart/ the class matched
 * nothing at all, and the buttons rendered as bare text — measured:
 * display:inline, transparent background, 0 padding, 0 radius.
 *
 * The genuinely correct fix is to lift .bedi-btn out of account.css into a
 * shared stylesheet, because a design-system component that only exists on one
 * page is not a component. That is a refactor of the account screens and does
 * not belong in the same change as a new cart, so these are styled on their own
 * classes here and the misleading .bedi-btn classes are gone from the cart
 * templates — markup should not promise a component the page does not load.
 */
.bedi-cartpage__coupon-apply,
.bedi-cartpage__update {
	align-items: center;
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: var(--bedi-border-width) solid var(--bedi-rule-strong);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-base);
	font-weight: 500;
	justify-content: center;
	min-block-size: 46px;
	padding-inline: var(--bedi-space-5);
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		border-color var(--bedi-dur-micro) var(--bedi-ease-out);
	white-space: nowrap;
}

.bedi-cartpage__coupon-apply:hover,
.bedi-cartpage__update:hover {
	background-color: var(--bedi-bg-2);
	border-color: var(--bedi-accent);
	color: var(--bedi-accent-strong);
}

.bedi-cartpage__coupon-apply:focus-visible,
.bedi-cartpage__update:focus-visible {
	outline: var(--bedi-focus-width) solid var(--bedi-accent);
	outline-offset: 2px;
}

.bedi-cartempty__cta {
	align-items: center;
	background-color: var(--bedi-accent);
	border: 0;
	border-radius: var(--bedi-radius-pill);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-lg);
	font-weight: 700;
	justify-content: center;
	min-block-size: 50px;
	padding-inline: var(--bedi-space-7);
	text-decoration: none;
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-cartempty__cta:hover,
.bedi-cartempty__cta:focus-visible {
	background-color: var(--bedi-accent-strong);
	color: #fff;
}

/*
 * THE UPDATE BUTTON IS HIDDEN BY THE THING THAT MADE IT REDUNDANT.
 *
 * cart-page.js adds .is-live to the form once it has bound the steppers, and
 * only then does this disappear. With the script absent or broken the button is
 * present and the cart is a working HTML form — which is the whole reason the
 * template still renders a real submit instead of a div.
 */
.bedi-cartpage__items-col.is-live .bedi-cartpage__update {
	display: none;
}

/* -------------------------------------------------------------------------
   The summary column
   ---------------------------------------------------------------------- */

.bedi-cartsum {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-2xl);
	padding: var(--bedi-space-6);
}

@media (min-width: 62em) {
	.bedi-cartsum {
		/*
		 * Sticky under the header, so the total and the checkout button stay put
		 * while a long cart is scrolled. --bedi-header-bar-h keeps it clear of
		 * the sticky header rather than sliding under it.
		 */
		position: sticky;
		inset-block-start: calc(var(--bedi-header-bar-h, 90px) + var(--bedi-space-4));
	}
}

.bedi-cartsum__title {
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-xl);
	font-weight: 700;
	margin: 0 0 var(--bedi-space-5);
}

.bedi-cartsum__rows {
	display: grid;
	margin: 0;
	row-gap: var(--bedi-space-3);
}

.bedi-cartsum__row {
	align-items: baseline;
	column-gap: var(--bedi-space-4);
	display: flex;
	justify-content: space-between;
}

.bedi-cartsum__row dt {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-base);
	margin: 0;
}

.bedi-cartsum__row dd {
	font-size: var(--bedi-text-base);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	margin: 0;
	text-align: end;
}

.bedi-cartsum__note {
	color: var(--bedi-ink-muted);
	display: block;
	font-size: var(--bedi-text-xs);
	font-weight: 400;
}

/* --- the discount chip --- */

.bedi-cartsum__row--discount dt {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-2);
}

.bedi-cartsum__chip {
	align-items: center;
	background-color: var(--bedi-bg-2);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-accent-strong);
	display: inline-flex;
	font-size: var(--bedi-text-xs);
	font-weight: 700;
	gap: var(--bedi-space-1);
	padding: 3px 4px 3px 10px;
	text-transform: uppercase;
}

/*
 * The chip's remove control is core's own link from wc_cart_totals_coupon_html()
 * — its href carries the nonce. It is restyled into an × rather than replaced,
 * because replacing it means reimplementing the nonce.
 */
.bedi-cartsum__chip-remove a {
	align-items: center;
	border-radius: var(--bedi-radius-pill);
	color: inherit;
	display: inline-flex;
	block-size: 18px;
	inline-size: 18px;
	justify-content: center;
	overflow: hidden;
	/* The link's own text is "[Remove]" in English and untranslatable from here
	   — it comes from core with the woocommerce domain, for which this shop has
	   no catalogue. Clipped to zero and replaced by the glyph below, which is
	   what the control means in every language. */
	text-indent: -999em;
	position: relative;
	text-decoration: none;
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-cartsum__chip-remove a::before {
	content: "×";
	font-size: 14px;
	inset: 0;
	line-height: 18px;
	position: absolute;
	text-align: center;
	text-indent: 0;
}

.bedi-cartsum__chip-remove a:hover {
	background-color: var(--bedi-accent);
	color: #fff;
}

.bedi-cartsum__discount-amount {
	color: var(--bedi-accent-strong);
}

/* --- shipping --- */

.bedi-cartsum__row--shipping {
	/* Core's shipping markup is a <th>/<td> pair or a <ul> of methods, neither
	   of which sits on a baseline with a label. Column layout lets it be
	   whatever core emits. */
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--bedi-space-2);
}

.bedi-cartsum__row--shipping ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-cartsum__row--shipping label {
	cursor: pointer;
	font-size: var(--bedi-text-base);
}

/* --- total --- */

.bedi-cartsum__row--total {
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	margin-block-start: var(--bedi-space-2);
	padding-block-start: var(--bedi-space-4);
}

.bedi-cartsum__row--total dt {
	color: var(--bedi-ink);
	font-size: var(--bedi-text-lg);
	font-weight: 700;
}

.bedi-cartsum__row--total dd {
	font-size: var(--bedi-text-2xl);
	font-weight: 700;
	line-height: 1.1;
}

/* --- checkout button --- */

.bedi-cartsum__go {
	margin-block-start: var(--bedi-space-5);
}

/*
 * .checkout-button is core's class on the link woocommerce_proceed_to_checkout
 * prints. Styled here rather than filtered into another class, because the
 * filter that would do that is shared with plugins adding their own
 * express-checkout buttons to the same hook.
 *
 * THE SELECTOR IS FOUR CLASSES DEEP FOR A MEASURED REASON.
 *
 * Core renders <a class="checkout-button button alt wc-forward">, and this
 * theme's own woo.css styles `.woocommerce a.button.alt` at (0,3,1). The first
 * version of this rule was `.bedi-cartsum__go .checkout-button` at (0,2,0) and
 * lost every shared property: measured on the live page the CTA came out
 * display:inline-flex at 246px inside a 380px card instead of a full-width
 * block, with a 12px radius instead of the pill, MarksGeo Caps instead of the
 * body face, and weight 500 instead of 700. It also had no visible hover at
 * all, because woo.css's --bedi-woo-accent resolves to the same colour as the
 * resting background.
 *
 * (0,4,1) beats it on class count, so this cannot be undone by a change in
 * stylesheet order — which is the failure mode a same-specificity fix would
 * have left in place.
 */
.bedi-cartsum .bedi-cartsum__go a.checkout-button.button,
.bedi-cartsum .bedi-cartsum__go a.checkout-button,
.bedi-cartsum .bedi-cartsum__go a.button.alt,
.bedi-cartsum__go .checkout-button,
.bedi-cartsum__go .button {
	background-color: var(--bedi-accent);
	border: 0;
	border-radius: var(--bedi-radius-pill);
	color: #fff;
	display: block;
	font-family: var(--bedi-font-body);
	font-size: var(--bedi-text-lg);
	font-weight: 700;
	padding: var(--bedi-space-4) var(--bedi-space-5);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

/* Same arithmetic: woo.css's hover is `.woocommerce a.button.alt:hover` at
   (0,4,1), so this has to reach (0,5,1) to land. */
.bedi-cartsum .bedi-cartsum__go a.checkout-button.button:hover,
.bedi-cartsum .bedi-cartsum__go a.checkout-button.button:focus-visible,
.bedi-cartsum .bedi-cartsum__go a.checkout-button:hover,
.bedi-cartsum .bedi-cartsum__go a.checkout-button:focus-visible {
	background-color: var(--bedi-accent-strong);
	border-color: transparent;
	color: #fff;
}

.bedi-cartsum .bedi-cartsum__go a.checkout-button:active {
	transform: scale(0.99);
}

/* --- trust strip --- */

.bedi-cartsum__trust {
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	display: grid;
	list-style: none;
	margin: var(--bedi-space-5) 0 0;
	padding: var(--bedi-space-5) 0 0;
	row-gap: var(--bedi-space-3);
}

.bedi-cartsum__trust-item {
	align-items: center;
	color: var(--bedi-ink-muted);
	column-gap: var(--bedi-space-3);
	display: flex;
	font-size: var(--bedi-text-sm);
}

.bedi-cartsum__trust-item svg {
	color: var(--bedi-accent);
	flex: none;
}

/* -------------------------------------------------------------------------
   Empty
   ---------------------------------------------------------------------- */

/*
 * WooCommerce's own "Your cart is currently empty." notice, printed by the cart
 * shortcode before this template runs. It is English, it comes from the
 * `woocommerce` domain for which this shop has no catalogue, and the template
 * below says the same thing in Georgian with a way out. One of the two had to
 * go and it was not the Georgian one.
 */
.wc-empty-cart-message {
	display: none;
}

.bedi-cartempty {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-inline: auto;
	max-inline-size: 30rem;
	padding-block: var(--bedi-space-9);
	text-align: center;
}

.bedi-cartempty__art {
	color: var(--bedi-rule-strong);
	margin-block-end: var(--bedi-space-5);
}

.bedi-cartempty__title {
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-2xl);
	font-weight: 700;
	margin: 0 0 var(--bedi-space-3);
}

.bedi-cartempty__text {
	color: var(--bedi-ink-muted);
	margin: 0 0 var(--bedi-space-6);
}

.bedi-cartempty__cta {
	min-inline-size: 14rem;
}

.bedi-cartempty__alt {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin-block-start: var(--bedi-space-4);
}

/* -------------------------------------------------------------------------
   Phone
   ---------------------------------------------------------------------- */

@media (max-width: 47.9375em) {
	.bedi-cartpage__item {
		/*
		 * The price moves under the name and the controls under that: at 375px a
		 * four-column row gives the product name about 90px, which is not a name.
		 * Same markup, different grid.
		 */
		grid-template-areas:
			"media info"
			"media line"
			"controls controls";
		grid-template-columns: auto minmax(0, 1fr);
	}

	.bedi-cartpage__line {
		align-items: flex-start;
		flex-direction: row-reverse;
		justify-content: flex-end;
		column-gap: var(--bedi-space-2);
		text-align: start;
	}

	.bedi-cartpage__controls {
		justify-content: space-between;
	}

	.bedi-cartpage__thumb {
		block-size: 72px;
		inline-size: 72px;
	}

	.bedi-cartsum {
		padding: var(--bedi-space-5);
	}

	.bedi-cartpage__coupon {
		flex: 1 1 100%;
	}
}

/* =========================================================================
   THE CONFIGURATOR'S NOTE

   Rendered by template-parts/builder/cart-notice.php, and only when the cart
   actually holds a build.

   IT HAS TO LOOK LIKE THE BUILDER AND NOT LIKE A WARNING. This is good news —
   "we are going to assemble this for you" — so it takes the builder's own band
   colour, `--bedi-bg-2`, which base.css calls "the ONE deliberate blue band a
   section may opt into", and the same 3D case render the builder's own slot
   rows use. A visitor who came from /pc-builder/ should recognise it without
   reading it. A yellow or red notice strip would say something had gone wrong.

   THE ACCENT EDGE IS THE WHOLE DEVICE. One 3px rule down the inline start,
   which is what separates "a panel that belongs to this page" from "a panel
   about something that happened elsewhere" — and it costs no border, no shadow
   and no second colour.

   A SEPARATE BLOCK, NOT .bedi-cartpage__*. It is drawn on the cart today; the
   same part is the obvious thing to show in the checkout summary and in the
   order-received page, neither of which is this stylesheet's business. Naming
   it after the cart would make moving it a rename.
   ====================================================================== */

.bedi-buildnote {
	align-items: center;
	background-color: var(--bedi-bg-2);
	border-radius: var(--bedi-radius-xl);
	border-inline-start: 3px solid var(--bedi-accent);
	column-gap: var(--bedi-space-4);
	display: flex;
	flex-wrap: wrap;
	margin-block-end: var(--bedi-space-4);
	padding: var(--bedi-space-4) var(--bedi-space-5);
	row-gap: var(--bedi-space-3);
}

.bedi-buildnote__art {
	align-items: center;
	block-size: 56px;
	display: flex;
	flex: none;
	inline-size: 56px;
	justify-content: center;
}

.bedi-buildnote__art img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: contain;
}

.bedi-buildnote__body {
	flex: 1 1 16rem;
	min-inline-size: 0;
}

.bedi-buildnote__title {
	color: var(--bedi-ink);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-bold);
	letter-spacing: -0.005em;
	margin: 0 0 3px;
}

.bedi-buildnote__text {
	color: var(--bedi-ink);
	font-size: var(--bedi-text-base);
	line-height: 1.45;
	margin: 0;
	max-inline-size: 62ch;
}

/*
 * The second line is the reassurance that the lines below are still ordinary
 * cart lines. Quieter than the first on purpose: it answers a question the
 * visitor has not asked yet and should not have to.
 */
.bedi-buildnote__hint {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: var(--bedi-space-1) 0 0;
}

.bedi-buildnote__edit {
	align-items: center;
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule-strong);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink);
	display: inline-flex;
	flex: none;
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-bold);
	gap: 5px;
	min-block-size: 42px;
	padding-inline: var(--bedi-space-4) var(--bedi-space-3);
	text-decoration: none;
	transition-duration: var(--bedi-dur-micro);
	transition-property: background-color, border-color, color;
	transition-timing-function: var(--bedi-ease-out);
	white-space: nowrap;
}

.bedi-buildnote__edit:hover,
.bedi-buildnote__edit:focus-visible {
	background-color: var(--bedi-accent);
	border-color: var(--bedi-accent);
	color: var(--bedi-on-accent);
}

@media (max-width: 47.9375em) {
	.bedi-buildnote {
		padding: var(--bedi-space-4);
	}

	/* The picture is the first thing to go: the words carry the message. */
	.bedi-buildnote__art {
		block-size: 44px;
		inline-size: 44px;
	}

	.bedi-buildnote__edit {
		inline-size: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bedi-buildnote__edit {
		transition-duration: 1ms;
	}
}

/*
 * The per-line slot label, which core prints through
 * wc_get_formatted_cart_item_data() as a <dl class="variation"> — the same
 * element a product variation uses, so it inherits whatever that already looks
 * like here and needs no rule of its own beyond this tightening.
 */
.bedi-cartpage__info .variation {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: 3px 0 0;
}

.bedi-cartpage__info .variation dt,
.bedi-cartpage__info .variation dd {
	display: inline;
	margin: 0;
}

.bedi-cartpage__info .variation dd {
	color: var(--bedi-ink);
	font-weight: var(--bedi-weight-medium);
}

.bedi-cartpage__info .variation dd p {
	display: inline;
	margin: 0;
}

/* =========================================================================
   THE BUILD IS NOW A GROUP, NOT A BANNER

   cart.php renders the configurator's parts in their own list directly under
   the note. These rules make the two read as one block: the note loses the
   gap and the rounded corners that separated it from what follows, and the
   list picks up the same tint and the same accent rule down its inside edge.
   ====================================================================== */

.bedi-cartpage__items--build {
	background-color: var(--bedi-bg-2);
	border-block-start: 0;
	border-end-end-radius: var(--bedi-radius-xl);
	border-end-start-radius: var(--bedi-radius-xl);
	border-inline-start: 3px solid var(--bedi-accent);
	margin-block-end: var(--bedi-space-6);
	padding-inline: var(--bedi-space-5);
}

/* The note stops being a standalone card the moment a list is attached under
   it: square off the bottom corners and drop the margin, or there is a visible
   seam between a heading and the thing it heads. `:has()` scopes this to the
   grouped arrangement, so the note used anywhere else keeps its own shape. */
.woocommerce-cart-form:has(.bedi-cartpage__items--build) .bedi-buildnote {
	border-end-end-radius: 0;
	border-end-start-radius: 0;
	margin-block-end: 0;
}

/*
 * The rows inside the group sit on the tint rather than on white, so their
 * hairlines need to be the tint's own divider rather than the page's.
 */
.bedi-cartpage__items--build .bedi-cartpage__item {
	border-block-end-color: rgba(7, 0, 36, 0.08);
}

.bedi-cartpage__items--build .bedi-cartpage__item:last-child {
	border-block-end: 0;
}

/* =========================================================================
   THE BUILD ROW IS A LINE OF TEXT, NOT A ROW OF DEAD CONTROLS

   The first attempt at this gave the fixed quantity a bordered 83x36 pill —
   the same geometry, radius and hairline the theme's real controls use. It was
   measured next to the stepper it replaced and matched it, which was exactly
   the mistake: a control-shaped object that cannot be pressed is worse than
   the control it replaced, because it invites the click and then refuses it.

   And it made the read-only row TALLER than the editable one: 159px against
   138px, for a row carrying strictly less. The pill claimed a 36px line of its
   own where the stepper and the remove link had shared one.

   So the quantity is typography now. No border, no box, no minimum height —
   it reads as part of the price line, which is what it is.
   ====================================================================== */

.bedi-cartpage__qty-fixed {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	font-variant-numeric: tabular-nums;
}

/* Tighter than an ordinary row, which is the honest shape for a row with no
   controls in it. */
.bedi-cartpage__items--build .bedi-cartpage__item {
	padding-block: var(--bedi-space-4);
	row-gap: var(--bedi-space-2);
}

/*
 * THE DUPLICATED COLON, AND WHY IT IS NOT A TYPO IN THE DATA.
 *
 * WooCommerce's own label already ends in one — the <dt> reads "აწყობის
 * ნაწილი:" — and this stylesheet adds `content: ": "` after every dt for the
 * labels that do not. Together they rendered "აწყობის ნაწილი:: ოპერატიული".
 *
 * Inside the build group the label goes entirely rather than being de-duped:
 * the group's own heading already says these are configuration parts, so
 * repeating "აწყობის ნაწილი" on all nine rows is the heading said ten times.
 * Only the slot name survives, as a caption.
 */
.bedi-cartpage__items--build .bedi-cartpage__info dl dt {
	display: none;
}

.bedi-cartpage__items--build .bedi-cartpage__info dl dd {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
}