/**
 * Cart page — Electro-inspired, Packaging Commerce visual system.
 *
 * Loaded only on is_cart(). Every selector is scoped under .pkgc-cart* /
 * .pkgc-cart-empty* so nothing here can leak into the shop archive
 * (.pkgc-shop*), product card (.pkgc-electro-card*), single product
 * (.pkgc-product*), or homepage — all locked and must not regress.
 *
 * @package PackagingCommerce
 */

/* ── Page shell ───────────────────────────────────────────────────── */

.pkgc-cart-page {
	padding-block-start: var(--brand-space-4) !important;
}

.pkgc-cart-page__header {
	margin-block-end: var(--brand-space-5);
}

.pkgc-cart-page__title {
	font-size: var(--brand-text-2xl);
	font-weight: var(--brand-weight-bold);
	color: var(--brand-color-ink);
	margin: 0;
}

/* ── Main layout: items + totals sidebar ─────────────────────────── */

.pkgc-cart {
	display: flex;
	flex-direction: column;
	gap: var(--brand-space-6);
}

@media (min-width: 62rem) {
	.pkgc-cart {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--brand-space-8);
	}
}

.pkgc-cart__main {
	flex: 1 1 0;
	min-width: 0;
}

.pkgc-cart__aside {
	flex: 0 0 auto;
	width: 100%;
}

@media (min-width: 62rem) {
	.pkgc-cart__aside {
		width: clamp(20rem, 30%, 24rem);
		position: sticky;
		top: var(--brand-space-6);
	}
}

/* ── Cart table ───────────────────────────────────────────────────── */

.pkgc-cart-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-md);
	overflow: hidden;
}

.pkgc-cart-table thead th {
	padding: var(--brand-space-3) var(--brand-space-4);
	background-color: var(--brand-color-surface-alt);
	border-block-end: 1px solid var(--brand-color-border);
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-weight-semibold);
	color: var(--brand-color-ink);
	text-align: start;
}

.pkgc-cart-table tbody tr.woocommerce-cart-form__cart-item {
	border-block-end: 1px solid var(--brand-color-border);
}

.pkgc-cart-table tbody tr.woocommerce-cart-form__cart-item:last-of-type {
	border-block-end: none;
}

.pkgc-cart-table td {
	padding: var(--brand-space-4);
	vertical-align: middle;
}

.pkgc-cart-table td.product-remove {
	width: 44px;
	padding-inline-end: 0;
	text-align: center;
}

.pkgc-cart-table td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--brand-color-danger-bg);
	color: var(--brand-color-danger);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--brand-transition-fast);
}

.pkgc-cart-table td.product-remove a.remove:hover,
.pkgc-cart-table td.product-remove a.remove:focus-visible {
	background-color: var(--brand-color-danger);
	color: #fff;
}

/*
 * WooCommerce core (woocommerce-rtl.css) ships
 * `.woocommerce-cart table.cart .product-thumbnail { min-width:32px }` at
 * specificity (0,0,3,1) — .woocommerce-cart is a body class core adds on
 * this exact page, so it always matches here. That beats a plain
 * `.pkgc-cart-table td.product-thumbnail` selector (0,0,2,1) regardless
 * of load order, capping the column (and therefore the 72px thumbnail
 * image inside it) to 32px. Match the same selector shape to neutralise
 * it, the same pattern used for the single-product gallery width bug.
 */
.woocommerce-cart table.cart .product-thumbnail,
.pkgc-cart-table td.product-thumbnail {
	/*
	 * table-layout:auto treats width as a hint, not authoritative — the
	 * browser can still shrink this column toward its smallest content
	 * (the <th> above only holds a visually-hidden screen-reader-text
	 * span). min-width forces the column's floor, which auto-layout does
	 * respect, so the 72px thumbnail image always has room.
	 */
	width: 84px;
	min-width: 84px;
}

.pkgc-cart-table td.product-thumbnail img {
	width: 72px !important;
	height: 72px !important;
	object-fit: contain;
	padding: var(--brand-space-1);
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-sm);
	background-color: var(--brand-color-surface-alt);
	box-shadow: none;
	display: block;
}

.pkgc-cart-table td.product-name a {
	color: var(--brand-color-ink);
	font-weight: var(--brand-weight-semibold);
	text-decoration: none;
}

.pkgc-cart-table td.product-name a:hover {
	color: var(--brand-color-primary);
}

.pkgc-cart-table td.product-name .backorder_notification {
	display: block;
	margin-block-start: var(--brand-space-1);
	font-size: var(--brand-text-xs);
	color: var(--brand-color-warning);
}

.pkgc-cart-table td.product-price,
.pkgc-cart-table td.product-subtotal {
	font-weight: var(--brand-weight-semibold);
	color: var(--brand-color-ink);
	white-space: nowrap;
}

/* Quantity stepper — [-] [n] [+], same visual language as the
   single-product purchase panel but a fresh, page-scoped selector since
   cart.php does not fire the woocommerce_before/after_add_to_cart_quantity
   hooks that wrap .pkgc-qty on the single-product page. */
.pkgc-cart-table .pkgc-qty {
	display: flex;
	align-items: stretch;
	width: 112px;
	min-height: 40px;
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-md);
	background-color: var(--brand-color-surface);
	overflow: hidden;
}

.pkgc-cart-table .pkgc-qty .quantity {
	display: contents;
	margin: 0;
}

.pkgc-cart-table .pkgc-qty__btn {
	flex: 0 0 auto;
	width: 32px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: none;
	color: var(--brand-color-ink);
	cursor: pointer;
	transition: background-color var(--brand-transition-fast);
}

.pkgc-cart-table .pkgc-qty__btn:hover {
	background-color: var(--brand-color-surface-alt);
}

.pkgc-cart-table .pkgc-qty__btn:focus-visible {
	outline: 3px solid var(--brand-color-primary);
	outline-offset: -3px;
}

.pkgc-cart-table .pkgc-qty .qty {
	flex: 1 1 auto;
	width: 0;
	min-width: 0;
	min-height: 40px;
	padding-inline: 0;
	border: none;
	border-inline: 1px solid var(--brand-color-border);
	background-color: var(--brand-color-surface);
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-weight-semibold);
	text-align: center;
	color: var(--brand-color-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

.pkgc-cart-table .pkgc-qty .qty::-webkit-inner-spin-button,
.pkgc-cart-table .pkgc-qty .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pkgc-cart-table .pkgc-qty .qty:focus-visible {
	outline: 3px solid var(--brand-color-primary);
	outline-offset: -3px;
}

/* ── Actions row (coupon + update cart) ──────────────────────────── */

.pkgc-cart-table td.actions {
	padding: var(--brand-space-4);
	background-color: var(--brand-color-surface-alt);
	text-align: start;
}

.pkgc-cart-table td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--brand-space-2);
	margin-block-end: var(--brand-space-3);
}

.pkgc-cart-table td.actions .coupon label {
	margin: 0;
}

.pkgc-cart-table td.actions .coupon .input-text {
	float: none;
	width: auto;
	min-width: 12rem;
	min-height: 44px;
	margin: 0;
	padding-inline: var(--brand-space-3);
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-md);
	background-color: var(--brand-color-surface);
}

.pkgc-cart-table td.actions .coupon .input-text:focus-visible {
	border-color: var(--brand-color-primary);
	outline: none;
	box-shadow: 0 0 0 3px var(--brand-color-primary-soft);
}

.pkgc-cart-table td.actions button[name="apply_coupon"],
.pkgc-cart-table td.actions button[name="update_cart"] {
	min-height: 44px;
	padding-inline: var(--brand-space-5);
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-md);
	background-color: var(--brand-color-surface);
	color: var(--brand-color-ink);
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-weight-semibold);
	cursor: pointer;
	transition: background-color var(--brand-transition-fast), border-color var(--brand-transition-fast);
}

.pkgc-cart-table td.actions button[name="apply_coupon"]:hover,
.pkgc-cart-table td.actions button[name="update_cart"]:hover {
	border-color: var(--brand-color-primary);
	color: var(--brand-color-primary);
}

.pkgc-cart-table td.actions button[name="update_cart"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Mobile: responsive stacked table ────────────────────────────── */

@media (max-width: 47.98rem) {
	.pkgc-cart-table.shop_table_responsive thead {
		display: none;
	}

	.pkgc-cart-table.shop_table_responsive,
	.pkgc-cart-table.shop_table_responsive tbody,
	.pkgc-cart-table.shop_table_responsive tr,
	.pkgc-cart-table.shop_table_responsive td {
		display: block;
		width: 100%;
	}

	.pkgc-cart-table.shop_table_responsive tr.woocommerce-cart-form__cart-item {
		position: relative;
		padding: var(--brand-space-4);
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"thumb name remove"
			"thumb price price"
			"thumb qty qty"
			"thumb subtotal subtotal";
		gap: var(--brand-space-1) var(--brand-space-3);
	}

	.pkgc-cart-table.shop_table_responsive td {
		padding: 0;
		border: none;
	}

	.pkgc-cart-table.shop_table_responsive td.product-remove {
		grid-area: remove;
		width: auto;
		justify-self: end;
	}

	.pkgc-cart-table.shop_table_responsive td.product-thumbnail {
		grid-area: thumb;
		width: auto;
	}

	.pkgc-cart-table.shop_table_responsive td.product-name {
		grid-area: name;
	}

	.pkgc-cart-table.shop_table_responsive td.product-price {
		grid-area: price;
		font-size: var(--brand-text-sm);
		color: var(--brand-color-muted);
		font-weight: var(--brand-weight-regular);
	}

	.pkgc-cart-table.shop_table_responsive td.product-price::before {
		content: attr(data-title) ": ";
		font-weight: var(--brand-weight-medium);
		color: var(--brand-color-ink);
	}

	.pkgc-cart-table.shop_table_responsive td.product-quantity {
		grid-area: qty;
		margin-block-start: var(--brand-space-2);
	}

	.pkgc-cart-table.shop_table_responsive td.product-subtotal {
		grid-area: subtotal;
		margin-block-start: var(--brand-space-1);
	}

	.pkgc-cart-table.shop_table_responsive td.product-subtotal::before {
		content: attr(data-title) ": ";
		font-size: var(--brand-text-sm);
		font-weight: var(--brand-weight-medium);
		color: var(--brand-color-muted);
	}

	.pkgc-cart-table.shop_table_responsive td[data-title]::before {
		display: none;
	}

	.pkgc-cart-table.shop_table_responsive td.product-price::before,
	.pkgc-cart-table.shop_table_responsive td.product-subtotal::before {
		display: inline;
	}

	.pkgc-cart-table td.actions {
		display: block;
	}

	.pkgc-cart-table td.actions .coupon {
		flex-direction: column;
		align-items: stretch;
	}

	.pkgc-cart-table td.actions .coupon .input-text {
		width: 100%;
	}

	.pkgc-cart-table td.actions button[name="apply_coupon"] {
		width: 100%;
	}

	.pkgc-cart-table td.actions button[name="update_cart"] {
		width: 100%;
	}
}

/* ── Cart totals sidebar ──────────────────────────────────────────── */

.pkgc-cart__aside .cart_totals {
	padding: var(--brand-space-5);
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-lg);
	background-color: var(--brand-color-surface-alt);
}

.pkgc-cart__aside .cart_totals h2 {
	font-size: var(--brand-text-lg);
	font-weight: var(--brand-weight-bold);
	margin: 0 0 var(--brand-space-4);
}

.pkgc-cart__aside .cart_totals table.shop_table {
	width: 100%;
	border: none;
}

.pkgc-cart__aside .cart_totals table.shop_table tr {
	border-block-end: 1px solid var(--brand-color-border);
}

.pkgc-cart__aside .cart_totals table.shop_table tr:last-child {
	border-block-end: none;
}

.pkgc-cart__aside .cart_totals table.shop_table th,
.pkgc-cart__aside .cart_totals table.shop_table td {
	padding: var(--brand-space-3) 0;
	border: none;
	font-size: var(--brand-text-sm);
}

.pkgc-cart__aside .cart_totals table.shop_table th {
	font-weight: var(--brand-weight-medium);
	color: var(--brand-color-muted);
	text-align: start;
}

.pkgc-cart__aside .cart_totals table.shop_table td {
	text-align: end;
	font-weight: var(--brand-weight-semibold);
	color: var(--brand-color-ink);
}

.pkgc-cart__aside .cart_totals tr.order-total th,
.pkgc-cart__aside .cart_totals tr.order-total td {
	padding-block-start: var(--brand-space-4);
	font-size: var(--brand-text-lg);
	font-weight: var(--brand-weight-bold);
	color: var(--brand-color-ink);
}

.pkgc-cart__aside .cart_totals tr.order-total td .woocommerce-Price-amount {
	color: var(--brand-color-primary);
}

/* Shipping row / inline calculator */
.pkgc-cart__aside .cart_totals .woocommerce-shipping-totals select,
.pkgc-cart__aside .cart_totals .woocommerce-shipping-totals .input-text {
	width: 100%;
	min-height: 40px;
	padding-inline: var(--brand-space-2);
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-sm);
	font-size: var(--brand-text-sm);
}

.pkgc-cart__aside .cart_totals .shipping-calculator-button {
	display: inline-block;
	color: var(--brand-color-primary);
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-weight-medium);
	text-decoration: underline;
	cursor: pointer;
}

.pkgc-cart__aside .cart_totals .shipping-calculator-form {
	margin-block-start: var(--brand-space-3);
	padding-block-start: var(--brand-space-3);
	border-block-start: 1px solid var(--brand-color-border);
}

.pkgc-cart__aside .cart_totals .shipping-calculator-form .form-row {
	margin-block-end: var(--brand-space-2);
}

.pkgc-cart__aside .cart_totals .shipping-calculator-form label {
	display: block;
	margin-block-end: var(--brand-space-1);
	font-size: var(--brand-text-xs);
	color: var(--brand-color-muted);
}

.pkgc-cart__aside .cart_totals .shipping-calculator-form button[name="calc_shipping"] {
	width: 100%;
	min-height: 44px;
	border: none;
	border-radius: var(--brand-radius-md);
	background-color: var(--brand-color-ink);
	color: #fff;
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-weight-semibold);
	cursor: pointer;
}

/* Proceed to checkout — unhooked in inc/whatsapp-order.php; rule kept in
   case any WooCommerce extension re-adds a button to this action. */
.pkgc-cart__aside .wc-proceed-to-checkout {
	margin-block-start: var(--brand-space-5);
}

.pkgc-cart__aside .wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding-inline: var(--brand-space-6);
	border-radius: var(--brand-radius-md);
	background-color: var(--brand-color-primary);
	border: 1px solid var(--brand-color-primary);
	color: #fff;
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-base);
	font-weight: var(--brand-weight-bold);
	text-decoration: none;
	transition: background-color var(--brand-transition-fast);
}

.pkgc-cart__aside .wc-proceed-to-checkout .checkout-button:hover,
.pkgc-cart__aside .wc-proceed-to-checkout .checkout-button:focus-visible {
	background-color: var(--brand-color-primary-dark);
	border-color: var(--brand-color-primary-dark);
	color: #fff;
}

/* ── WhatsApp order panel (customer mini form + CTAs) ────────────────
   Renders inside .cart_totals via woocommerce_after_cart_totals, in the
   spot where "Proceed to checkout" used to sit (unhooked — no
   traditional checkout in this store). ─────────────────────────────── */

.pkgc-wa-order {
	margin-block-start: var(--brand-space-5);
	padding-block-start: var(--brand-space-5);
	border-block-start: 1px solid var(--brand-color-border);
}

.pkgc-wa-order__title {
	font-size: var(--brand-text-base);
	font-weight: var(--brand-weight-bold);
	color: var(--brand-color-ink);
	margin: 0 0 var(--brand-space-4);
}

.pkgc-wa-order__notice {
	margin-block-end: var(--brand-space-3);
	padding: var(--brand-space-3) var(--brand-space-4);
	border-radius: var(--brand-radius-md);
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-weight-medium);
}

.pkgc-wa-order__notice--error {
	background-color: var(--brand-color-danger-bg);
	color: var(--brand-color-danger);
}

.pkgc-wa-order__form {
	display: flex;
	flex-direction: column;
	gap: var(--brand-space-4);
}

.pkgc-form-row {
	display: flex;
	flex-direction: column;
	gap: var(--brand-space-1);
}

.pkgc-form-row label {
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-weight-medium);
	color: var(--brand-color-ink);
}

.pkgc-required {
	color: var(--brand-color-danger);
}

.pkgc-form-row .input-text,
.pkgc-form-row textarea.input-text {
	width: 100%;
	min-height: 44px;
	padding-inline: var(--brand-space-3);
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-md);
	background-color: var(--brand-color-surface);
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-sm);
	color: var(--brand-color-ink);
}

.pkgc-form-row textarea.input-text {
	min-height: 80px;
	padding-block: var(--brand-space-2);
	resize: vertical;
}

.pkgc-form-row .input-text:focus-visible {
	border-color: var(--brand-color-primary);
	outline: none;
	box-shadow: 0 0 0 3px var(--brand-color-primary-soft);
}

.pkgc-form-row .input-text:invalid[data-pkgc-touched] {
	border-color: var(--brand-color-danger);
}

.pkgc-wa-order__submit,
.pkgc-wa-order__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--brand-space-2);
	width: 100%;
	min-height: 48px;
	margin-block-start: var(--brand-space-1);
}

.pkgc-wa-order__submit {
	background-color: var(--brand-color-whatsapp);
	border-color: var(--brand-color-whatsapp);
}

.pkgc-wa-order__submit:hover,
.pkgc-wa-order__submit:focus-visible {
	background-color: var(--brand-color-whatsapp-dark);
	border-color: var(--brand-color-whatsapp-dark);
}

.pkgc-wa-order__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.pkgc-wa-order__submit-icon,
.pkgc-wa-order__phone svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* ── Cross-sells (moved to a full-width section below .pkgc-cart via
   inc/woocommerce.php — see that file's comment for why) ───────────── */

.cross-sells {
	margin-block-start: 48px;
}

.cross-sells > h2 {
	font-size: var(--brand-text-xl);
	font-weight: var(--brand-weight-bold);
	color: var(--brand-color-ink);
	margin: 0 0 var(--brand-space-5);
}

@media (max-width: 35.99rem) {
	.cross-sells {
		margin-block-start: 32px;
	}
}

/* ── Empty cart state ─────────────────────────────────────────────── */

.pkgc-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--brand-space-3);
	padding: 56px var(--brand-space-5);
	border: 1px dashed var(--brand-color-border);
	border-radius: var(--brand-radius-lg);
	background-color: var(--brand-color-surface-alt);
	text-align: center;
}

.pkgc-cart-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-block-end: var(--brand-space-2);
	border-radius: 50%;
	background-color: var(--brand-color-surface);
	border: 1px solid var(--brand-color-border);
	color: var(--brand-color-primary);
}

.pkgc-cart-empty .woocommerce-info {
	margin: 0;
	border: none;
	background: none;
	padding: 0;
	font-size: var(--brand-text-lg);
	font-weight: var(--brand-weight-semibold);
	color: var(--brand-color-ink);
}

/*
 * WooCommerce core (woocommerce-rtl.css) paints an icon-font glyph via
 * `.woocommerce-info::before { font-family:WooCommerce; content:"\e028" }`
 * positioned absolutely (top:1em; right:1.5em) to sit inside the default
 * notice's padding. This card already has its own icon circle above the
 * message (.pkgc-cart-empty__icon), so the core glyph is redundant here —
 * and with this rule's padding removed, WooCommerce's positioned icon
 * would otherwise overlap the message text.
 */
.pkgc-cart-empty .woocommerce-info::before {
	content: none;
	display: none;
}

.pkgc-cart-empty__cta {
	margin-block-start: var(--brand-space-2);
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.pkgc-cart-table .pkgc-qty__btn,
	.pkgc-cart__aside .wc-proceed-to-checkout .checkout-button,
	.pkgc-cart-table td.actions button,
	.pkgc-cart-table td.product-remove a.remove {
		transition: none;
	}
}