/**
 * Cart page (templates/page-cart.html -> the "Cart" page's woocommerce/cart
 * block). Every color is a --wp--preset--color--* token, so it follows
 * color-mode.css's light/dark swap automatically. Only enqueued on the
 * cart page - see hooks.php enqueue_frontend_assets().
 */

/* Belt-and-braces width fix: the theme's own "Page Width" control (set to
   "wide" for this page - see includes/customizer/content_width.php) should
   already get .wp-block-post-content to the theme's wide-size, but
   WooCommerce's own two-column split for this block is decided by a CSS
   *container query* on .wp-block-woocommerce-cart's own measured width
   (@container (max-width: 699px) in the plugin's cart.css), not a normal
   media query - so if anything upstream still leaves it under ~700px, it
   silently falls back to one stacked column with no error to debug. Forcing
   the width here directly, scoped to this page only, removes that
   uncertainty regardless of how the ancestor cascade resolves. */
body.woocommerce-cart .wp-block-post-content {
	max-width: var(--wp--style--global--wide-size, 1400px) !important;
	width: 100% !important;
}

.wp-block-woocommerce-cart {
	margin-top: var(--wp--preset--spacing--m);
	margin-bottom: var(--wp--preset--spacing--2-xl);
	max-width: none !important;
}

.wc-block-cart {
	align-items: start;
	gap: var(--wp--preset--spacing--xl);
}

/* Force the two-column split even if WooCommerce's own container query
   still measures this element as "small" for any reason - min-width here
   is a real viewport media query, independent of that container query.
   1024px, not 700px: between the two, a forced 62/38 split left the
   summary card ~250px wide on a tablet - narrower than the phone layout.
   Below it, WooCommerce's own container query decides, which stacks
   cleanly. */
@media (min-width: 1024px) {
	.wc-block-components-sidebar-layout.wc-block-cart {
		flex-wrap: nowrap !important;
	}

	.wc-block-cart .wc-block-components-main {
		width: 62% !important;
		padding-right: 3rem !important;
	}

	.wc-block-cart .wc-block-components-sidebar {
		width: 38% !important;
		padding-left: 1.75rem !important; /* the card itself - see .wc-block-cart__sidebar below */
	}
}

/* Line items */
.wc-block-cart-items__header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: 0.75rem;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--body-text);
	opacity: 0.6;
}

.wc-block-cart-items__row {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	align-items: flex-start;
}

.wc-block-cart-items__row:first-of-type {
	padding-top: 0.5rem;
}

.wc-block-cart-item__image img {
	border-radius: 10px;
	box-shadow: 0 1px 1px rgba(4, 18, 0, 0.03), 0 10px 24px -14px rgba(4, 18, 0, 0.3);
}

.wc-block-components-product-name {
	font-weight: 600;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
	line-height: 1.4;
}

.wc-block-components-product-name:hover {
	color: var(--wp--preset--color--primary);
}

.wc-block-components-product-metadata {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--body-text);
	opacity: 0.65;
	margin-top: 0.3rem;
}

.wc-block-components-product-badge,
.wc-block-components-product-sale-badge {
	display: inline-flex;
	align-items: center;
	height: auto;
	padding: 0.3em 0.65em;
	margin: 0.4rem 0 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	overflow: hidden;
}

.wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--body-text);
	transition: color 0.15s ease, transform 0.15s ease;
}

.wc-block-components-quantity-selector__button:hover {
	color: var(--wp--preset--color--primary);
}

.wc-block-components-quantity-selector__button:active {
	transform: scale(0.9);
}

.wc-block-components-quantity-selector__input {
	-moz-appearance: textfield;
}

.wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
.wc-block-components-quantity-selector__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wc-block-cart-item__remove-link,
.wc-block-cart-item__save-for-later-link {
	font-size: 0.8125rem;
	text-decoration: none;
	color: var(--wp--preset--color--body-text);
	opacity: 0.6;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--danger);
	opacity: 1;
}

.wc-block-cart-item__save-for-later-link:hover {
	color: var(--wp--preset--color--primary);
	opacity: 1;
}

.wc-block-components-product-price {
	font-weight: 600;
	color: var(--wp--preset--color--heading);
}

.wc-block-components-product-price .wc-block-components-product-price__regular {
	opacity: 0.5;
	font-weight: 400;
	text-decoration: line-through;
	margin-right: 0.4em;
}

.wc-block-cart-item__total .wc-block-components-product-price {
	font-size: 1rem;
}

/* Order summary sidebar - one card around the whole sidebar (summary,
   express payment, checkout button), not one per child: per-child cards
   split it into three floating boxes, one of them empty whenever no
   express payment method is set up. */
.wc-block-cart__sidebar {
	background: var(--wp--preset--color--page-background);
	border-radius: 16px;
	padding: 1.75rem !important;
	box-shadow: 0 1px 1px rgba(4, 18, 0, 0.03), 0 20px 40px -28px rgba(4, 18, 0, 0.25);
	position: sticky;
	top: var(--wp--preset--spacing--l);
}

.wc-block-cart__payment-options:not(:has(*)) {
	display: none;
}

.wc-block-cart__totals-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	margin: 0 0 1.25rem;
}

.wc-block-components-totals-item {
	padding: 0.6rem 0;
	font-size: 0.9375rem;
}

.wc-block-components-totals-item__label {
	color: var(--wp--preset--color--body-text);
	opacity: 0.75;
}

.wc-block-components-totals-item__value {
	font-weight: 500;
	color: var(--wp--preset--color--heading);
}

.wc-block-components-totals-footer-item {
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	opacity: 1;
}

/* Coupon form */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--wp--preset--color--primary);
	font-size: 0.875rem;
	font-weight: 500;
}

.wc-block-components-totals-coupon__content {
	margin-top: 0.75rem;
}

.wc-block-components-totals-coupon__form {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.wc-block-components-totals-coupon__input input {
	border-color: var(--wp--preset--color--border);
	border-radius: 8px;
	background: #fff;
}

.wc-block-components-totals-coupon__input input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}

.wc-block-components-totals-coupon__button {
	flex: none;
	border-radius: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Checkout CTA */
.wc-block-cart__submit-container {
	margin-top: 1.5rem;
}

.wc-block-cart__submit-button {
	width: 100%;
	padding: 1.05rem;
	border-radius: 10px;
	font-weight: 700;
	font-size: 0.9375rem;
	box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent);
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.wc-block-cart__submit-button:hover {
	transform: translateY(-2px);
}

.wc-block-cart__submit-button:active {
	transform: scale(0.98) !important;
}

.wp-block-woocommerce-cart-accepted-payment-methods-block {
	margin-top: 1.25rem;
	opacity: 0.6;
}

.wp-block-woocommerce-cart-express-payment-block:not(:has(*)) {
	display: none;
}

/* Empty cart state */
.wc-block-cart__empty-cart__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-top: var(--wp--preset--spacing--xl);
}

.wp-block-woocommerce-empty-cart-block hr.wp-block-separator {
	margin: var(--wp--preset--spacing--l) auto;
	opacity: 0.4;
}

.wp-block-woocommerce-empty-cart-block .wp-block-heading {
	text-align: center;
}

/* Cross-sells ("You may be interested in...") - matches the product card
   treatment used on the shop archive and related-products sections. */
.wc-block-cart-items .wp-block-woocommerce-product-collection {
	margin-top: var(--wp--preset--spacing--2-xl);
	padding-top: var(--wp--preset--spacing--l);
	border-top: 1px solid var(--wp--preset--color--border);
}

.wc-block-cart-items .wp-block-woocommerce-product-collection .wp-block-heading {
	font-size: var(--wp--preset--font-size--large);
}

.wc-block-cart-items .wc-block-components-product-image img {
	border-radius: 10px;
}

.wc-block-cart-items .wc-block-components-product-button__button {
	border-radius: 6px;
	font-weight: 500;
}

/* Micro-interaction: quantity increment/decrement (cart-page-interactions.js) */
@keyframes omega-cart-qty-pop {
	0% {
		transform: scale(1);
	}
	45% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

.wc-block-components-quantity-selector__input.omega-cart-qty-pop {
	animation: omega-cart-qty-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Micro-interaction: removing a line item. WooCommerce re-renders the item
   list via React the instant the request resolves, so there's no moment to
   animate the row actually leaving the DOM - this starts an optimistic
   fade/shrink the instant the remove link is clicked (before the request
   even completes), so by the time React removes the row it's already most
   of the way through the transition instead of just vanishing. */
.wc-block-cart-items__row.omega-cart-row-removing {
	opacity: 0.3;
	transform: scale(0.98);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

/* Micro-interaction: the total pulses when its value actually changes
   (quantity update, coupon applied, item removed). */
@keyframes omega-cart-total-pulse {
	0% {
		color: var(--wp--preset--color--primary);
	}
	100% {
		color: var(--wp--preset--color--heading);
	}
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value.omega-cart-total-pulse {
	animation: omega-cart-total-pulse 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-components-quantity-selector__input.omega-cart-qty-pop,
	.wc-block-components-totals-footer-item .wc-block-components-totals-item__value.omega-cart-total-pulse {
		animation: none;
	}

	.wc-block-cart-items__row.omega-cart-row-removing {
		transition: none;
	}
}

/* Tablets: items and summary stacked at full width - WooCommerce's own
   stacked state keeps its ~65/35 column widths, leaving the summary card
   a narrow box under a half-width item list. */
@media (max-width: 1023px) {
	.wc-block-components-sidebar-layout.wc-block-cart {
		flex-direction: column;
		flex-wrap: nowrap !important;
		gap: var(--wp--preset--spacing--l);
	}

	.wc-block-cart .wc-block-components-main,
	.wc-block-cart .wc-block-components-sidebar {
		width: 100% !important;
	}

	.wc-block-cart .wc-block-components-main {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.wc-block-cart__sidebar {
		position: static;
	}
}

/* ---------------------------------------------------------------------
   Mobile. WooCommerce switches the line items to a stacked grid (image |
   details, price under the name) below its own container breakpoint;
   these keep that inside the page gutter and tighten everything around
   it for a phone.
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
	.wp-block-woocommerce-cart {
		margin-top: var(--wp--preset--spacing--s);
		margin-bottom: var(--wp--preset--spacing--xl);
	}

	/* WooCommerce's stacked row is a fixed "80px 132px" grid with the price
	   dropped into an extra auto column after it - wider than a phone's
	   content column, so every price sat flush against (and past) the
	   screen edge. Image | flexible details | price instead. */
	.wc-block-cart-items {
		width: 100% !important;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 72px minmax(0, 1fr) auto !important;
		column-gap: 0.85rem !important;
		padding: 1.25rem 0 !important;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		padding-right: 0 !important;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2 / 3 !important;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 3 / 4 !important;
		align-items: flex-end;
	}

	.wc-block-cart-item__image img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		background: var(--wp--preset--color--page-background);
	}

	.wc-block-cart-item__wrap .wc-block-components-product-metadata {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.wc-block-cart-item__quantity {
		display: flex;
		align-items: center;
		gap: 0.75rem;
	}

	/* 44px minimum touch target for the stepper buttons. */
	.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
		min-height: 40px;
	}

	.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
		min-width: 40px;
	}

	.wc-block-cart__sidebar {
		padding: 1.25rem !important;
		border-radius: 14px;
	}

	.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
	.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 1.0625rem;
	}

	.wc-block-cart__submit-container {
		margin-top: 1rem;
	}

	/* WooCommerce's own sticky "Proceed to Checkout" bar (shown once the
	   in-flow button scrolls out of view on a phone) - same look as the
	   in-flow button, on a surface that separates it from the page. */
	.wc-block-cart__submit-container--sticky {
		padding: 0.75rem var(--wp--preset--spacing--m) calc(0.75rem + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--background);
		box-shadow: 0 -10px 24px -16px rgba(4, 18, 0, 0.35);
	}

	.wc-block-cart__submit-container--sticky::before {
		display: none;
	}

	.wc-block-cart-items .wp-block-woocommerce-product-collection {
		margin-top: var(--wp--preset--spacing--xl);
	}

	.wc-block-cart__empty-cart__title {
		font-size: var(--wp--preset--font-size--x-large);
		margin-top: var(--wp--preset--spacing--l);
	}
}