/**
 * The tour category page.
 *
 * SCOPED UNDER .ct-cat, EVERY RULE, WITHOUT EXCEPTION.
 *
 * The supplied layout styles bare `section`, `h1`, `h2`, `p`, `a` and `button`.
 * That is fine in a standalone HTML file and wrong here: the theme's Elementor
 * header and footer render on this page too, and an unscoped `a` rule would
 * restyle the navigation. The same lesson as tour-itinerary.css, applied from the
 * start this time rather than after the fact.
 *
 * The tokens are the layout's own, declared on .ct-cat rather than :root so they
 * cannot leak into anything the theme draws either.
 */

.ct-cat {
	--ct-cat-primary: #1689cf;
	--ct-cat-orange: #f68b2d;
	--ct-cat-red: #ef3136;
	--ct-cat-yellow: #f9c63a;
	--ct-cat-dark: #222222;
	--ct-cat-white: #ffffff;
	--ct-cat-gray: #f5f7fa;
	--ct-cat-border: #e0e0e0;
	--ct-cat-text: #444444;
	--ct-cat-muted: #666666;
	--ct-cat-shadow: 0 8px 30px rgba( 0, 0, 0, 0.12 );
	--ct-cat-shadow-sm: 0 2px 8px rgba( 0, 0, 0, 0.06 );

	/* One place the page width is decided, matching the tour page's container. */
	--ct-cat-max: 1200px;
	--ct-cat-pad: 24px;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var( --ct-cat-text );
}

.ct-cat *,
.ct-cat *::before,
.ct-cat *::after {
	box-sizing: border-box;
}

.ct-cat__wrap {
	max-width: var( --ct-cat-max );
	margin: 0 auto;
	padding: 0 var( --ct-cat-pad );
}

/* =====================================================================
 * The banner
 * ================================================================== */

/*
 * The gradient is declared on its own, and the photograph is layered over it only
 * when one exists. Written as a single `background` shorthand with the custom
 * property inside it, a category with no picture would resolve to
 * `url()` — an empty URL, which browsers treat as a request for the page itself.
 * Two declarations, the second overriding the first, avoids that entirely.
 */
.ct-cat__hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 520px;
	padding: 72px var( --ct-cat-pad );
	text-align: center;
	color: var( --ct-cat-white );
	overflow: hidden;
	background: linear-gradient( 135deg, #1689cf, #f68b2d );
	background-size: cover;
	background-position: center;
}

.ct-cat__hero.has-shot {
	background-image:
		linear-gradient( 135deg, rgba( 22, 137, 207, 0.75 ), rgba( 246, 139, 45, 0.55 ) ),
		var( --ct-cat-shot );
}

.ct-cat__hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.3 );
}

.ct-cat__herobody {
	position: relative;
	max-width: 800px;
}

.ct-cat__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 24px;
	width: fit-content;
	margin: 0 auto 20px;
	padding: 8px 20px;
	border-radius: 30px;
	background: rgba( 255, 255, 255, 0.15 );
	backdrop-filter: blur( 8px );
	font-size: 14px;
	font-weight: 500;
}

.ct-cat__title {
	margin: 0 0 8px;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp( 30px, 5vw, 46px );
	line-height: 1.15;
	color: var( --ct-cat-white );
	text-shadow: 0 2px 20px rgba( 0, 0, 0, 0.3 );
	text-wrap: balance;
}

/*
 * ONE GRID CELL, EVERY WORD IN IT, ONLY ONE OF THEM VISIBLE.
 *
 * A grid track is as wide as its widest item, so this span is permanently the
 * width of the longest word rather than of the one currently showing. That is
 * the whole fix: the heading never changes length, so it never rewraps and the
 * banner never changes height.
 *
 * The caret is a right border on the live word. The hidden copies carry the same
 * border in transparent, or the live one would be 3px wider than the track and
 * push the caret past its edge.
 */
.ct-cat__type {
	display: inline-grid;
	vertical-align: bottom;
}

/*
 * justify-self:start, NOT text-align. A grid item fills its track by default, so
 * the live word's box was as wide as the longest word however few characters it
 * held, and the caret — that box's right border — stayed parked at the far edge.
 * text-align cannot fix it: it moves the glyphs inside the box, not the box.
 *
 * Shrinking the items to their own content leaves the TRACK at the width of the
 * widest ghost, which is what stops the heading rewrapping. Only the boxes inside
 * it shrink, and the caret rides the end of the text again.
 */
.ct-cat__type > * {
	grid-area: 1 / 1;
	justify-self: start;
	border-right: 3px solid transparent;
}

.ct-cat__ghost {
	visibility: hidden;
}

.ct-cat__word {
	min-width: 1ch;
	border-right-color: var( --ct-cat-yellow );
	animation: ct-cat-blink 0.8s step-end infinite;
}

@keyframes ct-cat-blink {
	50% {
		border-color: transparent;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.ct-cat__word {
		animation: none;
		border-right-color: transparent;
	}
}

.ct-cat__sub {
	margin: 0 0 16px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: clamp( 17px, 2.4vw, 22px );
	color: var( --ct-cat-yellow );
}

.ct-cat__desc {
	max-width: 650px;
	margin: 0 auto 28px;
	font-size: 17px;
	line-height: 1.65;
	color: rgba( 255, 255, 255, 0.92 );
}

.ct-cat__desc p {
	margin: 0 0 12px;
}

.ct-cat__desc p:last-child {
	margin-bottom: 0;
}

.ct-cat__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-bottom: 24px;
}

.ct-cat__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	font-size: 13px;
	font-weight: 500;
	color: rgba( 255, 255, 255, 0.85 );
}

/* =====================================================================
 * Buttons
 * ================================================================== */

.ct-cat__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s ease;
}

.ct-cat__btn--go {
	background: var( --ct-cat-orange );
	color: var( --ct-cat-white );
}

.ct-cat__btn--go:hover,
.ct-cat__btn--go:focus {
	background: #e07a1c;
	color: var( --ct-cat-white );
}

/*
 * The ghost button appears in two places against two different backgrounds — over
 * the banner photograph, and inside a white card. Its colours therefore come from
 * currentColor in the banner and are set explicitly inside a card, below.
 */
.ct-cat__btn--ghost {
	background: transparent;
	border-color: rgba( 255, 255, 255, 0.7 );
	color: var( --ct-cat-white );
}

.ct-cat__btn--ghost:hover,
.ct-cat__btn--ghost:focus {
	background: rgba( 255, 255, 255, 0.16 );
	color: var( --ct-cat-white );
}

/* =====================================================================
 * The packages
 * ================================================================== */

.ct-cat__packages {
	padding: 56px 0 64px;
	background: var( --ct-cat-white );
}

.ct-cat__head {
	max-width: 640px;
	margin: 0 auto 32px;
	text-align: center;
}

/*
 * h3 TOO, because the enquiry heading is one. The size belongs to the
 * heading's place on the page, not to its tag - see the note in
 * templates/tour-category.php.
 */
.ct-cat__head h2,
.ct-cat__head h3 {
	margin: 0 0 8px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: clamp( 24px, 3.4vw, 32px );
	line-height: 1.25;
	color: var( --ct-cat-dark );
}

.ct-cat__head p {
	margin: 0;
	font-size: 15px;
	color: var( --ct-cat-muted );
}

/* ---- The duration tabs ---- */

/*
 * ONE LINE, ALWAYS. See the note on width:fit-content below — it is what lets
 * the row be centred when it fits and scrollable from the start when it does not,
 * without justify-content getting involved.
 */
.ct-cat__tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 32px;
	padding: 8px;
	border-radius: 14px;
	background: var( --ct-cat-gray );
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	/*
	 * Hidden by default, because on a phone the row is swiped and a scrollbar
	 * sitting under the pills just makes the grey box look broken. Given back on
	 * pointer devices below: a mouse user has no way to discover that a row
	 * scrolls if nothing on screen says so.
	 */
	scrollbar-width: none;
}

.ct-cat__tabs::-webkit-scrollbar {
	display: none;
}

@media ( hover: hover ) and ( pointer: fine ) {

	.ct-cat__tabs {
		scrollbar-width: thin;
	}

	.ct-cat__tabs::-webkit-scrollbar {
		display: block;
		height: 6px;
	}

	.ct-cat__tabs::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: rgba( 0, 0, 0, 0.18 );
	}
}

/* flex:0 0 auto — without it the tabs shrink to fit rather than overflowing,
   and nine of them become nine unreadable slivers instead of a scrolling row. */
.ct-cat__tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border: none;
	border-radius: 20px;
	background: transparent;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: var( --ct-cat-text );
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.25s ease;
}

.ct-cat__tab:hover:not( .is-on ) {
	background: var( --ct-cat-white );
	color: var( --ct-cat-dark );
}

.ct-cat__tab.is-on {
	background: var( --ct-cat-primary );
	color: var( --ct-cat-white );
}

.ct-cat__n {
	font-weight: 500;
	color: var( --ct-cat-muted );
}

.ct-cat__tab.is-on .ct-cat__n {
	color: rgba( 255, 255, 255, 0.85 );
}

/* ---- The grid ---- */

/*
 * auto-fill with a floor, not `repeat(3, 1fr)`. A route with two variants would
 * otherwise leave a third of the row empty, and one with four would strand a
 * single card on a second row. minmax lets the count follow the content.
 */
.ct-cat__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) );
	gap: 24px;
}

.ct-cat__card {
	display: flex;
	flex-direction: column;
	border: 1px solid var( --ct-cat-border );
	border-radius: 16px;
	background: var( --ct-cat-white );
	box-shadow: var( --ct-cat-shadow-sm );
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ct-cat__card:hover {
	transform: translateY( -8px );
	border-color: var( --ct-cat-primary );
	box-shadow: var( --ct-cat-shadow );
}

.ct-cat__card[hidden] {
	display: none;
}

.ct-cat__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 190px;
	overflow: hidden;
	background: linear-gradient( 135deg, #e8f1f8, #f7ede2 );
}

.ct-cat__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.ct-cat__card:hover .ct-cat__img {
	transform: scale( 1.04 );
}

.ct-cat__noshot {
	padding: 0 20px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	text-align: center;
	color: var( --ct-cat-primary );
}

.ct-cat__deal {
	position: absolute;
	top: 12px;
	left: 0;
	padding: 6px 14px 6px 12px;
	border-left: 4px solid var( --ct-cat-red );
	border-radius: 0 20px 20px 0;
	background: var( --ct-cat-dark );
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 11px;
	color: var( --ct-cat-white );
}

.ct-cat__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

.ct-cat__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.ct-cat__pill {
	padding: 5px 11px;
	border-radius: 8px;
	background: var( --ct-cat-gray );
	font-size: 12px;
	font-weight: 600;
	color: var( --ct-cat-dark );
}

.ct-cat__name {
	margin: 0 0 6px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
}

.ct-cat__name a {
	color: var( --ct-cat-dark );
	text-decoration: none;
}

.ct-cat__name a:hover,
.ct-cat__name a:focus {
	color: var( --ct-cat-primary );
}

.ct-cat__route {
	margin: 0 0 14px;
	font-size: 13px;
	color: var( --ct-cat-muted );
}

.ct-cat__incl {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-bottom: 14px;
	padding: 12px 0;
	border-top: 1px dashed var( --ct-cat-border );
	border-bottom: 1px dashed var( --ct-cat-border );
	font-size: 12px;
	color: var( --ct-cat-muted );
}

.ct-cat__incl span::before {
	content: '✓';
	margin-right: 5px;
	font-weight: 700;
	color: var( --ct-cat-primary );
}

/* =====================================================================
 * The main grid's foot: price, its label, and the button — all on one line
 *
 * The reference design puts "Starting price per adult" BESIDE the figure, not
 * under it, with the button to the right of both. Fitting all three in a
 * 368px card is arithmetic, so here it is: the price reads about 72px at
 * 22px Poppins, the label about 126px at 12px, the pill about 124px at 13px
 * with 22px of padding, and the two gaps 20px — 342px of content in 328px of
 * card. Fourteen pixels short, which is why the label kept dropping to its
 * own line.
 *
 * So the type comes down a step: the figure to 21px, the label to 11.5px, the
 * pill to 12.5px on 18px of padding, and the gaps to 6px and 10px. That is
 * about 319px, and it fits with room to spare in both this grid and the shelf
 * below.
 *
 * TWO RULES DO THE HOLDING, AND NEITHER IS A WIDTH.
 *
 * The foot is nowrap, so the button can never be pushed to its own line — the
 * price block absorbs every change in the card's width instead.
 *
 * The price row is nowrap too, so the label can never jump wholesale beneath
 * the figure. It is the flexible item (flex: 1 1 auto, min-width: 0), so on a
 * card narrower than any of this arithmetic assumed its own text wraps to a
 * second line while its first line stays beside the price. The number itself
 * never breaks.
 * ================================================================== */

.ct-cat__foot {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

.ct-cat__pricing {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ct-cat__wasrow,
.ct-cat__nowrow {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.ct-cat__was {
	font-size: 13px;
	font-weight: 600;
	color: var( --ct-cat-muted );
	text-decoration: line-through;
	white-space: nowrap;
}

.ct-cat__off {
	padding: 2px 7px;
	border-radius: 4px;
	background: var( --ct-cat-orange );
	color: var( --ct-cat-white );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
	/* Centred rather than on the row's baseline: inside a coloured box, a
	   baseline-aligned label drops its own box below the text beside it. */
	align-self: center;
	white-space: nowrap;
}

.ct-cat__now {
	flex: 0 0 auto;
	font-family: 'Poppins', sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.15;
	color: var( --ct-cat-dark );
	white-space: nowrap;
}

.ct-cat__now--ask {
	font-size: 16px;
	color: var( --ct-cat-muted );
}

.ct-cat__basis {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11.5px;
	line-height: 1.35;
	color: var( --ct-cat-muted );
}

/*
 * ONE BUTTON: THE THEME'S BLUE, THE THEME'S ORANGE ON HOVER.
 *
 * Both colours are the page's own tokens, so the pill follows the brand rather
 * than carrying two hardcoded hexes of its own.
 *
 * flex: 0 0 auto — it neither grows nor shrinks, so it is the width of its own
 * label and the price block beside it absorbs the rest. That is what keeps it
 * on the same line as the price.
 *
 * --go is reused rather than a new class invented: it is the card's primary
 * action, which is what that modifier has always meant.
 */
.ct-cat__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	margin: 0;
}

.ct-cat__actions .ct-cat__btn {
	flex: 0 0 auto;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 12.5px;
	white-space: nowrap;
}

.ct-cat__actions .ct-cat__btn--go {
	border-color: var( --ct-cat-primary );
	background: var( --ct-cat-primary );
	color: var( --ct-cat-white );
}

.ct-cat__actions .ct-cat__btn--go:hover,
.ct-cat__actions .ct-cat__btn--go:focus {
	border-color: var( --ct-cat-orange );
	background: var( --ct-cat-orange );
	color: var( --ct-cat-white );
}

.ct-cat__actions .ct-cat__btn--ghost {
	border-color: var( --ct-cat-primary );
	color: var( --ct-cat-primary );
}

.ct-cat__actions .ct-cat__btn--ghost:hover,
.ct-cat__actions .ct-cat__btn--ghost:focus {
	background: var( --ct-cat-primary );
	color: var( --ct-cat-white );
}

.ct-cat__btn--book {
	background: var( --ct-cat-orange );
	color: var( --ct-cat-white );
}

.ct-cat__btn--book:hover,
.ct-cat__btn--book:focus {
	background: #e07a1c;
	color: var( --ct-cat-white );
}

/* ---- The two empty states ---- */

.ct-cat__none,
.ct-cat__empty {
	margin: 0;
	padding: 48px var( --ct-cat-pad );
	text-align: center;
	color: var( --ct-cat-muted );
}

.ct-cat__none[hidden] {
	display: none;
}

.ct-cat__empty p {
	margin: 0 0 8px;
}

.ct-cat__empty strong {
	color: var( --ct-cat-dark );
}

/* =====================================================================
 * Narrow screens
 * ================================================================== */

@media ( max-width: 767px ) {

	.ct-cat {
		--ct-cat-pad: 16px;
	}

	.ct-cat__hero {
		min-height: 0;
		padding: 48px var( --ct-cat-pad );
	}

	.ct-cat__trust {
		gap: 8px 14px;
		padding: 8px 14px;
		font-size: 12.5px;
	}

	.ct-cat__desc {
		font-size: 15px;
	}

	.ct-cat__cta .ct-cat__btn {
		flex: 1 1 100%;
	}

	.ct-cat__packages {
		padding: 40px 0 48px;
	}

	/* The row scrolls at every width now, so nothing to restate here — only the
	   gap below it, which is tighter on a small screen. */
	.ct-cat__tabs {
		margin-bottom: 24px;
	}

	.ct-cat__grid {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * The pager
 *
 * Deliberately the same pill as the tabs above the grid. They are the two
 * ways of moving through one set of cards, and drawing them as two different
 * mechanisms would suggest they do different things.
 * ================================================================== */

.ct-cat__pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	margin: 32px auto 0;
	padding: 8px;
	border-radius: 14px;
	background: var( --ct-cat-gray );
}

.ct-cat__pager[hidden] {
	display: none;
}

.ct-cat__page {
	flex: 0 0 auto;
	min-width: 40px;
	padding: 9px 14px;
	border: none;
	border-radius: 20px;
	background: transparent;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: var( --ct-cat-text );
	cursor: pointer;
	transition: all 0.25s ease;
}

.ct-cat__page:hover:not( .is-on ) {
	background: var( --ct-cat-white );
	color: var( --ct-cat-dark );
}

.ct-cat__page.is-on {
	background: var( --ct-cat-primary );
	color: var( --ct-cat-white );
}

.ct-cat__page--step {
	padding: 9px 16px;
	color: var( --ct-cat-muted );
}

/* Faded and inert at the ends, but still occupying its place, so the numbers
   beside it never shift. */
.ct-cat__page:disabled {
	opacity: 0.38;
	cursor: default;
}

.ct-cat__page:disabled:hover {
	background: transparent;
	color: var( --ct-cat-muted );
}

@media ( max-width: 640px ) {

	.ct-cat__pager {
		margin-top: 24px;
	}

	.ct-cat__page {
		min-width: 36px;
		padding: 8px 11px;
	}
}

/* =====================================================================
 * Destinations
 *
 * Ported from the supplied layout. Its :root happens to carry the same
 * hexes this stylesheet already names, so every colour here is one of our
 * own tokens rather than a repeated literal.
 * ================================================================== */

.ct-cat__dests {
	padding: 48px 0;
	background: var( --ct-cat-gray );
}

/* auto-fit, so seven places fill the row and three do not each stretch to a
   third of the page. */

.ct-cat__dest {
	padding: 16px;
	border-radius: 12px;
	background: var( --ct-cat-white );
	box-shadow: var( --ct-cat-shadow-sm );
	text-align: center;
	cursor: default;
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__dest:hover {
	transform: translateY( -6px ) scale( 1.02 );
	box-shadow: var( --ct-cat-shadow );
}

.ct-cat__destshot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100px;
	margin-bottom: 12px;
	padding: 6px;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient( 135deg, var( --ct-cat-primary ), var( --ct-cat-orange ) );
	color: rgba( 255, 255, 255, 0.95 );
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 11px;
	text-align: center;
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__dest:hover .ct-cat__destshot {
	transform: scale( 1.05 );
}

/*
 * The three lines had no margins at all, so a 20px number, a 15px name and a
 * 12px description sat straight on top of one another and read as one block
 * of text at three sizes. A little air is what separates them into a label,
 * a place, and what there is to see.
 */
.ct-cat__destnum {
	margin-bottom: 4px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
	color: var( --ct-cat-primary );
	opacity: 0.3;
}

.ct-cat__destname {
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var( --ct-cat-dark );
}

.ct-cat__destdesc {
	font-size: 12px;
	line-height: 1.55;
	color: var( --ct-cat-muted );
}

/* Only the ones that link get the pointer and the hover colour. The rest keep
   the default cursor set above, which is what says they do nothing. */
a.ct-cat__dest {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

a.ct-cat__dest:hover .ct-cat__destname {
	color: var( --ct-cat-primary );
}

/* =====================================================================
 * Included / not included
 *
 * NOT .ct-cat__incl — that class is already on the little facet row inside
 * a package card, and reusing it here would style two unrelated things
 * together the first time either is changed.
 * ================================================================== */

.ct-cat__inc {
	padding: 48px 0;
	background: var( --ct-cat-white );
}

.ct-cat__incgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

/* One list on its own fills the row rather than sitting in half of it with
   a hole beside it. */
.ct-cat__incgrid > .ct-cat__inccard:only-child {
	grid-column: 1 / -1;
}

.ct-cat__inccard {
	padding: 28px 32px;
	border-radius: 16px;
	background: var( --ct-cat-gray );
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__inccard:hover {
	transform: translateY( -4px );
	box-shadow: var( --ct-cat-shadow );
}

.ct-cat__inchead {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.02em;
}

.ct-cat__inchead--yes {
	color: var( --ct-cat-primary );
}

.ct-cat__inchead--no {
	color: var( --ct-cat-red );
}

.ct-cat__inclist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-cat__inclist li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #e8ecf0;
	font-size: 15px;
	color: var( --ct-cat-text );
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__inclist li:last-child {
	border-bottom: none;
}

.ct-cat__inclist li:hover {
	transform: translateX( 4px );
}

.ct-cat__yes {
	color: var( --ct-cat-primary );
	font-weight: 700;
}

.ct-cat__no {
	color: var( --ct-cat-red );
	font-weight: 700;
}

@media ( max-width: 768px ) {

	.ct-cat__incgrid {
		grid-template-columns: 1fr;
	}

	.ct-cat__inccard {
		padding: 22px 20px;
	}
}

/* =====================================================================
 * Accommodation
 * ================================================================== */

.ct-cat__hotels {
	padding: 48px 0;
	background: var( --ct-cat-gray );
}

/* 150px rather than the 160px the destinations use, because a hotel card is
   shorter — no description under it — and packs one more to the row. */

.ct-cat__hotel {
	padding: 16px;
	border-radius: 12px;
	background: var( --ct-cat-white );
	box-shadow: var( --ct-cat-shadow-sm );
	text-align: center;
	cursor: default;
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__hotel:hover {
	transform: translateY( -6px ) scale( 1.03 );
	box-shadow: var( --ct-cat-shadow );
}

.ct-cat__hotelshot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
	margin-bottom: 12px;
	padding: 6px;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient( 135deg, var( --ct-cat-primary ), var( --ct-cat-orange ) );
	color: rgba( 255, 255, 255, 0.95 );
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 11px;
	text-align: center;
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__hotel:hover .ct-cat__hotelshot {
	transform: scale( 1.05 );
}

/*
 * Same problem the destination card had: no margins at all, so the class,
 * the hotel and the stars sat on top of one another and read as one lump of
 * text at three sizes.
 */
.ct-cat__hotelcity {
	margin-bottom: 4px;
	font-size: 12px;
	line-height: 1.3;
	color: var( --ct-cat-muted );
}

.ct-cat__hotelname {
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	color: var( --ct-cat-dark );
}

.ct-cat__hotelstars {
	color: var( --ct-cat-yellow );
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 1px;
}

/* The card is an anchor now, so it has to be told not to look like one. */
a.ct-cat__hotel {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

a.ct-cat__hotel:hover .ct-cat__hotelname {
	color: var( --ct-cat-primary );
}

.ct-cat__hotelimg {
	width: 100%;
	height: 80px;
	margin-bottom: 12px;
	border-radius: 8px;
	object-fit: cover;
	display: block;
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__hotel:hover .ct-cat__hotelimg {
	transform: scale( 1.05 );
}

/* Small and quiet: it is context for the link, not a second title. */
.ct-cat__hoteltour {
	margin-top: 8px;
	font-size: 11px;
	line-height: 1.4;
	color: var( --ct-cat-muted );
}

/* =====================================================================
 * The visual journey
 * ================================================================== */

.ct-cat__gal {
	padding: 48px 0;
	background: var( --ct-cat-white );
}

.ct-cat__galgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

/* One picture between all the tours: it takes the whole width rather than
   sitting in half of it with a hole beside it. */
.ct-cat__galgrid.is-alone {
	grid-template-columns: 1fr;
}

.ct-cat__galmain {
	position: relative;
	display: block;
	min-height: 400px;
	border-radius: 16px;
	overflow: hidden;
}

.ct-cat__galmain img,
.ct-cat__galitem img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__galmain:hover img {
	transform: scale( 1.05 );
}

.ct-cat__galitem:hover img {
	transform: scale( 1.08 );
}

.ct-cat__galover {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 30px;
	background: linear-gradient( transparent, rgba( 0, 0, 0, 0.7 ) );
	color: var( --ct-cat-white );
}

.ct-cat__galname {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: clamp( 18px, 2.4vw, 28px );
	line-height: 1.25;
	color: var( --ct-cat-white );
}

.ct-cat__galsay {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: rgba( 255, 255, 255, 0.8 );
}

.ct-cat__galside {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ct-cat__galitem {
	position: relative;
	display: block;
	min-height: 180px;
	border-radius: 12px;
	overflow: hidden;
}

.ct-cat__gallabel {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
	padding: 4px 12px;
	border-radius: 20px;
	background: rgba( 0, 0, 0, 0.6 );
	backdrop-filter: blur( 4px );
	color: var( --ct-cat-white );
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	/* A tour name is longer than a place name, so it is trimmed rather than
	   allowed to grow into a paragraph over the picture. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media ( max-width: 1024px ) {

	.ct-cat__galgrid {
		grid-template-columns: 1fr;
	}

	.ct-cat__galmain {
		min-height: 300px;
	}
}

@media ( max-width: 768px ) {

	.ct-cat__galmain {
		min-height: 220px;
	}

	.ct-cat__galover {
		padding: 18px;
	}
}

/* =====================================================================
 * The rails
 *
 * Destinations and hotels are one row each that scrolls sideways, not a
 * grid that wraps. An eighth destination lengthens the row rather than
 * starting a second line with one card on it and six empty columns.
 *
 * NO SCROLL SNAP, AND overscroll-behavior-x — both learned the hard way on
 * the Shorts row: snap pulls a short flick back and reads as a stuck rail,
 * and without contain, a swipe that reaches either end is taken by the
 * browser as a back gesture.
 *
 * touch-action is deliberately left alone. Setting it to pan-y is what
 * stopped the collage scrolling sideways at all.
 * ================================================================== */

.ct-cat__rail {
	display: flex;
	justify-content: flex-start;
	gap: var( --ct-rail-gap, 16px );
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Room for the lift on hover, which would otherwise be clipped by the
	   scroll box. */
	padding: 8px 2px;
	margin: -8px -2px;
}

.ct-cat__rail::-webkit-scrollbar {
	display: none;
}

/*
 * A WHOLE NUMBER OF CARDS, NEVER A SLICE OF ONE.
 *
 * The cards used to be a fixed 170px, which meant a 1150px row fitted six
 * and two thirds of them: the seventh sat half off the edge with the next
 * arrow on top of it, looking like a fault rather than an invitation to
 * scroll.
 *
 * Sizing them as a fraction of the row instead means the row always ends on
 * a card edge, and an arrow step — one card plus one gap — lands on the next
 * card edge. The count comes down with the width so the cards never get
 * narrower than they read at.
 */
.ct-cat__rail {
	--ct-rail-cols: 6;
}

.ct-cat__rail > * {
	flex: 0 0 calc( ( 100% - ( var( --ct-rail-cols ) - 1 ) * var( --ct-rail-gap, 16px ) ) / var( --ct-rail-cols ) );
}

@media ( max-width: 1199px ) {

	.ct-cat__rail {
		--ct-rail-cols: 5;
	}
}

@media ( max-width: 991px ) {

	.ct-cat__rail {
		--ct-rail-cols: 4;
	}
}

@media ( max-width: 767px ) {

	.ct-cat__rail {
		--ct-rail-cols: 3;
	}
}

.ct-cat__railwrap {
	position: relative;
}

.ct-cat__railbtn {
	display: none;
}

.ct-cat__railwrap.is-nav .ct-cat__railbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var( --ct-cat-white );
	box-shadow: var( --ct-cat-shadow );
	color: var( --ct-cat-dark );
	cursor: pointer;
	transition: all 0.25s ease;
}

.ct-cat__railwrap.is-nav .ct-cat__railbtn svg {
	width: 18px;
	height: 18px;
}

/*
 * THE ARROWS STAND OUTSIDE THE CARDS.
 *
 * They used to be pulled 10px past the edge, which still left most of each
 * button lying over the first and last card — it read as something broken
 * sitting on the artwork rather than as a control.
 *
 * Hanging them further out instead would push them past the page gutter and
 * off the screen on a window exactly as wide as the layout. So the wrapper
 * gives up the room itself: it takes a gutter of its own, the row inside
 * shrinks to match, and the buttons sit in that gutter touching nothing.
 *
 * Only when there is something to scroll. A row that fits keeps its full
 * width rather than reserving space for two buttons it will never draw.
 */
.ct-cat__railwrap.is-nav {
	padding: 0 46px;
}

.ct-cat__railwrap.is-nav .ct-cat__railbtn--prev {
	left: 0;
}

.ct-cat__railwrap.is-nav .ct-cat__railbtn--next {
	right: 0;
}

.ct-cat__railwrap.is-nav .ct-cat__railbtn:hover:not( :disabled ) {
	background: var( --ct-cat-primary );
	color: var( --ct-cat-white );
}

/* Faded but still there, so the row does not jump sideways at the ends. */
.ct-cat__railwrap.is-nav .ct-cat__railbtn:disabled {
	opacity: 0.35;
	cursor: default;
}

@media ( max-width: 600px ) {

	.ct-cat__rail {
		--ct-rail-cols: 2;
		--ct-rail-gap: 12px;
	}

	/* A narrower gutter and smaller buttons: 46px each side out of a 358px
	   row would leave the two cards too thin to read. */
	.ct-cat__railwrap.is-nav {
		padding: 0 34px;
	}

	.ct-cat__railwrap.is-nav .ct-cat__railbtn {
		width: 30px;
		height: 30px;
	}

	.ct-cat__railwrap.is-nav .ct-cat__railbtn svg {
		width: 15px;
		height: 15px;
	}
}

/* =====================================================================
 * Traveller reviews
 *
 * The widgets bring their own appearance — a feed plugin has its own
 * settings screen for that, and fighting it from here would make those
 * settings look broken. Only the band around them is ours.
 * ================================================================== */

.ct-cat__reviews {
	padding: 8px 0 32px;
	background: var( --ct-cat-gray );
}

/* =====================================================================
 * The questions
 * ================================================================== */

.ct-cat__faq {
	padding: 48px 0;
	background: var( --ct-cat-white );
}

/*
 * The moving photo strip. Padding only — the strip inside runs edge to edge by
 * its own means, so this section must not put a width or an overflow around it.
 * The heading above it keeps the page's usual centred header.
 */
.ct-cat__strip {
	padding: 48px 0;
}

.ct-cat__q {
	margin-bottom: 8px;
	border: 1px solid var( --ct-cat-border );
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__q:hover {
	border-color: var( --ct-cat-primary );
}

.ct-cat__q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	color: var( --ct-cat-dark );
	cursor: pointer;
	list-style: none;
}

/* Safari draws its own triangle unless both of these are said. */
.ct-cat__q summary::-webkit-details-marker {
	display: none;
}

.ct-cat__q summary::marker {
	content: '';
}

.ct-cat__q summary:hover {
	background: var( --ct-cat-gray );
}

/*
 * The heading inside each summary. No size, weight, family or margin of its
 * own — it inherits the summary's — and it becomes the flex row the summary
 * used to be, so the question still sits left and the plus still sits right.
 */
.ct-cat__qh {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-width: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

.ct-cat__qmark {
	flex: 0 0 auto;
	color: var( --ct-cat-orange );
	font-size: 20px;
	line-height: 1;
	transition: transform 0.25s ease;
}

.ct-cat__q[open] .ct-cat__qmark {
	transform: rotate( 45deg );
}

.ct-cat__a {
	padding: 0 20px 20px;
	font-size: 15px;
	line-height: 1.7;
	color: var( --ct-cat-text );
}

/* =====================================================================
 * The enquiry form, and the shelf under it
 *
 * The form brings its own appearance from the theme — it is the same one
 * the tour pages carry, and restyling it here would make the two drift
 * apart. Only the band around it is ours.
 * ================================================================== */

.ct-cat__form {
	padding: 48px 0;
	background: var( --ct-cat-gray );
}

.ct-cat__more {
	padding: 48px 0 56px;
	background: var( --ct-cat-white );
}


/*
 * A SHELF CARD IS A COLUMN, NOT A STACK OF BLOCKS.
 *
 * The cards sit side by side in a rail, so they are all as tall as the tallest
 * one — but until this became a flex column nothing inside them lined up. A
 * two-line tour name pushed its price a line below its neighbour's, a short
 * blurb left its button floating in the middle of the card, and the row read as
 * four unrelated cards rather than one shelf.
 *
 * Three things fix it and all three are needed together: the title reserves two
 * lines whether it uses them or not, the blurb is clamped so it can never take
 * more than three, and the foot is pushed down with an auto margin. The prices
 * then sit on one line across the row, and the buttons on another.
 *
 * LEFT-ALIGNED, following the reference design. The foot puts a price on the
 * left and a button on the right, and a centred title above a strip like that
 * reads as a mistake rather than as a choice — the alignment has to be the same
 * the whole way down the card.
 */
.ct-cat__morecard {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var( --ct-cat-border );
	border-radius: 16px;
	background: var( --ct-cat-white );
	box-shadow: var( --ct-cat-shadow-sm );
	text-align: left;
	color: inherit;
	text-decoration: none;
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__morecard:hover {
	transform: translateY( -6px );
	border-color: var( --ct-cat-primary );
	box-shadow: var( --ct-cat-shadow );
}

/*
 * A RATIO, NOT A HEIGHT. The card is 372px wide at three across and was 220px
 * at six; one fixed 150px picture is a letterbox at the first width and nearly
 * square at the second. A ratio keeps the same shape at every column count, and
 * it reserves the space before the photograph arrives.
 */
.ct-cat__moreimg,
.ct-cat__moreshot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	margin-bottom: 14px;
	padding: 6px;
	border-radius: 10px;
	object-fit: cover;
	transition: all 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ct-cat__moreshot {
	background: linear-gradient( 135deg, var( --ct-cat-primary ), var( --ct-cat-orange ) );
	color: rgba( 255, 255, 255, 0.95 );
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

.ct-cat__morecard:hover .ct-cat__moreimg {
	transform: scale( 1.03 );
}

/*
 * min-height as well as the clamp, not instead of it. The clamp stops a long
 * name at two lines; the min-height makes a one-line name occupy two anyway.
 * With only the first half the cards line up when their titles happen to be the
 * same length, which is not a rule, it is luck.
 */
.ct-cat__morecard h4 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
	margin: 0 0 8px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
	color: var( --ct-cat-dark );
}

.ct-cat__morecard p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var( --ct-cat-muted );
}

/* =====================================================================
 * The foot: price, its label, and the button — all on one line
 *
 * The same sizes and the same two nowrap rules as the main grid's foot above,
 * for the same reason. The note there has the arithmetic; this card is 373px
 * wide, five pixels roomier, so if it fits up there it fits here.
 *
 * margin-top: auto is what holds the feet level across the row — it takes up
 * whatever height the card has spare, so a card with a short blurb pushes its
 * foot down to meet its neighbour's rather than sitting halfway up.
 * ================================================================== */

.ct-cat__morefoot {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

.ct-cat__morepricing {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ct-cat__morewasrow,
.ct-cat__morenowrow {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.ct-cat__morewas {
	font-size: 13px;
	font-weight: 600;
	color: var( --ct-cat-muted );
	text-decoration: line-through;
	white-space: nowrap;
}

.ct-cat__moreoff {
	padding: 2px 7px;
	border-radius: 4px;
	background: var( --ct-cat-orange );
	color: var( --ct-cat-white );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
	align-self: center;
	white-space: nowrap;
}

.ct-cat__morenow {
	flex: 0 0 auto;
	font-family: 'Poppins', sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.15;
	color: var( --ct-cat-dark );
	white-space: nowrap;
}

.ct-cat__morebasis {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11.5px;
	line-height: 1.35;
	color: var( --ct-cat-muted );
}

/*
 * A SOLID PILL: the theme's blue, the theme's orange on hover — the same
 * pairing the main grid's button uses, so the two shelves on one page behave
 * identically under the cursor.
 *
 * flex: 0 0 auto keeps it the width of its own words while the price beside it
 * takes the slack, which is what holds the two on one line.
 */
.ct-cat__morego {
	flex: 0 0 auto;
	padding: 10px 18px;
	border: 1px solid var( --ct-cat-primary );
	border-radius: 999px;
	background: var( --ct-cat-primary );
	color: var( --ct-cat-white );
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: all 0.25s ease;
}

.ct-cat__morecard:hover .ct-cat__morego,
.ct-cat__morego:hover,
.ct-cat__morego:focus {
	border-color: var( --ct-cat-orange );
	background: var( --ct-cat-orange );
	color: var( --ct-cat-white );
}

/* =====================================================================
 * The narrowest phones: swipe, no arrows
 *
 * Two 34px gutters out of a 328px column leave the cards at 124px, and a
 * destination card that narrow stops being readable. On a touch screen the
 * row is swiped anyway — the arrows are a pointer affordance — so below
 * this width they are dropped and the room goes back to the cards, taking
 * them to 158px.
 *
 * 380px rather than 360px so it covers the 320, 360 and 375 phones, which
 * are all in the same squeeze. From 390px up the arrows stay.
 *
 * The padding has to go with them. is-nav is still added by the script —
 * it only says the row can scroll — so without this the gutter would be
 * held open for two buttons that are never drawn.
 * ================================================================== */

@media ( max-width: 380px ) {

	.ct-cat__railwrap.is-nav {
		padding: 0;
	}

	.ct-cat__railwrap.is-nav .ct-cat__railbtn {
		display: none;
	}
}

/*
 * THE SHELF RAIL COUNTS ITS OWN COLUMNS.
 *
 * The shared rail is built for the small cards — a destination is a name over a
 * tint, a hotel is a line of text — and six of those across 1150px is right. A
 * shelf card is a different animal: a photograph, a price, a blurb and a link,
 * and six of them left the cards too narrow to read.
 *
 * Three across, and everything past the third is scrolled to — which is what the
 * arrows and the swipe were already there for. Three on a 1150px row is a 372px
 * card, wide enough for the photograph to sell the tour, which is the whole
 * point of a shelf; and a row of three nearly always has a fourth tour behind
 * it, so the arrows are drawn rather than sitting on a row that cannot move.
 *
 * These come after the shared rules on purpose. Both selectors are one class, so
 * neither wins on specificity and source order decides; put them earlier and the
 * shared media queries would take the count back.
 */
.ct-cat__moregrid {
	--ct-rail-cols: 3;
}

/*
 * Two once the row is narrower than a tablet. Three cards on a 767px screen are
 * 240px each, and at that width the price and the blurb start breaking into a
 * column of short lines.
 */
@media ( max-width: 991px ) {

	.ct-cat__moregrid {
		--ct-rail-cols: 2;
	}
}

/*
 * A fraction, not a whole number. One card fills a 480px screen and the next is
 * a sliver at the edge — which is the only thing that says the row scrolls, now
 * that the arrows are hidden at this width.
 */
@media ( max-width: 480px ) {

	.ct-cat__moregrid {
		--ct-rail-cols: 1.15;
	}
}

/* =====================================================================
 * The shelf gets a wider container than the rest of the page
 *
 * WHY THIS SECTION AND NOT THE GRID ABOVE IT. The main grid's cards are 368px
 * wide and its foot needs 319px in the 328px they leave — nine pixels spare,
 * which is why the price, its label and the button sit on one line up there.
 *
 * The shelf is not a grid, it is a rail with an arrow either side, and those
 * arrows are paid for out of the same 1152px: `.ct-cat__railwrap.is-nav` holds
 * 46px open on each side, so 92px never reaches the cards. Three cards out of
 * the remaining 1060px are 343px wide, leaving 303px of content for a foot
 * that needs 319. Sixteen pixels short, which is exactly why "Starting price
 * per adult" broke onto a second line there and nowhere else.
 *
 * Two changes buy it back, and both are scoped to this section so nothing else
 * on the page moves:
 *
 *   a wider container, 1360px instead of 1200 — the rail runs edge to edge
 *   anyway and reads as a band rather than as a column of text, so it is the
 *   one section that can carry it; and
 *
 *   a 34px gutter instead of 46, which is still wider than the 38px buttons
 *   need to clear the cards.
 *
 * That gives 404px cards with 364px of content: 45px spare, and the cards are
 * visibly bigger, which is what was asked for.
 *
 * BELOW ABOUT 1280px THE LABEL STILL WRAPS TO TWO LINES, and that is left
 * alone deliberately. The main grid does the same thing at those widths, so
 * the two sections agree; the row is nowrap either way, so the button never
 * moves and the price never breaks — only the label uses a second line.
 * ================================================================== */

.ct-cat__more .ct-cat__wrap {
	max-width: 1360px;
}

.ct-cat__more .ct-cat__railwrap.is-nav {
	padding: 0 34px;
}

/*
 * Narrower screens: give the gutter back to the cards and shrink the buttons
 * to match, the same trade the two-column rails already make.
 */
@media ( max-width: 1280px ) {

	.ct-cat__more .ct-cat__railwrap.is-nav {
		padding: 0 20px;
	}

	.ct-cat__more .ct-cat__railwrap.is-nav .ct-cat__railbtn {
		width: 30px;
		height: 30px;
	}

	.ct-cat__more .ct-cat__railwrap.is-nav .ct-cat__railbtn svg {
		width: 15px;
		height: 15px;
	}
}