/* ==========================================================================
   Travel Hub - Cart & Checkout presentation            (Redesign Phase 1G)

   Loads on WooCommerce routes only, after assets/css/woo.css (priority 100),
   and only while that layer is active (TRAVELHUB_WOO_STYLES_OFF still
   restores stock WooCommerce). PRESENTATION ONLY: nothing here reads, writes
   or hides a price the store computed, a field it requires, a notice it
   raises or a step of its order flow. Every rule below is scoped to the
   Blocks Cart and Checkout inside the theme's route shell (.thwoo-route);
   Woo's alignwide is NOT overridden globally.

   What it fixes (audited on the real Blocks, fixture, with a sealed quote):
     1. the Blocks capped at 1180px inside the 1280 page grid - edges did not
        line up with the header, the page head or the footer;
     2. cards inside cards in both sidebars, and two EMPTY bordered boxes
        (the notices slot and the express-payment slot with nothing in them);
     3. the line total drawn on top of the tour date / quote reference on
        phones (Woo's grid row versus the theme's column);
     4. a second, collapsed "Order summary" after Place Order on phones;
     5. the payment radio drawn over the first word of its label;
     6. the primary actions in amber while every other primary action on the
        site - "Book now" included - is the teal action colour;
     7. a 24px remove control.
   ========================================================================== */

body.thc-woo { background: var(--th-color-canvas); }

/* 1. One page grid: the Blocks fill the route container like every page.
   Both the Blocks' alignwide cap and the 1180px frame printed inline by the
   commerce UI mu-plugin (zzzz-thc-blocks-commerce-v1.php, which this theme
   does not own and does not edit) are answered here, on these two blocks
   inside the route shell only. */
.thwoo-route .wp-block-woocommerce-cart.alignwide,
.thwoo-route .wp-block-woocommerce-checkout.alignwide {
	inline-size: auto;
	max-inline-size: none;
	margin-inline: 0;
}
.thwoo-route .thpg-main { padding-block: var(--th-group) var(--th-section); }

/* Two columns from 1024: content + a 26rem summary (was a 22rem flex item). */
@media (min-width: 1024px) {
	.thc-woo .thwoo-route .wc-block-components-sidebar-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		align-items: start;
		gap: var(--th-space-9);
	}
	.thc-woo .thwoo-route .wc-block-components-sidebar-layout > .wc-block-components-main,
	.thc-woo .thwoo-route .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
		inline-size: auto;
		max-inline-size: none;
		margin: 0;
	}
	.thc-woo .thwoo-route .wc-block-components-sidebar-layout > .wc-block-components-main { padding: 0; }
	.thc-woo .thwoo-route .wc-block-components-sidebar-layout > .wc-block-components-notices,
	.thc-woo .thwoo-route .wc-block-components-sidebar-layout > .wc-block-components-notices__snackbar { grid-column: 1 / -1; }
}
/* The sidebar is sticky from 781px (commerce UI mu-plugin / woo.css); keep it
   below the sticky header at every width where it sticks. */
@media (min-width: 781px) {
	.thc-woo .thwoo-route .wc-block-cart__sidebar,
	.thc-woo .thwoo-route .wc-block-checkout__sidebar { inset-block-start: calc(var(--th-header-h) + var(--th-space-6)); }
}

/* 2. The sidebar is ONE card; nothing inside it is boxed again. The checkout
   sidebar holds only the summary, so the summary is the card there. */
.thc-woo .thwoo-route .wc-block-checkout__sidebar {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
.thc-woo .thwoo-route .wc-block-cart__sidebar,
.thc-woo .thwoo-route .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--th-space-6);
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
	box-shadow: var(--th-shadow-card);
}
.thc-woo .thwoo-route .wc-block-cart__sidebar > *:not(.wc-block-components-notices__snackbar),
.thc-woo .thwoo-route .wc-block-checkout__sidebar > *:not(.wc-block-components-notices__snackbar),
.thc-woo .thwoo-route .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.thc-woo .thwoo-route .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
.thc-woo .thwoo-route .wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.thc-woo .thwoo-route .wc-block-checkout__sidebar .wc-block-components-order-summary,
.thc-woo .thwoo-route .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.thc-woo .thwoo-route .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { padding: var(--th-space-6); }
.thc-woo .thwoo-route .wc-block-components-totals-wrapper { padding-block: var(--th-space-4); border-block-start: var(--th-border); }
.thc-woo .thwoo-route .wc-block-components-totals-wrapper:first-child { border-block-start: 0; padding-block-start: 0; }

/* Empty slots draw nothing: the notices slot until a notice arrives, the
   express-payment slot when no express method is offered. They are never
   HIDDEN - only unframed - so anything a slot does receive still shows. */
.thc-woo .thwoo-route .wc-block-components-notices,
.thc-woo .thwoo-route .wc-block-cart__payment-options {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
.thc-woo .thwoo-route .wc-block-components-notices:has(.wc-block-components-notice-banner) { margin-block-end: var(--th-space-5); }
.thc-woo .thwoo-route .wc-block-cart__sidebar > .wc-block-cart__submit { margin-block-start: var(--th-space-5); }
.thc-woo .thwoo-route .wc-block-cart__sidebar .wc-block-cart__submit-container { margin-block-start: 0; }

/* 3. Cart line on phones: image | name, date, reference / total - in areas,
   so Woo's own grid placement can no longer stack the total on the details. */
@media (max-width: 767.98px) {
	body.thc-woo .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row {
		display: grid;
		grid-template-columns: 4.5rem minmax(0, 1fr);
		grid-template-areas: "img product" "img total";
		gap: var(--th-space-2) var(--th-space-4);
		padding: var(--th-space-4);
	}
	body.thc-woo .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image { grid-area: img; }
	body.thc-woo .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product { grid-area: product; }
	body.thc-woo .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-area: total;
		display: flex;
		justify-content: flex-start;
		padding: 0;
	}
	body.thc-woo .wc-block-cart .wc-block-cart-items .wc-block-cart-item__image img { inline-size: 4.5rem; block-size: 4.5rem; }
}
/* A line without a quantity control is one sealed quote: its total IS the
   price, and the unit price above it repeated the same figure. A line with a
   quantity keeps its unit price. */
body.thc-woo .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row:not(:has(.wc-block-components-quantity-selector)) .wc-block-cart-item__prices { display: none; }
.thc-woo .thwoo-route .wc-block-cart-item__total .wc-block-components-product-price,
.thc-woo .thwoo-route .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--th-color-ink);
	font-weight: var(--th-fw-display);
	font-variant-numeric: tabular-nums;
}
.thc-woo .thwoo-route .wc-block-components-product-name {
	color: var(--th-color-ink);
	font-size: var(--th-fs-h4);
	font-weight: var(--th-fw-heading);
	line-height: var(--th-lh-snug);
	text-decoration: none;
}
.thc-woo .thwoo-route .wc-block-components-product-metadata,
.thc-woo .thwoo-route .wc-block-components-product-details { color: var(--th-color-muted); font-size: var(--th-fs-small); }
.thc-woo .thwoo-route .wc-block-components-product-details__value { overflow-wrap: anywhere; }

/* The Woo product carries no photograph of the tour: the designed panel,
   not the grey placeholder graphic (the padding leaves the image no content
   box, so only the panel paints). */
body.thc-woo .thwoo-route .wc-block-cart-item__image img[src*="placeholder"],
body.thc-woo .thwoo-route .wc-block-components-order-summary-item__image img[src*="placeholder"] {
	box-sizing: border-box;
	padding: 50%;
	border: 0;
	border-radius: var(--th-radius-sm);
	background: linear-gradient(160deg, #0A4A6E 0%, #0E7A6C 100%);
}

/* 7. Remove control: a 44px target around the same icon. */
.thc-woo .thwoo-route .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	min-inline-size: 44px;
	margin-inline-start: calc(-1 * var(--th-space-3));
	text-decoration: none;
}

/* 4. One order summary on phones and tablets: the one in the form. Keyed to
   the SAME container width Woo uses to hide its in-form copy (700px), so
   there is no width at which both copies - and the totals - are hidden. */
@container (max-width: 699.98px) {
	.thc-woo .thwoo-route .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { display: none; }
}
.thc-woo .thwoo-route .wc-block-components-sidebar-layout.is-large .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block { display: none; }
.thc-woo .thwoo-route .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--th-space-5);
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
}

/* Checkout steps: one card each, the site's rhythm and headings. */
.thc-woo .thwoo-route .wc-block-components-checkout-step {
	padding: var(--th-space-6);
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
	box-shadow: none;
}
.thc-woo .thwoo-route .wc-block-components-checkout-step + .wc-block-components-checkout-step { margin-block-start: var(--th-space-5); }
.thc-woo .thwoo-route .wc-block-components-checkout-step__title,
.thc-woo .thwoo-route .wc-block-cart__totals-title,
.thc-woo .thwoo-route .wc-block-components-checkout-order-summary__title-text {
	color: var(--th-color-ink);
	font-size: var(--th-fs-section);
	font-weight: var(--th-fw-display);
	letter-spacing: var(--th-ls-heading);
}
.thc-woo .thwoo-route .wc-block-checkout__terms { margin-block: var(--th-space-6) 0; font-size: var(--th-fs-small); }
.thc-woo .thwoo-route .wc-block-checkout__terms .wc-block-components-checkbox__label { display: block; }
.thc-woo .thwoo-route .wc-block-checkout__actions { margin-block-start: var(--th-space-5); }
.thc-woo .thwoo-route .wc-block-checkout__actions_row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--th-space-4); }

/* 5. Payment method: the radio sits in its own gutter, never on the label. */
.thc-woo .thwoo-route .wc-block-components-radio-control__option {
	position: relative;
	padding-block: var(--th-space-4);
	padding-inline: calc(var(--th-space-4) + 20px + var(--th-space-3)) var(--th-space-4);
	border-radius: var(--th-radius-control);
}
.thc-woo .thwoo-route .wc-block-components-radio-control__input {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: var(--th-space-4);
	inset-inline-end: auto;
	margin: 0;
	transform: translateY(-50%);
	accent-color: var(--th-color-action);
}
.thc-woo .thwoo-route .wc-block-components-radio-control__option-checked,
.thc-woo .thwoo-route .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--th-color-action);
	background: var(--th-color-action-soft);
}
.thc-woo .thwoo-route .wc-block-components-radio-control-accordion-content { padding-inline: calc(var(--th-space-4) + 20px + var(--th-space-3)) var(--th-space-4); color: var(--th-color-muted); font-size: var(--th-fs-small); }

/* Form controls: the site's 48px control, radius and focus ring. */
.thc-woo .thwoo-route .wc-block-components-text-input input,
.thc-woo .thwoo-route .wc-block-components-combobox .components-combobox-control input,
.thc-woo .thwoo-route .wc-blocks-components-select .wc-blocks-components-select__select {
	min-block-size: var(--th-control-h);
	border-color: var(--th-border-color-strong);
	border-radius: var(--th-radius-control);
}
.thc-woo .thwoo-route .wc-block-components-text-input input:focus,
.thc-woo .thwoo-route .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--th-color-ink);
	outline: none;
	box-shadow: var(--th-focus-ring);
}
.thc-woo .thwoo-route .wc-block-components-checkbox__input { accent-color: var(--th-color-action); }

/* 6. Primary actions: the site's primary button. */
.thc-woo .thwoo-route .wc-block-components-button.wc-block-cart__submit-button,
.thc-woo .thwoo-route .wc-block-components-button.wc-block-components-checkout-place-order-button {
	min-block-size: var(--th-control-h-lg);
	border: 0;
	border-radius: var(--th-radius-control);
	background: var(--th-color-action);
	color: #fff;
	font-size: var(--th-control-fs);
	font-weight: var(--th-control-fw);
}
.thc-woo .thwoo-route .wc-block-components-button.wc-block-cart__submit-button:hover,
.thc-woo .thwoo-route .wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
	background: var(--th-color-action-hover);
	color: #fff;
}
.thc-woo .thwoo-route .wc-block-components-button:not(.is-link):focus-visible { outline: none; box-shadow: var(--th-focus-ring); }
.thc-woo .thwoo-route .wc-block-components-button:not(.is-link):not(.wc-block-cart__submit-button):not(.wc-block-components-checkout-place-order-button) {
	min-block-size: var(--th-control-h);
	border-radius: var(--th-radius-control);
	background: var(--th-color-action);
}
.thc-woo .thwoo-route .wc-block-components-button:not(.is-link):not(.wc-block-cart__submit-button):not(.wc-block-components-checkout-place-order-button):hover { background: var(--th-color-action-hover); color: #fff; }
.thc-woo .thwoo-route .wc-block-components-panel__button { min-block-size: var(--th-control-h); }
.thc-woo .thwoo-route .wc-block-components-checkout-return-to-cart-button { min-block-size: 44px; display: inline-flex; align-items: center; color: var(--th-color-action); }

/* Summary card in the checkout sidebar (after the reset above, which it must
   out-rank), and the in-form summary on phones: one card, no inner frame. */
.thc-woo .thwoo-route .wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block,
.thc-woo .thwoo-route .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--th-space-6);
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
	box-shadow: var(--th-shadow-card);
}
.thc-woo .thwoo-route .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content,
.thc-woo .thwoo-route .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary {
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
/* Discount / fee / plugin slots that hold nothing draw no rule and no
   padding (never hidden: a fee or deposit line that arrives still shows). */
.thc-woo .thwoo-route .wc-block-components-totals-wrapper:not(:has(.wc-block-components-order-summary, .wc-block-components-order-summary-item, .wc-block-components-totals-item, .wc-block-components-panel, .wc-block-components-totals-coupon, input, button, .thc-block-payment, p, li)) {
	padding-block: 0;
	border-block-start: 0;
}

/* Line names read as the line's title, above its metadata. */
body.thc-woo .wc-block-cart .wc-block-cart-items .wc-block-components-product-name,
body.thc-woo .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--th-color-ink);
	font-size: var(--th-fs-body);
	font-weight: var(--th-fw-heading);
	line-height: var(--th-lh-snug);
}

/* Coupon disclosure: the label centred on the row its chevron is centred on. */
.thc-woo .thwoo-route .wc-block-components-panel__button {
	display: flex;
	align-items: center;
	margin: 0;
	padding-block: 0;
}

/* Inside the summary card: no second frame (Woo's phone "fill" box) and one
   rule between groups, not three stacked ones. */
.thc-woo .thwoo-route .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}
.thc-woo .thwoo-route .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-totals-block,
.thc-woo .thwoo-route .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item { border: 0; }