/**
 * Package pages.
 *
 * Depends on the theme's brand.css for every token and on the destinations
 * sheet for the shared components it borrows — the tab strip, the two-column
 * yes/no list, the four-up card grid. Nothing here re-implements those; where
 * a component already exists it is reused by class name so a fix lands once.
 */

.pub-sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------- ladder --- */

.pub-pkg-lead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
}

.pub-pkg-lead__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--grey-500);
}

.pub-pkg-lead__price strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1;
	color: var(--wp--preset--color--navy);
}

.pub-pkg-lead__note {
	margin: 0;
	max-inline-size: 46ch;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--preset--color--grey-700);
}

/*
 * Nine rows by three columns of currency. It is a table in the markup because
 * it is a table in fact — a screen reader should be able to say "four adults,
 * twin sharing" rather than read forty numbers in a row — and it scrolls
 * inside its own box on a phone rather than pushing the page sideways.
 */
.pub-ladder {
	overflow-x: auto;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

.pub-ladder table {
	inline-size: 100%;
	border-collapse: collapse;
	min-inline-size: 520px;
}

.pub-ladder th,
.pub-ladder td {
	padding: 14px var(--wp--preset--spacing--40);
	text-align: start;
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-ladder thead th {
	background: var(--wp--preset--color--off-white);
	vertical-align: bottom;
}

.pub-ladder tbody tr:last-child th,
.pub-ladder tbody tr:last-child td {
	border-block-end: 0;
}

.pub-ladder__room {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--navy);
}

.pub-ladder__hint {
	display: block;
	margin-block-start: 2px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	color: var(--wp--preset--color--grey-500);
}

.pub-ladder tbody th {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--grey-700);
	white-space: nowrap;
}

.pub-ladder tbody td {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.pub-ladder td.is-na {
	color: var(--wp--preset--color--grey-300);
	font-weight: 500;
}

/* Twin sharing is what most parties book, so the column carries a tint rather
   than making the reader find it each time. */
.pub-ladder tbody td:nth-child(3),
.pub-ladder thead th:nth-child(3) {
	background: rgba(32, 121, 195, 0.05);
}

.pub-pkg-kids {
	margin-block-start: var(--wp--preset--spacing--50);
}

.pub-pkg-kids h3 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1rem;
	color: var(--wp--preset--color--navy);
}

.pub-pkg-kids ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--grey-700);
}

/* ----------------------------------------------------------- hotels --- */

/*
 * Three across, always. `auto-fit` gave two wide tiers on a three-tier package
 * and left the third stranded on its own row at half the width — the same
 * complaint the package cards had, and the same answer: the number of columns
 * is a design decision, not something to be derived from how many tiers a
 * supplier happens to quote.
 */
.pub-hotels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

@media (max-width: 900px) {
	.pub-hotels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.pub-hotels {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The hotel's photograph sits above its name, one fixed ratio for all of them
   so a row of tiers reads as a row rather than as three different shapes. */
.pub-hotels__shot {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
	margin-block-end: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--grey-100);
}

.pub-hotels__tier {
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

.pub-hotels__tier h3 {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: 3px solid var(--wp--preset--color--yellow);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.1rem;
	color: var(--wp--preset--color--navy);
}

.pub-hotels__tier ul {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pub-hotels__where {
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
}

.pub-hotels__name {
	display: block;
	margin-block-start: 2px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--wp--preset--color--navy);
}

.pub-hotels__room {
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

.pub-note {
	margin: var(--wp--preset--spacing--50) 0 0;
	max-inline-size: 72ch;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.7;
	color: var(--wp--preset--color--grey-500);
}

/* =========================================================== layout === */

/*
 * Seventy-thirty: everything you read on the left, the thing you act on
 * pinned on the right. A booking form that scrolls away with the page is a
 * form people scroll back up to find, and the price ladder is exactly the
 * section that makes them want to.
 */
/*
 * This is the first thing under the site header, so it does not want a full
 * section band above it. The rule used to *add* 24px to the band's own top
 * padding, which put the better part of a hundred pixels of nothing between
 * the header and the trip title. A band separates two sections; there is no
 * section above this one to separate it from.
 */
.pub-pkg-top {
	padding-block-start: clamp(16px, 2vw, 32px);
}

.pub-pkg-layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.pub-pkg-main {
	min-inline-size: 0;
}

/*
 * `align-self: start` is doing the real work. A grid item stretches to the
 * row's height by default, and a sticky element as tall as its container has
 * nowhere to travel — the same trap the sticky site header fell into.
 */
.pub-pkg-aside {
	position: sticky;
	inset-block-start: calc(var(--pub-header-h, 84px) + var(--wp--preset--spacing--30));
	align-self: start;
}

@media (max-width: 1024px) {
	.pub-pkg-layout {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	/* Below the fold on a narrow screen there is nothing to stick to — the
	   column is now above the content it belongs to, not beside it. */
	.pub-pkg-aside {
		position: static;
	}
}

.pub-pkg-title {
	margin: 4px 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(26px, 2.8vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--navy);
}

.pub-pkg-lede {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-inline-size: 68ch;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.65;
	color: var(--wp--preset--color--grey-700);
}

/* A section inside the column: no band, no gutter, just rhythm. */
.pub-pkg-block {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-pkg-block .pub-section-head {
	margin-block-end: var(--wp--preset--spacing--50);
}

.pub-pkg-gallery--bare {
	padding-block-end: 0;
	background: none;
}

.pub-pkg-gallery--bare .pub-slider__slide {
	aspect-ratio: 16 / 9;
}

/* The route sits under the description as a row of stops. */
.pub-pkg-main .pub-route {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------ accordion --- */

.pub-itin__fold {
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-itin__day:last-child .pub-itin__fold {
	border-block-end: 0;
}

.pub-itin__head {
	display: grid;
	grid-template-columns: 62px 1fr 22px;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
	cursor: pointer;
	list-style: none;
}

/* Safari draws its own triangle unless both of these are set. */
.pub-itin__head::-webkit-details-marker {
	display: none;
}

.pub-itin__head::marker {
	content: "";
}

.pub-itin__head:hover .pub-itin__title {
	color: var(--wp--preset--color--blue);
}

.pub-itin__fold > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

.pub-itin__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--wp--preset--color--navy);
}

.pub-itin__drive {
	grid-column: 2;
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

.pub-itin__chev {
	/* Pinned rather than auto-placed. Left to find its own cell it lands
	   beside the drive time on the second row, and on a narrow screen it
	   pushed the day title into the 22px column meant for the chevron
	   itself — which cost the title 58px of overflow it could not lose. */
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	inline-size: 10px;
	block-size: 10px;
	justify-self: end;
	border-inline-end: 2px solid var(--wp--preset--color--grey-500);
	border-block-end: 2px solid var(--wp--preset--color--grey-500);
	transform: rotate(45deg);
	transition: transform var(--wp--custom--dur--fast) var(--wp--custom--ease--standard);
}

.pub-itin__fold[open] .pub-itin__chev {
	transform: rotate(-135deg);
}

.pub-itin__body {
	padding-inline-start: calc(62px + var(--wp--preset--spacing--30));
	padding-block-end: var(--wp--preset--spacing--50);
}

@media (max-width: 620px) {
	.pub-itin__head {
		grid-template-columns: 1fr 22px;
	}

	.pub-itin__no,
	.pub-itin__title,
	.pub-itin__drive {
		grid-column: 1;
	}

	.pub-itin__chev {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	.pub-itin__body {
		padding-inline-start: 0;
	}
}

/* Printing a tour is a thing people do. Collapsed days would print blank. */
@media print {
	.pub-itin__body {
		display: block !important;
	}
}

/* ------------------------------------------------- itinerary primitives --- */

/*
 * The list itself carries no layout — the fold inside each item owns that. An
 * earlier version made the list item a two-column grid, which put the whole
 * accordion into a 160px column and squeezed five days of prose into a ribbon
 * one word wide.
 */
.pub-itin {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pub-itin__day {
	margin: 0;
}

.pub-itin__no {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
}

.pub-itin__stops {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pub-itin__stops li {
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 3px solid var(--wp--preset--color--yellow);
}

.pub-itin__stops strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1rem;
	color: var(--wp--preset--color--navy);
}

.pub-itin__stops span {
	display: block;
	margin-block-start: 4px;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.65;
	color: var(--wp--preset--color--grey-700);
}

.pub-itin__night {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}

/* ------------------------------------------------------------- route --- */

/*
 * The stops as a row rather than a numbered list. These styles went out with
 * the old full-width masthead they were written for; the route survived the
 * move into the left column and briefly rendered as "1. Kandy 1 night".
 */
.pub-route {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pub-route__stop {
	position: relative;
	padding-inline-end: var(--wp--preset--spacing--40);
}

.pub-route__stop:not(:last-child)::after {
	content: "→";
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 2px;
	color: var(--wp--preset--color--grey-300);
}

.pub-route__place {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1rem;
	color: var(--wp--preset--color--navy);
}

.pub-route__nights {
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

/* ------------------------------------------------------ booking form --- */

/*
 * These went out with the itinerary block they happened to sit next to — a
 * reminder that cutting CSS by "from this comment to that comment" cuts
 * whatever grew between them since. The form rendered as raw browser selects
 * on a live booking page.
 */
.pub-book-band {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.pub-book {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

@media (max-width: 900px) {
	.pub-book {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

.pub-book__intro h2 {
	margin: 4px 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.1;
	color: var(--wp--preset--color--yellow);
}

.pub-book__lede {
	margin: 0;
	max-inline-size: 42ch;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
}

.pub-book__form {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.pub-book__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.pub-field {
	margin: 0;
}

.pub-field label {
	display: block;
	margin-block-end: 6px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
}

.pub-field select,
.pub-field input {
	inline-size: 100%;
	min-block-size: var(--wp--custom--control--height);
	padding: 10px 14px;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-300);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--navy);
}

.pub-field select:focus-visible,
.pub-field input:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 1px;
}

.pub-book__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
}

.pub-book__each {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--wp--preset--color--grey-700);
}

.pub-book__each span:last-child {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

.pub-book__sum {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
}

.pub-book__sum strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--navy);
}

.pub-book__tax {
	flex: 1 0 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--grey-500);
}

.pub-book__unavailable {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--40);
	border-inline-start: 3px solid #c0392b;
	background: rgba(192, 57, 43, 0.06);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--preset--color--grey-700);
}

.pub-book__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
}

.pub-book__actions .pub-btn[disabled] {
	opacity: 0.4;
	pointer-events: none;
}

.pub-book__note {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.6;
	color: var(--wp--preset--color--grey-500);
}

/* ---------------------------------------------------- booking as aside --- */

/*
 * In the column the form is the whole card, so it drops the navy band it wore
 * when it was a full-width section and carries its own border instead.
 */
.pub-book--aside {
	display: block;
	padding: 0;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: 0 12px 32px rgba(31, 52, 101, 0.08);
	overflow: hidden;
}

.pub-book--aside .pub-book__intro {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
}

.pub-book--aside .pub-book__intro h2 {
	font-size: 1.5rem;
	color: var(--wp--preset--color--navy);
}

.pub-book--aside .pub-book__lede {
	color: var(--wp--preset--color--grey-500);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.6;
}

.pub-book--aside .pub-book__form {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	border-radius: 0;
}

/* One field per line: at 30% of the page a two-up grid gives each select
   about ninety pixels, which is not enough for "Triple sharing". */
.pub-book--aside .pub-book__grid {
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}

.pub-book--aside .pub-book__total {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.pub-book--aside .pub-book__actions {
	flex-direction: column;
}

.pub-book--aside .pub-book__actions .pub-btn {
	inline-size: 100%;
	justify-content: center;
}

/* ========================================================= checkout === */

/*
 * Who is travelling. Set apart from the billing address because it is a
 * different kind of question: the address is where the card lives, these are
 * the names that go on tickets and cannot be corrected later without a fee.
 */
.pub-travellers {
	margin-block-start: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-block-start: 4px solid var(--wp--preset--color--yellow);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

.pub-travellers h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 1.25rem;
	color: var(--wp--preset--color--navy);
}

.pub-travellers__note {
	margin: 8px 0 var(--wp--preset--spacing--50);
	max-inline-size: 60ch;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--preset--color--grey-500);
}

.pub-traveller-field {
	margin-block-end: var(--wp--preset--spacing--40);
}

.pub-traveller-field label {
	display: block;
	margin-block-end: 6px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
}

.pub-traveller-field input[type="text"] {
	inline-size: 100%;
	min-block-size: var(--wp--custom--control--height);
	padding: 10px 14px;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-300);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--navy);
}

.pub-traveller-field input[type="text"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 1px;
}

/* Hotels and Rooms are one decision made twice, so they share a line. */
.pub-book__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--30);
}

/* The qualifier on a child field is the whole point of the field — "sharing
   your bed" versus "with their own bed" is a price difference, not a detail. */
.pub-field label span {
	display: block;
	margin-block-start: 2px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--wp--preset--color--grey-300);
}

.pub-book__party {
	flex: 1 0 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.5;
	color: var(--wp--preset--color--grey-500);
}

/* In the aside the grid is a single column; the pair stays two. */
.pub-book--aside .pub-book__grid > .pub-book__pair {
	grid-template-columns: 1fr 1fr;
}

/* Adults and the two child counts on one row. Each select holds one digit, so
   the tight column is spent on the caption rather than the control. */
.pub-book__trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.pub-book__trio .pub-field label {
	white-space: nowrap;
}

.pub-book__trio .pub-field label span {
	white-space: normal;
	min-block-size: 2.2em;
}

.pub-book__trio .pub-field select {
	padding-inline: 10px;
}

.pub-book__note {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--wp--preset--color--grey-500);
}

/* -------------------------------------------- cart and checkout line meta --- */

/*
 * WooCommerce prints the chosen options as a definition list and floats the
 * <dt> left. That works for "Hotels: 5-star" and breaks for everything longer:
 * "2 adults, twin sharing" is wider than the space left beside the float, so it
 * wraps under its own label and lands indented by the float's width. The result
 * reads as a misalignment because it is one.
 *
 * Two columns instead. The label column is as wide as the longest label and no
 * wider, the value column takes the rest, and nothing floats — so a long value
 * wraps inside its own column and stays aligned with the short ones above it.
 */
.woocommerce dl.variation,
.wc-block-components-product-details {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 4px var(--wp--preset--spacing--20);
	margin-block: 8px 0;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
}

.woocommerce dl.variation dt,
.wc-block-components-product-details__name {
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	font-weight: 600;
	color: var(--wp--preset--color--grey-700);
}

.woocommerce dl.variation dd,
.wc-block-components-product-details__value {
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--navy);
}

/* The <dd> carries a <p> in some Woo templates and a bare string in others. */
.woocommerce dl.variation dd p {
	margin: 0;
}

/* The block cart and checkout print each pair as its own <li>, which the grid
   above would lay out one pair per row. Put the list back into the same two
   columns rather than fighting it row by row. */
.wc-block-components-product-details li {
	display: contents;
}

/* ------------------------------------------------------- packages index --- */

.pub-pkgindex__search {
	margin-block-end: var(--wp--preset--spacing--60);
}

.pub-pkgindex__search input {
	inline-size: 100%;
	max-inline-size: 640px;
	padding: 14px 18px;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-100);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--navy);
}

.pub-pkgindex__search input:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

/* Filters left, results right. The sidebar is a fixed measure because a facet
   list that reflows with the number of results is a facet list that moves
   under the cursor. */
.pub-pkgindex__layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

@media (max-width: 900px) {
	.pub-pkgindex__layout {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

.pub-facet {
	margin-block-end: var(--wp--preset--spacing--60);
}

.pub-facet h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--body-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
}

.pub-facet__opt {
	display: block;
	inline-size: 100%;
	padding: 8px 12px;
	margin-block-end: 4px;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: none;
	text-align: start;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	color: var(--wp--preset--color--grey-700);
	cursor: pointer;
}

.pub-facet__opt:hover {
	background: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--navy);
}

.pub-facet__opt.is-on {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.pub-pkgindex__count {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--grey-500);
}

/*
 * Three across in the results column.
 *
 * The shared `.pub-pkgs` grid uses a fixed 380px track, which is right on a
 * destination page where the cards sit in the full page width. Here they sit
 * in what is left after a 220px sidebar, and a fixed track fitted two with a
 * wide gutter going spare. Inside this column the count of columns is the
 * design decision and the card width follows it.
 */
.pub-pkgindex__results .pub-pkgs {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.pub-pkgindex__results .pub-pkgs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.pub-pkgindex__results .pub-pkgs {
		grid-template-columns: minmax(0, 1fr);
	}
}