/**
 * Cart Page — JUNK Plastic Rehab
 * Covers: full cart page layout, cart items, coupon, totals, checkout.
 */

/* ── Strip the outer page.php container/section wrapper ONLY when our custom
   cart.php template is active (shortcode mode). Uses :has() so the Cart Block
   (Gutenberg) retains normal container margins and spacing. ── */
.woocommerce-cart #primary > .container:has(.cart-page) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Hide the WordPress page h1 "Cart" in shortcode/template mode — we render our own */
.woocommerce-cart #primary > .container:has(.cart-page) .entry-title {
	display: none;
}

/* ── Page shell ── */
.cart-page {
	padding-top: var(--section-spacing);
	padding-bottom: calc( var(--section-spacing) * 2 );
}

.cart-page__title {
	margin-bottom: 40px;
}

/* ── 2-col layout: items | sidebar ── */
.cart-page .container {
	display: grid;
	grid-template-columns: 1fr 360px;
	grid-template-rows: auto 1fr;
	column-gap: 60px;
	row-gap: 0;
	align-items: start;
}

.cart-page__title {
	grid-column: 1 / -1;
}

.cart-page__form {
	grid-column: 1;
}

.cart-page__sidebar {
	grid-column: 2;
	position: sticky;
	top: calc( var(--header-height-desktop, 72px) + 24px );
}

/* ── Items list ── */
.cart-page__items {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Column header row — mirrors .cart-item grid */
.cart-page__col-headers {
	display: grid;
	grid-template-columns: 100px 1fr 120px 100px 44px;
	column-gap: 24px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--color-border);
}

.cart-page__col-headers span {
	font-size: var(--typo-overline-size, 11px);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	opacity: 0.6;
}

.cart-page__col-total {
	text-align: right;
}

/* ── Single cart item row ── */
.cart-item {
	display: grid;
	grid-template-columns: 100px 1fr 120px 100px 44px;
	column-gap: 24px;
	align-items: center;
	padding: 24px 0;
	border-bottom: 1px solid var(--color-border);
}

.cart-item__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-alt);
}

.cart-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-item__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.cart-item__name {
	font-size: var(--typo-body-size, 15px);
	font-weight: 500;
	margin-bottom: 4px;
}

.cart-item__name a {
	color: var(--color-text);
}

.cart-item__name a:hover {
	color: var(--color-primary);
}

.cart-item__meta {
	font-size: var(--typo-body_small-size, 13px);
	color: var(--color-text-secondary);
	line-height: 1.5;
	margin-bottom: 6px;
}

.cart-item__meta dl,
.cart-item__meta p {
	margin: 0;
}

.cart-item__price-unit {
	font-size: var(--typo-body_small-size, 13px);
	color: var(--color-text-secondary);
}

/* Quantity */
.cart-item__qty .quantity {
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0 4px;
	width: fit-content;
}

.cart-item__qty .qty {
	width: 40px;
	text-align: center;
	border: none;
	padding: 8px 4px;
	font-size: var(--typo-input-size, 14px);
	font-weight: 500;
	background: transparent;
	-moz-appearance: textfield;
}

.cart-item__qty .qty::-webkit-outer-spin-button,
.cart-item__qty .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.cart-item__qty .qty-btn {
	background: none;
	border: none;
	padding: 8px 6px;
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color var(--transition);
}

.cart-item__qty .qty-btn:hover {
	color: var(--color-primary);
}

/* Subtotal */
.cart-item__subtotal {
	font-weight: 600;
	text-align: right;
}

/* Remove */
.cart-item__remove {
	display: flex;
	justify-content: flex-end;
}

.cart-item__remove-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	color: var(--color-text-secondary);
	transition: color var(--transition), background-color var(--transition);
	text-decoration: none;
}

.cart-item__remove-btn:hover {
	color: var(--color-text);
	background-color: var(--color-bg-alt);
}

/* Update cart row */
.cart-page__update {
	display: flex;
	justify-content: flex-end;
	padding: 20px 0 0;
	gap: 12px;
}

.cart-page__update-btn {
	padding: 10px 20px;
}

/* ── Sidebar ── */
.cart-page__sidebar-title {
	font-size: var(--typo-h5-size, 18px);
	font-weight: 600;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
}

/* Coupon */
.cart-page__coupon {
	margin-bottom: 32px;
}

.coupon-input-group {
	display: flex;
	gap: 8px;
}

.coupon-input-group input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	font-size: var(--typo-input-size, 14px);
}

.coupon-input-group .btn {
	white-space: nowrap;
	padding: 10px 18px;
	font-size: var(--typo-button-size, 13px);
}

/* Totals table */
.cart-totals__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}

.cart-totals__table th,
.cart-totals__table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--typo-button-size, 14px);
	vertical-align: middle;
}

.cart-totals__table th {
	color: var(--color-text-secondary);
	font-weight: 400;
	text-align: left;
	padding-right: 12px;
}

.cart-totals__table td {
	text-align: right;
	font-weight: 500;
}

.cart-totals__table .order-total th,
.cart-totals__table .order-total td {
	font-size: var(--typo-body-size, 16px);
	font-weight: 600;
	color: var(--color-text);
	border-bottom: none;
	padding-top: 16px;
}

.cart-totals__table .cart-discount td {
	color: var(--color-sale);
}

/* Coupon remove link */
.cart-totals__table .woocommerce-remove-coupon {
	font-size: var(--typo-badge-size, 11px);
	color: var(--color-text-secondary);
	margin-left: 6px;
	text-decoration: underline;
}

/* Proceed to checkout */
.cart-page__checkout-btn .checkout-button,
.cart-page__checkout-btn .wc-proceed-to-checkout a {
	display: block;
	width: 100%;
	text-align: center;
	padding: 16px 24px;
	background-color: var(--color-primary);
	color: var(--color-text-light);
	border: none;
	border-radius: var(--radius-sm);
	font-size: var(--typo-button-size, 14px);
	font-weight: var(--typo-button-weight, 500);
	letter-spacing: var(--typo-button-ls, 0.05em);
	text-transform: var(--typo-button-transform, uppercase);
	cursor: pointer;
	transition: background-color var(--transition);
	text-decoration: none;
}

.cart-page__checkout-btn .checkout-button:hover,
.cart-page__checkout-btn .wc-proceed-to-checkout a:hover {
	background-color: var(--color-primary-hover);
}

/* ── WooCommerce Cart Block — checkout button ── */
.wc-block-cart__submit-button,
.wc-block-cart .wc-block-cart__submit-container .wc-block-cart__submit-button {
	background-color: var(--color-primary) !important;
	color: var(--color-text-light) !important;
	border-color: var(--color-primary) !important;
	border-radius: var(--radius-sm) !important;
	font-size: var(--typo-button-size, 14px) !important;
	font-weight: var(--typo-button-weight, 500) !important;
	letter-spacing: var(--typo-button-ls, 0.05em) !important;
	text-transform: var(--typo-button-transform, uppercase) !important;
	transition: background-color var(--transition) !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart .wc-block-cart__submit-container .wc-block-cart__submit-button:hover {
	background-color: var(--color-primary-hover, #333) !important;
	border-color: var(--color-primary-hover, #333) !important;
	color: var(--color-text-light) !important;
}

/* ── WooCommerce Cart Block — coupon "Apply" button ── */
.wc-block-components-totals-coupon__button {
	background-color: transparent !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-sm) !important;
	font-size: var(--typo-button-size, 13px) !important;
	font-weight: var(--typo-button-weight, 500) !important;
	letter-spacing: var(--typo-button-ls, 0.05em) !important;
	text-transform: var(--typo-button-transform, uppercase) !important;
	padding: 10px 18px !important;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition) !important;
}

.wc-block-components-totals-coupon__button:hover:not([aria-disabled="true"]) {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-text-light) !important;
}

/* Coupon text input to match theme inputs */
.wc-block-components-totals-coupon__input .wc-block-components-text-input input,
.wc-block-components-totals-coupon__input input[type="text"] {
	border-radius: var(--radius-sm) !important;
	border-color: var(--color-border) !important;
	font-size: var(--typo-input-size, 14px) !important;
}

.wc-block-components-totals-coupon__input .wc-block-components-text-input input:focus,
.wc-block-components-totals-coupon__input input[type="text"]:focus {
	border-color: var(--color-text) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* WooCommerce notices inside cart */
.cart-page .woocommerce-message,
.cart-page .woocommerce-error,
.cart-page .woocommerce-info {
	grid-column: 1 / -1;
	margin-bottom: 24px;
	padding: 14px 20px;
	border-radius: var(--radius-sm);
	font-size: var(--typo-body-size, 14px);
}

.cart-page .woocommerce-message {
	background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
	border-left: 3px solid var(--color-success);
}

.cart-page .woocommerce-error {
	background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
	border-left: 3px solid var(--color-error);
}

.cart-page .woocommerce-info {
	background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
	border-left: 3px solid var(--color-primary);
}

/* ── Empty cart — default WooCommerce (hide it; we use our own template) ── */
.cart-page .cart-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 80px 24px;
}

.cart-page .cart-empty .return-to-shop {
	margin-top: 24px;
}

.cart-page .cart-empty .button {
	display: inline-block;
	padding: 14px 32px;
	background-color: var(--color-primary);
	color: var(--color-text-light);
	border-radius: var(--radius-sm);
	font-size: var(--typo-button-size, 14px);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: var(--typo-button-transform, uppercase);
	text-decoration: none;
	transition: background-color var(--transition);
}

.cart-page .cart-empty .button:hover {
	background-color: var(--color-primary-hover);
}

/* ── Custom empty cart state ── */
.cart-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 100px 24px 80px;
	gap: 16px;
}

.cart-empty-state__icon {
	color: var(--color-text-secondary);
	opacity: 0.35;
	margin-bottom: 8px;
}

.cart-empty-state__title {
	font-size: var(--typo-h4-size, 22px);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
}

.cart-empty-state__sub {
	font-size: var(--typo-body-size, 15px);
	color: var(--color-text-secondary);
	margin: 0;
}

.cart-empty-state__cta {
	margin-top: 8px;
}

/* ── Cross-sells / "New in store" section ── */
.cart-cross-sells {
	padding: var(--section-spacing) 0;
	border-top: 1px solid var(--color-border);
}

.cart-cross-sells__title {
	font-size: var(--typo-h3-size, 28px);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 36px;
}

/* ── WC Cart Block — empty cart state ── */

/* Replace sad-face icon with the header shopping bag icon */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxwYXRoIGQ9Ik02IDIgMyA2djE0YTIgMiAwIDAgMCAyIDJoMTRhMiAyIDAgMCAwIDItMlY2bC0zLTR6Ii8+PGxpbmUgeDE9IjMiIHkxPSI2IiB4Mj0iMjEiIHkyPSI2Ii8+PHBhdGggZD0iTTE2IDEwYTQgNCAwIDAgMS04IDAiLz48L3N2Zz4=") !important;
	mask-size: 4.5em !important;
	height: 4.5em !important;
	width: 4.5em !important;
	opacity: 0.2;
	background-color: var(--color-text) !important;
}

/* Hide the 3-dots separator inside the empty cart block */
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
	display: none !important;
}

/* Style the empty cart title */
.wc-block-cart__empty-cart__title {
	font-size: var(--typo-h4-size, 22px) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	color: var(--color-text) !important;
}

/* Center and space the whole empty cart block */
.wp-block-woocommerce-empty-cart-block {
	text-align: center;
	padding-top: 60px;
	padding-bottom: 80px;
}

.wp-block-woocommerce-empty-cart-block > * {
	max-width: none !important;
}

/* ── WC Blocks product grid — match theme product-card style ── */

/* Container (wc-block-grid wrapper) — expand to full width */
.wp-block-woocommerce-empty-cart-block .wc-block-grid,
.wp-block-woocommerce-empty-cart-block [class*="wp-block-woocommerce"] {
	max-width: none !important;
	width: 100% !important;
	text-align: left;
}

/* Reset font-size scaling WC applies to small-context 4-col grids */
.wc-block-grid.has-4-columns .wc-block-grid__product,
.wc-block-grid.has-4-columns.alignfull .wc-block-grid__product,
.wc-block-grid.has-4-columns.alignwide .wc-block-grid__product {
	font-size: 1rem !important;
}

/* Grid list: switch to CSS grid for reliable 4-col layout */
.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(var(--cols-desktop, 4), 1fr) !important;
	gap: var(--grid-gap, 24px) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-wrap: unset !important;
}

/* Each product card — CSS grid for name-left / price-right layout */
.wc-block-grid__product {
	display: grid !important;
	grid-template-areas:
		"image  image"
		"title  price"
		"button button" !important;
	grid-template-columns: 1fr auto !important;
	grid-template-rows: auto auto auto !important;
	align-items: baseline !important;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	border: none !important;
	text-align: left !important;
}

/* Flatten the <a> wrapper so image + title participate directly in the card grid */
a.wc-block-grid__product-link {
	display: contents !important;
}

/* Image container */
.wc-block-components-product-image,
.wc-block-grid__product-image {
	grid-area: image !important;
	aspect-ratio: var(--product-image-ratio, 1/1);
	overflow: hidden !important;
	border-radius: var(--radius-sm) !important;
	background: var(--color-bg-alt) !important;
	margin-bottom: 14px !important;
	display: block !important;
	width: 100% !important;
}

/* Image link fill */
.wc-block-components-product-image a,
.wc-block-grid__product-image a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

/* Image fill — override WC's high-specificity height:auto */
.wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image img,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-image img,
.wc-block-components-product-image img,
.wc-block-grid__product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Title — left column of name/price row */
.wc-block-components-product-title,
.wc-block-grid__product-title {
	grid-area: title !important;
	font-size: var(--typo-body-size, 15px) !important;
	font-weight: 500 !important;
	color: var(--color-text) !important;
	text-decoration: none !important;
	margin: 0 0 10px !important;
	align-self: baseline !important;
}

/* Price — right column of name/price row */
.wc-block-components-product-price,
.wc-block-grid__product-price {
	grid-area: price !important;
	font-size: var(--typo-body-size, 15px) !important;
	font-weight: 400 !important;
	color: var(--color-text) !important;
	margin: 0 0 10px !important;
	text-align: right !important;
	align-self: baseline !important;
}

/* Button — full-width spanning both columns */
.wc-block-grid__product-add-to-cart {
	grid-area: button !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart a.button,
.wc-block-grid__product-add-to-cart a {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	padding: 11px 16px !important;
	background-color: var(--color-primary) !important;
	color: var(--color-text-light) !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	font-size: var(--typo-button-size, 13px) !important;
	font-weight: var(--typo-button-weight, 500) !important;
	letter-spacing: var(--typo-button-ls, 0.05em) !important;
	text-transform: var(--typo-button-transform, uppercase) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	transition: background-color var(--transition) !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart a:hover {
	background-color: var(--color-primary-hover) !important;
}

/* New-style Products block (WC 7+) */
.wp-block-woocommerce-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--grid-gap, 24px) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wp-block-woocommerce-product-template li {
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
}

.wc-block-components-product-name a,
.wc-block-product-title {
	font-size: var(--typo-body-size, 15px) !important;
	font-weight: 500 !important;
	color: var(--color-text) !important;
	text-decoration: none !important;
}

/* Responsive: product grid */
@media ( max-width: 900px ) {
	.wc-block-grid__products,
	.wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media ( max-width: 480px ) {
	.wc-block-grid__products,
	.wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
}

/* ── Shipping calculator ── */
.cart-page .shipping-calculator-form {
	margin-top: 12px;
}

.cart-page .shipping-calculator-form p {
	margin-bottom: 12px;
}

.cart-page .shipping-calculator-form .button {
	padding: 10px 20px;
	font-size: var(--typo-button-size, 13px);
}

/* ── Responsive ── */
@media ( max-width: 900px ) {
	.cart-page .container {
		grid-template-columns: 1fr;
	}

	.cart-page__form {
		grid-column: 1;
	}

	.cart-page__sidebar {
		grid-column: 1;
		position: static;
	}
}

@media ( max-width: 600px ) {
	.cart-item {
		grid-template-columns: 80px 1fr 44px;
		grid-template-rows: auto auto auto;
		column-gap: 16px;
	}

	/* Image spans 3 rows on the left */
	.cart-item__image {
		grid-row: 1 / 4;
	}

	.cart-item__info {
		grid-column: 2;
		grid-row: 1;
	}

	.cart-item__qty {
		grid-column: 2;
		grid-row: 2;
	}

	.cart-item__subtotal {
		grid-column: 2;
		grid-row: 3;
		text-align: left;
	}

	.cart-item__remove {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
	}

	.cart-page__update {
		justify-content: stretch;
	}

	.cart-page__update-btn {
		width: 100%;
	}
}

/* ── Wishlist / Saved for later ── */
.cart-wishlist {
	background: var(--color-bg-alt, #f6f6f6);
	padding: 64px 0;
	margin-top: 0;
}

.cart-wishlist__title {
	font-size: var(--typo-h4-size, 22px);
	font-weight: 600;
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-border);
}

.cart-wishlist__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
}

.cart-wishlist__item {
	background: #fff;
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	border: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--transition), transform var(--transition);
}

.cart-wishlist__item:hover {
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}

.cart-wishlist__img-link {
	display: block;
}

.cart-wishlist__img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-bg-alt, #f6f6f6);
}

.cart-wishlist__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.cart-wishlist__item:hover .cart-wishlist__img img {
	transform: scale(1.04);
}

.cart-wishlist__details {
	padding: 14px 16px 16px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 10px;
	row-gap: 10px;
	align-items: baseline;
	flex: 1;
}

.cart-wishlist__name {
	grid-column: 1;
	grid-row: 1;
	font-size: var(--typo-body_small-size, 13px);
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cart-wishlist__name:hover {
	color: var(--color-primary);
}

.cart-wishlist__price {
	grid-column: 2;
	grid-row: 1;
	font-size: var(--typo-body_small-size, 13px);
	font-weight: 600;
	color: var(--color-text);
	text-align: right;
	white-space: nowrap;
}

.cart-wishlist__price ins {
	text-decoration: none;
}

.cart-wishlist__price del {
	font-weight: 400;
	color: var(--color-text-secondary);
	margin-right: 4px;
}

.cart-wishlist__add-btn,
.cart-wishlist__oos {
	grid-column: 1 / -1;
	grid-row: 2;
}

.cart-wishlist__add-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 9px 14px;
	background-color: var(--color-primary);
	color: var(--color-text-light);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
	box-sizing: border-box;
	font-size: var(--typo-badge-size, 11px);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.cart-wishlist__add-btn:hover {
	background-color: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-text-light);
}

.cart-wishlist__add-btn--outline {
	background-color: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}

.cart-wishlist__add-btn--outline:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-light);
}

.cart-wishlist__oos {
	display: inline-block;
	margin-top: auto;
	font-size: var(--typo-badge-size, 11px);
	font-weight: 500;
	color: var(--color-text-secondary);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Hide column headers on mobile (where cart-item collapses to stacked layout) */
@media ( max-width: 600px ) {
	.cart-page__col-headers {
		display: none;
	}
}

/* Wishlist responsive */
@media ( max-width: 600px ) {
	.cart-wishlist__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.cart-wishlist {
		padding: 40px 0;
	}
}