/* -----------------------------------------------------------------------------
   Whitsunday Escape — Components
   Each block notes the Figma node it was built from.
-------------------------------------------------------------------------------- */

/* =============================================================================
   Buttons — Figma: Buttons/Button (8018:14630 secondary, 8018:15181 primary)
   ========================================================================== */

.wse-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: var(--wse-radius-md);
	font-size: var(--wse-text-md-size);
	font-weight: var(--wse-weight-semibold);
	line-height: var(--wse-text-md-line);
	white-space: nowrap;
	/* box-shadow: var(--wse-shadow-xs), var(--wse-inset-bottom); */
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wse-btn--secondary {
	background-color: var(--wse-white);
	border-color: var(--wse-gray-300);
	color: var(--wse-gray-700);
}

.wse-btn--secondary:hover {
	background-color: var(--wse-gray-100);
}

/* Brand-tinted outline — Figma 8452:8553: white, a brand-300 edge, brand-700
   label. Reads as secondary without going grey. */
.wse-btn--outline {
	background-color: var(--wse-white);
	border-color: var(--wse-brand-300);
	color: var(--wse-brand-700);
	box-shadow: var(--wse-shadow-xs), var(--wse-inset-bottom);
}

.wse-btn--outline:hover {
	background-color: var(--wse-brand-25);
}

.wse-btn--primary {
	background-color: var(--wse-brand-600);
	/* Dark edge on the outside, light band just inside it — matches the render. */
	border-color: rgba(10, 13, 18, 0.18);
	color: var(--wse-white);
	box-shadow:
		var(--wse-shadow-xs),
		inset 0 0 0 1px rgba(255, 255, 255, 0.12),
		var(--wse-inset-bottom);
}

.wse-btn--primary:hover {
	background-color: #1f92ad; /* brand-600 darkened for hover; not a Figma token */
}

/* =============================================================================
   Header / nav bar
   Figma: 3027:426 (Desktop, light) · 6279:6679 (Mobile, light)
   ========================================================================== */

.wse-header {
	background-color: var(--wse-white);
	padding-block: 16px;
}

.wse-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wse-gutter-desktop);
}

/* Logo — explicit box per breakpoint, matching the designed geometry. */
.wse-header__logo {
	display: block;
	flex-shrink: 0;
	width: 82px;
	height: 44px;
}

.wse-header__logo img {
	width: 100%;
	height: 100%;
}

/* Primary navigation — desktop only. */
.wse-nav {
	display: none;
}

.wse-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wse-gutter-desktop);
}

.wse-nav__link {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-md-line);
	white-space: nowrap;
}

.wse-nav__link:hover {
	color: var(--wse-brand-600);
}

/* Header call-to-action pair — desktop only. */
.wse-header__actions {
	display: none;
	align-items: center;
	gap: 10px;
}

/* Hamburger — mobile only. Figma: menu-04 (8018:16018) in Buttons/Button 8018:15761 */
.wse-menu-toggle {
	/* The glyph strokes with currentColor, so the variant just sets a colour.
	   Figma: Gray/600 on the light bar, white on the dark one. */
	color: var(--wse-gray-600);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: none;
	border: 0;
	border-radius: var(--wse-radius-md);
}

.wse-menu-toggle:hover {
	background-color: var(--wse-gray-100);
}

.wse-menu-toggle img,
.wse-menu-toggle .wse-icon {
	width: 20px;
	height: 20px;
}

@media (min-width: 1024px) {
	.wse-header__logo {
		width: 104px;
		height: 56px;
	}

	.wse-nav {
		display: block;
		margin-inline-start: auto;
	}

	.wse-header__actions {
		display: flex;
	}

	.wse-menu-toggle {
		display: none;
	}
}

/* --- Mobile drawer --------------------------------------------------------- */
.wse-mobile-nav {
	display: none;
	padding-block: 16px 24px;
	border-top: 1px solid var(--wse-gray-200);
}

.wse-mobile-nav[data-open="true"] {
	display: block;
}

.wse-mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.wse-mobile-nav__link {
	display: block;
	padding: 10px 0;
	color: var(--wse-gray-700);
	font-size: var(--wse-text-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-md-line);
}

.wse-mobile-nav__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (min-width: 1024px) {
	.wse-mobile-nav {
		display: none !important;
	}
}

/* =============================================================================
   Header — dark variant, used over full-bleed imagery
   Figma: 6271:9049 (Desktop, dark) · 6279:7367 (Mobile, dark)
   ========================================================================== */

.wse-header--dark {
	background-color: rgba(0, 20, 29, 0.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.wse-header--dark .wse-menu-toggle {
	color: var(--wse-white);
}

.wse-header--dark .wse-menu-toggle:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.wse-header--dark .wse-nav__link {
	color: var(--wse-gray-200);
}

.wse-header--dark .wse-nav__link:hover {
	color: var(--wse-white);
}

.wse-header--dark .wse-mobile-nav {
	border-top-color: rgba(255, 255, 255, 0.2);
}

.wse-header--dark .wse-mobile-nav__link {
	color: var(--wse-gray-200);
}

/* =============================================================================
   Site search field — header (160 × 40) and top of the mobile menu (full width)
   Same white field on both header variants, so the text inside stays dark.
   ========================================================================== */

.wse-site-search {
	position: relative;
	display: flex;
	margin: 0;
}

.wse-site-search__input {
	width: 160px;
	height: 46px;
	padding: 0 40px 0 14px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-sm);
	color: var(--wse-gray-900);
	font-family: inherit;
	font-size: var(--wse-text-sm-size);
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
}

.wse-site-search__input::placeholder {
	color: var(--wse-gray-500);
}

.wse-site-search__input::-webkit-search-cancel-button {
	display: none;
}

.wse-site-search__input:focus {
	border-color: var(--wse-brand-600);
	outline: none;
}

.wse-site-search__submit {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--wse-radius-sm);
	color: var(--wse-gray-600);
	cursor: pointer;
}

.wse-site-search__submit:hover {
	color: var(--wse-brand-700);
}

.wse-site-search__submit .wse-icon {
	width: 17px;
	height: 17px;
}

.wse-header--dark .wse-site-search__input {
	border-color: var(--wse-white);
}

/* Just above the desktop breakpoint the row runs out of room with the field
   in it, so the gaps and the field tighten until there is space again. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.wse-header__inner,
	.wse-nav__list {
		gap: 20px;
	}

	.wse-site-search--header .wse-site-search__input {
		width: 140px;
	}
}

/* Mobile menu: full width, 48px tall, 16px text so iOS does not zoom in. */
.wse-site-search--mobile {
	margin-bottom: 8px;
}

.wse-site-search--mobile .wse-site-search__input {
	width: 100%;
	height: 46px;
	padding-right: 48px;
	font-size: var(--wse-text-md-size);
}

.wse-site-search--mobile .wse-site-search__submit {
	top: 2px;
	right: 2px;
	width: 44px;
	height: 44px;
}

.wse-site-search--mobile .wse-site-search__submit .wse-icon {
	width: 19px;
	height: 19px;
}

/* =============================================================================
   Search card — Figma: 8096:3177 (Desktop) · 8207:9524 (Mobile)
   ========================================================================== */

.wse-search-card {
	width: 100%;
	margin-inline: auto;
	padding: 24px 32px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-xl);
	box-shadow: var(--wse-shadow-xl);
}

.wse-search-card__row {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wse-search-card__fields {
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
	gap: 24px;
	min-width: 0;
}

.wse-search-card__field {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.wse-search-card__label {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

/* Native select styled to match the designed control. */
.wse-search-card__select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 12px 32px 12px 0;
	background-color: transparent;
	background-image: url("../img/icons/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 20px 20px;
	border: 0;
	border-radius: 0;
	color: var(--wse-gray-700);
	font-family: inherit;
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
	text-overflow: ellipsis;
	outline: none;
}

.wse-search-card__divider {
	flex-shrink: 0;
	width: 100%;
	height: 1px;
	background-color: var(--wse-gray-200);
	border: 0;
	margin: 0;
}

/* Guest stepper */
.wse-stepper {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 4px;
}

.wse-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 10px;
	background-color: var(--wse-gray-100);
	border: 0;
	border-radius: var(--wse-radius-pill);
}

.wse-stepper__btn:hover {
	background-color: var(--wse-gray-200);
}

/* Set by main.js once the count hits its min or max. */
.wse-stepper__btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

.wse-stepper__btn img,
.wse-stepper__btn .wse-icon {
	width: 20px;
	height: 20px;
}

.wse-stepper__value {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--wse-gray-700);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

@media (min-width: 1024px) {
	.wse-search-card__row {
		flex-direction: row;
		align-items: flex-end;
		gap: var(--wse-gutter-desktop);
	}

	.wse-search-card__fields {
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
	}

	.wse-search-card__divider {
		align-self: flex-end;
		width: 1px;
		height: 32px;
		margin-bottom: 12px;
	}
}

/* Large button — Figma: 8040:15404 "Explore Boats", 8096:3168 "Find your boat" */
.wse-btn--lg {
	padding: 12px 18px;
}

.wse-btn__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* =============================================================================
   Section heading — Figma: 8096:2960 (Desktop) · 8201:7811 (Mobile)
   Eyebrow + title + subtitle. Centred by default, --start for left-aligned.
   ========================================================================== */

.wse-section-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: 768px;
	margin-inline: auto;
	text-align: center;
}

.wse-section-heading__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.wse-section-heading__eyebrow {
	color: var(--wse-brand-600);
	font-size: var(--wse-text-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-md-line);
}

.wse-section-heading__title {
	color: var(--wse-navy);
	font-size: var(--wse-display-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-display-md-line);
	letter-spacing: var(--wse-display-tracking);
}

.wse-section-heading__subtitle {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-lg-size);
	line-height: var(--wse-text-lg-line);
}

.wse-section-heading--start {
	align-items: flex-start;
	margin-inline: 0;
	text-align: start;
}

/* Mobile variant of the component — Figma: I8412:12793;8201:7812. */
@media (max-width: 767px) {
	.wse-section-heading {
		gap: 16px;
	}

	.wse-section-heading__eyebrow {
		font-size: var(--wse-text-sm-size);
		line-height: var(--wse-text-sm-line);
	}
}

/* Oversized gradient title — Figma: I8294:4365;8096:2957 ("Our Awards") */
.wse-section-heading__title--gradient {
	font-size: var(--wse-display-2xl-size);
	line-height: var(--wse-display-2xl-line);
	background-image: linear-gradient(to bottom, var(--wse-brand-600), rgba(36, 167, 199, 0));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* =============================================================================
   Text link with trailing arrow — Figma: 8173:3000 "View boats"
   ========================================================================== */

.wse-link-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-shrink: 0;
	color: var(--wse-brand-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-semibold);
	line-height: var(--wse-text-sm-line);
	white-space: nowrap;
}

.wse-link-arrow img,
.wse-link-arrow .wse-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* =============================================================================
   Category card — Figma: 8165:2772 (rest) · 8166:2890 (hover)

   Two layouts, deliberately kept apart so neither has to undo the other:
   · Base — a plain stacked card in DOM order: photo, title, features, "Best
     for", link. Everything is visible and nothing depends on hover, so phones
     and touch tablets keep the whole card.
   · Pointer devices from 768px up — the designed grid, where hover swaps the
     photo for the feature list.
   ========================================================================== */

.wse-category-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	box-shadow: var(--wse-shadow-xl);
	overflow: hidden;
}

.wse-category-card__media {
	padding: 12px 12px 0;
}

.wse-category-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wse-radius-img);
}

.wse-category-card__title {
	padding: 24px 20px;
	color: var(--wse-navy);
	font-size: var(--wse-display-xs-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-display-xs-line);
}

.wse-category-card__detail {
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* The title above owns the gap; this owns the one down to the button, which
	   only has an auto top margin and so guarantees no spacing of its own. */
	padding: 0 20px 24px;
}

/*
 * On mobile the CTA reads as a full-width secondary button, matching the
 * "View all boats" button in the Featured section. The auto top margin pins it
 * to the bottom edge so the buttons line up when cards sit side by side.
 * The desktop hover face below strips it back to the plain text link.
 */
.wse-category-card__link {
	justify-content: center;
	margin: auto 20px 20px;
	padding: 10px 16px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	box-shadow: var(--wse-shadow-xs), var(--wse-inset-bottom);
}

.wse-best-for {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background-color: var(--wse-brand-25);
	border-radius: var(--wse-radius-img);
	color: var(--wse-gray-900);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-best-for__label {
	font-weight: var(--wse-weight-semibold);
}

/*
 * Share the row evenly once the cards sit side by side; without this the cards
 * size to their content and the second one overflows the container. Applies to
 * touch tablets too, which keep the stacked card above.
 */
@media (min-width: 768px) {
	.wse-category-card {
		flex: 1 1 0;
	}
}

/* --- Hover face ---------------------------------------------------------- */
/*
 * Only pointer devices get the swap: a touch screen has no hover, so it stays
 * on the stacked card and nobody loses the feature list.
 */
@media (min-width: 768px) and (hover: hover) {
	.wse-category-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: 1fr auto;
		grid-template-areas:
			"media media"
			"title link";
		min-height: 472px;
	}

	.wse-category-card__media {
		grid-area: media;
		min-height: 0;
	}

	.wse-category-card__media img {
		height: 100%;
		aspect-ratio: auto;
	}

	.wse-category-card__title {
		grid-area: title;
		align-self: end;
		padding: 32px 8px 24px 32px;
	}

	.wse-category-card__detail {
		grid-area: detail;
		display: none;
		gap: 32px;
		padding: 0 32px 24px;
	}

	.wse-category-card__link {
		grid-area: link;
		align-self: end;
		margin: 0;
		padding: 0 32px 24px 0;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.wse-category-card:hover,
	.wse-category-card:focus-within {
		grid-template-areas:
			"title title"
			"detail detail"
			"link link";
		grid-template-rows: auto 1fr auto;
	}

	.wse-category-card:hover .wse-category-card__media,
	.wse-category-card:focus-within .wse-category-card__media {
		display: none;
	}

	.wse-category-card:hover .wse-category-card__detail,
	.wse-category-card:focus-within .wse-category-card__detail {
		display: flex;
		padding-top: 32px;
	}

	.wse-category-card:hover .wse-category-card__title,
	.wse-category-card:focus-within .wse-category-card__title {
		align-self: start;
		padding-bottom: 0;
	}

	.wse-category-card:hover .wse-category-card__link,
	.wse-category-card:focus-within .wse-category-card__link {
		justify-self: end;
		padding-right: 32px;
	}
}

/* =============================================================================
   Badge — Figma: 8096:4140 ("Limited Availability")
   ========================================================================== */

.wse-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	background-color: var(--wse-brand-50);
	border: 1px solid var(--wse-brand-200);
	border-radius: var(--wse-radius-lg);
	color: var(--wse-brand-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
	white-space: nowrap;
}

/* Solid fill sets Boat of the Month apart from the outlined availability badge. */
.wse-badge--month {
	background-color: var(--wse-brand-600);
	border-color: var(--wse-brand-600);
	color: var(--wse-white);
}

/* Figma 8096:3463 — the availability badge turns green on the boat detail page. */
.wse-badge--success {
	background-color: var(--wse-success-50);
	border-color: var(--wse-success-200);
	color: var(--wse-success-700);
}

/* =============================================================================
   Star rating — Figma: 8096:1811
   ========================================================================== */

.wse-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.wse-rating__value {
	color: var(--wse-gray-500);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

.wse-rating img,
.wse-rating .wse-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* =============================================================================
   Boat card — Figma: 8096:4137 (wrapper) + Card body 8096:1843
   ========================================================================== */

/*
 * No flex-basis here on purpose. The featured row sets it at 1024px, where the
 * container is a row. In the mobile column a flex-basis of 0 collapses the card
 * to nothing: overflow:hidden zeroes the automatic minimum height that would
 * otherwise clamp it back up to its content.
 */
.wse-boat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	box-shadow: var(--wse-shadow-xl);
	transition: border-color 0.2s ease;
}

/*
 * The whole card opens the boat. The title anchor is stretched over the card
 * rather than wrapping it in a second link, so screen readers still hear one
 * link named after the boat.
 */
.wse-boat-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

@media (hover: hover) {
	.wse-boat-card:hover {
		border-color: var(--wse-brand-200);
	}

	.wse-boat-card:hover .wse-boat-card__name {
		color: var(--wse-brand-600);
	}
}

.wse-boat-card__media {
	position: relative;
	height: 192px;
	background-color: var(--wse-gray-200);
	flex-shrink: 0;
}

.wse-boat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Two badges sit side by side, wrapping onto a second line only when the card
 * is too narrow to hold both.
 */
.wse-boat-card__badges {
	position: absolute;
	top: 16px;
	right: 16px;
	left: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 8px;
}

.wse-boat-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 32px;
	padding: 24px;
}

.wse-boat-card__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wse-boat-card__meta {
	display: flex;
	align-items: center;
	gap: 4px;
}

.wse-boat-card__type {
	flex: 1 0 0;
	min-width: 0;
	color: var(--wse-brand-600);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

.wse-boat-card__name {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-xl-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-xl-line);
	margin-bottom: 12px;
}

.wse-spec-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wse-spec {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
	white-space: nowrap;
}

.wse-spec img,
.wse-spec .wse-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Above the stretched title link, so the button stays a link of its own. */
.wse-boat-card__footer {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-top: auto;
}

.wse-price {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	min-width: 0;
}

.wse-price__label {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-xs-size);
	line-height: var(--wse-text-xs-line);
}

/* Sized down from the Figma display-xs so a longer price range still fits. */
.wse-price__value {
	color: var(--wse-brand-600);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
}

/* =============================================================================
   Testimonial card — Figma: 8096:3716 (Type 1, Desktop)
   Avatar background colours are per-person tokens from the Figma avatar set.
   ========================================================================== */

.wse-testimonial {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	min-width: 0;
	padding: 32px 32px 48px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	text-align: center;
}

.wse-testimonial__avatar {
	width: 64px;
	height: 64px;
	border-radius: var(--wse-radius-pill);
	overflow: hidden;
	flex-shrink: 0;
}

.wse-testimonial__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wse-testimonial__name {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-xl-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-xl-line);
}

.wse-testimonial__meta {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
	margin-top: 4px;
}

.wse-testimonial__quote {
	margin: 0;
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	line-height: var(--wse-text-lg-line);
}

/* =============================================================================
   Footer — Figma: 6015:406 (Desktop, light) · 6300:6467 (Mobile, light)
   ========================================================================== */

.wse-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding-block: 64px 32px;
	background-color: var(--wse-white);
}

.wse-footer__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
}

.wse-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.wse-footer__logo {
	display: block;
	width: 178px;
	height: 96px;
	flex-shrink: 0;
}

.wse-footer__logo img {
	width: 100%;
	height: 100%;
}

.wse-footer__contact {
	max-width: 448px;
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-footer__contact p + p {
	margin-top: 16px;
}

.wse-footer__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
}

.wse-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.wse-footer__heading {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
}

.wse-footer__links {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wse-footer__link {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-footer__link:hover {
	color: var(--wse-brand-600);
}

/* Award grid — 64px cells, Figma: 8031:12498 */
.wse-footer__awards {
	display: grid;
	grid-template-columns: repeat(4, 64px);
	gap: 16px;
}

.wse-footer__award {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
}

.wse-footer__award img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.wse-footer__award--circle {
	border-radius: var(--wse-radius-pill);
	overflow: hidden;
}

.wse-footer__divider {
	width: 100%;
	height: 1px;
	background-color: var(--wse-gray-200);
	border: 0;
	margin: 0;
}

.wse-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-footer__legal a:hover {
	color: var(--wse-brand-600);
}

.wse-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Acknowledgement of Country — Figma: 8131:5011 */
.wse-acknowledgement {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background-color: var(--wse-gray-blue-50);
	border-radius: var(--wse-radius-img);
}

.wse-acknowledgement__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-md-line);
}

.wse-acknowledgement__body {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-acknowledgement__body p + p {
	margin-top: 14px;
}

@media (min-width: 1024px) {
	.wse-footer__top {
		flex-direction: row;
		gap: var(--wse-gutter-desktop);
	}

	.wse-footer__cols {
		flex-wrap: nowrap;
		gap: 64px;
	}
}

/* =============================================================================
   Page heading — Figma: 8096:3279 (Desktop) · 8207:9879 (Mobile)
   Breadcrumbs + title + supporting copy. Used at the top of inner pages.
   ========================================================================== */

.wse-page-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 896px;
}

/* Mobile sizes first, per the Page heading component — Figma: 8207:9880. */
.wse-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wse-breadcrumbs li {
	padding-block: 8px;
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-breadcrumbs a {
	text-decoration: underline;
}

.wse-breadcrumbs a:hover {
	color: var(--wse-brand-600);
}

.wse-breadcrumbs li[aria-current="page"] {
	color: var(--wse-brand-600);
	font-weight: var(--wse-weight-semibold);
}

.wse-breadcrumbs__sep {
	color: var(--wse-gray-400);
}

.wse-page-heading__title {
	color: var(--wse-navy);
	font-size: var(--wse-display-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-display-sm-line);
	margin-top: 12px;
}

.wse-detail-intro .wse-page-heading__title {
	margin-top: 0;
}

.wse-page-heading__lead {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-lg-size);
	line-height: var(--wse-text-lg-line);
}

@media (min-width: 768px) {
	.wse-breadcrumbs ol {
		gap: 16px;
	}

	.wse-breadcrumbs li {
		font-size: var(--wse-text-md-size);
		line-height: var(--wse-text-md-line);
	}

	/* Display lg carries the negative tracking; Display sm on mobile has none. */
	.wse-page-heading__title {
		font-size: var(--wse-display-lg-size);
		line-height: var(--wse-display-lg-line);
		letter-spacing: var(--wse-display-tracking);
	}
}

/* =============================================================================
   CTA box — Figma: 6282:2177 (Desktop, Light) · 6294:3092 (Desktop, Dark)
   ========================================================================== */

/* Mobile — Figma: 6282:2178 */
.wse-cta {
	padding: 48px 0;
	background-color: var(--wse-white);
}

.wse-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 48px 20px;
	background-color: var(--wse-brand-50);
	border-radius: var(--wse-radius-img);
	text-align: center;
	overflow: hidden;
}

.wse-cta__title {
	color: var(--wse-brand-600);
	font-size: var(--wse-display-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-display-sm-line);
	margin-bottom: 16px;
}

.wse-cta__body {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-cta__inner > .wse-btn {
	width: 100%;
	padding: 12px 18px;
}

@media (min-width: 768px) {
	.wse-cta {
		padding: 64px 0;
	}

	.wse-cta__inner {
		padding: 48px 64px;
		border-radius: var(--wse-radius-lg);
	}

	.wse-cta__title {
		font-size: var(--wse-display-md-size);
		line-height: var(--wse-display-md-line);
		letter-spacing: var(--wse-display-tracking);
		margin-bottom: 20px;
	}

	.wse-cta__body {
		font-size: var(--wse-text-lg-size);
		line-height: var(--wse-text-lg-line);
	}

	.wse-cta__inner > .wse-btn {
		width: auto;
		padding: 10px 16px;
	}
}

/* =============================================================================
   Comparison table — Figma: 8091:1463 ("Compare by Star Rating")
   Zebra striping comes from the design, so it is applied by row.
   ========================================================================== */

.wse-compare {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.wse-compare__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-xl-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-xl-line);
}

.wse-compare__scroll {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	box-shadow: var(--wse-shadow-xl);
}

.wse-compare table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	table-layout: fixed;
}

.wse-compare th,
.wse-compare td {
	padding: 24px;
	text-align: start;
	vertical-align: middle;
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-compare tbody tr:nth-child(odd) th,
.wse-compare tbody tr:nth-child(odd) td {
	background-color: var(--wse-gray-blue-50);
}

.wse-compare tbody tr:nth-child(even) th,
.wse-compare tbody tr:nth-child(even) td {
	background-color: var(--wse-white);
}

.wse-compare th {
	color: var(--wse-gray-900);
	font-weight: var(--wse-weight-medium);
	white-space: nowrap;
}

.wse-compare td {
	color: var(--wse-gray-700);
	font-weight: var(--wse-weight-regular);
}

.wse-compare .wse-rating {
	height: 20px;
}

/* Mobile — Figma: 8207:10678. The table fits the screen rather than scrolling:
   the label column shrinks to its longest word and the tiers share the rest. */
@media (max-width: 767px) {
	.wse-compare {
		gap: 16px;
	}

	.wse-compare__title {
		font-size: var(--wse-text-lg-size);
		line-height: var(--wse-text-lg-line);
	}

	.wse-compare__scroll {
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.wse-compare table {
		min-width: 0;
		table-layout: auto;
	}

	.wse-compare th,
	.wse-compare td {
		padding: 16px 12px;
		border-bottom: 1px solid var(--wse-gray-200);
	}

	/* No zebra striping on mobile; rows are split by a rule instead. */
	.wse-compare tbody tr:nth-child(even) th,
	.wse-compare tbody tr:nth-child(even) td {
		background-color: var(--wse-gray-blue-50);
	}

	.wse-compare tbody tr:last-child th,
	.wse-compare tbody tr:last-child td {
		border-bottom: 0;
	}

	/* 1% holds the label column at its min-content width, so "Star Rating" wraps. */
	.wse-compare th {
		width: 1%;
		padding-inline-start: 0;
		white-space: normal;
	}

	.wse-compare td {
		width: 33%;
	}

	.wse-compare .wse-rating {
		flex-wrap: wrap;
		height: auto;
	}

	.wse-compare .wse-rating .wse-icon {
		width: 12px;
		height: 12px;
	}
}

/* =============================================================================
   List toolbar — Figma: 8294:5337 (result count + sort control)
   ========================================================================== */

.wse-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.wse-toolbar__count {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-lg-size);
	line-height: var(--wse-text-lg-line);
}

.wse-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 16px;
}

.wse-toolbar__sort-label {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
}

/* Mobile: the count and sort stack, and the select takes the rest of its row
   so the longer option labels don't run under the chevron. */
@media (max-width: 767px) {
	.wse-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.wse-toolbar__sort-label {
		flex-shrink: 0;
		white-space: nowrap;
	}

	.wse-toolbar__sort .wse-select {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
}

/* Boxed select — Figma: Input dropdown 8294:5341 */
.wse-select {
	appearance: none;
	-webkit-appearance: none;
	width: 224px;
	max-width: 100%;
	padding: 10px 40px 10px 14px;
	background-color: var(--wse-white);
	background-image: url("../img/icons/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 20px 20px;
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
	color: var(--wse-gray-900);
	font-family: inherit;
	font-size: var(--wse-text-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-md-line);
}

/* =============================================================================
   Pagination — Figma: 8057:21853
   ========================================================================== */

/*
 * A listing waiting on its next page. The old results stay in place and stay
 * readable, so the layout never jumps; only the controls go inert, and the
 * cursor says why.
 */
[data-wse-listing].is-loading {
	position: relative;
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

[data-wse-listing].is-loading * {
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	[data-wse-listing].is-loading {
		transition: none;
	}
}

.wse-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding-top: 20px;
	width: 100%;
}

/* Mobile pagination component — Figma: 8057:21857 */
@media (max-width: 767px) {
	.wse-pagination {
		padding-top: 16px;
	}
}

.wse-pagination__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	box-shadow: var(--wse-shadow-xs), var(--wse-inset-bottom);
}

.wse-pagination__arrow:hover {
	background-color: var(--wse-gray-100);
}

.wse-pagination__arrow img,
.wse-pagination__arrow .wse-icon {
	width: 20px;
	height: 20px;
}

.wse-pagination__arrow[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

.wse-pagination__numbers {
	display: flex;
	align-items: flex-start;
	gap: 2px;
}

.wse-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: var(--wse-radius-md);
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
	text-align: center;
}

.wse-pagination__link:hover {
	background-color: var(--wse-gray-100);
}

.wse-pagination__link[aria-current="page"] {
	background-color: var(--wse-brand-50);
	color: var(--wse-brand-700);
}

.wse-pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
}

/* =============================================================================
   Boat grid — 3-up on desktop
   ========================================================================== */

.wse-boat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	width: 100%;
}

@media (min-width: 640px) {
	.wse-boat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.wse-boat-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =============================================================================
   Media gallery — Figma: 8035:21599 (main image + thumbnail strip)
   ========================================================================== */

.wse-gallery {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.wse-gallery__main {
	height: 320px;
	background-color: var(--wse-gray-200);
	border-radius: var(--wse-radius-lg);
	overflow: hidden;
}

.wse-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The plain row lives on the :not(.slick-initialized) rule further down, not
   here: left on the base selector it kept applying after slick took over, and
   a flex container turns slick's .slick-list into a flex item, which measures
   the track at tens of thousands of pixels. */
.wse-gallery__thumbs {
	padding-bottom: 4px;
}

.wse-gallery__thumb {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	padding: 0;
	background-color: var(--wse-gray-200);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-md);
	overflow: hidden;
	opacity: 0.5;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.wse-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wse-gallery__thumb:hover {
	opacity: 0.8;
}

.wse-gallery__thumb[aria-current="true"] {
	border: 2px solid var(--wse-brand-400);
	opacity: 1;
}

/* Figma 8207:12648 — the strip runs smaller thumbs on phones. */
@media (max-width: 767px) {
	.wse-gallery__thumb {
		width: 64px;
		height: 64px;
	}
}

@media (min-width: 768px) {
	.wse-gallery__main {
		height: 512px;
	}
}

/* =============================================================================
   Horizontal tabs — Figma: 8294:4851
   ========================================================================== */

.wse-tabs {
	width: 100%;
	border-bottom: 1px solid var(--wse-gray-200);
}

.wse-tabs__list {
	display: flex;
	gap: 12px;
	align-items: center;
}

.wse-tabs__tab {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 4px 12px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--wse-gray-500);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-semibold);
	line-height: var(--wse-text-sm-line);
	white-space: nowrap;
}

.wse-tabs__tab:hover {
	color: var(--wse-gray-700);
}

.wse-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--wse-tab-border);
	color: var(--wse-tab-text);
}

.wse-tabpanel[hidden] {
	display: none;
}

/* =============================================================================
   Prose — long-form body copy
   Editor output: the_content() and every wysiwyg field, on any post type. It
   styles the tags an editor can produce rather than one template's markup, so
   a page, a boat, a guide entry and an information panel all read alike.
   Figma: 8332:7940 (activity body copy, heading and table)
   ========================================================================== */

.wse-prose {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

/*
 * Spacing lives on the gaps between blocks rather than on each tag, so the
 * first and last block sit flush and the prose never adds a stray edge to a
 * section that already has padding.
 */
.wse-prose * + * {
	margin-top: 16px;
}

/* A new heading, figure or table opens a section, so it gets more air above. */
.wse-prose * + h2,
.wse-prose * + h3,
.wse-prose * + h4,
.wse-prose * + h5,
.wse-prose * + h6,
.wse-prose * + figure,
.wse-prose * + table,
.wse-prose * + blockquote,
.wse-prose * + hr,
.wse-prose * + .wp-block-image,
.wse-prose * + .wp-block-table {
	margin-top: 32px;
}

/* ...but its own first line belongs to it, so that gap stays tight. */
.wse-prose > h1 + *,
.wse-prose > h2 + *,
.wse-prose > h3 + *,
.wse-prose > h4 + *,
.wse-prose > h5 + *,
.wse-prose > h6 + * {
	margin-top: 16px;
}

.wse-prose h1,
.wse-prose h2,
.wse-prose h3,
.wse-prose h4,
.wse-prose h5,
.wse-prose h6 {
	color: var(--wse-gray-900);
	font-weight: var(--wse-weight-medium);
}

.wse-prose h1 {
	font-size: var(--wse-display-sm-size);
	line-height: var(--wse-display-sm-line);
}

.wse-prose h2 {
	font-size: var(--wse-text-xl-size);
	line-height: var(--wse-text-xl-line);
}

.wse-prose h3 {
	font-size: var(--wse-text-lg-size);
	line-height: var(--wse-text-lg-line);
}

.wse-prose h4,
.wse-prose h5,
.wse-prose h6 {
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-prose a {
	color: var(--wse-brand-600);
	text-decoration: underline;
}

.wse-prose a:hover {
	color: var(--wse-brand-700);
}

.wse-prose strong,
.wse-prose b,
.wse-prose th {
	color: var(--wse-gray-900);
	font-weight: var(--wse-weight-semibold);
}

.wse-prose ul,
.wse-prose ol {
	padding-inline-start: 24px;
}

.wse-prose ul {
	list-style: disc;
}

.wse-prose ol {
	list-style: decimal;
}

.wse-prose li + li,
.wse-prose li > ul,
.wse-prose li > ol {
	margin-top: 4px;
}

.wse-prose blockquote {
	padding-inline-start: 20px;
	border-inline-start: 2px solid var(--wse-brand-600);
	color: var(--wse-gray-700);
}

.wse-prose img,
.wse-prose video,
.wse-prose iframe {
	max-width: 100%;
	height: auto;
	border-radius: var(--wse-radius-img);
}

.wse-prose figcaption {
	margin-top: 8px;
	color: var(--wse-gray-500);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-prose hr {
	border: 0;
	border-top: 1px solid var(--wse-gray-200);
}

/*
 * A wide table would push the page sideways, so it scrolls inside its own
 * wrapper — the block editor gives every table one, and a table pasted
 * without one keeps its own scroller.
 */
.wse-prose .wp-block-table,
.wse-prose figure {
	max-width: 100%;
	overflow-x: auto;
}

.wse-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-prose th,
.wse-prose td {
	padding: 12px;
	border-bottom: 1px solid var(--wse-gray-200);
	text-align: start;
	vertical-align: top;
}

/* The first column runs to the edge of the column it sits in. */
.wse-prose tr > :first-child {
	padding-inline-start: 0;
}

.wse-prose thead th {
	color: var(--wse-gray-600);
	text-transform: uppercase;
}

.wse-prose tbody tr:last-child th,
.wse-prose tbody tr:last-child td {
	border-bottom: 0;
}

.wse-prose > :first-child {
	margin-top: 0;
}

/*
 * [gallery] — the Columns setting in the media modal becomes .gallery-columns-N
 * (1–9, default 3). Items sit on a grid, so prose's block gaps stay off them.
 */
.wse-prose .gallery {
	display: grid;
	grid-template-columns: repeat(var(--wse-gallery-columns, 3), minmax(0, 1fr));
	gap: 16px;
}

.wse-prose .gallery-columns-1 { --wse-gallery-columns: 1; }
.wse-prose .gallery-columns-2 { --wse-gallery-columns: 2; }
.wse-prose .gallery-columns-3 { --wse-gallery-columns: 3; }
.wse-prose .gallery-columns-4 { --wse-gallery-columns: 4; }
.wse-prose .gallery-columns-5 { --wse-gallery-columns: 5; }
.wse-prose .gallery-columns-6 { --wse-gallery-columns: 6; }
.wse-prose .gallery-columns-7 { --wse-gallery-columns: 7; }
.wse-prose .gallery-columns-8 { --wse-gallery-columns: 8; }
.wse-prose .gallery-columns-9 { --wse-gallery-columns: 9; }

.wse-prose .gallery * + *,
.wse-prose .gallery * + figure {
	margin-top: 0;
}

.wse-prose .gallery .gallery-item {
	margin: 0;
	overflow: visible;
	text-align: center;
}

/* Images keep their chosen size, centred in the column, never stretched. */
.wse-prose .gallery img {
	display: block;
	margin-inline: auto;
}

.wse-prose .gallery .gallery-caption {
	margin-top: 8px;
}

/* More than two across is too narrow on a phone. */
@media (max-width: 767px) {
	.wse-prose .gallery:not(.gallery-columns-1) {
		--wse-gallery-columns: 2;
	}
}

/* =============================================================================
   Feature chips — Figma: 8040:4659
   ========================================================================== */

.wse-chips {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wse-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 12px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	box-shadow: var(--wse-shadow-xs), var(--wse-inset-bottom);
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-semibold);
	line-height: var(--wse-text-sm-line);
	white-space: nowrap;
}

/* Chips sit inside a list item so each one can anchor its own popover. */
.wse-chips__item {
	position: relative;
	display: flex;
}

.wse-chip[aria-expanded="true"] {
	border-color: var(--wse-gray-900);
	color: var(--wse-gray-900);
}

/*
 * A chip carrying a sentence rather than a label: it wraps, reads from the
 * left, and lets its link sit on the same line while there is room.
 */
.wse-chip--inclusions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 4px 12px;
	font-weight: var(--wse-weight-medium);
	text-align: left;
	white-space: normal;
}

/* =============================================================================
   Detail popover — Figma: 8040:4805
   ========================================================================== */

.wse-popover {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 5;
	width: 512px;
	max-width: calc(100vw - 2 * var(--wse-gutter-mobile));
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	box-shadow: var(--wse-shadow-xl);
	text-align: left;
	white-space: normal;
}

/* Flipped by script when the popover would run past the right-hand edge. */
.wse-popover[data-align="end"] {
	left: auto;
	right: 0;
}

.wse-popover[hidden] {
	display: none;
}

/*
 * Holds the close button alone, now that the popover has no visible title, so
 * it floats into the body's top corner rather than sitting in a band of its
 * own. The popover is absolutely positioned and so already contains the float.
 */
.wse-popover__head {
	float: right;
	display: flex;
	align-items: center;
	margin: 8px 8px 0 0;
}

.wse-popover__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 8px;
	background: none;
	border: 0;
	border-radius: var(--wse-radius-md);
	color: var(--wse-gray-600);
}

.wse-popover__close:hover {
	background-color: var(--wse-gray-50);
}

.wse-popover__close .wse-icon {
	width: 20px;
	height: 20px;
}

.wse-popover__body {
	padding: 16px 24px 20px;
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

/* =============================================================================
   Spec cards — Figma: 8099:9791 (Specs) and 8294:4898 (Features)
   ========================================================================== */

.wse-spec-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: start;
}

.wse-spec-grid__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wse-spec-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 16px 8px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-md);
}

.wse-spec-card__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
	text-transform: uppercase;
}

.wse-spec-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wse-gray-200);
}

.wse-spec-row:last-child {
	border-bottom: 0;
}

.wse-spec-row__label {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	gap: 8px;
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-spec-row__label > .wse-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin: 0 2px;
}

.wse-spec-row__info {
	position: relative;
	display: flex;
}

.wse-spec-row__info-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wse-gray-500);
}

.wse-spec-row__info-btn .wse-icon {
	width: 16px;
	height: 16px;
	margin: 0 2px;
}

.wse-spec-row__info-btn:hover,
.wse-spec-row__info-btn[aria-expanded="true"] {
	color: var(--wse-gray-700);
}

.wse-spec-row__value {
	margin-left: auto;
	color: var(--wse-gray-900);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
	text-align: right;
}

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

/*
 * Narrow screens have no room to hang a 512px card off a single chip, so the
 * popover drops the per-trigger anchor and spans its list or row instead.
 */
@media (max-width: 767px) {
	.wse-chips__item,
	.wse-spec-row__info {
		position: static;
	}

	.wse-popover {
		width: 100%;
		max-width: none;
	}
}

/* =============================================================================
   Booking panel — Figma: 8035:21653
   ========================================================================== */

.wse-booking {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	padding: 32px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	box-shadow: var(--wse-shadow-xl);
}

.wse-booking__from {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-booking__price {
	color: var(--wse-gray-900);
	font-size: var(--wse-display-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-display-sm-line);
	margin-top: 2px;
}

.wse-booking__specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.wse-booking__spec {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 16px;
	background-color: var(--wse-gray-blue-50);
	border-radius: var(--wse-radius-md);
}

.wse-booking__spec dt {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-booking__spec dd {
	margin: 0;
	min-height: 28px;
	display: flex;
	align-items: center;
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
}

/*
 * The bar holds the half of the card that goes sticky on phones. On desktop
 * both wrappers dissolve so the card lays out as one column again: price, the
 * tiles, note, buttons.
 */
@media (min-width: 1024px) {
	.wse-booking__bar,
	.wse-booking__summary {
		display: contents;
	}

	/* The tiles come first in the markup, for the phone layout's sake. */
	.wse-booking__price-group {
		order: -1;
	}
}

/*
 * Figma 8207:14156 — the panel drops its card on phones and sits straight on
 * the page ground, which is what turns the tiles white...
 */
@media (max-width: 1023px) {
	.wse-booking {
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.wse-booking__spec {
		background-color: var(--wse-white);
		border: 1px solid var(--wse-gray-100);
	}

	/*
	 * ...and Figma 8207:14115 puts the price and the two buttons in a card
	 * pinned to the foot of the screen, so they stay in reach the whole way
	 * down the page.
	 */
	.wse-booking__bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 20;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 20px var(--wse-gutter-mobile);
		/* Clears the home indicator on phones that report one. */
		padding-bottom: calc(20px + env(safe-area-inset-bottom));
		background-color: var(--wse-white);
		border: 1px solid var(--wse-gray-100);
		border-radius: var(--wse-radius-lg) var(--wse-radius-lg) 0 0;
		box-shadow: var(--wse-shadow-xl);
	}

	.wse-booking__summary {
		display: flex;
		align-items: flex-start;
		gap: 24px;
	}

	.wse-booking__from,
	.wse-booking__note {
		font-size: var(--wse-text-xs-size);
		line-height: var(--wse-text-xs-line);
	}

	.wse-booking__price-group {
		flex-shrink: 0;
	}

	.wse-booking__price {
		font-size: var(--wse-text-md-size);
		line-height: var(--wse-text-md-line);
	}

	.wse-booking__note {
		flex: 1 0 0;
		min-width: 0;
	}

	.wse-booking__actions .wse-btn {
		flex: 1 0 0;
		min-width: 0;
		/* Undoes the stacked card's full-width buttons. */
		width: auto;
	}

	/* The design leads with Enquiry and closes on the primary button. */
	.wse-booking__actions .wse-btn--primary {
		order: 1;
	}
}

.wse-booking__note {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-booking__actions {
	display: flex;
	gap: 12px;
}

.wse-booking__actions .wse-btn {
	width: 100%;
}

/* =============================================================================
   Review card (Testimonial type 3) — Figma: 8452:7245
   ========================================================================== */

.wse-review-slide {
	height: 100%;
}

.wse-review {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	overflow: hidden;
}

.wse-review__media {
	height: 192px;
	flex-shrink: 0;
}

.wse-review__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wse-review__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
}

.wse-review__quote {
	margin: 0;
	color: var(--wse-gray-900);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-review__name {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-md-line);
}

.wse-review__meta {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
	margin-top: 4px;
}

/* =============================================================================
   Horizontal scroller with arrow controls
   ========================================================================== */

.wse-scroller__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.wse-scroller__controls {
	display: flex;
	gap: 8px;
}

.wse-scroller__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(280px, 1fr);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
}

.wse-scroller__track > * {
	scroll-snap-align: start;
}

/*
 * Figma 8096:3969 — the reviews row runs a 12px gutter, half of what the shared
 * slide padding makes elsewhere. Split across two slides, so 6px a side, with
 * the list's negative margin matching so the first card still starts flush.
 */
.wse-reviews .wse-scroller__track {
	gap: 12px;
}

.wse-reviews .wse-scroller__track .slick-list {
	margin-inline: -6px;
}

.wse-reviews .wse-scroller__track .slick-slide {
	padding-inline: 6px;
}

/*
 * slick runs this track with variableWidth, which measures the slide — and
 * .slick-initialized drops the grid that had been sizing it. Without a width of
 * its own the slide collapses to the quote's text, so the wrapper carries one.
 * Figma 8452:7610 (mobile) and 8452:7245 (desktop) set the two widths.
 */
.wse-scroller__track.slick-initialized .wse-review-slide {
	width: 320px;
	max-width: calc(100vw - 2 * var(--wse-gutter-mobile));
}

@media (min-width: 1024px) {
	/* Figma: review cards are 480px and the row scrolls, rather than three
	   squeezed to fit. Narrower cards make the quotes wrap two lines taller. */
	.wse-scroller__track {
		grid-auto-columns: 480px;
	}

	.wse-scroller__track.slick-initialized .wse-review-slide {
		width: 480px;
	}
}

/* Larger arrow link — Figma: 8035:21709 ("Plan my trip") */
.wse-link-arrow--lg {
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

/* =============================================================================
   Trip card — Figma: 8331:4985 (Card body, Type=Trip)
   Same shell as the boat card; different body content.
   ========================================================================== */

.wse-trip-card {
	position: relative;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	min-width: 0;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	box-shadow: var(--wse-shadow-xl);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

/*
 * The whole card opens the itinerary. The title anchor is stretched over the
 * card rather than wrapping it in a second link, so screen readers still hear
 * one link named after the itinerary.
 */
.wse-trip-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

@media (hover: hover) {
	.wse-trip-card:hover {
		border-color: var(--wse-brand-200);
	}

	.wse-trip-card:hover .wse-trip-card__title {
		color: var(--wse-brand-600);
	}
}

.wse-trip-card__media {
	height: 192px;
	background-color: var(--wse-gray-200);
	flex-shrink: 0;
}

.wse-trip-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wse-trip-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 32px;
	padding: 24px;
}

.wse-trip-card__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wse-trip-card__eyebrow {
	color: var(--wse-brand-600);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

.wse-trip-card__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-xl-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-xl-line);
	margin-bottom: 12px;
}

.wse-trip-card__excerpt {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

/* Above the stretched title link, so the button stays a link of its own. */
.wse-trip-card__actions {
	position: relative;
	z-index: 2;
	margin-top: auto;
}

/* Trip grid — same 3-up rhythm as the boat grid. */
.wse-trip-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	width: 100%;
}

@media (min-width: 640px) {
	.wse-trip-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.wse-trip-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =============================================================================
   Itinerary timeline — Figma: 8331:6352 (numbered days with a connector rail)
   ========================================================================== */

.wse-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.wse-timeline__day {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

/*
 * The rail joins each marker to the next and stops at the last one — Figma
 * 8331:6352 ends it on the final marker, not under the day's copy. Drawn per
 * day rather than once down the list, which would have to know how tall that
 * last day is; the negative bottom carries it across the 32px gap.
 *
 * A gradient rather than a dashed border: the export is stroke-dasharray="4 4"
 * and CSS picks its own dash length from the border width, which at 1px comes
 * out far finer than the design.
 */
.wse-timeline__day:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 32px;
	bottom: -32px;
	/* Centred on the marker, which is twice this offset wide. */
	left: 16px;
	width: 1px;
	transform: translateX(-50%);
	background-image: repeating-linear-gradient(
		to bottom,
		var(--wse-brand-400) 0 4px,
		transparent 4px 8px
	);
}

.wse-timeline__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background-color: var(--wse-brand-600);
	border: 4px solid var(--wse-gray-blue-50);
	border-radius: var(--wse-radius-pill);
	color: var(--wse-white);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

.wse-timeline__body {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.wse-timeline__eyebrow {
	color: var(--wse-brand-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-timeline__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
	margin-top: 4px;
}

.wse-timeline__text {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

/* One image per row until there is width for the designed pair. */
.wse-timeline__media {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.wse-timeline__media img {
	width: 100%;
	height: 192px;
	object-fit: cover;
	border-radius: var(--wse-radius-img);
}

/* The wider day — Figma: 8331:6224. */
@media (min-width: 768px) {
	.wse-timeline__day:not(:last-child)::before {
		top: 38px;
		left: 19px;
	}

	.wse-timeline__marker {
		width: 38px;
		height: 38px;
	}

	.wse-timeline__title {
		font-size: var(--wse-text-xl-size);
		line-height: var(--wse-text-xl-line);
	}

	.wse-timeline__media {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =============================================================================
   At-a-glance panel — Figma: 8331:5453
   ========================================================================== */

.wse-glance {
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* Mobile keeps the 32px band top and bottom but narrows the sides so the
	   panel matches the container gutter — Figma: 8452:8258. */
	padding: 32px 16px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	box-shadow: var(--wse-shadow-xl);
}

.wse-glance__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-xl-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-xl-line);
	margin-bottom: 16px;
}

.wse-glance__table {
	width: 100%;
	border-collapse: collapse;
}

.wse-glance__table th,
.wse-glance__table td {
	padding-block: 12px;
	border-bottom: 1px solid var(--wse-gray-200);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-glance__table tr:last-child th,
.wse-glance__table tr:last-child td {
	border-bottom: 0;
}

.wse-glance__table th {
	text-align: start;
	color: var(--wse-gray-700);
	font-weight: var(--wse-weight-regular);
}

.wse-glance__table td {
	text-align: end;
	color: var(--wse-gray-900);
	font-weight: var(--wse-weight-medium);
}

.wse-glance__note {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
	margin-top: 16px;
}

.wse-glance .wse-btn {
	width: 100%;
}

@media (min-width: 768px) {
	.wse-glance {
		padding: 32px;
	}
}

/* =============================================================================
   Guide card — Figma: 8332:7528 (Card body, Type=Island)
   Used for both activities and islands on the guide pages.
   ========================================================================== */

.wse-guide-card {
	position: relative;
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	min-width: 0;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	overflow: hidden;
}

.wse-guide-card__media {
	height: 192px;
	background-color: var(--wse-gray-200);
	flex-shrink: 0;
}

.wse-guide-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wse-guide-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
}

.wse-guide-activities .wse-guide-card__body {
	background-color: var(--wse-gray-blue-50);
}

.wse-guide-card__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.wse-guide-card__heading {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.wse-guide-card__eyebrow {
	color: var(--wse-brand-600);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

.wse-guide-card__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-xl-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-xl-line);
}

.wse-guide-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	flex-shrink: 0;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	box-shadow: var(--wse-shadow-xs), var(--wse-inset-bottom);
}

.wse-guide-card:hover .wse-guide-card__link {
	background-color: var(--wse-gray-100);
}

/* The title link is stretched over the card, so the whole card is one link. */
.wse-guide-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* The focus ring goes round the card; inset, as the card clips its overflow. */
.wse-guide-card__title a:focus-visible {
	outline: none;
}

.wse-guide-card__title a:focus-visible::after {
	outline: 2px solid var(--wse-brand-600);
	outline-offset: -2px;
}

.wse-guide-card__link img,
.wse-guide-card__link .wse-icon {
	width: 20px;
	height: 20px;
}

.wse-guide-card__text {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-guide-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	width: 100%;
}

@media (min-width: 640px) {
	.wse-guide-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media (min-width: 1024px) {
	.wse-guide-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =============================================================================
   Featured card — Figma: 8332:7487 (image beside copy)
   ========================================================================== */

.wse-featured-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	overflow: hidden;
}

.wse-featured-card__media {
	height: 240px;
	background-color: var(--wse-gray-200);
	flex-shrink: 0;
}

.wse-featured-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wse-featured-card__body {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	padding: 32px 24px;
	background-color: var(--wse-gray-blue-50);
}

/* The button's link is stretched over the card, so the whole card is one link. */
.wse-featured-card__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.wse-featured-card:hover .wse-featured-card__cta {
	background-color: #1f92ad; /* Same as .wse-btn--primary:hover. */
}

/* The focus ring goes round the card; inset, as the card clips its overflow. */
.wse-featured-card__cta:focus-visible {
	outline: none;
}

.wse-featured-card__cta:focus-visible::after {
	outline: 2px solid var(--wse-brand-600);
	outline-offset: -2px;
}

@media (min-width: 1024px) {
	.wse-featured-card {
		flex-direction: row;
		align-items: stretch;
	}

	.wse-featured-card__media {
		width: 512px;
		height: auto;
	}

	.wse-featured-card__body {
		gap: 48px;
		padding: 48px;
	}
}

/* Mobile drops the card framing: the image runs edge to edge and the tint
   spans the full width — Figma: 8412:12762. */
@media (max-width: 767px) {
	.wse-guide-featured {
		padding-inline: 0;
	}

	.wse-featured-card {
		gap: 32px;
		padding-bottom: 64px;
		background-color: var(--wse-gray-blue-50);
		border: 0;
		border-radius: 0;
	}

	.wse-featured-card__media {
		height: 256px;
	}

	.wse-featured-card__body {
		padding: 0 var(--wse-gutter-mobile);
		background-color: transparent;
	}

	.wse-featured-card__body .wse-btn {
		display: flex;
		width: 100%;
	}
}

/* =============================================================================
   Search input — Figma: 8452:6977
   ========================================================================== */

.wse-search-input {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 576px;
	padding: 10px 14px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

.wse-search-input img,
.wse-search-input .wse-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* The magnifier is the submit button; it keeps the icon's footprint. */
.wse-search-input__submit {
	display: inline-flex;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.wse-search-input input {
	flex: 1 0 0;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--wse-gray-900);
	font-family: inherit;
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

/* The browser's own clear button is replaced by .wse-search-input__clear. */
.wse-search-input input::-webkit-search-cancel-button,
.wse-search-input input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.wse-search-input input::-ms-clear {
	display: none;
}

.wse-search-input__clear {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--wse-gray-500);
}

.wse-search-input__clear:hover {
	color: var(--wse-gray-900);
}

.wse-search-input:has(input:placeholder-shown) .wse-search-input__clear {
	display: none;
}

.wse-search-input input::placeholder {
	color: var(--wse-gray-500);
}

.wse-search-input input:focus {
	outline: none;
}

.wse-search-input:focus-within {
	outline: 2px solid var(--wse-brand-600);
	outline-offset: 2px;
}

/* =============================================================================
   Category sidebar — Figma: 8411:11364
   ========================================================================== */

.wse-categories {
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	box-shadow: var(--wse-shadow-xl);
	padding-bottom: 16px;
}

.wse-categories__title {
	padding: 32px 32px 16px;
	color: var(--wse-gray-900);
	font-size: var(--wse-text-xl-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-xl-line);
}

.wse-categories__list {
	display: flex;
	flex-direction: column;
}

.wse-categories__item {
	padding: 4px 8px;
}

.wse-categories__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: var(--wse-radius-md);
	color: var(--wse-gray-700);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-categories__link:hover {
	background-color: var(--wse-gray-50);
}

.wse-categories__label {
	flex: 1 0 0;
	min-width: 0;
}

.wse-categories__count {
	flex-shrink: 0;
	padding: 2px 10px;
	background-color: var(--wse-gray-50);
	border: 1px solid var(--wse-gray-200);
	border-radius: var(--wse-radius-lg);
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

.wse-categories__link[aria-current="true"] {
	background-color: var(--wse-brand-50);
	color: var(--wse-brand-700);
	font-weight: var(--wse-weight-semibold);
}

.wse-categories__link[aria-current="true"] .wse-categories__count {
	background-color: var(--wse-brand-50);
	border-color: var(--wse-brand-200);
	color: var(--wse-brand-700);
}

/* =============================================================================
   FAQ list — Figma: 8411:11241
   ========================================================================== */

.wse-faq {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.wse-faq__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-display-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-display-sm-line);
}

.wse-faq__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wse-faq__question {
	display: flex;
	align-items: center;
	min-height: 48px;
	color: var(--wse-brand-600);
	font-size: var(--wse-text-xl-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-xl-line);
}

.wse-faq__answer {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-faq__divider {
	width: 100%;
	height: 1px;
	background-color: var(--wse-gray-200);
	border: 0;
	margin: 0;
}

.wse-faq__list {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* While the category dropdown shows, it already names the topic, so the list
   title is kept for screen readers only. display: contents lets a search count
   sit in .wse-faq's gap without an empty head row adding a second one. */
@media (max-width: 1023px) {
	.wse-faq__head {
		display: contents;
	}

	.wse-faq__title {
		display: none;
	}
}

/* Mobile — Figma: 8452:8604 */
@media (max-width: 767px) {
	.wse-faq__question {
		min-height: 0;
		font-size: var(--wse-text-lg-size);
		line-height: var(--wse-text-lg-line);
	}

	.wse-faq__answer {
		color: var(--wse-gray-700);
	}
}

/* =============================================================================
   Forms — Figma: 8420:13869 (Contact us)
   ========================================================================== */

.wse-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 768px;
	margin-inline: auto;
}

.wse-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wse-label,
.wse-fieldset__legend {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

.wse-required {
	color: var(--wse-brand-600);
}

.wse-input,
.wse-textarea {
	width: 100%;
	padding: 10px 14px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
	color: var(--wse-gray-900);
	font-family: inherit;
	font-size: var(--wse-text-md-size);
	/* One line of text, so the padding alone sets the height of the field. */
	line-height: 1;
}

.wse-input::placeholder,
.wse-textarea::placeholder {
	color: var(--wse-gray-500);
}

.wse-textarea {
	min-height: 154px;
	resize: vertical;
	line-height: var(--wse-text-md-line); /* Many lines: they need the leading. */
}

/* Full-width variant of the boxed select. */
.wse-select--block {
	width: 100%;
}

.wse-help {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

/* The start date field is the box the night count is pinned to, below its input. */
.gform_wrapper .wse-gf-date {
	position: relative;
}

.wse-date-nights {
	margin: 4px 0 0;
	color: var(--wse-gray-600);
	font-size: var(--wse-text-xs-size);
	font-style: italic;
	line-height: 1.4;
	white-space: nowrap;
}

/* Two-up field row */
.wse-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 640px) {
	.wse-field-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Choice groups (checkbox / radio) */
.wse-fieldset {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	margin: 0;
	border: 0;
}

.wse-choices {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 32px;
}

.wse-choices--2col {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.wse-choices--2col {
		grid-template-columns: 1fr 1fr;
	}
}

.wse-choice {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-choice input {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--wse-brand-600);
}

/* Phone field: country prefix + number */
.wse-phone {
	display: flex;
	align-items: stretch;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
	overflow: hidden;
}

/*
 * The number input next to it is a single line tall, so the select is trimmed
 * to the same box: 6px + its 24px line matches the input's 10px + 16px. The
 * padding does the work rather than a line-height, which a select honours only
 * in some browsers.
 */
.wse-phone select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 36px; /* The input's box, less the wrapper's border. */
	padding: 6px 28px 6px 14px;
	background-color: transparent;
	background-image: url("../img/icons/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 16px 16px;
	border: 0;
	color: var(--wse-gray-900);
	font-family: inherit;
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-phone input {
	flex: 1 0 0;
	min-width: 0;
	padding: 10px 14px 10px 0;
	border: 0;
	background: none;
	color: var(--wse-gray-900);
	font-family: inherit;
	font-size: var(--wse-text-md-size);
	line-height: 1;
}

.wse-phone input:focus,
.wse-phone select:focus {
	outline: none;
}

.wse-phone:focus-within {
	outline: 2px solid var(--wse-brand-600);
	outline-offset: 2px;
}

.wse-form__submit {
	width: 100%;
	min-height: 60px;
	margin-top: 24px; /* + the 24px form gap = the 48 Figma shows */
}

/* =============================================================================
   Checklist — Figma: 8332:8786 (check-circle-broken + short line of copy)
   ========================================================================== */

.wse-checklist {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wse-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--wse-gray-900);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-checklist img,
.wse-checklist .wse-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
}

/* Extra pieces used by the destination/activity information panel. */
.wse-glance__subtitle {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-xl-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-xl-line);
	margin-bottom: 16px;
}

.wse-glance__prose {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-glance__prose p + p {
	margin-top: 16px;
}

/* FAQ results header — Figma: 8452:6988 (title beside a result count) */
.wse-faq__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.wse-faq__count {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-lg-size);
	line-height: var(--wse-text-lg-line);
}

/* =============================================================================
   Inline icons
   Icons are inlined as <svg><use href="#i-name"></use></svg> against a symbol
   sprite at the top of each page, so a glyph used 60 times costs one copy.
   ========================================================================== */

.wse-icon {
	display: block;
	flex-shrink: 0;
}

/* The sprite itself is definitions only and must never take up space. */
.wse-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* =============================================================================
   Contact Form 7
   CF7 wraps every field in its own spans, so the theme's form layout is applied
   to that structure rather than fighting it.
   ========================================================================== */

/* The wrapper span must not become a layout box of its own. */
.wse-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.wse-phone .wpcf7-form-control-wrap {
	display: contents;
}

.wse-stepper .wpcf7-form-control-wrap {
	display: contents;
}

/* Choice groups */
.wse-fieldset .wpcf7-checkbox,
.wse-fieldset .wpcf7-radio {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 32px;
}

@media (min-width: 640px) {
	.wse-fieldset--2col .wpcf7-checkbox,
	.wse-fieldset--2col .wpcf7-radio {
		grid-template-columns: 1fr 1fr;
	}
}

.wse-fieldset .wpcf7-list-item {
	margin: 0;
}

.wse-fieldset .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-fieldset .wpcf7-list-item input {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--wse-brand-600);
}

/* The guest stepper's number input doubles as the value display. */
.wse-stepper__input {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wse-gray-700);
	font-family: inherit;
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
	text-align: center;
	-moz-appearance: textfield;
}

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

/* Validation and response messages */
.wse-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #d92d20;
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: #d92d20;
}

.wse-form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 16px;
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.wse-form.sent .wpcf7-response-output {
	border-color: var(--wse-brand-600);
	background-color: var(--wse-brand-25);
	color: var(--wse-brand-700);
}

.wse-form.invalid .wpcf7-response-output,
.wse-form.failed .wpcf7-response-output {
	border-color: #d92d20;
	color: #d92d20;
}

.wse-form .wpcf7-spinner {
	margin: 0 0 0 12px;
}

/* =============================================================================
   Header overlaying a hero
   On pages that open with a full-bleed hero the dark header is lifted out of
   flow so the image runs behind it. The hero then carries the header's height
   as padding so its content sits where the design puts it.
   ========================================================================== */

.wse-has-hero .wse-page {
	position: relative;
}

.wse-has-hero .wse-header--dark {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 3;
}

.wse-has-hero .wse-hero {
	padding-top: 76px;
}

@media (min-width: 1024px) {
	.wse-has-hero .wse-hero {
		padding-top: 88px;
	}
}

/*
 * Contact Form 7 appends three elements as direct children of the form: a
 * container of hidden inputs, a spinner and a response area. In a flex column
 * each of those becomes a row and contributes a 24px gap, which pushed the
 * form 54px taller than the design. Take them out of the flow instead.
 */
.wse-form {
	position: relative;
}

.wse-form > .hidden-fields-container {
	display: none;
}

.wse-form > .wpcf7-response-output[aria-hidden="true"] {
	display: none;
}

.wse-form > .wpcf7-spinner {
	position: absolute;
	right: 16px;
	bottom: 18px;
	margin: 0;
}

/*
 * CF7 wraps each control in a span, so an inline-level control sits on the
 * text baseline and leaves descender space beneath it — 6px under the textarea.
 */
.wse-form .wse-input,
.wse-form .wse-textarea,
.wse-form .wse-select {
	display: block;
}

/* =============================================================================
   Gravity Forms — Figma: 8420:13869 (Contact us)
   Gravity Forms' own CSS is switched off in functions/gravity-forms.php, so its
   markup is laid out here with the same tokens as the .wse-form rules above.
   ========================================================================== */

.gform_wrapper {
	position: relative;
	width: 100%;
	max-width: 768px;
	margin-inline: auto;
}

/* The page template supplies the heading. */
.gform_wrapper .gform_heading,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield_visibility_hidden {
	display: none !important;
}

.gform_wrapper .screen-reader-text,
.gform_wrapper .hidden_label > .gfield_label,
.gform_wrapper .wse-stepper .instruction {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px 16px;
}

.gform_wrapper .gfield {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Start and end date share a row even on mobile, as the one date control does in Figma. */
.gform_wrapper .gfield--width-quarter {
	grid-column: span 6;
}

@media (min-width: 640px) {
	.gform_wrapper .gfield--width-half {
		grid-column: span 6;
	}

	.gform_wrapper .gfield--width-quarter {
		grid-column: span 3;
	}
}

.gform_wrapper .gfield_label {
	padding: 0;
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

/* A legend sits in the fieldset's border slot, outside the flex gap. */
.gform_wrapper legend.gfield_label {
	margin-bottom: 12px;
}

.gform_wrapper .gfield_label > .gfield_required {
	margin-left: 2px;
	color: var(--wse-brand-600);
}

.gform_wrapper .gfield_description {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

/* Text-like controls. The phone and stepper wrappers style their own. */
.gform_wrapper .ginput_container:not(.wse-phone):not(.wse-stepper) > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.ginput_total),
.gform_wrapper .ginput_container:not(.wse-phone) > select,
.gform_wrapper .ginput_container > textarea,
.gform_wrapper .ginput_complex > span > input:not([type="hidden"]),
.gform_wrapper .ginput_complex > span > select,
.gform_wrapper .gchoice input.gchoice_other_control {
	display: block;
	width: 100%;
	padding: 10px 14px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
	color: var(--wse-gray-900);
	font-family: inherit;
	font-size: var(--wse-text-md-size);
	/* One line of text, so the padding alone sets the height of the field. */
	line-height: 1;
}

.gform_wrapper .ginput_container > input::placeholder,
.gform_wrapper .ginput_container > textarea::placeholder,
.gform_wrapper .ginput_complex > span > input::placeholder,
.gform_wrapper .gchoice input.gchoice_other_control::placeholder {
	color: var(--wse-gray-500);
}

/* Trimmed to the inputs' box for the reason given on .wse-phone select. */
.gform_wrapper .ginput_container:not(.wse-phone) > select,
.gform_wrapper .ginput_complex > span > select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 38px; /* The height the inputs come out at, border included. */
	padding-block: 6px;
	padding-right: 40px;
	background-image: url("../img/icons/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 20px 20px;
	line-height: var(--wse-text-md-line);
}

/* The placeholder option reads as a placeholder until a choice is made. */
.gform_wrapper .ginput_container:not(.wse-phone) > select:has(option.gf_placeholder:checked),
.gform_wrapper .ginput_complex > span > select:has(option.gf_placeholder:checked) {
	color: var(--wse-gray-500);
}

.gform_wrapper .ginput_container > textarea {
	height: 154px;
	resize: vertical;
	line-height: var(--wse-text-md-line); /* Many lines: they need the leading. */
}

/* Phone: the .wse-phone rules above draw the box; its controls stay bare. */
.gform_wrapper .wse-phone select {
	field-sizing: content; /* hug the chosen code rather than the longest option */
	padding-right: 20px;
	background-position: right center;
	background-size: 20px 20px;
}

.gform_wrapper .wse-phone input {
	padding-left: 12px;
}

@media (min-width: 768px) {
	.gform_wrapper .wse-phone input {
		padding-left: 10px;
	}
}

/* The label's 6px gap plus the 40px buttons make the 66px row Figma shows. */
.gform_wrapper .wse-stepper {
	padding-block: 0;
}

/* Stepper buttons on this form are the outlined buttons Figma shows. */
.gform_wrapper .wse-stepper__btn {
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-300);
	border-radius: var(--wse-radius-md);
	box-shadow: var(--wse-shadow-xs), var(--wse-inset-bottom);
}

.gform_wrapper .wse-stepper__btn:hover {
	background-color: var(--wse-gray-100);
}

/* Choice groups. Columns fill top to bottom, so the order reads down each one. */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 640px) {
	.gform_wrapper .wse-gf-2col .gfield_checkbox,
	.gform_wrapper .wse-gf-2col .gfield_radio {
		display: block;
		columns: 2 256px;
		column-gap: 32px;
		max-width: 544px;
	}

	.gform_wrapper .wse-gf-2col .gchoice {
		break-inside: avoid;
		margin-bottom: 12px;
	}

	.gform_wrapper .wse-gf-2col .gchoice:nth-child(3n) {
		margin-bottom: 0;
	}
}

.gform_wrapper .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.gform_wrapper .gchoice input {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin: 2px 0 0;
	accent-color: var(--wse-brand-600);
}

.gform_wrapper .gchoice label {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

/* Mobile: 32px above a 44px button. Desktop: 48px above a 60px button. */
.gform_wrapper .gform_footer {
	position: relative;
	margin-top: 32px;
}

.gform_wrapper .gform_footer .wse-form__submit {
	min-height: 44px;
	margin-top: 0;
	padding: 10px 16px;
}

@media (min-width: 768px) {
	.gform_wrapper .gform_footer {
		margin-top: 24px; /* + the button's own 24px = the 48 Figma shows */
	}

	.gform_wrapper .gform_footer .wse-form__submit {
		min-height: 60px;
		margin-top: 24px;
		padding: 12px 18px;
	}
}

.gform_wrapper .gform_footer .gform-loader,
.gform_wrapper .gform_footer .gform_ajax_spinner {
	position: absolute;
	right: 16px;
	bottom: 18px;
}

/* --- Field types used by the older enquiry forms ------------------------- */

/* Name (First / Last) and Address: sub-inputs in a grid, sub-labels as help text. */
.gform_wrapper .ginput_complex {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.gform_wrapper .ginput_complex > span {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.gform_wrapper .ginput_complex .gf_clear {
	display: none;
}

/* Complex fields put the legend 6px above their inputs, like a plain label. */
.gform_wrapper .gfield--type-name > legend.gfield_label,
.gform_wrapper .gfield--type-address > legend.gfield_label {
	margin-bottom: 6px;
}

.gform_wrapper .gform-field-label--type-sub.hidden_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.gform_wrapper .gform-field-label--type-sub {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

@media (min-width: 640px) {
	.gform_wrapper .ginput_container--name.gf_name_has_2,
	.gform_wrapper .ginput_container_address {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gform_wrapper .ginput_container_address .ginput_full {
		grid-column: 1 / -1;
	}
}

/* Intro and sub-heading copy placed in HTML fields. */
.gform_wrapper .gfield_html {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.gform_wrapper .gfield_html :is(h2, h3, h4) {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-md-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-md-line);
}

.gform_wrapper .gfield_html :is(h2, h3, h4) strong {
	font-weight: inherit;
}

/* Section break: a divider, with its title only when one is set. */
.gform_wrapper .gsection {
	padding-top: 24px;
	border-top: 1px solid var(--wse-gray-200);
}

.gform_wrapper .gsection:not(:has(.gsection_title:not(:empty))) {
	padding-top: 0;
}

.gform_wrapper .gsection_title:empty {
	display: none;
}

.gform_wrapper .gsection_title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
}

/* Long checkbox lists (gf_list_4col): columns that fill top to bottom. */
@media (min-width: 640px) {
	.gform_wrapper .gf_list_4col .gfield_checkbox {
		display: block;
		columns: 2;
		column-gap: 32px;
		margin-bottom: -12px;
	}

	.gform_wrapper .gf_list_4col .gchoice {
		break-inside: avoid;
		margin-bottom: 12px;
	}
}

@media (min-width: 768px) {
	.gform_wrapper .gf_list_4col .gfield_checkbox {
		columns: 4;
		column-gap: 24px;
	}
}

/* Radio "Other" choice with its own text input. */
.gform_wrapper .gchoice:has(.gchoice_other_control) {
	align-items: center;
}

.gform_wrapper .gchoice input.gchoice_other_control {
	flex: 0 1 240px;
	width: auto;
	height: auto;
	margin: 0;
}

/* Product price and running total. */
.gform_wrapper .ginput_product_price_label,
.gform_wrapper .ginput_product_price {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

/* The total is a read-only input; show it as text, not as a box. */
.gform_wrapper .ginput_container_total > input.ginput_total {
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.gform_wrapper .ginput_total {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
}

/*
 * Date fields. main.js opens the calendar from anywhere on one, not just its
 * icon.
 *
 * Safari on iOS builds a date input around an inner value box of its own: it
 * holds an intrinsic width, centres the text and measures itself rather than
 * taking the line-height the field is given. In the half-width start/end pair
 * that box is wider than its column, so the value spills out of the field and
 * over the one beside it. Dropping the native appearance, letting the inner box
 * shrink and holding the field to the same 38px as the rest keeps it in its
 * column. Chrome on Android lays a date input out the way the desktop does and
 * is unaffected either way.
 */
.gform_wrapper input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
	min-height: 38px;
	text-align: left;
	cursor: pointer;
}

/*
 * The inner box takes the field's own line-height and left edge instead of the
 * centred, self-measured one iOS gives it, and is allowed to shrink with the
 * column. Padding and line-height stay on the shared rule above, which is the
 * more specific of the two.
 */
.gform_wrapper input[type="date"]::-webkit-date-and-time-value {
	display: block;
	min-width: 0;
	margin: 0;
	line-height: inherit;
	text-align: left;
}

/* Chrome's picker icon keeps its place in a field narrow enough to squeeze it. */
.gform_wrapper input[type="date"]::-webkit-calendar-picker-indicator {
	flex-shrink: 0;
	margin: 0;
	padding: 0;
}

/* Validation and confirmation */
.gform_wrapper .gform_validation_errors {
	margin-bottom: 24px;
	padding: 16px;
	border: 1px solid #d92d20;
	border-radius: var(--wse-radius-md);
	color: #d92d20;
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.gform_wrapper .gform_validation_errors h2 {
	font-size: inherit;
	font-weight: var(--wse-weight-medium);
	line-height: inherit;
}

.gform_wrapper .gfield_validation_message {
	color: #d92d20;
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
}

.gform_wrapper .gfield_error .ginput_container:not(.wse-phone):not(.wse-stepper) > input,
.gform_wrapper .gfield_error .ginput_container:not(.wse-phone) > select,
.gform_wrapper .gfield_error .ginput_complex > span > input,
.gform_wrapper .gfield_error .ginput_complex > span > select,
.gform_wrapper .gfield_error .ginput_container > textarea,
.gform_wrapper .gfield_error .wse-phone {
	border-color: #d92d20;
}

/* =============================================================================
   Equipment hire — Figma: 8420:17362 (Desktop) · 8452:15113 (Mobile)
   Cards come from functions/equipment-hire.php. The section is wider than the
   768px form, so it breaks out to the page container's width (100cqw, set as a
   size container on .wse-contact .wse-container).
   ========================================================================== */

.gform_wrapper .gfield.wse-gf-equipment {
	width: 100cqw;
	max-width: none;
	margin-block: 8px;
	margin-left: calc((100% - 100cqw) / 2);
}

.wse-equipment {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wse-equipment__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
}

.wse-equipment__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.wse-equipment-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-md);
}

.wse-equipment-card__media {
	height: 160px;
	background-color: var(--wse-gray-200);
}

.wse-equipment-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Info on top, quantity and link pinned to the bottom so a row's cards line up. */
.wse-equipment-card__body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding: 16px;
	background-color: var(--wse-white);
}

.wse-equipment-card__info,
.wse-equipment-card__order,
.wse-equipment-card__quantity {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wse-equipment-card__order {
	align-items: flex-start;
}

.wse-equipment-card__title {
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
}

/* Price table: label column hugs its longest label, prices right-aligned. */
.wse-equipment-card__prices {
	display: grid;
	grid-template-columns: max-content 1fr;
	font-size: var(--wse-text-xs-size);
	line-height: var(--wse-text-xs-line);
}

.wse-equipment-card__prices > div {
	display: contents;
}

.wse-equipment-card__prices dt,
.wse-equipment-card__prices dd {
	padding-block: 8px;
	border-bottom: 1px solid var(--wse-gray-200);
}

.wse-equipment-card__prices > div:last-child dt,
.wse-equipment-card__prices > div:last-child dd {
	border-bottom: 0;
}

.wse-equipment-card__prices dt {
	padding-right: 12px;
	color: var(--wse-gray-700);
}

.wse-equipment-card__prices dd {
	padding-left: 12px;
	color: var(--wse-gray-900);
	font-weight: var(--wse-weight-medium);
	text-align: right;
}

.wse-equipment-card__includes {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	font-size: var(--wse-text-xs-size);
	line-height: var(--wse-text-xs-line);
}

.wse-equipment-card__includes ul {
	grid-row: 1 / span 99;
	padding: 8px 12px 8px 18px;
	color: var(--wse-gray-700);
	list-style: disc;
}

.wse-equipment-card__price {
	grid-column: 2;
	padding: 8px 0 8px 12px;
	color: var(--wse-gray-900);
	font-weight: var(--wse-weight-medium);
	text-align: right;
	white-space: nowrap;
}

.wse-equipment-card__label {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

.wse-equipment-card .wse-stepper {
	gap: 24px;
	padding-block: 0;
}

.wse-equipment-card__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 2px;
	color: var(--wse-brand-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-semibold);
	line-height: var(--wse-text-sm-line);
}

.wse-equipment-card__more:hover {
	text-decoration: underline;
}

.wse-equipment__error {
	margin: 0;
}

.wse-equipment__empty {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
}

@media (min-width: 640px) {
	.wse-equipment__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (min-width: 768px) {
	.gform_wrapper .gfield.wse-gf-equipment {
		margin-block: 24px 0;
	}

	.wse-equipment {
		gap: 24px;
	}

	.wse-equipment__title {
		font-size: 1.5rem; /* 24px, Display xs — no token for it yet */
		line-height: 2rem; /* 32px */
		text-align: center;
	}

	.wse-equipment-card__body {
		padding: 24px;
	}
}

@media (min-width: 1024px) {
	.wse-equipment__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Consent checkbox in a white panel, e.g. the cancellation policy. */
.gform_wrapper .gfield.wse-gf-panel {
	gap: 12px;
	padding: 16px;
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: 12px;
}

.gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.gform_wrapper .ginput_container_consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin: 2px 0 0;
	accent-color: var(--wse-brand-600);
}

.gform_wrapper .gfield_consent_label {
	color: var(--wse-gray-700);
	font-size: var(--wse-text-sm-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-sm-line);
}

/* A floated legend is laid out inside the fieldset, so the label sits in the panel. */
.gform_wrapper .gfield.wse-gf-panel > legend {
	float: left;
	width: 100%;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.gform_wrapper .gfield.wse-gf-panel {
		padding: 24px;
	}
}

.gform_confirmation_message {
	max-width: 768px;
	margin-inline: auto;
	padding: 16px;
	border: 1px solid var(--wse-brand-600);
	border-radius: var(--wse-radius-md);
	background-color: var(--wse-brand-25);
	color: var(--wse-brand-700);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

/* =============================================================================
   Slick integration
   The gallery and reviews use slick; these rules keep its generated wrappers
   inside the theme's geometry rather than slick's defaults.
   ========================================================================== */

/* --- Gallery -------------------------------------------------------------- */
.wse-gallery__main .slick-list,
.wse-gallery__main .slick-track {
	height: 100%;
}

.wse-gallery__slide img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	border-radius: var(--wse-radius-lg);
}

/* Before slick runs, only the first slide should show. */
.wse-gallery__main:not(.slick-initialized) .wse-gallery__slide:not(:first-child) {
	display: none;
}

.wse-gallery__thumbs .slick-list {
	margin-inline: -6px;
}

.wse-gallery__thumbs .slick-slide {
	margin-inline: 6px;
}

/* Figma 8207:12648 — the phone strip closes up to 8px. */
@media (max-width: 767px) {
	.wse-gallery__thumbs .slick-list {
		margin-inline: -4px;
	}

	.wse-gallery__thumbs .slick-slide {
		padding-inline: 4px;
	}

	.wse-gallery__thumbs:not(.slick-initialized) {
		gap: 8px;
	}
}

/*
 * variableWidth measures each slide, and the slide shrink-wraps the thumb, so
 * the size belongs on the thumb (96px, or 64px on phones) and the slide's
 * padding is free to make the gutter.
 */
.wse-gallery__thumbs .wse-gallery__thumb {
	cursor: pointer;
}

/* Un-initialised thumbs keep the plain row layout. */
.wse-gallery__thumbs:not(.slick-initialized) {
	display: flex;
	gap: 12px;
	overflow-x: auto;
}

.wse-gallery__thumbs:not(.slick-initialized) .wse-gallery__thumb {
	flex-shrink: 0;
}

/* --- Reviews -------------------------------------------------------------- */
.wse-scroller__track.slick-initialized {
	display: block;
	overflow: visible;
}

.wse-scroller__track .slick-list {
	margin-inline: -12px;
	overflow: hidden;
}

.wse-scroller__track .slick-slide {
	height: auto;
	padding-inline: 12px;
}

.wse-scroller__track .slick-track {
	display: flex;
	align-items: stretch;
}

.wse-scroller__track .slick-slide > div {
	height: 100%;
}

.wse-scroller__controls .slick-prev,
.wse-scroller__controls .slick-next {
	position: static;
	width: auto;
	height: auto;
	transform: none;
}

.wse-scroller__controls .slick-prev::before,
.wse-scroller__controls .slick-next::before {
	content: none;
}

.wse-scroller__controls .slick-disabled {
	opacity: 0.5;
	pointer-events: none;
}

@media (min-width: 768px) {
	.wse-gallery__slide img {
		height: 512px;
	}
}

/* --- Guide entry gallery -------------------------------------------------- */

/*
 * Figma 8411:5602 — the arrow pair overlaps the strip in its top-right corner,
 * 12px in from the top and right of the image row, over a fade that takes the
 * last image out to the band colour. slick appends the arrows straight into the
 * track, so they need no shell of their own and belong to their own gallery by
 * being inside it.
 *
 * Everything here offsets from the image row, which starts inside the gutter
 * .wse-container puts on the track — hence --wse-place-gallery-edge.
 */
.wse-place-gallery {
	--wse-place-gallery-edge: var(--wse-gutter-mobile);

	/* 20px glyph + 8px padding + 1px border a side: .wse-pagination__arrow. */
	--wse-place-gallery-arrow: 38px;
}
* + .wse-place-gallery {
	margin-top: 24px;
}
/* In a Gallery block the heading is the only thing above the strip and already
   spaces itself off it; both together would double the gap. */
.wse-block--gallery .wse-place-section__title {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.wse-place-gallery {
		--wse-place-gallery-edge: var(--wse-gutter-desktop);
	}
}

.wse-place-gallery.slick-slider {
	position: relative;
}

/* The 4px is room for the native scrollbar of the row slick has replaced;
   left on, it drops the fade below the bottom of the images. */
.wse-place-gallery.slick-initialized {
	padding-bottom: 0;
}

/*
 * The fade the arrows sit on. 192px is what the design draws; on phones that
 * would cover half the visible image, so it shrinks to just wider than the
 * arrow pair — there is no mobile frame for this section to copy.
 */
.wse-place-gallery.slick-initialized::after {
	content: "";
	position: absolute;
	inset-block: 0;
	right: 0;
	z-index: 1;
	width: 96px;
	background-image: linear-gradient(to left, var(--wse-gray-blue-50), rgba(248, 249, 252, 0));
	border-radius: 0 var(--wse-radius-img) var(--wse-radius-img) 0;
	pointer-events: none;
}

@media (min-width: 768px) {
	.wse-place-gallery.slick-initialized::after {
		width: 192px;
	}
}

.wse-place-gallery .slick-prev,
.wse-place-gallery .slick-next {
	position: absolute;
	top: 12px;
	z-index: 2;
}

.wse-place-gallery .slick-next {
	right: calc(var(--wse-place-gallery-edge) + 12px);
}

/* Left of the next arrow, with the 8px the design sets between them. */
.wse-place-gallery .slick-prev {
	right: calc(var(--wse-place-gallery-edge) + 20px + var(--wse-place-gallery-arrow));
}

.wse-place-gallery .slick-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* Both galleries wrap each image in a button so it can open the lightbox.
   Left unstyled a button is inline-block with UA padding and a border, which
   shrink-wraps the image instead of letting it fill the slide. */
.wse-gallery__open,
.wse-place-gallery__open {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--wse-radius-img);
	overflow: hidden;
	cursor: pointer;
}

.wse-gallery__open {
	height: 100%;
}

/* Slide width comes from the shared .wse-scroller__track .slick-slide rule
   below before it, and from the track's grid columns while slick has not run,
   so the slide itself only ever needs to fill what it is given. */
.wse-place-gallery__slide {
	width: 100%;
}

/* Thumb strip arrows sit over the ends of the row: the strip is only 96px tall
   and already narrower than the column, so flanking them outside it would cost
   width the thumbs need. */
.wse-gallery__thumbs.slick-slider {
	position: relative;
}

.wse-gallery__thumbs .slick-prev,
.wse-gallery__thumbs .slick-next {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	width: auto;
	height: auto;
}

.wse-gallery__thumbs .slick-prev {
	left: 0;
}

.wse-gallery__thumbs .slick-next {
	right: 0;
}

/* slick's own ::before glyphs would sit on top of the theme's icon. */
.wse-gallery__thumbs .slick-prev::before,
.wse-gallery__thumbs .slick-next::before {
	content: none;
}

.wse-gallery__thumbs .slick-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/*
 * The place gallery only — the reviews track sizes its slides from the card
 * wrapper instead, and the widths the shared track carries are the review
 * card's, not the gallery's.
 *
 * Images run 320px wide at every breakpoint, with the 24px gutter. The
 * un-initialised track sizes them with a grid column; once slick has run the
 * slide carries the width instead, and because slides are border-box and take
 * the shared 12px inline padding that makes the gutter, that width is the
 * image plus the gutter.
 */
.wse-place-gallery {
	grid-auto-columns: 320px;
	gap: 12px;
}

/* Half the 12px gutter a side, so the first image still starts on the container
   edge — the same split the reviews row makes, at its own width. */
.wse-place-gallery .slick-list {
	margin-inline: -6px;
}

.wse-place-gallery .slick-slide {
	width: 332px;
	padding-inline: 6px;
}

/* =============================================================================
   Deck plan — the plan itself, under its copy in the Deck plan tab
   ========================================================================== */

/*
 * The grey shows through as a letterbox: a plan is far wider than it is tall.
 */
.wse-deck-plan {
	display: block;
	width: 100%;
	padding: 0;
	background-color: var(--wse-gray-200);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-img);
	overflow: hidden;
}

.wse-deck-plan img {
	display: block;
	width: 100%;
	height: auto;
	/* contain, not cover: a plan must never be cropped. */
	object-fit: contain;
}

/* =============================================================================
   Gallery lightbox — Figma: 8040:3900 (desktop) · 8207:14292 (mobile)

   Desktop is a white panel inset from the edges: a bar with the boat's name and
   the close button, then the image, a counter and the thumbnail strip. Phones
   drop the panel and go black edge to edge.
   ========================================================================== */

.wse-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(10, 13, 18, 0.6);
}

/* Beats the display above, so the [hidden] attribute really hides it. */
.wse-lightbox[hidden] {
	display: none;
}

.wse-lightbox__dialog {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1304px;
	/* A definite height, so the stage below has a remainder to fill. */
	height: 100%;
	max-height: 100%;
	background-color: var(--wse-white);
	border-radius: var(--wse-radius-lg);
	overflow: hidden;
}

/*
 * Three columns rather than a spacer element: the title stays centred on the
 * panel however long it is, and the close button keeps the right-hand end.
 */
.wse-lightbox__head {
	display: grid;
	grid-template-columns: 36px 1fr 36px;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--wse-gray-200);
}

.wse-lightbox__title {
	grid-column: 2;
	text-align: center;
	color: var(--wse-gray-900);
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-medium);
	line-height: var(--wse-text-lg-line);
}

.wse-lightbox__close {
	grid-column: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 8px;
	background: none;
	border: 0;
	border-radius: var(--wse-radius-md);
	color: var(--wse-gray-900);
	cursor: pointer;
}

.wse-lightbox__close:hover,
.wse-lightbox__close:focus-visible {
	background-color: var(--wse-gray-100);
}

.wse-lightbox__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	min-height: 0;
	padding: 24px;
}

.wse-lightbox__stage {
	width: 100%;
	max-width: 832px;
	/* Whatever the counter and the thumbnail strip leave of the body. */
	flex: 1;
	/* min-width: 0 stops the flex item from being sized by its widest image. */
	min-width: 0;
	min-height: 0;
	/* background-color: var(--wse-gray-200); */
	/* border: 1px solid var(--wse-gray-100); */
	/* border-radius: var(--wse-radius-img); */
	overflow: hidden;
}

/*
 * slick rebuilds the stage as .slick-list > .slick-track > .slick-slide > div,
 * and every one of those has to pass the height on or the image measures
 * against nothing. The last two selectors cover both shapes: with rows on,
 * .slick-slide is slick's own wrapper and the theme's slide sits inside it;
 * with rows off they are the same element and one of the two matches nothing.
 */
.wse-lightbox__stage .slick-list,
.wse-lightbox__stage .slick-track,
.wse-lightbox__stage .slick-slide,
.wse-lightbox__stage .slick-slide > div,
.wse-lightbox__slide {
	height: 100%;
}

.wse-lightbox__slide img {
	display: block;
	width: 100%;
	height: 100%;
	/* contain, not cover: a deck plan must never be cropped. */
	object-fit: contain;
	/* background-color: #fff; */
}

.wse-lightbox__count {
	color: var(--wse-gray-600);
	font-size: var(--wse-text-sm-size);
	line-height: var(--wse-text-sm-line);
	text-align: center;
}

.wse-lightbox__thumbs {
	width: 100%;
	min-width: 0;
}

.wse-lightbox__thumb {
	width: 96px;
	height: 96px;
	margin-right: 12px;
	background-color: var(--wse-gray-200);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-md);
	overflow: hidden;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.wse-lightbox__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wse-lightbox__thumb[aria-current="true"] {
	border: 2px solid var(--wse-brand-400);
	opacity: 1;
}

.wse-lightbox__thumb:hover {
	opacity: 1;
}

/* Holds the page still behind the open dialog. */
.wse-no-scroll {
	overflow: hidden;
}

/* Figma 8207:14292 — no panel on phones: black to every edge, the image
   full-bleed, and the counter and strip anchored above the home indicator. */
@media (max-width: 767px) {
	.wse-lightbox {
		padding: 0;
		background-color: #000000;
	}

	.wse-lightbox__dialog {
		max-width: none;
		height: 100%;
		background: none;
		border-radius: 0;
	}

	.wse-lightbox__head {
		border-bottom: 0;
	}

	.wse-lightbox__title {
		color: var(--wse-white);
		font-size: var(--wse-text-md-size);
		line-height: var(--wse-text-md-line);
	}

	.wse-lightbox__close {
		color: var(--wse-white);
	}

	.wse-lightbox__close:hover,
	.wse-lightbox__close:focus-visible {
		background-color: rgba(255, 255, 255, 0.15);
	}

	.wse-lightbox__body {
		flex: 1;
		justify-content: center;
		gap: 12px;
		padding: 0 0 48px;
	}

	.wse-lightbox__stage {
		max-width: none;
		background: none;
		border: 0;
		border-radius: 0;
	}

	.wse-lightbox__count {
		color: var(--wse-gray-200);
	}

	.wse-lightbox__thumbs {
		padding-inline: var(--wse-gutter-mobile);
	}

	.wse-lightbox__thumb {
		width: 64px;
		height: 64px;
		margin-right: 8px;
		background: none;
		border: 0;
	}
}


/* =============================================================================
   Sitemap card

   The same surface and link rows as the FAQ category card, so the two read as
   one family — no count badge, because nothing is being filtered here, and a
   banded header instead of a plain one, because the page is all cards.
   ========================================================================== */

.wse-sitemap-card {
	background-color: var(--wse-white);
	border: 1px solid var(--wse-gray-100);
	border-radius: var(--wse-radius-lg);
	box-shadow: var(--wse-shadow-xl);
	/* The header is a tinted band, so it has to follow the rounded corner. */
	overflow: hidden;
	padding-bottom: 16px;
}

/*
 * A band rather than loose text above a list: with sixteen cards on the page,
 * the tint and the rule under it are what let the eye find where one section
 * ends and the next begins. Same tint the compare table stripes with, same
 * hairline every row rule uses.
 */
.wse-sitemap-card__title {
	padding: 20px 24px;
	margin-bottom: 8px;
	background-color: var(--wse-brand-600);
	border-bottom: 1px solid var(--wse-gray-200);
	color: #fff;
	font-size: var(--wse-text-lg-size);
	font-weight: var(--wse-weight-semibold);
	line-height: var(--wse-text-lg-line);
}

.wse-sitemap-card__list {
	display: flex;
	flex-direction: column;
}

.wse-sitemap-card__item {
	padding: 2px 8px;
}

.wse-sitemap-card__link {
	display: block;
	padding: 10px 16px;
	border-radius: var(--wse-radius-md);
	color: var(--wse-gray-700);
	font-size: var(--wse-text-md-size);
	line-height: var(--wse-text-md-line);
}

.wse-sitemap-card__link:hover {
	background-color: var(--wse-gray-50);
	color: var(--wse-brand-700);
}