/*
 * PouchPick Cart Page (/cart/) — S7D production implementation.
 *
 * Governed by design-locks/CART-PAGE-VISUAL-SYSTEM-LOCK.md v1.0, translating
 * design-lab/final/cart/s7-cart-page-final/cart-page-final.css 1:1 into this
 * theme's own token names (--pp-* from design-system.css, already loaded as
 * a dependency — no tokens redefined here) and .pp-cartpage-* class names
 * (deliberately never .pp-cart-* — the Cart Drawer already owns that
 * namespace site-wide in header-commerce.css; reusing it here would create
 * real style collisions between two differently-designed surfaces).
 *
 * Breakpoints are this page's own, per the lock's Section P (independent of
 * the header's 768/1180px tiers and the PLP's 600/900px grid tiers):
 *   - 1100px: single-column collapse (desktop 2-column rail -> stacked)
 *   - 767px: mobile sticky Checkout bar appears/disappears
 *   - 430px: mobile line-item recomposition (smaller packshot/type)
 */

.pp-cartpage {
	max-width: var(--pp-container-max);   /* S9D-D: the Cart Page joins the shared 1320 container token (lock §17 / §40) — was 1360 */
	margin: 0 auto;
	padding: var(--pp-space-6) var(--pp-gutter) var(--pp-space-7);
}

.pp-cartpage-head {
	padding: var(--pp-space-6) 0 var(--pp-space-4);
}
.pp-cartpage-title {
	font-family: var(--pp-font-display);
	font-weight: 600;
	font-size: var(--pp-text-page-title);   /* S9D-D: the shared page-title role (lock §11) */
	letter-spacing: -0.02em;
	margin: 0 0 4px;
}
.pp-cartpage-count {
	font-size: 0.9375rem;
	color: var(--pp-secondary-text);
	margin: 0;
}

/* ---------------- Desktop layout: cart list + sticky rail ---------------- */

.pp-cartpage-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--pp-space-6);
	align-items: start;
}
.pp-cartpage-rail {
	position: sticky;
	top: calc(var(--pp-sticky-top, 0px) + var(--pp-space-4) + var(--pp-admin-bar-h, 0px)); /* UI.1 §11: 16px below the header's sticky line, never behind the fixed header */
}
@media (max-width: 1100px) {
	.pp-cartpage-layout {
		grid-template-columns: 1fr;
	}
	.pp-cartpage-rail {
		position: static;
	}
}

/* ==========================================================
 * LINE ITEMS
 * ========================================================== */

.pp-cartpage-lines {
	border-top: 1px solid var(--pp-border);
}
.pp-cartpage-line {
	display: flex;
	gap: var(--pp-space-4);
	padding: var(--pp-space-6) 0;
	border-bottom: 1px solid var(--pp-border);
}
.pp-cartpage-line.pp-busy {
	opacity: 0.55;
	pointer-events: none;
}
.pp-cartpage-line-img {
	flex-shrink: 0;
	display: block;
	width: 96px;
	height: 96px;
}
/* S9D-D: one shared packshot component (lock §24) — 1:1 box, contain, white
   ground, per-product display scale from the single adapter. */
.pp-cartpage-line-img .pp-cartpage-packshot {
	width: 100%;
	height: 100%;
	display: flex;
	border: 1px solid var(--pp-border);
}

.pp-cartpage-line-mid {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.pp-cartpage-line-identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pp-cartpage-line-brand {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pp-secondary-text);
}
.pp-cartpage-line-title {
	font-family: var(--pp-font-body);
	font-size: 1rem;
	font-weight: 700;
	color: var(--pp-ink);
	display: inline-block;
}
.pp-cartpage-line-meta {
	font-size: 0.75rem;
	color: var(--pp-secondary-text);
	margin: 0;
}

.pp-cartpage-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-sm);
	width: fit-content;
}
/* S9D-D: one stepper grammar shared with the Cart Drawer (lock §40 / §38) —
   40px cells (≥44px on true mobile), SVG glyphs, real disabled state at 1,
   compact Press from the S9D-A foundation. The quantity INPUT stays a real
   input (the Cart Page's own locked affordance, CART lock Section H). */
.pp-cartpage-step {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--pp-ink);
	border-radius: var(--pp-radius-control);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--pp-motion-micro) var(--pp-ease-out), transform var(--pp-motion-press-out) var(--pp-ease-out);
}
.pp-cartpage-step .pp-i { width: 16px; height: 16px; }
.pp-cartpage-step:disabled {
	color: var(--pp-border);
	cursor: not-allowed;
	transform: none;
}
/* UI.1 P2 (Human Lock §8): hover on hover-capable input only; press = the 12%
   tint + scale(.985), also via pp-foundation.js's pointerdown `.is-pressed`. */
@media (hover: hover) {
	.pp-cartpage-step:not(:disabled):hover {
		background: var(--pp-soft-surface);
	}
}
.pp-cartpage-step:not(:disabled):active,
.pp-cartpage-step:not(:disabled).is-pressed {
	background: var(--pp-navy-tint-strong);
	transform: scale(var(--pp-press-scale));
	transition-duration: var(--pp-motion-press-in);
}
@media (prefers-reduced-motion: reduce) {
	.pp-cartpage-step:not(:disabled):active,
	.pp-cartpage-step:not(:disabled).is-pressed { transform: none; }
}
@media (max-width: 767px) {
	.pp-cartpage-step { width: var(--pp-hit-min); height: var(--pp-hit-min); }
}
.pp-cartpage-qty-input {
	width: 44px;
	align-self: stretch;
	text-align: center;
	border: none;
	border-left: 1px solid var(--pp-border);
	border-right: 1px solid var(--pp-border);
	font-size: var(--pp-text-label);
	font-weight: 600;
	font-family: var(--pp-font-body);
	padding: 6px 0;
	background: transparent;
	color: var(--pp-ink);
}
/* Safari auto-zoom safe on true mobile (lock §13). */
@media (max-width: 767px) {
	.pp-cartpage-qty-input { font-size: 1rem; }
}

.pp-cartpage-line-right {
	flex: 0 0 auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	min-width: 108px;
}
/* S9D-D: Remove is the tertiary/text tier of the global button system
   (lock §3), so it inherits the ≥44px true-mobile floor from .pp-btn-text.
   It stays a real link to WooCommerce's own remove URL — the no-JS path is
   unchanged. */
.pp-cartpage-line-remove {
	font-size: var(--pp-text-meta);
	padding-inline: 0;
}
.pp-cartpage-line-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
/* Weight / colour now come from the shared .pp-price-* grammar
   (product-card.css, lock §26); only the Cart Page's own density is set
   here. */
.pp-cartpage-price-percan.pp-price-primary { font-size: 1.0625rem; }
.pp-cartpage-price-percan .unit { font-size: var(--pp-text-meta-min); }
.pp-cartpage-price-was.pp-price-ref { font-size: var(--pp-text-meta); }
.pp-cartpage-line-total.pp-price-total {
	font-size: var(--pp-text-meta);
	text-transform: none;
	letter-spacing: 0;
}

/* ---------------- Recommendation — under the cart list, main column only ---------------- */

.pp-cartpage-reco {
	margin-top: var(--pp-space-6);
	border-top: 1px solid var(--pp-border);
	padding-top: var(--pp-space-5);
}
.pp-cartpage-reco-heading {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pp-secondary-text);
	margin: 0 0 var(--pp-space-3);
	font-family: var(--pp-font-body);
}
.pp-cartpage-reco-item {
	display: flex;
	align-items: center;
	gap: var(--pp-space-3);
	background: var(--pp-card-bg);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	padding: var(--pp-space-3);
	max-width: 420px;
}
.pp-cartpage-reco-item .pp-cartpage-packshot {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	display: flex;
	border: 1px solid var(--pp-border);
}
.pp-cartpage-reco-body {
	flex: 1;
	min-width: 0;
}
.pp-cartpage-reco-title {
	font-size: 0.8125rem;
	font-weight: 600;
	display: inline-block;
}
/* S9D-D (lock §15): same rule as the Drawer's recommendation — the title
   is the only link into that product, so it takes its own ≥44px effective
   hit area on true mobile without changing the visual type size. */
@media (max-width: 767px) {
	.pp-cartpage-reco-title { position: relative; }
	.pp-cartpage-reco-title::after {
		content: ""; position: absolute; top: 50%; left: 0;
		width: 100%; height: max(100%, var(--pp-hit-min));
		transform: translateY(-50%);
	}
}
.pp-cartpage-reco-meta {
	font-size: var(--pp-text-meta);
	color: var(--pp-secondary-text);
	margin: 2px 0 0;
}
.pp-cartpage-reco-price {
	font-size: var(--pp-text-meta);
	color: var(--pp-secondary-text);
	margin: 2px 0 0;
}
.pp-cartpage-reco-add {
	flex-shrink: 0;
	padding: 6px 12px;
	font-size: 0.75rem;
}
/* S9D-A: in-row button = S tier of the global button foundation (36px), not
   the M default. S9D-A-R: scoped to >=768px so the foundation's true-mobile
   >=44px floor is never outranked (lock §3 / §15, Account lock AK-3). */
@media (min-width: 768px) {
	.pp-cartpage-reco-add { min-height: var(--pp-btn-h-s); }
}

/* ==========================================================
 * ORDER SUMMARY
 * ========================================================== */

.pp-cartpage-summary {
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg);
	padding: var(--pp-space-5);
}
.pp-cartpage-summary-title {
	font-family: var(--pp-font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	margin: 0 0 var(--pp-space-4);
}
.pp-cartpage-summary-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	padding: 6px 0;
}
.pp-cartpage-summary-row .value {
	font-weight: 600;
}
.pp-cartpage-summary-row.discount .value {
	color: var(--pp-red);
}

.pp-cartpage-summary-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-top: 1.5px solid var(--pp-ink);
	margin-top: var(--pp-space-2);
	padding-top: var(--pp-space-3);
}
.pp-cartpage-summary-total .label {
	font-size: 0.9375rem;
	font-weight: 700;
}
.pp-cartpage-summary-total .value {
	font-size: 1.625rem;
	font-weight: 700;
}

.pp-cartpage-shipping {
	margin: var(--pp-space-4) 0;
}
.pp-cartpage-shipping p {
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0 0 8px;
}
.pp-cartpage-shipping p b {
	color: var(--pp-navy);
}
.pp-cartpage-shipping.is-unlocked p {
	color: var(--pp-success-text);
}
.pp-cartpage-shipping-track {
	height: 6px;
	background: var(--pp-secondary-surface);
	border-radius: 9999px;
	overflow: hidden;
}
.pp-cartpage-shipping-fill {
	height: 100%;
	background: var(--pp-navy);
	border-radius: 9999px;
	transform-origin: left;
	transition: transform calc(var(--pp-motion-feedback) * 1.8) var(--pp-ease-out), background-color var(--pp-motion-micro);
}
[dir="rtl"] .pp-cartpage-shipping-fill { transform-origin: right; }
.pp-cartpage-shipping.is-unlocked .pp-cartpage-shipping-fill {
	background: var(--pp-green);
}

.pp-cartpage-checkout-btn {
	width: 100%;
	font-size: var(--pp-text-btn-l);
	margin: 0 0 var(--pp-space-2);
	/* S9D-D-R (MINOR 3): the L height now comes from the real `pp-btn-l`
	   class on the control itself (inc/cart-page.php), not from a
	   surface-level min-height that the shared floor could out-rank. */
}
/* S9D-D: Continue shopping is the tertiary/text tier (lock §3) — the
   underline is revealed on hover/focus rather than painted permanently, and
   the ≥44px true-mobile floor comes from .pp-btn-text. */
.pp-cartpage-continue-link {
	display: flex;
	width: 100%;
	justify-content: center;
}

.pp-cartpage-coupon {
	margin-top: var(--pp-space-4);
	border-top: 1px solid var(--pp-border);
	padding-top: var(--pp-space-4);
}
/* S9D-D: the coupon controls join the shared field + button primitives
   (lock §13 / §3) — the disclosure is the text tier, the input is .pp-input
   and Apply is the outline-Navy secondary, exactly as Checkout's own
   always-visible coupon row. WooCommerce coupon authority is untouched: the
   real form, nonce and apply_coupon submit are unchanged. */
.pp-cartpage-coupon-toggle {
	padding-inline: 0;
	gap: 6px;
}
.pp-cartpage-coupon-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--pp-space-3);
}
.pp-cartpage-coupon-form[hidden] {
	display: none;
}
.pp-cartpage-coupon-input {
	flex: 1;
	min-width: 0;
}
.pp-cartpage-coupon-apply {
	flex: none;
	white-space: nowrap;
}
/* Real WooCommerce coupon success / error messaging only — never a
   fabricated outcome (CART lock Section M). Shared notice colours. */
.pp-cartpage-coupon-msg {
	font-size: var(--pp-text-meta);
	font-weight: 600;
	margin-top: 8px;
	display: none;
	align-items: flex-start;
	gap: 6px;
	border-radius: var(--pp-radius-sm);
	padding: 8px 10px;
}
.pp-cartpage-coupon-msg.is-visible {
	display: flex;
}
.pp-cartpage-coupon-msg.is-error {
	color: var(--pp-error-text);
	background: var(--pp-error-bg);
	border: 1px solid var(--pp-error-border);
}
.pp-cartpage-coupon-msg.is-success {
	color: var(--pp-success-text);
	background: var(--pp-success-bg);
	border: 1px solid var(--pp-success-border);
}

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

.pp-cartpage-empty {
	text-align: center;
	padding: var(--pp-space-7) var(--pp-gutter) var(--pp-space-6);
	max-width: var(--pp-container-max);
	margin: 0 auto;
}
.pp-cartpage-empty-title {
	font-family: var(--pp-font-display);
	font-weight: 600;
	font-size: var(--pp-text-page-title);
	letter-spacing: -0.02em;
	margin: 0 0 var(--pp-space-6);
	text-align: left;
}
.pp-cartpage-empty h2 {
	font-family: var(--pp-font-display);
	font-weight: 600;
	font-size: 1.5rem;
	margin: 0 0 8px;
}
.pp-cartpage-empty p {
	color: var(--pp-secondary-text);
	font-size: 0.9375rem;
	margin: 0 0 var(--pp-space-6);
}
.pp-cartpage-empty-cta {
	display: inline-flex;
	margin-bottom: var(--pp-space-4);
}
.pp-cartpage-empty-links {
	display: flex;
	gap: var(--pp-space-4);
	justify-content: center;
}
.pp-cartpage-empty-links a {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--pp-secondary-text);
	text-decoration: underline;
}

/* ---------------- Mobile sticky checkout — IntersectionObserver-driven ---------------- */

.pp-cartpage-sticky-checkout[hidden] {
	display: none !important;
}
/* Defense in depth, independent of JS state: the sticky bar is a TRUE
 * MOBILE mechanism only (CART-PAGE-VISUAL-SYSTEM-LOCK.md Section O). This
 * unconditional display:none at tablet/desktop widths guarantees the bar
 * can never sit in normal document flow or receive keyboard focus above
 * 767px even in the moment before/if the JS viewport gate (cart-page.js's
 * matchMedia('(max-width: 767px)') check) runs — the two mechanisms are
 * deliberately redundant, not duplicated logic to keep in sync by hand. */
@media (min-width: 768px) {
	.pp-cartpage-sticky-checkout {
		display: none !important;
	}
}
@media (max-width: 767px) {
	.pp-cartpage-sticky-checkout {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		background: var(--pp-page-bg);
		border-top: 1px solid var(--pp-border);
		box-shadow: 0 -6px 18px rgba(17, 17, 17, 0.08);
		padding: 10px var(--pp-gutter-mobile);
		padding-bottom: calc(10px + var(--pp-safe-bottom));   /* lock §16 — inert until the shell opts into viewport-fit=cover */
		align-items: center;
		gap: var(--pp-space-3);
	}
	body.pp-cartpage-sticky-visible .pp-cartpage {
		padding-bottom: 84px;
	}
	.pp-cartpage-sticky-checkout .total {
		flex: 1;
	}
	.pp-cartpage-sticky-checkout .total .label {
		font-size: 0.6875rem;
		color: var(--pp-secondary-text);
		display: block;
	}
	.pp-cartpage-sticky-checkout .total .value {
		font-size: 1.125rem;
		font-weight: 700;
	}
	.pp-cartpage-sticky-checkout a.pp-btn {
		flex: none;
	}
}

/* ---------------- Mobile line-item recomposition ---------------- */

@media (max-width: 767px) {
	.pp-cartpage, .pp-cartpage-empty { padding-inline: var(--pp-gutter-mobile); }   /* lock §17: 16px primary mobile commerce gutter */
}

@media (max-width: 430px) {
	.pp-cartpage {
		padding: var(--pp-space-4) var(--pp-gutter-mobile) var(--pp-space-7);
	}
	.pp-cartpage-line {
		gap: var(--pp-space-3);
		padding: var(--pp-space-5) 0;
	}
	.pp-cartpage-line-img {
		width: 72px;
		height: 72px;
	}
	.pp-cartpage-line-title {
		font-size: 0.9375rem;
	}
	.pp-cartpage-line-mid {
		gap: 10px;
	}
	.pp-cartpage-line-right {
		min-width: 88px;
	}
	.pp-cartpage-price-percan {
		font-size: 0.9375rem;
	}
	.pp-cartpage-summary-total .value {
		font-size: 1.375rem;
	}
}

/* ---------------- Real WooCommerce notices (wc_print_notices()), restyled minimally ---------------- */

/* S9D-D-R4 / R5: the notice surface AND its Cart container alignment are now
   owned entirely by the one shared `.pp-commerce-notice` block in
   design-system.css — which aligns the stack AND the `<ul class="woocommerce-error">`
   root, so a Cart error can no longer run edge-to-edge while a success is
   contained. Only the Cart's own top spacing remains here. */
body.woocommerce-cart .pp-notice-stack,
body.woocommerce-cart .woocommerce-error { margin-top: var(--pp-space-4); }