/* ==========================================================================
   The Coastierge — UI layer (v1.2)

   Follows the site's own design system:
   - colours come from Elementor → Site Settings → Global Colors (primary, secondary, accent, text),
     so every component changes with them;
   - Montserrat for text and headings, Belgiano Serif as accent (subtitles, figures, CTA);
   - 16–36 px rounded surfaces, pill buttons, soft shadows, expo easing.

   Motion only animates transform and opacity, and is switched off with prefers-reduced-motion.
   Class names to assign in Elementor (Advanced → CSS Classes) are marked with ★.
   ========================================================================== */

body {
	--coast-navy: var(--e-global-color-primary, #001626);
	--coast-navy-2: #0d293f;
	--coast-accent: var(--e-global-color-accent, #c05a11);
	--coast-accent-strong: #a84b0b;   /* Accent for small text on light backgrounds (AA, 5.6:1). */
	--coast-accent-on-dark: #e58a4e;  /* Accent for text on navy (AA, 7:1). */
	--coast-accent-on-sand: #8f3f08;  /* Accent for small text on sand (AA, 5.4:1). */
	--coast-accent-soft: #ffdbca;
	--coast-sand: var(--e-global-color-secondary, #e4dfd1);
	--coast-surface: #f5f4f0;
	--coast-surface-2: #eeebe5;
	--coast-line: #e2ded5;
	--coast-text: var(--e-global-color-text, #001626);
	--coast-muted: #5c6269;
	--coast-muted-strong: #43474c;

	/* Difficulty (sage · amber · terracotta) on light backgrounds. */
	--coast-lvl-1: #3f7d52;
	--coast-lvl-2: #c05a11;
	--coast-lvl-3: #b3372a;
	--coast-meter-off: rgba(0, 22, 38, 0.14);

	--coast-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--coast-serif: "Belgiano Serif", "Playfair Display", Georgia, serif;

	--coast-r-sm: 12px;
	--coast-r: 16px;
	--coast-r-lg: 24px;
	--coast-r-xl: 36px;
	--coast-pill: 9999px;

	--coast-shadow: 0 6px 30px rgba(0, 22, 38, 0.05);
	--coast-shadow-lift: 0 18px 44px rgba(0, 22, 38, 0.1);
	--coast-shadow-cta: 0 12px 28px rgba(192, 90, 17, 0.28);

	--coast-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--coast-ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
	--coast-fast: 240ms;
	--coast-med: 450ms;
	--coast-slow: 900ms;
}

.coast-trail .screen-reader-text,
.coast-meter .screen-reader-text,
.coast-card .screen-reader-text,
.coast-facts .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.coast-icon { flex: none; display: block; }

/* --------------------------------------------------------------------------
   Shared: eyebrows, titles, links, buttons, focus
   -------------------------------------------------------------------------- */

.coast-card__eyebrow,
.coast-news__eyebrow,
.coast-guests-label,
.coast-facts dt,
.coast-bring__eyebrow,
.coast-inclusions__kicker {
	margin: 0;
	font: 600 11px/1.35 var(--coast-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--coast-accent-strong);
}

.coast-card__title,
.coast-news__title,
.coast-bring__title,
.coast-trail__title,
.coast-inclusions__title {
	margin: 0;
	font-family: var(--coast-sans);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--coast-navy);
	text-wrap: balance;
}
.coast-card__title a,
.coast-news__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--coast-med) var(--coast-ease);
}

/* Text link with arrow: "View experience →" */
a.coast-link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	padding: 6px 0;
	font: 700 11px/1.2 var(--coast-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--coast-navy);
	text-decoration: none;
	white-space: nowrap;
}
a.coast-link .coast-icon { width: 16px; height: 16px; transition: transform var(--coast-med) var(--coast-ease-expo); }
a.coast-link:hover { color: var(--coast-accent-strong); }
a.coast-link:hover .coast-icon,
.coast-card:hover .coast-card__more .coast-icon,
.coast-news:hover .coast-link .coast-icon { transform: translateX(4px); }

/* Buttons: pills, like the site's own. Higher specificity than WooCommerce/Hello resets. */
a.coast-btn,
a.coast-btn.button,
.woocommerce a.coast-btn.button,
.coast-card a.coast-btn.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 0 24px;
	border: 1px solid var(--coast-navy);
	border-radius: var(--coast-pill);
	background: var(--coast-navy);
	color: #fff;
	font: 700 12px/1 var(--coast-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	transition:
		background-color var(--coast-med) var(--coast-ease-expo),
		border-color var(--coast-med) var(--coast-ease-expo),
		color var(--coast-med) var(--coast-ease-expo),
		box-shadow var(--coast-med) var(--coast-ease-expo),
		transform var(--coast-fast) var(--coast-ease-expo);
}
a.coast-btn::after,
a.coast-btn.button::after { content: none; }
a.coast-btn:hover,
a.coast-btn.button:hover,
.coast-card:hover a.coast-btn--dark:not(.loading):not(.added) {
	border-color: var(--coast-accent);
	background: var(--coast-accent);
	color: #fff;
}
a.coast-btn:hover,
a.coast-btn.button:hover { transform: translateY(-2px); box-shadow: var(--coast-shadow-cta); }
a.coast-btn:active,
a.coast-btn.button:active { transform: translateY(0) scale(0.98); box-shadow: none; }

.coast-btn__label { position: relative; }
.coast-btn__icon { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.coast-btn__icon .coast-icon { width: 18px; height: 18px; grid-area: 1 / 1; transition: transform var(--coast-med) var(--coast-ease-expo), opacity var(--coast-fast); }
a.coast-btn:hover .coast-icon--arrow { transform: translateX(3px); }
a.coast-btn:hover .coast-icon--plus { transform: rotate(90deg); }

/* Accent CTA: the site's orange pill with the Belgiano label ("Unlock your journey"). */
a.coast-btn--accent,
a.coast-btn--accent.button {
	--coast-cta: #b45410;
	--coast-cta: color-mix(in srgb, var(--coast-accent) 92%, #000); /* A hair darker than the accent: white text passes AA. */
	min-height: 56px;
	padding: 0 34px;
	border-color: var(--coast-cta);
	background: var(--coast-cta);
	font: 400 17px/1 var(--coast-serif);
	letter-spacing: 0.01em;
	text-transform: none;
}
a.coast-btn--accent:hover,
a.coast-btn--accent.button:hover { border-color: var(--coast-accent-strong); background: var(--coast-accent-strong); }

a.coast-btn--light,
a.coast-btn--light.button { border-color: #fff; background: #fff; color: var(--coast-navy); }
a.coast-btn--light:hover,
a.coast-btn--light.button:hover { border-color: var(--coast-accent-soft); background: var(--coast-accent-soft); color: var(--coast-navy); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }

a.coast-btn--ghost,
a.coast-btn--ghost.button { border-color: var(--coast-line); background: transparent; color: var(--coast-navy); }
a.coast-btn--ghost:hover,
a.coast-btn--ghost.button:hover { border-color: var(--coast-navy); background: var(--coast-navy); color: #fff; box-shadow: none; }

/* Add-to-cart states (WooCommerce toggles .loading and .added) */
a.coast-btn.loading { pointer-events: none; }
a.coast-btn.loading .coast-btn__label { opacity: 0.55; }
a.coast-btn.loading .coast-btn__icon .coast-icon { opacity: 0; }
a.coast-btn.loading .coast-btn__icon::after {
	content: "";
	grid-area: 1 / 1;
	width: 15px;
	height: 15px;
	border: 1.5px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: coast-spin 0.8s linear infinite;
}
a.coast-btn.added,
.coast-card a.coast-btn.added {
	border-color: var(--coast-accent-strong);
	background: var(--coast-accent-strong);
	color: #fff;
}
.coast-btn__icon .coast-icon--check { opacity: 0; transform: scale(0.4); }
a.coast-btn.added .coast-icon--plus { opacity: 0; transform: scale(0.4) rotate(90deg); }
a.coast-btn.added .coast-icon--check { opacity: 1; transform: none; }
.coast-card .added_to_cart { display: none !important; }
/* WooCommerce adds its own tick after "added" buttons: ours is the icon. */
.woocommerce a.coast-btn.button.added::after,
a.coast-btn.added::after,
a.coast-btn.loading::after { content: none !important; display: none !important; } /* WooCommerce "View cart" link: the side cart and the pill replace it. */

/* Focus: always visible, follows the rounded shapes. */
.coast-card :is(a, button):focus-visible,
.coast-news :is(a, button):focus-visible,
.coast-bring :is(a, button):focus-visible,
.coast-inclusions :is(a, button):focus-visible,
.coast-chips .e-filter-item:focus-visible,
.coast-rail .elementor-swiper-button:focus-visible,
.coast-selection__link:focus-visible,
a.coast-btn:focus-visible,
a.coast-link:focus-visible {
	outline: 2px solid var(--coast-accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Experience card  [coast_experience_card]
   -------------------------------------------------------------------------- */

.coast-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--coast-r-lg);
	background: #fff;
	box-shadow: var(--coast-shadow);
	color: var(--coast-text);
	font-family: var(--coast-sans);
	isolation: isolate;
	transition: transform var(--coast-med) var(--coast-ease), box-shadow var(--coast-med) var(--coast-ease);
}

.coast-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--coast-sand);
}
.coast-card__img,
.coast-news__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform 1200ms var(--coast-ease);
}
.coast-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0, 22, 38, 0.22));
	opacity: 0;
	transition: opacity var(--coast-slow) var(--coast-ease);
	pointer-events: none;
}
@media (hover: hover) {
	.coast-card:hover { transform: translateY(-6px); box-shadow: var(--coast-shadow-lift); }
	.coast-card:hover .coast-card__img,
	.coast-news:hover .coast-news__img { transform: scale(1.05); }
	.coast-card:hover .coast-card__media::after { opacity: 1; }
	.coast-card:hover .coast-card__title a,
	.coast-news:hover .coast-news__title a { color: var(--coast-accent-strong); }
}

/* Glass pill on the image, like the site's badges */
.coast-card__badge,
.coast-news__badge {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: var(--coast-pill);
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
	font: 700 10px/1 var(--coast-sans);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--coast-navy);
}

.coast-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 22px 22px 20px;
}
.coast-card__title { font-size: clamp(19px, 0.5vw + 16px, 22px); line-height: 1.22; }
.coast-card__tagline {
	margin: -2px 0 0;
	font: 400 17px/1.35 var(--coast-serif);
	color: var(--coast-muted-strong);
	text-wrap: balance;
}

.coast-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	font: 500 13px/1.4 var(--coast-sans);
	color: var(--coast-muted);
}
.coast-card__fact { display: inline-flex; align-items: center; gap: 6px; }
.coast-card__fact .coast-icon { width: 15px; height: 15px; color: var(--coast-accent-strong); }

/* Footer: price on its own line, then the actions row (identical on every card). */
.coast-card__footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--coast-line);
}
.coast-card__price { font: 700 20px/1.2 var(--coast-sans); color: var(--coast-navy); }
.coast-price__from {
	margin-right: 0.3em;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--coast-muted);
	vertical-align: 0.2em;
}
.coast-price__unit { font-size: 13px; font-weight: 500; color: var(--coast-muted); }
.coast-price .amount,
.coast-price bdi { color: inherit; font-weight: inherit; }

.coast-card__actions { display: flex; align-items: center; gap: 8px; }
.coast-card__actions a.coast-btn,
.coast-card a.coast-btn--ghost { flex: 1 1 auto; }
.coast-card__more { margin-top: -2px; }

/* Guests stepper — overrides Hello Elementor's pink button reset */
.coast-qty {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 2px;
	height: 48px;
	padding: 0 5px;
	border: 1px solid var(--coast-line);
	border-radius: var(--coast-pill);
	background: #fff;
	transition: border-color var(--coast-fast);
}
.coast-qty:hover { border-color: #c3c7cc; }
.coast-qty .coast-qty__btn,
.coast-qty .coast-qty__btn:hover,
.coast-qty .coast-qty__btn:focus {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--coast-navy);
	cursor: pointer;
	transition: background-color var(--coast-fast), transform var(--coast-fast) var(--coast-ease-expo);
}
.coast-qty .coast-qty__btn:hover:not(:disabled) { background: var(--coast-surface-2); }
.coast-qty .coast-qty__btn:active:not(:disabled) { transform: scale(0.9); }
.coast-qty .coast-qty__btn:disabled { opacity: 0.3; cursor: default; }
.coast-qty .coast-qty__btn:focus-visible { outline: 2px solid var(--coast-accent); outline-offset: 1px; }
.coast-qty__display {
	min-width: 62px;
	font: 700 13px/1 var(--coast-sans);
	text-align: center;
	white-space: nowrap;
	color: var(--coast-navy);
}
.coast-qty__unit { margin-left: 3px; font-weight: 500; color: var(--coast-muted); }
.coast-qty__value { display: inline-block; font-variant-numeric: tabular-nums; }
.coast-qty__value.is-tick { animation: coast-tick 300ms var(--coast-ease); }

/* Note: no container queries on loop items — `container-type` breaks Elementor's grid height on mobile. */

/* --------------------------------------------------------------------------
   What's On  [coast_news_card variant="card|feature"]
   -------------------------------------------------------------------------- */

.coast-news {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--coast-r-lg);
	background: #fff;
	box-shadow: var(--coast-shadow);
	color: var(--coast-text);
	font-family: var(--coast-sans);
	isolation: isolate;
	transition: transform var(--coast-med) var(--coast-ease), box-shadow var(--coast-med) var(--coast-ease);
}
@media (hover: hover) {
	.coast-news:hover { transform: translateY(-6px); box-shadow: var(--coast-shadow-lift); }
}
.coast-news__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--coast-sand);
}
.coast-news__img--empty { background: linear-gradient(135deg, var(--coast-sand), var(--coast-surface)); }
.coast-news__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 22px 24px 24px;
}
.coast-news__title { font-size: clamp(19px, 0.6vw + 16px, 23px); line-height: 1.22; }
.coast-news__excerpt {
	margin: 0;
	max-width: 60ch;
	font: 500 15px/1.65 var(--coast-sans);
	color: var(--coast-muted);
}
.coast-news .coast-link { margin-top: auto; }
.coast-news__eyebrow--single { margin-bottom: 4px; }

/* Feature: split card, like the homepage "Latest on the journal" block */
.coast-news--feature { border-radius: var(--coast-r-xl); }
.coast-news--feature .coast-news__body { gap: 16px; padding: 30px 26px 32px; background: var(--coast-sand); }
.coast-news--feature .coast-news__title { font-size: clamp(28px, 2.2vw + 16px, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.coast-news--feature .coast-news__excerpt { font-size: 16px; color: var(--coast-muted-strong); }
.coast-news--feature .coast-news__eyebrow { color: var(--coast-accent-on-sand); }
.coast-news--feature .coast-news__cta { align-self: flex-start; margin-top: 10px; }
@media (min-width: 900px) {
	.coast-news--feature { display: grid; grid-template-columns: 1fr 1fr; }
	.coast-news--feature .coast-news__media { aspect-ratio: auto; min-height: 460px; }
	.coast-news--feature .coast-news__media .coast-news__img { position: absolute; inset: 0; }
	.coast-news--feature .coast-news__body { justify-content: center; padding: clamp(40px, 4vw, 64px); }
	.coast-news--feature .coast-news__badge { top: 32px; left: 32px; }
}

/* --------------------------------------------------------------------------
   ★ .coast-chips  → on the Taxonomy Filter widget
   -------------------------------------------------------------------------- */

.coast-chips .e-filter {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start; /* Elementor centres the chips: overflowing chips would be cut off on the left. */
	gap: 8px;
	padding: 4px 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
	mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.coast-chips .e-filter::-webkit-scrollbar { display: none; }
.coast-chips .e-filter-item[data-filter="__all"] { order: -1; } /* "All" first. */
@media (min-width: 1025px) {
	.coast-chips .e-filter { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
}
.coast-chips .e-filter-item,
.coast-chips .e-filter-item:hover,
.coast-chips .e-filter-item:focus {
	flex: 0 0 auto;
	height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--coast-line);
	border-radius: var(--coast-pill);
	background: #fff;
	color: var(--coast-navy);
	font: 700 11px/1 var(--coast-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color var(--coast-med) var(--coast-ease-expo), color var(--coast-med) var(--coast-ease-expo), border-color var(--coast-med), transform var(--coast-fast) var(--coast-ease-expo);
}
.coast-chips .e-filter-item:hover { border-color: var(--coast-navy); transform: translateY(-1px); }
.coast-chips .e-filter-item:active { transform: scale(0.97); }
.coast-chips .e-filter-item[aria-pressed="true"] {
	border-color: var(--coast-navy);
	background: var(--coast-navy);
	color: #fff;
}
/* Hidden while every experience shares one category ("All" + one chip): it appears by itself
   when the first experience in a second domain is published. */
body:not(.elementor-editor-active) .coast-chips:not(:has(.e-filter-item:nth-of-type(3))) { display: none; }

/* --------------------------------------------------------------------------
   ★ .coast-rail  → on Loop Carousel widgets (equal-height cards, round arrows, slim progress)
   -------------------------------------------------------------------------- */

.coast-rail .swiper { padding: 10px 4px 28px; margin: -10px -4px 0; } /* Room for the card lift and shadow. */
.coast-rail .swiper-slide { height: auto; }
.coast-rail .swiper-slide > .e-loop-item,
.coast-rail .e-loop-item > .e-con { height: 100%; }
.coast-rail .swiper-pagination-progressbar {
	top: auto !important;
	bottom: 0 !important;
	height: 3px !important;
	overflow: hidden;
	border-radius: var(--coast-pill);
	background: var(--coast-line);
}
.coast-rail .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { border-radius: inherit; background: var(--coast-navy); }
.coast-rail .elementor-swiper-button {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid #c3c7cc;
	border-radius: 50%;
	background: #fff;
	color: var(--coast-navy);
	box-shadow: var(--coast-shadow);
	transition: background-color var(--coast-med) var(--coast-ease-expo), color var(--coast-med), border-color var(--coast-med), transform var(--coast-fast) var(--coast-ease-expo);
}
.coast-rail .elementor-swiper-button svg { fill: currentColor; }
.coast-rail .elementor-swiper-button:hover { border-color: var(--coast-navy); background: var(--coast-navy); color: #fff; transform: scale(1.06); }
@media (max-width: 1024px) { .coast-rail .elementor-swiper-button { display: none; } }

/* --------------------------------------------------------------------------
   Single experience: gallery, subtitle, facts, guests, add to cart
   -------------------------------------------------------------------------- */

.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image img {
	overflow: hidden;
	border-radius: var(--coast-r-lg);
}
/* No jump while WooCommerce starts the gallery slider (it stacks every photo for a moment):
   while the gallery is still hidden, it keeps the final 4:5 photo + thumbnails height.
   Keeps Cumulative Layout Shift near zero on phones. */
.woocommerce-product-gallery[style*="opacity: 0"] { height: 0 !important; padding-bottom: calc(125% + 86px) !important; overflow: hidden !important; }
.woocommerce-product-gallery[style*="opacity: 0"]:not(:has(.woocommerce-product-gallery__image:nth-child(2))) { padding-bottom: 125% !important; }
.single-product .woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: 10px; margin-top: 10px !important; }
.single-product .woocommerce-product-gallery .flex-control-thumbs li { width: 76px !important; margin: 0 !important; }
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--coast-r-sm);
	opacity: 0.6;
	transition: opacity var(--coast-fast), transform var(--coast-fast) var(--coast-ease-expo);
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; transform: translateY(-2px); }
.single-product .woocommerce-product-gallery__trigger {
	top: 18px !important;
	right: 18px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.92) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.coast-tagline {
	margin: -8px 0 0;
	font: 400 clamp(20px, 0.8vw + 15px, 26px)/1.3 var(--coast-serif);
	color: var(--coast-muted-strong);
	text-wrap: balance;
}

/* Facts: soft tiles (Duration · Difficulty · Where · Group) */
.coast-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}
.coast-facts > .coast-facts__row:last-child:nth-child(odd) { grid-column: 1 / -1; }
.coast-facts__row {
	padding: 16px 18px;
	border-radius: var(--coast-r);
	background: var(--coast-surface);
	transition: background-color var(--coast-fast);
}
.coast-facts dt { font-size: 10px; color: var(--coast-muted); }
.coast-facts dd {
	margin: 8px 0 0;
	font: 700 15px/1.35 var(--coast-sans);
	color: var(--coast-navy);
}

.coast-guests-label { display: block; flex: 0 0 100%; width: 100%; margin-bottom: 2px; }

.elementor-widget-woocommerce-product-add-to-cart form.cart,
.single-product form.cart {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: stretch;
	gap: 10px;
}
.single-product form.cart .quantity { margin: 0 !important; }
.single-product form.cart .quantity .qty {
	width: 104px;
	height: 56px;
	border: 1px solid var(--coast-line);
	border-radius: var(--coast-pill);
	background: #fff;
	color: var(--coast-navy);
	font: 700 16px/1 var(--coast-sans);
	text-align: center;
	transition: border-color var(--coast-fast), box-shadow var(--coast-fast);
}
.single-product form.cart .quantity .qty:focus { border-color: var(--coast-navy); box-shadow: 0 0 0 3px var(--coast-accent-soft); outline: none; }
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart .single_add_to_cart_button.button,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button {
	height: 56px;
	margin: 0;
	padding: 0 34px;
	border: 1px solid var(--coast-navy);
	border-radius: var(--coast-pill);
	background: var(--coast-navy);
	color: #fff;
	font: 700 12px/1 var(--coast-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color var(--coast-med) var(--coast-ease-expo), border-color var(--coast-med), transform var(--coast-fast) var(--coast-ease-expo), box-shadow var(--coast-med);
}
.single-product form.cart .single_add_to_cart_button:hover,
.elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button:hover {
	border-color: var(--coast-accent);
	background: var(--coast-accent);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--coast-shadow-cta);
}
.single-product form.cart .single_add_to_cart_button:focus-visible { outline: 2px solid var(--coast-accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Included / Not included  [coast_inclusions]  [coast_included]
   -------------------------------------------------------------------------- */

.coast-inclusions { display: flex; flex-direction: column; gap: 14px; }
.coast-inclusions__group {
	padding: clamp(22px, 2.4vw, 30px);
	border-radius: var(--coast-r-lg);
	background: var(--coast-surface);
}
.coast-inclusions__group--no { border: 1px solid var(--coast-line); background: #fff; }
.coast-inclusions__title { margin-bottom: 6px; font-size: 19px; }
.coast-inclusions__group--no .coast-inclusions__title { color: var(--coast-muted-strong); }

.coast-included { margin: 0; padding: 0; list-style: none; }
.coast-included li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid var(--coast-line);
}
.coast-included li:last-child { border-bottom: 0; padding-bottom: 0; }
.coast-included li > .coast-icon {
	grid-row: span 2;
	box-sizing: content-box;
	width: 16px;
	height: 16px;
	padding: 6px;
	border-radius: 50%;
	background: var(--coast-accent-soft);
	color: var(--coast-accent-strong);
}
.coast-included__main { padding-top: 4px; font: 600 15px/1.5 var(--coast-sans); color: var(--coast-navy); }
.coast-included__detail { grid-column: 2; margin-top: 2px; font: 500 13px/1.5 var(--coast-sans); color: var(--coast-muted); }
.coast-included--no li > .coast-icon { background: var(--coast-surface-2); color: var(--coast-muted); }
.coast-included--no .coast-included__main { color: var(--coast-muted-strong); font-weight: 500; }

.coast-note { font: 500 15px/1.7 var(--coast-sans); color: var(--coast-muted); }

/* --------------------------------------------------------------------------
   Difficulty meter, subtitle marks
   -------------------------------------------------------------------------- */

/* ©/®/™ in titles (wrapped by coastierge.js) */
.coast-mark { margin-left: 0.04em; font-family: var(--coast-sans); font-size: 0.42em; font-weight: 600; line-height: 0; vertical-align: 0.95em; }

/* 3-bar meter: lit bars take the level colour */
.coast-meter { display: inline-flex; align-items: center; gap: 0.55em; white-space: nowrap; }
.coast-meter__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.coast-meter__bars i { display: block; width: 4px; border-radius: 2px; background: var(--coast-meter-off); }
.coast-meter__bars i:nth-child(1) { height: 5px; }
.coast-meter__bars i:nth-child(2) { height: 9px; }
.coast-meter__bars i:nth-child(3) { height: 13px; }
.coast-meter[data-level="1"] { --coast-lvl: var(--coast-lvl-1); }
.coast-meter[data-level="2"] { --coast-lvl: var(--coast-lvl-2); }
.coast-meter[data-level="3"] { --coast-lvl: var(--coast-lvl-3); }
.coast-meter[data-level="1"] i:nth-child(-n+1),
.coast-meter[data-level="2"] i:nth-child(-n+2),
.coast-meter[data-level="3"] i { background: var(--coast-lvl); }

/* --------------------------------------------------------------------------
   Technical information  [coast_trail]
   -------------------------------------------------------------------------- */

.coast-trail {
	--t-fg: #fff;
	--t-muted: rgba(255, 255, 255, 0.72);
	--t-line: rgba(255, 255, 255, 0.12);
	--t-glass: rgba(255, 255, 255, 0.05);
	--t-glass-hover: rgba(255, 255, 255, 0.09);
	--coast-meter-off: rgba(255, 255, 255, 0.22);
	--coast-lvl-1: #8fcb9b;
	--coast-lvl-2: #e58a4e;
	--coast-lvl-3: #f07a64;
	padding: 0 clamp(12px, 2vw, 24px);
	font-family: var(--coast-sans);
}
.coast-trail__inner {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	overflow: hidden;
	padding: clamp(40px, 6vw, 84px) clamp(20px, 5vw, 72px);
	border-radius: var(--coast-r-xl);
	background:
		radial-gradient(70% 90% at 100% 0%, rgba(192, 90, 17, 0.22), transparent 60%),
		radial-gradient(60% 70% at 0% 100%, rgba(13, 41, 63, 0.9), transparent 70%),
		var(--coast-navy);
	color: var(--t-fg);
}
/* Contour lines: a quiet nod to the trail maps. */
.coast-trail__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M-20 380c60-40 120-10 180-40s90-110 170-120 110 40 170 20'/%3E%3Cpath d='M-20 410c70-30 130 0 190-30s100-120 180-126 100 50 150 34'/%3E%3Cpath d='M-20 440c80-20 140 10 200-20s110-130 190-132 90 60 130 48'/%3E%3Cpath d='M-20 60c50 30 110 20 160 0s110-40 170-10 120 30 190 0'/%3E%3Cpath d='M-20 30c60 30 120 22 170 2s120-44 180-14 110 26 170-2'/%3E%3C/svg%3E");
	background-size: 480px 480px;
	pointer-events: none;
}
.coast-trail__inner > * { position: relative; }

.coast-trail__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.coast-trail__eyebrow {
	margin: 0;
	font: 600 11px/1.3 var(--coast-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--coast-accent-on-dark);
}
.coast-trail__title { font-size: clamp(30px, 2.6vw + 16px, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; color: var(--t-fg); }

/* Spec tiles */
.coast-trail__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}
.coast-trail__specs > .coast-spec:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 700px) {
	.coast-trail__specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.coast-trail__specs > .coast-spec:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1025px) {
	.coast-trail__specs { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 14px; }
}
.coast-spec {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(16px, 1.6vw, 22px);
	border: 1px solid var(--t-line);
	border-radius: var(--coast-r-lg);
	background: var(--t-glass);
	transition: background-color var(--coast-med) var(--coast-ease), transform var(--coast-med) var(--coast-ease), border-color var(--coast-med);
}
@media (hover: hover) {
	.coast-spec:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); background: var(--t-glass-hover); }
}
.coast-spec__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 600 10px/1.3 var(--coast-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--t-muted);
}
.coast-spec__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(229, 138, 78, 0.16);
	color: var(--coast-accent-on-dark);
}
.coast-spec__icon .coast-icon { width: 18px; height: 18px; }
.coast-spec__value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	margin: 4px 0 0;
	font: 400 clamp(32px, 1.4vw + 22px, 46px)/1 var(--coast-serif);
	color: var(--t-fg);
	white-space: nowrap;
}
.coast-spec__unit { font: 600 13px/1 var(--coast-sans); letter-spacing: 0.02em; color: var(--t-muted); }
.coast-spec__to { margin: 0 0.12em; color: var(--coast-accent-on-dark); }
.coast-spec__hint { margin: auto 0 0; font: 500 12px/1.4 var(--coast-sans); color: var(--t-muted); }
.coast-count { display: inline-block; font-variant-numeric: lining-nums; }
.coast-spec--gain .coast-spec__value { flex-direction: column; align-items: flex-start; gap: 8px; font-size: clamp(24px, 0.8vw + 18px, 30px); }
.coast-spec__dir { display: inline-flex; align-items: baseline; gap: 5px; }
.coast-spec__arrow {
	align-self: center;
	width: 0;
	height: 0;
	margin-right: 4px;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
}
.coast-spec__dir--up .coast-spec__arrow { border-bottom: 8px solid var(--coast-accent-on-dark); }
.coast-spec__dir--down .coast-spec__arrow { border-top: 8px solid var(--t-muted); }

/* Difficulty + starting point */
.coast-trail__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
@media (min-width: 1025px) {
	.coast-trail__foot { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: start; gap: 14px; margin-top: 14px; }
}
.coast-level,
.coast-start {
	border: 1px solid var(--t-line);
	border-radius: var(--coast-r-lg);
	background: var(--t-glass);
}
.coast-level {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px 32px;
	padding: clamp(22px, 2.6vw, 36px);
}
.coast-level__gauge { flex: none; width: 150px; }
.coast-level__body { flex: 1 1 280px; min-width: 0; }
.coast-level__kicker,
.coast-start__label {
	margin: 0 0 8px;
	font: 600 10px/1.3 var(--coast-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--t-muted);
}
.coast-level__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 0;
	font: 800 clamp(26px, 1vw + 20px, 34px)/1.1 var(--coast-sans);
	letter-spacing: -0.02em;
	color: var(--t-fg);
}
.coast-level__of {
	padding: 6px 10px;
	border-radius: var(--coast-pill);
	background: rgba(229, 138, 78, 0.16);
	font: 700 11px/1 var(--coast-sans);
	letter-spacing: 0.1em;
	color: var(--coast-accent-on-dark);
}
.coast-level__text { margin: 12px 0 0; max-width: 62ch; font: 500 15px/1.65 var(--coast-sans); color: var(--t-muted); }

/* Gauge — lit segments up to the level; the needle sweeps in when it scrolls into view */
.coast-gauge { display: block; width: 100%; height: auto; overflow: visible; }
.coast-gauge__seg { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 10; stroke-linecap: butt; }
.coast-gauge__seg--1.is-lit { stroke: var(--coast-lvl-1); }
.coast-gauge__seg--2.is-lit { stroke: var(--coast-lvl-2); }
.coast-gauge__seg--3.is-lit { stroke: var(--coast-lvl-3); }
.coast-gauge.is-live .coast-gauge__seg { transition: stroke 600ms var(--coast-ease); }
.coast-gauge.is-live .coast-gauge__seg--2 { transition-delay: 260ms; }
.coast-gauge.is-live .coast-gauge__seg--3 { transition-delay: 520ms; }
.coast-gauge__needle {
	transform-box: view-box;
	transform-origin: 60px 60px;
	transform: rotate(var(--coast-needle, 0deg));
}
.coast-gauge__needle path { stroke: var(--t-fg); stroke-width: 2.5; stroke-linecap: round; }
.coast-gauge__needle circle { fill: var(--t-fg); }
.coast-gauge.is-armed .coast-gauge__needle { transform: rotate(-90deg); }
.coast-gauge.is-armed .coast-gauge__seg.is-lit { stroke: rgba(255, 255, 255, 0.14); }
.coast-gauge.is-live .coast-gauge__needle { transition: transform 1300ms var(--coast-ease-expo) 150ms; }

/* Legend: "How we grade our trails" — current level highlighted */
.coast-legend { margin-top: 20px; }
.coast-legend summary {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--coast-pill);
	list-style: none;
	cursor: pointer;
	font: 700 11px/1 var(--coast-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--t-fg);
	transition: background-color var(--coast-med) var(--coast-ease-expo), border-color var(--coast-med);
}
.coast-legend summary:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); }
.coast-legend summary::-webkit-details-marker { display: none; }
.coast-legend summary::after {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	background:
		linear-gradient(var(--coast-accent-on-dark), var(--coast-accent-on-dark)) center / 11px 1.5px no-repeat,
		linear-gradient(var(--coast-accent-on-dark), var(--coast-accent-on-dark)) center / 1.5px 11px no-repeat;
	transition: transform var(--coast-med) var(--coast-ease-expo);
}
.coast-legend[open] summary::after { transform: rotate(135deg); }
.coast-legend summary:focus-visible { outline: 2px solid var(--coast-accent-on-dark); outline-offset: 3px; }
.coast-legend__list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.coast-legend[open] .coast-legend__list { animation: coast-rise 480ms var(--coast-ease) both; }
@supports (interpolate-size: allow-keywords) {
	.coast-legend { interpolate-size: allow-keywords; }
	.coast-legend::details-content {
		height: 0;
		overflow: clip;
		transition: height 520ms var(--coast-ease), content-visibility 520ms allow-discrete;
	}
	.coast-legend[open]::details-content { height: auto; }
}
.coast-legend__item {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--coast-r);
	background: rgba(255, 255, 255, 0.03);
	font: 500 14px/1.6 var(--coast-sans);
	color: var(--t-muted);
}
.coast-legend__item .coast-meter { padding-top: 5px; }
.coast-legend__item strong { display: block; margin-bottom: 2px; font-weight: 700; color: var(--t-fg); }
.coast-legend__item.is-current { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(229, 138, 78, 0.45); }
.coast-legend__item.is-current strong::after {
	content: "This trail";
	margin-left: 10px;
	padding: 3px 8px;
	border-radius: var(--coast-pill);
	background: rgba(229, 138, 78, 0.18);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	vertical-align: 0.1em;
	color: var(--coast-accent-on-dark);
}

/* Starting point */
.coast-start { display: flex; gap: 16px; padding: clamp(22px, 2.6vw, 36px); }
.coast-start > div { display: flex; flex-direction: column; align-items: flex-start; }
.coast-start__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(229, 138, 78, 0.16);
	color: var(--coast-accent-on-dark);
}
.coast-start__icon .coast-icon { width: 22px; height: 22px; }
.coast-start__place { margin: 0; font: 700 clamp(19px, 0.5vw + 16px, 22px)/1.3 var(--coast-sans); color: var(--t-fg); }
a.coast-start__map {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 16px;
	padding: 0 18px;
	border-radius: var(--coast-pill);
	background: #fff;
	font: 700 11px/1 var(--coast-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--coast-navy);
	text-decoration: none;
	transition: background-color var(--coast-med) var(--coast-ease-expo), transform var(--coast-fast) var(--coast-ease-expo);
}
a.coast-start__map:hover { background: var(--coast-accent-soft); transform: translateY(-2px); }
a.coast-start__map:focus-visible { outline: 2px solid var(--coast-accent-on-dark); outline-offset: 3px; }
a.coast-start__map .coast-icon { width: 14px; height: 14px; color: var(--coast-accent-strong); transition: transform var(--coast-med) var(--coast-ease-expo); }
a.coast-start__map:hover .coast-icon { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   What to bring  [coast_recommendations]
   -------------------------------------------------------------------------- */

.coast-bring { padding: clamp(56px, 7vw, 104px) 24px; font-family: var(--coast-sans); }
.coast-bring__inner { max-width: 1232px; margin: 0 auto; }
.coast-bring__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(24px, 3vw, 40px); }
.coast-bring__title { font-size: clamp(28px, 2vw + 16px, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
.coast-bring__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.coast-bring__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border-radius: var(--coast-r-lg);
	background: var(--coast-surface);
	transition: background-color var(--coast-med) var(--coast-ease), box-shadow var(--coast-med) var(--coast-ease), transform var(--coast-med) var(--coast-ease);
}
.coast-bring__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--coast-accent-soft);
	color: var(--coast-accent-strong);
	transition: transform var(--coast-slow) var(--coast-ease-expo);
}
.coast-bring__icon .coast-icon { width: 26px; height: 26px; }
.coast-bring__name { display: block; font: 700 16px/1.3 var(--coast-sans); color: var(--coast-navy); }
.coast-bring__detail { display: block; margin-top: 4px; font: 500 14px/1.55 var(--coast-sans); color: var(--coast-muted); }
@media (hover: hover) {
	.coast-bring__item:hover { background: #fff; box-shadow: var(--coast-shadow-lift); transform: translateY(-4px); }
	.coast-bring__item:hover .coast-bring__icon { transform: rotate(-8deg) scale(1.06); }
}
@media (min-width: 700px) and (max-width: 1024px) {
	.coast-bring__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
	.coast-bring__list { grid-template-columns: repeat(var(--coast-bring-count, 5), minmax(0, 1fr)); gap: 14px; }
	.coast-bring__item { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 24px 30px; }
	.coast-bring__icon { width: 60px; height: 60px; }
	.coast-bring__icon .coast-icon { width: 28px; height: 28px; }
}

/* --------------------------------------------------------------------------
   Calendly button (Advisory)  [coast_calendly]
   -------------------------------------------------------------------------- */

.coast-calendly-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.coast-calendly__note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 600 12px/1.4 var(--coast-sans);
	letter-spacing: 0.02em;
	color: inherit;
	opacity: 0.8;
}
.coast-calendly__note .coast-icon { width: 14px; height: 14px; color: var(--coast-accent); }
.coast-on-dark .coast-calendly__note .coast-icon { color: var(--coast-accent-on-dark); }
.coast-on-dark { color: #fff; }

/* --------------------------------------------------------------------------
   "Your selection" pill — tablets & phones, or any page without the header cart
   -------------------------------------------------------------------------- */

.coast-selection[hidden] { display: none !important; }
.coast-selection {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	display: none;
	transform: translateX(-50%);
}
@media (max-width: 1024px) {
	.coast-selection:not([hidden]) { display: block; animation: coast-pill-in 560ms var(--coast-ease-expo) both; }
	body:has(.coast-selection:not([hidden])) { padding-bottom: 88px; }
}
/* No Menu Cart on the page (e.g. a page with its own hero menu): the pill is the way to checkout on desktop too. */
body:not(:has(.elementor-widget-woocommerce-menu-cart)) .coast-selection:not([hidden]) { display: block; animation: coast-pill-in 560ms var(--coast-ease-expo) both; }
.coast-selection__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	border-radius: var(--coast-pill);
	background: var(--coast-navy);
	color: #fff;
	font: 700 11px/1 var(--coast-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 16px 36px rgba(0, 22, 38, 0.3);
	transition: background-color var(--coast-med) var(--coast-ease-expo), transform var(--coast-fast) var(--coast-ease-expo);
}
.coast-selection__link:hover { background: var(--coast-accent); color: #fff; transform: translateY(-2px); }
.coast-selection__link .coast-icon { width: 16px; height: 16px; transition: transform var(--coast-med) var(--coast-ease-expo); }
.coast-selection__link:hover .coast-icon { transform: translateX(3px); }
.coast-selection__count { font-weight: 500; opacity: 0.75; }
.coast-selection__total { font-size: 13px; letter-spacing: 0.02em; text-transform: none; }
.coast-selection__total .amount { color: inherit; }

.is-bump { animation: coast-bump 560ms var(--coast-ease-expo); }

/* --------------------------------------------------------------------------
   ★ .coast-header  → header container (Theme Builder → Header "Header — Coastierge")
   Glass pill bar like the site's menu; turns solid when the page scrolls. On pages whose first
   section has the class ★ .coast-hero, it floats over the image in its light version.
   -------------------------------------------------------------------------- */

[data-elementor-type="header"]:has(.coast-header) { position: sticky; top: 0; z-index: 900; }
body:has(.coast-hero) [data-elementor-type="header"]:has(.coast-header) { position: fixed; right: 0; left: 0; }
body.admin-bar [data-elementor-type="header"]:has(.coast-header) { top: 32px; }
@media (max-width: 782px) { body.admin-bar [data-elementor-type="header"]:has(.coast-header) { top: 46px; } }

.coast-header .elementor-nav-menu--main .elementor-nav-menu {
	gap: 4px;
	padding: 6px;
	border-radius: var(--coast-pill);
	background: rgba(255, 255, 255, 0.76);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 6px 24px rgba(0, 22, 38, 0.06);
}
.coast-header .elementor-nav-menu--main .elementor-item {
	padding: 12px 20px !important;
	border-radius: var(--coast-pill);
	font: 600 11px/1 var(--coast-sans) !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	color: var(--coast-navy) !important;
	transition: background-color var(--coast-med) var(--coast-ease-expo), color var(--coast-med);
}
.coast-header .elementor-nav-menu--main .elementor-item::before,
.coast-header .elementor-nav-menu--main .elementor-item::after { display: none !important; }
.coast-header .elementor-nav-menu--main .elementor-item:hover,
.coast-header .elementor-nav-menu--main .elementor-item.elementor-item-active { background: var(--coast-navy); color: #fff !important; }
.coast-header .elementor-menu-toggle {
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 6px 24px rgba(0, 22, 38, 0.06);
	transition: transform var(--coast-fast) var(--coast-ease-expo), background-color var(--coast-med);
}
.coast-header .elementor-menu-toggle:hover { transform: translateY(-2px); background: #fff; }
.coast-header .elementor-menu-toggle:focus-visible { outline: 2px solid var(--coast-accent); outline-offset: 3px; }
/* Phones: logo left; menu and cart together on the right. (Elementor shows the toggle only below 768 px.) */
@media (max-width: 767px) {
	.coast-header .elementor-menu-toggle { display: grid; }
	.coast-header .elementor-widget-nav-menu { margin-left: auto; }
	.coast-header .elementor-nav-menu--dropdown.elementor-nav-menu__container { margin-top: 12px !important; }
	.coast-header .elementor-nav-menu--dropdown .elementor-item {
		padding: 18px 24px !important;
		font: 700 13px/1.2 var(--coast-sans) !important;
		letter-spacing: 0.12em !important;
		text-transform: uppercase;
	}
}
.coast-header .elementor-nav-menu--dropdown { overflow: hidden; border-radius: var(--coast-r-lg); background: #fff; box-shadow: var(--coast-shadow-lift); }
.coast-header .elementor-site-logo img,
.coast-header .elementor-widget-theme-site-logo img { transition: filter var(--coast-med) var(--coast-ease); }

/* Cart: a round glass button with the count bubble */
.coast-header .elementor-menu-cart__toggle .elementor-button {
	width: 48px;
	height: 48px;
	padding: 0 !important;
	justify-content: center;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.86) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 6px 24px rgba(0, 22, 38, 0.06);
	transition: background-color var(--coast-med) var(--coast-ease-expo), transform var(--coast-fast) var(--coast-ease-expo);
}
.coast-header .elementor-menu-cart__toggle .elementor-button:hover { transform: translateY(-2px); background: #fff !important; }
.coast-header .elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter] {
	top: -4px !important;
	right: -4px !important;
	min-width: 20px;
	height: 20px;
	border-radius: var(--coast-pill);
	background: var(--coast-accent) !important;
	font: 700 10px/20px var(--coast-sans);
}

/* Solid state once the page scrolls. The frosted layer is a pseudo-element: a backdrop-filter on
   the header itself would trap the side cart (position: fixed) inside the header box. */
.coast-header { position: relative; isolation: isolate; }
.coast-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.84);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 8px 30px rgba(0, 22, 38, 0.08);
	opacity: 0;
	transition: opacity var(--coast-med) var(--coast-ease);
	pointer-events: none;
}
.coast-header.is-scrolled::before { opacity: 1; }
.coast-header.is-scrolled .elementor-nav-menu--main .elementor-nav-menu { background: transparent; box-shadow: none; }

/* Over a hero image: white logo; on light backgrounds the white logo prints dark (monochrome brand version). */
body:not(:has(.coast-hero)) .coast-header .elementor-widget-theme-site-logo img,
.coast-header.is-scrolled .elementor-widget-theme-site-logo img { filter: brightness(0); }

/* ★ .coast-hero → inset, rounded hero container (first section of a page)
   ★ .coast-inset → any container with side margins (rounded panels): keeps it inside the window */
.coast-hero { overflow: hidden; border-radius: var(--coast-r-xl); }
.e-con.coast-hero,
.e-con.coast-inset { --width: calc(100% - var(--margin-left, 0px) - var(--margin-right, 0px)); }

/* --------------------------------------------------------------------------
   WooCommerce + Elementor defaults in brand (side cart, block cart & checkout)
   -------------------------------------------------------------------------- */

.elementor-widget-woocommerce-menu-cart {
	--toggle-button-text-color: var(--coast-navy);
	--toggle-button-icon-color: var(--coast-navy);
	--toggle-button-background-color: transparent;
	--toggle-button-hover-text-color: var(--coast-navy);
	--toggle-button-icon-hover-color: var(--coast-navy);
	--toggle-button-hover-background-color: transparent;
	--toggle-button-border-width: 0px;
	--toggle-icon-size: 22px;
	--items-indicator-background-color: var(--coast-accent);
	--items-indicator-text-color: #fff;
	--view-cart-button-background-color: transparent;
	--view-cart-button-text-color: var(--coast-navy);
	--view-cart-button-hover-background-color: var(--coast-surface);
	--view-cart-button-hover-text-color: var(--coast-navy);
	--checkout-button-background-color: var(--coast-navy);
	--checkout-button-text-color: #fff;
	--checkout-button-hover-background-color: var(--coast-accent);
	--checkout-button-hover-text-color: #fff;
	--cart-footer-buttons-border-radius: 9999px;
	--product-price-color: var(--coast-muted);
	--product-variations-color: var(--coast-muted);
}
.elementor-menu-cart__main { border-radius: var(--coast-r-lg) 0 0 var(--coast-r-lg); box-shadow: -20px 0 60px rgba(0, 22, 38, 0.14); }
.elementor-menu-cart__footer-buttons .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border: 1px solid var(--coast-navy);
	border-radius: var(--coast-pill);
	font: 700 11px/1 var(--coast-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color var(--coast-med) var(--coast-ease-expo), border-color var(--coast-med), color var(--coast-med);
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover { border-color: var(--coast-accent); }
.elementor-menu-cart__product-name a { font: 600 15px/1.35 var(--coast-sans); color: var(--coast-navy); }
.elementor-menu-cart__product-image img { border-radius: var(--coast-r-sm); }
/* Empty cart: no "0" bubble on the header cart icon. */
.elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter="0"] { display: none !important; }
/* While the side cart is open, the pill steps aside (no double feedback). */
body:has(.elementor-menu-cart--shown) .coast-selection { display: none !important; }

/* Block cart & checkout: pills in brand (Hello's reset makes them pink). */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	min-height: 56px;
	border: 1px solid var(--coast-navy) !important;
	border-radius: 9999px !important;
	background: var(--coast-navy) !important;
	color: #fff !important;
	font: 700 12px/1 var(--coast-sans) !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color var(--coast-med) var(--coast-ease-expo), border-color var(--coast-med), transform var(--coast-fast) var(--coast-ease-expo) !important;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-checkout-place-order-button:hover {
	border-color: var(--coast-accent) !important;
	background: var(--coast-accent) !important;
	color: #fff !important;
	transform: translateY(-2px);
}
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select { border-radius: var(--coast-r-sm) !important; }
.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block { border-radius: var(--coast-r-lg); }

/* --------------------------------------------------------------------------
   Motion: reveal on scroll (only when JS adds .coast-motion and motion is allowed)
   -------------------------------------------------------------------------- */

.coast-motion .coast-reveal { opacity: 0; transform: translate3d(0, 26px, 0); }
.coast-motion .coast-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 800ms var(--coast-ease), transform 1000ms var(--coast-ease-expo);
	transition-delay: var(--coast-delay, 0ms);
}
/* Cards re-rendered by the filter or pagination rise in, one after another. */
.coast-enter { animation: coast-rise 700ms var(--coast-ease) both; animation-delay: var(--coast-delay, 0ms); }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes coast-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
@keyframes coast-tick {
	0% { transform: translateY(0); opacity: 1; }
	45% { transform: translateY(-5px); opacity: 0.2; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes coast-bump {
	0%, 100% { transform: scale(1); }
	40% { transform: scale(1.16); }
}
@keyframes coast-pill-in {
	from { opacity: 0; transform: translate(-50%, 24px) scale(0.96); }
	to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes coast-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Reduced motion: keep every state, drop the movement
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.coast-card,
	.coast-card *,
	.coast-news,
	.coast-news *,
	.coast-selection,
	.coast-selection *,
	.coast-chips .e-filter-item,
	.coast-rail .elementor-swiper-button,
	.coast-trail *,
	.coast-bring *,
	.coast-header,
	.coast-header *,
	a.coast-btn,
	a.coast-btn *,
	.coast-enter,
	.is-bump {
		animation: none !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
	.coast-card:hover,
	.coast-news:hover,
	.coast-spec:hover,
	.coast-bring__item:hover,
	a.coast-btn:hover { transform: none !important; }
	.coast-card:hover .coast-card__img,
	.coast-news:hover .coast-news__img { transform: none; }
	a.coast-btn.loading .coast-btn__icon::after { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Layout helpers for the Elementor templates (Advanced → CSS Classes)
   ★ .coast-tile     → cards that lift on hover
   ★ .coast-glass    → frosted navy card over an image
   ★ .coast-el-btn   → Elementor Button widget: lift + glow on hover, press on click
   Plus: .coast-badge (pill label), .coast-portrait (initials), [coast_icon] badges.
   -------------------------------------------------------------------------- */

.coast-tile { transition: transform var(--coast-med) var(--coast-ease), box-shadow var(--coast-med) var(--coast-ease), background-color var(--coast-med) var(--coast-ease); }
@media (hover: hover) {
	.coast-tile:hover { transform: translateY(-6px); box-shadow: var(--coast-shadow-lift) !important; }
	.coast-tile:hover .coast-icon-badge { transform: rotate(-8deg) scale(1.06); }
}
.coast-glass { -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }

.coast-el-btn .elementor-button {
	transition: background-color var(--coast-med) var(--coast-ease-expo), color var(--coast-med) var(--coast-ease-expo), box-shadow var(--coast-med) var(--coast-ease-expo), transform var(--coast-fast) var(--coast-ease-expo) !important;
}
.coast-el-btn .elementor-button:hover { transform: translateY(-2px); box-shadow: var(--coast-shadow-cta); }
.coast-el-btn .elementor-button:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.coast-el-btn .elementor-button:focus-visible { outline: 2px solid var(--coast-accent); outline-offset: 3px; }

.coast-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	border-radius: var(--coast-pill);
	background: #fff6f0;
	box-shadow: inset 0 0 0 1px var(--coast-accent-soft);
	font: 700 11px/1 var(--coast-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--coast-accent-strong);
}
.coast-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.coast-badge--glass {
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
	color: #fff;
}
.coast-badge--glass::before { background: var(--coast-accent-on-dark); }

.coast-portrait {
	display: grid;
	flex: none;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--coast-navy);
	box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--coast-accent-soft);
	font: 800 22px/1 var(--coast-sans);
	letter-spacing: 0.04em;
	color: #fff;
}

.coast-icon-badge {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	transition: transform var(--coast-slow) var(--coast-ease-expo);
}
.coast-icon-badge .coast-icon { width: 26px; height: 26px; }
.coast-icon-badge--soft { background: var(--coast-accent-soft); color: var(--coast-accent-strong); }
.coast-icon-badge--dark { background: rgba(229, 138, 78, 0.16); color: var(--coast-accent-on-dark); }
.coast-icon-badge--plain { width: auto; height: auto; color: var(--coast-accent-strong); }

/* ★ .coast-scroller → a row of tiles that becomes a swipeable strip on phones (scroll-snap) */
.coast-scroller:focus-visible { outline: 2px solid var(--coast-accent); outline-offset: 4px; border-radius: var(--coast-r-lg); }
@media (max-width: 767px) {
	.e-con.coast-scroller {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 12px !important;
		margin-right: -16px;
		padding-right: 16px !important;
		padding-bottom: 8px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 2px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.e-con.coast-scroller::-webkit-scrollbar { display: none; }
	.e-con.coast-scroller > .e-con { flex: 0 0 78% !important; width: 78% !important; scroll-snap-align: start; }
}

/* Featured image on What's On single entries */
.elementor-widget-theme-post-featured-image img { border-radius: var(--coast-r-xl); }

@media (prefers-reduced-motion: reduce) {
	.coast-tile,
	.coast-tile *,
	.coast-el-btn .elementor-button,
	.coast-icon-badge { transition-duration: 1ms !important; animation: none !important; }
	.coast-tile:hover,
	.coast-el-btn .elementor-button:hover { transform: none !important; }
}