/**
 * WooCommerce / BKAP presentation — scoped, CSS-only (ADR-08/09/10).
 * Loaded only on commerce routes. Targets stable wrapper classes; never brittle
 * structural selectors; never alters calculations or BKAP markup.
 *
 * Layering (ADR-06 as amended Step 4C + 5B1): rules whose properties do NOT
 * collide with a vendor-stylesheet declaration live inside @layer as usual.
 * Rules that must OVERRIDE an UNLAYERED vendor declaration (WooCommerce
 * layout/general CSS, BKAP CSS) sit in the single marked unlayered section at
 * the bottom — an unlayered author rule always beats a layered one, so a
 * "tidied" layered override would silently lose live (the Step 4C failure
 * class). The marked section is the ONLY unlayered CSS in this file, and the
 * CssPolicyStructureTest enforces exactly that.
 */

@layer wse.woocommerce {
	.woocommerce .button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce #respond input#submit {
		border-radius: var(--wse-radius-pill);
		background: var(--wse-amber);
		color: var(--wse-charcoal-deep);
		font-weight: 600;
		min-height: 44px;
	}
	.woocommerce .button:hover { background: var(--wse-amber-deep); }

	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		border-top-color: var(--wse-amber);
		border-radius: var(--wse-radius-sm);
	}

	/* Price truth presentation (D-22) — the value itself comes from WooCommerce, unchanged. */
	.woocommerce .price { color: var(--wse-amber-text); font-weight: 600; }

	/* Cart/checkout summary spacing + hierarchy only. */
	.woocommerce-cart-form,
	.woocommerce-checkout .woocommerce-checkout-review-order {
		font-size: 1rem;
	}

	/* ── Tour/Product archetype (Step 5B1.1, Direction 2A) ───────────────────
	   The classic single-product markup (rendered by the supported
	   woocommerce/legacy-template block inside templates/single-product.html) is
	   laid out on a bounded grid: content 1fr + booking column (400px ≥1280,
	   360px at 1024–1279), gap 48. Natural DOM order below 1024 is title,
	   context, gallery, optional quick facts, short description, taxonomy,
	   booking panel, editorial content. Only NON-colliding properties here
	   (display/grid/gap/area/position/background/border/spacing on wrappers the
	   vendor CSS does not set them on); colliding ones are in the marked
	   unlayered section below. */
	@media (min-width: 1024px) {
		.single-product div.product {
			display: grid;
			grid-template-columns: minmax(0, 1fr) var(--wse-col-booking-narrow);
			grid-template-areas:
				"title   title"
				"context context"
				"gallery panel"
				"quick   panel"
				"short   panel"
				"meta    panel"
				"tabs    panel"
				"upsells upsells";
			column-gap: var(--wse-gap-col);
		}
		.single-product div.product .product_title { grid-area: title; }
		.single-product div.product .wse-tour-context { grid-area: context; }
		.single-product div.product .woocommerce-product-gallery { grid-area: gallery; }
		.single-product div.product .wse-tour-fact-summary { grid-area: quick; }
		.single-product div.product > .woocommerce-product-details__short-description { grid-area: short; }
		.single-product div.product > .product_meta { grid-area: meta; }
		.single-product div.product .woocommerce-tabs { grid-area: tabs; }
		.single-product div.product .up-sells { grid-area: upsells; }

		/* Booking panel: sticks only inside the bounded product grid. Related
		   Tours is emitted as the grid's next sibling, providing a hard stop.
		   Safe for BKAP: position only,
		   the form itself is untouched. If the panel is taller than the viewport
		   it scrolls internally instead of pinning fields out of reach (the
		   Direction 2A "taller than the viewport" safeguard) — native dropdowns
		   and the body-appended jQuery datepicker are not clipped by this. */
		.single-product div.product .summary {
			grid-area: panel;
			position: sticky;
			top: calc(var(--wse-header-h) + var(--wse-admin-offset) + 24px);
			align-self: start;
			max-height: calc(100vh - var(--wse-header-h) - var(--wse-admin-offset) - 48px);
			overflow-y: auto;
			overscroll-behavior: contain;
		}
	}

	@media (min-width: 1280px) {
		.single-product div.product { grid-template-columns: minmax(0, 1fr) var(--wse-col-booking); }
	}

	/* Booking Panel Variant A shell (D-11): light card, warm border, calm on the
	   cream page. The panel is WooCommerce's own .summary wrapper — BKAP renders
	   the controls inside it. border-box sizing on the panel subtree keeps the
	   card exactly on its grid track (400px wide desktop) and inside the 320px viewport —
	   content-box + the card padding was the residual 320px overflow. No vendor
	   stylesheet declares box-sizing here, so these layered rules apply cleanly. */
	.single-product div.product .summary,
	.single-product div.product .summary * {
		box-sizing: border-box;
	}
	.single-product div.product .summary {
		background: var(--wse-card);
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius);
		box-shadow: var(--wse-shadow-card);
		padding: 1.375rem;
		max-width: 100%;
	}

	/* Compact, factual row between H1 and gallery. The review state is genuine
	   WooCommerce data; the location is the canonical destination taxonomy; the
	   policy target is the published site page. Missing values collapse. */
	.wse-tour-context {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 1rem;
		margin: 0 0 1rem;
		font-size: 0.9rem;
		color: var(--wse-text-secondary);
	}
	.wse-tour-context > * {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.wse-tour-context__reviews span[aria-hidden="true"] { color: var(--wse-amber-deep); }
	.wse-tour-context__destination a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		color: inherit;
	}

	/* Fact Summary (D-28): editorial facts owned by wse-destinations-customer,
	   rendered here as a semantic <dl>. The renderer returns early when the
	   provider filter yields no facts, so no shell/heading/card ever shows for a
	   Tour without facts. Values come from the plugin's resolved contract — never
	   fabricated. One semantic DOM across breakpoints: 2-col on mobile, 4-col
	   from 768px (approved Fact Summary contract). Colour is never the sole
	   differentiator (the label + value carry the meaning).

	   CONTRAST: the small uppercase label uses --wse-text-secondary (about 6.83:1
	   on the white card), NOT --wse-muted (about 3.67:1), which fails WCAG 1.4.3
	   at this size. Two tests enforce it: TourFactSummaryThemeTest computes the
	   ratio from the token values, and the Playwright a11y suite measures the
	   rendered component. Reverting this token fails both. */
	.wse-tour-fact-summary {
		margin: 1.25rem 0 0;
		padding: 1.125rem 1.375rem;
		background: var(--wse-card);
		border: 1px solid var(--wse-line-soft);
		border-radius: var(--wse-radius);
	}
	.wse-tour-fact-summary dl {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.875rem;
		margin: 0;
	}
	.wse-tour-fact-summary dt {
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--wse-text-secondary);
		/* The longest single-word label ("ACCOMMODATION", uppercase + tracked ≈ 128px) is wider
		   than the narrow grid column at some breakpoints (114px @320, 120px @1024). Let it wrap
		   like the value already does, instead of overflowing the cell (M-P4-9 sibling, 2026-07-25). */
		overflow-wrap: anywhere;
	}
	.wse-tour-fact-summary dd {
		margin: 0.2rem 0 0;
		font-size: 0.97rem;
		font-weight: 600;
		color: var(--wse-charcoal-deep);
		overflow-wrap: anywhere;
	}

	@media (min-width: 768px) {
		.wse-tour-fact-summary dl {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	.single-product div.product > .woocommerce-product-details__short-description {
		margin-top: 1.5rem;
	}

	/* Verified full-payment note (no deposit/remaining split exists at runtime —
	   Step 4C truth; never present an unverified payment capability). */
	.wse-payment-note {
		margin: 0.15rem 0 0;
		font-size: 0.8125rem;
		color: var(--wse-muted);
	}

	/* Panel secondary pathways: More Information (existing contact page) + the
	   real refund policy. 44px targets, clear separation from the primary CTA. */
	.wse-panel-links { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
	.wse-panel-links__moreinfo {
		display: inline-flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 10px 18px;
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius-pill);
		background: var(--wse-card);
		font-weight: 600;
		text-decoration: none;
	}
	.wse-panel-links__moreinfo:hover { border-color: var(--wse-amber-line); background: var(--wse-amber-tint); }
	.wse-panel-links__policy {
		font-size: 0.9rem;
		align-self: center;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* The in-panel jump target for the mobile bar (offset handled by the shared
	   :target scroll-margin rule in base.css). */
	.wse-booking-anchor { display: block; height: 0; }

	/* Product metadata is intentionally OUTSIDE the booking card, beneath the
	   short description. SKU/category/tags/brand remain useful and visible. */
	.single-product div.product > .product_meta {
		margin-top: 1rem;
		padding-top: 0.75rem;
		border-top: 1px solid var(--wse-line-soft);
		font-size: 0.85rem;
		color: var(--wse-text-secondary);
	}

	/* Title band above the two-column layout (relocated via supported hooks). */
	.single-product div.product .product_title { margin: 0.25rem 0 0.5rem; }

	/* Related Tours is outside div.product, so the panel's sticky containing
	   block ends before this full-width band begins. */
	.single-product .wse-product-shell > .related.products {
		margin-top: 3rem;
		padding-top: 2rem;
		border-top: 1px solid var(--wse-line);
	}

	/* Mobile sticky booking action (D-12): hidden by default, revealed by
	   tour-booking-bar.js only while panel + footer are off-viewport; never
	   rendered ≥760px. Sits BELOW the consent banner z-index-wise (cookie
	   controls must stay operable) and below the sticky header (z 100). */
	.wse-booking-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: none;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px var(--wse-container-pad) calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--wse-card);
		border-top: 1px solid var(--wse-line);
		box-shadow: 0 -4px 16px rgba(63, 64, 64, 0.14);
	}
	.wse-booking-bar.is-visible { display: flex; }

	@media (min-width: 760px) {
		.wse-booking-bar, .wse-booking-bar.is-visible { display: none; }
	}
	.wse-booking-bar__price { font-weight: 600; color: var(--wse-amber-text); }
	.wse-booking-bar__price .woocommerce-Price-amount { font-size: 1.05rem; }
	.wse-booking-bar__jump {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 10px 20px;
		border-radius: var(--wse-radius-pill);
		background: var(--wse-amber);
		color: var(--wse-charcoal-deep);
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
	}
	.wse-booking-bar__jump:hover { background: var(--wse-amber-deep); }

	/* Keep anchored/focus scrolling clear of the fixed bar on tour pages. */
	html:has(body.single-product) { scroll-padding-bottom: 84px; }

	/* ── Destination / Collection / Tour archives (Step 5B2) ─────────────
	   The classic Woo renderer keeps query, ordering, pagination, notices and
	   extension hooks native. These rules establish the approved calm archive
	   hierarchy on the shared 1280px rail. Vendor-colliding grid/image rules are
	   kept in the marked unlayered section below. */
	.wse-archive-main { min-height: 55vh; }
	.wse-archive-shell { width: 100%; max-width: var(--wse-container-max); margin-inline: auto; }

	.wse-archive-main .woocommerce-products-header {
		margin: 0 0 2rem;
		padding: clamp(1.25rem, 3vw, 2.25rem);
		background: linear-gradient(135deg, var(--wse-card), var(--wse-amber-tint));
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius);
	}
	/* The archive H1 shares the unified 1280 rail with the introduction below it
	   (Batch 5.2) — a separate 24ch heading cap gave the title and its own introduction
	   two different edges. Short titles never reach it. */
	.wse-archive-main .woocommerce-products-header__title {
		margin: 0;
		max-width: var(--wse-container-max);
	}
	/* The taxonomy introduction is ordinary text, so it uses the unified 1280 rail
	   (Batch 5.2) — the same width as the panel it sits in, so no blank column remains.
	   This supersedes the Step 5B2.1/5B2.2 decision to fill the decorated panel via
	   --wse-taxonomy-intro-max (retired) and a subsequent 880px attempt — both are gone;
	   there is one rail now, not several. Flagged in the report: changes an
	   owner-approved 5B2 result. */
	.wse-archive-main .term-description {
		width: 100%;
		max-width: var(--wse-container-max);
		margin-top: 1rem;
		color: var(--wse-text-secondary);
	}
	.wse-archive-main .term-description > :first-child { margin-top: 0; }
	.wse-archive-main .term-description > :last-child { margin-bottom: 0; }

	.wse-archive-toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin: 1.5rem 0 1rem;
		padding: 0.75rem 0;
		border-block: 1px solid var(--wse-line-soft);
	}
	.wse-archive-toolbar .woocommerce-result-count,
	.wse-archive-toolbar .woocommerce-ordering { margin: 0; }
	.wse-archive-toolbar select {
		min-height: 44px;
		max-width: 100%;
		padding: 0.45rem 2.25rem 0.45rem 0.75rem;
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius-sm);
		background-color: var(--wse-card);
		color: var(--wse-charcoal-deep);
	}

	@media (max-width: 599px) {
		.wse-archive-toolbar { align-items: flex-start; flex-direction: column; }
		.wse-archive-toolbar .woocommerce-ordering,
		.wse-archive-toolbar select { width: 100%; }
	}

	/* Collection cards use the real product_cat parent/child relationship. */
	.wse-collection-subsection { margin: 2rem 0; }
	.wse-collection-subhead { margin: 0 0 1rem; }
	.wse-collection-cards {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 768px) {
		.wse-collection-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	@media (min-width: 1024px) {
		.wse-collection-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
	}

	.wse-collection-card {
		min-width: 0;
		margin: 0;
		background: var(--wse-card);
		border: 1px solid var(--wse-line-soft);
		border-radius: var(--wse-radius);
		overflow: hidden;
		transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
	}
	.wse-collection-card:has(.wse-collection-card__link:hover),
	.wse-collection-card:has(.wse-collection-card__link:focus-visible) {
		border-color: var(--wse-amber-line);
		box-shadow: var(--wse-shadow-card);
		transform: translateY(-2px);
	}
	.wse-collection-card__link {
		display: grid;
		grid-template-rows: auto 1fr;
		height: 100%;
		color: inherit;
		text-decoration: none;
	}
	.wse-collection-card__link:focus-visible { outline-offset: -4px; }
	.wse-collection-card__media {
		display: block;
		aspect-ratio: var(--wse-archive-portrait-ratio);
		overflow: hidden;
		background: var(--wse-neutral-tint);
	}
	.wse-collection-card__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}
	.wse-collection-card__fallback {
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, var(--wse-neutral-tint), var(--wse-sand));
		color: var(--wse-text-secondary);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.wse-collection-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem; }
	.wse-collection-card__eyebrow {
		color: var(--wse-teal-text);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	.wse-collection-card__title {
		color: var(--wse-charcoal-deep);
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.2rem;
		font-weight: 700;
		line-height: 1.25;
	}
	.wse-collection-card__description { color: var(--wse-text-secondary); font-size: 0.95rem; line-height: 1.5; }

	/* Tour-card visual properties that do not collide with Woo's stylesheet. */
	.wse-tour-card__link {
		display: grid;
		grid-template-rows: auto 1fr;
		height: 100%;
		background: var(--wse-card);
		border: 1px solid var(--wse-line-soft);
		border-radius: var(--wse-radius);
		box-shadow: none;
		overflow: hidden;
		color: inherit;
		text-decoration: none;
		transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
	}
	.wse-tour-card__link:hover,
	.wse-tour-card__link:focus-visible {
		border-color: var(--wse-amber-line);
		box-shadow: var(--wse-shadow-card);
		transform: translateY(-2px);
	}
	.wse-tour-card__link:focus-visible { outline-offset: 3px; }
	.wse-tour-card__media {
		position: relative;
		display: block;
		height: clamp(250px, 22vw, 290px);
		overflow: hidden;
		background: var(--wse-neutral-tint);
	}
	/* Tour posters are artwork, not interchangeable crops. Archive, Related
	   Tours, the /tour-search/ plugin results and the homepage's featured-Tours
	   block share the validated 500:708 frame and place context/title below it —
	   one component, one contract.
	   (Batch 4.1 added the .wse-dc-results scope to EVERY rule in this card group,
	   not just the media/image ones, so /tour-search/ results render the identical
	   archive card rather than the leftover compact-overlay variant. Batch 5 added
	   .wse-home-tours for the same reason — and reproduced the same failure first:
	   scoping only the grid left the homepage on the compact overlay card with
	   clipped posters and titles printed over the artwork. ANY new context that
	   renders a real Tour loop must be added to EVERY rule in this group.) */
	.wse-archive-main .wse-tour-card__link,
	.single-product .related.products .wse-tour-card__link,
	.wse-home-tours .wse-tour-card__link,
	.wse-dc-results .wse-tour-card__link {
		box-sizing: border-box;
	}
	.wse-archive-main .wse-tour-card__media,
	.single-product .related.products .wse-tour-card__media,
	.wse-home-tours .wse-tour-card__media,
	.wse-dc-results .wse-tour-card__media {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		height: auto;
		overflow: visible;
		/* min-width:0 overrides the UA default min-width:auto that replaced elements
		   (img) get inside grid/flex tracks. Without it, a portrait image whose
		   aspect-ratio-driven content size exceeds the 1fr column (observed on Sak
		   Yant Collection posters) is allowed to grow past the column instead of
		   shrinking to fit, then gets asymmetrically clipped by the card link's
		   overflow:hidden — reading as an image "offset from the left edge". */
		min-width: 0;
		background: var(--wse-card);
	}
	.wse-tour-card__overlay {
		position: absolute;
		inset: auto 0 0;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		padding: 4rem 0.9rem 0.85rem;
		background: linear-gradient(180deg, rgba(51, 52, 46, 0), rgba(51, 52, 46, 0.88) 55%);
		color: var(--wse-card);
	}
	.wse-tour-card__context {
		overflow: hidden;
		color: var(--wse-amber-line);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.wse-archive-main .wse-tour-card__overlay,
	.single-product .related.products .wse-tour-card__overlay,
	.wse-home-tours .wse-tour-card__overlay,
	.wse-dc-results .wse-tour-card__overlay {
		position: static;
		inset: auto;
		gap: 0.4rem;
		padding: 0.85rem 0.9rem 0.95rem;
		background: var(--wse-card);
		color: var(--wse-charcoal-deep);
	}
	.wse-archive-main .wse-tour-card__context,
	.single-product .related.products .wse-tour-card__context,
	.wse-home-tours .wse-tour-card__context,
	.wse-dc-results .wse-tour-card__context { color: var(--wse-teal-text); }
	.wse-tour-card__footer {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.85rem 0.9rem 1rem;
		font-size: 0.85rem;
	}
	.wse-archive-main .wse-tour-card__footer,
	.single-product .related.products .wse-tour-card__footer,
	.wse-home-tours .wse-tour-card__footer,
	.wse-dc-results .wse-tour-card__footer {
		box-sizing: border-box;
		width: 100%;
		margin-top: auto;
		border-top: 1px solid var(--wse-line-soft);
	}
	.wse-tour-card__reviews { order: 2; color: var(--wse-charcoal-deep); text-align: right; }
	.wse-tour-card__reviews > span[aria-hidden="true"] { color: var(--wse-amber-text); }
	.wse-tour-card__reviews--empty { color: var(--wse-text-secondary); }
	.wse-tour-card__price { order: 1; color: var(--wse-charcoal-deep); font-weight: 700; }

	.woocommerce .woocommerce-no-products-found {
		margin: 1.5rem 0;
		padding: 1.25rem;
		background: var(--wse-card);
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius);
	}

	/* My Account: the width correction is TEMPLATE-owned (page-my-account.html
	   gives the page the broad container); the wse-destinations-customer plugin
	   already lays out its own navigation/content columns and keeps every visual
	   it owns — the theme deliberately adds no CSS against the account DOM. */
}

@layer wse.bkap {
	/* Booking Panel Variant A internals — scoped to BKAP's stable wrappers only.
	   Calendar logic, availability, totals and validation stay 100% BKAP-owned. */
	.bkap-booking-box,
	.booking_calendar_class,
	.bkap_price_info {
		border-radius: var(--wse-radius);
	}
	.bkap_price_info { color: var(--wse-amber-text); }

	/* Fit the booking form to the panel at every width (320px included): the
	   form keeps 100%-width behaviour but its padding no longer expands it past
	   the container (the Phase-1 overflow: 318px content-box inside a 288px
	   column). box-sizing/max-width are NOT declared by the vendor stylesheets,
	   so these layered declarations apply cleanly without overriding anything. */
	.bkap-booking-form { box-sizing: border-box; max-width: 100%; }
	.bkap-booking-form table { max-width: 100%; }
	.bkap-booking-form input,
	.bkap-booking-form select { max-width: 100%; }

	/* BKAP emits an orphaned automatic-resource label on some variable Tours.
	   tour-booking-bar.js marks it (.wse-bkap-resource-label--redundant) only when
	   its normalized text duplicates a correctly associated Woo variation label and
	   the resource control is hidden. The actual display:none is applied UNLAYERED
	   near the ".bkap-booking-form label { display:block }" rule below — a layered
	   hide here loses the cascade to that unlayered block rule (M-P4-9, 2026-07-25).
	   The genuine variation label and selector remain untouched. */

	/* BKAP inline validation/errors: theme spacing only; message text is BKAP's. */
	.bkap-form-error { margin: 0.5rem 0; font-weight: 600; }

	/* ── Legacy authored content INSIDE the Tour description tabs (Day 3 parity
	   fix): old wp-caption figures ship inline width:1000px with full-size
	   images — max-width containment beats the inline width without any
	   !important, mirroring the Batch-4 Article containment that content.css
	   applies on non-commerce routes only. Authored tables scroll within their
	   own container (Direction 2A), never the page. */
	.woocommerce-tabs .woocommerce-Tabs-panel figure,
	.woocommerce-tabs .woocommerce-Tabs-panel img {
		height: auto;
		max-width: 100%;
	}
	.woocommerce-tabs .woocommerce-Tabs-panel iframe { max-width: 100%; }

	/* Variable-Tour variation table: the month/option select otherwise forces
	   the panel past a 320px viewport (vendor sets width but not table-layout). */
	.single-product div.product .summary table.variations {
		max-width: 100%;
		table-layout: fixed;
	}
	.single-product div.product .summary table.variations td.value select {
		max-width: 100%;
		width: 100%;
	}
	.woocommerce-tabs .woocommerce-Tabs-panel table:not(.shop_table) {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	/* NOTE: the calendar internals, availability, price and deposit computation are BKAP-owned
	   and are never restyled structurally or altered here. */

	/* ── Cart (launch sprint Phase 1C, Direction 2A 48–53) ────────────────────
	   Classic [woocommerce_cart] markup styled in place. WooCommerce owns cart
	   state, totals, coupons, fragments and the BKAP edit-booking modal; every
	   rule here is presentation on stable wrapper classes. Properties that
	   COLLIDE with the unlayered WC general/layout/smallscreen stylesheets live
	   in the marked unlayered section below, not here. */

	/* Line-item card panel: WC general CSS puts border/padding on the table and
	   cells; the panel treatment (background/radius/overflow) is ours alone. */
	.woocommerce-cart-form .shop_table.cart {
		background: var(--wse-card);
		border-radius: var(--wse-radius);
		overflow: hidden;
	}

	.woocommerce-cart-form th {
		color: var(--wse-text-secondary);
		font-size: 0.8rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/* Tour identity: title in the display stack; booking meta quiet beneath it. */
	.woocommerce-cart-form td.product-name a {
		color: var(--wse-charcoal-deep);
		font-weight: 600;
		text-decoration: none;
	}
	.woocommerce-cart-form td.product-name a:hover { color: var(--wse-amber-text); }

	.woocommerce-cart-form td.product-name dl.variation {
		color: var(--wse-text-secondary);
		font-size: 0.9rem;
		margin: 0.35rem 0 0;
	}
	.woocommerce-cart-form td.product-name dl.variation dd { margin: 0; }
	.woocommerce-cart-form td.product-name dl.variation p { margin: 0; display: inline; }

	/* BKAP's "Edit Booking" control (stable .bkap_edit_bookings input): quiet
	   secondary affordance; behavior and modal remain BKAP's. */
	.woocommerce-cart-form input.bkap_edit_bookings {
		background: transparent;
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius-pill);
		color: var(--wse-charcoal-deep);
		cursor: pointer;
		font-size: 0.85rem;
		margin-top: 0.4rem;
		min-height: 32px;
		padding: 0.15rem 0.75rem;
	}
	.woocommerce-cart-form input.bkap_edit_bookings:hover { border-color: var(--wse-charcoal-deep); }

	.woocommerce-cart-form td.product-subtotal { font-weight: 700; }

	/* Quantity field: comfortable target, token chrome. */
	.woocommerce-cart-form .quantity .qty {
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius-sm);
		min-height: 44px;
		padding: 0.4rem 0.5rem;
		text-align: center;
		width: 4.5rem;
	}
	.woocommerce-cart-form .quantity .qty:focus {
		border-color: var(--wse-amber-deep);
		outline: 2px solid var(--wse-amber-deep);
		outline-offset: 1px;
	}

	/* Remove control keeps WC's red glyph (vendor colour is !important-locked);
	   we provide the ≥44px target and a visible focus ring. */
	.woocommerce-cart-form td.product-remove a.remove {
		align-items: center;
		display: inline-flex;
		height: 44px;
		justify-content: center;
		width: 44px;
	}
	.woocommerce-cart-form td.product-remove a.remove:focus-visible {
		outline: 2px solid var(--wse-amber-deep);
		outline-offset: 2px;
	}

	/* Coupon + update row: one calm strip under the items. */
	.woocommerce-cart-form td.actions .coupon .input-text {
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius-sm);
		min-height: 44px;
		padding: 0.4rem 0.75rem;
	}
	.woocommerce-cart-form td.actions .coupon .input-text:focus {
		border-color: var(--wse-amber-deep);
		outline: 2px solid var(--wse-amber-deep);
		outline-offset: 1px;
	}


	/* Continue-browsing path back to the catalogue (theme-added link). */
	.wse-cart-continue {
		display: inline-block;
		font-weight: 600;
		margin-top: 1rem;
	}

	/* Totals panel: summary card with the order total as the loudest line. */
	.cart_totals h2 {
		font-size: 1.2rem;
		margin: 0 0 0.75rem;
	}
	.cart_totals .shop_table {
		background: var(--wse-card);
		border-radius: var(--wse-radius);
	}
	.cart_totals th { color: var(--wse-text-secondary); font-weight: 600; }
	.cart_totals tr.order-total th,
	.cart_totals tr.order-total td { font-size: 1.1rem; }
	.wc-proceed-to-checkout .checkout-button {
		display: block;
		font-size: 1.05rem;
		min-height: 52px;
		text-align: center;
	}

	/* Empty state spacing; the notice chrome collides with vendor CSS and lives
	   in the marked unlayered section (redirect filtered to /tour-search/ in
	   functions.php — the raw Shop is not a shell destination). */
	.return-to-shop { margin-top: 1rem; }

	/* ── Checkout (launch sprint Day 2, Direction 2A 54–59) ───────────────────
	   Classic [woocommerce_checkout] styled in place: WooCommerce owns fields,
	   validation, sessions, order creation and every gateway interface; BKAP
	   owns the booking line. Colliding properties live in the marked unlayered
	   section below. */

	/* Context line under the H1: honest orientation + the way back to Cart. */
	.wse-checkout-context {
		color: var(--wse-text-secondary);
		font-size: 0.95rem;
		margin: -0.75rem 0 1.5rem;
	}
	.wse-checkout-context a { font-weight: 600; }

	/* Section headings ("Billing details", "Additional information", "Your order"). */
	/* stylelint-disable-next-line selector-id-pattern -- #order_review_heading is WooCommerce's public checkout DOM ID. */
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout .woocommerce-billing-fields > h3,
	.woocommerce-checkout .woocommerce-additional-fields > h3 {
		font-size: 1.2rem;
		margin: 0 0 1rem;
	}

	/* Field chrome: same tokens as the Cart controls. */
	.woocommerce-checkout .form-row .input-text,
	.woocommerce-checkout .form-row select,
	.woocommerce-checkout .form-row textarea {
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius-sm);
		min-height: 44px;
		padding: 0.5rem 0.75rem;
		width: 100%;
	}
	.woocommerce-checkout .form-row textarea { min-height: 6rem; }
	.woocommerce-checkout .form-row .input-text:focus,
	.woocommerce-checkout .form-row select:focus,
	.woocommerce-checkout .form-row textarea:focus {
		border-color: var(--wse-amber-deep);
		outline: 2px solid var(--wse-amber-deep);
		outline-offset: 1px;
	}
	.woocommerce-checkout .form-row label { font-weight: 600; }
	.woocommerce-checkout .form-row .wse-field-note,
	.woocommerce-checkout .form-row .description {
		color: var(--wse-text-secondary);
		display: block;
		font-size: 0.85rem;
		font-weight: 400;
		margin-top: 0.3rem;
	}

	/* Order review panel: the summary card (heading + booking line + totals +
	   payment) that the unlayered section composes into the right rail. */
	.woocommerce-checkout .woocommerce-checkout-review-order {
		background: var(--wse-card);
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius);
		padding: 1.125rem;
	}
	.woocommerce-checkout .woocommerce-checkout-review-order .bkap-cart-meta,
	.woocommerce-checkout .woocommerce-checkout-review-order dl.variation {
		color: var(--wse-text-secondary);
		font-size: 0.9rem;
	}
	.woocommerce-checkout .woocommerce-checkout-review-order input.bkap_edit_bookings {
		background: transparent;
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius-pill);
		color: var(--wse-charcoal-deep);
		cursor: pointer;
		font-size: 0.85rem;
		margin-top: 0.4rem;
		min-height: 32px;
		padding: 0.15rem 0.75rem;
	}

	/* Terms/privacy block reads as quiet legal copy, not a banner. */
	.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
		color: var(--wse-text-secondary);
		font-size: 0.9rem;
	}
}

/* WSE:UNLAYERED-VENDOR-OVERRIDES-START
   ADR-06 (Step 5B1 amendment): every rule in this marked section overrides a
   declaration made by an UNLAYERED vendor stylesheet (WooCommerce layout/general
   CSS). Unlayered author CSS beats @layer-ed author CSS regardless of
   specificity, so these must stay unlayered to take effect live — the same
   collision mechanics as the base.css dark-chrome/sticky exceptions. Keep this
   section minimal, scoped (.woocommerce/.single-product/.bkap/.wse- prefixes),
   and NEVER use !important. Everything else in this file stays in @layer. */

/* Native Woo product grids float fixed-width cards. The archive contract is a
   1/2/3/4 responsive grid; Related Tours AND the /tour-search/ plugin results
   use the same card family. Every item must fill its assigned track — Woo's
   mobile 48% width otherwise leaves a declared one-column grid with half-width
   poster cards. (Batch 4.1: .wse-dc-results added here so the /tour-search/
   grid uses the identical 1/2/3/4 contract instead of the plugin's own
   `repeat(auto-fill, minmax(210px,1fr))` — which, in the previously
   width-capped ~432px results column, collapsed to one oversized card.
   Theme woocommerce.css loads after the plugin's search.css, so these
   equal-specificity rules win.) */
.wse-archive-main ul.products,
.single-product .related.products ul.products,
.wse-dc-results ul.products {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}
.wse-archive-main ul.products::before,
.wse-archive-main ul.products::after,
.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after,
.wse-dc-results ul.products::before,
.wse-dc-results ul.products::after { display: none; }
.wse-archive-main ul.products[class*="columns-"] li.product,
.single-product .related.products ul.products[class*="columns-"] li.product,
.wse-dc-results ul.products[class*="columns-"] li.product {
	float: none;
	width: 100%;
	min-width: 0;
	margin: 0;
}

/* Woo's unlayered loop-link rule forces display:block. Archive and Related
   cards need a column flex container so variable-length titles cannot lift the
   truthful price/review footer out of row alignment. */
.wse-archive-main ul.products li.product a.wse-tour-card__link,
.single-product .related.products ul.products li.product a.wse-tour-card__link,
.wse-dc-results ul.products li.product a.wse-tour-card__link {
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.wse-archive-main ul.products,
	.single-product .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.wse-archive-main ul.products,
	.single-product .related.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

@media (min-width: 1280px) {
	.wse-archive-main ul.products,
	.single-product .related.products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* /tour-search/ sits beside a fixed ~260px sidebar, so its results column is
   NOT the viewport width — the archive's viewport-keyed 1/2/3/4 breakpoints
   would pack 4 columns into ~992px and shrink each card to ~230px, noticeably
   smaller than the ~300px archive card the owner compared against. Intrinsic
   auto-fill sizes columns to the ACTUAL results-column width instead, holding
   each card near the archive size (≈3 cols / ~315px at 1440, 2 / ~340px at
   768, 1 on mobile) — the identical card component, sized correctly for a
   sidebarred container. `min(100%, …)` keeps a single card from overflowing a
   column narrower than the floor. */
.wse-dc-results ul.products {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* Woo sets loop images to auto height with a bottom margin. Archive and Related
   posters use the validated portrait frame without cropping. */
.wse-archive-main ul.products li.product .wse-tour-card__image,
.single-product .related.products ul.products li.product .wse-tour-card__image,
.wse-home-tours ul.products li.product .wse-tour-card__image,
.wse-dc-results ul.products li.product .wse-tour-card__image {
	display: block;
	width: 100%;
	/* min-width:0 (see .wse-tour-card__media above) — same replaced-element grid
	   overflow fix, applied to the image itself as a second guard. justify-self
	   centres the frame if any future source image still forces a wider box, so
	   any residual overflow is symmetric instead of silently clipped on one side. */
	min-width: 0;
	justify-self: center;
	height: auto;
	aspect-ratio: var(--wse-archive-portrait-ratio);
	margin: 0;
	/* Neutralise the plugin search.css 8px image radius so the /tour-search/
	   poster matches the archive image (square corners; the card LINK owns the
	   rounding + overflow). No-op on archive routes, where no rule sets an
	   image radius. */
	border-radius: 0;
	background: var(--wse-neutral-tint);
	object-fit: contain;
	object-position: center;
}
.wse-archive-main ul.products li.product .woocommerce-loop-product__title,
.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
.wse-home-tours ul.products li.product .woocommerce-loop-product__title,
.wse-dc-results ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	padding: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--wse-charcoal-deep);
}
.wse-archive-main ul.products li.product .price,
.single-product .related.products ul.products li.product .price,
.wse-home-tours ul.products li.product .price,
.wse-dc-results ul.products li.product .price {
	display: block;
	margin: 0;
	color: var(--wse-charcoal-deep);
	font-size: 0.85rem;
}
.wse-archive-main ul.products li.product .onsale,
.single-product .related.products ul.products li.product .onsale,
.wse-home-tours ul.products li.product .onsale,
.wse-dc-results ul.products li.product .onsale {
	top: 0.75rem;
	right: 0.75rem;
	left: auto;
	z-index: 2;
}

/* wse-tour-staff outputs stable, real destination term cards. Its legacy style
   handle is dequeued on these routes, allowing the theme to preserve the complete
   poster above a distinct Destination label without an !important escalation. */
.wse-dest-subsection { margin: 2rem 0; }
.wse-dest-subhead { margin: 0 0 1rem; }
.wse-dest-tours-head { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--wse-line); }
.wse-dest-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.wse-dest-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.wse-dest-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

.wse-dest-card { min-width: 0; margin: 0; }
.wse-dest-card a {
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	border: 1px solid var(--wse-line-soft);
	border-radius: var(--wse-radius);
	background: var(--wse-card);
	color: var(--wse-charcoal-deep);
	text-decoration: none;
	transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.wse-dest-card a:hover,
.wse-dest-card a:focus-visible { border-color: var(--wse-amber-line); box-shadow: var(--wse-shadow-card); transform: translateY(-2px); }
.wse-dest-card a:focus-visible { outline-offset: 3px; }
.wse-dest-cards .wse-dest-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wse-archive-portrait-ratio);
	margin: 0;
	border-radius: 0;
	background: var(--wse-neutral-tint);
	object-fit: contain;
	object-position: center;
}
.wse-dest-card-title {
	display: flex;
	align-items: center;
	padding: 1rem;
	color: var(--wse-charcoal-deep);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2vw, 1.65rem);
	font-weight: 700;
	line-height: 1.2;
}

/* Native archive controls and pagination carry Woo's business/query state; the
   theme only removes floats and supplies 44px targets/current-page treatment. */
.wse-archive-toolbar .woocommerce-result-count,
.wse-archive-toolbar .woocommerce-ordering { float: none; }
.woocommerce nav.woocommerce-pagination { margin-top: 2rem; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
	border: 1px solid var(--wse-line);
	border-radius: var(--wse-radius-sm);
	background: var(--wse-card);
	color: var(--wse-charcoal-deep);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: var(--wse-amber-deep);
	background: var(--wse-amber-tint);
	font-weight: 700;
}

/* WooCommerce layout CSS floats gallery/summary at 48% — the shared grid (and
   the ≤1023 single-column flow) needs full-width children instead. */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.single-product div.product .woocommerce-product-gallery {
	float: none;
	width: 100%;
}
.woocommerce div.product div.summary,
.single-product div.product .summary {
	float: none;
	width: 100%;
}

/* Native WooCommerce gallery — portrait-safe presentation (VF-SINGLE-TOUR-
   PRODUCT-GALLERY, owner-approved 2026-07-22). Every current Tour image is a
   single portrait poster (~500:708, the documented card-corpus ratio VFN-01)
   and no Product Gallery images exist yet, so the honest state is ONE poster
   with no thumbnail nav. The poster is shown WHOLE at its own ratio — no
   destructive crop and no empty pillarbox — bounded in width so a tall portrait
   never dominates the two-column layout and the 500/600px woocommerce_single
   source is never upscaled. The native image link / zoom / lightbox / flexslider
   markup, data and behaviour stay untouched: WooCommerce owns the gallery data
   and switching; the theme owns only this frame. When real gallery images are
   added the native thumbnail strip appears and switches the main stage (landscape
   photos then render at their own ratio, never force-cropped to portrait). */
.single-product div.product .woocommerce-product-gallery {
	max-width: min(100%, 34rem);
	margin-inline: 0;
}
.single-product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .flex-viewport {
	overflow: hidden;
	border-radius: var(--wse-radius);
	background: var(--wse-neutral-tint);
}
.single-product .woocommerce-product-gallery__image > a {
	display: block;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wse-radius);
}
/* Keyboard users reach every image through the native main-image link, which
   opens the native PhotoSwipe lightbox (arrow-key navigable, Escape to close). */
.single-product .woocommerce-product-gallery__image > a:focus-visible {
	outline: 2px solid var(--wse-amber-deep);
	outline-offset: 3px;
	border-radius: var(--wse-radius);
}
/* Native lightbox trigger (present with gallery-lightbox support): a calm,
   rounded affordance instead of the default bare glyph. */
.single-product .woocommerce-product-gallery__trigger {
	border-radius: 50%;
	background: var(--wse-card);
	box-shadow: var(--wse-shadow-card);
}
/* Thumbnail strip — present ONLY with >= 2 gallery images. Rounded portrait
   cells with a clear selected state, hover, and a keyboard-focus ring; native
   flexslider switching is preserved (the theme never replaces the control). */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
	gap: 0.6rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	margin: 0;
	line-height: 0;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 500 / 708;
	object-fit: cover;
	border-radius: var(--wse-radius-sm);
	cursor: pointer;
	opacity: 0.72;
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--wse-amber-deep);
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img:focus-visible {
	outline: 2px solid var(--wse-amber-deep);
	outline-offset: 2px;
	opacity: 1;
}

@media (min-width: 1024px) {
	/* On desktop, present the native thumbnail strip as a vertical rail beside
	   the main image. The markup and flexslider behavior stay native; this only
	   changes the gallery frame. */
	.single-product div.product .woocommerce-product-gallery {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(108px, 14vw, 164px);
		gap: 1rem;
		align-items: start;
	}
	.single-product div.product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper,
	.single-product div.product .woocommerce-product-gallery .flex-viewport {
		grid-column: 1;
		grid-row: 1;
	}
	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
		grid-column: 2;
		grid-row: 1;
		grid-template-columns: 1fr;
		grid-auto-rows: max-content;
		margin-top: 0;
		align-content: start;
	}
}

/* Breadcrumb: vendor grey (#767676) fails AA on the cream page; use the token. */
.woocommerce .woocommerce-breadcrumb,
.wse-archive-main.alignfull .woocommerce-breadcrumb {
	color: var(--wse-text-secondary);
	font-size: 0.85rem;
	margin-bottom: 1rem;
}
.woocommerce .woocommerce-breadcrumb a,
.wse-archive-main.alignfull .woocommerce-breadcrumb a { color: var(--wse-text-secondary); }
.woocommerce .woocommerce-breadcrumb a:hover,
.wse-archive-main.alignfull .woocommerce-breadcrumb a:hover { color: var(--wse-charcoal-deep); }

/* Panel price line: vendor sets its own colour/size on span.price. */
.single-product div.product .summary .price {
	color: var(--wse-charcoal-deep);
	font-size: 1.375rem;
	font-weight: 700;
	margin-bottom: 0;
}

/* Primary booking CTA: vendor button colours would win from its unlayered CSS. */
.woocommerce div.product form.cart .single_add_to_cart_button {
	background: var(--wse-amber);
	color: var(--wse-charcoal-deep);
	font-weight: 600;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--wse-amber-deep);
	color: var(--wse-charcoal-deep);
}

/* BKAP's calendar mode makes .bkap_start_date an inline-block and its unlayered
   WooCommerce Booking stylesheet gives .ui-datepicker min-width:fit-content.
   Together those declarations shrink the wrapper to half a desktop panel while
   the date table paints outside it (and exceed the panel at 320px). Calendar
   mode alone gets a full row and a centred, shrinkable calendar; select-mode
   Tours do not contain #inline_calendar and remain untouched.

   MULTI-DAY (block-booking) Tours render a SECOND, End Date calendar in
   .bkap_end_date / #inline_calendar_checkout. BKAP leaves that wrapper at its
   default inline-block + min-width:fit-content, so without the same width reset
   it collapsed to ~half width (squashed cells) while the first calendar was
   full width. The End Date wrapper gets the identical block/100% treatment here;
   every inner rule below already matches BOTH calendars (they are scoped to
   `.bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline`), so once the
   wrapper is full width both calendars render identically. .bkap_end_date /
   #inline_calendar_checkout only exist on multi-day Tours, so this is a no-op
   on single-calendar and select-mode Tours. */
/* stylelint-disable selector-id-pattern -- #inline_calendar / #inline_calendar_checkout are BKAP's public legacy DOM IDs. */
.single-product .bkap-booking-form:has(#inline_calendar) .bkap_start_date,
.single-product .bkap-booking-form:has(#inline_calendar) #inline_calendar,
.single-product .bkap-booking-form:has(#inline_calendar) .bkap_end_date,
.single-product .bkap-booking-form:has(#inline_calendar) #inline_calendar_checkout {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	border: 0;
	background: transparent;
	padding: 0;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	/* VF-BATCH 1B: the calendar sits FLAT in the panel — no nested card border or
	   background (the approved panel reads as one component). */
	background: transparent;
	border: 0;
	padding: 0;
	margin-top: 0.25rem;
	font-family: var(--wse-font-body);
}
/* VENDOR-COLLISION EXCEPTION — the ONE authorised !important (VF-BATCH 1C).
   WooCommerce Bookings' jQuery-UI stylesheet sets .ui-widget-content's border
   with !important; an in-page probe proved no normal cascade/specificity/layer
   ordering can remove it. Authorised solely to zero that vendor border, only on
   the scoped Single-Tour inline-calendar widget, only for `border`. The
   wse/no-important-outside-reduced-motion guard whitelists exactly this. */
.single-product div.product .summary .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline.ui-widget-content {
	border: 0 !important;
	background: transparent;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline table.ui-datepicker-calendar {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 4px;
}
/* stylelint-enable selector-id-pattern */


/* ── Booking Panel Variant A — FINAL FULL-PANEL fidelity (VF-BATCH 1C) ─────────
   Supersedes VF-BATCH 1B (owner: direction accepted, final fidelity not approved).
   The whole panel is one Variant A component vs the owner-supplied "WSE Clear
   Journey" artifact: full-width themed controls, a flat + dense calendar, a
   VISUAL legend (Available/Selected/Unavailable swatches, JS-inserted), a themed
   "Number of people" quantity field, a divider + total, and full-width pill
   actions with a centred wishlist. PRESENTATION ONLY — every field, value, date,
   availability, total, price and action is WooCommerce/BKAP-generated and
   untouched. Scoped to the Single Tour panel; no product IDs. Exactly ONE
   !important (the documented vendor calendar-border collision, above). Legend +
   qty label markup is inserted by tour-booking-bar.js (progressive enhancement). */
/* stylelint-disable selector-id-pattern -- #inline_calendar/#bkap_start_date/#bkap_price are BKAP's public legacy DOM IDs. */

/* One control treatment: people/variation selects, BKAP selects, and BOTH date
   fields — the Reservation Date (#booking_calender, in #bkap_start_date) and, on
   multi-day Tours, the End Date (#booking_calender_checkout, in #bkap_end_date).
   Matching by the shared `.booking_calender` class inside the booking form gives the
   End Date input the identical outlined-pill treatment as the start (VF-BATCH 1E);
   dropdown Tours use a <select> (not input.booking_calender) so are unaffected. */
.single-product div.product .summary .bkap-booking-form select,
.single-product div.product .summary table.variations select,
.single-product div.product .summary .bkap-booking-form input.booking_calender {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.9375rem;
	padding: 0.6875rem 0.75rem;
	border: 1px solid var(--wse-line);
	border-radius: var(--wse-radius-sm);
	background-color: var(--wse-card);
	color: var(--wse-ink);
	font-size: 0.95rem;
	line-height: 1.25;
}
.single-product div.product .summary .bkap-booking-form select,
.single-product div.product .summary table.variations select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a857b' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2rem;
}
.single-product div.product .summary .bkap-booking-form select:focus-visible,
.single-product div.product .summary .bkap-booking-form input.booking_calender:focus-visible {
	outline: 2px solid var(--wse-amber-deep);
	outline-offset: 1px;
	border-color: var(--wse-amber-line);
}
/* Loading / disabled Pick-up Time (and any BKAP select): same geometry, readable. */
.single-product div.product .summary .bkap-booking-form select:disabled,
.single-product div.product .summary .bkap-booking-form select[disabled] {
	opacity: 1;
	color: var(--wse-text-secondary);
	background-color: var(--wse-sand);
	cursor: default;
}

/* "Total # of People" variation table → stacked label + full control. */
.single-product div.product .summary table.variations,
.single-product div.product .summary table.variations tbody,
.single-product div.product .summary table.variations tr {
	display: block;
	width: 100%;
}
.single-product div.product .summary table.variations th.label,
.single-product div.product .summary table.variations td.label {
	display: block;
	width: auto;
	padding: 0;
	margin: 0 0 0.375rem;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--wse-ink);
	text-align: left;
}
.single-product div.product .summary table.variations td.value { display: block; width: 100%; padding: 0; }
/* Clear/reset: quiet, right-aligned beneath its control, non-disruptive. */
.single-product div.product .summary a.reset_variations {
	display: inline-block;
	float: right;
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	color: var(--wse-muted);
}
.single-product div.product .summary a.reset_variations:hover { color: var(--wse-amber-text); }
.single-product div.product .summary a.reset_variations:focus-visible { outline: 2px solid var(--wse-amber-deep); outline-offset: 2px; }

/* BKAP field labels + field-group rhythm. */
.single-product div.product .summary .bkap-booking-form label,
.single-product div.product .summary .book_start_date_label {
	display: block;
	margin: 0 0 0.375rem;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--wse-ink);
}
/* Hide the orphaned, duplicated BKAP auto-resource label (marked by
   tour-booking-bar.js). This MUST be unlayered and out-specify the block rule
   directly above — the layered copy in @layer wse.bkap loses the cascade to it
   (unlayered author CSS beats @layer-ed author CSS). Scoped to the redundant
   class only, so genuine variation/date labels keep display:block. No !important
   (ADR-06). M-P4-9, 2026-07-25. */
.single-product div.product .summary .bkap-booking-form > label.wse-bkap-resource-label--redundant {
	display: none;
}
.single-product div.product .summary .bkap-booking-form > * { margin-top: 0.875rem; }
.single-product div.product .summary .bkap-booking-form > *:first-child { margin-top: 0; }
/* Flatten BKAP's own booking-form wrapper (normal 1px #ddd border + inner
   padding) so date/calendar/time read as part of the ONE panel, not a card. */
.single-product div.product .summary .bkap-booking-form {
	border: 0;
	padding: 0;
	background: transparent;
}

/* Quantity → "Number of people" field group (label from tour-booking-bar.js;
   native input/value/min/max/step untouched). */
.single-product div.product .summary form.cart .wse-qty-label {
	display: block;
	clear: both;
	margin: 0.875rem 0 0.375rem;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--wse-ink);
}
.single-product div.product .summary form.cart .quantity {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
}
.single-product div.product .summary form.cart .quantity input.qty {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.9375rem;
	padding: 0.6875rem 0.75rem;
	border: 1px solid var(--wse-line);
	border-radius: var(--wse-radius-sm);
	background: var(--wse-card);
	color: var(--wse-ink);
	font-size: 0.95rem;
	text-align: left;
}
.single-product div.product .summary form.cart .quantity input.qty:focus-visible {
	outline: 2px solid var(--wse-amber-deep);
	outline-offset: 1px;
	border-color: var(--wse-amber-line);
}

/* FLAT + DENSE calendar states (approved). */
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-header {
	background: transparent;
	border: 0;
	padding: 0 0 0.3rem;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-title {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--wse-charcoal-deep);
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-prev,
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-next {
	width: 2rem;
	height: 2rem;
	top: 0;
	border-radius: var(--wse-radius-sm);
	cursor: pointer;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-prev:not(.ui-state-disabled):hover,
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-next:not(.ui-state-disabled):hover {
	background: var(--wse-amber-tint);
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-prev:focus-visible,
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-next:focus-visible {
	outline: 2px solid var(--wse-amber-deep);
	outline-offset: 2px;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-prev.ui-state-disabled,
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-next.ui-state-disabled {
	opacity: 0.3;
	cursor: default;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar thead th {
	color: var(--wse-muted);
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: none;
	padding-bottom: 0.2rem;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td { padding: 0; border: 0; }
/* VF-BATCH 1D.1: neutralise the vendor green fill (rgb(187,221,136)) BKAP paints on the selected
   day's <td>; the selected amber lives on the rounded inner <a>, so the square green showed through
   the corners. State fills belong on the inner element, never the <td>. Normal scoped override —
   out-specifies BKAP's `.ui-datepicker td.ui-datepicker-current-day`; no !important. */
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-current-day,
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-days-cell-over { background: transparent; }
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td a,
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td span {
	display: block;
	text-align: center;
	padding: 0.28rem 0;
	border: 1px solid transparent;
	border-radius: var(--wse-radius-sm);
	background: transparent;
	color: var(--wse-ink);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td a.ui-state-default {
	background: var(--wse-amber-tint);
	color: var(--wse-amber-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td a:hover {
	background: var(--wse-amber-line);
	color: var(--wse-charcoal-deep);
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td a:focus-visible {
	outline: 2px solid var(--wse-amber-deep);
	outline-offset: 1px;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-current-day a,
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td a.ui-state-active {
	background: var(--wse-amber);
	color: var(--wse-charcoal-deep);
	text-decoration: none;
	font-weight: 700;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-today a,
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-today span {
	border-color: var(--wse-amber-line);
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td.ui-state-disabled span,
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-unselectable span {
	color: var(--wse-muted);
	text-decoration: line-through;
	cursor: default;
}
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-other-month a,
.single-product .bkap-booking-form:has(#inline_calendar) .ui-datepicker-inline .ui-datepicker-calendar td.ui-datepicker-other-month span {
	color: var(--wse-line);
	text-decoration: none;
	background: transparent;
}

/* Calendar legend (tour-booking-bar.js inserts it; inline-calendar Tours only).
   Plain-language labels + miniature cell swatches that reuse the state fills. */
.single-product div.product .summary .wse-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	margin: 0.55rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.72rem;
	color: var(--wse-muted);
}
.single-product div.product .summary .wse-cal-legend li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.single-product div.product .summary .wse-cal-legend__swatch {
	flex: none;
	width: 0.85rem;
	height: 0.85rem;
	border: 1px solid transparent;
	border-radius: var(--wse-radius-sm);
}
.single-product div.product .summary .wse-cal-legend__swatch--available { background: var(--wse-amber-tint); }
.single-product div.product .summary .wse-cal-legend__swatch--selected { background: var(--wse-amber); }
.single-product div.product .summary .wse-cal-legend__swatch--unavailable {
	background: var(--wse-card);
	border-color: var(--wse-line);
}

/* Dynamic total (BKAP #bkap_price / .bkap_price_info): divider + total hierarchy.
   Values are BKAP's; only presentation here.
   NOTE: on single-calendar Tours #bkap_price is the legitimate per-booking total
   and stays. On MULTI-DAY Tours the same #bkap_price sits inside #bkap-price-box
   together with #bkap_no_of_days — suppressed below — so this styling never shows
   there. */
.single-product div.product .summary #bkap_price.price,
.single-product div.product .summary .bkap-booking-form .bkap_price_info {
	display: block;
	margin-top: 0.875rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wse-line);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wse-charcoal-deep);
}

/* Multi-day redundant block-booking output — suppressed (presentation only).
   BKAP's block-booking mode renders #bkap-price-box (#bkap_no_of_days "Number of
   Days Selected: N" + #bkap_price "Total USD: $…") beneath the End Date calendar.
   On these Tours it (a) duplicates and (b) visually conflicts with the truthful
   top price/payment line (the Tour is sold as a fixed period at the From-price;
   the box's total reflects a KNOWN LEGACY BKAP BLOCK-BOOKING LIMITATION —
   BKAP requires a block-price > $1, so a nominal value is configured — ACCEPTED
   UNTIL THE WSE RESERVATIONS REPLACEMENT). Hidden ONLY in the multi-day flow,
   detected by the second (End Date) calendar #inline_calendar_checkout, so the
   single-calendar #bkap-price-box total is untouched (single-calendar Tours keep it).
   #bkap-price-box holds NO form values (the submitted booking data lives in the
   hidden .block_option_* / .wapbk_booking_dates inputs, untouched), and Cart /
   Checkout totals are unaffected. `display:none` removes it from layout AND the
   accessibility tree (no residual border, padding, whitespace, or SR output).
   No product ID / slug; no vendor edit.

   THIRD documented vendor-collision !important (ADR-06): BKAP's block-booking JS
   sets an INLINE `style="display:block"` on #bkap-price-box, which no external
   cascade/specificity/layer ordering can override — only `!important` can. It is
   authorised ONLY to set `display:none`, ONLY on this End-Date-calendar-scoped
   #bkap-price-box selector. Both CSS-policy guards whitelist exactly this and
   reject any other property or selector. */
.single-product div.product .summary:has(#inline_calendar_checkout) #bkap-price-box {
	display: none !important;
}

/* Primary action: full-width amber pill, separated from quantity. */
.single-product div.product .summary form.cart .single_add_to_cart_button {
	display: block;
	width: 100%;
	margin-top: 1rem;
	padding: 0.875rem 1.5rem;
	border-radius: var(--wse-radius-pill);
	text-align: center;
}

/* Wishlist (VF-BATCH 1D): the wse-destinations-customer plugin locks this control's
   width (auto) and background with !important (probe-proven). The owner authorised
   the MINIMUM plugin-collision override — WIDTH ONLY — to make it the approved
   full-width pill matching Book Now / More information; every other property
   (height, padding, border, radius, alignment, focus) is normal scoped CSS, and
   the plugin keeps its fill, label and saved-state. Both CSS-policy guards whitelist
   exactly this width/max-width/background exception on .wse-wl-heart and reject any
   other !important. */
.single-product div.product .summary .wse-wl-heart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100% !important;
	min-height: 2.75rem;
	margin: 0.75rem 0 0;
	padding: 0.6875rem 1.5rem;
	border: 1px solid var(--wse-line);
	border-radius: var(--wse-radius-pill);
	font-weight: 600;
}
.single-product div.product .summary .wse-wl-heart:hover { border-color: var(--wse-amber-line); }
.single-product div.product .summary .wse-wl-heart:focus-visible { outline: 2px solid var(--wse-amber-deep); outline-offset: 2px; }

/* Support row: More information (full-width outline pill, single line now) +
   centred policy link with a calm divider. */
.single-product div.product .summary .wse-panel-links { margin-top: 0.75rem; }
.single-product div.product .summary .wse-panel-links__policy {
	align-self: center;
	justify-content: center;
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wse-line);
	width: 100%;
	text-align: center;
	color: var(--wse-muted);
}
/* stylelint-enable selector-id-pattern */

/* Keep the selected variation's price visible above the booking button (VF-BATCH 1E).
   FOURTH documented vendor-collision !important (ADR-06): on a date change BKAP/WC sets
   an INLINE `display:none` on .woocommerce-variation-price (the truthful per-variation
   price shown above "Check Availability"), and never restores it — so after any date
   change the price vanished (previously masked by BKAP's own #bkap-price-box total,
   now suppressed). `!important` is the only thing that can beat that inline style, and
   it is authorised ONLY for `display` ONLY on this price element. It is safe: the
   element is a child of .single_variation, which WooCommerce hides (display:none) when
   NO variation is selected, so the price only ever renders when a variation IS selected
   (its parent is shown) — never a stale/orphaned price. Value is unchanged (BKAP/WC
   owns it); presentation only. Both CSS-policy guards whitelist exactly this. */
.single-product div.product .summary .single_variation .woocommerce-variation-price {
	display: block !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 2rem 0 0;
	border-bottom: 1px solid var(--wse-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
	border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 1.25rem 0 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--wse-text-secondary);
	font-weight: 600;
	padding: 0.6rem 0.25rem;
	display: inline-block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wse-charcoal-deep);
	box-shadow: inset 0 -2px 0 var(--wse-amber);
}
.woocommerce div.product .woocommerce-tabs .panel { margin-top: 1.25rem; }

/* ── /tour-search/ compatibility (Step 7 Batch 4) ─────────────────────────
   The DC plugin's [wse_tour_search] shortcode renders `.wse-dc-*` markup on
   a Standard Page. Its own assets/css/search.css is unlayered plugin CSS
   (not @layer-ed), so — same collision mechanics as the rest of this
   section — these overrides must also stay unlayered to take effect. Only
   presentation properties are touched (colour, spacing, radius, container
   width); the plugin's own grid/flex mechanics, query and stored filter
   behaviour are left alone. No plugin file is edited. */

/* The former narrow Standard Page measure was too small for this filter form +
   result grid. Detected via the plugin's own stable public class, not a
   hard-coded page ID/slug. */
html:has(.wse-dc-results-layout) .entry-content {
	max-width: var(--wse-container-max);
}
/* Batch 4 widened the .entry-content wrapper to the 1280 rail, but at that time the
   plugin's results wrapper is a DIRECT CHILD of the is-layout-constrained
   .entry-content, so WordPress core's unlayered
   `.is-layout-constrained > :where(...)` rule re-capped THIS element at the
   then-current narrow content-size (margin-left/right:auto !important), leaving the whole
   results region narrow with a large empty right gutter — the owner's
   "still visibly narrow" report. Releasing the child's max-width lets it
   fill the broad rail; core's auto side-margins then collapse to 0 with no
   max-width to centre against. The sidebar keeps its own intentional
   flex-basis; the result column gets the remaining broad width. */
html:has(.wse-dc-results-layout) .entry-content > .wse-dc-results-layout {
	max-width: none;
}

/* Card body (`.wse-dc-search-form`) + field/label spacing aligned to the
   shared WSE surface tokens instead of the plugin's hard-coded #fff/#e5e5e5.
   scroll-margin-top (Batch 4.2 R2): the mobile action's scroll-back lands the
   form BELOW the sticky header, using the same shared offset contract. */
.wse-dc-search-form {
	background: var(--wse-card);
	border-color: var(--wse-line-soft);
	border-radius: var(--wse-radius);
	scroll-margin-top: var(--wse-sidebar-sticky-top);
}
.wse-dc-field > label {
	color: var(--wse-charcoal-deep);
	font-family: var(--wp--preset--font-family--display);
}
.wse-dc-search-form select {
	border-color: var(--wse-line);
	border-radius: var(--wse-radius-sm);
	color: var(--wse-ink);
	min-height: 44px;
}
.wse-dc-check { min-height: 24px; display: flex; align-items: center; gap: 0.4rem; }

/* Approved WSE button treatment (mirrors .wse-btn--primary) in place of the
   plugin's default WordPress-admin blue. Disabled/error states are the
   browser/plugin default — the plugin does not currently emit either. */
.wse-dc-submit button {
	background: var(--wse-amber);
	color: var(--wse-charcoal-deep);
	border-radius: var(--wse-radius-pill);
	font-weight: 600;
	min-height: 44px;
	transition: background-color 150ms ease, border-color 150ms ease;
}
.wse-dc-submit button:hover { background: var(--wse-amber-deep); }

/* Sidebar card + pagination visual alignment with the rest of the site. */
.wse-dc-sidebar { padding-top: 0; }

/* Batch 4.2 R1 — the plugin makes the sidebar sticky with a flat `top: 20px`,
   so its top edge scrolls behind the sticky global header (measured 65px
   behind at 1440). Re-offset it using the SHARED header/admin-toolbar
   contract (`--wse-header-h` + `--wse-admin-offset`) plus a spacing token —
   never a hard-coded header height. Higher-specificity + later load order than
   the plugin's `.wse-dc-sidebar { top }` so this wins. Only sticky ≥783px
   (the plugin stacks the sidebar static below that).

   `--wse-sidebar-sticky-top` is the single source for both the sticky `top`
   and the max-height budget. Its CSS value is the no-JS fallback (the header
   token undershoots the real ~85px header by ~13px, but the 16px `--wse-gap`
   absorbs that and still clears it). The route-scoped search script replaces
   this var with the MEASURED header offset so the clearance is exact and
   robust at every width/admin state — the same measured-offset pattern
   navigation.js already uses for `--wse-admin-offset`.

   max-height + overflow keep a panel taller than the viewport (or a short
   viewport) fully usable and internally scrollable, and the sticky context
   naturally stops it at the end of the results row (never overlapping the
   footer or the Tour results). */
.wse-dc-results-layout .wse-dc-sidebar {
	top: var(--wse-sidebar-sticky-top);
	max-height: calc(100dvh - var(--wse-sidebar-sticky-top) - var(--wse-gap));
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Batch 4.2 R2 — "Search more tours" fixed bottom action.
   Fixed bottom action, mirroring the mobile Tour booking-bar treatment but
   narrowly scoped to /tour-search/. Server-rendered `hidden`, so it stays
   invisible with NO JavaScript; CSS keeps it display:none until the script
   adds `.is-visible`, and always hides it ≥783px where the sticky sidebar
   remains available (matches the plugin's own sidebar-stack breakpoint).
   z-index 90 keeps it below the sticky header (100) and any consent layer;
   the safe-area inset keeps it clear of the browser home indicator. */
.wse-search-more {
	position: fixed;
	left: 50%;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 22px;
	transform: translateX(-50%);
	border: 0;
	border-radius: var(--wse-radius-pill);
	background: var(--wse-amber);
	color: var(--wse-charcoal-deep);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 4px 16px rgba(63, 64, 64, 0.22);
	cursor: pointer;
}
.wse-search-more.is-visible { display: inline-flex; }
.wse-search-more:hover { background: var(--wse-amber-deep); }
.wse-search-more:focus-visible { outline: 2px solid var(--wse-charcoal-deep); outline-offset: 2px; }

@media (min-width: 783px) {
	.wse-search-more,
	.wse-search-more.is-visible { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wse-search-more { transition: none; }
}
.wse-dc-pagination a,
.wse-dc-pagination span {
	border-color: var(--wse-line);
	border-radius: var(--wse-radius-sm);
	color: var(--wse-ink);
}
.wse-dc-pagination .current {
	background: var(--wse-amber);
	border-color: var(--wse-amber);
	color: var(--wse-charcoal-deep);
}
.wse-dc-prompt,
.wse-dc-none { color: var(--wse-text-secondary); }

/* ── Cart vendor collisions (launch sprint Phase 1C) ─────────────────────────
   Every rule below overrides a declaration the unlayered WC general/layout/
   smallscreen stylesheets make on the same element. */

/* WC general CSS draws its own table borders; the card panel replaces them. */
.woocommerce-cart-form table.shop_table.cart {
	border: 1px solid var(--wse-line);
	border-collapse: separate;
}
.woocommerce-cart-form table.shop_table.cart th,
.woocommerce-cart-form table.shop_table.cart td {
	border-top: 0;
	padding: 1rem 0.9rem;
	vertical-align: middle;
}
.woocommerce-cart-form table.shop_table.cart tbody tr.cart_item th,
.woocommerce-cart-form table.shop_table.cart tbody tr.cart_item td {
	border-top: 1px solid var(--wse-line);
}

/* Thumbnail: vendor caps cart images at 32px (general) / hides them on
   smallscreen; the approved Cart keeps the Tour photograph present. */
.woocommerce-cart-form table.shop_table.cart img {
	border-radius: var(--wse-radius-sm);
	height: auto;
	width: 88px;
}

/* Coupon input: vendor floats it at a fixed 80px width. */
.woocommerce-cart-form td.actions .coupon .input-text {
	float: none;
	width: min(100%, 13rem);
}

/* Totals column: vendor floats .cart_totals at width:48%; the summary sits as
   a bounded right-hand card on desktop instead. */
.woocommerce-page .cart-collaterals .cart_totals {
	float: right;
	width: min(100%, 420px);
}
.woocommerce-page .cart_totals table.shop_table {
	border: 1px solid var(--wse-line);
	border-collapse: separate;
}
.woocommerce-page .cart_totals table.shop_table th,
.woocommerce-page .cart_totals table.shop_table td {
	border-top: 0;
	padding: 0.9rem 1rem;
}
.woocommerce-page .cart_totals table.shop_table tr.order-total th,
.woocommerce-page .cart_totals table.shop_table tr.order-total td {
	border-top: 1px solid var(--wse-line);
}

/* Cross-sells (if a Tour carries them): vendor floats the block against the
   totals column; keep it full-width beneath the cart instead. */
.woocommerce-page .cart-collaterals .cross-sells {
	float: none;
	width: 100%;
}

/* "Update cart" is WooCommerce's change-pending control: a quiet secondary
   until enabled by an edit. Global styles paint .wp-element-button amber and
   WC general CSS dims :disabled — both unlayered, so the truthful secondary
   treatment must live here. */
.woocommerce-cart-form td.actions > .button {
	background: transparent;
	border: 1px solid var(--wse-charcoal-deep);
	color: var(--wse-charcoal-deep);
}
.woocommerce-cart-form td.actions > .button:hover:not(:disabled) {
	background: var(--wse-charcoal-deep);
	color: var(--wse-cream);
}
.woocommerce-cart-form td.actions > .button:disabled,
.woocommerce-cart-form td.actions > .button:disabled[disabled] {
	background: transparent;
	border-color: var(--wse-line);
	color: var(--wse-text-secondary);
	opacity: 1;
}

/* Empty-cart notice: WC renders it as the blocks notice banner (is-info), whose
   unlayered sheet paints it blue; the honest empty state keeps WSE chrome. */
.woocommerce .wc-empty-cart-message .wc-block-components-notice-banner.is-info {
	background: var(--wse-card);
	border: 1px solid var(--wse-line);
	border-left: 4px solid var(--wse-amber);
	border-radius: var(--wse-radius-sm);
	color: var(--wse-charcoal-deep);
}
.woocommerce .wc-empty-cart-message .wc-block-components-notice-banner.is-info svg {
	fill: var(--wse-amber-deep);
}

/* ── Cart smallscreen composition (vendor stacks tds at ≤768px with
   display:block + data-title labels; recompose each row as a card WITH the
   photograph, which the vendor smallscreen sheet otherwise hides). ───────── */
@media (max-width: 768px) {
	.woocommerce-cart-form table.shop_table.cart {
		background: transparent;
		border: 0;
	}
	.woocommerce-cart-form table.shop_table.cart tbody tr.cart_item {
		background: var(--wse-card);
		border: 1px solid var(--wse-line);
		border-radius: var(--wse-radius);
		display: grid;
		column-gap: 0.75rem;
		grid-template-columns: 88px minmax(0, 1fr);
		margin-bottom: 1rem;
		padding: 0.9rem;
		position: relative;
	}
	.woocommerce-cart-form table.shop_table.cart tbody tr.cart_item th,
	.woocommerce-cart-form table.shop_table.cart tbody tr.cart_item td {
		border: 0;
		padding: 0.35rem 0.5rem;
	}

	/* Photograph occupies the left rail of the card. The vendor blocktheme sheet
	   widens the cell itself and the smallscreen sheet right-flushes inline
	   content (!important), so the cell is pinned to the 88px track and the
	   image made block-level (block layout ignores the text-align). */
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-thumbnail {
		display: block;
		grid-column: 1;
		grid-row: 1 / span 4;
		padding: 0;
		width: 88px;
	}
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-thumbnail::before { display: none; }
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-thumbnail img {
		display: block;
		width: 88px;
	}

	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-name,
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-price,
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-quantity,
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-subtotal {
		grid-column: 2;
	}

	/* The title cell reads as a heading, not a labelled value; its children
	   restore left alignment beneath the vendor's right-aligned td rule. */
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-name::before { display: none; }
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-name a,
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-name dl.variation,
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-name dl.variation dt,
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-name dl.variation dd {
		display: block;
		float: none;
		margin: 0;
		text-align: left;
	}
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-name dl.variation dt {
		font-weight: 600;
		margin-top: 0.35rem;
	}

	/* Remove floats to the card corner with its full 44px target. */
	.woocommerce-cart-form table.shop_table.cart tr.cart_item td.product-remove {
		padding: 0;
		position: absolute;
		right: 0.35rem;
		top: 0.35rem;
	}

	/* Actions strip: stack coupon controls full-width with honest tap targets. */
	.woocommerce-cart-form table.shop_table.cart td.actions { padding: 0; }
	.woocommerce-cart-form td.actions .coupon .input-text { width: 100%; }
	.woocommerce-cart-form td.actions .coupon .button,
	.woocommerce-cart-form td.actions > .button {
		margin-top: 0.6rem;
		width: 100%;
	}

	/* Totals card sits full-width above the checkout action. */
	.woocommerce-page .cart-collaterals .cart_totals { float: none; width: 100%; }
}

/* ── Checkout vendor collisions (launch sprint Day 2) ────────────────────────
   Every rule overrides a declaration from the unlayered WC general/layout/
   smallscreen sheets (or the intl-tel-input plugin sheet). */

/* Two-rail composition ≥1024 (Direction 2A 54–59): fields left, one summary
   card (Your order + payment + Place order) right. Vendor floats #customer_details
   columns at 48% — reset to a stacked left rail. */
/* stylelint-disable selector-id-pattern -- #customer_details/#order_review(_heading)/#place_order are WooCommerce's public checkout DOM IDs. */
@media (min-width: 1024px) {
	.woocommerce-checkout form.woocommerce-checkout {
		column-gap: var(--wse-gap-col);
		display: grid;
		grid-template-columns: minmax(0, 1fr) 420px;
		grid-template-rows: auto auto 1fr;
	}
	/* The AJAX validation summary (when present) spans the full rail ABOVE the
	   two columns, so the scroll-to-notices landing shows it first. */
	.woocommerce-checkout form.woocommerce-checkout > .woocommerce-NoticeGroup-checkout {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.woocommerce-checkout form.woocommerce-checkout #customer_details {
		grid-column: 1;
		grid-row: 2 / span 2;
	}
	.woocommerce-checkout form.woocommerce-checkout #order_review_heading {
		grid-column: 2;
		grid-row: 2;
	}
	.woocommerce-checkout form.woocommerce-checkout #order_review {
		align-self: start;
		grid-column: 2;
		grid-row: 3;
	}
	.woocommerce-checkout form.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout form.woocommerce-checkout .col2-set .col-2 {
		float: none;
		width: 100%;
	}
	.woocommerce-checkout form.woocommerce-checkout .col2-set .col-2 { margin-top: 1.5rem; }
}

/* Payment region: vendor paints #payment and its speech-bubble payment_box with
   its own background/borders (the legacy woocommerce-colors plugin amber is
   superseded WITH this evidence). Neutral card interior instead. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--wse-sand);
	border-radius: var(--wse-radius-sm);
	color: var(--wse-charcoal-deep);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--wse-line);
	padding: 0 0 1rem;
}
.woocommerce-checkout #payment .place-order { padding: 1rem 0 0; }
.woocommerce-checkout #payment button#place_order {
	display: block;
	float: none;
	font-size: 1.05rem;
	min-height: 52px;
	width: 100%;
}

/* stylelint-enable selector-id-pattern */

/* Info notices on the commerce corridor (coupon toggle, gateway hints, empty
   cart): vendor blue → WSE chrome. Classic and blocks variants both appear. */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .wc-block-components-notice-banner.is-info,
.woocommerce .wc-empty-cart-message .wc-block-components-notice-banner.is-info {
	background: var(--wse-card);
	border: 1px solid var(--wse-line);
	border-left: 4px solid var(--wse-amber);
	border-radius: var(--wse-radius-sm);
	border-top-color: var(--wse-line);
	color: var(--wse-charcoal-deep);
}
.woocommerce-checkout .woocommerce-info::before { color: var(--wse-amber-deep); }
.woocommerce-checkout .woocommerce-info svg,
.woocommerce-checkout .woocommerce-form-coupon-toggle svg { fill: var(--wse-amber-deep); }
.woocommerce-checkout .wc-block-components-notice-banner.is-info svg,
.woocommerce .wc-empty-cart-message .wc-block-components-notice-banner.is-info svg {
	/* wc-blocks paints the svg itself as a FILLED blue disc (background-color +
	   50% radius) under the glyph — the approved icon is the amber outlined "i"
	   alone, so the disc goes transparent (one circle, not two). */
	background-color: transparent;
	fill: var(--wse-amber-deep);
}

/* Validation: clay family per the accessibility spec (icon+text, never colour
   alone — WC's own error list keeps the text). Vendor declares its own reds. */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error {
	background: var(--wse-clay-tint);
	border: 1px solid var(--wse-clay);
	border-left: 4px solid var(--wse-clay);
	border-radius: var(--wse-radius-sm);
	border-top-color: var(--wse-clay);
	color: var(--wse-clay-text);
}
.woocommerce-checkout .woocommerce-error::before { color: var(--wse-clay); }
.woocommerce-checkout .woocommerce-error a { color: var(--wse-clay-text); font-weight: 600; }
.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
	border-color: var(--wse-clay);
}
.woocommerce-checkout .form-row.woocommerce-invalid label { color: var(--wse-clay-text); }

/* The phone-purpose note stays visible: WooCommerce's sheet hides form-row
   descriptions until focus, but explaining WHY phone is required must not wait
   for interaction (screen readers already receive it via aria-describedby,
   which resolves hidden targets by spec — the vendor coupling is untouched). */
/* stylelint-disable-next-line selector-id-pattern -- #billing_phone_field is WooCommerce's public checkout DOM ID. */
.woocommerce-checkout #billing_phone_field .description { display: block; }

/* The intl-tel-input wrapper (and its inner input) fix their own widths; the
   phone field fills the row like every other control. */
.woocommerce-checkout .form-row .iti,
.woocommerce-checkout .form-row .iti input.input-text { width: 100%; }

/* Review table: vendor draws its own table borders inside the summary card. */
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table {
	border: 0;
	margin: 0;
}
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td {
	border-top: 0;
	padding: 0.6rem 0.25rem;
	vertical-align: top;
}
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tr.order-total td {
	border-top: 1px solid var(--wse-line);
	font-size: 1.1rem;
}
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tfoot th { color: var(--wse-text-secondary); }

/* Sale badge: Elementor Pro's WooCommerce sheet (active in the launch
   composition) paints span.onsale with the legacy kit's olive accent — white
   on #958e09 fails contrast (3.41:1). Theme-owned badge: charcoal on amber
   (≈10:1), the same pairing as every primary action. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--wse-amber);
	color: var(--wse-charcoal-deep);
}

/* WSE:UNLAYERED-VENDOR-OVERRIDES-END */