/*
Theme Name:   Sea King
Theme URI:    https://seakingyachts.ae
Description:  Purpose-built theme for Sea King Yachts. Classic templates with theme.json tokens — no page builder, one stylesheet, one script.
Author:       Sea King Yachts
Version:      0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License:      GPL-2.0-or-later
Text Domain:  seaking
*/

/* ==========================================================================
   A NOTE ON BREAKPOINTS

   The source design contains zero media queries. Everything responds through
   clamp(), grid auto-fit/minmax and flex-wrap. Keep it that way.

   Breakpoints are used only where a layout genuinely cannot be expressed by
   auto-fit — that is, where the columns are ASYMMETRIC or where cells must be
   hidden rather than reflowed. auto-fit can only produce equal columns.

   The permitted list, kept accurate:
     1. max-width: 900px  — desktop nav to mobile nav
     2. max-width: 900px  — booking aside stops being sticky
     3. max-width: 760px  — gallery mosaic collapses to a single image
     4. min-width: 1120px — product page gallery/booking split (asymmetric)
     5. max-width: 600px  — route band padding (the card padding eats the
                             width its horizontal scroller needs)
     6. max-width: 560px  — charter-length list stacks (fixed + fluid tracks)
     7. max-width: 420px  — aside date/duration row stacks
     8. max-width: 760px  — shorter Read more clip on a phone
     9. max-width: 1119.98px — fixed booking bar, below the product split
    10. prefers-reduced-motion

   If you are adding one for a symmetric grid, use auto-fit instead.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
	/* Surfaces */
	--sk-navy: #07182A;          /* deepest — bars, hero, footer */
	--sk-ink: #0B2237;           /* headings, dark panels */
	--sk-body: #15293A;          /* body copy */
	--sk-cream: #F7F5F0;         /* text and buttons ON navy — not the page bg */
	--sk-page: #FFFFFF;          /* page background, kept white per client */
	--sk-white: #fff;

	/* Accent */
	--sk-gold: #C8993F;
	--sk-gold-lt: #E0B463;       /* gold on dark, hover of --sk-gold */
	--sk-gold-dk: #A9762A;       /* links and eyebrows on light */

	/* Text */
	--sk-muted: #5A6B79;         /* labels, card copy */
	--sk-prose: #42535F;         /* long-form */
	--sk-on-navy: #C3D0DA;       /* body text on navy */
	--sk-on-navy-dim: #8FA6B8;
	--sk-fine: #7C8B97;          /* fine print */

	/* Lines and fills */
	--sk-border-input: #D8D2C6;
	--sk-border-card: #E6E1D6;
	--sk-hairline: #EDE9DF;
	--sk-chip: #F1EEE6;

	/* Shape */
	--sk-r: 9px;
	--sk-r-lg: 14px;
	--sk-r-card: 16px;
	--sk-r-pill: 99px;

	/* Shadow */
	--sk-shadow-gold: 0 6px 18px rgba(200, 153, 63, .26);
	--sk-shadow-card: 0 1px 2px rgba(11, 34, 55, .05);
	--sk-shadow-card-hover: 0 18px 38px rgba(11, 34, 55, .16);
	--sk-shadow-panel: 0 14px 34px rgba(11, 34, 55, .08);
	--sk-shadow-fab: 0 10px 26px rgba(0, 0, 0, .28);

	/* Layout */
	--sk-container: 1240px;
	/* Fluid, so a phone is not given a desktop margin. 16px below ~600px,
	   24px above it, and no media query to keep in step. */
	--sk-gutter: clamp(16px, 4vw, 24px);
	--sk-section: 86px;

	/* Type scale — hand-tuned, deliberately NOT generated by theme.json's
	   fluid formula, which uses a different curve and would drift. */
	--sk-t-display: clamp(40px, 6.4vw, 74px);
	--sk-t-h1: clamp(34px, 5.2vw, 58px);
	--sk-t-h2: clamp(30px, 4.2vw, 46px);
	--sk-t-h3: clamp(28px, 4vw, 40px);
	--sk-t-eyebrow: 11.5px;
	--sk-t-label: 11px;

	/* Content scale for the product page. Two levels only — change them here
	   rather than in the component rules, so they cannot drift apart again. */
	--sk-t-content: 15px;
	--sk-t-content-lh: 1.65;
	--sk-t-caption: 13.5px;
}

/* ---------------------------------------------------------------- 2. Reset */

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

body {
	margin: 0;
	background: var(--sk-page);
	color: var(--sk-body);
	font-family: Manrope, "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--sk-ink);
	text-decoration: none;
}

a:hover {
	color: var(--sk-gold-dk);
}

input,
select,
button,
textarea {
	font: inherit;
}

::selection {
	background: var(--sk-gold);
	color: var(--sk-navy);
}

/* The design ships no focus styles at all. That is an accessibility blocker,
   so they are added here rather than inherited. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--sk-gold);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Fallback face metric-matched to Manrope, so the swap does not shift layout.
   This is what keeps CLS near zero. */
@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Segoe UI");
	ascent-override: 101%;
	descent-override: 27%;
	line-gap-override: 0%;
	size-adjust: 103%;
}

/* latin-ext is declared but never preloaded — unicode-range means browsers
   only fetch it if the page actually contains those characters. */
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("assets/fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@keyframes skRise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------ 3. Utilities */

.sk-u-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sk-u-hp {
	position: absolute;
	left: -9999px;
}

.sk-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--sk-gold);
	color: var(--sk-navy);
	padding: 10px 18px;
	font-weight: 800;
	border-radius: 0 0 var(--sk-r) 0;
}

.sk-skip:focus {
	left: 0;
}

/* ----------------------------------------------------------- 4. Primitives */

.sk-container {
	max-width: var(--sk-container);
	margin: 0 auto;
	padding-inline: var(--sk-gutter);
}

/* The product page is a listing, not an article: its job is to show the boat.
   The standard 1240px measure is right for prose, but with a fixed-width
   booking card beside it the photos were left with under 800px. Widened here
   only -- the prose inside keeps its own measure, below. */
.sk-container--listing {
	--sk-container: 1340px;
}

/* Vertical only. Every .sk-section wraps a .sk-container, and the container
   already applies the gutter — so setting it here too was doubling it, which
   is why a phone had 48px of margin each side. */
.sk-section {
	padding: var(--sk-section) 0 0;
}

.sk-eyebrow {
	font-size: var(--sk-t-eyebrow);
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sk-gold-dk);
	margin: 0 0 10px;
}

.sk-eyebrow--on-navy {
	color: var(--sk-gold-lt);
}

.sk-chip {
	display: inline-block;
	background: var(--sk-chip);
	padding: 5px 9px;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sk-muted);
}

.sk-tag {
	display: inline-block;
	font-size: var(--sk-t-label);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sk-gold-lt);
	background: rgba(7, 24, 42, .86);
	padding: 5px 9px;
	border-radius: 6px;
}

/* Buttons */
.sk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 800;
	padding: 13px 22px;
	border-radius: var(--sk-r);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.sk-btn--gold {
	background: var(--sk-gold);
	color: var(--sk-navy);
	box-shadow: var(--sk-shadow-gold);
}

.sk-btn--navy {
	background: var(--sk-navy);
	color: var(--sk-cream);
}

.sk-btn--outline {
	background: transparent;
	color: var(--sk-ink);
	border-color: var(--sk-border-input);
}

.sk-btn--ghost {
	background: transparent;
	color: var(--sk-cream);
	border-color: rgba(247, 245, 240, .35);
}

@media (hover: hover) {
	.sk-btn--gold:hover {
		background: var(--sk-gold-lt);
		color: var(--sk-navy);
	}

	.sk-btn--navy:hover {
		background: #123049;
		color: var(--sk-cream);
	}

	.sk-btn--outline:hover {
		border-color: var(--sk-gold);
		color: var(--sk-gold-dk);
	}

	.sk-btn--ghost:hover {
		border-color: var(--sk-gold);
		color: var(--sk-gold-lt);
	}
}

/* ------------------------------------------------------------- 5. Header */

.sk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(7, 24, 42, .94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(200, 153, 63, .22);
}

.sk-header__inner {
	max-width: var(--sk-container);
	margin: 0 auto;
	padding: 12px var(--sk-gutter);
	display: flex;
	align-items: center;
	gap: 28px;
}

.sk-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
}

.sk-brand img {
	height: 36px;
	width: auto;
}

.sk-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

/* Set in caps at the client's request. Caps need looser tracking than
   sentence case to stay readable, and they read larger at the same size, so
   the size comes down with it. */
.sk-brand__name {
	font-weight: 800;
	font-size: 17px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sk-cream);
}

.sk-brand__sub {
	font-size: 9.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--sk-gold);
}

.sk-nav {
	margin-left: auto;
}

/* The menu markup is a <ul>, so the flex context has to live on the list —
   putting it on .sk-nav makes the whole list one flex item and the links stack. */
.sk-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sk-nav a {
	display: block;
	padding: 9px 13px;
	font-size: 14px;
	font-weight: 700;
	color: #DDE6ED;
	border-radius: 8px;
	transition: background-color .18s ease, color .18s ease;
}

@media (hover: hover) {
	.sk-nav a:hover {
		background: rgba(200, 153, 63, .14);
		color: var(--sk-cream);
	}
}

.sk-nav .current-menu-item > a,
.sk-nav .current_page_item > a {
	color: var(--sk-gold-lt);
}

.sk-header__cta {
	flex-shrink: 0;
}

/* Mobile nav toggle — hidden until the breakpoint below */
.sk-navtoggle {
	display: none;
	margin-left: auto;
	background: transparent;
	border: 1px solid rgba(200, 153, 63, .35);
	border-radius: var(--sk-r);
	padding: 9px 12px;
	color: var(--sk-cream);
	cursor: pointer;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sk-navtoggle__bars {
	display: block;
	width: 16px;
	height: 10px;
	position: relative;
}

.sk-navtoggle__bars::before,
.sk-navtoggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	transition: transform .2s ease, top .2s ease;
}

.sk-navtoggle__bars::before {
	top: 0;
}

.sk-navtoggle__bars::after {
	top: 8px;
}

.sk-navtoggle[aria-expanded="true"] .sk-navtoggle__bars::before {
	top: 4px;
	transform: rotate(45deg);
}

.sk-navtoggle[aria-expanded="true"] .sk-navtoggle__bars::after {
	top: 4px;
	transform: rotate(-45deg);
}

.sk-mobilenav {
	display: none;
	border-top: 1px solid rgba(200, 153, 63, .18);
	background: var(--sk-navy);
}

.sk-mobilenav[hidden] {
	display: none;
}

.sk-mobilenav__inner {
	padding: 10px var(--sk-gutter) 20px;
	max-width: var(--sk-container);
	margin: 0 auto;
}

.sk-mobilenav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sk-mobilenav a {
	display: block;
	padding: 13px 4px;
	font-size: 16px;
	font-weight: 700;
	color: #DDE6ED;
	border-bottom: 1px solid rgba(200, 153, 63, .12);
}

.sk-mobilenav .sk-btn {
	width: 100%;
	margin-top: 16px;
}

/* Permitted breakpoint 1 of 2 — the mobile nav swap. */
@media (max-width: 900px) {
	.sk-nav,
	.sk-header__cta {
		display: none;
	}

	.sk-navtoggle {
		display: inline-flex;
	}

	.sk-mobilenav:not([hidden]) {
		display: block;
	}

}

/* -------------------------------------------------------- 6. CTA + footer */

.sk-cta {
	padding: var(--sk-section) var(--sk-gutter) 0;
}

.sk-cta__band {
	position: relative;
	overflow: hidden;
	background: var(--sk-navy);
	border-radius: 20px;
	padding: 52px 32px;
	text-align: center;
	max-width: var(--sk-container);
	margin: 0 auto;
}

.sk-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .3;
}

.sk-cta__content {
	position: relative;
}

.sk-cta h2 {
	font-size: clamp(30px, 4.4vw, 48px);
	letter-spacing: -.032em;
	line-height: 1.08;
	color: var(--sk-cream);
	margin: 0 0 14px;
}

.sk-cta p {
	color: var(--sk-on-navy);
	max-width: 620px;
	margin: 0 auto 26px;
}

.sk-cta__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.sk-footer {
	background: var(--sk-navy);
	color: var(--sk-on-navy);
	margin-top: var(--sk-section);
	padding: 60px var(--sk-gutter) 0;
}

.sk-footer__grid {
	max-width: var(--sk-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
}

.sk-footer h3 {
	font-size: var(--sk-t-label);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sk-gold-lt);
	margin: 0 0 14px;
}

.sk-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sk-footer li + li {
	margin-top: 9px;
}

.sk-footer a {
	color: var(--sk-on-navy);
	font-size: 14.5px;
}

@media (hover: hover) {
	.sk-footer a:hover {
		color: var(--sk-gold-lt);
	}
}

.sk-footer__tagline {
	font-size: 14.5px;
	color: var(--sk-on-navy);
	margin: 14px 0 0;
	max-width: 280px;
}

.sk-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.sk-footer__social a {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid rgba(200, 153, 63, .3);
	display: grid;
	place-items: center;
	transition: background-color .18s ease, border-color .18s ease;
}

.sk-footer__social img {
	width: 17px;
	height: 17px;
}

@media (hover: hover) {
	.sk-footer__social a:hover {
		background: rgba(200, 153, 63, .12);
		border-color: var(--sk-gold);
	}
}

.sk-footer__bottom {
	max-width: var(--sk-container);
	margin: 44px auto 0;
	padding: 20px 0 26px;
	border-top: 1px solid rgba(200, 153, 63, .2);
	display: flex;
	flex-wrap: wrap;
	gap: 14px 36px;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--sk-fine);
}

.sk-footer__bottom a {
	font-size: 13px;
	color: var(--sk-fine);
}

/* ------------------------------------------------------------- 7. WhatsApp */

.sk-fab {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #25D366;
	color: #06301A;
	font-size: 14px;
	font-weight: 800;
	padding: 12px 18px;
	border-radius: var(--sk-r-pill);
	box-shadow: var(--sk-shadow-fab);
	transition: background-color .18s ease;
}

.sk-fab img {
	width: 18px;
	height: 18px;
}

@media (hover: hover) {
	.sk-fab:hover {
		background: #4AE383;
		color: #06301A;
	}
}

/* --------------------------------------------------------------- 8. Main */

.sk-main {
	animation: skRise .4s ease both;
}

/* Permitted breakpoint 2 of 2. */
@media (prefers-reduced-motion: reduce) {
	.sk-main {
		animation: none;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ---------------------------------------------------- 9. Page header (dark) */

.sk-pagehead {
	background: var(--sk-navy);
	color: var(--sk-cream);
	padding: 60px var(--sk-gutter) 54px;
}

.sk-pagehead__inner {
	max-width: var(--sk-container);
	margin: 0 auto;
}

.sk-pagehead h1 {
	font-size: var(--sk-t-h1);
	letter-spacing: -.032em;
	line-height: 1.06;
	color: var(--sk-cream);
	margin: 0;
	max-width: 900px;
}

.sk-pagehead p {
	font-size: 17px;
	color: var(--sk-on-navy);
	max-width: 700px;
	margin: 16px 0 0;
}

.sk-breadcrumb {
	font-size: 13.5px;
	color: var(--sk-muted);
	margin: 0 0 14px;
}

.sk-breadcrumb a {
	color: var(--sk-muted);
}

.sk-breadcrumb--on-navy,
.sk-breadcrumb--on-navy a {
	color: var(--sk-on-navy-dim);
}

/* ------------------------------------------------------- 10. Section header */

.sk-sectionhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.sk-sectionhead h2 {
	font-size: var(--sk-t-h2);
	letter-spacing: -.032em;
	line-height: 1.08;
	margin: 0;
	max-width: 760px;
}

.sk-morelink {
	font-size: 14px;
	font-weight: 800;
	color: var(--sk-gold-dk);
	border-bottom: 2px solid var(--sk-gold);
	padding-bottom: 3px;
	white-space: nowrap;
}

/* ------------------------------------------------------------ 11. Grid */

.sk-grid {
	display: grid;
	gap: 18px;
}

.sk-grid--cards {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sk-grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 26px;
}

.sk-grid--split {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
}

/* -------------------------------------------------------- 12. Tour cards */

.sk-card {
	background: var(--sk-white);
	border: 1px solid var(--sk-border-card);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: var(--sk-shadow-card);
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, border-color .2s ease;
}

@media (hover: hover) {
	.sk-card:hover {
		box-shadow: var(--sk-shadow-card-hover);
		border-color: var(--sk-gold);
	}
}

.sk-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--sk-chip);
}

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

.sk-card__tag {
	position: absolute;
	top: 12px;
	left: 12px;
}

.sk-card__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sk-card__body h3,
.sk-card__body h2 {
	font-size: 19px;
	letter-spacing: -.022em;
	line-height: 1.25;
	margin: 0 0 10px;
}

.sk-card__meta {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.sk-card__text {
	font-size: 14.5px;
	color: var(--sk-muted);
	margin: 0 0 18px;
}

.sk-card__foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--sk-hairline);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.sk-price {
	font-size: 14.5px;
	color: var(--sk-muted);
}

.sk-price strong {
	font-size: 21px;
	color: var(--sk-ink);
	letter-spacing: -.022em;
}

/* Wide card used on the tour archive: image left, content right. */
.sk-card--wide {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	border-radius: var(--sk-r-card);
}

.sk-card--wide .sk-card__media {
	aspect-ratio: 4 / 3;
	height: 100%;
}

.sk-card--wide .sk-card__body {
	padding: 26px;
}

.sk-card--wide h2 {
	font-size: 24px;
}

.sk-rating {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sk-gold-dk);
}

/* ---------------------------------------------------------- 13. Rate table */

.sk-rates {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: 10px;
	margin: 0 0 18px;
}

.sk-rates__cell {
	border: 1px solid var(--sk-border-card);
	border-radius: var(--sk-r);
	padding: 10px 12px;
	text-align: center;
}

.sk-rates__label {
	display: block;
	font-size: var(--sk-t-label);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sk-muted);
	margin-bottom: 4px;
}

.sk-rates__price {
	display: block;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.022em;
}

/* ---------------------------------------------------------- 14. Tour detail */

.sk-tour__mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.sk-tour__mosaic > figure {
	margin: 0;
	border-radius: var(--sk-r-lg);
	overflow: hidden;
	background: var(--sk-chip);
}

.sk-tour__mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 10;
}

.sk-tour__thumbs {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
	margin-bottom: 40px;
}

.sk-tour__thumbs button {
	flex: none;
	width: 96px;
	aspect-ratio: 4 / 3;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
	background: var(--sk-chip);
	cursor: pointer;
}

.sk-tour__thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sk-tour__thumbs button[aria-current="true"] {
	border-color: var(--sk-gold);
}

/* Stacked by default; the asymmetric split only applies once there is room.
   auto-fit cannot express an uneven split, so this is a justified breakpoint. */
.sk-tour__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* Raised from 1000px with the fixed aside. As a fraction the card shrank
   with the viewport; at a fixed 350px it does not, so just above 1000px it
   was taking 41% of the row and leaving the photos worse off than before.
   1120px is where the two rules draw the same column widths -- below it,
   stacking gives the gallery the full width, which is the better trade. */
@media (min-width: 1120px) {
	.sk-tour__cols {
		/* The booking card is a fixed-width panel, not a proportional column.
		   As a fraction it grew with the viewport and ate space the photos
		   wanted — which is the opposite of what a listing page is for. The
		   form needs about 350px and never more, so it takes exactly that and
		   every extra pixel goes to the gallery. */
		grid-template-columns: minmax(0, 1fr) 350px;
		gap: 44px;
	}
}

.sk-tour__main h2 {
	font-size: 24px;
	letter-spacing: -.022em;
	margin: 0 0 12px;
}

.sk-tour__main section + section {
	margin-top: 34px;
}

.sk-prose {
	color: var(--sk-prose);
	font-size: 17px;
	line-height: 1.75;
}

.sk-prose p {
	margin: 0 0 16px;
}

.sk-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px 18px;
}

.sk-list li {
	position: relative;
	padding-left: 16px;
	font-size: 14.5px;
	color: var(--sk-prose);
}

.sk-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sk-gold);
}

/* Sticky booking aside. top offset clears the announcement bar + header. */
.sk-aside {
	position: sticky;
	top: 92px;
	background: var(--sk-white);
	border: 1px solid var(--sk-border-card);
	border-radius: var(--sk-r-card);
	padding: 26px;
	box-shadow: var(--sk-shadow-panel);
}

.sk-aside__price {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.022em;
	margin: 0;
}

.sk-aside__unit {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sk-muted);
}

.sk-aside hr {
	border: 0;
	border-top: 1px solid var(--sk-hairline);
	margin: 18px 0;
}

.sk-note {
	font-size: 12.5px;
	color: var(--sk-muted);
	margin: 12px 0 0;
}

/* ------------------------------------------------------------- 15. Forms */

.sk-field {
	display: block;
	margin-bottom: 14px;
}

.sk-field > span {
	display: block;
	font-size: var(--sk-t-label);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sk-muted);
	margin-bottom: 6px;
}

.sk-field input,
.sk-field select,
.sk-field textarea {
	width: 100%;
	border: 1px solid var(--sk-border-input);
	border-radius: var(--sk-r);
	padding: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sk-body);
	background: var(--sk-white);
}

.sk-field--fixed {
	background: var(--sk-chip);
	border-radius: var(--sk-r);
	padding: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sk-muted);
}

.sk-fieldrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 0 10px;
}

/* The duration option labels carry their price ("3 hours — AED 1,800"), which
   does not fit an even split inside the narrow sticky aside at laptop widths.
   The date field needs less room than it gets, so the row is tilted rather
   than the label shortened -- the price in that label is what replaced the
   old rate table, so it has to stay readable.
   minmax(0, ...) because a grid track will not shrink below its content
   otherwise, and a <select> reports a wide intrinsic width. */
.sk-fieldrow--tilt {
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

 (max-width: 420px) {
	.sk-fieldrow--tilt {
		grid-template-columns: 1fr;
	}
}

.sk-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 14px;
}

.sk-total__value {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.022em;
}

/* -------------------------------------------------------- 16. Accordion */

.sk-acc__item {
	border-bottom: 1px solid #E1DCD0;
}

/* The question and its answer are one reading column, so the row is capped
   at the same measure the panel already used. Left full width, the plus sign
   was pushed to the far edge of a 900px row with a lake of space between it
   and the question it belongs to. */
.sk-acc {
	max-width: 760px;
}

.sk-acc__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	background: none;
	border: 0;
	padding: 18px 0;
	text-align: left;
	/* One step above body copy — it is a question heading, not a paragraph. */
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--sk-ink);
	cursor: pointer;
}

.sk-acc__sign {
	font-size: 22px;
	font-weight: 400;
	color: var(--sk-gold-dk);
	line-height: 1;
	flex: none;
}

.sk-acc__trigger[aria-expanded="true"] .sk-acc__sign::before {
	content: "–";
}

.sk-acc__trigger[aria-expanded="false"] .sk-acc__sign::before {
	content: "+";
}

.sk-acc__panel {
	padding: 0 0 20px;
	font-size: 15.5px;
	color: var(--sk-prose);
	max-width: 760px;
}

.sk-acc__panel p {
	margin: 0;
}

/* ------------------------------------------------------------- 17. Hero */

.sk-hero {
	position: relative;
	overflow: hidden;
	background: var(--sk-navy);
	padding: 96px var(--sk-gutter) 64px;
}

.sk-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .55;
}

/* Three-stop gradient so the headline stays legible over any photo. */
.sk-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 24, 42, .86) 0%, rgba(7, 24, 42, .5) 45%, rgba(7, 24, 42, .95) 100%);
}

.sk-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--sk-container);
	margin: 0 auto;
}

.sk-hero__pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sk-gold-lt);
	border: 1px solid rgba(200, 153, 63, .45);
	border-radius: var(--sk-r-pill);
	padding: 7px 15px;
	margin: 0 0 22px;
}

.sk-hero__title {
	font-size: var(--sk-t-display);
	letter-spacing: -.015em;
	line-height: 1.02;
	color: var(--sk-cream);
	margin: 0 0 18px;
	max-width: 900px;
}

.sk-hero__title span {
	display: block;
	color: var(--sk-gold-lt);
}

.sk-hero__sub {
	font-size: 18px;
	color: #D3DEE7;
	max-width: 640px;
	margin: 0 0 28px;
}

.sk-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.sk-hero__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	font-size: 14px;
	color: #9FB2C0;
}

/* ------------------------------------------------------------ 18. Stats */

.sk-stats {
	background: var(--sk-ink);
	border-radius: 18px;
	padding: 36px 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 26px;
	text-align: center;
}

.sk-stats__value {
	display: block;
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: 1.1;
	color: var(--sk-gold-lt);
}

.sk-stats__label {
	display: block;
	font-size: 14.5px;
	color: var(--sk-on-navy);
	margin-top: 6px;
}

/* ----------------------------------------------------- 19. Pagination */

.navigation.pagination {
	display: flex;
	justify-content: center;
}

.nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--sk-border-card);
	border-radius: var(--sk-r);
	font-size: 14px;
	font-weight: 700;
	background: var(--sk-white);
}

.page-numbers.current {
	background: var(--sk-navy);
	color: var(--sk-cream);
	border-color: var(--sk-navy);
}

/* --------------------------------------------------- 20. Form confirmation */

.sk-confirm {
	background: var(--sk-white);
	border: 1px solid var(--sk-border-card);
	border-radius: 12px;
	padding: 30px;
	box-shadow: var(--sk-shadow-panel);
}

.sk-confirm h2 {
	font-size: 32px;
	letter-spacing: -.022em;
	margin: 0 0 10px;
}

.sk-confirm p {
	color: var(--sk-muted);
	font-size: 15.5px;
	margin: 0 0 14px;
}

.sk-confirm__ref {
	font-size: 14px;
	color: var(--sk-prose);
}

/* ------------------------------------------------------------ 21. <picture> */

/* <picture> is inline by default, which adds a descender gap under images and
   breaks the absolutely-positioned hero. It should be transparent to layout —
   the <img> inside is what the existing rules target. */
picture {
	display: contents;
}

/* Safari has historically mishandled display:contents on replaced-element
   wrappers, so give the hero's picture an explicit box as well. */
.sk-hero picture {
	display: block;
}

/* ------------------------------------------- 22. Gallery mosaic + lightbox */

/* GetYourGuide-style: one large image, four small in a 2x2 beside it.
   auto-fit cannot express an asymmetric mosaic, so this is one of the few
   places an explicit grid template is the right tool. It still collapses on
   narrow screens without a media query, via the aspect-ratio + order rules. */
.sk-gal {
	position: relative;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	border-radius: var(--sk-r-card);
	overflow: hidden;
	margin-bottom: 28px;
	/* Short and wide so the large cell is landscape and the yacht fits the
	   frame — a tall hero crops the bow and stern off. */
	aspect-ratio: 2.6 / 1;
}

.sk-gal__cell {
	display: block;
	overflow: hidden;
	background: var(--sk-chip);
	position: relative;
}

.sk-gal__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

@media (hover: hover) {
	.sk-gal__cell:hover img {
		transform: scale(1.03);
	}
}

/* The large one spans both rows of the first column. */
.sk-gal__cell--0 {
	grid-row: span 2;
}

.sk-gal__all {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--sk-white);
	color: var(--sk-ink);
	border: 1px solid rgba(11, 34, 55, .12);
	border-radius: var(--sk-r);
	padding: 9px 15px;
	font-size: 13.5px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(11, 34, 55, .18);
}

@media (hover: hover) {
	.sk-gal__all:hover {
		background: var(--sk-cream);
	}
}

/* Hidden by default so the dots never appear beside the desktop mosaic; the
   carousel media query below turns them on. Declared before it, because at
   equal specificity the later rule would win. */
.sk-gal__dots {
	display: none;
}

/* Above the breakpoint the slide wrappers get out of the way entirely, so
   their cells land in the mosaic grid exactly as a flat list would. Only the
   first five have a position; the rest exist for the phone carousel. */
@media (min-width: 761px) {
	.sk-gal__slide {
		display: contents;
	}

	/* Everything past the fifth exists only for the phone carousel. */
	.sk-gal__cell:not(.sk-gal__cell--grid) {
		display: none;
	}

	.sk-gal__dots {
		display: none;
	}
}

/* Below ~760px the 5-up mosaic is unreadable — the small cells end up about
   80px wide. It becomes a swipeable carousel instead: one large image over two
   halves per slide, the next slide peeking at the right edge so it is obvious
   there is more, and dots underneath. This is what the booking platforms do on
   a phone, and it shows nine more photographs than the single image it
   replaces. */
@media (max-width: 760px) {
	.sk-gal {
		display: flex;
		grid-template-columns: none;
		grid-template-rows: none;
		aspect-ratio: auto;
		gap: 10px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		border-radius: 0;
		/* Full-bleed out of the two nested 24px gutters the product page sits
		   in, without hardcoding their total: `50% - 50vw` cancels whatever
		   the ancestors add, so the carousel keeps working if either gutter
		   changes. The screen edge is then paid back as image. */
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		padding-inline: var(--sk-gutter);
		scroll-padding-inline: var(--sk-gutter);
		scrollbar-width: none;
	}

	.sk-gal::-webkit-scrollbar {
		display: none;
	}

	.sk-gal__slide {
		flex: 0 0 auto;
		/* Sized off the viewport, not the track, so the peek stays about 30px
		   at any screen width — that peek is what says "this moves" without
		   needing a second affordance. */
		width: 86vw;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		scroll-snap-align: start;
	}

	.sk-gal__cell {
		border-radius: var(--sk-r);
		aspect-ratio: 1 / 1;
	}

	/* The first image of each slide spans both columns and is landscape, so a
	   whole yacht fits the frame. */
	.sk-gal__cell--lead {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 10;
	}

	/* The mosaic makes cell 0 span two rows. Left in place here it pushed the
	   slide to three rows and the two small images ended up underneath the
	   large one rather than below it. */
	.sk-gal__cell--0 {
		grid-row: auto;
	}

	/* A gallery whose count does not divide by three leaves a last slide with
	   one image. Dropping its aspect ratio lets it stretch to the height the
	   other slides set, instead of sitting short with white space under it. */
	.sk-gal__slide > .sk-gal__cell--lead:only-child {
		aspect-ratio: auto;
	}

	/* The floating button belongs on a mosaic, not over a moving carousel —
	   tapping any photo opens the lightbox anyway. */
	.sk-gal__all {
		display: none;
	}

	.sk-gal__dots {
		display: flex;
		justify-content: center;
		gap: 7px;
		margin: -16px 0 24px;
	}

	.sk-gal__dots button {
		width: 7px;
		height: 7px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--sk-border-input);
		cursor: pointer;
		transition: background-color .2s ease, width .2s ease;
	}

	.sk-gal__dots button.is-active {
		width: 18px;
		border-radius: 4px;
		background: var(--sk-gold);
	}
}

/* ---------------------------------------------------------- lightbox */

/* The arrows used to flank the image in a three-column grid, which cost about
   120px of width on a phone — a third of the screen — and left the photo
   small. They now sit in a row underneath, so the image gets the full width. */
.sk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(7, 24, 42, .96);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto;
	align-items: center;
	gap: 6px;
	padding: 56px 10px 20px;
}

.sk-lightbox[hidden] {
	display: none;
}

.sk-lightbox__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	color: var(--sk-cream);
}

.sk-lightbox__count {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
}

.sk-lightbox__close {
	background: none;
	border: 0;
	color: var(--sk-cream);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
}

.sk-lightbox__stage {
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	height: 100%;
}

.sk-lightbox__stage img {
	max-width: 100%;
	/* Leaves room for the bar, the caption and the control row below. */
	max-height: calc(100vh - 210px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
}

.sk-lightbox__stage figcaption {
	color: var(--sk-on-navy);
	font-size: 14px;
	margin-top: 14px;
	text-align: center;
	max-width: 760px;
}

/* Bare chevrons. The disc read as a button on a button and competed with the
   photograph; at this size the glyph is its own affordance. The 48px box is
   kept as the tap target even though nothing is drawn around it. */
.sk-lightbox__nav {
	grid-row: 2;
	background: none;
	border: 0;
	color: var(--sk-cream);
	width: 48px;
	height: 48px;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
	flex: none;
	opacity: .85;
	transition: opacity .15s ease, color .15s ease;
}

.sk-lightbox__nav--prev {
	grid-column: 1;
	justify-self: end;
}

.sk-lightbox__nav--next {
	grid-column: 2;
	justify-self: start;
}

@media (hover: hover) {
	.sk-lightbox__nav:hover {
		color: var(--sk-gold-lt);
		opacity: 1;
	}
}

/* ---------------------------------------- 23. Product page, booking-platform */

.sk-tour__title {
	font-size: clamp(30px, 4.4vw, 46px);
	letter-spacing: -.032em;
	line-height: 1.08;
	margin: 0 0 12px;
	max-width: 900px;
}

.sk-tour__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	color: var(--sk-muted);
	margin: 0 0 22px;
}

.sk-tour__reviews {
	color: var(--sk-muted);
}

.sk-tour__proof-sep {
	opacity: .45;
}

/* Reassurance badges */
.sk-badges {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}

.sk-badges li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--sk-white);
	border: 1px solid var(--sk-border-card);
	border-radius: var(--sk-r-lg);
	padding: 14px 16px;
}

.sk-badges svg {
	color: #2F8F5B;
	flex: none;
	margin-top: 2px;
}

.sk-badges strong {
	display: block;
	font-size: 14.5px;
	letter-spacing: -.01em;
}

.sk-badges span span {
	display: block;
	font-size: 13px;
	color: var(--sk-muted);
	margin-top: 2px;
}

/* At-a-glance facts */
.sk-facts {
	list-style: none;
	margin: 0 0 34px;
	padding: 22px 0;
	border-top: 1px solid var(--sk-hairline);
	border-bottom: 1px solid var(--sk-hairline);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px 26px;
}

.sk-facts li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
}

.sk-facts svg {
	color: var(--sk-gold-dk);
	flex: none;
	margin-top: 1px;
}

.sk-facts__label {
	display: block;
	font-size: var(--sk-t-label);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sk-muted);
	margin-bottom: 3px;
}

.sk-facts strong {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--sk-ink);
}

/* Tick lists */
.sk-ticks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sk-ticks--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0 26px;
}

.sk-ticks li {
	position: relative;
	padding: 0 0 11px 27px;
	font-size: 15.5px;
	color: var(--sk-prose);
	line-height: 1.5;
}

.sk-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(47, 143, 91, .12);
}

.sk-ticks li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 9px;
	width: 5px;
	height: 3px;
	border-left: 1.8px solid #2F8F5B;
	border-bottom: 1.8px solid #2F8F5B;
	transform: rotate(-45deg);
}

/* Route timeline */
.sk-route {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: stop;
}

.sk-route li {
	display: flex;
	gap: 14px;
	padding-bottom: 18px;
	position: relative;
}

.sk-route li:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 28px;
	bottom: 0;
	width: 2px;
	background: rgba(200, 153, 63, .35);
}

.sk-route__num {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sk-gold);
	color: var(--sk-navy);
	font-size: 13px;
	font-weight: 800;
	display: grid;
	place-items: center;
	position: relative;
	z-index: 1;
}

.sk-route__body strong {
	display: block;
	font-size: 15.5px;
	color: var(--sk-ink);
}

.sk-route__body span {
	display: block;
	font-size: 14.5px;
	color: var(--sk-muted);
	margin-top: 2px;
}

/* Booking card */
.sk-aside__head {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--sk-hairline);
}

.sk-aside__from {
	font-size: var(--sk-t-label);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sk-muted);
}

.sk-aside__basis {
	font-size: 13px;
	color: var(--sk-muted);
	margin: 4px 0 0;
}

.sk-total__label {
	font-size: var(--sk-t-label);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sk-muted);
}

/* The aside is sticky on desktop. On narrow screens a sticky card would eat
   the viewport, so it simply flows after the content. */
@media (max-width: 900px) {
	.sk-aside {
		position: static;
	}
}

/* ------------------------------------- 24. Product page refinements (v2) */

/* The gallery now sits inside the left column beside the booking card, as on
   a marketplace listing, rather than spanning the full width above it. */
.sk-tour__cols {
	margin-top: 4px;
}

/* Cards and panels sit on white now, so they need a visible edge rather than
   relying on a cream page behind them. */
.sk-card,
.sk-badges li,
.sk-aside {
	background: var(--sk-white);
}

/* --- compact booking card -------------------------------------------------
   The whole card has to be readable in one glance, so the vertical rhythm is
   tightened rather than fields being removed — every field here is one the
   crew actually needs to confirm a slot. */

.sk-aside {
	padding: 18px;
}

.sk-aside__head {
	padding-bottom: 12px;
	margin-bottom: 12px;
}

.sk-aside__price {
	font-size: 25px;
}

.sk-aside .sk-field {
	margin-bottom: 9px;
}

.sk-aside .sk-field > span {
	font-size: 10px;
	letter-spacing: .12em;
	margin-bottom: 3px;
}

.sk-aside .sk-field input,
.sk-aside .sk-field select {
	padding: 8px 10px;
	font-size: 14px;
}

.sk-aside .sk-fieldrow {
	gap: 0 8px;
}

.sk-aside .sk-total {
	margin: 8px 0 10px;
	padding-top: 10px;
	border-top: 1px solid var(--sk-hairline);
}

.sk-aside .sk-total__value {
	font-size: 22px;
}

.sk-aside .sk-btn {
	padding: 11px 18px;
}

.sk-aside .sk-note {
	font-size: 11.5px;
	line-height: 1.45;
	margin-top: 8px;
}

/* --- gallery, landscape hero -------------------------------------------
   A tall hero cell crops the bow and stern off a yacht, which is the one
   thing the photo has to show. Short and wide keeps the boat whole.

   Breakpoint-scoped, and it has to be. Unscoped and declared after the
   carousel block, this rule re-imposed a 2.35:1 box on the phone track, which
   clipped every slide to 160px and left the two small images overlapping the
   large one. */
@media (min-width: 761px) {
	.sk-gal {
		aspect-ratio: 2.35 / 1;
	}
}

.sk-gal {
	gap: 6px;
	margin-bottom: 26px;
}

/* --- FAQ on the product page --------------------------------------------- */
.sk-tour__faq {
	margin-top: 44px;
	padding-top: 34px;
	border-top: 1px solid var(--sk-hairline);
}

/* Product pages lead with the breadcrumb, which needs far less air above it
   than a section heading does. */
.sk-section--tight {
	padding-top: 26px;
}

/* ------------------------------------------- 25. Content type scale (v2) */

/*
   The product page had grown three different sizes doing the same job —
   17px prose, 15.5px lists, 14.5px other lists — plus two greys. Read in one
   column they look like mistakes rather than hierarchy.

   There are now exactly two content levels in the main column:

     BODY     16px / 1.65, --sk-prose   — prose, bullet lists, FAQ answers
     CAPTION  14px / 1.5,  --sk-muted   — notes under a heading, fine print

   A third level should be argued for, not added by habit.
*/

.sk-tour__main .sk-prose,
.sk-tour__main .sk-prose p,
.sk-tour__main .sk-ticks li,
.sk-tour__main .sk-list li,
.sk-tour__main .sk-acc__panel,
.sk-tour__main .sk-acc__panel p {
	font-size: var(--sk-t-content);
	line-height: var(--sk-t-content-lh);
	color: var(--sk-prose);
}

/* Captions: a genuine step down, under something they belong to. */
.sk-tour__main .sk-route__body span,
.sk-tour__main .sk-note,
.sk-badges span span {
	font-size: var(--sk-t-caption);
	line-height: 1.5;
	color: var(--sk-muted);
}

/* Labels that title a caption stay at body size and carry weight instead. */
.sk-tour__main .sk-route__body strong {
	font-size: var(--sk-t-content);
}

/* Section headings on the product page: one size, not three. */
.sk-tour__main h2 {
	font-size: 22px;
	letter-spacing: -.022em;
	line-height: 1.25;
	margin: 0 0 14px;
}

.sk-tour__main section,
.sk-tour__main .sk-tour__faq {
	margin-top: 34px;
}

/* The facts row sits between the badges and the first heading, so it needs a
   little more room than a normal section. */
.sk-facts {
	margin-bottom: 8px;
}

/* ------------------------------------------ 26. Component redesign (v3) */

/* --- Reassurance badges ---------------------------------------------------
   The bordered boxes read as three form fields rather than three promises.
   Dropping the borders for a single tinted band groups them as one statement
   and stops them competing with the booking card for attention. */

.sk-badges {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0;
	background: #F4F8F5;
	border: 1px solid #DCEAE1;
	border-radius: var(--sk-r-card);
	padding: 4px;
	margin-bottom: 30px;
}

.sk-badges li {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 14px 16px;
	gap: 12px;
	align-items: center;
}

/* Hairline between items only where they sit side by side. */
.sk-badges li + li {
	box-shadow: inset 1px 0 0 #DCEAE1;
}

.sk-badges svg {
	width: 20px;
	height: 20px;
	flex: none;
	margin: 0;
	color: #2F8F5B;
}

.sk-badges strong {
	font-size: 14.5px;
	font-weight: 800;
	color: var(--sk-ink);
	letter-spacing: -.01em;
}

.sk-badges span span {
	margin-top: 1px;
}

/* --- At-a-glance facts ----------------------------------------------------
   Small grey icons floating next to text looked like clip-art. Setting each
   in a soft gold disc gives them weight and ties them to the brand. */

.sk-facts {
	border: 0;
	padding: 0;
	gap: 22px 28px;
	margin-bottom: 34px;
}

.sk-facts li {
	gap: 13px;
	align-items: center;
}

.sk-facts svg {
	width: 18px;
	height: 18px;
	margin: 0;
	color: var(--sk-gold-dk);
}

/* The disc sits behind the icon rather than around it, so the SVG keeps its
   own alignment. */
.sk-facts li > svg {
	box-sizing: content-box;
	padding: 9px;
	background: rgba(200, 153, 63, .12);
	border-radius: 50%;
}

.sk-facts__label {
	font-size: 10.5px;
	letter-spacing: .13em;
	margin-bottom: 1px;
}

/* Matched to body copy. The size was always 15px -- what made this row read
   larger was weight 700, near-black ink and a tighter 1.35 leading. The
   uppercase label above already marks these as facts, so the value does not
   need to shout as well. */
.sk-facts strong {
	font-size: var(--sk-t-content);
	line-height: var(--sk-t-content-lh);
	font-weight: 500;
	color: var(--sk-body);
	display: block;
}

/* --- Tick lists -----------------------------------------------------------
   The old tick was a 5x3px pseudo-element inside a 16px disc — barely visible
   at a glance, which is the one job it has. This is a real inline SVG-sized
   mark in a larger disc, with the rows spaced to breathe. */

.sk-ticks li {
	padding: 0 0 14px 32px;
	position: relative;
}

.sk-ticks li::before {
	width: 21px;
	height: 21px;
	top: 1px;
	background: #E4F2E9;
}

.sk-ticks li::after {
	left: 6.5px;
	top: 8px;
	width: 7px;
	height: 3.5px;
	border-left: 2.2px solid #2F8F5B;
	border-bottom: 2.2px solid #2F8F5B;
}

/* Two columns need a clear gutter, or the left column's wrapped lines read as
   part of the right one. */
.sk-ticks--grid {
	gap: 0 40px;
}

/* --- Route timeline ------------------------------------------------------- */

.sk-route__num {
	width: 26px;
	height: 26px;
	font-size: 12.5px;
}

.sk-route li:not(:last-child)::before {
	left: 12px;
}

/* --- Phone field ---------------------------------------------------------- */

.sk-phone {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 6px;
}

.sk-phone select {
	font-size: 13.5px;
	padding-inline: 8px;
}

/* Must out-specify `.sk-field > span`, which uppercases field labels —
   otherwise the hint shouts at the visitor in caps. */
.sk-field > .sk-field__hint {
	display: block;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--sk-muted);
	margin-top: 5px;
	margin-bottom: 0;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}

/* The compact aside shrinks field labels to 10px, which is too small for a
   sentence the visitor actually has to read. Hints keep their own size. */
.sk-aside .sk-field > .sk-field__hint {
	font-size: 11px;
}

/* Validation errors are appended by the JS as a <span> inside `.sk-field`, so
   they land in the same trap the hint rule above sidesteps: `.sk-field > span`
   uppercases and letter-spaces label text, which turned an error sentence into
   a line of shouting capitals. The JS sets colour, size and display inline, so
   only the typographic properties need resetting here. */
.sk-field > [data-sk-error] {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 600;
}

/* --------------------------------------------- 27. Footer + FAB (v2) */

/* The size lived on `a`, so list items that are plain text — the address and
   the opening hours — fell back to the 17px body size and looked oversized
   next to the links. Size belongs on the row, not on the link inside it. */
.sk-footer li {
	font-size: 14.5px;
	line-height: 1.55;
}

.sk-footer__legal {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.sk-footer__legal a {
	font-size: 13px;
	color: var(--sk-fine);
}

@media (hover: hover) {
	.sk-footer__legal a:hover {
		color: var(--sk-gold-lt);
	}
}

/* Icon-only circular WhatsApp button. */
.sk-fab {
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	gap: 0;
}

.sk-fab img,
.sk-fab svg {
	width: 27px;
	height: 27px;
}

/* --------------------------------------------- 28. Country combobox */

/* A native <select> with 40 options opens as one very tall list with no way to
   filter. This is a searchable replacement. The original select stays in the
   DOM as the value holder — hidden, not removed — so the form still submits
   correctly if the JS never runs. */

.sk-combo {
	position: relative;
}

/* Visually hidden, but still the element that carries the value. */
.sk-combo__native {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sk-combo__button {
	width: 100%;
	text-align: left;
	background: var(--sk-white);
	border: 1px solid var(--sk-border-input);
	border-radius: var(--sk-r);
	padding: 8px 26px 8px 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sk-body);
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Chevron, drawn rather than imported. */
.sk-combo__button::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.6px solid var(--sk-muted);
	border-bottom: 1.6px solid var(--sk-muted);
	transform: translateY(-70%) rotate(45deg);
}

.sk-combo__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	/* Wider than the trigger so full country names fit. */
	width: 290px;
	max-width: 78vw;
	background: var(--sk-white);
	border: 1px solid var(--sk-border-card);
	border-radius: var(--sk-r-lg);
	box-shadow: 0 12px 34px rgba(11, 34, 55, .18);
	padding: 8px;
}

.sk-combo__panel[hidden] {
	display: none;
}

.sk-combo__search {
	width: 100%;
	border: 1px solid var(--sk-border-input);
	border-radius: var(--sk-r);
	padding: 8px 10px;
	font-size: 13.5px;
	margin-bottom: 6px;
}

.sk-combo__list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Scrolls instead of growing to the height of the viewport. */
	max-height: 232px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sk-combo__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 13.5px;
	cursor: pointer;
	color: var(--sk-body);
}

.sk-combo__option em {
	font-style: normal;
	color: var(--sk-muted);
	font-variant-numeric: tabular-nums;
	flex: none;
}

.sk-combo__option.is-active {
	background: var(--sk-chip);
}

.sk-combo__option[aria-selected="true"] {
	font-weight: 700;
}

.sk-combo__option[aria-selected="true"] em {
	color: var(--sk-gold-dk);
}

.sk-combo__empty {
	padding: 10px;
	font-size: 13.5px;
	color: var(--sk-muted);
}

/* Opened upwards when the button sits too near the bottom of the window. */
.sk-combo__panel--up {
	top: auto;
	bottom: calc(100% + 6px);
}

/* --------------------------------------------- 29. Route band (home page) */

/* A horizontal timeline on a dark card. Seven stops do not fit legibly on a
   phone, and stacking them would lose the left-to-right reading that makes it
   a route — so it scrolls sideways instead. */

.sk-routeband {
	background: var(--sk-navy);
	border-radius: 20px;
	padding: 46px 34px 40px;
	color: var(--sk-cream);
	overflow: hidden;
}

.sk-routeband__intro {
	max-width: 700px;
}

.sk-routeband__intro h2 {
	font-weight: 800;
	letter-spacing: -.032em;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.1;
	margin: 12px 0 10px;
	color: var(--sk-cream);
}

.sk-routeband__intro p {
	color: var(--sk-on-navy);
	font-size: var(--sk-t-content);
	line-height: var(--sk-t-content-lh);
	margin: 0;
}

.sk-routeband__scroll {
	margin-top: 38px;
	overflow-x: auto;
	padding-bottom: 8px;
}

/* Keyboard users can reach the scroller, so it needs a visible focus ring. */
.sk-routeband__scroll:focus-visible {
	outline: 2px solid var(--sk-gold-lt);
	outline-offset: 4px;
	border-radius: 6px;
}

.sk-routeband__track {
	display: flex;
	min-width: 820px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sk-routeband__track li {
	flex: 1;
	position: relative;
	padding-right: 22px;
}

/* The connecting line runs from each number to the next. Not on the last one:
   the design let it trail off the right edge, which reads as an unfinished
   route rather than a return to the marina. */
.sk-routeband__track li:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 12px;
	right: 0;
	height: 2px;
	background: rgba(200, 153, 63, .35);
}

.sk-routeband__num {
	position: relative;
	z-index: 1;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--sk-gold);
	color: var(--sk-navy);
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sk-routeband__track strong {
	display: block;
	font-weight: 800;
	font-size: var(--sk-t-content);
	line-height: 1.25;
	margin-top: 14px;
	color: var(--sk-cream);
}

/* The note carries its own class rather than being styled as a bare span:
   the number is a span inside the same list item, and an element selector
   here outranks .sk-routeband__num, which turned the digits grey-on-gold and
   knocked them out of their disc. */
.sk-routeband__note {
	display: block;
	color: var(--sk-on-navy-dim);
	font-size: var(--sk-t-caption);
	line-height: 1.45;
	margin-top: 5px;
	padding-right: 14px;
}

.sk-routeband__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 34px;
}

/* Breakpoint 6. The card's own padding is generous on desktop and wasteful on
   a phone, where it eats the width the scroller needs. */
@media (max-width: 600px) {
	.sk-routeband {
		padding: 34px 20px 30px;
		border-radius: 16px;
	}
}

/* --------------------------------------- 30. What each charter length covers */

/* A definition list, because that is what it is: a duration and what it buys
   you. Reads as a table without being one, so it reflows on a phone. */

.sk-legs {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sk-hairline);
}

.sk-legs > div {
	display: grid;
	/* The duration label is never wider than "5 hours", so a 150px column
	   with a 26px gutter left a gap the eye has to jump. */
	grid-template-columns: 96px 1fr;
	gap: 6px 18px;
	padding: 14px 0;
	border-bottom: 1px solid var(--sk-hairline);
}

.sk-legs dt {
	font-weight: 700;
	font-size: var(--sk-t-content);
	line-height: var(--sk-t-content-lh);
	color: var(--sk-body);
	margin: 0;
}

/* The price sits under the duration rather than beside it, so the two columns
   stay aligned however long the label gets. */
.sk-legs dt span {
	display: block;
	font-weight: 600;
	font-size: var(--sk-t-caption);
	color: var(--sk-gold-dk);
	margin-top: 2px;
}

.sk-legs dd {
	margin: 0;
	font-size: var(--sk-t-content);
	line-height: var(--sk-t-content-lh);
	color: var(--sk-prose);
}

/* Breakpoint 7. Two columns of 150px + text is unreadable on a phone; this is
   a stack, which auto-fit cannot express for a two-column grid of fixed and
   fluid tracks. */
@media (max-width: 560px) {
	.sk-legs > div {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.sk-legs dt span {
		display: inline;
		margin-left: 8px;
	}
}


/* ------------------------------------------------- 31. Read more / show less */

/* Long prose clipped to a few lines behind a toggle.
   The text is never removed from the document, only its container's height
   limited, so it stays indexable and findable with find-in-page. The clip is
   gated on .sk-js (set inline in the head) so a page without JavaScript shows
   the block in full rather than stuck shut. */

.sk-readmore {
	position: relative;
}

.sk-js .sk-readmore__body {
	/* Four lines, matching the teaser GetYourGuide shows before its own
	   Read more. Measured against the real page rather than guessed: this
	   About block is 181px at the desktop measure, so anything above about
	   130px never engaged at all. */
	/* --sk-clip lets a block set its own limit: the route list measures the
	   height of its fifth item in JS, because "four stops" is not a pixel
	   value. Anything that does not set it gets the four-line default. */
	max-height: var(--sk-clip, 100px);
	overflow: hidden;
}

/* A hard cut mid-sentence looks like a rendering fault; the fade says
   "continues". Sits above the text, so it must not eat the clicks.

   Not on item-clipped lists: there the cut falls cleanly between two rows,
   so a gradient would only make the last visible row look greyed out rather
   than suggesting more below. The Show all control carries that on its own. */
.sk-js .sk-readmore:not([data-sk-clip-items]):not(.is-open):not(.is-short) .sk-readmore__body::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 38px;
	height: 54px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--sk-page));
	pointer-events: none;
}

.sk-js .sk-readmore.is-open .sk-readmore__body,
.sk-js .sk-readmore.is-short .sk-readmore__body {
	max-height: none;
	overflow: visible;
}

.sk-readmore__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--sk-t-content);
	font-weight: 700;
	color: var(--sk-gold-dk);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* No JavaScript, or nothing to hide: no control. */
.sk-readmore__toggle,
.sk-readmore.is-short .sk-readmore__toggle {
	display: none;
}

.sk-js .sk-readmore__toggle {
	display: inline-flex;
}

.sk-js .sk-readmore.is-short .sk-readmore__toggle {
	display: none;
}

/* The clip is a pixel height, so a narrower column holds fewer words. Phones
   get a shorter one anyway — the screen is shorter. */
@media (max-width: 760px) {
	.sk-js .sk-readmore__body {
		/* Five lines. The same words take four times the height in a 327px
		   column, so the phone clip is set by what fits on the screen rather
		   than by matching the desktop word count. */
		max-height: var(--sk-clip, 124px);
	}
}

/* A note that qualifies the thing above it rather than captioning one row. */
.sk-note--ref {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--sk-hairline);
}

/* ----------------------------------------------- 32. Fixed booking bar */

/* Keeps the price and a way back to the form in view on a phone, where the
   booking card stacks several screens below the gallery. Above the split
   breakpoint the card is beside the gallery and always visible, so the bar is
   never shown — the rule below is the only thing that reveals it. */

.sk-bookbar {
	display: none;
}

@media (max-width: 1119.98px) {
	.sk-bookbar {
		position: fixed;
		z-index: 70;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		background: var(--sk-white);
		border-top: 1px solid var(--sk-border-card);
		box-shadow: 0 -6px 24px rgba(11, 34, 55, .12);
		padding: 10px 16px;
		/* Clears the home indicator on an iPhone, and collapses to nothing
		   everywhere else. */
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}

	.sk-bookbar[hidden] {
		display: none;
	}
}

.sk-bookbar__price span {
	display: block;
	font-size: 10.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--sk-muted);
}

.sk-bookbar__price strong {
	font-size: 19px;
	font-weight: 800;
	color: var(--sk-ink);
	line-height: 1.2;
	white-space: nowrap;
}

.sk-bookbar__price em {
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: var(--sk-muted);
}

.sk-bookbar__cta {
	flex: none;
	padding: 12px 20px;
	font-size: 15px;
}

/* The WhatsApp button would otherwise sit on top of the bar. It moves up by
   the bar's own height while the bar is out, and :has() means no JavaScript
   has to coordinate the two. */
@media (max-width: 1119.98px) {
	body:has(.sk-bookbar:not([hidden])) .sk-fab {
		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	}
}