/* Mykish deal template — E1-28 visual elevation pass, Phase-6 Slice 0 token pass. Shares the
 * resort template's elevated design language (DESIGN v1.1 tokens, one accent, one radius/shadow
 * language, Montserrat 400/600/700). Presentation only: no markup structure or content changed.
 * Tokens: the :root block that used to live here now lives in the single shared source,
 * wp/mu-plugins/mykish-design-tokens/tokens.css (loaded first — see TOKENS_RECONCILIATION.md
 * §8/§11 R11). Do not redeclare :root here.
 * NOTE: the deal hero floor (D-T6, min(64vh,560px) -> var(--mk-hero-h)) is explicitly scoped to
 * TASKS.md Slice 6 (deals surface), not this Slice 0/1 session — left untouched here on purpose. */

#mk-deal, #mk-deals-hub {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--mk-ink);
	background: var(--mk-white);
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: clip;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	--mk-inset: max(var(--mk-pad-x), calc((100% - var(--mk-container)) / 2 + var(--mk-pad-x)));
}
@media (min-width: 768px) { #mk-deal, #mk-deals-hub { --mk-pad-x: 40px; } }
@media (min-width: 1024px) { #mk-deal, #mk-deals-hub { --mk-pad-x: 80px; } }

.mk-deal-page, .mk-deals-hub-page { display: flex; flex-direction: column; }

/* SECTION RHYTHM — inherited from the resort template, not invented here (PO ruling 2026-08-04).
 * WAS a single flat var(--mk-section-y) = 140px at 1440 on EVERY band. Measured against the resort:
 * 280px total per band vs its 192px, and because deal bands are short, three of them ended up more
 * than half padding by height. The resort does not use one value — it uses a three-step scale
 * applied by band weight, and that is what "inherit the resort template" actually means here. */
.mk-section { padding: var(--mk-sec-md) var(--mk-inset); }
/* thin / utility bands — the ones that measured 58-74% padding by height */
.mk-deal-rate, .mk-deal-resort-link, .mk-deal-enquiry, .mk-deal-highlights { padding: var(--mk-sec-sm) var(--mk-inset); }
/* the large editorial bands that carry real content and can hold the extra air */
.mk-deal-prices, .mk-deal-feature { padding: var(--mk-sec-lg) var(--mk-inset); }
.mk-section:nth-of-type(even) { background: var(--mk-surface); }
.mk-section-heading {
	font-weight: 700; font-size: var(--mk-fs-h2); line-height: var(--mk-lh-heading);
	letter-spacing: var(--mk-track-tight); margin: 0 0 24px; max-width: 24ch;
}

.mk-breadcrumb.mk-section { padding: 24px var(--mk-inset) 0; }
.mk-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; font-size: 0.8rem; color: var(--mk-grey); letter-spacing: 0.02em; }
.mk-breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--mk-border); }
.mk-breadcrumb a { color: var(--mk-grey); text-decoration: none; transition: color 0.15s var(--mk-ease); }
.mk-breadcrumb a:hover { color: var(--mk-teal-text); }

/* ---- Hero — full-bleed resort imagery, elegant overlay, bottom-anchored ---- */
/* REVIEW-1 S0/D-T6 (2026-07-28): carries the E1-31 svh-cap hero-floor fix to the deal template —
 * TOKENS_RECONCILIATION.md §5 D-T6 flagged this as the one hero still on a bare `min(64vh,560px)`
 * with no hard floor (a momentary near-zero vh on mobile browser-chrome transitions could
 * collapse it). Same var(--mk-hero-h*) every other cinematic hero (core/resort) already uses. */
.mk-deal-hero.mk-section {
	position: relative;
	min-height: var(--mk-hero-h);
	display: flex; align-items: flex-end;
	padding: 0;
	background: var(--mk-ink) center / cover no-repeat;
	overflow: hidden;
}
/* E1-29: same fix as core/resort templates — old gradient dropped to near-0 opacity around
 * 30%, failing contrast on bright daytime photos. Floor raised, no near-transparent gap. */
.mk-deal-hero.mk-section::before {
	content: ''; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(16,18,20,0.38) 0%, rgba(16,18,20,0.30) 30%, rgba(16,18,20,0.55) 68%, rgba(16,18,20,0.85) 100%),
		linear-gradient(90deg, rgba(16,18,20,0.42) 0%, rgba(16,18,20,0.0) 55%);
}
.mk-deal-hero-inner {
	position: relative; z-index: 1; color: var(--mk-white);
	width: 100%; max-width: var(--mk-container); margin: 0 auto;
	padding: 0 var(--mk-pad-x) clamp(36px, 5vw, 64px);
}
@media (min-width: 1024px) { .mk-deal-hero-inner { --mk-pad-x: 80px; } }
/* E1-29: `#mk-deal h1.mk-deal-title` (not bare `.mk-deal-title`) — same fix as the resort/core
 * templates: the Elementor Global Kit prints `.elementor-kit-6 h1{color:#1a1a1a}` and this
 * template's own stylesheet can print before that kit CSS, so a class-only selector isn't
 * guaranteed to win the tie. ID + element wins outright. Explicit color added too (previously
 * relied on inheriting white from .mk-deal-hero-inner, zero specificity, can't survive a fight). */
#mk-deal h1.mk-deal-title {
	font-weight: 700; font-size: var(--mk-fs-display); line-height: var(--mk-lh-display);
	letter-spacing: var(--mk-track-display); margin: 12px 0 12px; color: var(--mk-white); max-width: 18ch; text-wrap: balance;
	text-shadow: 0 1px 30px rgba(0,0,0,0.28);
}
.mk-deal-subline { font-size: clamp(1rem, 1.3vw, 1.12rem); margin: 0 0 20px; color: rgba(255,255,255,0.86); letter-spacing: 0.02em; }
@media (prefers-reduced-motion: no-preference) {
	.mk-deal-hero-inner { animation: mk-rise 0.7s var(--mk-ease-out) both; }
	@keyframes mk-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

.mk-chip { display: inline-flex; align-items: center; padding: 8px 15px; border-radius: var(--mk-r-pill); font-size: 0.78rem; font-weight: 600; margin: 0 8px 12px 0; letter-spacing: 0.01em; }
.mk-chip--deal-type { background: var(--mk-gold); color: var(--mk-ink); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; font-size: 0.7rem; }
.mk-chip--value-band { background: var(--mk-teal); color: var(--mk-ink); font-weight: 700; }

.mk-partner-logo { max-height: 42px; margin: 4px 0 20px; background: rgba(255,255,255,0.92); padding: 8px 12px; border-radius: 10px; display: block; }

/* REVIEW-1 / VERIFY2 (2026-07-29): same lone-class-vs-`.elementor-kit-6 a` leak as
 * mykish-core-pages/style.css's `.mk-cta` — hardened identically here, this stylesheet's
 * own copy of the rule. */
/* DEALS v2 (2026-08-04): every rule below is SCOPED to this template's own two page containers.
 * As bare `.mk-cta` selectors they also restyled `.mk-cta--nav` in the SHARED site header — this
 * stylesheet loads after mykish-core-pages, so its unscoped `padding: 17px 42px` beat the header's
 * own `.mk-cta--nav` padding and blew the header CTA out to 209px, pushing the document
 * scrollWidth to 430px against a 390px viewport. The deal page scrolled sideways on every phone
 * while the resort page, which does not load this stylesheet, measured a clean 390/390.
 * Scoping to an ID also strengthens the `.elementor-kit-6 a` hardening the note above describes. */
#mk-deal .mk-cta, #mk-deals-hub .mk-cta {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--mk-ink); color: var(--mk-white) !important;
	font-weight: 700; font-size: 0.9rem !important; text-transform: uppercase; letter-spacing: var(--mk-track-cta);
	padding: 17px 42px; min-height: 52px; border-radius: var(--mk-r-btn); text-decoration: none; cursor: pointer; border: none;
	box-shadow: var(--mk-shadow);
	transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease), background var(--mk-dur) var(--mk-ease);
}
#mk-deal .mk-cta:hover, #mk-deals-hub .mk-cta:hover { background: var(--mk-teal-dark); color: var(--mk-white) !important; transform: translateY(-2px); box-shadow: var(--mk-shadow-lg); }
#mk-deal .mk-cta:focus-visible, #mk-deals-hub .mk-cta:focus-visible { outline: 3px solid var(--mk-ink); outline-offset: 3px; }
.mk-deal-hero .mk-cta:focus-visible { outline-color: var(--mk-white); }
#mk-deal .mk-cta--footer, #mk-deals-hub .mk-cta--footer { margin-top: 8px; }

/* ---- Inclusions ---- */
.mk-inclusions-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: var(--mk-measure); }
.mk-inclusions-list li { padding-left: 36px; position: relative; font-size: 1.05rem; line-height: 1.5; }
.mk-inclusions-list li::before {
	content: ''; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--mk-alt-surface);
	/* teal check drawn with a mask-free inline gradient tick */
}
.mk-inclusions-list li::after {
	content: ''; position: absolute; left: 7px; top: 5px; width: 5px; height: 10px;
	border: solid var(--mk-teal-dark); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.mk-prose { line-height: var(--mk-lh-body); max-width: var(--mk-measure); font-size: var(--mk-fs-body); color: #2a2c30; }
.mk-prose p { margin: 0 0 1.1em; }
.mk-prose strong { color: var(--mk-ink); }
.mk-terms-text { color: var(--mk-grey); font-size: 0.9rem; max-width: var(--mk-measure); line-height: 1.7; }

.mk-deal-validity p { font-size: 1.1rem; font-weight: 600; }

/* REVIEW-1 / VERIFY2: lone class on an <a> — loses outright to `.elementor-kit-6 a`,
 * renders raw brand teal (fails AA) without this. */
.mk-resort-crosslink { font-weight: 700; color: var(--mk-teal-text) !important; text-decoration: none; font-size: 1.05rem; }
.mk-resort-crosslink:hover { text-decoration: underline; }

/* ---- Deals hub ---- */
.mk-deals-hub-hero.mk-section { padding: clamp(48px, 7vw, 88px) var(--mk-inset) 24px; }
.mk-deals-hub-hero h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 700; margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.05; }
.mk-deals-hub-hero p { color: var(--mk-grey); font-size: 1.1rem; }

.mk-deals-filter { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 var(--mk-inset) 32px; }
/* REVIEW-1 / VERIFY2: lone class on a <button> — loses outright to `.elementor-kit-6
 * button` (background-color:#1a1a1a, font-size:16px, color:#ffffff), same shape as the
 * pre-fix header hamburger. Hardened so the pill stays white-bg/ink-text at its own size. */
.mk-filter-btn {
	background: var(--mk-white) !important; border: 1px solid var(--mk-border); color: var(--mk-ink) !important;
	padding: 10px 20px; border-radius: var(--mk-r-pill); font-size: 0.8rem !important; font-weight: 600; cursor: pointer;
	transition: background var(--mk-dur) var(--mk-ease), color var(--mk-dur) var(--mk-ease), border-color var(--mk-dur) var(--mk-ease);
}
.mk-filter-btn:hover { border-color: var(--mk-teal); color: var(--mk-teal-text); }
.mk-filter-btn.is-active { background: var(--mk-teal); color: var(--mk-ink); border-color: var(--mk-teal); }
.mk-filter-btn:focus-visible { outline: 3px solid var(--mk-ink); outline-offset: 2px; }

.mk-deals-grid.mk-section { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; padding: 0 var(--mk-inset) 72px; }
.mk-deal-card {
	display: flex; flex-direction: column; border: 1px solid var(--mk-border); border-radius: var(--mk-r-card);
	overflow: hidden; text-decoration: none; color: var(--mk-ink); background: var(--mk-white); box-shadow: var(--mk-shadow);
	transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease);
}
.mk-deal-card:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lg); }
.mk-deal-card-image { width: 100%; height: 210px; object-fit: cover; }
.mk-deal-card-body { padding: 22px 24px 26px; }
.mk-deal-card-title { font-size: 1.2rem; font-weight: 700; margin: 6px 0 6px; letter-spacing: -0.01em; }
.mk-deal-card-resort { color: var(--mk-grey); font-size: 0.9rem; margin: 0 0 12px; }
.mk-deals-empty { color: var(--mk-grey); }

@media (max-width: 767px) {
	.mk-deal-hero.mk-section { min-height: var(--mk-hero-h-mobile); }
	/* SCOPED to the page body on purpose. As a bare `.mk-cta` this rule also caught
	 * `.mk-cta--nav` in the SHARED site header — which this stylesheet loads after and therefore
	 * outranks — stretching the header CTA to 342px and pushing the document scrollWidth to 563px
	 * against a 390px viewport. The page scrolled sideways on every phone. The band that looked
	 * guilty was the price table, and it was innocent: it lives in its own overflow-x:auto
	 * wrapper. A shared-chrome element styled by a per-template stylesheet is the same class of
	 * mistake GLASS-PANEL LAW exists to stop, pointed the other way. */
	#mk-deal .mk-cta, #mk-deals-hub .mk-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.mk-cta, .mk-deal-card, .mk-deal-hero-inner, .mk-filter-btn { transition: none; animation: none; }
}

/* =================================================================================================
 * DEALS v2 — the bands DEALS_ARCHITECTURE §7 adds: offer panel, highlights, price table,
 * upgrades, exclusive-rate grid, the S3 closed state, FAQ. Appended, never spliced — the
 * CSS DEPLOY RULE's first clause is "never slice to a guessed boundary".
 * ============================================================================================== */

/* ---- Preview flag (editors only; visitors get a 404, never this) ---- */
.mk-deal-preview-flag {
	background: #3a2d00; color: #ffe9a8; font-size: 0.85rem; line-height: 1.5;
	padding: 12px var(--mk-inset); border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mk-deal-preview-flag strong { color: #fff; margin-right: 6px; }

/* ---- Hero: copy left, offer panel right ---- */
.mk-deal-hero-inner {
	display: grid; grid-template-columns: 1fr; gap: 28px; align-items: end;
}
@media (min-width: 900px) {
	.mk-deal-hero-inner { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 48px; }
}
.mk-deal-hero-copy { min-width: 0; }
#mk-deal h1.mk-deal-title { margin-bottom: 10px; }

/* The offer panel sits OVER photography, so it is glass, per GLASS-PANEL LAW. The recipe itself
 * lives in the shared tokens stylesheet (.mk-panel-inner) so every surface inherits it; only
 * layout and type belong here. Legibility below is carried by halos, never by a darker fill. */
.mk-deal-offerpanel { text-align: left; }
.mk-offerpanel-eyebrow {
	margin: 0 0 4px; font-size: var(--mk-fs-eyebrow); font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide); color: rgba(255,255,255,0.72);
	text-shadow: 0 1px 2px rgba(0,0,0,0.88), 0 0 8px rgba(0,0,0,0.7);
}
.mk-offerpanel-price {
	margin: 0 0 6px; font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 700; line-height: 1.05;
	letter-spacing: -0.02em; color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.85), 0 0 18px rgba(0,0,0,0.6);
}
.mk-offerpanel-cur { font-size: 0.42em; font-weight: 700; letter-spacing: 0.08em; color: rgba(255,255,255,0.8); }
.mk-offerpanel-basis,
.mk-offerpanel-closedcopy,
.mk-offerpanel-enquiry,
.mk-offerpanel-deadline {
	margin: 0 0 14px; font-size: 0.875rem; line-height: 1.5; color: rgba(255,255,255,0.92);
	text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.85), 0 0 16px rgba(0,0,0,0.62);
}
.mk-offerpanel-enquiry { font-size: 1.4rem; font-weight: 700; color: #fff; }
.mk-offerpanel-deadline {
	margin-top: 2px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.16);
	font-weight: 600; color: #fff;
}
#mk-deal .mk-cta--panel { display: flex; width: 100%; min-height: 48px; padding: 14px 20px; box-shadow: none; }
.mk-offerpanel-note {
	margin: 12px 0 0; text-align: center; font-size: 0.72rem; letter-spacing: 0.04em;
	color: rgba(255,255,255,0.74);
	text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.72);
}
.mk-deal-offerpanel--closed .mk-offerpanel-eyebrow { color: #ffd9a8; }

/* ---- Offer highlights strip ---- */
.mk-deal-highlights.mk-section { padding-top: clamp(32px, 4vw, 52px); padding-bottom: clamp(32px, 4vw, 52px); }
.mk-highlight-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 20px 32px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.mk-highlight { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 3px solid var(--mk-gold); }
.mk-highlight-label { font-weight: 700; font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em; }
.mk-highlight-detail { color: var(--mk-grey); font-size: 0.9rem; line-height: 1.55; }

/* ---- Price table ---- */
.mk-price-basis { color: var(--mk-grey); font-size: 0.95rem; margin: -12px 0 22px; max-width: var(--mk-measure); }
/* Wide tables scroll inside their own container — the page body never scrolls horizontally.
 * Capped in width because a two-column table stretched to a 1440px container puts ~700px of dead
 * air between the villa name and its price, and the eye stops connecting the two. */
.mk-price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); background: var(--mk-white); max-width: 820px; }
.mk-price-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; min-width: 460px; }
.mk-price-table thead th {
	text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide); color: var(--mk-grey);
	padding: 16px 20px; border-bottom: 1px solid var(--mk-border); background: var(--mk-surface); white-space: nowrap;
}
.mk-price-table tbody th { text-align: left; font-weight: 600; padding: 16px 20px; vertical-align: top; }
.mk-price-table tbody td { padding: 16px 20px; vertical-align: top; white-space: nowrap; }
.mk-price-table tbody tr + tr th, .mk-price-table tbody tr + tr td { border-top: 1px solid var(--mk-border); }
.mk-tier-name { display: block; line-height: 1.35; }
.mk-tier-size { display: block; margin-top: 3px; font-size: 0.78rem; font-weight: 400; color: var(--mk-grey); }
.mk-price-now { display: block; font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.mk-price-was { display: block; margin-top: 3px; font-size: 0.82rem; color: var(--mk-grey); }
.mk-price-onrequest, .mk-price-na { color: var(--mk-grey); font-size: 0.95rem; }
.mk-price-comparenote { margin: 14px 0 0; font-size: 0.82rem; color: var(--mk-grey); max-width: var(--mk-measure); line-height: 1.6; }
.mk-price-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 28px 0 0; }
.mk-price-cta-note { color: var(--mk-grey); font-size: 0.85rem; }
.mk-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Closed state (S3) — honest, still useful, and structurally price-free ---- */
.mk-closed-card {
	border: 1px solid var(--mk-border); border-left: 4px solid var(--mk-gold);
	border-radius: var(--mk-r-card); background: var(--mk-surface);
	padding: clamp(26px, 3.5vw, 40px); max-width: var(--mk-measure);
}
.mk-closed-card .mk-section-heading { margin-bottom: 12px; }
.mk-closed-card p { color: #2a2c30; line-height: 1.65; margin: 0 0 22px; }

/* ---- Optional upgrades ---- */
.mk-upgrade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: var(--mk-measure); border-top: 1px solid var(--mk-border); }
.mk-upgrade {
	display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: baseline;
	padding: 18px 0; border-bottom: 1px solid var(--mk-border);
}
.mk-upgrade-label { font-weight: 600; font-size: 1.02rem; }
.mk-upgrade-detail { grid-column: 1 / 2; color: var(--mk-grey); font-size: 0.9rem; line-height: 1.55; }
.mk-upgrade-price { grid-row: 1 / 2; grid-column: 2 / 3; font-weight: 700; white-space: nowrap; }

/* ---- Your exclusive rate ---- */
.mk-rate-grid { display: grid; gap: 24px 40px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); max-width: 900px; }
.mk-rate-item { display: flex; flex-direction: column; gap: 6px; }
.mk-rate-key { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--mk-track-wide); color: var(--mk-grey); }
.mk-rate-val { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.01em; }
.mk-rate-val--claim { color: var(--mk-teal-text); }
.mk-rate-sub { font-size: 0.8rem; color: var(--mk-grey); line-height: 1.5; }

/* ---- FAQ ---- */
.mk-faq-list { max-width: var(--mk-measure); border-top: 1px solid var(--mk-border); }
.mk-faq-item { border-bottom: 1px solid var(--mk-border); }
.mk-faq-item summary {
	cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
	font-weight: 600; font-size: 1.02rem; line-height: 1.45;
}
.mk-faq-item summary::-webkit-details-marker { display: none; }
.mk-faq-item summary::after {
	content: ''; position: absolute; right: 8px; top: 27px; width: 9px; height: 9px;
	border: solid var(--mk-grey); border-width: 0 2px 2px 0; transform: rotate(45deg);
	transition: transform var(--mk-dur) var(--mk-ease);
}
.mk-faq-item[open] summary::after { transform: rotate(-135deg); top: 31px; }
.mk-faq-item summary:focus-visible { outline: 3px solid var(--mk-ink); outline-offset: 2px; }
.mk-faq-answer { padding: 0 0 22px; color: #2a2c30; line-height: 1.7; max-width: var(--mk-measure); }
.mk-faq-answer p { margin: 0 0 0.9em; }
.mk-faq-answer p:last-child { margin-bottom: 0; }

.mk-deal-enquiry-copy { color: var(--mk-grey); max-width: var(--mk-measure); margin: -12px 0 26px; line-height: 1.65; }
.mk-resort-crosslink-row { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }

@media (max-width: 767px) {
	.mk-price-cta-row .mk-cta { width: 100%; }
	.mk-upgrade { grid-template-columns: 1fr; }
	.mk-upgrade-price { grid-row: auto; grid-column: 1 / 2; }
}
@media (prefers-reduced-motion: reduce) {
	.mk-faq-item summary::after { transition: none; }
}

/* -------------------------------------------------------------------------------------------
 * MOBILE PRICE TABLE — stacked cards, not a sideways-scrolling table.
 *
 * Found by LOOKING, not by measuring. The overflow-x wrapper stopped the PAGE scrolling
 * sideways, and in doing so it pushed the entire price column off-screen: at 390px the table
 * rendered ten villa names and ten m² figures and NOT ONE PRICE. Every machine check passed —
 * no horizontal overflow, table present, all ten prices in the DOM — while the single most
 * important thing on the page was invisible at rest on a phone.
 *
 * Each row becomes its own card carrying the villa, its size, and its price together. The
 * per-cell column label is rendered from data-col, so the two-column deals still to come
 * (dusitD2's August/September, Hakuraa and Velifushi's Standard/Premium All-Inclusive) keep
 * their meaning once the <thead> is gone. Single-column tables emit an empty data-col and get
 * no label at all.
 * ---------------------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.mk-price-table-wrap { overflow-x: visible; border: 0; background: none; border-radius: 0; }
	.mk-price-table { display: block; width: 100%; min-width: 0; }
	.mk-price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.mk-price-table tbody { display: block; }
	.mk-price-table tbody tr {
		display: block; border: 1px solid var(--mk-border); border-radius: var(--mk-r-card);
		background: var(--mk-white); padding: 16px 18px; margin-bottom: 10px;
	}
	/* The zebra striping the theme puts on tbody th/td reads correctly as row stripes in a real
	 * table, but once each <tr> becomes a padded card those cell backgrounds and borders inset
	 * inside it and render as a box-within-a-box. The card carries the surface now, not the cell. */
	/* Specificity, not !important. The stripe comes from a global
	 *   `table tbody > tr:nth-child(2n+1) > td, ... > th { background-color: hsla(0,0%,50%,.071) }`
	 * at (0,1,3); a plain `.mk-price-table tbody th` is (0,1,2) and loses. The page ID plus the
	 * child combinator takes this to (1,1,3), which wins outright. Scoped inside the mobile query
	 * on purpose — on desktop that same stripe is legitimate zebra striping and stays. */
	#mk-deal .mk-price-table tbody tr > th,
	#mk-deal .mk-price-table tbody tr > td { background: transparent; border: 0; }
	.mk-price-table tbody tr + tr th, .mk-price-table tbody tr + tr td { border-top: 0; }
	.mk-price-table tbody th { display: block; padding: 0 0 10px; }
	.mk-price-table tbody td {
		display: inline-block; padding: 0; margin: 0 28px 0 0; vertical-align: top; white-space: nowrap;
	}
	.mk-price-table tbody td:last-child { margin-right: 0; }
	.mk-price-table tbody td:not([data-col=""])::before {
		content: attr(data-col); display: block; margin-bottom: 3px;
		font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
		letter-spacing: var(--mk-track-wide); color: var(--mk-grey); white-space: normal;
	}
	.mk-price-table .mk-price-now { font-size: 1.2rem; }
}

/* =================================================================================================
 * DEALS v2 REBUILD (PO ruling 2026-08-04) — the bands the first build was missing.
 * Villa CARDS with photography, editorial feature bands, the meal-plan ladder, grouped inclusions.
 * The failed build's rate table read as a spreadsheet; a Maldives deal page with no villa
 * photography does not look premium, and a deal page must not be poorer than the resort page it sells.
 * ============================================================================================== */

/* ---- Villa cards (replaces the ten-row table on single-price deals) ---- */
.mk-villa-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.mk-villa-card {
	display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--mk-border); border-radius: var(--mk-r-card);
	background: var(--mk-white); box-shadow: var(--mk-shadow);
	transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease);
}
.mk-villa-card:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow-lg); }
.mk-villa-photo { width: 100%; height: 210px; object-fit: cover; display: block; background: var(--mk-surface); }
/* The honest empty state. Deliberately NOT a borrowed photograph of a different villa: a Pool
   Beach Villa has a private pool and a Beach Villa does not, and the gap between them is $1,014.
   A real image telling a false story is the failure Golden Rule 6 exists to prevent. */
.mk-villa-photo--none {
	display: flex; align-items: center; justify-content: center;
	background: repeating-linear-gradient(135deg, var(--mk-surface) 0 12px, var(--mk-alt-surface) 12px 24px);
	color: var(--mk-grey); font-size: 0.8rem; letter-spacing: 0.04em; text-align: center;
}
.mk-villa-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mk-villa-name { font-size: 1.08rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1.3; }
.mk-villa-size { font-size: 0.78rem; color: var(--mk-grey); }
.mk-villa-desc { font-size: 0.88rem; color: var(--mk-grey); line-height: 1.5; margin: 2px 0 0; }
.mk-villa-price { margin: 10px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mk-villa-price .mk-price-now { font-size: 1.32rem; }
.mk-villa-price .mk-price-was { margin: 0; }
.mk-villa-cta {
	margin-top: auto; padding-top: 16px; font-weight: 700; font-size: 0.82rem;
	text-transform: uppercase; letter-spacing: var(--mk-track-cta);
	color: var(--mk-teal-text) !important; text-decoration: none;
}
.mk-villa-cta:hover { text-decoration: underline; }

/* ---- Feature bands — editorial, photograph beside the copy ---- */
.mk-deal-feature .mk-feature-inner {
	display: grid; gap: clamp(28px, 4vw, 56px); align-items: center;
	max-width: var(--mk-container); margin: 0 auto;
}
@media (min-width: 900px) {
	.mk-deal-feature--image_right .mk-feature-inner,
	.mk-deal-feature--image_left  .mk-feature-inner { grid-template-columns: 1fr 1fr; }
	.mk-deal-feature--image_left .mk-feature-copy  { order: 2; }
	.mk-deal-feature--image_left .mk-feature-media { order: 1; }
}
.mk-feature-media img {
	width: 100%; height: 100%; max-height: 460px; object-fit: cover;
	border-radius: var(--mk-r-card); display: block; box-shadow: var(--mk-shadow);
}
.mk-feature-eyebrow {
	margin: 0 0 10px; font-size: var(--mk-fs-eyebrow); font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide); color: var(--mk-teal-text);
}
.mk-feature-list { margin-top: 20px; }

/* ---- Meal-plan ladder ---- */
.mk-ladder-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	max-width: 1000px;
}
.mk-ladder-card {
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	padding: 22px 24px; border: 1px solid var(--mk-border); border-radius: var(--mk-r-card);
	background: var(--mk-white);
}
.mk-ladder-card.is-primary { border-color: var(--mk-gold); border-width: 2px; background: var(--mk-surface); }
.mk-ladder-from { font-size: 0.82rem; color: var(--mk-grey); }
.mk-ladder-arrow { color: var(--mk-gold); font-size: 1.1rem; line-height: 1; }
.mk-ladder-to { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.mk-ladder-note { font-size: 0.78rem; color: var(--mk-grey); margin-top: 4px; }

/* ---- Grouped inclusion columns ---- */
.mk-inclusion-columns {
	display: grid; gap: 32px 44px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.mk-inclusion-col-head {
	font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide); color: var(--mk-grey);
	margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--mk-border);
}
.mk-inclusion-columns .mk-inclusions-list li { font-size: 0.95rem; }

/* The shared reviews band sits on the deal page's own ground, not home-v2's. */
#mk-deal + .mkv-reviews, .mk-deal-page ~ .mkv-reviews { background: var(--mk-surface); }

@media (max-width: 767px) {
	.mk-villa-photo { height: 190px; }
	.mk-feature-media img { max-height: 300px; }
}

/* ---- Ladder: what the free upgrade actually contains ---- */
.mk-ladder-includes { margin-top: 34px; }
.mk-ladder-includes-head {
	font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide); color: var(--mk-grey);
	margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--mk-border); max-width: 900px;
}
.mk-ladder-list { max-width: 900px; }
@media (min-width: 860px) { .mk-ladder-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.mk-ladder-list li { font-size: 0.95rem; }
.mk-ladder-footnote { margin: 22px 0 0; font-size: 0.82rem; color: var(--mk-grey); max-width: var(--mk-measure); line-height: 1.6; }

/* =================================================================================================
 * DEALS v2 PREMIUM PASS (PO ruling 2026-08-04) — Lapland Aurora.
 * The Maldives hub and the Santa Claus resort page read premium on three things this deal lacked:
 * photographic SCALE, dark/light value RHYTHM, and a held text MEASURE. This block adds all three,
 * plus the four-package comparison that replaces the "under construction" socket card row.
 * L-29: a page cannot be premium beyond its photography — wired to the 379-image resort_village
 * NLV pack, not four stray frames. Appended, never spliced (CSS DEPLOY RULE clause 1).
 * ============================================================================================== */

/* ---- Dark feature bands — the value rhythm; the aurora carried on a dark ground ---- */
#mk-deal .mk-deal-feature.is-dark { background: #12151b; color: rgba(255,255,255,0.85); }
#mk-deal .mk-deal-feature.is-dark .mk-section-heading { color: #fff; }
#mk-deal .mk-deal-feature.is-dark .mk-feature-eyebrow { color: var(--mk-gold); }
#mk-deal .mk-deal-feature.is-dark .mk-prose { color: rgba(255,255,255,0.82); }
#mk-deal .mk-deal-feature.is-dark .mk-prose strong { color: #fff; }
#mk-deal .mk-deal-feature.is-dark .mk-inclusions-list li { color: rgba(255,255,255,0.86); }
#mk-deal .mk-deal-feature.is-dark .mk-inclusions-list li::before { background: rgba(255,255,255,0.10); }
#mk-deal .mk-deal-feature.is-dark .mk-inclusions-list li::after { border-color: var(--mk-gold); }
#mk-deal .mk-deal-feature.is-dark .mk-feature-media img { box-shadow: 0 30px 64px rgba(0,0,0,0.55); }

/* ---- Larger cinematic imagery (blow up the real NLV shots — L-29) ---- */
.mk-feature-media img { max-height: 600px; }
#mk-deal .mk-deal-feature.is-dark .mk-feature-media img { max-height: 680px; }

/* ---- Hold the measure at ~65ch so text never runs the full container width ---- */
.mk-deal-feature .mk-prose,
.mk-deal-feature .mk-feature-list,
.mk-deal-feature--no_image .mk-feature-copy { max-width: 65ch; }
.mk-deal-feature--no_image .mk-feature-inner { max-width: var(--mk-container); }

/* ---- Four-package comparison — the ladder at a glance (replaces the socket card row) ---- */
.mk-compare {
	display: grid; gap: 20px; align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.mk-compare-col {
	display: flex; flex-direction: column;
	border: 1px solid var(--mk-border); border-radius: var(--mk-r-card);
	background: var(--mk-white); padding: 26px 24px 24px; box-shadow: var(--mk-shadow);
}
.mk-compare-col.is-featured { border-color: var(--mk-gold); border-width: 2px; padding: 25px 23px 23px; }
.mk-compare-flag {
	align-self: flex-start; margin-bottom: 12px; padding: 5px 12px; border-radius: var(--mk-r-pill);
	background: var(--mk-gold); color: var(--mk-ink);
	font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
}
.mk-compare-name { font-size: 1.24rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1.25; }
.mk-compare-nights { margin: 5px 0 16px; color: var(--mk-grey); font-size: 0.9rem; }
.mk-compare-price { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; color: var(--mk-ink); }
.mk-compare-per { font-size: 0.5em; font-weight: 700; color: var(--mk-grey); letter-spacing: 0.04em; }
.mk-compare-price--soon { font-size: 1.02rem; font-weight: 600; color: var(--mk-grey); }
.mk-compare-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.mk-compare-list li { position: relative; padding-left: 26px; font-size: 0.92rem; line-height: 1.45; }
.mk-compare-list li::before {
	content: ''; position: absolute; left: 0; top: 5px; width: 6px; height: 11px;
	border: solid var(--mk-teal-dark); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.mk-compare-cta {
	margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 0.8rem;
	text-transform: uppercase; letter-spacing: var(--mk-track-cta);
	color: var(--mk-teal-text) !important; text-decoration: none;
}
.mk-compare-cta:hover { text-decoration: underline; }
/* Reserved slot — a real column holding the place for Polar Odyssey, honestly not-yet-detailed.
   No price, dashed border, muted ticks: it reads as "coming", never as a published unconfirmed tier. */
.mk-compare-col.is-reserved { background: var(--mk-surface); border-style: dashed; box-shadow: none; }
.mk-compare-col.is-reserved .mk-compare-name,
.mk-compare-col.is-reserved .mk-compare-list li { color: var(--mk-grey); }
.mk-compare-col.is-reserved .mk-compare-list li::before { border-color: var(--mk-grey); opacity: 0.5; }
.mk-compare-cta--soon { color: var(--mk-grey) !important; }


/* =================================================================================================
 * PO REVIEW ROUND 2 (2026-08-04) — template-level, so every deal inherits the fix.
 * ============================================================================================== */

/* ---- 14. Equalise the three inclusion column headings.
 *      "Experiences & Activities" wrapped to two lines and dropped its column out of alignment
 *      with the other two. Grid subgrid-style: the heading row is its own track, so all three
 *      lists start on the same baseline whatever the heading length. ---- */
.mk-inclusion-columns { align-items: start; }
.mk-inclusion-col { display: grid; grid-template-rows: auto 1fr; }
.mk-inclusion-col-head { min-height: 3.2em; display: flex; align-items: flex-end; }

/* ---- 7. The resort link becomes a PROPERTY CARD, not a bare hyperlink ---- */
.mk-deal-propcard { display: grid; gap: 0; max-width: 760px; }
@media (min-width: 720px) { .mk-deal-propcard { grid-template-columns: 300px 1fr; } }
.mk-deal-propcard {
	border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); overflow: hidden;
	background: var(--mk-white); box-shadow: var(--mk-shadow); text-decoration: none; color: var(--mk-ink);
	transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease);
}
.mk-deal-propcard:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow-lg); }
.mk-deal-propcard-img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
.mk-deal-propcard-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.mk-deal-propcard-eyebrow {
	font-size: var(--mk-fs-eyebrow); font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide); color: var(--mk-grey);
}
.mk-deal-propcard-name { font-size: 1.22rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.mk-deal-propcard-note { color: var(--mk-grey); font-size: 0.92rem; line-height: 1.6; margin: 0; }
.mk-deal-propcard-go { margin-top: 6px; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: var(--mk-track-cta); color: var(--mk-teal-text); }

/* ---- 17. Sticky bar — the resort template's own component, same markup, same behaviour ---- */
.mk-sticky-cta { display: none; }
@media (max-width: 767px) {
	.mk-sticky-cta.is-visible {
		display: flex; justify-content: center; gap: 10px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: 12px var(--mk-pad-x);
		background: rgba(255,255,255,0.94);
		backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
		border-top: 1px solid var(--mk-border);
	}
	#mk-deal .mk-sticky-cta .mk-cta, .mk-sticky-cta .mk-cta { width: auto; flex: 1; max-width: 420px; min-height: 46px; padding: 12px 18px; }
	.mk-sticky-wa {
		display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
		min-width: 46px; min-height: 46px; padding: 0 16px; border-radius: var(--mk-r-btn);
		border: 1px solid var(--mk-border); background: var(--mk-white); color: var(--mk-ink) !important;
		font-weight: 700; font-size: 0.8rem; text-decoration: none;
	}
}

/* ---- 5. Every image on the page expands. Template behaviour, not a per-page fix. ---- */
.mk-zoomable { cursor: zoom-in; }
.mk-lightbox {
	position: fixed; inset: 0; z-index: 200; display: none;
	background: rgba(12,14,16,0.92); align-items: center; justify-content: center;
	padding: clamp(16px, 4vw, 56px);
}
.mk-lightbox.is-open { display: flex; }
.mk-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.mk-lightbox-close, .mk-lightbox-prev, .mk-lightbox-next {
	position: absolute; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.26);
	width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.mk-lightbox-close { top: 18px; right: 18px; }
.mk-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.mk-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.mk-lightbox-close:focus-visible, .mk-lightbox-prev:focus-visible, .mk-lightbox-next:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mk-lightbox-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.8); font-size: 0.8rem; }

/* villa card gallery strip — horizontal scroller, one card's worth of images */
.mk-villa-gallery { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.mk-villa-gallery img { flex: 0 0 100%; scroll-snap-align: start; width: 100%; height: 210px; object-fit: cover; display: block; }
.mk-villa-gallery-count {
	position: absolute; right: 10px; top: 10px; background: rgba(12,14,16,0.62); color: #fff;
	font-size: 0.7rem; padding: 4px 9px; border-radius: var(--mk-r-pill); letter-spacing: 0.03em;
}
.mk-villa-media { position: relative; }

/* ---- §5c CAPTIONED CAROUSEL — the same .mk-villa-gallery, with a per-frame caption ----
 * The villa cards' gallery is N angles of ONE subject and needs no caption. A feature band whose
 * frames are DIFFERENT things (Day 2: reindeer / husky / snowmobile / Glass Villa lunch) opts into
 * "url | caption" authoring; each frame becomes a <figure> and captions itself so a swiper always
 * knows what they are looking at. Swipe, scroll-snap and the shared lightbox are all inherited —
 * this adds only the caption layer. Legibility is a bottom scrim + text-shadow (the photograph
 * stays fully alive above it), never a fill over the frame (GLASS-PANEL LAW, in spirit). */
/* The gallery count badge (".N photos", the swipe affordance) is absolute; without a positioned
 * container it escapes to the body and lands off the image. Every feature gallery — captioned or the
 * plain Sampo/Kemi strips that only started rendering once the ACF subfield was added — needs this. */
.mk-feature-media { position: relative; }
.mk-feature-gallery--captioned .mk-gallery-frame {
	flex: 0 0 100%; scroll-snap-align: start; margin: 0; position: relative; display: block;
}
.mk-feature-gallery--captioned .mk-gallery-frame img {
	flex: none; width: 100%; height: 210px; object-fit: cover; display: block; cursor: zoom-in;
}
.mk-gallery-caption {
	position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
	padding: 30px 16px 12px; color: #fff; font-size: 0.86rem; font-weight: 600;
	letter-spacing: 0.01em; text-shadow: 0 1px 4px rgba(0,0,0,0.55);
	background: linear-gradient(180deg, rgba(18,20,24,0) 0%, rgba(18,20,24,0.68) 100%);
	pointer-events: none;
}
.mk-lightbox-caption {
	position: absolute; bottom: 44px; left: 0; right: 0; text-align: center;
	color: #fff; font-size: 0.98rem; font-weight: 600; padding: 0 64px;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.mk-lightbox-caption[hidden] { display: none; }

/* ---- 16. Terms is a real destination now ---- */
.mk-terms-anchor { font-size: 0.82rem; color: var(--mk-teal-text) !important; font-weight: 600; text-decoration: none; }
.mk-terms-anchor:hover { text-decoration: underline; }
#deal-terms { scroll-margin-top: 90px; }

/* ---- PO round 3 ---- */
/* 1. Compact trust strip. The five-testimonial carousel became the largest band on the page and
 *    buried the offer; "move trust up" was never "make trust the page". */
.mk-deal-trustline.mk-section { padding-top: var(--mk-sec-sm); padding-bottom: var(--mk-sec-sm); }
.mk-trustline {
	list-style: none; margin: 0; padding: 18px 0; display: flex; flex-wrap: wrap;
	gap: 14px 34px; align-items: center;
	border-top: 1px solid var(--mk-border); border-bottom: 1px solid var(--mk-border);
	font-size: 0.9rem; color: var(--mk-ink);
}
.mk-trustline li { display: flex; align-items: center; gap: 9px; }
.mk-trustline .mk-trust-icon {
	font-weight: 700; font-size: 0.68rem; letter-spacing: var(--mk-track-wide);
	border: 1px solid var(--mk-border); border-radius: 4px; padding: 3px 7px; color: var(--mk-grey);
}
.mk-trustline .mk-google-line { margin: 0; font-size: 0.9rem; }
.mk-trustline .mk-google-line a { color: var(--mk-teal-text) !important; font-weight: 600; text-decoration: none; }
/* NO margin-left:auto. Pushing the Google line to the far edge left ~600px of dead space
 * mid-strip at 1440 and broke the row into two unrelated clusters — the eye stopped reading it as
 * one trust statement. It now flows with the same gap as every other item. */
.mk-trustline-google { margin-left: 0; }

/* 5. the upgrade explanation, at the rates */
.mk-price-upgradenote {
	max-width: var(--mk-measure); margin: 0 0 26px; padding: 18px 22px;
	background: var(--mk-surface); border-left: 3px solid var(--mk-gold); border-radius: 0 var(--mk-r-card) var(--mk-r-card) 0;
	font-size: 0.95rem; line-height: 1.65;
}
.mk-price-upgradenote p { margin: 0 0 0.7em; }
.mk-price-upgradenote p:last-child { margin-bottom: 0; }

/* 6. why-this-deal carries photography */
.mk-why-inner { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: var(--mk-container); margin: 0 auto; }
@media (min-width: 900px) { .mk-deal-why--media .mk-why-inner { grid-template-columns: 1fr 1fr; } }
.mk-why-media img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--mk-r-card); display: block; box-shadow: var(--mk-shadow); }

/* ---- Accreditation marks in the trust strip ----
 * Normalised on HEIGHT with width:auto — IATA is 608x228 (2.67:1) and CLIA is 560x560 (1:1), so
 * constraining width would render one of them tiny and the other oversized. */
.mk-trustline-badges { display: flex; align-items: center; gap: 22px; }
/* 54px, not 38px. At 38 the IATA mark's "Accredited Agent" lockup and the CLIA roundel's
 * circumferential text were both illegible — the marks read as navy smudges, which is a worse
 * trust signal than the plain word was. A mark you cannot read is not a mark. */
.mk-accred-badge { height: 54px; width: auto; display: block; }
/* the IATA mark is a JPEG with a baked white ground; on the surface-tinted band it needs the same
   ground under it or it reads as a pasted rectangle */
.mk-accred-badge[src*="iata"] { background: #fff; padding: 3px 6px; border-radius: 4px; }
@media (max-width: 767px) { .mk-accred-badge { height: 44px; } .mk-trustline-badges { gap: 16px; } }

/* Multi-column villa cards (seasonal, or Standard/Premium board tiers). A card carries one price
 * row per column rather than the page falling back to a table — the table shape stripped villa
 * photography from every multi-column deal, which §3 of the spec exists to prevent. */
.mk-villa-prices { margin: 10px 0 0; display: grid; gap: 8px; }
.mk-villa-prices.is-multi { padding-top: 10px; border-top: 1px solid var(--mk-border); }
.mk-villa-prices .mk-villa-price { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mk-villa-pricelabel {
	flex: 1 1 100%; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide); color: var(--mk-grey);
}
.mk-villa-prices.is-multi .mk-price-now { font-size: 1.14rem; }

/* Deal-level compare-at, at the rates. Only renders behind a permitted R9.7 basis. */
.mk-price-compareat { margin: -14px 0 20px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mk-price-compareat s { font-size: 1.05rem; color: var(--mk-grey); }
.mk-price-compareat-basis { font-size: 0.82rem; color: var(--mk-grey); }

/* ---- Hero panel CTA — the RESORT's treatment, inherited not invented (PO 2026-08-05) ----
 * Measured from .mk-cta--panel on the resort page and matched property for property: white fill,
 * ink text, 999px pill, weight 500, no shadow. Padding/height/size/tracking already agreed.
 *
 * Needs the ID and both classes to land: this template's own `#mk-deal .mk-cta` is (1,1,0) and sets
 * `color: … !important`, so a plain `.mk-cta--panel` at (0,1,0) loses on background AND cannot
 * touch the colour at all. `#mk-deal .mk-cta.mk-cta--panel` is (1,2,0) and wins outright — the same
 * specificity lesson as the minibar, applied deliberately this time rather than discovered.
 *
 * Applies to every deal page automatically: Dhigufaru, dusitD2, Hakuraa, Velifushi and any deal
 * built later. Template-level, not four page-level fixes. */
#mk-deal .mk-cta.mk-cta--panel {
	background: var(--mk-white);
	color: var(--mk-ink) !important;
	border-radius: var(--mk-r-pill);
	font-weight: 500;
	box-shadow: none;
}
#mk-deal .mk-cta.mk-cta--panel:hover {
	background: var(--mk-white);
	color: var(--mk-ink) !important;
	transform: translateY(-2px);
	box-shadow: var(--mk-shadow-lg);
}
#mk-deal .mk-cta.mk-cta--panel:focus-visible { outline: 3px solid var(--mk-white); outline-offset: 3px; }

/* =================================================================================================
 * EXPANDABLE-TIER ACCORDION (PO 2026-08-05, DEAL_TEMPLATE §5a) — GENERIC, not Lapland-specific.
 * The rates band renders each tier as a <details>: a compare-at-a-glance summary row that expands
 * in place to the full former-child-page detail (itinerary, experience bands, inclusions,
 * exclusions, who-it's-for, gallery). A deal with no `_mk_tier_detail` keeps the villa grid above,
 * so Dhigufaru's villas are untouched. Appended, never spliced (CSS DEPLOY RULE clause 1).
 * ============================================================================================== */
.mk-tier-ladder { display: flex; flex-direction: column; gap: 14px; }
.mk-tier {
	border: 1px solid var(--mk-border); border-radius: var(--mk-r-card);
	background: var(--mk-white); box-shadow: var(--mk-shadow); overflow: hidden;
}
.mk-tier[open] { border-color: var(--mk-gold); box-shadow: var(--mk-shadow-lg); }

/* --- summary: the compare row (also the toggle) --- */
.mk-tier-summary {
	display: grid; align-items: center; gap: 8px 20px; cursor: pointer; list-style: none;
	padding: 18px 22px;
	grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1.4fr) auto auto;
}
.mk-tier-summary::-webkit-details-marker { display: none; }
.mk-tier-summary:focus-visible { outline: 3px solid var(--mk-ink); outline-offset: -3px; }
.mk-tier-thumb { width: 78px; height: 56px; border-radius: 10px; background: var(--mk-surface) center/cover no-repeat; flex: none; }
.mk-tier-headline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-tier-flag {
	align-self: flex-start; margin-bottom: 3px; padding: 3px 9px; border-radius: var(--mk-r-pill);
	background: var(--mk-gold); color: var(--mk-ink); font-size: 0.6rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.1em;
}
.mk-tier-name { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.mk-tier-nights { font-size: 0.82rem; color: var(--mk-grey); }
.mk-tier-adds { font-size: 0.9rem; color: var(--mk-grey); line-height: 1.4; }
.mk-tier-price { text-align: right; white-space: nowrap; font-weight: 700; }
.mk-tier-price .mk-price-now { font-size: 1.3rem; letter-spacing: -0.02em; }
.mk-tier-per { font-size: 0.7rem; color: var(--mk-grey); font-weight: 700; margin-left: 3px; }
.mk-tier-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mk-surface); flex: none; }
.mk-tier-chev { width: 8px; height: 8px; border: solid var(--mk-grey); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--mk-dur) var(--mk-ease); }
.mk-tier[open] .mk-tier-chev { transform: translateY(1px) rotate(-135deg); }
.mk-tier[open] .mk-tier-toggle { background: var(--mk-gold); }

/* --- panel: the full detail --- */
.mk-tier-panel { padding: 4px 26px 30px; border-top: 1px solid var(--mk-border); }
.mk-tier-sechead {
	font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--mk-track-wide);
	color: var(--mk-grey); margin: 30px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--mk-border);
}
.mk-tier-panel > .mk-tier-sechead:first-child { margin-top: 22px; }
.mk-tier-prose { max-width: 68ch; }
.mk-tier-prose p { margin: 0 0 0.8em; }

/* itinerary */
.mk-tier-itinerary { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mk-tier-itinerary li { display: grid; grid-template-columns: minmax(120px, 168px) 1fr; gap: 8px 22px; padding: 13px 0; border-bottom: 1px solid var(--mk-border); }
.mk-tier-itinerary li:last-child { border-bottom: 0; }
.mk-itin-label { font-weight: 700; color: var(--mk-ink); font-size: 0.95rem; }
.mk-itin-body { color: #2a2c30; line-height: 1.55; }

/* experience bands */
.mk-tier-bands { display: grid; gap: 22px; }
@media (min-width: 720px) { .mk-tier-bands { grid-template-columns: 1fr 1fr; } }
.mk-tier-band { display: flex; flex-direction: column; gap: 12px; }
.mk-tier-band-img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--mk-r-card); cursor: zoom-in; display: block; }
.mk-tier-band-copy h5 { margin: 0 0 5px; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.mk-tier-band-copy p { margin: 0; color: #2a2c30; line-height: 1.55; }

/* inclusions / not-included */
.mk-tier-list { max-width: none; }
@media (min-width: 720px) { .mk-tier-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.mk-tier-list li { font-size: 0.95rem; }
.mk-tier-list--excl li::before { display: none; }
.mk-tier-list--excl li::after { content: '\00d7'; position: absolute; left: 6px; top: 0; width: auto; height: auto; border: 0; transform: none; color: var(--mk-grey); font-weight: 700; }
.mk-tier-list--excl li { color: var(--mk-grey); }

/* gallery */
.mk-tier-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mk-tier-gallery img { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; cursor: zoom-in; display: block; }

.mk-tier-cta { margin-top: 30px; }

@media (max-width: 719px) {
	.mk-tier-summary { grid-template-columns: auto 1fr auto; row-gap: 10px; }
	.mk-tier-thumb { grid-row: span 2; width: 64px; height: 64px; }
	.mk-tier-adds { grid-column: 2 / -1; }
	.mk-tier-toggle { grid-row: 1; }
	.mk-tier-itinerary li { grid-template-columns: 1fr; gap: 3px; }
	.mk-itin-label { font-size: 0.9rem; }
	.mk-tier-panel { padding: 4px 18px 26px; }
}
@media (prefers-reduced-motion: reduce) { .mk-tier-chev { transition: none; } }

/* =================================================================================================
 * GROUP-DEPARTURE BOARD (PO 2026-08-05) — a fixed-departure deal renders a dated departures table
 * (status enum, stored confirm-by, per-row CTA) + a per-person fare table. Status colours read at a
 * glance; NO seat count is ever shown. Appended, never spliced (CSS DEPLOY RULE clause 1).
 * ============================================================================================== */
.mk-departures-intro { margin: -8px 0 24px; }
.mk-departures { border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); overflow: hidden; background: var(--mk-white); box-shadow: var(--mk-shadow); }
.mk-departures-head, .mk-departure-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,0.9fr) minmax(0,1.2fr) auto; gap: 16px 20px; align-items: center; padding: 16px 22px; }
.mk-departures-head { background: var(--mk-surface); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--mk-track-wide); color: var(--mk-grey); }
.mk-departure-row + .mk-departure-row, .mk-departures-head + .mk-departure-row { border-top: 1px solid var(--mk-border); }
.mk-departure-date { font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em; display: flex; flex-direction: column; gap: 3px; }
.mk-departure-note { font-weight: 400; font-size: 0.8rem; color: var(--mk-grey); letter-spacing: 0; }
.mk-departure-confirm { color: var(--mk-grey); font-size: 0.92rem; }
.mk-departure-confirm-label { display: none; }
.mk-status { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--mk-r-pill); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.mk-status--open        { background: #e6f4ea; color: #1a7a3c; }
.mk-status--filling     { background: #fdf0dd; color: #9a5b00; }
.mk-status--guaranteed  { background: var(--mk-teal); color: var(--mk-ink); }
.mk-status--on_request  { background: var(--mk-surface); color: var(--mk-grey); }
.mk-status--closed,
.mk-status--did_not_reach_min { background: var(--mk-surface); color: var(--mk-grey); opacity: 0.75; }
#mk-deal .mk-departure-enquire { padding: 11px 26px; min-height: 42px; font-size: 0.78rem !important; box-shadow: none; }
.mk-departures-provisional { margin: 14px 0 0; font-size: 0.82rem; color: var(--mk-grey); font-style: italic; }
.mk-departures-notproceed { margin: 18px 0 0; max-width: var(--mk-measure); }

/* per-person fares */
.mk-fares { margin: 40px 0 0; max-width: 640px; }
.mk-fares-heading { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--mk-track-wide); color: var(--mk-grey); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--mk-border); }
.mk-fares-list { list-style: none; margin: 0; padding: 0; }
.mk-fare { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--mk-border); }
.mk-fare-label { font-size: 1rem; }
.mk-fare-price { font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; white-space: nowrap; }
.mk-fares-note { margin: 16px 0 0; font-size: 0.92rem; color: #2a2c30; line-height: 1.6; max-width: var(--mk-measure); }
.mk-fares-note strong { color: var(--mk-ink); }

@media (max-width: 719px) {
	.mk-departures-head { display: none; }
	.mk-departure-row { grid-template-columns: 1fr auto; gap: 8px 14px; padding: 16px 18px; }
	.mk-departure-status { grid-row: 1; grid-column: 2; justify-self: end; }
	.mk-departure-confirm { grid-column: 1 / -1; font-size: 0.86rem; }
	.mk-departure-confirm-label { display: inline; font-weight: 700; }
	.mk-departure-cta { grid-column: 1 / -1; }
	#mk-deal .mk-departure-enquire { width: 100%; }
	.mk-fare-price { font-size: 1.05rem; }
}