/*
 * Cart page — PM-designed line items, totals, checkout CTA.
 *
 * Loaded only on is_cart() via inc/enqueue.php. Owns the markup from
 * themes/premium-merchandise-child/woocommerce/cart/cart.php.
 *
 * Extracted from header-footer.css in Phase 2 cleanup (2026-06-04) —
 * everything below was originally appended to header-footer.css over
 * the course of cart implementation. Moved here verbatim, byte-for-
 * byte, so the visual output is unchanged.
 *
 * Sections:
 *   1. Cart qty-locked / qty-edit helpers (PM lines can't qty-edit
 *      in cart — they re-open the designer instead)
 *   2. Main cart page card layout (.pm-cart__*)
 *   3. Page heading (cart + checkout)
 *   4. Cart totals + sleek checkout button (QA round 16)
 *   5. Mobile responsive overrides
 *   6. Cart-specific WC button overrides (.pm-cart__form, post-edit-link)
 *
 * @package Premium_Merchandise_Child
 */

/* ============================================================
   Cart — PM-designed line items
   Designer lines lock the quantity (clicking "Edit" sends the customer
   back to the designer to re-configure rather than tweaking qty in cart).
   ============================================================ */

.pm-cart-qty-locked {
	display: inline-block;
	padding: 6px 12px;
	font-weight: 600;
	color: var(--pm-color-ink);
	background: var(--pm-color-input-bg);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
}

.pm-cart-qty-edit,
.pm-cart-edit-link {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pm-color-accent);
	text-decoration: none;
}

.pm-cart-qty-edit:hover,
.pm-cart-qty-edit:focus,
.pm-cart-edit-link:hover,
.pm-cart-edit-link:focus {
	text-decoration: underline;
}

/* ============================================================
   Classic cart override — card-per-line layout (sew-nc reference,
   2026-05-26). Owns the markup from themes/premium-merchandise-child/
   woocommerce/cart/cart.php; styled here so the theme controls visual
   ownership per §3.
   ============================================================ */

.pm-cart__form {
	margin-bottom: 32px;
}

.pm-cart__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pm-cart__item {
	display: grid;
	grid-template-columns: 160px 1fr 140px;
	gap: 24px;
	/* QA round 21 (2026-06-05) — `align-items: start` (was stretch). The
	   thumbnail column has a fixed `aspect-ratio: 4/5` at width 160 px,
	   so its natural height is 200 px. When stretch was on, the thumb
	   container expanded vertically to match the taller middle column
	   (especially after adding the Special Instructions textarea) — that
	   forced object-fit: contain to letterbox heavily and made the shirt
	   look elongated/floating. Start-aligns each column to the top of
	   the row so the thumb stays at its true 160×200 dimensions. */
	align-items: start;
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-md);
	box-shadow: var(--pm-shadow-sm);
	padding: 20px;
	transition: box-shadow 0.15s ease;
}

.pm-cart__item:hover {
	box-shadow: var(--pm-shadow-md);
}

/* Thumbnail column — fixed 4:5 aspect so per-color composites all render
   the same shape regardless of source photo dimensions.
   QA round 17/18 (2026-06-04) — uses the unified --pm-thumb-frame-*
   tokens from tokens.css so border + shadow stays in sync with every
   other shirt-thumbnail surface (per-color cards, summary, saved-
   designs popover). */
.pm-cart__item-thumb {
	position: relative;
	width: 160px;
	aspect-ratio: 4 / 5;
	background: var(--pm-color-input-bg);
	border: var(--pm-thumb-frame-border);
	border-radius: var(--pm-radius-sm);
	box-shadow: var(--pm-thumb-frame-shadow);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pm-cart__item-thumb img,
.pm-cart__item-thumb .pm-cart-thumb {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block;
}

/* Hide WC's default <a> wrapping the thumbnail border if any */
.pm-cart__item-thumb a {
	display: block;
	width: 100%;
	height: 100%;
}

/* Middle column — product info */
.pm-cart__item-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.pm-cart__item-name {
	font-family: var(--pm-font-sans);
	font-size: 18px;
	font-weight: 600;
	color: var(--pm-color-ink);
	margin: 0;
	line-height: 1.3;
}

.pm-cart__item-name a {
	color: inherit;
	text-decoration: none;
}

.pm-cart__item-name a:hover,
.pm-cart__item-name a:focus {
	color: var(--pm-color-accent);
	text-decoration: underline;
}

/* Meta list (color / sizes / sides / unit price) */
.pm-cart__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-family: var(--pm-font-sans);
	font-size: 14px;
	color: var(--pm-color-muted);
}

.pm-cart__meta-row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 12px;
	align-items: baseline;
}

.pm-cart__meta-row dt {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pm-color-muted);
	margin: 0;
}

.pm-cart__meta-row dd {
	margin: 0;
	color: var(--pm-color-ink);
	font-size: 14px;
}

.pm-cart__color {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pm-cart__color-dot {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--pm-color-border);
	flex-shrink: 0;
}

.pm-cart__size-pill {
	display: inline-block;
	padding: 2px 8px;
	background: var(--pm-color-input-bg);
	border-radius: 999px;
	font-size: 12px;
	margin-right: 4px;
	color: var(--pm-color-ink);
}

.pm-cart__size-pill strong {
	font-weight: 700;
}

/* Inline actions row (Edit design, Remove) */
.pm-cart__item-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.pm-cart__action-btn {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	font-family: var(--pm-font-sans);
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--pm-radius-sm);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pm-cart__action-btn--primary {
	background: var(--pm-color-ink);
	color: var(--pm-color-surface);
	border-color: var(--pm-color-ink);
}

.pm-cart__action-btn--primary:hover,
.pm-cart__action-btn--primary:focus {
	background: var(--pm-color-ink-hover);
	color: var(--pm-color-surface);
}

.pm-cart__action-btn--ghost {
	background: transparent;
	color: var(--pm-color-muted);
	border-color: var(--pm-color-border);
}

.pm-cart__action-btn--ghost:hover,
.pm-cart__action-btn--ghost:focus {
	border-color: var(--pm-color-danger);
	color: var(--pm-color-danger);
}

/* Right column — line total. `align-self: stretch` overrides the grid's
   `align-items: start` (QA round 21) so the border-left divider still
   spans the full row height; content inside is vertically centred. */
.pm-cart__item-total {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 4px;
	border-left: 1px solid var(--pm-color-border);
	padding-left: 24px;
}

.pm-cart__item-total-label {
	font-family: var(--pm-font-sans);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pm-color-muted);
}

.pm-cart__item-total-value {
	font-family: var(--pm-font-sans);
	font-size: 22px;
	font-weight: 700;
	color: var(--pm-color-ink);
}

.pm-cart__item-total-value bdi {
	display: inline;
}

/* Coupon + update-cart action bar */
.pm-cart__actions {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 24px;
	padding: 20px;
	background: var(--pm-color-surface-soft);
	border-radius: var(--pm-radius-md);
}

.pm-cart__coupon {
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 1;
	min-width: 240px;
}

.pm-cart__coupon label {
	font-family: var(--pm-font-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--pm-color-muted);
	white-space: nowrap;
}

.pm-cart__coupon-input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
	font-family: var(--pm-font-sans);
	font-size: 14px;
	min-width: 120px;
}

.pm-cart__coupon-btn,
.pm-cart__update {
	padding: 10px 20px;
	font-family: var(--pm-font-sans);
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--pm-radius-sm);
	border: 1px solid var(--pm-color-border);
	background: var(--pm-color-surface);
	color: var(--pm-color-ink);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.pm-cart__coupon-btn:hover,
.pm-cart__coupon-btn:focus,
.pm-cart__update:hover,
.pm-cart__update:focus {
	background: var(--pm-color-input-bg);
	border-color: var(--pm-color-ink);
}

/* ============================================================
   QA round 15 (2026-06-04) — Cart page polish.
   Three problems addressed: no breathing room around the "Cart"
   heading, the totals box was sitting at intrinsic-content width
   inside its grid track (Storefront cascade), and the proceed
   button text was wrapping to 2-3 lines because the box was so
   narrow.
   ============================================================ */

/* Page heading rules moved to wc-defaults.css since they target both
   .woocommerce-cart AND .woocommerce-checkout — keeping them here would
   break the heading on the checkout page (cart.css is is_cart() only). */

/* Cart totals collateral — flex with justify-end so the totals box
   sits to the right at a comfortable max-width (was a 2-col grid
   that left a huge empty column on the left + squeezed the totals
   into a too-narrow track). */
.pm-cart__collaterals {
	margin-top: 32px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.pm-cart__collaterals .cart_totals {
	width: 100%;
	max-width: 460px;
	background: var(--pm-color-surface);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-md);
	padding: 28px;
	box-shadow: var(--pm-shadow-sm);
	box-sizing: border-box;
}

.pm-cart__collaterals .cart_totals h2 {
	font-family: var(--pm-font-sans);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 20px;
	color: var(--pm-color-ink);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--pm-color-border);
}

.pm-cart__collaterals .cart_totals table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.pm-cart__collaterals .cart_totals table th,
.pm-cart__collaterals .cart_totals table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--pm-color-border);
	font-family: var(--pm-font-sans);
	font-size: 14px;
	color: var(--pm-color-ink);
	text-align: left;
}

.pm-cart__collaterals .cart_totals table th {
	font-weight: 500;
	color: var(--pm-color-muted);
}

.pm-cart__collaterals .cart_totals table td {
	text-align: right;
	font-weight: 600;
}

.pm-cart__collaterals .order-total th,
.pm-cart__collaterals .order-total td {
	font-size: 18px;
	font-weight: 700;
	color: var(--pm-color-ink);
	border-bottom: none;
	padding-top: 16px;
}

.pm-cart__collaterals .wc-proceed-to-checkout {
	margin-top: 8px;
	padding: 0;
}

/* QA round 16 / 19 (2026-06-04) — sleek minimal checkout CTA.
   Solid black, sentence case, restrained weight (500 not 700), no
   all-caps letterspaced shouting, generous breathing room. Subtle
   arrow → revealed via pseudo so the hover can slide it the way
   premium fashion brands do.

   QA round 19: WooCommerce's `.button.alt` styles from the Storefront
   parent were winning the cascade and inflating the padding +
   font-size + font-weight to look like a default WC button. Belt-
   and-braces fix:
   1. Raise specificity by chaining `.button` to our selector — that
      gives us 0,3,0 which matches Storefront's `.woocommerce a.button`
      (0,2,1) effectively and comes later in source order so we win.
   2. `!important` on the properties Storefront overrides hardest
      (padding, font-size, font-weight, line-height, text-transform)
      to defeat any future parent-theme update that bumps specificity. */
.pm-cart__collaterals a.checkout-button.button,
.pm-cart__collaterals .checkout-button {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 18px 28px !important;
	background: var(--pm-color-ink) !important;
	color: var(--pm-color-surface) !important;
	border: 1px solid var(--pm-color-ink) !important;
	border-radius: var(--pm-radius-sm) !important;
	font-family: var(--pm-font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	text-align: center;
	text-decoration: none !important;
	text-shadow: none !important;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, transform 60ms ease !important;
	box-sizing: border-box;
	white-space: nowrap;
	box-shadow: none !important;
}

/* Arrow as a separate inline element via pseudo — sits 10 px after
   the label, slides 4 px right on hover. */
.pm-cart__collaterals a.checkout-button.button::after,
.pm-cart__collaterals .checkout-button::after {
	content: "→";
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	transform: translateX(0);
	transition: transform 200ms ease;
}

.pm-cart__collaterals a.checkout-button.button:hover,
.pm-cart__collaterals a.checkout-button.button:focus,
.pm-cart__collaterals .checkout-button:hover,
.pm-cart__collaterals .checkout-button:focus {
	background: var(--pm-color-surface) !important;
	color: var(--pm-color-ink) !important;
	border-color: var(--pm-color-ink) !important;
}

.pm-cart__collaterals a.checkout-button.button:hover::after,
.pm-cart__collaterals a.checkout-button.button:focus::after,
.pm-cart__collaterals .checkout-button:hover::after,
.pm-cart__collaterals .checkout-button:focus::after {
	transform: translateX(4px);
}

.pm-cart__collaterals a.checkout-button.button:active,
.pm-cart__collaterals .checkout-button:active {
	transform: translateY(1px);
}

/* Mobile — QA round 22 (2026-06-05). Single-column stack so the design
   reads cleanly: thumbnail at the top (centered, large), then product
   name, then meta rows, then actions, instructions, line total. Sew-nc
   reference layout. All typography dialed down: title max-weight 500,
   meta + actions 400, labels lighter. */
@media (max-width: 768px) {
	.pm-cart__item {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 16px 14px;
		align-items: stretch;
	}

	/* Thumb sits at the top, centered, big enough that the design is
	   immediately recognisable. 200 px on a 390 px viewport ≈ 50% width. */
	.pm-cart__item-thumb {
		width: 200px;
		max-width: 60vw;
		margin: 0 auto 4px;
		aspect-ratio: 4 / 5;
	}

	.pm-cart__item-body {
		gap: 10px;
		min-width: 0;
	}

	.pm-cart__item-name {
		font-size: 15px;
		font-weight: 500;
		line-height: 1.35;
		letter-spacing: -0.005em;
	}

	.pm-cart__meta {
		font-size: 13px;
		gap: 6px;
	}

	.pm-cart__meta-row {
		grid-template-columns: 92px 1fr;
		gap: 10px;
	}

	.pm-cart__meta-row dt {
		font-size: 11px;
		font-weight: 400;
		letter-spacing: 0.05em;
		color: var(--pm-color-muted);
	}

	.pm-cart__meta-row dd {
		font-size: 13px;
		font-weight: 400;
		color: var(--pm-color-ink);
	}

	.pm-cart__color-dot {
		width: 12px;
		height: 12px;
	}

	.pm-cart__size-pill {
		font-size: 11.5px;
		font-weight: 400;
		padding: 2px 7px;
	}

	.pm-cart__size-pill strong {
		font-weight: 600;
	}

	/* Actions row: keep both side-by-side, ghost-outlined Edit + Remove for
	   parity with the sew-nc layout. Touch-target floor stays at 44 px. */
	.pm-cart__item-actions {
		display: flex;
		gap: 8px;
		margin-top: 2px;
	}

	.pm-cart__action-btn {
		flex: 1 1 0;
		justify-content: center;
		min-height: 40px;
		padding: 8px 12px;
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 0;
	}

	/* Special instructions on mobile — slightly smaller label, label sits
	   on its own line above the hint so it reads cleanly at narrow widths. */
	.pm-cart__instructions {
		margin-top: 8px;
		padding-top: 10px;
	}

	.pm-cart__instructions-label {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		font-size: 11px;
		font-weight: 400;
		letter-spacing: 0.05em;
	}

	.pm-cart__instructions-hint {
		font-size: 11px;
		font-weight: 300;
	}

	.pm-cart__instructions-input {
		font-size: 14px;     /* iOS auto-zoom floor */
		font-weight: 400;
		padding: 10px 12px;
		min-height: 56px;
	}

	/* Line total — moves below everything else on mobile, full-width with
	   a top hairline so it reads as the "summary" row of the card. */
	.pm-cart__item-total {
		grid-column: 1 / -1;
		align-self: auto;
		border-left: none;
		border-top: 1px solid var(--pm-color-border);
		padding-left: 0;
		padding-top: 12px;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}

	.pm-cart__item-total-label {
		font-size: 11px;
		font-weight: 400;
		letter-spacing: 0.05em;
	}

	.pm-cart__item-total-value {
		font-size: 17px;
		font-weight: 500;
	}

	/* QA round 15 — totals box goes full-width on mobile (no longer in a
	   grid, the parent flex with justify-end already lets it expand). */
	.pm-cart__collaterals .cart_totals {
		max-width: 100%;
		padding: 20px;
	}
	.pm-cart__collaterals .cart_totals h2 {
		font-size: 18px;
	}

	/* Mobile entry-header / entry-title overrides also moved to wc-defaults.css
	   for the same cart+checkout-shared reason as the desktop rules above. */

	/* Day 10 a11y — bump cart action buttons to 44 px touch-target floor
	   so Edit-design + Remove are reliably tappable with a thumb. */
	.pm-cart__action-btn {
		min-height: 44px;
		padding: 10px 16px;
		font-size: 14px;
	}

	/* Coupon + Update Cart row stacks on phones so each control gets full
	   width — no awkward squeeze when the row is narrower than the inputs
	   want to be. */
	.pm-cart__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.pm-cart__coupon {
		flex-wrap: wrap;
	}
	.pm-cart__coupon-input {
		min-height: 44px;
	}
	.pm-cart__coupon-btn,
	.pm-cart__update {
		min-height: 44px;
	}

	/* Checkout button — already full-width, but ensure tap target height. */
	.pm-cart__collaterals .checkout-button {
		min-height: 48px;
	}
}

/* Day 10 — keyboard focus-visible rings throughout the cart so keyboard
   users can navigate without losing track of where they are. Matches
   the designer modal's a11y rule. */
.pm-cart__form :focus-visible,
.pm-cart__collaterals :focus-visible {
	outline: 3px solid var(--pm-color-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Cart row's WC-default "Edit" link below the table — rebranded from the
   WC/admin-bar purple to brand accent. */
.pm-cart__form ~ * a,
.pm-cart__form + * a,
.woocommerce-cart .post-edit-link {
	color: var(--pm-color-accent);
}

/* ============================================================
   Cart "Apply coupon" + "Update cart" — match the Edit-design/Remove
   button language so all the controls on the cart feel like one set.
   These are WC's `button.button` so the selector targets the form
   context to avoid bleeding into other buttons.
   ============================================================ */

.woocommerce-cart .pm-cart__coupon-btn,
.woocommerce-cart .pm-cart__update,
.woocommerce-cart button[name="apply_coupon"],
.woocommerce-cart button[name="update_cart"] {
	background: var(--pm-color-surface) !important;
	color: var(--pm-color-ink) !important;
	border: 1px solid var(--pm-color-ink) !important;
	border-radius: var(--pm-radius-sm) !important;
	font-family: var(--pm-font-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 10px 18px !important;
	min-height: 44px !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-cart .pm-cart__coupon-btn:hover:not(:disabled),
.woocommerce-cart .pm-cart__update:hover:not(:disabled),
.woocommerce-cart button[name="apply_coupon"]:hover:not(:disabled),
.woocommerce-cart button[name="update_cart"]:hover:not(:disabled) {
	background: var(--pm-color-ink) !important;
	color: var(--pm-color-surface) !important;
}

.woocommerce-cart button[disabled],
.woocommerce-cart input[disabled] {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

/* ============================================================
   QA round 20 (2026-06-05) — Cart polish batch.
   Adds: top toolbar (item count + Clear cart), per-item special
   instructions textarea, itemised totals presentation, sticky
   bottom checkout bar on desktop.
   ============================================================ */

/* ----- Top toolbar — item count + Clear cart link ----- */
.pm-cart__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	padding: 0 4px;
}

.pm-cart__toolbar-count {
	font-size: 14px;
	color: var(--pm-color-muted);
}

.pm-cart__toolbar-count strong {
	color: var(--pm-color-ink);
	font-weight: 700;
	margin-right: 2px;
}

.pm-cart__toolbar-clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-radius: var(--pm-radius-sm);
	color: var(--pm-color-muted);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pm-cart__toolbar-clear:hover,
.pm-cart__toolbar-clear:focus-visible {
	color: var(--pm-color-danger);
	background: var(--pm-color-danger-soft);
	border-color: var(--pm-color-danger-soft);
}

.pm-cart__toolbar-clear svg {
	flex: 0 0 auto;
}

/* ----- Special instructions textarea per cart item ----- */
.pm-cart__instructions {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--pm-color-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pm-cart__instructions-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pm-color-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pm-cart__instructions-hint {
	font-size: 11px;
	font-weight: 500;
	color: var(--pm-color-placeholder);
	text-transform: none;
	letter-spacing: 0;
}

.pm-cart__instructions-input {
	width: 100%;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 13px;
	color: var(--pm-color-ink);
	background: var(--pm-color-input-bg);
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-sm);
	resize: vertical;
	min-height: 44px;
	transition: border-color 0.12s ease, background 0.12s ease;
	box-sizing: border-box;
}

.pm-cart__instructions-input:focus {
	outline: 0;
	border-color: var(--pm-color-accent);
	background: var(--pm-color-surface);
}

.pm-cart__instructions-input::placeholder {
	color: var(--pm-color-placeholder);
}

.pm-cart__instructions-status {
	font-size: 11px;
	color: var(--pm-color-muted);
	min-height: 14px;
	font-style: italic;
	transition: color 0.15s ease;
}

.pm-cart__instructions-status[data-pm-status="saved"]  { color: #2c7a3d; }
.pm-cart__instructions-status[data-pm-status="error"]  { color: var(--pm-color-danger); }
.pm-cart__instructions-status[data-pm-status="saving"] { color: var(--pm-color-muted); }

/* ----- Itemised totals presentation ----- */
.pm-cart__collaterals .cart_totals .shipping--placeholder th,
.pm-cart__collaterals .cart_totals .shipping--placeholder td,
.pm-cart__collaterals .cart_totals .tax-total--placeholder th,
.pm-cart__collaterals .cart_totals .tax-total--placeholder td {
	color: var(--pm-color-muted);
}

.pm-cart__placeholder {
	color: var(--pm-color-placeholder);
	font-weight: 500;
	letter-spacing: 0.05em;
}

.pm-cart__collaterals .cart_totals .cart-item-count th {
	font-weight: 500;
	color: var(--pm-color-muted);
}

.pm-cart__collaterals .cart_totals .cart-item-count td {
	font-weight: 600;
}

/* ----- Sticky bottom checkout bar (desktop only) -----
   QA round 21 (2026-06-05) — visible only when the in-totals checkout
   button has scrolled out of viewport. JS toggles `data-pm-visible` on
   the element based on an IntersectionObserver watching the totals box.
   Hidden on mobile (the existing in-totals button already lives at the
   bottom of the page on mobile — sticky duplicate would crowd). */
.pm-cart__sticky-cta {
	display: none;
}

@media (min-width: 901px) {
	.pm-cart__sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 20px;
		padding: 14px 32px calc(14px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-top: 1px solid var(--pm-color-border);
		box-shadow: 0 -6px 18px -8px rgba(10, 10, 10, 0.08);
		z-index: 50;
		transform: translateY(110%);
		transition: transform 220ms ease;
		pointer-events: none;
	}
	.pm-cart__sticky-cta[data-pm-visible="true"] {
		transform: translateY(0);
		pointer-events: auto;
	}
	.pm-cart__sticky-cta__total {
		font-size: 15px;
		color: var(--pm-color-ink);
	}
	.pm-cart__sticky-cta__total strong {
		font-weight: 700;
		margin-left: 6px;
		font-size: 17px;
		color: var(--pm-color-ink);
	}
	/* QA round 21 — color !important: theme link defaults (and Storefront
	   button.alt visited-state) were overriding our white text on this
	   solid black button. Belt + braces: chained class for specificity,
	   !important on color + decoration. */
	.pm-cart__sticky-cta a.pm-cart__sticky-cta__btn,
	.pm-cart__sticky-cta .pm-cart__sticky-cta__btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 12px 22px;
		background: var(--pm-color-ink) !important;
		color: var(--pm-color-surface) !important;
		border: 1px solid var(--pm-color-ink);
		border-radius: var(--pm-radius-sm);
		font-size: 13px;
		font-weight: 500 !important;
		letter-spacing: 0.01em;
		text-decoration: none !important;
		text-shadow: none !important;
		white-space: nowrap;
		transition: background-color 200ms ease, color 200ms ease;
	}
	.pm-cart__sticky-cta__btn::after {
		content: "→";
		font-size: 14px;
		color: var(--pm-color-surface);
		transition: transform 200ms ease, color 200ms ease;
	}
	.pm-cart__sticky-cta a.pm-cart__sticky-cta__btn:hover,
	.pm-cart__sticky-cta a.pm-cart__sticky-cta__btn:focus,
	.pm-cart__sticky-cta a.pm-cart__sticky-cta__btn:visited {
		background: var(--pm-color-surface) !important;
		color: var(--pm-color-ink) !important;
		border-color: var(--pm-color-ink);
	}
	.pm-cart__sticky-cta__btn:hover::after,
	.pm-cart__sticky-cta__btn:focus::after {
		color: var(--pm-color-ink);
		transform: translateX(4px);
	}
}

/* ----- Mobile tightening for the toolbar + instructions ----- */
@media (max-width: 768px) {
	.pm-cart__toolbar {
		padding: 0;
		margin-bottom: 12px;
	}
	.pm-cart__toolbar-count {
		font-size: 13px;
		font-weight: 400;
	}
	/* Even the bolded number reads softer on mobile per QA round 22 —
	   weight 500 instead of the desktop default 700. */
	.pm-cart__toolbar-count strong {
		font-weight: 500;
	}
	.pm-cart__toolbar-clear {
		padding: 6px 10px;
		font-size: 12px;
		font-weight: 400;
	}
	.pm-cart__instructions-input {
		font-size: 14px; /* prevent iOS auto-zoom on focus */
	}
}