/**
 * Jubix Studios - WooCommerce Cart Block type scale and layout.
 *
 * Drop in: wp-content/themes/jubix-theme/assets/css/woocommerce-cart.css
 *
 * The Cart Block ships its own defaults, which set product details small and
 * the checkout CTA very large. This file establishes one scale so the jump
 * between them is deliberate rather than accidental.
 *
 * Everything is driven by the tokens below. Change a token, not a rule.
 */

.wp-block-woocommerce-cart {
	/* Type scale - a 1.2 ratio anchored on 16px body copy. */
	--jubix-text-xs: 0.8125rem;  /* 13px - metadata, badges          */
	--jubix-text-sm: 0.875rem;   /* 14px - descriptions, coupon row  */
	--jubix-text-md: 1rem;       /* 16px - totals rows, body         */
	--jubix-text-lg: 1.125rem;   /* 18px - product title             */
	--jubix-text-xl: 1.375rem;   /* 22px - order total               */

	--jubix-line-tight: 1.3;
	--jubix-line-body: 1.55;

	/* Sit the CTA one step above body copy, not four. */
	--jubix-cta-text: 1.0625rem;  /* 17px */
	--jubix-cta-padding: 0.9rem 1.5rem;
	--jubix-cta-radius: 999px;

	--jubix-rule: rgba(0, 0, 0, 0.1);
	--jubix-muted: #5b5b66;
}

/* -------------------------------------------------------------------------
 * 1. Reduce layout shift while the block hydrates.
 *    The Cart Block renders a skeleton before React mounts; without a floor
 *    height the page jumps when the real content lands.
 * ---------------------------------------------------------------------- */

.wp-block-woocommerce-cart.is-loading {
	min-height: 60vh;
}

/* -------------------------------------------------------------------------
 * 2. Line items
 * ---------------------------------------------------------------------- */

.wc-block-cart-item__product .wc-block-components-product-name {
	font-size: var(--jubix-text-lg);
	font-weight: 600;
	line-height: var(--jubix-line-tight);
	text-decoration: none;
	color: inherit;
}

.wc-block-cart-item__product .wc-block-components-product-name:hover,
.wc-block-cart-item__product .wc-block-components-product-name:focus-visible {
	text-decoration: underline;
}

.wc-block-cart-item__product .wc-block-components-product-price {
	font-size: var(--jubix-text-sm);
	color: var(--jubix-muted);
}

.wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-cart-item__product .wc-block-components-product-metadata__description {
	font-size: var(--jubix-text-sm);
	line-height: var(--jubix-line-body);
	color: var(--jubix-muted);
}

.wc-block-cart-item__total .wc-block-components-product-price {
	font-size: var(--jubix-text-md);
	font-weight: 600;
	color: inherit;
}

.wc-block-cart-item__total .wc-block-components-sale-badge {
	font-size: var(--jubix-text-xs);
}

/* Quantity stepper - sized to be tappable on mobile. */
.wc-block-components-quantity-selector {
	min-height: 44px;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	font-size: var(--jubix-text-md);
}

/* -------------------------------------------------------------------------
 * 3. Totals
 * ---------------------------------------------------------------------- */

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	font-size: var(--jubix-text-md);
}

.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button {
	font-size: var(--jubix-text-md);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: var(--jubix-text-md);
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--jubix-text-xl);
	font-weight: 700;
	line-height: var(--jubix-line-tight);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
	font-size: var(--jubix-text-xs);
	color: var(--jubix-muted);
}

/* -------------------------------------------------------------------------
 * 4. Primary CTA
 * ---------------------------------------------------------------------- */

.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	font-size: var(--jubix-cta-text);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: none;
	padding: var(--jubix-cta-padding);
	border-radius: var(--jubix-cta-radius);
	min-height: 52px;
}

/* Keep the express buttons from dominating the summary. */
.wp-block-woocommerce-cart .wc-block-components-express-payment__event-buttons > li {
	max-height: 48px;
}

.wp-block-woocommerce-cart .wc-block-components-express-payment__title-container {
	font-size: var(--jubix-text-sm);
}

/* -------------------------------------------------------------------------
 * 5. Continue shopping link (rendered by cart-continue-shopping.js)
 * ---------------------------------------------------------------------- */

.jubix-continue-shopping {
	margin-top: 1rem;
	text-align: center;
}

.jubix-continue-shopping__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5rem 0.25rem;
	font-size: var(--jubix-text-md);
	font-weight: 500;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.jubix-continue-shopping__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 4px;
}

.jubix-continue-shopping__link::before {
	content: "\2190"; /* left arrow */
	font-size: 1.1em;
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * 6. Small screens
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.wp-block-woocommerce-cart {
		--jubix-text-lg: 1.0625rem;
		--jubix-text-xl: 1.25rem;
		--jubix-cta-text: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-cart * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}