/**
 * EBTLA — WooCommerce skin (Cart, Checkout, Order Confirmation).
 *
 * Skins the stock WooCommerce **block** cart/checkout and the classic
 * order-received template to the EBTLA design system. No core components are
 * modified — CSS only. Tokens come from main.css :root (--ink, --cyan, --red,
 * --bg, Onest). Enqueued only on cart/checkout/account (see functions.php).
 *
 * Design direction: design_handoff_ebtla_checkout/ (README + *.dc.html).
 * Structure mirrors the handoff: dark title band → white inset 30px card →
 * two-column (content 1.5–1.7fr / sticky sidebar 1fr), cyan pill buttons,
 * #F8F9FA inputs, monogram thumbnails.
 *
 * @package EBTLA
 */

/* ============================================================
   0. Local aliases + page frame
   ============================================================ */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-order-received {
	--wc-card-radius: 30px;
	--wc-inner-radius: 16px;
	--wc-input-radius: 12px;
	--wc-hairline: rgba( 14, 18, 20, 0.12 );
	--wc-hairline-soft: rgba( 14, 18, 20, 0.07 );
	--wc-input-bg: #f8f9fa;
	background: var( --bg );
}

/* The theme's content wrapper — let the woo card breathe full width. */
.woocommerce-cart #primary.site-main,
.woocommerce-checkout #primary.site-main,
.woocommerce-order-received #primary.site-main {
	max-width: none;
	margin: 0;
	padding: 0 0 72px;
}

/* ============================================================
   1. Dark title band (all three pages)
   #0E1214 · padding 56px 24px 48px · red rule → cyan eyebrow → 52/900 title.
   entry-header is a flex column; the red rule (::before) and eyebrow (::after)
   are ordered above the real H1 (.entry-title) via `order`.
   ============================================================ */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-order-received .entry-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 56px 0 48px;
	background: var( --ink );
}
/* keep the three band rows on the same 1240px gutter as the card */
.woocommerce-cart .entry-header > *,
.woocommerce-checkout .entry-header > *,
.woocommerce-order-received .entry-header > *,
.woocommerce-cart .entry-header::before,
.woocommerce-checkout .entry-header::before,
.woocommerce-order-received .entry-header::before,
.woocommerce-cart .entry-header::after,
.woocommerce-checkout .entry-header::after,
.woocommerce-order-received .entry-header::after {
	width: 100%;
	max-width: var( --maxw );
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* the H1 title — 52/900 white */
.woocommerce-cart .entry-header .entry-title,
.woocommerce-checkout .entry-header .entry-title,
.woocommerce-order-received .entry-header .entry-title {
	order: 3;
	margin-top: 0;
	margin-bottom: 0;
	color: #fff;
	font-size: clamp( 34px, 6vw, 52px );
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.02;
}

/* 34×2 red rule (top) — full-width column box, bar painted at the 24px gutter */
.woocommerce-cart .entry-header::before,
.woocommerce-checkout .entry-header::before,
.woocommerce-order-received .entry-header::before {
	content: "";
	order: 1;
	height: 2px;
	box-sizing: border-box;
	background: linear-gradient( var( --red ), var( --red ) ) 24px 0 / 34px 2px no-repeat;
	background-origin: border-box;
}

/* cyan uppercase eyebrow (middle) */
.woocommerce-cart .entry-header::after,
.woocommerce-checkout .entry-header::after,
.woocommerce-order-received .entry-header::after {
	order: 2;
	color: var( --cyan );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}
.woocommerce-cart .entry-header::after { content: "YOUR CART"; }
.woocommerce-checkout .entry-header::after { content: "SECURE CHECKOUT"; }
.woocommerce-order-received .entry-header::after { content: "ORDER RECEIVED"; }

/* Confirmation: the real page H1 is "Checkout" — relabel to "Thank you!". */
.woocommerce-order-received .entry-header .entry-title {
	font-size: 0;
}
.woocommerce-order-received .entry-header .entry-title::after {
	content: "Thank you!";
	font-size: clamp( 34px, 6vw, 52px );
}

/* ============================================================
   2. White inset card wrapper (margin 32px 16px 0 · radius 30 · overflow hidden)
   Cart block, Checkout block, and the classic order-received root each become
   the signature white 30px card.
   ============================================================ */
.wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-order-received .woocommerce-order {
	max-width: var( --maxw );
	margin: 32px auto 0;
	padding: 40px clamp( 20px, 4vw, 48px );
	background: #fff;
	border: 1px solid var( --wc-hairline-soft );
	border-radius: var( --wc-card-radius );
	box-shadow: 0 24px 60px -40px rgba( 14, 18, 20, 0.35 );
}

/* WC block wrappers stretch full width by default; contain them. */
.wc-block-cart,
.wc-block-checkout {
	max-width: none;
}

/* ============================================================
   3. Shared primitives — buttons, inputs, headings
   ============================================================ */

/* Cyan pill buttons (proceed, place order, apply coupon primary) */
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button,
.woocommerce-cart .wc-block-components-button.contained,
.woocommerce-checkout .wc-block-components-button.contained,
.woocommerce-order-received .woocommerce-order .button.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 30px;
	background: var( --cyan );
	color: var( --cyan-ink );
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	box-shadow: none;
	transition: background 0.18s ease, transform 0.18s ease;
}
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.woocommerce-cart .wc-block-components-button.contained:hover,
.woocommerce-checkout .wc-block-components-button.contained:hover,
.woocommerce-order-received .woocommerce-order .button.wp-element-button:hover {
	background: var( --cyan-dark );
	color: #fff;
	transform: translateY( -1px );
}

/* Proceed-to-checkout is full width in the sidebar card */
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
}

/* Outlined pill (Apply coupon, continue shopping, cross-sell CTA) */
.woocommerce-cart .wc-block-components-button.outlined,
.woocommerce-checkout .wc-block-components-button.outlined {
	padding: 13px 24px;
	border-radius: 999px;
	border: 1px solid var( --wc-hairline );
	background: #fff;
	color: var( --ink );
	font-weight: 700;
}
.woocommerce-cart .wc-block-components-button.outlined:hover,
.woocommerce-checkout .wc-block-components-button.outlined:hover {
	border-color: var( --cyan );
	color: var( --cyan-dark );
}

/* Inputs / selects / textareas — #F8F9FA fill, 12px radius, hairline border */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input textarea,
.woocommerce-checkout .wc-block-components-select .wc-block-components-select__container,
.woocommerce-checkout .wc-block-components-textarea,
.woocommerce-cart .wc-block-components-totals-coupon__input input {
	padding: 13px 15px;
	background: var( --wc-input-bg );
	border: 1px solid rgba( 14, 18, 20, 0.14 );
	border-radius: var( --wc-input-radius );
	font-family: inherit;
	font-size: 15px;
	color: var( --ink );
}
.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-text-input textarea:focus,
.woocommerce-cart .wc-block-components-totals-coupon__input input:focus {
	border-color: var( --cyan );
	box-shadow: 0 0 0 3px rgba( 31, 168, 219, 0.15 );
	outline: none;
	background: #fff;
}

/* Floating labels colour */
.woocommerce-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-components-checkout-step__heading label {
	color: var( --muted );
	font-weight: 500;
}

/* Accent colour for radios / checkboxes */
.woocommerce-cart input[type="checkbox"],
.woocommerce-cart input[type="radio"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
	accent-color: var( --cyan );
}

/* Required-field asterisks in red */
.woocommerce-checkout .wc-block-components-label .required,
.woocommerce-checkout .wc-block-components-text-input .required {
	color: var( --red );
}

/* Section headings — 22–26 / 800 */
.woocommerce-checkout .wc-block-components-checkout-step__title,
.woocommerce-cart .wc-block-cart__totals-title,
.woocommerce-cart .wc-block-components-order-summary__title,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var( --ink );
}

/* Links in cyan */
.woocommerce-cart .wc-block-cart a,
.woocommerce-checkout .wc-block-checkout a,
.woocommerce-order-received .woocommerce-order a {
	color: var( --cyan-dark );
}
.woocommerce-cart .wc-block-cart a:hover,
.woocommerce-checkout .wc-block-checkout a:hover,
.woocommerce-order-received .woocommerce-order a:hover {
	color: var( --cyan );
}

/* Totals rows — label left, amount right; footer Total emphasised */
.wc-block-components-totals-item {
	font-size: 15px;
	color: var( --ink );
}
.wc-block-components-totals-item__label {
	color: var( --muted );
	font-weight: 600;
}
.wc-block-components-totals-footer-item {
	border-top: 1px solid var( --wc-hairline );
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 18px;
	font-weight: 800;
	color: var( --ink );
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 22px;
	font-weight: 900;
	color: var( --ink );
}
/* Recurring-total rows (Subscriptions) in cyan meta */
.wc-block-components-totals-item.wc-block-subscriptions__totals-item,
.wc-block-components-totals-item.wcs-recurring-totals__item {
	color: var( --cyan-dark );
}

/* ============================================================
   4. CART
   ============================================================ */

/* Two columns: table 1.7fr / sticky totals 1fr, gap 44 */
.wc-block-cart .wc-block-cart__main {
	flex: 1 1 auto;
	padding: 0;
}
.wc-block-cart .wc-block-cart__sidebar {
	flex: 0 0 340px;
}
@media ( min-width: 1025px ) {
	.wc-block-cart .wc-block-cart__sidebar {
		position: sticky;
		top: 120px;
	}
}

/* Column header row — 12/800 uppercase, 2px dark rule */
.wc-block-cart-items__header {
	border-bottom: 2px solid var( --ink );
}
.wc-block-cart-items__header .wc-block-cart-items__header-image,
.wc-block-cart-items__header .wc-block-cart-items__header-product,
.wc-block-cart-items__header .wc-block-cart-items__header-total {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ink );
}

/* Line-item rows — hairline divider, comfortable padding */
.wc-block-cart-items .wc-block-cart-items__row {
	border-bottom: 1px solid var( --wc-hairline-soft );
	padding: 24px 4px;
}

/* Thumbnail — 84×84 rounded-16 with dark monogram fallback + red bar */
.wc-block-cart-item__image {
	width: 84px;
}
.wc-block-cart-item__image img {
	width: 84px;
	height: 84px;
	border-radius: var( --wc-inner-radius );
	object-fit: cover;
	background: var( --ink );
}
/* Monogram fallback tile when a product has no image */
.wc-block-cart-item__image a:empty,
.wc-block-cart-item__image img[src=""] {
	display: block;
	width: 84px;
	height: 84px;
	border-radius: var( --wc-inner-radius );
	background: var( --ink );
	position: relative;
}

/* Product name — 17/800 */
.wc-block-cart-item__product .wc-block-components-product-name {
	font-size: 17px;
	font-weight: 800;
	color: var( --ink );
}
.wc-block-cart-item__product .wc-block-cart-item__prices,
.wc-block-cart-item__product .wc-block-components-product-metadata {
	font-size: 13px;
	color: var( --muted );
}

/* Quantity stepper — pill-shaped bordered group */
.wc-block-components-quantity-selector {
	border: 1px solid var( --wc-hairline );
	border-radius: 999px;
	overflow: hidden;
}
.wc-block-components-quantity-selector__button {
	color: var( --ink );
	font-size: 18px;
}
.wc-block-components-quantity-selector__button:hover {
	color: var( --cyan-dark );
	background: transparent;
}
.wc-block-components-quantity-selector__input {
	font-weight: 700;
	color: var( --ink );
}

/* Line subtotal — 16/800 right */
.wc-block-cart-item__total .wc-block-components-product-price__value {
	font-size: 16px;
	font-weight: 800;
	color: var( --ink );
}

/* Remove — 34px bordered circle × */
.wc-block-cart-item__remove-link {
	color: var( --muted );
	text-decoration: none;
	border-bottom: 0;
}
.wc-block-cart-item__remove-link:hover {
	color: var( --red );
}

/* Coupon field on the cart totals card */
.wc-block-components-totals-coupon__content {
	gap: 10px;
}

/* Cart totals — light #F4F6F7 sticky card */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	background: var( --bg );
	border: 1px solid var( --wc-hairline-soft );
	border-radius: 20px;
	padding: 26px 24px;
}

/* Secure-checkout note card under the button */
.wc-block-cart__sidebar .wc-block-components-checkout-return-to-cart-button,
.wc-block-cart__payment-methods {
	margin-top: 14px;
}

/* Cross-sell band — dark inset card */
.wc-block-cart .wc-block-cart__cross-sells,
.wc-block-cart .wp-block-woocommerce-cart-cross-sells-block {
	margin-top: 32px;
	padding: 34px 36px;
	background: var( --ink );
	border-radius: 24px;
	color: #fff;
}
.wc-block-cart .wc-block-cart__cross-sells .wc-block-components-product-name,
.wc-block-cart .wc-block-cart__cross-sells h2,
.wc-block-cart .wc-block-cart__cross-sells h3 {
	color: #fff;
}

/* ============================================================
   5. CHECKOUT
   ============================================================ */

/* Split card must read as one continuous 30px card. The block layout already
   places main + sidebar side by side; we wrap the whole thing (rule 2) and
   soften the internal seams. */
.wc-block-checkout__main {
	flex: 1 1 auto;
}
.wc-block-checkout__sidebar {
	flex: 0 0 380px;
}
@media ( min-width: 1025px ) {
	.wc-block-checkout__sidebar {
		position: sticky;
		top: 120px;
	}
}

/* Login / coupon notice bars — #F4F6F7 rounded bars */
.wc-block-checkout .wc-block-components-notice-banner,
.woocommerce-checkout .wc-block-checkout__login-prompt,
.wc-block-components-express-payment-continue-rule {
	background: var( --bg );
	border-radius: var( --wc-inner-radius );
}

/* Checkout step cards — hairline separation, generous rhythm */
.wc-block-components-checkout-step {
	border: 0;
	margin-bottom: 8px;
}
.wc-block-components-checkout-step__heading-content {
	color: var( --muted );
}

/* Order-summary sidebar — light card */
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: var( --bg );
	border: 1px solid var( --wc-hairline-soft );
	border-radius: 20px;
	padding: 26px 24px;
}

/* Order-summary product/subtotal header rule */
.wc-block-components-order-summary .wc-block-components-order-summary__content {
	border-top: 2px solid var( --ink );
	padding-top: 8px;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-weight: 800;
	color: var( --ink );
}
/* subscription "$/month" subline in cyan */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
	color: var( --muted );
}

/* Payment method cards — white rounded-16, selected = cyan-tinted border */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	background: #fff;
	border: 1px solid var( --wc-hairline );
	border-radius: var( --wc-inner-radius );
	/* left padding clears the absolutely-positioned radio (left:16px) */
	padding: 16px 16px 16px 48px;
	margin-bottom: 12px;
}
/* keep the radio vertically centred within the taller card */
.wc-block-components-radio-control__input {
	top: 50%;
	transform: translateY( -50% );
}
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option:has( input:checked ),
.wc-block-components-radio-control-accordion-option:has( input:checked ) {
	border-color: rgba( 31, 168, 219, 0.4 );
	box-shadow: 0 0 0 1px rgba( 31, 168, 219, 0.4 );
}

/* Terms / renewal disclosure block */
.wc-block-checkout__terms {
	font-size: 13px;
	color: var( --muted );
}

/* Place-order actions row */
.wc-block-checkout__actions {
	flex-direction: column;
	gap: 12px;
}
.wc-block-checkout__actions_row {
	justify-content: center;
}
/* SSL note + return-to-cart under the button */
.wc-block-components-checkout-return-to-cart-button {
	color: var( --muted );
	font-weight: 600;
	text-align: center;
}

/* ============================================================
   6. ORDER CONFIRMATION (classic thankyou template)
   ============================================================ */

/* Success banner — cyan-tinted rounded-20 bar */
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order .woocommerce-thankyou-order-received {
	margin: 0 0 24px;
	padding: 22px 26px;
	background: rgba( 31, 168, 219, 0.08 );
	border: 1px solid rgba( 31, 168, 219, 0.3 );
	border-radius: 20px;
	font-size: 17px;
	font-weight: 800;
	color: var( --ink );
}

/* Order-overview list → 4-up summary tiles */
.woocommerce-order .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 16px;
	margin: 0 0 32px;
	padding: 0;
	border: 0;
	list-style: none;
}
/* WooCommerce's global clearfix ::before/::after (display:table) become stray
   grid cells here — force them out so the tiles fill from column 1. */
.woocommerce-order-received .woocommerce-order .woocommerce-order-overview::before,
.woocommerce-order-received .woocommerce-order .woocommerce-order-overview::after {
	content: none !important;
	display: none !important;
}
.woocommerce-order .woocommerce-order-overview li {
	margin: 0;
	padding: 20px 22px;
	background: var( --bg );
	border: 1px solid var( --wc-hairline-soft );
	border-radius: var( --wc-inner-radius );
	border-left: 0;
	font-size: 18px;
	font-weight: 800;
	color: var( --ink );
	text-transform: none;
}
.woocommerce-order .woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-size: 18px;
	font-weight: 800;
}
/* the label part (WC renders label text then <strong>value) */
.woocommerce-order .woocommerce-order-overview li {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --muted );
}

/* Order details table */
.woocommerce-order .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-order .woocommerce-table--order-details thead th {
	border-bottom: 2px solid var( --ink );
	padding: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ink );
}
.woocommerce-order .woocommerce-table--order-details tbody td,
.woocommerce-order .woocommerce-table--order-details tbody th {
	padding: 16px 0;
	border-bottom: 1px solid var( --wc-hairline-soft );
	font-size: 15px;
	color: var( --ink );
}
.woocommerce-order .woocommerce-table--order-details .product-name {
	font-weight: 800;
}
/* subscription / fulfillment sublines */
.woocommerce-order .woocommerce-table--order-details .wc-item-meta,
.woocommerce-order .woocommerce-table--order-details .subscription-details {
	font-size: 13px;
	color: var( --muted );
}
.woocommerce-order .woocommerce-table--order-details tfoot th,
.woocommerce-order .woocommerce-table--order-details tfoot td {
	padding: 12px 0;
	font-size: 15px;
	color: var( --ink );
}
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
	font-size: 20px;
	font-weight: 900;
	border-top: 2px solid var( --ink );
}

/* Customer / billing details card */
.woocommerce-order .woocommerce-customer-details {
	margin-top: 32px;
}
.woocommerce-order .woocommerce-customer-details address {
	padding: 22px 24px;
	background: var( --bg );
	border: 1px solid var( --wc-hairline-soft );
	border-radius: var( --wc-inner-radius );
	font-style: normal;
	line-height: 1.7;
	color: var( --ink );
}

/* ============================================================
   7. Responsive
   ============================================================ */
@media ( max-width: 1024px ) {
	.wc-block-cart,
	.wc-block-checkout {
		flex-wrap: wrap;
	}
	.wc-block-cart .wc-block-cart__sidebar,
	.wc-block-checkout__sidebar {
		flex-basis: 100%;
		position: static;
	}
}
@media ( max-width: 900px ) {
	.woocommerce-order .woocommerce-order-overview {
		grid-template-columns: repeat( 2, 1fr );
	}
}
@media ( max-width: 760px ) {
	.wp-block-woocommerce-cart,
	.woocommerce-checkout .wp-block-woocommerce-checkout,
	.woocommerce-order-received .woocommerce-order {
		margin: 20px 12px 0;
		padding: 26px 18px;
		border-radius: 22px;
	}
	.woocommerce-cart .entry-header,
	.woocommerce-checkout .entry-header,
	.woocommerce-order-received .entry-header {
		padding: 40px 0 32px;
	}
}
@media ( max-width: 640px ) {
	.woocommerce-order .woocommerce-order-overview {
		grid-template-columns: 1fr;
	}
}