/**
 * Mekongtodo — "Trusted Warm" brand CSS.
 * Source: DESIGN.md tokens + ux-mekongtodo mockup. System stacks only (FR-22).
 * Terracotta is the accent (CTA, active step, price breakaway, verified tag);
 * saffron is decorative only — never text (DESIGN.md Do/Don't).
 *
 * Class prefix: .mk- (BEM-ish). WooCommerce block selectors kept for branding.
 */

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

body.mekongtodo-body,
body {
	background: #FAF6EE;            /* surface-base — warm market stone */
	color: #2B1A12;                 /* ink-primary  ~12:1 on base */
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}

.mono,
.mk-mono {
	font-family: "SF Mono", UI-monospace, Menlo, Consolas, "Liberation Mono", monospace;
	font-feature-settings: "tnum";
}

/* ---------------------------------------------------------------- site header / wordmark (P1-2) */
.mk-site-header .wp-block-site-title,
.mk-site-header .wp-block-site-title a {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #2B1A12;
	text-decoration: none;
	line-height: 1;
}
.mk-site-header .wp-block-site-title a::after {
	content: "";						/* terracotta accent dot — brand recognition */
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: var(--wp--custom--radius--pill, 9999px);
	background: #B14A24;
	margin-left: 4px;
	vertical-align: 1px;
}
/* site-logo (image) — constrain so a square logo doesn't bloat the header.
   Inline width from the block attr is overridden with !important; height auto
   keeps the aspect ratio. */
.mk-site-header .wp-block-site-logo img,
.mk-site-header img.custom-logo {
	max-height: 60px !important;      /* 2026-07-06: bumped 52→60 so the brand mark carries more weight alongside the tagline */
	width: auto !important;
	height: auto !important;
	display: block;
}

/* ---------------------------------------------------------------- hero (P1-1: destination imagery) */
.mk-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.mk-hero__media { display: flex; align-items: center; }
.mk-hero__img { margin: 0; }
.mk-hero__img img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
	border-radius: 4px;				/* radius.imagery — documentary sharpness */
	box-shadow: 0 12px 32px -16px rgba(60, 30, 10, .28);
}
@media (max-width: 781px) {
	.mk-hero__media { order: -1; }	/* lead with the destination on mobile */
	.mk-hero__img img { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------- tour-card (catalog) */
.mk-tourcard {
	background: #FFFDF9;            /* surface-raised */
	border: 1px solid #D6C4A2;      /* border-hairline */
	border-radius: 6px;             /* radius.card */
	overflow: hidden;
}
.mk-tourcard__link { display: block; text-decoration: none; color: inherit; }
.mk-tourcard__media img,
.mk-tourcard__media .wc-block-grid__product-image img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
	border-radius: 4px;            /* radius.imagery — documentary sharpness */
}
.mk-tourcard__body { padding: 14px 16px 16px; }
.mk-tourcard__title {
	display: block;
	font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; /* tour-title */
	color: #2B1A12; margin-bottom: 8px;
}
.mk-tourcard__price { display: block; font-size: 13px; color: #8E3717; font-weight: 700; }

/* ---------------------------------------------------------------- trust-band */
.mk-trustband {
	display: flex;
	background: #FFFDF9;
	border-bottom: 1px solid #D6C4A2;
}
.mk-trustband__cell {
	flex: 1; padding: 12px 8px 10px; text-align: center;
	border-right: 1px solid #E7D8B6;      /* border-rule between cells */
	border-top: 2px solid #D49238;        /* saffron hairline accent — decorative */
}
.mk-trustband__cell:last-child { border-right: 0; }
.mk-trustband__label {
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: #6E4F38; font-weight: 700; margin-bottom: 3px;
}
.mk-trustband__value { font-size: 11.5px; color: #2B1A12; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.mk-trustband__value .ic { color: #8E3717; flex-shrink: 0; } /* SVG icon, terra-deep 7:1 */

/* ---------------------------------------------------------------- section card */
.mk-card {
	background: #FFFDF9;
	border-bottom: 1px solid #D6C4A2;
	padding: 18px 18px;            /* card-pad */
}
.mk-card--inset { margin: 10px 12px; border: 1px solid #D6C4A2; border-radius: 6px; border-bottom: 1px solid #D6C4A2; }

/* ---------------------------------------------------------------- gallery */
.mk-gallery { padding: 12px 14px 0; position: relative; }
.mk-gallery__main {
	border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5;
	background: #D6C4A2; position: relative;
}
.mk-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-gallery__count {
	position: absolute; top: 10px; right: 10px;
	background: rgba(26, 18, 8, .84); color: #FFFFFF;
	font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 3px;
}

/* ---------------------------------------------------------------- title block */
.mk-title__eyebrow {
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	color: #8E3717; font-weight: 700; margin-bottom: 10px;
}
.mk-title__eyebrow .mk-ref { color: #8E3717; float: right; letter-spacing: .04em; }
.mk-tourtitle { font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; color: #2B1A12; }
.mk-metarow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 14px; }
.mk-metarow__item {
	font-size: 11px; color: #6E4F38; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.mk-metarow__item b {
	display: block; font-size: 13.5px; color: #2B1A12;
	text-transform: none; letter-spacing: 0; font-weight: 600; margin-top: 2px;
}

/* ---------------------------------------------------------------- price block */
.mk-priceblock { padding: 16px 18px; background: #FFFDF9; border-bottom: 1px solid #D6C4A2; }
.mk-price-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.mk-price {
	font-size: 34px; font-weight: 700; color: #B14A24; /* terracotta-fill, 5.2:1 on card */
	letter-spacing: -0.02em; line-height: 1;
}
.mk-price__cur { font-size: 18px; font-weight: 600; color: #8E3717; vertical-align: 6px; margin-right: 2px; }
.mk-price small { font-size: 12px; color: #6E4F38; font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.mk-price-tag {
	border: 1px solid #D6C4A2; border-radius: 4px; padding: 6px 9px;
	font-size: 11px; color: #8E3717; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; text-align: right; line-height: 1.3; background: #FAF6EE;
}
.mk-price-tag .mono { display: block; color: #2B1A12; font-size: 11.5px; letter-spacing: 0; text-transform: none; margin-top: 2px; }
.mk-price-break {
	margin-top: 12px; padding-top: 12px; border-top: 1px dashed #D6C4A2;
	font-size: 11.5px; color: #6E4F38; display: flex; justify-content: space-between; gap: 10px;
}
.mk-stamp-mono {
	color: #8E3717; font-weight: 700; background: #FAF6EE; border: 1px solid #D6C4A2;
	padding: 1px 6px; border-radius: 3px; letter-spacing: .02em; white-space: nowrap;
}

/* ---------------------------------------------------------------- guide card */
.mk-guide { display: flex; gap: 14px; align-items: center; }
.mk-guide__portrait { width: 52px; height: 52px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #D6C4A2; }
.mk-guide__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-guide__name { font-size: 14.5px; color: #2B1A12; font-weight: 700; }
.mk-guide__verified { color: #8E3717; font-size: 11px; font-weight: 700; margin-left: 6px; letter-spacing: .04em; }
.mk-guide__role { font-size: 12px; color: #6E4F38; margin-top: 3px; line-height: 1.45; }
.mk-guide__role b { color: #2B1A12; font-weight: 600; }
.mk-guide-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.mk-guide-stats__item { font-size: 10px; color: #6E4F38; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mk-guide-stats__item b { display: inline; color: #2B1A12; font-weight: 700; letter-spacing: 0; text-transform: none; margin-left: 3px; font-size: 11.5px; }

/* ---------------------------------------------------------------- lists */
.mk-list__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8E3717; font-weight: 700; margin-bottom: 10px; }
.mk-list { list-style: none; margin-bottom: 16px; }
.mk-list:last-child { margin-bottom: 0; }
.mk-list li { font-size: 13px; line-height: 1.5; color: #2B1A12; padding: 5px 0 5px 22px; position: relative; }
.mk-list li::before {
	content: ""; position: absolute; left: 0; top: 9px; width: 13px; height: 13px;
	background: #8E3717; border-radius: 3px;        /* terra-deep check swatch */
}
.mk-list li::after {
	content: ""; position: absolute; left: 3.5px; top: 12.5px; width: 6px; height: 3px;
	border-left: 1.8px solid #FFFDF9; border-bottom: 1.8px solid #FFFDF9; transform: rotate(-45deg);
}
.mk-list--notinc li::before { background: transparent; border: 1.5px solid #D6C4A2; }
.mk-list--notinc li::after { display: none; }
.mk-list--notinc li { color: #6E4F38; }

/* ---------------------------------------------------------------- refund card */
.mk-refund { display: flex; gap: 14px; align-items: flex-start; }
.mk-refund__icon {
	width: 30px; height: 30px; border-radius: 4px; background: #FAF6EE; border: 1px solid #D6C4A2;
	display: flex; align-items: center; justify-content: center; color: #8E3717; font-weight: 700; flex-shrink: 0; font-size: 13px;
}
.mk-refund__body { font-size: 12px; line-height: 1.5; color: #6E4F38; }
.mk-refund__body b { color: #2B1A12; font-weight: 700; display: block; margin-bottom: 2px; font-size: 12.5px; }

/* ---------------------------------------------------------------- testimonial */
.mk-quote blockquote {
	font-size: 14px; line-height: 1.55; color: #2B1A12; font-weight: 500;
	border-left: 3px solid #8E3717; padding-left: 12px;
}
.mk-quote__src { font-size: 11px; color: #6E4F38; margin-top: 8px; font-weight: 600; padding-left: 15px; letter-spacing: .04em; }

/* ---------------------------------------------------------------- sticky CTA */
.mk-cta {
	position: sticky; left: 0; right: 0; bottom: 0;
	background: #FFFDF9; border-top: 1px solid #D6C4A2; padding: 12px 14px 16px;
	box-shadow: 0 -8px 16px -10px rgba(60, 30, 10, .18);  /* warm-tinted */
}
.mk-cta__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; padding: 0 2px; gap: 8px; }
.mk-cta__top .l { font-size: 11px; color: #6E4F38; font-weight: 600; letter-spacing: .04em; }
.mk-cta__top .l b { color: #2B1A12; font-weight: 700; }
.mk-cta__top .r { font-size: 11px; color: #8E3717; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.mk-cta__btn {
	display: flex; justify-content: center; align-items: center; gap: 10px;
	background: #8E3717; color: #FFFFFF; padding: 15px 16px; border-radius: 4px;
	font-size: 14.5px; font-weight: 700; text-decoration: none; letter-spacing: .01em;
	min-height: 44px;                 /* tap target AA */
}
.mk-cta__btn .amt { background: rgba(255, 255, 255, .16); padding: 3px 9px; border-radius: 3px; }
.mk-cta__btn .amt .mono { font-size: 13.5px; }
.mk-cta__note { font-size: 10.5px; line-height: 1.45; color: #6E4F38; margin-top: 9px; text-align: center; font-weight: 500; padding: 0 4px; }
.mk-cta__note b { color: #2B1A12; font-weight: 700; }

/* ---------------------------------------------------------------- confirmation status bar */
.mk-conf-statusbar {
	background: #2B1A12; color: #FFFDF9; padding: 11px 16px; display: flex; align-items: center; gap: 10px;
}
.mk-conf-statusbar__seal {
	width: 22px; height: 22px; border-radius: 3px; background: rgba(255, 255, 255, .18);
	display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; color: #FFFFFF;
}
.mk-conf-statusbar__text { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.mk-conf-statusbar__text span { color: #D49238; font-weight: 500; display: block; font-size: 10.5px; margin-top: 1px; }

/* ---------------------------------------------------------------- step tracker */
.mk-conf-amount { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px 12px; border-bottom: 1px solid #E7D8B6; gap: 10px; }
.mk-conf-amount .l { font-size: 11px; color: #6E4F38; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mk-conf-amount .v { font-size: 24px; font-weight: 700; color: #B14A24; letter-spacing: -0.01em; }
.mk-conf-amount .v small { font-size: 11px; color: #6E4F38; font-weight: 600; margin-left: 4px; }

.mk-conf-step { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px dashed #D6C4A2; align-items: flex-start; }
.mk-conf-step:last-child { border-bottom: 0; }
.mk-conf-step__n {
	width: 22px; height: 22px; border-radius: 3px; background: #FAF6EE; color: #8E3717;
	display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0;
	border: 1px solid #D6C4A2;
}
.mk-conf-step--locked .mk-conf-step__n { background: #8E3717; color: #FFFFFF; border-color: #8E3717; }
.mk-conf-step--active .mk-conf-step__n { background: #FBEDD3; color: #8E3717; border-color: #D49238; border-width: 1.5px; }
.mk-conf-step--future .mk-conf-step__n { background: #FFFDF9; color: #A89374; border: 1px dashed #D6C4A2; }
.mk-conf-step__body { font-size: 12px; color: #6E4F38; line-height: 1.45; }
.mk-conf-step__body b { color: #2B1A12; font-weight: 700; display: block; font-size: 12.5px; margin-bottom: 1px; }
.mk-conf-step__stamp {
	font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #8E3717; font-weight: 700;
	margin-left: auto; align-self: flex-start; white-space: nowrap;
}
.mk-conf-step--future .mk-conf-step__stamp { color: #A89374; }
.mk-conf-foot { background: #FAF6EE; padding: 12px 18px; font-size: 10.5px; color: #6E4F38; font-weight: 500; line-height: 1.5; text-align: center; }
.mk-conf-foot b { color: #2B1A12; font-weight: 700; }

/* ---------------------------------------------------------------- footer */
.mk-footer { background: #FAF6EE; border-top: 1px solid #D6C4A2; color: #6E4F38; padding: 24px 14px; }
.mk-footer a { color: #8E3717; text-decoration: none; font-weight: 600; }
.mk-footer a:hover { color: #B14A24; }
.mk-footer__contact { font-size: 12px; line-height: 1.6; }

/* ---------------------------------------------------------------- danger (decline/void only — never primary CTA) */
.mk-danger { color: #9A3A2A; font-weight: 700; }
.mk-alert {
	background: #FBEEEA; border: 1px solid #D6C4A2; border-radius: 6px; padding: 12px 14px;
	color: #9A3A2A; font-size: 13px; line-height: 1.5;
}

/* ---------------------------------------------------------------- accessibility */
:focus-visible { outline: 2px solid #8E3717; outline-offset: 2px; }
.mk-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- 360px floor reflows (FR-22) */
@media (max-width: 360px) {
	body { padding-left: 8px; padding-right: 8px; }
	.mk-price-row { flex-direction: column; align-items: flex-start; gap: 10px; }
	.mk-price-tag { align-self: stretch; }
	.mk-metarow { grid-template-columns: 1fr; }
	.mk-conf-amount { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------------------------------------------------------------- reduced motion (EXPERIENCE.md Interaction Primitives) */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- 360px floor guard (FR-2 / FR-22 — release-blocker)
   WooCommerce's mini-cart drawer can exceed the 360px viewport and induce
   horizontal scroll (measured 8px overflow). Clip page overflow and constrain
   the drawer so the mobile floor holds. overflow-x:clip keeps position:sticky
   working (overflow:hidden would break the sticky CTA). */
html, body { overflow-x: clip; max-width: 100%; }
.wc-block-mini-cart__drawer,
.wc-block-components-drawer__content,
.wc-block-components-drawer__screen-overlay { max-width: 100vw; box-sizing: border-box; }

/* ---------------------------------------------------------------- Woo catalog card → Trusted Warm (AD-1, DESIGN.md tour-card)
   The Shop archive renders product-collection cards, which do NOT fire the
   woocommerce_blocks_product_grid_item_html filter (only legacy grid blocks do).
   Scope brand styles to the archive product-template so the homepage handpicked
   grid (.mk-tourcard) is untouched, and the catalog stops shipping raw Woo. */
.wp-block-woocommerce-product-template .wc-block-product {
	background: #FFFDF9;            /* surface-raised */
	border: 1px solid #D6C4A2;      /* border-hairline */
	border-radius: 6px;             /* radius.card */
	overflow: hidden;
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-product-template .wc-block-product .wc-block-components-product-image img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
	border-radius: 4px;             /* radius.imagery — documentary sharpness */
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-name,
.wp-block-woocommerce-product-template .wc-block-components-product-name,
.wp-block-woocommerce-product-template .wc-block-components-product-name a,
.wp-block-woocommerce-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title a {
	font-size: 23px !important; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; /* tour-title — !important beats WP .has-*-font-size utility */
	color: #2B1A12; text-decoration: none;
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-template .wc-block-components-product-price {
	font-size: 13px; color: #8E3717; font-weight: 700; /* per-traveller price, terracotta-text */
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price .woocommerce-Price-amount,
.wp-block-woocommerce-product-template .wc-block-components-product-price .woocommerce-Price-amount {
	font-weight: 700; color: #8E3717;
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button .wp-element-button,
.wp-block-woocommerce-product-template .wc-block-components-product-button__button {
	background: #8E3717; color: #fff; border-radius: 4px; font-weight: 700; font-size: 14px;
}
@media (max-width: 360px) {
	.wp-block-woocommerce-product-template .wp-block-woocommerce-product-name,
	.wp-block-woocommerce-product-template .wc-block-components-product-name { font-size: 19px; }
}

/* ================================================================ REDESIGN 2026-07-05
   Photo-forward + layout-upgrade layer. Extends Trusted Warm (no rebrand).
   Tokens: var(--wp--custom--color--*), var(--wp--custom--shadow--*),
   var(--wp--preset--font-size--hero|xxl), var(--wp--preset--spacing--7|8|9). */

/* ---------------------------------------------------------------- foundation utilities */
.mk-section { padding-block: clamp(28px, 4vw, 56px); }
.mk-container { max-width: 1080px; margin-inline: auto; padding-inline: 14px; }
.mk-section-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.mk-section-head .mk-title__eyebrow { margin-bottom: 0; }
.mk-section-head h2 { font-size: var(--wp--preset--font-size--xxl); }
.mk-eyebrow-row { display: flex; align-items: center; gap: 10px; }
.mk-eyebrow-row::before { content: ""; width: 24px; height: 1px; background: #8E3717; }
.mk-surface--warm {
	background:
		linear-gradient(180deg, rgba(212,146,56,.10) 0%, rgba(250,246,238,0) 280px),
		#FAF6EE;
}

/* ---------------------------------------------------------------- hero — full-bleed photo with overlaid copy */
.mk-hero { position: relative; width: 100%; }
.mk-hero__bleed {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: #D6C4A2;
}
.mk-hero__bg {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.mk-hero__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(26,18,8,0) 42%, rgba(26,18,8,.82) 100%),
		linear-gradient(90deg, rgba(26,18,8,.82) 0%, rgba(26,18,8,.45) 55%, rgba(26,18,8,.05) 100%);
}
.mk-hero__copy {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: clamp(20px, 4vw, 56px) clamp(14px, 5vw, 72px);
	max-width: 760px;
}
.mk-hero__title {
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1.05; letter-spacing: -0.025em;
	color: #FFFDF9; font-weight: 800;
	text-shadow: 0 2px 12px rgba(0,0,0,.28);
	margin: 8px 0 12px;
}
.mk-hero__lede {
	color: rgba(255,253,249,.94);
	font-size: clamp(15px, 1.4vw, 18px);
	max-width: 52ch; line-height: 1.55;
}
.mk-eyebrow--light { color: #FBEDD3; }
.mk-hero__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.mk-hero__btns .wp-block-button__link {
	background: #B14A24;             /* terracotta-fill — primary CTA */
	color: #FFFDF9; border-radius: 4px;
	padding: 14px 28px; font-weight: 700; font-size: 16px;
	min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 1px 2px rgba(26,18,8,.2);
}
.mk-hero__btns .wp-block-button__link:hover {
	background: #8E3717;             /* terracotta-text — darken on hover */
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -8px rgba(0,0,0,.45);
}
.mk-hero__btns .wp-block-button__link:active { transform: translateY(0); }
.mk-hero__btns .wp-block-button__link:focus-visible {
	outline: 2px solid #FFFDF9; outline-offset: 2px;
}
.mk-hero__btns .is-style-ghost-light .wp-block-button__link {
	background: rgba(255,253,249,.14); color: #FFFDF9;
	border: 1px solid rgba(255,253,249,.6);
	backdrop-filter: blur(2px);
	box-shadow: none;
}
.mk-hero__btns .is-style-ghost-light .wp-block-button__link:hover {
	background: rgba(255,253,249,.26);
	border-color: rgba(255,253,249,.85);
	transform: translateY(-1px);
	box-shadow: none;
}
@media (max-width: 781px) {
	.mk-hero__bleed { aspect-ratio: 5 / 4; }                /* 4/5 → 5/4: short landscape hero on mobile (~487→312px) — the portrait crop left a big empty image band around the copy */
	.mk-hero__copy { top: 0; }                               /* span the full hero height so content can fill it instead of clustering at the bottom */
	.mk-hero__scrim {
		background:
			linear-gradient(180deg, rgba(26,18,8,.16) 0%, rgba(26,18,8,.78) 60%, rgba(26,18,8,.92) 100%);
	}
	.mk-hero__copy { padding: 14px 16px 18px; gap: 4px; }   /* tighten padding + flex gap so copy fills the shorter hero */
	.mk-hero__title { margin: 4px 0 6px; }                  /* 8/12 → 4/6 */
	.mk-hero__lede { font-size: 14px; margin-top: 0; }       /* reset default <p> top margin that stacked with the flex gap */
	.mk-hero__btns { margin-top: 8px; flex-wrap: nowrap; }   /* keep both CTAs on ONE row on mobile (was wrapping → 2 rows, +62px) */
	.mk-hero__btns .wp-block-button__link { padding: 10px 16px; font-size: 14px; }
	.mk-hero__btns .wp-block-button { flex: 1 1 0; min-width: 0; } /* share the row evenly; let labels wrap inside if needed */
	/* Reduce the large white gap between a section heading and the tour grid on
	   mobile — Woo's .wc-block-grid ships a 24px margin-top that stacks with
	   the section-head margin-bottom. */
	.mk-section-head { margin-bottom: 10px; }
	.wp-block-handpicked-products.wc-block-grid,
	.wp-block-product-collection { margin-top: 6px; }   /* grid lives outside .mk-section; override Woo's 24px margin-top (mobile) */
}

/* ---------------------------------------------------------------- tour card — richer meta + hover */
.mk-tourcard {
	transition: box-shadow .18s ease, transform .18s ease;
	box-shadow: var(--wp--custom--shadow--card-rest, 0 1px 2px rgba(60,30,10,.04));
}
.mk-tourcard:hover {
	box-shadow: var(--wp--custom--shadow--card-hover, 0 2px 4px rgba(60,30,10,.06));
	transform: translateY(-2px);
}
.mk-tourcard__media img,
.mk-tourcard__media .wc-block-grid__product-image img { aspect-ratio: 3 / 2; }
.mk-tourcard__body { padding: 16px 18px 18px; }
.mk-tourcard__meta { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; font-size: 12.5px; color: #6E4F38; }
.mk-tourcard__avatar { width: 22px; height: 22px; border-radius: 9999px; object-fit: cover; border: 1px solid #D6C4A2; flex-shrink: 0; }
.mk-tourcard__guide { font-weight: 600; }
.mk-tourcard__loc { font-size: 11.5px; color: #8E3717; font-weight: 700; letter-spacing: .02em; display: block; margin-bottom: 6px; }
.mk-tourcard__duration { margin-left: auto; font-size: 11px; color: #6E4F38; font-weight: 600; white-space: nowrap; }
.mk-tourcard__title { margin-bottom: 4px; }

/* ---------------------------------------------------------------- gallery — thumbnail strip */
.mk-gallery__main { aspect-ratio: 4 / 3; }
.mk-gallery__slide { display: none; }
.mk-gallery__slide.is-active { display: block; }
.mk-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 0 14px 6px; }
.mk-gallery__thumb {
	flex: 0 0 88px; aspect-ratio: 4 / 3; border: 0; padding: 0;
	background: #D6C4A2; border-radius: 4px; overflow: hidden;
	cursor: pointer; opacity: .68; transition: opacity .15s;
}
.mk-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-gallery__thumb.is-active,
.mk-gallery__thumb:hover { opacity: 1; outline: 2px solid #8E3717; outline-offset: 1px; }

/* ---------------------------------------------------------------- guide card — warmer surface, bigger portrait */
.mk-guide-card-wrap { background: #FFFDF9; border-bottom: 1px solid #D6C4A2; padding: 18px 18px; }
.mk-guide-card-wrap .mk-guide {
	background: #FFFDF9; border-left: 3px solid #D49238;
	padding: 14px 16px; border-radius: 6px; gap: 16px;
}
.mk-guide__portrait { width: 72px; height: 72px; border-radius: 8px; }
.mk-guide__name { font-size: 16px; }

/* ---------------------------------------------------------------- footer — 3-column grid */
.mk-footer__grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
	align-items: start;
}
.mk-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.mk-footer__brand .wp-block-site-logo { max-width: 96px; }
.mk-footer__tag { font-size: 12px; color: #6E4F38; line-height: 1.5; max-width: 32ch; }
.mk-footer__contact { font-size: 12px; line-height: 1.6; }
.mk-footer__legal { font-size: 11px; color: #A89374; text-align: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid #E7D8B6; }
@media (max-width: 781px) {
	.mk-footer__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------------------------------------------------------------- header — locale chip */
.mk-locale-chip {
	font-size: 11px; color: #6E4F38; font-weight: 600; letter-spacing: .04em;
	display: inline-flex; align-items: center; gap: 5px;
}
.mk-locale-chip::before {
	content: ""; width: 6px; height: 6px; border-radius: 9999px;
	background: var(--wp--preset--color--verified-green, #4E7A3A);
}

/* ---------------------------------------------------------------- tour-detail — 2-column desktop PDP */
.mk-tour { max-width: 1200px; margin-inline: auto; }
.mk-tour__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
	gap: 40px;
	align-items: start;
	padding: 0 16px;
}
.mk-tour__main { min-width: 0; }
.mk-tour__aside { min-width: 0; }
/* desktop: aside is a sticky buy-box rail (price + CTA follow the scroll) */
@media (min-width: 882px) {
	.mk-tour__aside { position: sticky; top: 88px; }
	.mk-tour__aside .mk-cta {
		position: static;
		box-shadow: none;
		border: 1px solid #D6C4A2;
		border-radius: 8px;
		padding: 18px;
		margin-top: 12px;
	}
	.mk-cta-spacer { display: none; } /* no fixed bar on desktop */
}
/* mobile: 1-col, CTA pins to viewport bottom (always-visible book bar) */
@media (max-width: 881px) {
	.mk-tour__grid { grid-template-columns: 1fr; gap: 0; }
	.mk-tour__aside .mk-cta {
		position: fixed;
		left: 0; right: 0; bottom: 0; top: auto;
		z-index: 50;
		border-radius: 0;
		box-shadow: 0 -8px 16px -10px rgba(60, 30, 10, .18);
	}
}

/* ---------------------------------------------------------------- button hover lift */
.mk-cta__btn:hover { background: #B14A24; }
.mk-cta__btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- home booking step-flow timeline
   Mobile (default): vertical timeline, numbered nodes on a saffron rule.
   Desktop (>=782px, item 3): 3 equal columns with a connecting rule running
   behind the (smaller, cleaner) numbered nodes. */
.mk-steps { display: flex; flex-direction: column; gap: 0; }
.mk-step {
	display: flex; gap: 16px; padding: 14px 0;
	border-left: 2px solid #D49238; margin-left: 12px; padding-left: 22px;
	position: relative;
}
.mk-step:last-child { border-left-color: transparent; }
.mk-step__n {
	width: 26px; height: 26px; border-radius: 9999px;
	background: #8E3717; color: #FFFDF9;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; flex-shrink: 0;
	margin-left: -35px; margin-top: 2px;
}
.mk-step__body { font-size: 13px; color: #6E4F38; line-height: 1.5; }
.mk-step__body b { color: #2B1A12; font-weight: 700; display: block; font-size: 14px; margin-bottom: 2px; }
@media (min-width: 782px) {
	.mk-steps {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0 28px;
		position: relative;
	}
	.mk-steps::before {
		content: "";
		position: absolute;
		top: 12px;                    /* aligns with the numbered node's vertical center */
		left: calc(100% / 6);
		right: calc(100% / 6);
		height: 2px;
		background: #D49238;
		z-index: 0;
	}
	.mk-step {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		border-left: 0;
		margin-left: 0;
		padding: 0 14px;
	}
	.mk-step__n {
		width: 24px; height: 24px;
		font-size: 11px;
		margin-left: 0; margin-top: 0;
		position: relative; z-index: 1;
		box-shadow: 0 0 0 4px #FAF6EE; /* punches a clean gap in the connecting rule */
	}
	.mk-step__body { font-size: 12.5px; }
	.mk-step__body b { font-size: 13.5px; }
}

/* ---------------------------------------------------------------- home FAQ teaser 2-col */
/* faq-teaser wasn't picking up the section's constrained content width and rendered
   full-bleed (flush left). Cap to wide-size and centre so it aligns with the other
   home sections (Featured grid, booking steps). */
.mk-faq-teaser { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; max-width: 1080px; margin-inline: auto; }
.mk-faq-teaser__links { display: flex; flex-direction: column; gap: 8px; }
.mk-faq-teaser__link {
	display: block; padding: 12px 14px; background: #FFFDF9;
	border: 1px solid #D6C4A2; border-radius: 6px;
	text-decoration: none; color: #2B1A12; font-size: 13.5px; font-weight: 600;
}
.mk-faq-teaser__link:hover { border-color: #8E3717; }
@media (max-width: 781px) {
	.mk-faq-teaser { grid-template-columns: 1fr; gap: 24px; }
}

/* ================================================================ P2.1 nav tap targets (AA 44px)
   Nav links render at 21px height — pad them to clear the 44px target floor
   without changing the visual line-height. */
.mk-site-header .wp-block-navigation .wp-block-navigation__container {
	gap: 4px;
}
.mk-site-header .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 10px;
	border-radius: 4px;
	transition: color .15s ease, background-color .15s ease;
}
.mk-site-header .wp-block-navigation-item__content:hover,
.mk-site-header .wp-block-navigation-item__content:focus-visible {
	background: rgba(142, 55, 23, .06);
	color: #8E3717;                  /* terracotta-text affordance */
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ================================================================ P2.2 eyebrow legibility on mobile */
@media (max-width: 781px) {
	.mk-title__eyebrow { font-size: 11px; letter-spacing: .14em; }
}

/* ---------------------------------------------------------------- Our Guides grid (P1.1) */
.mk-guides {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 24px 0 32px;
}
.mk-guides__card { padding: 0; }
.mk-guides__card .mk-guide {
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	height: 100%;
}
.mk-guides__card .mk-guide__portrait { width: 96px; height: 96px; border-radius: 8px; }
.mk-guides__card .mk-guide__name { font-size: 17px; }
.mk-guides__cta {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 16px;
	background: #8E3717;
	color: #FFFDF9;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	min-height: 44px;
	line-height: 24px;
}
.mk-guides__cta:hover { background: #B14A24; color: #FFFDF9; }
/* Guides with no tours yet — muted "Tours coming soon" instead of a dead link. */
.mk-guides__cta--soon {
	display: inline-block;
	margin-top: 14px;
	padding: 6px 0;
	background: transparent;
	color: #8C8F94;
	font-size: 12.5px;
	font-style: italic;
}
.mk-guides__empty { padding: 24px; color: #6E4F38; }
@media (max-width: 781px) {
	.mk-guides { grid-template-columns: 1fr; gap: 16px; }
	.mk-guides__card .mk-guide { flex-direction: row; gap: 16px; padding: 16px; }
	.mk-guides__card .mk-guide__portrait { width: 72px; height: 72px; flex-shrink: 0; }
}

/* ---------------------------------------------------------------- guide archive (/guide/{slug}/)
   Lead profile + a grid of the tours that guide leads. Reuses .mk-guide + .mk-tourcard. */
.mk-guide-detail { padding-block: 8px 0; }
.mk-guide-detail__back {
	display: inline-block;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 600;
	color: #8E3717;
	text-decoration: none;
}
.mk-guide-detail__back:hover { text-decoration: underline; }
.mk-guide--lead {
	display: flex;
	gap: 20px;
	align-items: center;
	background: #FFFDF9;
	border: 1px solid #D6C4A2;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 28px;
}
.mk-guide--lead .mk-guide__portrait { width: 112px; height: 112px; border-radius: 10px; }
.mk-guide--lead .mk-guide__name { font-size: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.mk-guide-detail__heading { margin: 0 0 20px; }
.mk-tourcard-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.mk-guide-detail__empty { color: #6E4F38; }
@media (max-width: 781px) {
	.mk-guide--lead { flex-direction: row; gap: 16px; padding: 16px; }
	.mk-guide--lead .mk-guide__portrait { width: 84px; height: 84px; flex-shrink: 0; }
	.mk-tourcard-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 480px) {
	.mk-tourcard-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- FAQ accordions (P2.3) */
.mk-faq { margin: 20px 0; }
.mk-faq__item {
	border: 1px solid #D6C4A2;
	border-radius: 6px;
	background: #FFFDF9;
	margin-bottom: 10px;
	overflow: hidden;
}
.mk-faq__item[open] { border-color: #8E3717; box-shadow: 0 4px 12px -8px rgba(60,30,10,.18); }
.mk-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 16px 48px 16px 18px;
	font-size: 15px;
	font-weight: 700;
	color: #2B1A12;
	position: relative;
	line-height: 1.4;
}
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid #8E3717;
	border-bottom: 2px solid #8E3717;
	transform: translateY(-65%) rotate(45deg);
	transition: transform .15s ease;
}
.mk-faq__item[open] .mk-faq__q { color: #8E3717; }
.mk-faq__item[open] .mk-faq__q::after { transform: translateY(-35%) rotate(-135deg); }
.mk-faq__a {
	padding: 0 18px 18px;
	font-size: 14px;
	line-height: 1.6;
	color: #6E4F38;
}
.mk-faq__a p { margin: 0 0 10px; }
.mk-faq__a p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Contact hero CTA (P2.4) */
.mk-contact-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 16px 0 8px;
}
.mk-contact-hero__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 28px;
	min-height: 52px;
	background: #8E3717;
	color: #FFFDF9;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}
.mk-contact-hero__wa:hover { background: #B14A24; color: #FFFDF9; }
.mk-contact-hero__alt { font-size: 13px; color: #6E4F38; }

/* ---------------------------------------------------------------- Shop catalog injected meta (P1.2)
   The product-collection block centers its text — keep the injected loc/meta
   aligned and visually grouped with the title. */
.wp-block-woocommerce-product-template .mk-tourcard__loc,
.wp-block-woocommerce-product-template .mk-tourcard__meta {
	display: flex;
	justify-content: center;
	text-align: center;
}
/* `.mk-tourcard__duration { margin-left:auto }` (catalog grid) makes the flex
   child snap right and overrides the justify-content:center above — so the meta
   row split Guide-left | Duration-right while loc/title/price stayed centred.
   Drop the auto-margin here so the row recentres and matches the rest of the card. */
.wp-block-woocommerce-product-template .mk-tourcard__duration {
	margin-left: 0;
}

/* ---- round-2 P2-b: mobile nav toggle AA 44x44 tap target ----
   FIXED 2026-07-05: scoped to the mobile breakpoint. The previous unconditional
   `display:inline-flex` outranked core's `@media (min-width:600px){…open{display:none}}`
   and leaked the hamburger onto desktop next to the inline menu. Only size the
   toggle where core actually shows it (<600px); let core control display elsewhere. */
@media (max-width: 599.98px) {
	.mk-site-header .wp-block-navigation__responsive-container-open,
	.mk-site-header .wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
	}
}

/* ---- round-2 P2-c: quantity input min height ---- */
.mk-cta input[type="number"],
.quantity input.qty,
input.qty {
	min-height: 44px;
}
.wp-block-woocommerce-product-template .wp-block-post-title { margin-top: 4px; }

/* ================================================================ enhancements 2026-07-05
   Item 2 — brand lockup: logo + tagline grouped at the header's left. */
/* Header layout (fixed 2026-07-05): vertically centre all children, keep the brand
   hard-left and cluster nav + account + cart to the right (margin-right:auto absorbs
   the free space so the 4 flex children stop spreading), and restore side padding
   that was collapsing to 0. */
.mk-site-header {
	align-items: center;
	column-gap: 16px;
	padding-left: 16px;
	padding-right: 16px;
}
.mk-site-header > .mk-brand { margin-right: auto; }
.mk-brand { display: flex; flex-direction: column; gap: 2px; justify-content: center; align-items: center; }   /* 2026-07-06: logo centered over the tagline (was flex-start = logo left-aligned vs tagline) */
.mk-brand__tagline {
	margin: 0;
	font-size: 11px;                 /* 11px floor (round-2 a11y) */
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6E4F38;                  /* ink-secondary */
	font-weight: 600;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.mk-brand__tagline { display: none; } /* crowds the header at narrow widths */
}

/* Item 4 — home handpicked-products card CTA (mk_product_grid_item_html).
   The /shop/ Product Collection card gets its "Book now" label for free via
   WC_Product::add_to_cart_text() + the woocommerce_product_add_to_cart_text
   filter (functions.php:mk_book_now_cta_text) — no markup change needed there. */
.mk-tourcard__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: 700;
	color: #8E3717;                  /* terracotta-text */
	letter-spacing: .02em;
}
.mk-tourcard__cta-arrow { transition: transform .15s ease; }
.mk-tourcard:hover .mk-tourcard__cta-arrow { transform: translateX(3px); }

/* ---- home Featured grid layout fix (2026-07-05) ----
   `.mk-tourcard__body`/`__media` are <span>s; without an explicit block display the
   body's padding did not contain its block-level children (`.mk-tourcard__loc`,
   `.mk-tourcard__meta`), so the guide/duration meta row escaped to the card's full
   width and clipped at the viewport edges on the two outer cards. Give them block
   display, and constrain the handpicked grid to the site wide-size (1080px) so the
   cards stop bleeding past the page gutters (grid was rendering ~full-viewport wide,
   first card at x=-8). Home-only: /shop/ uses the product-collection template. */
.mk-tourcard__media { display: block; }
.mk-tourcard__body { display: block; }
.wc-block-grid.wp-block-handpicked-products {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: 14px;
	box-sizing: border-box;
}

/* Item 5 — floating multi-channel chat widget
   (functions.php:mk_floating_chat_widget). Fixed bottom-right, all front-end
   pages. Single configured channel = direct link in that brand color; 2+
   channels = neutral Trusted-Warm FAB that expands a popover panel. Brand
   colors are outside the Trusted Warm palette by design — recognizable chat
   affordances, not brand surfaces (same justification as the prior WA green). */
.mk-chat-fab {
	position: fixed;
	right: 16px;
	bottom: 16px;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 9999px;
	background: var(--mk-channel-color, #6E4F38);
	color: #FFFDF9;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px -4px rgba(20, 20, 10, .4);
	z-index: 1000;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
.mk-chat-fab:hover,
.mk-chat-fab:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -4px rgba(20, 20, 10, .48);
	outline: none;
}
.mk-chat-fab__icon { width: 26px; height: 26px; display: block; }
.mk-chat-fab__icon svg { width: 26px; height: 26px; display: block; }
/* Single-channel variant keeps the channel's brand color (e.g. WhatsApp green). */
.mk-chat-fab--single { background: var(--mk-channel-color, #25D366); }
/* Badge = channel count, shown only on the multi-channel FAB. */
.mk-chat-fab__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9999px;
	background: #8E3717;
	color: #FFFDF9;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #FAF6EE;
}

/* Expandable panel — hidden until .is-open. */
.mk-chat-panel {
	position: fixed;
	right: 16px;
	bottom: 82px;
	width: 244px;
	max-width: calc(100vw - 32px);
	background: #FFFDF9;
	border: 1px solid #D6C4A2;
	border-radius: 10px;
	box-shadow: 0 10px 30px -8px rgba(20, 20, 10, .35);
	z-index: 1001;
	padding: 8px;
	opacity: 0;
	transform: translateY(8px) scale(.98);
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}
.mk-chat-panel.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.mk-chat-panel[hidden] { display: none; }
.mk-chat-panel__title {
	margin: 4px 6px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6E4F38;
}
.mk-chat-panel__channel {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 8px;
	border-radius: 8px;
	text-decoration: none;
	color: #2A1F14;
	font-size: 14px;
	font-weight: 600;
	transition: background .12s ease;
}
.mk-chat-panel__channel:hover,
.mk-chat-panel__channel:focus-visible { background: #FAF0E6; outline: none; }
.mk-chat-panel__channel-icon {
	width: 30px;
	height: 30px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mk-channel-color, #6E4F38);
	color: #FFFDF9;
	flex: 0 0 30px;
}
.mk-chat-panel__channel-icon svg { width: 17px; height: 17px; display: block; }
.mk-chat-panel__channel-text { flex: 1; }
.mk-chat-panel__channel-arrow { width: 14px; height: 14px; color: #B79B7A; flex: 0 0 14px; }

/* Collision guard: the tour-detail sticky booking bar (.mk-cta, ~184-205px
   tall depending on content) pins to the viewport bottom below the 881px
   breakpoint (see .mk-tour__aside .mk-cta above) — raise the chat widget
   clear of it there, with margin for the taller measured height. */
@media (max-width: 881px) {
	body.single-product .mk-chat-fab { bottom: 224px; }
	body.single-product .mk-chat-panel { bottom: 290px; }
}

/* Item 6 — footer chat-channel list + email + reassurance line
   (mu-plugins/mekongtodo-config.php:mk_footer_contact_shortcode). */
.mk-footer__channels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
.mk-footer a.mk-footer__chat-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 12px;
	background: #FFFDF9;
	border: 1px solid #D6C4A2;
	border-radius: 4px;
	color: #2A1F14;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .12s ease, background .12s ease;
}
.mk-footer a.mk-footer__chat-btn:hover,
.mk-footer a.mk-footer__chat-btn:focus-visible {
	border-color: #8E3717;
	background: #FAF0E6;
	outline: none;
}
.mk-footer__chat-icon { display: inline-flex; width: 16px; height: 16px; color: var(--mk-channel-color, #6E4F38); }
.mk-footer__chat-icon svg { width: 16px; height: 16px; display: block; }
.mk-footer__email,
.mk-footer__hours { font-size: 12px; }
.mk-footer__reassure {
	font-size: 11.5px;
	color: #6E4F38;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed #D6C4A2;
	line-height: 1.5;
}

/* Generic channel-button list (used by [mk_chat_channels] shortcode, e.g. the
   Contact page). Same affordance as the footer buttons, sized for body copy. */
.mk-chat-channels { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-chat-channels__label { width: 100%; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #6E4F38; }
a.mk-chat-channel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	background: #FFFDF9;
	border: 1px solid var(--mk-channel-color, #D6C4A2);
	border-radius: 6px;
	color: #2A1F14;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .12s ease, border-color .12s ease;
}
a.mk-chat-channel:hover,
a.mk-chat-channel:focus-visible {
	background: var(--mk-channel-color, #FAF0E6);
	border-color: var(--mk-channel-color, #8E3717);
	color: #FFFDF9;
	outline: none;
}
a.mk-chat-channel:hover .mk-chat-channel__icon,
a.mk-chat-channel:focus-visible .mk-chat-channel__icon { color: #FFFDF9; }
.mk-chat-channel__icon { display: inline-flex; width: 18px; height: 18px; color: var(--mk-channel-color, #6E4F38); }
.mk-chat-channel__icon svg { width: 18px; height: 18px; display: block; }