/* ==========================================================================
   Catalogue and single tour.
   Loaded only on WooCommerce screens.
   ========================================================================== */

/* --- Catalogue header ----------------------------------------------------- */

.shop-header {
	padding-block: var(--sp-8) var(--sp-6);
}

.shop-header__title {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: 900;
	color: var(--c-brand);
}

.shop-header__desc {
	max-width: 70ch;
	margin: 0;
	color: var(--c-ink-soft);
}

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-block: var(--sp-4);
	border-block: 1px solid var(--c-line);
	margin-block-end: var(--sp-8);
}

.shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
}

.shop-toolbar .woocommerce-ordering {
	/* WooCommerce gives this a bottom margin of its own, which sat under the
	   select and threw the bar off centre. */
	margin: 0;
}

/* The arrow is drawn here rather than by the browser. A native select's arrow
   sits in a gutter pinned to the inline-end border - the left one, this being a
   right-to-left page - and padding-inline-end insets only the text, not the
   arrow, so no amount of padding moves it off the edge. Turning the native
   appearance off and painting the chevron as a background is the only way to
   say where it goes; the padding then just reserves the room it sits in. */
.shop-toolbar .woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;

	padding: var(--sp-2) var(--sp-3);
	padding-inline-end: var(--sp-8);

	border: 1px solid var(--c-line);
	border-radius: var(--radius);

	background-color: var(--c-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23083258' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left var(--sp-4) center;
	background-size: 11px auto;

	font: inherit;
	font-size: var(--fs-sm);
}

/* --- Grid ----------------------------------------------------------------- */

ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--sp-8) var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce clearfixes the list with ::before/::after. In a grid those
   become grid items and eat a cell - which is why the first row held one
   fewer card. Their selector is 0,2,1, so match it. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

/* woocommerce-layout.css floats each item and sets a percentage width, which
   collapses grid children. Same specificity, loaded later, so this wins. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
/* .columns-N and the smallscreen rules both sit at 0,4,0 and would otherwise
   win; matching their attribute-selector shape ties the specificity, and
   shop.css loads last. Covers any column count. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}

/* woocommerce-rtl.css clearfixes ANY list inside .products:

     .woocommerce .products ul::before { content: " "; display: table }

   The card's chip, date and fact lists are flex rows sitting inside
   ul.products on an archive, so each of those pseudo-elements became a
   zero-width flex item that still consumed a gap - the chips and date pills
   sat one gap in from the reading edge on a category page while the identical
   card on the front page, where the rule does not apply, sat flush.

   That selector is 0,2,2. An override on the class alone is 0,2,1 and loses,
   so this matches their shape and adds the class. Same fight as the product
   grid above, one level down. */
.woocommerce .products ul.tour-rcard__chips::before,
.woocommerce .products ul.tour-rcard__chips::after,
.woocommerce .products ul.tour-rcard__dates::before,
.woocommerce .products ul.tour-rcard__dates::after,
.woocommerce .products ul.tour-rcard__facts::before,
.woocommerce .products ul.tour-rcard__facts::after {
	content: none;
	display: none;
}

/* --- Tour card ------------------------------------------------------------
   Modelled on tourschanteclerc.com: a pale panel, photograph on top, then
   title, facet chips, a dotted rule, and a foot that puts the practical
   details against the price. On hover the whole panel inverts to navy.

   One card everywhere it is listed: the front-page rows, the region
   archives, related tours. The listing is the same object in each place, so
   it should not change costume between them.
   ------------------------------------------------------------------------- */

.tour-rcard {
	position: relative;
	display: flex;
	background: var(--c-panel);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;

	/* The card is the thing its own type is measured against. The same card is
	   164px wide two-up on a phone, 292px in the front-page swipe track on that
	   same phone, and 300-420px in the catalogue on a desktop - so a viewport
	   breakpoint can only ever be right for one of the three. Declaring the card
	   a query container lets the title and chips below size themselves from the
	   width they actually have. Inline-axis only, so the card still grows as
	   tall as its contents. */
	container-type: inline-size;
}

/* The navy does not switch on: it rises. A pane anchored to the foot of the
   card scales up through it, which is what makes the reference's hover feel
   deliberate rather than like a state change.

   transform is used rather than height so the fill runs on the compositor -
   animating height would relayout every card in the line on every frame. */
.tour-rcard::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--c-brand);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.25, 1);
	pointer-events: none;
}

.tour-rcard:hover::before {
	transform: scaleY(1);
}

.tour-rcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgb(8 50 88 / 22%);
}

@media (prefers-reduced-motion: reduce) {
	.tour-rcard::before { transition-duration: 0.01ms; }
}

/* Above the rising fill, which is painted on the card behind it. */
.tour-rcard__link {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--sp-5);
	color: inherit;
	text-decoration: none;
}

/* --- Photograph ----------------------------------------------------------- */

.tour-rcard__media {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--c-bg-alt);
}

.tour-rcard__img {
	/* Pinned to the box rather than sized by it. WooCommerce ships a
	   height: auto on every product image at a specificity this cannot reach,
	   which went unnoticed while the frame was 16:10 and the photographs 3:2 -
	   the picture overflowed and was cropped. At 4:3 it is the other way round
	   and the card grew a white band under every photograph. inset holds it to
	   the frame whatever height wins. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.tour-rcard:hover .tour-rcard__img { transform: scale(1.05); }

/* The reference flags a card in the lower corner of the photograph rather
   than the upper one, where it would fight the subject. */
.tour-rcard__flag {
	position: absolute;
	inset-block-end: var(--sp-3);
	inset-inline-start: var(--sp-3);
	padding: 0.3em 0.9em;
	background: rgb(255 255 255 / 94%);
	color: var(--c-brand);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.tour-rcard__flag--out { background: rgb(8 50 88 / 88%); color: #fff; }
.tour-rcard__flag--low { background: var(--c-logo-orange); color: #fff; }

/* A tour with no bookable departure left - all sold out, or all past their
   cutoff - stays in the grid, greyed, so the catalogue keeps showing the
   campaign's full spread rather than thinning as tours fill or pass. The
   photograph loses its colour, the facts dim, and the "אזל" flag stays crisp
   above it all so the state reads at a glance. */
.tour-rcard--out .tour-rcard__img { filter: grayscale(100%) opacity(0.85); }
.tour-rcard--out .tour-rcard__flag--out { z-index: 2; }
.tour-rcard--out .tour-rcard__title,
.tour-rcard--out .tour-rcard__area,
.tour-rcard--out .tour-rcard__chips,
.tour-rcard--out .tour-rcard__when,
.tour-rcard--out .tour-rcard__dates { opacity: 0.5; }

/* --- Title and chips ------------------------------------------------------ */

.tour-rcard__title {
	margin: var(--sp-4) 0 0;
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 800;
	color: var(--c-brand);
	transition: color 0.25s ease;
	overflow: hidden;

	/* Two lines' worth of room reserved on every card, so a row's chips and
	   dates line up whatever the title length. The clamp lives on the inner
	   span: the h3 is a flex child of the card link, and a flex item blockifies
	   -webkit-box to flow-root, which quietly disables the clamp. The h3's own
	   line-height is zeroed so the line box it would wrap the span in adds no
	   half-leading - with it, a two-line title's box grew ~13px past a
	   one-line title's and dragged that card's row out of step. The text's
	   leading lives on the span instead.

	   2.5em is exactly the two lines the span clamps to at its 1.25 leading, so
	   the reservation matches what a full title occupies instead of guessing at
	   it - and being in em it follows the fluid font-size below rather than
	   needing a second set of numbers per breakpoint. */
	line-height: 0;
	min-height: 2.5em;
}

/* The clamp and the text's own leading, on the inner span where -webkit-box
   survives and no flex parent blockifies it. */
.tour-rcard__title-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.25;
}

/* The אזור, as a standfirst under the title: where the tour is, under what it
   is called. Quieter than the title and than the chips below it, so it reads as
   a caption on the name rather than as one more piece of metadata. Kept to one
   line - a tour in two areas names both, and a card is not the place for that
   to wrap the row out of step. */
/* The margin-bottom is on the standfirst rather than on the chips below it:
   the chips keep their own spacing on a card that has no אזור, and only a card
   that shows this line pays for the extra room under it. */
.tour-rcard__area {
	margin: 0.35rem 0 0.075rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--c-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.25s ease;
}

.tour-rcard:hover .tour-rcard__area { color: rgb(255 255 255 / 82%); }

/* --- Holding the card's own spacing against WooCommerce ---------------------
   Two of WooCommerce's stylesheet rules reach into this card, and both are
   written with a .woocommerce ancestor - so they fire on the shop and the
   region archives and not on the front page, where the same card is rendered
   without that class anywhere above it. Left alone they make one card into two
   designs:

     .woocommerce ul.products li.product h3      (0,3,3)
         padding: .5em 0; margin: 0; font-size: 1em
         - killed the title's margin, so the title sat against the photograph,
           and dropped it from --fs-lg to the inherited 1em (20px -> 17px).

     .woocommerce .products ul                   (0,2,1)
         margin: 0 0 1em
         - matches .tour-rcard__chips and .tour-rcard__dates, both of which are
           uls inside .products, so the chips lost their gap above the title and
           gained one below.

   Restated here at a specificity that clears both (0,4,2 with the .woocommerce
   ancestor, 0,3,2 without), in the twin-selector form the rest of this file
   uses, so the catalogue and the front-page rows render from one set of
   numbers. Change the spacing here, not in the base rules above, or the two
   contexts drift apart again.
   ------------------------------------------------------------------------- */

.woocommerce ul.products li.product .tour-rcard__title,
ul.products li.product .tour-rcard__title {
	padding: 0;
	margin: var(--sp-4) 0 0;

	/* Sized from the card, not the window: cqi is one per cent of the card's
	   inline size. 0.95rem on a 164px card, reaching the full --fs-lg by about
	   290px and holding there, with every width in between landing on the line
	   between the two rather than on one side of a breakpoint. */
	font-size: clamp(0.95rem, 0.56rem + 3.8cqi, var(--fs-lg));
}

/* WooCommerce sets its own margin and size on a <p> inside a product, so the
   standfirst is restated here for the same reason the title above it is: one
   card, one design, on the archives and on the front page alike. Sized from the
   card like the title, a step below it. */
.woocommerce ul.products li.product .tour-rcard__area,
ul.products li.product .tour-rcard__area {
	padding: 0;
	margin: 0.35rem 0 0.075rem;
	font-size: clamp(0.72rem, 0.55rem + 1.6cqi, var(--fs-sm));
}

.woocommerce ul.products li.product .tour-rcard__chips,
ul.products li.product .tour-rcard__chips {
	margin: var(--sp-3) 0 0;
}

.woocommerce ul.products li.product .tour-rcard__dates,
ul.products li.product .tour-rcard__dates {
	margin: var(--sp-3) 0 var(--sp-4);
}

.woocommerce ul.products li.product .tour-rcard__dates:last-child,
ul.products li.product .tour-rcard__dates:last-child {
	margin-block-end: 0;
}

/* A card narrow enough that the gaps above start to crowd what is left of the
   width. Keyed to the card rather than the screen, so the two-up grid gets this
   on a phone and on a narrow desktop window alike, while a 292px card in the
   swipe track keeps the full spacing on that same phone. Written with the twin
   selectors for the same reason as the block above: a container query changes
   nothing about specificity, and WooCommerce's rules are still in the cascade. */
@container (max-width: 240px) {
	.woocommerce ul.products li.product .tour-rcard__title,
	ul.products li.product .tour-rcard__title {
		margin-block: var(--sp-2) var(--sp-1);
	}

	.woocommerce ul.products li.product .tour-rcard__chips,
	ul.products li.product .tour-rcard__chips {
		margin-block-start: var(--sp-2);
		gap: 4px;
	}

	.woocommerce ul.products li.product .tour-rcard__when,
	ul.products li.product .tour-rcard__when {
		margin-block-start: var(--sp-2);
	}

	.tour-rcard__chips li { padding: 2px var(--sp-2); }
}

.tour-rcard:hover .tour-rcard__title { color: #fff; }

.tour-rcard__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
	padding: 0;
	list-style: none;
}

.tour-rcard__chips li {
	padding: 0.3em 0.8em;
	border: 1px solid var(--c-brand);
	color: var(--c-brand);

	/* Tracks the title: 0.7rem on the narrowest card, --fs-xs once the card can
	   carry it. Three chips have to sit on one or two lines at every width. */
	font-size: clamp(0.7rem, 0.55rem + 1.43cqi, var(--fs-xs));
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.tour-rcard:hover .tour-rcard__chips li {
	border-color: rgb(255 255 255 / 60%);
	color: #fff;
}
/* The language chips answer a different question from the ones beside them -
   who the tour is for, rather than what it is like - so they are filled rather
   than outlined, and the row reads as two groups without needing a heading for
   either. The tracking that suits Hebrew is wrong for "Français": those
   letterforms are already spaced and the extra opens the word up. */
.tour-rcard__chip--lang {
	border-color: transparent;
	background: var(--c-bg-alt);
	letter-spacing: 0;
}

.tour-rcard:hover .tour-rcard__chip--lang {
	border-color: transparent;
	background: rgb(255 255 255 / 16%);
	color: #fff;
}


/* --- Departure dates -------------------------------------------------------
   The ministry's own listing puts the running dates on the card as a block of
   rectangles. Same idea, rounder, and taken from the pa_departure terms - so
   a card shows the days the tour actually runs, not a generic "next date".
   ------------------------------------------------------------------------- */

.tour-rcard__dates {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-3) 0 var(--sp-4);
	padding: 0;
	list-style: none;
}

.tour-rcard__dates li {
	padding: 0.34em 0.8em;
	border: 1px solid rgb(8 50 88 / 14%);
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 70%);
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.tour-rcard:hover .tour-rcard__dates li {
	background: rgb(255 255 255 / 12%);
	border-color: rgb(255 255 255 / 32%);
	color: #fff;
}

/* With no price and no reviews the dates are the last thing in the card, so
   their trailing margin would stack on the card's own padding. */
.tour-rcard__dates:last-child { margin-block-end: 0; }

/* A day running short of seats - ten or fewer, its times added together. The
   campaign orange, quiet at rest and solid on the card's navy hover. */
.tour-rcard__dates li.is-low {
	background: #fff1e5;
	border-color: rgb(249 116 0 / 45%);
	color: #b45200;
	font-weight: 700;
}

.tour-rcard:hover .tour-rcard__dates li.is-low {
	background: var(--c-logo-orange);
	border-color: var(--c-logo-orange);
	color: #fff;
}

/* A day with nothing left to book: kept, struck through. */
.tour-rcard__dates li.is-full {
	text-decoration: line-through;
	opacity: 0.55;
}

/* The same seats on the phone's one line, where the chips are hidden. */
.tour-rcard__when-left { color: #b45200; font-weight: 700; }
.tour-rcard:hover .tour-rcard__when-left { color: #ffc999; }

/* The overflow count is a label, not another date. */
.tour-rcard__dates .tour-rcard__dates-more {
	background: none;
	border-color: transparent;
	font-weight: 700;
	color: var(--c-brand);
}

.tour-rcard:hover .tour-rcard__dates .tour-rcard__dates-more {
	background: none;
	border-color: transparent;
	color: rgb(255 255 255 / 80%);
}

/* --- Foot: details against price ------------------------------------------ */

.tour-rcard__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);

	/* margin-block-start: auto keeps the foot on the floor of the card, so
	   the dotted rules line up across a row of cards with unequal titles. */
	margin-block-start: auto;
	padding-block-start: var(--sp-4);
}

/* The dotted rule is painted as the foot's own background rather than drawn
   with a pseudo-element: the foot is a flex container, where an absolutely
   positioned child takes its static position from align-items and would sit
   on the floor of the card instead of at the top of it. */
.tour-rcard__foot {
	background-image: linear-gradient(to right, rgb(8 50 88 / 38%) 0 2px, transparent 2px 6px);
	background-size: 6px 1px;
	background-repeat: repeat-x;
	background-position: top left;
	transition: background-image 0.25s ease;
}

.tour-rcard:hover .tour-rcard__foot {
	background-image: linear-gradient(to right, rgb(255 255 255 / 55%) 0 2px, transparent 2px 6px);
}

.tour-rcard__facts {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: 1.5;
	transition: color 0.25s ease;
}

.tour-rcard__facts li {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
}

.tour-rcard__facts li::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

.tour-rcard:hover .tour-rcard__facts { color: rgb(255 255 255 / 82%); }

/* --- The last tile: see all ------------------------------------------------
   Airbnb closes a row with a tile rather than a link in the corner, so the
   way on to the full list is where the eye already is.
   ------------------------------------------------------------------------- */

.see-all {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	height: 100%;
	padding: var(--sp-6);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	background: var(--c-bg);
	color: var(--c-brand);
	text-align: center;
	text-decoration: none;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.see-all:hover {
	background: var(--c-brand);
	border-color: var(--c-brand);
	color: #fff;
	transform: translateY(-3px);
}

.see-all__stack {
	position: relative;
	display: block;
	width: 200px;
	height: 152px;
}

.see-all__shot {
	position: absolute;
	/* Physical left, not inset-inline-start: the fan is a decorative pile with
	   no reading order, and translate(-50%) is physical too - pairing it with a
	   logical inset anchors the shots by their right edge in RTL and shunts the
	   whole stack off to one side. */
	top: 50%;
	left: 50%;
	width: 106px;
	height: 106px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: 0 4px 16px rgb(8 50 88 / 20%);
	background: #fff;
	transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.see-all__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fanned like a hand of photographs. The order is by document position, so
   the middle one sits on top. */
.see-all__shot:nth-child(1) { transform: translate(-50%, -50%) rotate(-8deg) translateX(-44px); }
.see-all__shot:nth-child(2) { transform: translate(-50%, -50%) rotate(3deg); z-index: 2; }
.see-all__shot:nth-child(3) { transform: translate(-50%, -50%) rotate(9deg) translateX(44px); }

.see-all:hover .see-all__shot:nth-child(1) { transform: translate(-50%, -50%) rotate(-13deg) translateX(-54px); }
.see-all:hover .see-all__shot:nth-child(3) { transform: translate(-50%, -50%) rotate(14deg) translateX(54px); }

/* A region with fewer than three tours still gets a balanced pile: the
   three-photograph offsets above hang a pair off one side. */
.see-all__shot:first-child:nth-last-child(2) { transform: translate(-50%, -50%) rotate(-7deg) translateX(-30px); }
.see-all__shot:first-child:nth-last-child(2) ~ .see-all__shot { transform: translate(-50%, -50%) rotate(6deg) translateX(30px); }

.see-all:hover .see-all__shot:first-child:nth-last-child(2) { transform: translate(-50%, -50%) rotate(-11deg) translateX(-40px); }
.see-all:hover .see-all__shot:first-child:nth-last-child(2) ~ .see-all__shot { transform: translate(-50%, -50%) rotate(10deg) translateX(40px); }

.see-all__shot:only-child { transform: translate(-50%, -50%) rotate(-3deg); }
.see-all:hover .see-all__shot:only-child { transform: translate(-50%, -50%) rotate(-6deg); }

.see-all__label {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 800;
}

.see-all__count {
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
	transition: color 0.25s ease;
}

.see-all:hover .see-all__count { color: rgb(255 255 255 / 78%); }

/* ==========================================================================
   Single tour
   ========================================================================== */

.tour {
	padding-block: var(--sp-6) var(--sp-12);
}

.tour__head {
	margin-block-end: var(--sp-6);
}

.tour__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	font-weight: 900;
	line-height: 1.15;
	color: var(--c-brand);
}

.tour__head-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
}

.tour__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--fs-sm);
}

.tour__stars { color: #f5a623; }
.tour__review-count { color: var(--c-ink-soft); }

/* The cream these were is a shade off the page ground and read as nothing at
   all once they moved under the gallery, away from the heading that had been
   framing them. The teal is the logo's other colour - visible against a warm
   off-white in a way navy on navy-ish never is, and not another navy button on
   a page that already has several. */
.tour__chip {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: var(--radius-pill);
	background: rgb(0 170 203 / 14%);
	border: 1.5px solid var(--c-logo-teal);
	color: var(--c-brand);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-decoration: none;
}

.tour__chip--link:hover {
	background: var(--c-logo-teal);
	border-color: var(--c-logo-teal);
	color: #fff;
}

/* --- Gallery: Viator-style mosaic ----------------------------------------
   Lead image spans both rows; the rest tile beside it. In RTL the lead sits
   on the right, which grid handles on its own.

   SPECIFICITY NOTE: the theme renders <main id="content">, which switches on
   WooCommerce's ID-scoped rules such as
     .woocommerce #content div.product div.images { width: 48%; float: right }
   at (1,3,3). No class-only selector can beat an ID, so every structural rule
   below is written in the same #content-scoped shape, with a plain fallback
   for contexts where that wrapper is absent.
   ------------------------------------------------------------------------- */

.tour__gallery {
	margin-block-end: var(--sp-8);
}

.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery,
.woocommerce div.product div.tour__gallery .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin: 0;
	opacity: 1;
}

.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.tour__gallery .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	gap: 8px;
	margin: 0;
	/* 20/7 rather than 16/7: a fifth less height. The mosaic is a taste of the
	   tour, not the tour - it should not push the price and the dates below the
	   fold on a laptop. */
	padding: 0;
	aspect-ratio: 20 / 7;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery__image,
.woocommerce div.product div.tour__gallery .woocommerce-product-gallery__image {
	position: relative;
	display: block;
	width: auto;
	margin: 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--c-bg-alt);
}

.woocommerce #content div.product div.tour__gallery .tour-mosaic__tile--lead,
.woocommerce div.product div.tour__gallery .tour-mosaic__tile--lead {
	grid-row: span 2;
}

/* Beats .woocommerce #content div.product div.images ...__image:nth-child(n+2). */
.woocommerce #content div.product div.tour__gallery .tour-mosaic__tile--hidden,
.woocommerce div.product div.tour__gallery .tour-mosaic__tile--hidden {
	display: none;
}

.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery__image a,
.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery__image img,
.woocommerce div.product div.tour__gallery .woocommerce-product-gallery__image a,
.woocommerce div.product div.tour__gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.45s ease;
}

.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery__image:hover img,
.woocommerce div.product div.tour__gallery .woocommerce-product-gallery__image:hover img {
	transform: scale(1.05);
}

/* "+N" on the last visible tile. */
.tour-mosaic__more {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	background: rgb(8 50 88 / 55%);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 900;
	pointer-events: none;
}

/* --- Few images ----------------------------------------------------------
   Most tours will carry one or two photographs, so each count gets a layout
   that fills the frame with no empty cells and no stretched thumbnails.

   These must carry the same #content-scoped prefix as the base rules above,
   otherwise the generic wrapper rule wins and a two-image tour renders as a
   large lead beside one small tile and a hole.
   ------------------------------------------------------------------------- */

/* One image: a single wide hero. */
.woocommerce #content div.product div.tour__gallery .tour-mosaic--count-1 .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.tour__gallery .tour-mosaic--count-1 .woocommerce-product-gallery__wrapper {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	aspect-ratio: 20 / 7;
}

.woocommerce #content div.product div.tour__gallery .tour-mosaic--count-1 .tour-mosaic__tile--lead,
.woocommerce div.product div.tour__gallery .tour-mosaic--count-1 .tour-mosaic__tile--lead {
	grid-row: span 1;
	grid-column: span 1;
}

/* Two images: a 2:1 split, both full height. */
.woocommerce #content div.product div.tour__gallery .tour-mosaic--count-2 .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.tour__gallery .tour-mosaic--count-2 .woocommerce-product-gallery__wrapper {
	grid-template-columns: 1.7fr 1fr;
	grid-template-rows: 1fr;
	aspect-ratio: 20 / 7;
}

.woocommerce #content div.product div.tour__gallery .tour-mosaic--count-2 .tour-mosaic__tile--lead,
.woocommerce div.product div.tour__gallery .tour-mosaic--count-2 .tour-mosaic__tile--lead {
	grid-row: span 1;
}

/* Three: lead plus two stacked beside it. */
.woocommerce #content div.product div.tour__gallery .tour-mosaic--count-3 .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.tour__gallery .tour-mosaic--count-3 .woocommerce-product-gallery__wrapper {
	grid-template-columns: 1.7fr 1fr;
	grid-template-rows: repeat(2, 1fr);
}

/* Four: lead plus three, the last spanning the spare cell. */
.woocommerce #content div.product div.tour__gallery .tour-mosaic--count-4 .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.tour__gallery .tour-mosaic--count-4 .woocommerce-product-gallery__wrapper {
	grid-template-columns: 2fr 1fr 1fr;
}

.woocommerce #content div.product div.tour__gallery .tour-mosaic--count-4 .woocommerce-product-gallery__image:last-of-type,
.woocommerce div.product div.tour__gallery .tour-mosaic--count-4 .woocommerce-product-gallery__image:last-of-type {
	grid-column: span 2;
}

/* No image at all: keep the frame, do not stretch the placeholder. */
.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery__image--placeholder img,
.woocommerce div.product div.tour__gallery .woocommerce-product-gallery__image--placeholder img {
	object-fit: contain;
	padding: var(--sp-8);
	opacity: 0.4;
}

@media (max-width: 700px) {
	.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery__wrapper,
	.woocommerce div.product div.tour__gallery .woocommerce-product-gallery__wrapper {
		grid-template-columns: 1fr 1fr;
		aspect-ratio: 5 / 3;
	}
	.tour-mosaic__tile--lead {
		grid-column: span 2;
		grid-row: span 1;
	}
	.tour-mosaic--count-1 .tour-mosaic__tile--lead,
	.tour-mosaic--count-2 .tour-mosaic__tile--lead { grid-column: span 2; }
}

/* --- Two-column body ------------------------------------------------------ */


/* --- What follows the tour ------------------------------------------------
   Related tours sit below both columns, across the full rail. The break has
   to be unmistakable: the eye has been reading one tour for a whole page and
   needs to be told that what comes next is a different subject, not another
   section of the same one.
   ------------------------------------------------------------------------- */

.tour__after {
	margin-block-start: clamp(var(--sp-12), 8vw, 5.5rem);
	padding-block-start: clamp(var(--sp-8), 5vw, var(--sp-16));
	border-block-start: 1px solid var(--c-line);
}

.tour__after:empty { display: none; }

.tour .related,
.tour .upsells {
	margin: 0;
}

.tour .related + .related,
.tour .upsells + .related {
	margin-block-start: clamp(var(--sp-12), 6vw, 4rem);
}

/* The heading gets the same weight as a section title, and room beneath it -
   WooCommerce ships it tight against the grid. */
.tour .related > h2,
.tour .upsells > h2 {
	margin: 0 0 var(--sp-8);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 800;
	color: var(--c-brand);
}
.tour__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--sp-12);
	align-items: start;
}

.tour__section + .tour__section {
	margin-block-start: var(--sp-8);
	padding-block-start: var(--sp-8);
	border-block-start: 1px solid var(--c-line);
}

.tour__section-title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-xl);
	font-weight: 800;
	color: var(--c-brand);
}

/* The page rail is 1680px, which leaves the description column over 1200px
   wide - far past a readable line. The column keeps its width for the rules
   and the fact cards; only the running text is held to a measure. */
.tour__prose { max-width: 72ch; }

.tour__prose p:last-child { margin-block-end: 0; }

.tour__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-4);
	margin: 0;
}

.tour__fact {
	padding: var(--sp-4);
	background: var(--c-bg-alt);
	border-radius: var(--radius);
}

.tour__fact dt {
	margin: 0 0 var(--sp-1);
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
}

.tour__fact dd {
	margin: 0;
	font-weight: 700;
}

.tour__list {
	margin: 0;
	padding-inline-start: 1.2em;
	display: grid;
	gap: var(--sp-2);
}

.tour__meeting { margin: 0; }

/* --- Meeting point map ------------------------------------------------------
   Modelled on Airbnb's "Where you'll be": the address, then a wide map across
   the column, then a link out. No frame, no shadow, no controls of our own -
   the map is a picture of a street corner, not a feature.
   ------------------------------------------------------------------------- */

.tour__map {
	margin-block-start: var(--sp-6);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--c-panel);

	/* Wide and low, the way a locator map is read: enough of the surrounding
	   streets to place it, not so tall that it takes over the section. */
	aspect-ratio: 21 / 9;
}

.tour__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Below about a tablet the wide ratio leaves a letterbox too thin to read a
   street name in, so it squares up. */
@media (max-width: 700px) {
	.tour__map { aspect-ratio: 4 / 3; }
}

.tour__map-cta {
	margin: var(--sp-4) 0 0;
}

.tour__map-cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--c-brand);
	font-weight: 700;
	text-decoration: none;
	border-block-end: 1px solid rgb(8 50 88 / 25%);
	padding-block-end: 2px;
	transition: border-color 0.18s ease, gap 0.18s ease;
}

.tour__map-cta a:hover {
	border-block-end-color: var(--c-brand);
	gap: 0.75em;
}

.tour__map-pin {
	color: var(--c-logo-teal);
	font-size: 0.7em;
}

.tour__map-arrow {
	font-size: 0.85em;
}

/* The short description, set as a standfirst under the title. */
.tour__lead {
	max-width: 68ch;
	margin: 0 0 var(--sp-4);
	color: var(--c-ink-soft);
	font-size: clamp(var(--fs-base), 0.95rem + 0.3vw, var(--fs-lg));
	line-height: 1.6;
}

.tour__lead p { margin: 0 0 var(--sp-3); }
.tour__lead p:last-child { margin-block-end: 0; }

/* Numbered stops. The counter is drawn rather than left to the list marker so
   it can carry the brand colour and sit on the reading edge at any size. */
.tour__stops {
	counter-reset: tm-stop;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sp-4);
	max-width: 68ch;
}

.tour__stops li {
	counter-increment: tm-stop;
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
}

.tour__stops li::before {
	content: counter(tm-stop);
	flex: 0 0 1.85em;
	height: 1.85em;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--c-panel);
	color: var(--c-brand);
	font-size: var(--fs-sm);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* What is and is not included, side by side where there is room. */
.tour__section--split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-8);
}

.tour__list--yes,
.tour__list--no {
	padding-inline-start: 0;
	list-style: none;
}

.tour__list--yes li,
.tour__list--no li {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
}

/* A tick and a dash rather than two bullet lists: the difference between the
   two columns should be legible without reading the headings. */
.tour__list--yes li::before {
	content: "\2713";
	color: var(--c-logo-aqua);
	font-weight: 800;
}

.tour__list--no li::before {
	content: "\2013";
	color: var(--c-ink-soft);
	font-weight: 800;
}

/* --- Booking panel -------------------------------------------------------- */

/* The column must span the full row for sticky to have anywhere to travel.
   Under align-items:start it shrank to its content, so the panel scrolled
   away the moment the page passed its own height. */
.tour__booking {
	position: relative;
	align-self: stretch;
	height: 100%;
}

.booking-box {
	position: sticky;

	/* Below the header, not under it. The site header is sticky and about 76px
	   tall, so a box that stops 16px from the top of the window stops 60px
	   inside it - and the first thing to go behind the header is the price.
	   --nav-top is the header's measured height, which the page sets on itself
	   and the search and the filter bar already stick to. */
	inset-block-start: calc(var(--nav-top, 76px) + var(--sp-4));
	padding: var(--sp-6);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	box-shadow: 0 4px 24px rgb(8 50 88 / 8%);
}

.booking-box__price {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	padding-block-end: var(--sp-4);
	margin-block-end: var(--sp-4);
	border-block-end: 1px solid var(--c-line);
	font-size: var(--fs-2xl);
	font-weight: 900;
	color: var(--c-ink);
}

.booking-box__from {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-ink-soft);
}

/* --- The chosen departure's price ------------------------------------------
   WooCommerce injects this once a date is picked. Its own stylesheet paints
   it #77a464 at body size, so the one number the panel exists to show arrived
   as small olive text below the date field - the price above it, which is the
   range across all departures, was three times larger than the actual price
   being paid.
   ------------------------------------------------------------------------- */

.booking-box .woocommerce-variation-price {
	margin-block: var(--sp-3) var(--sp-6);
}

.booking-box .woocommerce-variation-price .price,
.booking-box .woocommerce-variation-price .woocommerce-Price-amount,
.booking-box .woocommerce-variation-price .woocommerce-Price-currencySymbol {
	color: var(--c-brand);
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 900;
	line-height: 1.1;
}

/* A sale price: the old one stays, quietly, beside the new one. */
.booking-box .woocommerce-variation-price del {
	margin-inline-end: 0.4em;
	opacity: 0.5;
}

.booking-box .woocommerce-variation-price del .woocommerce-Price-amount {
	font-size: var(--fs-lg);
	font-weight: 600;
}

.booking-box .woocommerce-variation-price ins { text-decoration: none; }

/* The wrapper span WooCommerce puts round the amount keeps its own colour
   from woocommerce.css, which shows through on a sale price where the del and
   ins carry text of their own. Matching that stylesheet's shape rather than
   reaching for !important. */
.woocommerce div.product .booking-box .woocommerce-variation-price .price,
.woocommerce div.product .booking-box .woocommerce-variation-price span.price {
	color: var(--c-brand);
	font-size: var(--fs-2xl);
	line-height: 1.1;
}

.booking-box .quantity {
	display: block;
	margin-block-end: var(--sp-3);
}

.booking-box .quantity input,
.booking-box select {
	width: 100%;
	padding: var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	font: inherit;
	background: var(--c-bg);
}

/* WooCommerce styles the primary button through
     .woocommerce:where(...) button.button.alt  ->  (0,3,1)
   which was painting it #7f54b3. :where() adds nothing, but the rest still
   outranked a two-class selector. Naming .button.alt ties it at (0,4,1). */
.booking-box button.single_add_to_cart_button.button.alt,
.booking-box .single_add_to_cart_button {
	width: 100%;
	padding: var(--sp-3) var(--sp-6);
	border: 0;
	border-radius: var(--radius);
	background: var(--c-accent);
	color: #fff;
	font: inherit;
	font-size: var(--fs-lg);
	font-weight: 800;
	cursor: pointer;
	transition: background 0.18s ease;
}

.booking-box button.single_add_to_cart_button.button.alt:hover,
.booking-box .single_add_to_cart_button:hover {
	background: #2145d6;
}

.booking-box__note {
	margin: var(--sp-4) 0 0;
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.booking-box .variations th,
.booking-box .variations td {
	display: block;
	width: 100%;
	padding: 0;
	text-align: start;
}

.booking-box .variations label {
	display: block;
	margin-block-end: var(--sp-2);
	font-weight: 700;
	font-size: var(--fs-sm);
}

@media (max-width: 900px) {
	.tour__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-8);
	}
	.booking-box { position: static; }
}

/* A product with no image gets WooCommerce's 1:1 placeholder. Cropping that
   into a 16:7 box zooms it absurdly, so contain it instead. Real photos are
   unaffected. */
.tour__gallery .woocommerce-product-gallery--without-images .woocommerce-product-gallery__wrapper img {
	object-fit: contain;
	padding: var(--sp-8);
	opacity: 0.45;
}

/* --- Availability --------------------------------------------------------
   Shown only when places are running out, so it should read as a nudge
   rather than a data field. Amber, not red: this is scarcity, not an error.
   ------------------------------------------------------------------------- */

.booking-box .woocommerce-variation-availability {
	margin: 0;
	padding: 0;
}

.booking-box .woocommerce-variation-availability p,
.booking-box p.stock {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0 0 var(--sp-3);
	padding: 0.3rem 0.75rem;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.5;
}

/* Running low. */
.booking-box p.stock.tm-stock--low {
	background: #fff4e2;
	color: #8a4b04;
}

.booking-box p.stock.tm-stock--low::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e08a1e;
	/* Draws the eye without animating anything the reader cannot dismiss. */
	box-shadow: 0 0 0 3px rgb(224 138 30 / 22%);
}

/* Sold out. */
.booking-box p.stock.tm-stock--none,
.booking-box p.stock.out-of-stock {
	background: #f1f2f4;
	color: #5b6472;
}

/* Plenty left: the filter empties the text, so collapse the box entirely. */
.booking-box p.stock.tm-stock--ample {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.booking-box p.stock.tm-stock--low::before {
		animation: tm-pulse 2.4s ease-in-out infinite;
	}
}

@keyframes tm-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgb(224 138 30 / 22%); }
	50%      { box-shadow: 0 0 0 5px rgb(224 138 30 / 10%); }
}

/* --- Quantity stepper -----------------------------------------------------
   One rounded field: the prompt sits at the reading edge, the controls at
   the far edge, with circular buttons either side of the number.
   ------------------------------------------------------------------------- */

/* form.cart .quantity carries WooCommerce margin and float at (0,3,3);
   a three-class selector loses to it, which left no gap before the CTA. */
.woocommerce #content div.product form.cart .booking-box .quantity.qty-stepper,
.woocommerce div.product form.cart .quantity.qty-stepper,
.woocommerce #content div.product form.cart .quantity.qty-stepper,
.booking-box .quantity.qty-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	width: 100%;
	/* Breathing room before the call to action. */
	float: none;
	margin: 0 0 var(--sp-6);
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--c-brand);
	border-radius: var(--radius-pill);
	background: var(--c-bg);
}

.qty-stepper__label {
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-ink);
	white-space: nowrap;
}

.qty-stepper__controls {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 0;
	background: none;
}

.qty-stepper__btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--c-brand);
	border-radius: 50%;
	background: transparent;
	color: var(--c-brand);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	direction: ltr;
}

.qty-stepper__btn:hover:not(:disabled) {
	background: var(--c-brand);
	color: #fff;
}

.qty-stepper__btn:active:not(:disabled) {
	transform: scale(0.94);
}

/* At the limits the button stops responding but keeps its full colour -
   fading it made the control look broken rather than bounded. */
.qty-stepper__btn:disabled {
	border-color: var(--c-brand);
	color: var(--c-brand);
	cursor: default;
}

.qty-stepper__btn:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* The number sits between the buttons with no chrome of its own. */
.booking-box input.qty-stepper__input,
.qty-stepper__input {
	width: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--c-ink);
	font: inherit;
	font-size: var(--fs-base);
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.qty-stepper__input:focus {
	outline: none;
}

/* --- Notices --------------------------------------------------------------
   WooCommerce's default is a grey bar with a coloured top rule. Replaced with
   a card: status mark, message, action - reading order preserved in RTL.
   ------------------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-notices-wrapper {
	margin-block: var(--sp-6);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-4);
	margin: 0 0 var(--sp-6);
	padding: var(--sp-4) var(--sp-6);
	border: 1px solid var(--c-line);
	border-block-start: 0;
	border-radius: var(--radius-md);
	background: var(--c-bg);
	box-shadow: 0 4px 20px rgb(8 50 88 / 7%);
	color: var(--c-ink);
	font-size: var(--fs-base);
	line-height: 1.5;
	list-style: none;
}

/* A coloured edge on the reading side, rather than a rule across the top. */
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message {
	border-inline-start: 4px solid #1f9d55;
}

.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info {
	border-inline-start: 4px solid var(--c-accent);
}

.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
	border-inline-start: 4px solid #d7263d;
}

/* Replace the default ::before glyph with a filled status mark. */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-error::before {
	position: static;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin: 0;
	border-radius: 50%;
	color: #fff;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
}

.woocommerce .woocommerce-message::before,
.woocommerce-page .woocommerce-message::before {
	content: "\2713";
	background: #1f9d55;
}

.woocommerce .woocommerce-info::before,
.woocommerce-page .woocommerce-info::before {
	content: "i";
	background: var(--c-accent);
	font-style: normal;
}

.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-error::before {
	content: "!";
	background: #d7263d;
}

/* The action follows the sentence it belongs to.
   It used to be pushed to the far edge of the bar, which on a wide screen
   left most of a metre between "it worked" and what to do about it: the eye
   reads the confirmation on one side and never travels to find the button. */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button,
.woocommerce-page .woocommerce-message .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-error .button {
	order: 3;
	padding: 0.6rem 1.4rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-brand);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.16s ease;
}

.woocommerce .woocommerce-message .button:hover,
.woocommerce-page .woocommerce-message .button:hover {
	background: var(--c-brand-dark);
	color: #fff;
}

@media (max-width: 600px) {
	.woocommerce .woocommerce-message .button,
	.woocommerce-page .woocommerce-message .button {
		order: 3;
		width: 100%;
		text-align: center;
	}
}

/* Standing perk under the booking button - campaign-wide, not per tour. */
.booking-box__perk {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: var(--sp-4) 0 0;
	padding-block-start: var(--sp-4);
	border-block-start: 1px solid var(--c-line);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.booking-box__perk-mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #e7f5ec;
	color: #1f9d55;
	font-size: 0.72rem;
	font-weight: 700;
}

/* --- Lightbox trigger -----------------------------------------------------
   WooCommerce injects this anchor from JS. The icon is supplied as a mask
   rather than a background image so its colour comes from the stylesheet and
   can react to hover.
   ------------------------------------------------------------------------- */

.woocommerce div.product .tour__gallery .woocommerce-product-gallery__trigger,
.woocommerce #content div.product .tour__gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	inset-block-start: var(--sp-4);
	inset-inline-start: var(--sp-4);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 92%);
	box-shadow: 0 2px 10px rgb(8 50 88 / 22%);
	font-size: 0;
	text-indent: 0;
	text-decoration: none;
	transition: background 0.16s ease, transform 0.16s ease;
}

/* background-color, not background: the shorthand resets background-image
   and wiped the icon on hover. */
.woocommerce div.product .tour__gallery .woocommerce-product-gallery__trigger:hover,
.woocommerce #content div.product .tour__gallery .woocommerce-product-gallery__trigger:hover {
	background-color: #fff;
	transform: scale(1.06);
}

/* Suppress WooCommerce's own glyph. */
.woocommerce div.product .tour__gallery .woocommerce-product-gallery__trigger::before,
.woocommerce div.product .tour__gallery .woocommerce-product-gallery__trigger::after,
.woocommerce #content div.product .tour__gallery .woocommerce-product-gallery__trigger::before,
.woocommerce #content div.product .tour__gallery .woocommerce-product-gallery__trigger::after {
	content: none;
}

/* The file paints black already, so it is used as an image rather than a
   mask - one less thing to go wrong, and the lines come out black. */
.woocommerce div.product .tour__gallery .woocommerce-product-gallery__trigger > span,
.woocommerce #content div.product .tour__gallery .woocommerce-product-gallery__trigger > span {
	display: block;
	width: 21px;
	height: 21px;
	background-image: url("../img/zoom.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	font-size: 0;
	line-height: 0;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

/* --- Gallery: swipe with dots -------------------------------------------- */

@media (max-width: 700px) {
	.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery,
	.woocommerce div.product div.tour__gallery .woocommerce-product-gallery {
		position: relative;
		padding-block-end: 0;
	}

	/* The grid becomes a snap track. Same markup, so PhotoSwipe is unaffected. */
	.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery__wrapper,
	.woocommerce div.product div.tour__gallery .woocommerce-product-gallery__wrapper,
	.tour-mosaic--count-1 .woocommerce-product-gallery__wrapper,
	.tour-mosaic--count-2 .woocommerce-product-gallery__wrapper,
	.tour-mosaic--count-3 .woocommerce-product-gallery__wrapper,
	.tour-mosaic--count-4 .woocommerce-product-gallery__wrapper {
		display: flex;
		grid-template-columns: none;
		grid-template-rows: none;
		gap: 0;
		/* Taller on a phone than on a desktop: it is the only picture on the
		   screen, and the indicator no longer sits on top of it. */
		aspect-ratio: 4 / 3;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		/* No -webkit-overflow-scrolling: it is a no-op on any iOS this site will
		   meet - momentum has been the default since iOS 13 - and the old flag
		   puts the track on a scrolling layer of its own that keeps hold of a
		   touch meant for the page. */
		border-radius: var(--radius-md);
	}

	.woocommerce div.product div.tour__gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
		display: none;
	}

	.woocommerce #content div.product div.tour__gallery .woocommerce-product-gallery__image,
	.woocommerce div.product div.tour__gallery .woocommerce-product-gallery__image {
		flex: 0 0 100%;
		width: 100%;
		grid-row: auto;
		grid-column: auto;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	/* Every photo is reachable by swiping, so nothing is held back. */
	.woocommerce #content div.product div.tour__gallery .tour-mosaic__tile--hidden,
	.woocommerce div.product div.tour__gallery .tour-mosaic__tile--hidden {
		display: block;
	}

	.tour-mosaic__more { display: none; }

	.tour-mosaic__tile--lead,
	.tour-mosaic--count-1 .tour-mosaic__tile--lead,
	.tour-mosaic--count-2 .tour-mosaic__tile--lead {
		grid-column: auto;
		grid-row: auto;
	}

	/* The indicator sits below the photograph on its own track rather than
	   floating over the corner of it, which is what Apple does and what gives
	   the picture its full height back. */
	.tour-dots {
		position: static;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 7px;
		width: fit-content;
		margin: var(--sp-5) auto var(--sp-2);
		padding: 11px 18px;
		border-radius: var(--radius-pill);
		background: var(--c-panel);
	}

	.tour-dots__dot {
		width: 7px;
		height: 7px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgb(8 50 88 / 28%);
		cursor: pointer;
		transition: background 0.18s ease, width 0.18s ease;
	}

	.tour-dots__dot.is-active {
		width: 22px;
		border-radius: var(--radius-pill);
		background: var(--c-brand);
	}
}

/* --- Booking sheet -------------------------------------------------------- */

.booking-box__summary { display: none; }

@media (max-width: 900px) {
	/* The booking bar floats near the top of the screen rather than sitting on
	   the bottom edge, after Apple's product bars: inset from all three sides,
	   generously rounded, and no taller than the line of text inside it. The
	   offset clears the sticky site header, which is 76px on a phone. */
	.tour__booking {
		position: fixed;
		inset-block-start: calc(76px + var(--sp-3) + env(safe-area-inset-top, 0px));
		inset-block-end: auto;
		inset-inline: var(--sp-4);
		z-index: 60;
		/* The desktop rule stretches this column to the row so sticky has
		   somewhere to travel; fixed + height:100% would span the viewport. */
		height: auto;
		align-self: auto;
		transition: opacity 0.18s ease, transform 0.22s ease;
	}

	.booking-box {
		position: static;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: var(--radius-lg);
		background: var(--c-bg);
		box-shadow: 0 8px 28px rgb(8 50 88 / 20%);
		overflow: hidden;
	}

	/* Collapsed bar: the price and the way in, on one line. */
	.booking-box__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-3);
		width: 100%;
		/* Logical, not physical: the price sits at the reading edge and needs
		   the wider inset, the button carries padding of its own. */
		padding-block: var(--sp-2);
		padding-inline: var(--sp-5) var(--sp-3);
		border: 0;
		background: var(--c-bg);
		font: inherit;
		text-align: start;
		cursor: pointer;
	}

	/* One line, not two: "החל מ־" sits beside the number rather than above it,
	   which is most of the height the old bar was spending. */
	.booking-box__summary-price {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		gap: 0.35em;
		line-height: 1.2;
		font-size: var(--fs-lg);
		font-weight: 900;
		color: var(--c-brand);
	}

	.booking-box__summary-price .booking-box__from {
		font-size: var(--fs-xs);
		font-weight: 500;
		color: var(--c-ink-soft);
	}

	.booking-box__summary-cta {
		flex: 0 0 auto;
		padding: 0.55rem 1.15rem;
		border-radius: var(--radius-pill);
		background: var(--c-brand);
		color: #fff;
		font-size: var(--fs-sm);
		font-weight: 700;
	}

	/* The panel opens downwards from the bar. */
	.booking-box__panel {
		display: none;
		max-height: 70vh;
		padding: var(--sp-5) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		background: var(--c-bg);
		border-block-start: 1px solid var(--c-line);
	}

	.booking-box__summary[aria-expanded="true"] + .booking-box__panel {
		display: block;
	}

	.booking-box__summary[aria-expanded="true"] .booking-box__summary-cta {
		background: var(--c-panel);
		color: var(--c-ink-soft);
	}

	/* The panel repeats the price, so hide the duplicate inside it. */
	.booking-box__panel .booking-box__price { display: none; }

	/* Behind the open panel. The footer no longer needs padding to clear the
	   bar, because the bar is not on the bottom edge any more. */
	body.tm-sheet-open::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 59;
		background: rgb(8 50 88 / 45%);
	}

	body.tm-sheet-open { overflow: hidden; }
}

/* --- Breadcrumb -----------------------------------------------------------
   woocommerce_before_main_content prints this before the theme's .wrap opens,
   so it never inherits the container. Given the same measure here rather than
   moved in the template, which would break plugins hooking that action.
   ------------------------------------------------------------------------- */


/* A shop page opens on its breadcrumb rather than on a heading, and a trail
   of small grey text does not need the full opening measure above it. */
.woocommerce .site-main,
.woocommerce-page .site-main {
	padding-block-start: var(--sp-6);
}

.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb,
.tour .breadcrumb,
nav.breadcrumb {
	width: min(100% - 2 * var(--sp-4), var(--wrap));
	margin: 0 auto;
	/* No top padding of its own: .site-main already opens the page, and the
	   two together left the trail floating well clear of the header. */
	padding-block: 0;
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce-page .woocommerce-breadcrumb a,
nav.breadcrumb a {
	color: var(--c-ink-soft);
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce-page .woocommerce-breadcrumb a:hover,
nav.breadcrumb a:hover {
	color: var(--c-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Space the separator so the trail does not read as one run-on string. */
.breadcrumb__sep {
	display: inline-block;
	margin-inline: 0.45em;
	color: var(--c-line);
}

/* WordPress rewrites the trigger's magnifier emoji into an <img class="emoji">,
   which then covers the icon set on the span behind it. */
.woocommerce div.product .tour__gallery .woocommerce-product-gallery__trigger img,
.woocommerce #content div.product .tour__gallery .woocommerce-product-gallery__trigger img {
	display: none;
}

/* --- One shape for the booking controls -----------------------------------
   The departure select, the stepper and the call to action stack directly on
   top of one another, so three different corner radii read as a mistake.
   They all take the pill.
   ------------------------------------------------------------------------- */

.booking-box select,
.booking-box .variations select,
.woocommerce div.product form.cart .booking-box select {
	border-radius: var(--radius-pill);
	padding-inline: 1.25rem;
}

.booking-box button.single_add_to_cart_button.button.alt,
.booking-box .single_add_to_cart_button {
	border-radius: var(--radius-pill);
}

/* The reset link between them sat hard against the select. */
.booking-box .reset_variations {
	display: inline-block;
	margin-block: var(--sp-2) 0;
	font-size: var(--fs-xs);
}

/* Guard: WordPress styles img.emoji with display:inline !important, so if the
   feature is ever re-enabled this still keeps the trigger icon visible. */
.woocommerce div.product .tour__gallery .woocommerce-product-gallery__trigger img.emoji,
.woocommerce #content div.product .tour__gallery .woocommerce-product-gallery__trigger img.emoji {
	display: none !important;
}

/* --- Lightbox trigger, final form ----------------------------------------
   The icon is painted on the anchor itself. Routing it through the inner
   span added a layer that sat slightly off-centre and gave WordPress's emoji
   markup somewhere to interfere. Nothing is nested now.
   ------------------------------------------------------------------------- */

.woocommerce div.product .tour__gallery .woocommerce-product-gallery__trigger,
.woocommerce #content div.product .tour__gallery .woocommerce-product-gallery__trigger {
	background-image: url("../img/zoom.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	background-color: rgb(255 255 255 / 94%);
}

/* The base rule above is #content-scoped at (1,4,1), which outranks a
   hover rule without an ID. The hover state needs the same scoping or it
   never applies. */
.woocommerce div.product .tour__gallery .woocommerce-product-gallery__trigger:hover,
.woocommerce #content div.product .tour__gallery .woocommerce-product-gallery__trigger:hover {
	background-color: #fff;
	transform: scale(1.06);
	box-shadow: 0 4px 16px rgb(8 50 88 / 30%);
}

/* Whatever WooCommerce or WordPress puts inside is decoration only. */
.woocommerce div.product .tour__gallery .woocommerce-product-gallery__trigger > *,
.woocommerce #content div.product .tour__gallery .woocommerce-product-gallery__trigger > * {
	display: none !important;
}

/* --- Price emphasis -------------------------------------------------------
   Underlined like Airbnb's total: it marks the number as the thing being
   committed to, without shouting in another colour.
   ------------------------------------------------------------------------- */

.booking-box__price .woocommerce-Price-amount,
.booking-box__summary-price .woocommerce-Price-amount {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: currentColor;
}

/* A struck-through original should not also be underlined. */
.booking-box__price del .woocommerce-Price-amount,
.booking-box__summary-price del .woocommerce-Price-amount {
	text-decoration: line-through;
}

/* --- Notices, in brand colour --------------------------------------------
   The success state was a generic UI green. The logo has no green in it;
   its dominant hue is teal, so confirmation now reads as part of the same
   identity. Typography is tightened and the message given more weight than
   the surrounding body copy.
   ------------------------------------------------------------------------- */

.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message {
	border-inline-start-color: var(--c-logo-aqua);
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: -0.011em;
	line-height: 1.45;
	color: var(--c-ink);
}

.woocommerce .woocommerce-message::before,
.woocommerce-page .woocommerce-message::before {
	background: var(--c-logo-aqua);
	font-size: 0.95rem;
	font-weight: 700;
}

.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info {
	border-inline-start-color: var(--c-logo-blue);
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: -0.011em;
}

.woocommerce .woocommerce-info::before,
.woocommerce-page .woocommerce-info::before {
	background: var(--c-logo-blue);
}

/* The product name inside the message is the part worth reading. */
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message {
	font-variant-numeric: tabular-nums;
}

/* Scarcity picks up the logo's orange rather than a generic amber. */
.booking-box p.stock.tm-stock--low {
	background: #fff3e4;
	color: #8f4300;
}

.booking-box p.stock.tm-stock--low::before {
	background: var(--c-logo-orange);
	box-shadow: 0 0 0 3px rgb(249 116 0 / 20%);
}

@keyframes tm-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgb(249 116 0 / 20%); }
	50%      { box-shadow: 0 0 0 5px rgb(249 116 0 / 9%); }
}

/* The children's perk mark, likewise. */
.booking-box__perk-mark {
	background: #e2f6f4;
	color: var(--c-logo-aqua);
}

/* --- Section headings on a tour ------------------------------------------
   A short bar at the reading edge of each heading. The page is a long column
   of prose and lists; without a marker the sections all start the same way
   and the eye has nothing to catch.
   ------------------------------------------------------------------------- */

.tour__section-title,
.tour .related > h2,
.tour .upsells > h2,
.woocommerce-Tabs-panel > h2,
#reviews h2 {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.tour__section-title::before,
.tour .related > h2::before,
.tour .upsells > h2::before,
.woocommerce-Tabs-panel > h2::before,
#reviews h2::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	/* Tied to the cap height, so it tracks the heading at any size. */
	height: 1em;
	border-radius: 2px;
	background: var(--c-logo-teal);
}

/* --- Lightbox ------------------------------------------------------------
   The mosaic on the page shows everything at once; the lightbox shows one
   photo at a time, which is the moment a "2 of 6" is worth having. The pill
   is the one from the phone gallery, inverted for a dark ground.
   ------------------------------------------------------------------------- */

.tm-pswp-dots {
	position: absolute;
	/* Physical left with a physical translate. The logical pair anchors the
	   wrong edge in RTL, which is how the see-all fan ended up off-centre. */
	left: 50%;
	transform: translateX(-50%);
	bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px));
	z-index: 1550;

	/* The slides run left to right whatever the page direction - PhotoSwipe
	   has no RTL - so the dots have to as well, or dot one sits under the
	   last photo. */
	direction: ltr;

	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 18px;
	border-radius: var(--radius-pill);

	/* Dark rather than the light pill Apple uses: theirs sits on a page, this
	   sits on the photograph, and a pale wash over a pale sky is nothing at
	   all. Dark holds against anything, and the hairline keeps it off a
	   night shot. */
	background: rgb(0 0 0 / 55%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
	backdrop-filter: blur(10px);
	transition: opacity 0.2s ease;
}

/* PhotoSwipe fades its furniture out on an idle tap; this goes with it. */
.pswp__ui--hidden .tm-pswp-dots { opacity: 0; }

.tm-pswp-dots__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 42%);
	cursor: pointer;
	transition: background 0.18s ease, width 0.18s ease;
}

.tm-pswp-dots__dot:hover { background: rgb(255 255 255 / 72%); }

.tm-pswp-dots__dot.is-active {
	width: 22px;
	border-radius: var(--radius-pill);
	background: #fff;
}

/* A caption, when there is one, would sit underneath the pill. */
.pswp__caption:not(.pswp__caption--empty) ~ .tm-pswp-dots,
.pswp__ui:has(.pswp__caption:not(.pswp__caption--empty)) .tm-pswp-dots {
	bottom: 82px;
}

/* The default arrows are a sprite from 2014. Same translucent treatment as
   the pill, with the chevron drawn rather than fetched. */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	width: 52px;
	height: 52px;
	margin-block-start: -26px;
	background: none;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	inset-block-start: 0;
	width: 52px;
	height: 52px;
	background: rgb(0 0 0 / 55%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
	backdrop-filter: blur(10px);
	border-radius: 50%;
}

.pswp__button--arrow--left::before { left: 6px; }
.pswp__button--arrow--right::before { right: 6px; }

.pswp__button--arrow--left:hover::before,
.pswp__button--arrow--right:hover::before {
	background: rgb(0 0 0 / 78%);
}

/* The chevron: two borders on a rotated square. Physical border sides on
   purpose - the logical pair would flip to the other two corners in RTL and
   turn both arrows around. */
.pswp__button--arrow--left::after,
.pswp__button--arrow--right::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	background: none;
}

.pswp__button--arrow--left::after {
	left: 32px;
	transform: translate(-40%, -50%) rotate(-45deg);
}

.pswp__button--arrow--right::after {
	right: 32px;
	transform: translate(40%, -50%) rotate(135deg);
}

/* "1 / 6", not "6 / 1". The counter is a pair of numbers with a slash, which
   the page direction reverses into nonsense. */
.pswp__counter { direction: ltr; }

/* Captions carry the photographer and the licence, so they are usually Latin
   with a Hebrew word or two. Letting each line take its direction from its own
   first letter beats forcing either one on it. */
.pswp__caption__center { unicode-bidi: plaintext; }

/* --- Carousel gallery ----------------------------------------------------
   The alternative to the mosaic, after apple.com: one photo holding the stage
   with the next peeking in at the edge, and the dots and a play button on a
   line below it.

   These carry the same #content-scoped prefix as the mosaic rules, because the
   base wrapper rule matches this track too - it has both classes - and would
   otherwise keep laying it out as a grid.
   ------------------------------------------------------------------------- */

.woocommerce #content div.product div.tour__gallery .tour-carousel__track,
.woocommerce div.product div.tour__gallery .tour-carousel__track {
	/* How far the rail sits in from the edge of the window. Measured by the
	   script, because every way of writing it in CSS goes through 100vw, and
	   100vw counts the scrollbar - a track that wide gives the page a
	   horizontal scrollbar of its own.

	   Zero without a script, which is a fine gallery: no bleed, the photo on
	   the rail, and the peek cut off at the rail edge instead of the window. */
	--bleed: var(--gutter);

	display: flex;
	grid-template-columns: none;
	grid-template-rows: none;
	gap: 24px;
	aspect-ratio: auto;

	/* Out of the rail and across the window. With width left alone, the box
	   takes the rail plus both margins - which is the window exactly. */
	width: auto;
	margin-inline: calc(var(--bleed) * -1);

	/* The first photo still starts on the rail, in line with the heading and
	   everything else on the page; only the ones after it run off the edge of
	   the window. The scroll padding is what brings each photo to rest there
	   rather than against the window edge.

	   The padding also puts the content box back to exactly the rail width,
	   which is what the slides below are a percentage of. */
	padding-inline: var(--bleed);
	scroll-padding-inline-start: var(--bleed);

	/* The radius belongs to each card; the track only cuts the peek off at
	   the window edge, and Apple's peek is cut straight. */
	border-radius: 0;

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* See above: the legacy flag captures touches on iOS and buys nothing. */
	scrollbar-width: none;

	/* Not smooth: its speed is the browser's to choose, and the script wants
	   a slower travel than any of them pick. */
	scroll-behavior: auto;
}

.tour-carousel__track::-webkit-scrollbar { display: none; }

.woocommerce #content div.product div.tour__gallery .tour-carousel__slide,
.woocommerce div.product div.tour__gallery .tour-carousel__slide {
	/* Of the rail, not of the window: the padding above leaves the track's
	   content box exactly the width of the rail, and that is what a percentage
	   flex-basis is measured against. Just under three quarters leaves a peek
	   wide enough to read as another photograph rather than as a fault. */
	flex: 0 0 71%;
	width: auto;
	aspect-ratio: 16 / 9;

	/* Sixteen by nine of a photograph this wide is 670px tall, and the page has
	   already spent 314 of a laptop screen on the header, the title and the
	   dates - so the photo ran past the fold and the dots underneath it were
	   never seen at all. The number below is what the page spends above and
	   below the photo; whatever is left of the window is the photo's, and it
	   crops to fit rather than pushing its own control off the screen.

	   A cap rather than a different ratio: on a tall screen there is room for
	   the whole 16:9 and this never comes into it. */
	/* A fifth taller than it was, as asked. The 440 is what the page spends
	   above and below the photograph; moving the breadcrumb onto the meta row
	   paid back 29 of it, and the rest of the fifth comes out of the margin
	   that was under the dots. */
	/* Two ways of asking, whichever gives the taller photograph.

	   The subtraction is what the page spends above and below it: 258 to the
	   heading and the standfirst, 72 to the dots, and a little air. It is right
	   at 100%% zoom and wrong above it - at 150%% the window is the same glass
	   but only ~630 CSS pixels of it, and the subtraction eats most of that.
	   The share of the window takes over there, so the photograph keeps most of
	   the screen whatever the zoom. */
	max-height: max(61vh, calc(100vh - 348px));
	border-radius: var(--radius-lg);
	overflow: hidden;

	/* Aligned to the start, not centred: the photo being looked at belongs on
	   the rail with the next one peeking past the window edge, which is the
	   whole shape of this layout. Centring would put it in the middle of the
	   window and the rail would stop meaning anything. */
	scroll-snap-align: start;
	background: var(--c-bg-alt);
}

/* A lone photo has nothing to peek at, so it takes the rail and no more. */
.woocommerce #content div.product div.tour__gallery .tour-carousel--count-1 .tour-carousel__slide,
.woocommerce div.product div.tour__gallery .tour-carousel--count-1 .tour-carousel__slide {
	flex-basis: 100%;
}

/* --- The controls under it ------------------------------------------------ */

.tour-carousel__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--sp-4);
	margin-block-start: var(--sp-5);
}

/* Nothing was built - one photo, or no script. */
.tour-carousel__controls:empty { display: none; }

/* The pill. The same one the phone gallery uses, lifted out of its media
   query so the carousel can wear it at any width. */
.tour-carousel__controls .tour-dots {
	position: static;
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	align-items: center;
	gap: 9px;
	width: fit-content;
	margin: 0;
	padding: 14px 22px;
	border-radius: var(--radius-pill);
	background: var(--c-panel);
}

.tour-carousel__controls .tour-dots__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(8 50 88 / 28%);
	cursor: pointer;
	transition: background 0.18s ease, width 0.18s ease;
}

.tour-carousel__controls .tour-dots__dot:hover { background: rgb(8 50 88 / 55%); }

.tour-carousel__controls .tour-dots__dot.is-active {
	width: 30px;
	border-radius: var(--radius-pill);
	background: var(--c-brand);
}

/* The play button is its own circle beside the pill, not inside it - which is
   how Apple has it, and it keeps the dots evenly spaced whatever the count. */
.tour-carousel__play {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-panel);
	color: var(--c-brand);
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease;
}

.tour-carousel__play:hover {
	background: var(--c-brand);
	color: #fff;
}

.tour-carousel__play svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

@media (max-width: 700px) {
	.woocommerce #content div.product div.tour__gallery .tour-carousel__track,
	.woocommerce div.product div.tour__gallery .tour-carousel__track {
		gap: var(--sp-3);
		grid-template-columns: none;
		aspect-ratio: auto;
	}

	.woocommerce #content div.product div.tour__gallery .tour-carousel__slide,
	.woocommerce div.product div.tour__gallery .tour-carousel__slide {
		/* A peek that reads on a laptop is most of a phone screen. */
		flex-basis: 88%;

		/* No cap on a phone: 4:3 of a screen this narrow is short already, and
		   vh there is whatever the address bar is doing this second. */
		max-height: none;
		aspect-ratio: 4 / 3;
	}
}

/* Autoplay is a moving thing on a page nobody asked to move. */
@media (prefers-reduced-motion: reduce) {
	.woocommerce #content div.product div.tour__gallery .tour-carousel__track,
	.woocommerce div.product div.tour__gallery .tour-carousel__track {
		scroll-behavior: auto;
	}
}

/* The cart panel opens into the same corner of a phone screen that the booking
   bar floats in, and covered it. The bar steps aside for as long as the cart
   is open: whoever opened the cart is dealing with the cart, and this tour's
   price is not what they are looking at. */
@media (max-width: 900px) {
	body.has-cart-open .tour__booking {
		opacity: 0;
		transform: translateY(-12px);
		pointer-events: none;
	}
}

/* With the lightbox off, WooCommerce's link around each image becomes a span,
   which has to fill the slide exactly as the link did. */
.woocommerce #content div.product div.tour__gallery .tour-carousel__frame,
.woocommerce div.product div.tour__gallery .tour-carousel__frame {
	display: block;
	width: 100%;
	height: 100%;
}

/* And nothing happens on click any more, so nothing should suggest it will. */
.woocommerce #content div.product div.tour__gallery .tour-carousel__slide:hover img,
.woocommerce div.product div.tour__gallery .tour-carousel__slide:hover img {
	transform: none;
}

/* A slide off to the side is a button for bringing itself to the middle. The
   one already in the middle is not. */
.woocommerce #content div.product div.tour__gallery .tour-carousel__slide,
.woocommerce div.product div.tour__gallery .tour-carousel__slide {
	cursor: pointer;
}

.woocommerce #content div.product div.tour__gallery .tour-carousel__slide.is-current,
.woocommerce div.product div.tour__gallery .tour-carousel__slide.is-current {
	cursor: default;
}

/* --- Catalogue filters ----------------------------------------------------
   A row of disclosures above the grid. <details> does the opening, so the
   whole control works with no script; the script only saves a click on "החל".
   ------------------------------------------------------------------------- */

.filters {
	margin-block: var(--sp-6) var(--sp-8);
	padding-block-end: var(--sp-5);
	border-block-end: 1px solid var(--c-line);
}

.filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
}

.filters__title {
	margin-inline-end: var(--sp-2);
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	font-weight: 700;
}

/* --- One facet ------------------------------------------------------------ */

.facet {
	position: relative;
}

.facet__button {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	background: var(--c-bg);
	color: var(--c-brand);
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	transition: border-color 0.16s ease, background 0.16s ease;
}

/* Safari draws its own triangle on a summary and ignores list-style. */
.facet__button::-webkit-details-marker { display: none; }

.facet__button:hover { border-color: var(--c-brand); }

.facet--on .facet__button {
	background: var(--c-brand);
	border-color: var(--c-brand);
	color: #fff;
}

.facet__count {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 6px;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 24%);
	font-size: 0.6875rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.facet__chevron {
	width: 8px;
	height: 8px;
	/* Physical sides on purpose. The logical pair mirrors in RTL, and this
	   chevron does not mean "forward" - it means "this opens downwards",
	   which is the same direction in every language. */
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 0.18s ease;
}

.facet[open] .facet__chevron { transform: rotate(-135deg) translate(-1px, -1px); }

.facet__panel {
	position: absolute;
	z-index: 40;
	inset-block-start: calc(100% + 6px);
	inset-inline-start: 0;
	min-width: 260px;
	max-width: min(360px, 90vw);
	padding: var(--sp-3);
	border-radius: var(--radius-md);
	background: var(--c-bg);
	box-shadow: 0 16px 40px rgb(8 50 88 / 22%);
}

.facet__options {
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.facet__option {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 0.14s ease;
}

.facet__option:hover { background: var(--c-panel); }

.facet__option input { flex: 0 0 auto; accent-color: var(--c-brand); }

.facet__option-name {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--c-ink);
	font-size: var(--fs-sm);
}

.facet__option-day {
	color: var(--c-ink-soft);
	font-size: 0.8125rem;
}

.facet__option-count {
	flex: 0 0 auto;
	color: var(--c-ink-soft);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.facet__apply {
	width: 100%;
	margin-block-start: var(--sp-2);
	padding: var(--sp-2);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--c-brand);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* The script submits on change, so the button is only for a browser without
   one. It hides itself once the script has said it is there. */
.has-js .facet__apply,
.has-js .filters__apply { display: none; }

/* --- Accessibility, which is one bit rather than a list ------------------- */

.filters__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-brand);
	cursor: pointer;
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.filters__toggle:hover { border-color: var(--c-brand); }

.filters__toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.filters__toggle-mark {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border: 1.5px solid currentColor;
	border-radius: 4px;
}

.filters__toggle-mark::after {
	width: 8px;
	height: 4px;
	/* Physical, for the same reason as the chevron: a tick is a tick. */
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg) translate(1px, -1px);
	opacity: 0;
	content: "";
	transition: opacity 0.14s ease;
}

.filters__toggle.is-on,
.filters__toggle:has(input:checked) {
	background: var(--c-brand);
	border-color: var(--c-brand);
	color: #fff;
}

.filters__toggle.is-on .filters__toggle-mark::after,
.filters__toggle:has(input:checked) .filters__toggle-mark::after { opacity: 1; }

/* A keyboard has to be able to see where it is, and the box it would outline
   is off screen. */
.filters__toggle:focus-within { box-shadow: 0 0 0 3px rgb(0 170 203 / 35%); }

/* --- What is currently on ------------------------------------------------- */

.filters__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-block-start: var(--sp-4);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 5px var(--sp-3);
	border-radius: var(--radius-pill);
	background: var(--c-panel);
	color: var(--c-brand);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.14s ease;
}

.chip:hover { background: #dbe2ec; }

.chip__x { font-size: 1.05em; line-height: 1; opacity: 0.6; }

.chip:hover .chip__x { opacity: 1; }

.filters__clear {
	margin-inline-start: var(--sp-2);
	color: var(--c-ink-soft);
	font-size: 0.8125rem;
	text-underline-offset: 3px;
}

.filters__clear:hover { color: var(--c-brand); }

@media (max-width: 700px) {
	/* The row scrolls rather than stacking: four buttons on four lines is the
	   whole screen before a single tour is visible. */
	.filters__row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
	}

	.filters__row::-webkit-scrollbar { display: none; }

	.filters__title { display: none; }

	/* --- A row that scrolls has to say so ---------------------------------
	   Without these a row cut off mid-chip reads as the end of the list, not
	   the edge of the screen - which is exactly how the accessibility switch,
	   last in the row, went unseen. The frame is the non-scrolling parent the
	   two cues are positioned against; each is a fade to the page ground with
	   an arrow on top, and the script shows only the one pointing at filters
	   still off-screen. Static rather than a hover state: the row this sits
	   on cannot be hovered on the phone it exists for. */
	.filters__scroll { position: relative; }

	.filters__edge {
		position: absolute;
		inset-block: 0;
		width: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.filters__scroll.is-scrollable .filters__edge--end { opacity: 1; }
	.filters__scroll.filters__scroll--end-reached .filters__edge--end { opacity: 0; }
	.filters__scroll.has-scrolled .filters__edge--start { opacity: 1; }

	/* end sits at the physical left, where the row's later chips - and the
	   accessibility switch after them - are hidden until scrolled to; start
	   sits at the physical right, the row's own reading start, and lights up
	   once that has been scrolled past. The gradient reads the same way in
	   both: solid at the outer, page-facing edge, transparent toward the row. */
	.filters__edge--end {
		inset-inline-end: 0;
		background: linear-gradient(to left, var(--page-bg, var(--c-ground)) 45%, transparent);
	}

	.filters__edge--start {
		inset-inline-start: 0;
		background: linear-gradient(to right, var(--page-bg, var(--c-ground)) 45%, transparent);
	}

	.filters__edge-arrow {
		width: 8px;
		height: 8px;
		border-top: 2px solid var(--c-brand);
		border-right: 2px solid var(--c-brand);
		/* Physical sides, like the facet chevron: this one means "there is
		   more to the left", which is the same direction in every language. */
		transform: rotate(-135deg);
		opacity: 0.75;
	}

	/* A sheet from the bottom of the screen rather than a panel under the
	   button. The row scrolls sideways, and a scrolling box clips what hangs
	   out of it in both directions - so a panel inside it would be cut off.
	   Fixed positioning leaves the row entirely. */
	.facet__panel {
		position: fixed;
		inset: auto 0 0;
		/* Above everything bolted onto the page from outside. The chat widget
		   sits at 1,000,001 and was covering the sheet; the accessibility bar
		   is another unknown of the same kind. This is a modal - while it is
		   open it is the only thing being used - so it goes above the lot
		   rather than above one named offender. */
		z-index: 2147483000;
		min-width: 0;
		max-width: none;
		padding: var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		box-shadow: 0 -12px 40px rgb(8 50 88 / 28%);
	}

	.facet__options { max-height: 50vh; }

	/* The sheet covers the page, so it needs its own way out. */
	.facet[open] .facet__button::after {
		position: fixed;
		inset: 0;
		z-index: 2147482999;
		background: rgb(8 50 88 / 40%);
		content: "";
	}
}

/* --- The bar under the photographs ---------------------------------------
   Where you are, and what the tour is: the trail on one side, the length and
   the region on the other.

   All of it below the gallery. It spent time above the title, where it cost a
   line of the only part of this page short of height, and it spent time shoved
   against the heading underneath with nothing around it. Here it has a line of
   its own, a rule to sit on, and air on both sides.
   ------------------------------------------------------------------------- */

.tour__underbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3) var(--sp-6);
	margin-block: var(--sp-5) var(--sp-8);
	padding-block-end: var(--sp-5);
	border-block-end: 1px solid var(--c-line);
}

.tour .breadcrumb {
	width: auto;
	margin: 0;
	padding: 0;
	font-size: var(--fs-sm);
	color: var(--c-ink-soft);
}

@media (max-width: 700px) {
	/* Stacked, and the chips first: the trail is the last thing wanted on a
	   phone and the first thing to give up the top of the column. */
	.tour__underbar {
		justify-content: flex-start;
		margin-block: var(--sp-4) var(--sp-6);
	}

	.tour__underbar .breadcrumb { order: 2; }
}

/* --- A short window ------------------------------------------------------
   Which is what a browser at 125% or 150% zoom is: the same glass, fewer CSS
   pixels. At 150% on a 1920x1080 screen the window is about 627 of them, and
   the heading, the standfirst and their margins were spending 257 before the
   photograph even started - so it ran past the bottom of the screen and the
   gallery had to be scrolled to.

   Everything above the photograph tightens, and the photograph itself does
   not: it is the thing that was asked to be bigger.
   ------------------------------------------------------------------------- */

@media (min-width: 901px) and (max-height: 780px) {
	.woocommerce div.product.tour,
	div.product.tour { padding-block-start: var(--sp-3); }

	.tour__title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }

	.tour__head { margin-block-end: var(--sp-4); }

	.tour__head .tour__title { margin-block-end: var(--sp-2); }

	.tour__lead { font-size: var(--fs-base); }
}

/* --- The tour page on a phone -------------------------------------------- */

@media (max-width: 900px) {
	/* The length and the region belong under the title here, not stranded
	   between the photographs and the trail. A column with an order rather
	   than a second copy in the markup: below the gallery is right on a wide
	   screen, where the gallery is fighting for height, and wrong on a phone,
	   where it is not. */
	.woocommerce div.product.tour,
	div.product.tour {
		display: flex;
		flex-direction: column;
	}

	.tour__head { order: 1; }
	.tour__underbar { order: 2; }
	.tour__gallery { order: 3; }
	.tour__grid { order: 4; }
	.tour__after { order: 5; }

	.tour__underbar {
		margin-block: var(--sp-3) var(--sp-5);
		padding-block-end: var(--sp-4);
	}
}

/* The booking bar arrives after the first fold.

   It floats over the top of the page, and at the top of the page the thing it
   floats over is the title - the one line the visitor came to read. Reserving
   space for it was the first answer and a poor one: it pushed everything down
   to make room for something nobody needs yet.

   So it is not there to begin with. Once the heading and the standfirst have
   been scrolled past, the price and the button follow the reader down the
   page, which is the point of them. */
@media (max-width: 900px) {
	.tour__booking {
		opacity: 0;
		transform: translateY(-14px);
		pointer-events: none;
	}

	.tour.is-past-fold .tour__booking {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* The chips are desktop furniture.

   On a phone they say what the page already says twice: the length is a row in
   the details table below, and the region is the last step of the trail right
   under them. Two placements were tried and neither looked like anything but
   two floating pills, which is what they were - a summary of facts that were
   never far enough away to need summarising on a narrow column. */
@media (max-width: 900px) {
	.tour__underbar .tour__head-meta {
		display: flex;
		width: 100%;
		order: -1;
	}

	.tour__lead { margin-block-end: 0; }
	.tour__head { margin-block-end: var(--sp-4); }

	.tour__underbar {
		justify-content: flex-start;
		margin-block: 0 var(--sp-5);
		padding-block-end: var(--sp-4);
	}
}

/* --- The catalogue on a phone --------------------------------------------
   Measured at 375px, the region page spent 537px - two thirds of the screen -
   on a breadcrumb, a heading, a filter row and a toolbar before the first
   tour appeared. Every number below is one of those.
   ------------------------------------------------------------------------- */

@media (max-width: 700px) {
	/* Nothing in a row that scrolls sideways may shrink. The chips have
	   white-space: nowrap and do not, but the accessibility switch had
	   neither that nor a fixed basis, so it was squeezed until its two words
	   sat on two lines and the whole row stood 68px tall for it. */
	.facet,
	.filters__toggle { flex: 0 0 auto; }

	.filters__toggle { white-space: nowrap; }

	/* The toggle is last in the DOM, which puts it at the far scroll end
	   (the left edge in RTL) — completely hidden until the row is scrolled
	   all the way.  Pull it to the inline-start (right in RTL) so it is
	   the first thing visible. */
	.filters__toggle { order: -1; }

	.shop-header { padding-block: var(--sp-5) var(--sp-2); }

	.filters {
		margin-block: var(--sp-4) var(--sp-5);
		padding-block-end: var(--sp-4);
	}

	/* The count and the sort fit across the screen once they are set at the
	   small size; wrapping put them on two lines and the toolbar stood 128px
	   tall to hold "showing all 2 results" and a dropdown. */
	.shop-toolbar {
		flex-wrap: nowrap;
		gap: var(--sp-2);
		padding-block: var(--sp-3);
		/* The filter bar has just drawn this line. Two rules 50px apart read
		   as a mistake. */
		border-block-start: 0;
		margin-block-end: var(--sp-5);
	}

	.shop-toolbar .woocommerce-result-count { font-size: var(--fs-xs); }

	.shop-toolbar .woocommerce-ordering { min-width: 0; }

	.shop-toolbar .woocommerce-ordering select {
		max-width: 100%;
		padding: var(--sp-1) var(--sp-2);
		padding-inline-end: var(--sp-7);
		background-position: left var(--sp-3) center;
		font-size: var(--fs-xs);
	}
}

/* The tour page starts 48px below the bar on a phone - the main's 24 and the
   article's own 24, one on top of the other. One of them is enough. */
@media (max-width: 900px) {
	.woocommerce div.product.tour,
	div.product.tour { padding-block: 0 var(--sp-4); }

	.tour__after {
		margin-block-start: var(--sp-8);
		padding-block-start: var(--sp-6);
	}

	.woocommerce .site-main { padding-block-end: var(--sp-4); }
}

/* --- A hundred tours on a phone -------------------------------------------
   Measured before any of this was written: the card is 441px tall and the gap
   32, so a 932px screen holds 1.97 tours and a page of twelve is 6.1 screens
   of scrolling. That is a poster, and a poster is right for eight tours on
   the front page and wrong for a hundred in a catalogue.

   Two columns of a shorter card put the same twelve in 1.7 screens. The
   photograph still leads - at this price the picture is what sells the tour -
   but it stops being 54% of the card.
   ------------------------------------------------------------------------- */

/* The one-line version of the dates. Printed on every card; shown only where
   there is no room for the spelled-out list. */
.tour-rcard__when { display: none; }

@media (max-width: 700px) {
	ul.products {
		/* Two, stated rather than fitted: auto-fill with a 150px minimum gives
		   two at 430px and four at 700px, and four is nobody's idea of a phone
		   layout. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-8) var(--sp-4);
	}

	.tour-rcard__link { padding: var(--sp-3); }

	/* 4:3 rather than 16:10 - a squarer crop keeps the subject legible at
	   191px, where a letterbox turns a landscape into a strip. */
	.tour-rcard__media { aspect-ratio: 4 / 3; }

	/* The type and the gaps that used to be set here are now keyed to the card's
	   own width, up with the base rules - a viewport breakpoint set them for the
	   two-up grid and got the 292px swipe-track card on the same phone wrong.
	   What is left below is genuinely about the screen rather than the card. */

	/* The carousel shows about one card at a time on a phone, so reserving two
	   lines of title on every card lines up feet that are never seen side by
	   side - and under a one-line title it left the chips stranded half a line
	   below where they belonged. The grid above keeps the reservation, where
	   the cards really are two abreast. */
	.woocommerce ul.products.tour-row__track li.product .tour-rcard__title,
	ul.products.tour-row__track li.product .tour-rcard__title {
		min-height: 0;
	}

	.tour-rcard__dates { display: none; }

	.tour-rcard__when {
		display: block;
		font-size: 0.75rem;
		font-weight: 600;
		color: var(--c-ink-soft);
	}

	/* The date line is the only thing under the chips, so the gap between them
	   is this one number rather than a trailing margin on the chips - which
	   WooCommerce's .woocommerce .products ul would overwrite on the catalogue
	   and leave alone on the front page. */
	.woocommerce ul.products li.product .tour-rcard__when,
	ul.products li.product .tour-rcard__when {
		margin: var(--sp-3) 0 0;
	}

	.tour-rcard:hover .tour-rcard__when { color: rgb(255 255 255 / 82%); }

	.tour-rcard__foot { margin-block-start: var(--sp-2); padding-block-start: var(--sp-2); }

	/* --- The filter bar follows -------------------------------------------
	   With a hundred tours the filters are the navigation, and until now they
	   were only reachable by scrolling back to the top of the page. --nav-top
	   is the foot of the header, which the script already measures for the
	   menu sheet.

	   z-index 60 rather than a smaller number: the cards are positioned, so
	   the bar needs one to stay above them, and the number has to clear the
	   header's 50 - otherwise the dimming behind an open filter sheet, which
	   is trapped in this stacking context, would be drawn under the bar. */
	.filters {
		position: sticky;
		inset-block-start: var(--nav-top, 76px);
		z-index: 60;
		padding-block-start: var(--sp-3);
		background: var(--page-bg, var(--c-ground));
	}
}

/* Below this the screen is too narrow for two of anything. */
@media (max-width: 359px) {
	ul.products { grid-template-columns: minmax(0, 1fr); }
}

/* --- Load more ------------------------------------------------------------
   Nine numbered pages means nine round trips, each one losing your place in
   the list. The links stay in the markup - for a crawler, and for a browser
   with no script - and the button takes over when there is one.
   ------------------------------------------------------------------------- */

.shop-more {
	display: block;
	margin: var(--sp-8) auto var(--sp-4);
	padding: var(--sp-3) var(--sp-8);
	border: 1px solid var(--c-brand);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--c-brand);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.shop-more:hover {
	background: var(--c-brand);
	color: #fff;
}

.shop-more.is-busy { opacity: 0.6; cursor: default; }

.shop-more[hidden] { display: none; }

/* Hidden rather than removed: the numbered links are how a crawler walks the
   catalogue, and how the page works with no script at all. */
.woocommerce-pagination.is-replaced { display: none; }

.shop-more-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* An absolutely positioned replaced element does not take its height from
   top and bottom the way a div does: CSS 2.1 says an image with height: auto
   uses its intrinsic height and ignores `bottom` outright. So inset alone did
   not hold the photograph to the frame - the height declaration has to win,
   and WooCommerce's is .woocommerce ul.products li.product a img. */
.woocommerce ul.products li.product a img.tour-rcard__img,
.woocommerce-page ul.products li.product a img.tour-rcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The cart page renders its blocks inside .page-article__content, and the
   prose rules there underline every link at 0,1,1 - one step above the card's
   own .tour-rcard__link at 0,1,0. An archive does not wrap the grid that way,
   so the same card came out underlined in one place and clean in the other.
   A card is not a paragraph of text wherever it is standing. */
.page-article__content .tour-rcard__link,
.page-article__content .tour-rcard__link:hover,
.page-article__content .tour-rcard__link:focus {
	text-decoration: none;
}

/* Same wrapper, same cause: .page-article__content indents every <ul> by ~22px
   and gives it prose margins. The chips and dates are lists, so on the cart
   page they sat shoved in and mis-spaced against the same card in an archive,
   which is not wrapped in prose. Restore the card's own list geometry - the
   two-class selector clears the prose rule's 0,1,1. */
.page-article__content .tour-rcard__chips,
.page-article__content .tour-rcard__dates {
	padding: 0;
	/* The chips and dates are flex rows with the default align-items: stretch.
	   Prose also lifts the line-height to ~1.85, so each pill's natural height
	   grew and the stretch pushed the whole row to match the tallest - the
	   pills came out visibly puffier than the same card in an archive. Pinning
	   the line-height back to the card's own value and centring the row instead
	   of stretching it makes the pills the height they are everywhere else. */
	align-items: center;
	line-height: 1.65;
}

.page-article__content .tour-rcard__chips li,
.page-article__content .tour-rcard__dates li,
.page-article__content .tour-rcard__chips bdi {
	line-height: 1.65;
}

.page-article__content .tour-rcard__chips {
	margin: var(--sp-3) 0 0;
}

.page-article__content .tour-rcard__dates {
	margin: var(--sp-3) 0 var(--sp-4);
}

/* Room between the "soonest tours" heading and the grid it introduces. The
   heading is the empty state's second one - not the "your cart is empty"
   title - so it is matched by the absence of that title's class. */
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	margin-block-end: var(--sp-8);
}

/* ---------------------------------------------------------------- partners

   The bodies a tour is run with, credited at the foot of the reading column.

   The marks that arrive here are not a set: a square badge, a wide bilingual
   lockup, a horizontal wordmark. Giving them a common height would leave the
   wide one covering three times the area of the square one and reading as the
   senior partner, so each gets an identical BOX instead and is contained
   inside it - the usual way a row of mismatched marks is made to look
   deliberate rather than merely aligned.

   The band is white rather than tinted. Partner logos arrive as supplied -
   usually a JPG or a flattened PNG with its own white rectangle baked in -
   and on a tinted band every one of those rectangles shows as a pale box
   around the mark. White makes a flattened file indistinguishable from a
   transparent one, and the border is what says "this is a credit". */
.tour__section--partners .tour__section-title {
	font-size: var(--fs-base);
	color: var(--c-ink-soft);
}

.tour__partners-note {
	margin-block: 0 var(--sp-4);
	max-width: 56ch;
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

/* A row that starts at the reading edge and wraps, for any number of marks.

   It was a grid of equal columns, which spread two logos to opposite ends of
   the band with a gulf between them - the band was being filled rather than
   the marks being set beside each other. Started and packed, the gap between
   any two is the same whether there are two of them or seven, and a row that
   runs out of width wraps underneath where the first one began, which reads
   as a wrap rather than as a mistake. */
.tour__partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	/* Roughly the height of the marks themselves. Closer than this and two
	   logos read as one lockup - which is exactly what a partner whose mark
	   is now touching another one's will say. */
	gap: var(--sp-6) var(--sp-12);
	margin: 0;
	padding: var(--sp-6);
	list-style: none;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
}

/* One height for every mark, which is how a row of logos is normally set.

   This was briefly a ceiling per shape, on the theory that matched heights
   leave a wide lockup covering more area than a square badge and reading as
   the senior partner. True in the abstract, wrong on the page: the shapes
   partners actually send sit close together, so small differences in
   proportion produced visible steps in height, and a row of marks that do not
   line up reads as untidy long before anyone weighs their areas. A logo that
   carries a solid background also reads heavier than one on white at the same
   size, so the extra height went to whichever mark least needed it.

   Width is capped too, for the strip-shaped wordmarks that would otherwise
   run away with the row.

   Neither ceiling is larger than the files can bear. Partner logos arrive as
   supplied and are usually small - 180 to 774 pixels wide here - so much past
   this would be upscaling them, and a blurred logo is worse than a modest
   one. */
.tour__partner {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin: 0;
}

.tour__partner-logo {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 200px;
	max-block-size: 76px;
}

/* On a phone the marks come down a size and the row wraps sooner on its own.
   Shrinking them further to keep more on a line would take the lettering
   inside them below the size at which it can be read at all. */
@media (max-width: 600px) {
	.tour__partners {
		gap: var(--sp-5) var(--sp-7);
		padding: var(--sp-5);
	}

	.tour__partner-logo {
		max-inline-size: 150px;
		max-block-size: 60px;
	}
}

/* --- The filter sheet and the widgets bolted to the corner -----------------
   The sheet is a modal, and two third-party widgets kept drawing over it: the
   chat bubble and the accessibility button. Raising the sheet's z-index did
   not settle it - whatever those scripts do, they stay on top - so this stops
   arguing about stacking order and takes them out of the question instead.

   The chat is hidden while the sheet is open. Nobody opens a filter in order
   to start a conversation, and it comes straight back when the sheet closes.

   The accessibility button goes with it. Padding alone did not clear it - the
   button floats wherever its own script puts it, which on a short sheet is
   over the last option - and an option you cannot read is a worse failure of
   accessibility than a button missing for as long as a sheet is open. It is
   back the moment the sheet closes, and the page behind it never lost it.
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
	body:has(.facet[open]) .crisp-client,
	body:has(.facet[open]) #ea11y-root {
		display: none !important;
	}

	.facet__panel {
		padding-block-end: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
	}
}

/* --- Why the swipe tracks declare no touch-action -------------------------
   They had touch-action: pan-x, put there to let a vertical drag through to
   the page. It does the opposite. The value is not a hint about which
   direction belongs to whom: it is the complete list of gestures the browser
   may perform for a touch starting there, intersected down the ancestor
   chain. Declaring pan-x therefore forbade vertical panning outright - the
   page would not move, and the gesture was discarded rather than handed
   upward.

   auto is what these want. The browser reads the first few pixels of the
   drag, gives a sideways one to the track and an upward one to the page, and
   it is better at that than a declaration can be.
   ------------------------------------------------------------------------- */

/* --- The trail, on a phone -------------------------------------------------
   Taken off. The chips directly above it already name the region and the area,
   linked to the same two archives, so the trail repeats them a line later in
   smaller type - and on a narrow screen it wraps to two lines to do it. It
   stays on desktop, where the room costs nothing.
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.tour__underbar .breadcrumb {
		display: none;
	}
}

/* --- A photograph is not a thing to pick up --------------------------------
   The other half of why a finger on the gallery stopped the page. On iOS,
   pressing an image and moving starts dragging the image itself: the browser
   hands the gesture to a drag, and the page underneath does not move. It is
   the same finger action as beginning a scroll, so whether you scrolled or
   picked up a photograph came down to a few milliseconds.

   The lightbox is still there for anyone who wants the picture larger, which
   is what pressing it is for on a page like this.
   ------------------------------------------------------------------------- */
.tour__gallery img,
.tour-carousel__slide img {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	user-select: none;
}