/**
* Mekongtodo 1.9.0 — v2 surfaces stylesheet (home · tours · tour detail).
*
* Self-contained: shared core + the 1.8.x "Mekong Blue" layers. The remapped
* legacy 1.7.x block is deliberately NOT included here — it is the source of
* the specificity fights that broke these pages (hidden bottom-sheet CTA,
* 1-column gallery, absolute hero copy). Pages not yet rebuilt
* (guides / faq / contact / cart / checkout / account) keep loading
* mekongtodo-1.8.4.css via mk_enqueue_assets().
*/
/* ── core base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
background: #F2F8FB;
color: #0A2C3E;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
margin: 0;
}
img { max-width: 100%; height: auto; }
a { color: #16667F; }
.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 guard (FR-2/FR-22): mini-cart drawer must not induce h-scroll */
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; }
/* ── image fade-in (1.7.0 perceived-loading) ───────────────────────────── */
img.mk-img-fade { opacity: 0; transition: opacity .45s ease; }
img.mk-img-fade.loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
img.mk-img-fade { opacity: 1; transition: none; }
}
/* ── floating chat widget (AD-9) ────────────────────────────────────────── */
.mk-chat-channels { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-chat-channels__label { width: 100%; font-size: 12px; color: #7E97A6; font-weight: 600; margin: 0 0 2px; }
.mk-chat-channel {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; border-radius: 999px;
background: #FFFFFF; border: 1px solid rgba(10, 44, 62, 0.14);
color: #0A2C3E; text-decoration: none; font-weight: 600; font-size: 14px;
box-shadow: 0 6px 16px -8px rgba(10, 44, 62, 0.25);
}
.mk-chat-channel:hover { border-color: rgba(41, 160, 215, 0.5); color: #16667F; }
.mk-chat-channel__icon { display: inline-flex; }
.mk-chat-channel__icon svg { width: 16px; height: 16px; }
.mk-chat-channel--whatsapp .mk-chat-channel__icon { color: #25D366; }
.mk-chat-channel--telegram .mk-chat-channel__icon { color: #229ED9; }
.mk-chat-channel--messenger .mk-chat-channel__icon { color: #0084FF; }
.mk-chat-channel--zalo .mk-chat-channel__icon { color: #0068FF; }
.mk-chat-channel__text { line-height: 1; }
.mk-chat-fab {
position: fixed; right: 18px; bottom: 18px; z-index: 9990;
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 50%;
background: #0A2C3E; color: #FFFFFF; text-decoration: none;
box-shadow: 0 14px 30px -10px rgba(10, 44, 62, 0.5);
}
.mk-chat-fab svg { width: 24px; height: 24px; }
.mk-chat-fab:hover { background: #16667F; }
.mk-chat-fab--single { padding: 0 18px; width: auto; gap: 8px; font-weight: 600; font-size: 14px; background: var(--mk-channel-color, #0A2C3E); }
.mk-chat-fab__expand {
position: fixed; right: 18px; bottom: 84px; z-index: 9990;
display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.mk-chat-fab__expand .mk-chat-channel { box-shadow: 0 10px 24px -10px rgba(10, 44, 62, 0.35); }
@media (max-width: 600px) {
.mk-chat-fab--single { padding: 0; width: 54px; }
.mk-chat-fab--single .mk-chat-channel__text, .mk-chat-fab--single span.mk-chat-fab__label { display: none; }
}
/* ── lightbox + itinerary modal (shared with detail surfaces) ──────────── */
.mk-lightbox {
position: fixed; inset: 0; z-index: 10050; background: rgba(10, 44, 62, 0.92);
display: grid; place-items: center;
}
.mk-lightbox[hidden] { display: none; }
.mk-lightbox__stage { margin: 0; max-width: min(1100px, 92vw); }
.mk-lightbox__stage img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 8px; }
.mk-lightbox__close, .mk-lightbox__prev, .mk-lightbox__next {
position: absolute; z-index: 1;
background: rgba(255, 255, 255, 0.12); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 999px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
}
.mk-lightbox__close { top: 18px; right: 18px; }
.mk-lightbox__prev { left: 18px; top: 50%; }
.mk-lightbox__next { right: 18px; top: 50%; }
.mk-lightbox__bar { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #9BB6C4; font-size: 13px; }
.mk-itinmodal {
position: fixed; inset: 0; z-index: 10060; background: rgba(10, 44, 62, 0.6);
display: grid; place-items: center; padding: 20px;
}
.mk-itinmodal[hidden] { display: none; }
.mk-itinmodal__card {
background: #FFFFFF; border-radius: 20px; max-width: min(920px, 94vw);
max-height: 88vh; overflow: hidden; display: flex;
}
.mk-itinmodal__rail { display: none; }
.mk-itinmodal__stage { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.mk-itinmodal__media { margin: 0; position: relative; }
.mk-itinmodal__media img { width: 100%; height: auto; display: block; }
.mk-itinmodal__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(10, 44, 62, 0.55); color: #fff; border: 0; border-radius: 999px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.mk-itinmodal__prev { left: 12px; }
.mk-itinmodal__next { right: 12px; }
.mk-itinmodal__body { padding: 22px 26px; }
.mk-itinmodal__topbar { display: flex; align-items: center; gap: 12px; }
.mk-itinmodal__n { font-size: 12.5px; font-weight: 700; color: #16667F; background: rgba(41, 160, 215, 0.12); padding: 4px 10px; border-radius: 999px; }
.mk-itinmodal__h { font-family: "Lora", Georgia, serif; font-size: 22px; margin: 0; flex: 1; }
.mk-itinmodal__close { background: none; border: 0; cursor: pointer; color: #7E97A6; padding: 6px; }
.mk-itinmodal__d { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: #4C6C7D; white-space: pre-wrap; }
@media (max-width: 700px) { .mk-itinmodal__card { flex-direction: column; } }
/* ════════════════════════════════════════════════════════════════════════════
* v1.8.0 — "Mekong Blue" rebrand (2026-08-30)
* Reference: Downloads/Mekongtodo Website.html (founder-approved mockup).
* Palette: bg #F2F8FB · ink #0A2C3E · accent #29A0D7 · deep #16667F ·
* muted #4C6C7D · faint #7E97A6 · dark surface #0A2C3E with
* #EFF7FB / #9BB6C4 / #6FC4E8.
* Type: Lora (vendored latin 400 + italic) for display headings + wordmark;
* system sans for body (FR-22: no external webfont requests).
* This layer is appended AFTER the remapped legacy rules — it wins ties.
* ════════════════════════════════════════════════════════════════════════════ */
@font-face {
font-family: "Lora";
src: url("../fonts/lora-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lora";
src: url("../fonts/lora-400-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* ── display type ─────────────────────────────────────────────────────────── */
h1, h2, h3,
.mk-tourtitle,
.mk-hero__title,
.wp-block-post-title {
font-family: "Lora", Georgia, "Times New Roman", serif;
font-weight: 400;
letter-spacing: -0.02em;
}
/* ── shared bits ──────────────────────────────────────────────────────────── */
.mk-btn {
display: inline-block;
background: #29A0D7;
color: #FFFFFF;
padding: 16px 30px;
border-radius: 999px;
font-weight: 600;
font-size: 16px;
line-height: 1.2;
text-decoration: none;
border: 0;
box-shadow: 0 10px 26px rgba(41, 160, 215, 0.34);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mk-btn:hover,
.mk-btn:focus-visible {
background: #1E8FC4;
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(41, 160, 215, 0.42);
}
.mk-btn--ghost {
background: #FFFFFF;
color: #0A2C3E;
border: 1px solid rgba(10, 44, 62, 0.14);
box-shadow: none;
}
.mk-btn--ghost:hover,
.mk-btn--ghost:focus-visible {
background: #FFFFFF;
color: #16667F;
border-color: rgba(41, 160, 215, 0.5);
box-shadow: 0 10px 24px rgba(10, 44, 62, 0.10);
}
.mk-btn--glass {
background: rgba(255, 255, 255, 0.12);
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: none;
}
.mk-btn--glass:hover,
.mk-btn--glass:focus-visible {
background: rgba(255, 255, 255, 0.2);
color: #FFFFFF;
}
.wp-block-button__link {
border-radius: 999px !important;
font-weight: 600;
}
a:focus-visible {
outline: 2px solid #29A0D7;
outline-offset: 2px;
border-radius: 4px;
}
/* ── site header — frosted glass ──────────────────────────────────────────── */
.mk-site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(242, 248, 251, 0.9);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-top: 0;
border-bottom: 1px solid rgba(10, 44, 62, 0.08) !important;
}
.mk-site-header__inner {
max-width: 1240px;
margin: 0 auto;
padding: 14px 28px;
display: flex;
align-items: center;
gap: 28px;
}
.mk-wordmark {
font-family: "Lora", Georgia, serif;
font-size: 25px;
letter-spacing: -0.02em;
color: #0A2C3E;
text-decoration: none;
line-height: 1.1;
flex-shrink: 0;
}
.mk-wordmark span { color: #29A0D7; }
.mk-wordmark:hover { color: #0A2C3E; }
.mk-site-header .wp-block-navigation {
margin-left: auto;
}
.mk-site-header .wp-block-navigation .wp-block-navigation__container {
gap: 26px;
font-size: 14.5px;
font-weight: 500;
}
.mk-site-header .wp-block-navigation-link a {
color: #0A2C3E;
font-size: 14.5px;
font-weight: 500;
padding: 0;
}
.mk-site-header .wp-block-navigation-link a:hover {
color: #16667F;
text-decoration: underline;
text-decoration-color: rgba(41, 160, 215, 0.4);
text-underline-offset: 5px;
}
.mk-nav-cta a,
.mk-site-header .wp-block-navigation-link.mk-nav-cta a {
background: #29A0D7;
color: #FFFFFF !important;
padding: 11px 20px;
border-radius: 999px;
font-weight: 600;
box-shadow: 0 6px 18px rgba(41, 160, 215, 0.32);
}
.mk-site-header .wp-block-navigation-link.mk-nav-cta a:hover {
background: #1E8FC4;
color: #FFFFFF !important;
text-decoration: none;
transform: translateY(-1px);
}
/* ── hero ─────────────────────────────────────────────────────────────────── */
.mk-hero {
max-width: 1240px;
margin: 0 auto;
padding: 64px 28px 20px;
display: grid;
grid-template-columns: 1.02fr 1fr;
gap: 56px;
align-items: center;
}
.mk-hero__badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 14px 7px 10px;
border-radius: 999px;
background: rgba(41, 160, 215, 0.1);
color: #16667F;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
}
.mk-hero__badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #29A0D7;
display: inline-block;
}
.mk-hero__title {
color: #0A2C3E;
font-weight: 400;
text-shadow: none;
font-size: clamp(40px, 4.6vw, 68px);
line-height: 1.04;
letter-spacing: -0.025em;
margin: 22px 0 0;
text-wrap: balance;
}
.mk-hero__title em {
font-style: italic;
color: #29A0D7;
}
.mk-hero__lede {
font-size: 18px;
line-height: 1.6;
color: #4C6C7D;
max-width: 480px;
margin: 22px 0 0;
text-wrap: pretty;
}
.mk-hero__btns {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
.mk-hero__social {
display: flex;
align-items: center;
gap: 14px;
margin-top: 30px;
font-size: 13.5px;
color: #4C6C7D;
line-height: 1.45;
}
.mk-hero__social strong { color: #0A2C3E; }
.mk-hero__avatars { display: flex; }
.mk-hero__avatars img {
width: 38px;
height: 38px;
border-radius: 50%;
border: 2.5px solid #F2F8FB;
object-fit: cover;
display: block;
}
.mk-hero__avatars img + img { margin-left: -12px; }
.mk-hero__figure {
position: relative;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 30px 70px -28px rgba(10, 44, 62, 0.45);
}
.mk-hero__figure img {
width: 100%;
height: 520px;
max-height: 62vh;
object-fit: cover;
display: block;
filter: saturate(0.92) contrast(1.04);
}
.mk-hero__figure::before,
.mk-hero__figure::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.mk-hero__figure::before {
background: linear-gradient(200deg, rgba(41, 160, 215, 0.26) 0%, rgba(10, 44, 62, 0.1) 45%, rgba(10, 44, 62, 0.42) 100%);
mix-blend-mode: multiply;
}
.mk-hero__figure::after {
background: linear-gradient(200deg, rgba(41, 160, 215, 0.14), rgba(41, 160, 215, 0) 60%);
}
.mk-hero__float {
position: absolute;
left: -26px;
bottom: 44px;
background: #FFFFFF;
border-radius: 16px;
padding: 16px 18px;
box-shadow: 0 18px 40px -14px rgba(10, 44, 62, 0.35);
display: flex;
align-items: center;
gap: 14px;
animation: mkFloat 6s ease-in-out infinite;
}
.mk-hero__float-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(41, 160, 215, 0.12);
display: grid;
place-items: center;
color: #16667F;
font-size: 18px;
font-weight: 700;
}
.mk-hero__float-label {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #7E97A6;
font-weight: 600;
}
.mk-hero__float-value {
font-size: 15px;
font-weight: 600;
margin-top: 3px;
}
@keyframes mkFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.mk-hero__float { animation: none; }
}
/* ── trust strip ──────────────────────────────────────────────────────────── */
.mk-tstrip {
max-width: 1240px;
margin: 0 auto;
padding: 40px 28px 0;
}
.mk-tstrip__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(10, 44, 62, 0.1);
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(10, 44, 62, 0.1);
}
.mk-tstrip__cell {
background: #FFFFFF;
padding: 22px 26px;
}
.mk-tstrip__label {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.11em;
color: #7E97A6;
font-weight: 600;
}
.mk-tstrip__value {
font-size: 19px;
font-weight: 600;
margin-top: 6px;
}
/* ── featured tours + tour card ───────────────────────────────────────────── */
.mk-featured {
max-width: 1240px;
margin: 0 auto;
padding: 96px 28px 0;
}
.mk-featured__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.mk-featured__alllink {
font-weight: 600;
font-size: 15px;
color: #16667F;
text-decoration: none;
border-bottom: 1.5px solid rgba(41, 160, 215, 0.4);
padding-bottom: 2px;
}
.mk-featured__alllink:hover { color: #29A0D7; }
.mk-featured__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
padding: 0;
list-style: none;
}
/* tour card — shared by featured grid + Woo blocks (catalog) */
.mk-tourcard {
position: relative;
display: flex;
flex-direction: column;
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(10, 44, 62, 0.03);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mk-tourcard:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px -14px rgba(10, 44, 62, 0.22);
}
.mk-tourcard__link {
display: flex;
flex-direction: column;
flex: 1;
color: #0A2C3E;
text-decoration: none;
}
.mk-tourcard__media {
position: relative;
display: block;
overflow: hidden;
}
.mk-tourcard__media img {
width: 100%;
height: 216px;
object-fit: cover;
display: block;
filter: saturate(0.9) contrast(1.03);
transition: transform 0.35s ease;
}
.mk-tourcard:hover .mk-tourcard__media img { transform: scale(1.04); }
.mk-tourcard__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(190deg, rgba(41, 160, 215, 0.22) 0%, rgba(10, 44, 62, 0) 55%, rgba(10, 44, 62, 0.3) 100%);
mix-blend-mode: multiply;
pointer-events: none;
}
.mk-tourcard__pill {
position: absolute;
top: 14px;
left: 14px;
z-index: 1;
background: rgba(255, 255, 255, 0.94);
color: #0A2C3E;
font-size: 12.5px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
}
.mk-tourcard__body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
flex: 1;
gap: 10px;
}
.mk-tourcard__loc {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #7E97A6;
font-weight: 600;
}
.mk-tourcard__title {
font-family: "Lora", Georgia, serif;
font-size: 23px;
line-height: 1.2;
letter-spacing: -0.012em;
font-weight: 400;
}
.mk-tourcard__excerpt {
font-size: 14.5px;
color: #4C6C7D;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mk-tourcard__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid rgba(10, 44, 62, 0.08);
}
.mk-tourcard__price {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: #0A2C3E;
}
.mk-tourcard__price del {
font-size: 14px;
font-weight: 500;
color: #7E97A6;
}
.mk-tourcard__price-unit {
font-size: 13px;
color: #7E97A6;
margin-left: 4px;
font-weight: 500;
}
.mk-tourcard__guide {
font-size: 14px;
font-weight: 600;
color: #16667F;
}
/* ── how booking works — dark band ────────────────────────────────────────── */
.mk-flowwrap {
margin-top: 104px;
background: #0A2C3E;
color: #EFF7FB;
}
.mk-flowwrap__inner {
max-width: 1240px;
margin: 0 auto;
padding: 92px 28px;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 64px;
align-items: start;
}
.mk-flowwrap__eyebrow {
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.13em;
color: #6FC4E8;
font-weight: 700;
}
.mk-flowwrap__title {
font-size: clamp(30px, 3.1vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 14px 0 0;
color: #EFF7FB;
}
.mk-flowwrap__lede {
font-size: 17px;
line-height: 1.62;
color: #9BB6C4;
margin: 20px 0 0;
max-width: 380px;
text-wrap: pretty;
}
.mk-flowwrap__faqlink {
display: inline-block;
margin-top: 28px;
color: #6FC4E8;
font-weight: 600;
font-size: 15px;
text-decoration: none;
border-bottom: 1.5px solid rgba(111, 196, 232, 0.4);
padding-bottom: 2px;
}
.mk-flowwrap__faqlink:hover { color: #9BD4F0; }
.mk-flow {
display: flex;
flex-direction: column;
gap: 14px;
}
.mk-flow__card {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 22px;
align-items: start;
background: rgba(255, 255, 255, 0.043);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 18px;
padding: 26px 28px;
}
.mk-flow__n {
width: 44px;
height: 44px;
border-radius: 13px;
background: #29A0D7;
color: #FFFFFF;
display: grid;
place-items: center;
font-size: 17px;
font-weight: 700;
}
.mk-flow__title {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
}
.mk-flow__body {
font-size: 15px;
line-height: 1.55;
color: #9BB6C4;
margin-top: 7px;
max-width: 480px;
}
.mk-flow__tag {
font-size: 12.5px;
font-weight: 600;
color: #6FC4E8;
background: rgba(41, 160, 215, 0.14);
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
}
/* ── your hosts ───────────────────────────────────────────────────────────── */
.mk-hosts {
max-width: 1240px;
margin: 0 auto;
padding: 96px 28px 0;
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 56px;
align-items: center;
}
.mk-hosts__eyebrow,
.mk-featured__eyebrow {
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.13em;
color: #29A0D7;
font-weight: 700;
}
.mk-hosts__title,
.mk-featured__title {
font-size: clamp(30px, 3.1vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 14px 0 0;
}
.mk-hosts__lede {
font-size: 17px;
line-height: 1.62;
color: #4C6C7D;
margin: 20px 0 0;
max-width: 400px;
text-wrap: pretty;
}
.mk-hosts__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.mk-host {
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 20px;
padding: 24px;
}
.mk-host__portrait {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.mk-host__namerow {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
}
.mk-host__name { font-size: 20px; font-weight: 600; }
.mk-host__verified {
font-size: 12px;
font-weight: 600;
color: #16667F;
background: rgba(41, 160, 215, 0.12);
padding: 4px 9px;
border-radius: 999px;
}
.mk-host__bio {
font-size: 14.5px;
line-height: 1.55;
color: #4C6C7D;
margin-top: 10px;
}
.mk-host__stats {
display: flex;
gap: 22px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(10, 44, 62, 0.08);
}
.mk-host__stat-label {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #7E97A6;
font-weight: 600;
}
.mk-host__stat-value { font-size: 15px; font-weight: 600; margin-top: 3px; }
/* ── traveller quotes (real approved reviews only — FR-14) ────────────────── */
.mk-quotes {
max-width: 1240px;
margin: 0 auto;
padding: 96px 28px 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.mk-quote {
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 20px;
padding: 28px;
}
.mk-quote__stars {
color: #29A0D7;
font-size: 15px;
letter-spacing: 0.12em;
}
.mk-quote__text {
font-family: "Lora", Georgia, serif;
font-size: 22px;
line-height: 1.3;
margin-top: 16px;
text-wrap: pretty;
}
.mk-quote__author {
font-size: 14px;
color: #7E97A6;
margin-top: 16px;
font-weight: 500;
}
/* ── CTA banner ───────────────────────────────────────────────────────────── */
.mk-banner-wrap {
max-width: 1240px;
margin: 0 auto;
padding: 96px 28px 0;
}
.mk-banner {
border-radius: 26px;
overflow: hidden;
position: relative;
background: #16667F;
}
.mk-banner__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.42;
display: block;
}
.mk-banner__inner {
position: relative;
padding: 76px 56px;
display: grid;
grid-template-columns: 1.1fr auto;
gap: 44px;
align-items: center;
background: linear-gradient(90deg, rgba(10, 44, 62, 0.86) 0%, rgba(10, 44, 62, 0.55) 100%);
}
.mk-banner__title {
font-size: clamp(28px, 2.9vw, 41px);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0;
color: #FFFFFF;
}
.mk-banner__lede {
font-size: 17px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
margin: 16px 0 0;
max-width: 520px;
}
.mk-banner__btns {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 220px;
}
.mk-banner__btns .mk-btn { text-align: center; }
/* ── footer ───────────────────────────────────────────────────────────────── */
.mk-footer {
border-top: 1px solid rgba(10, 44, 62, 0.1);
background: #F2F8FB;
}
.mk-footer__inner {
max-width: 1240px;
margin: 0 auto;
padding: 56px 28px 40px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 48px;
}
.mk-footer__blurb {
font-size: 14.5px;
line-height: 1.6;
color: #4C6C7D;
margin: 16px 0 0;
max-width: 340px;
}
.mk-footer__coltitle {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.11em;
color: #7E97A6;
font-weight: 600;
margin-bottom: 4px;
}
.mk-footer__links {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14.5px;
list-style: none;
margin: 0;
padding: 0;
}
.mk-footer__links a { color: #4C6C7D; text-decoration: none; }
.mk-footer__links a:hover { color: #16667F; }
.mk-footer__bottom {
max-width: 1240px;
margin: 0 auto;
padding: 20px 28px 44px;
border-top: 1px solid rgba(10, 44, 62, 0.08);
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
font-size: 13px;
color: #7E97A6;
}
/* ── legacy component refresh (guides page, product page) ─────────────────── */
.mk-guide {
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 20px;
}
.mk-guide__portrait img {
border-radius: 50%;
object-fit: cover;
}
.mk-guide__verified {
color: #16667F;
background: rgba(41, 160, 215, 0.12);
border-radius: 999px;
padding: 4px 9px;
}
.mk-title__eyebrow { color: #29A0D7; }
/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.mk-flowwrap__inner { grid-template-columns: 1fr; gap: 40px; }
.mk-hosts { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
.mk-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; }
.mk-hero__figure img { height: 340px; max-height: none; }
.mk-hero__float { left: 14px; bottom: 14px; }
.mk-featured__grid,
.mk-hosts__grid,
.mk-quotes { grid-template-columns: 1fr 1fr; }
.mk-banner__inner { grid-template-columns: 1fr; padding: 48px 28px; }
.mk-banner__btns { flex-direction: row; flex-wrap: wrap; min-width: 0; }
.mk-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
.mk-featured__grid,
.mk-hosts__grid,
.mk-quotes { grid-template-columns: 1fr; }
.mk-tstrip__grid { grid-template-columns: 1fr; }
.mk-flow__card { grid-template-columns: 44px 1fr; }
.mk-flow__tag { grid-column: 2; justify-self: start; }
.mk-footer__inner { grid-template-columns: 1fr; }
.mk-hero__btns .mk-btn { width: 100%; text-align: center; }
}
/* ── wpautop neutralizers ──────────────────────────────────────────────────
* Shortcodes inside block templates run before wpautop, which injects
* between lines and wraps stray anchors in . In flex/grid contexts those
* become phantom items (extra gaps). Suppress inside the 1.8.0 components. */
.mk-hero br, .mk-tstrip br, .mk-featured br, .mk-flowwrap br, .mk-hosts br,
.mk-quotes br, .mk-banner-wrap br, .mk-footer__inner br, .mk-footer__bottom br,
.mk-tourcard br { display: none !important; }
.mk-hero p:empty, .mk-featured p:empty, .mk-tstrip p:empty,
.mk-hosts p:empty, .mk-flowwrap p:empty, .mk-banner-wrap p:empty { display: none; }
.mk-featured__head p { margin: 0; }
.mk-quote { margin: 0; }
/* Grid-blowout hardening: fr-track items must be shrinkable (min-width:auto
* lets a long word or fixed-size child inflate the track past the viewport). */
.mk-hosts > div, .mk-hosts__grid > .mk-host, .mk-featured__grid > .mk-tourcard,
.mk-quotes > .mk-quote, .mk-tstrip__grid > .mk-tstrip__cell,
.mk-flowwrap__inner > div, .mk-hero > * { min-width: 0; max-width: 100%; }
.mk-host__bio, .mk-tourcard__excerpt, .mk-quote__text { overflow-wrap: break-word; }
/* ── legacy name-collision overrides ────────────────────────────────────────
* The 1.8.0 homepage reuses two legacy class names whose 1.7.x rules still
* ship in the remapped block above: .mk-footer (24px/14px padding + bold
* links) and .mk-quote (product-page review style: 14px, border-left).
* These outrank them by specificity/order. */
.mk-footer { padding: 0; border-top-color: rgba(10, 44, 62, 0.1); }
.mk-footer__links a { font-weight: 400; }
.mk-quotes .mk-quote blockquote,
.mk-quotes .mk-quote__text {
border: 0;
padding: 0;
margin: 16px 0 0;
font-family: "Lora", Georgia, serif;
font-size: 22px;
line-height: 1.3;
font-weight: 400;
color: #0A2C3E;
text-wrap: pretty;
}
/* ════════════════════════════════════════════════════════════════════════════
* v1.8.1 — Tours list + Tour detail (PDP) per the demo screens
* (#/tours and #/tour-cairang of Downloads/Mekongtodo Website.html).
* Appended after the 1.8.0 homepage layer.
* ════════════════════════════════════════════════════════════════════════════ */
/* ── shared: breadcrumb ───────────────────────────────────────────────────── */
.mk-crumbs {
max-width: 1240px;
margin: 0 auto;
padding: 28px 28px 0;
font-size: 13px;
color: #7E97A6;
font-weight: 500;
}
.mk-crumbs a { color: #7E97A6; text-decoration: none; }
.mk-crumbs a:hover { color: #16667F; }
.mk-crumbs .sep { margin: 0 8px; }
.mk-crumbs .cur { color: #0A2C3E; }
/* ══════════════════════════════════════════════════════════════════════════
* TOURS LIST (/shop)
* ══════════════════════════════════════════════════════════════════════════ */
.mk-tourslist-head {
max-width: 1240px;
margin: 0 auto;
padding: 28px 28px 0;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: end;
}
.mk-tourslist-head h1 {
font-size: clamp(38px, 4.3vw, 62px);
line-height: 1.06;
letter-spacing: -0.025em;
margin: 0;
text-wrap: balance;
}
.mk-tourslist-head h1 em { font-style: italic; color: #29A0D7; }
.mk-tourslist-lede {
font-size: 18px;
line-height: 1.62;
color: #4C6C7D;
max-width: 500px;
margin: 20px 0 0;
text-wrap: pretty;
}
.mk-tourslist-head .mk-tstrip__grid { border: 0; }
.mk-tourslist-filter {
max-width: 1240px;
margin: 0 auto;
padding: 40px 28px 0;
}
.mk-tourslist-filter__bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-bottom: 26px;
border-bottom: 1px solid rgba(10, 44, 62, 0.1);
}
.mk-pill {
font-size: 13.5px;
font-weight: 600;
padding: 9px 16px;
border-radius: 999px;
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.12);
color: #4C6C7D;
cursor: pointer;
font-family: inherit;
line-height: 1.2;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mk-pill:hover { border-color: rgba(41, 160, 215, 0.5); color: #16667F; }
.mk-pill.is-active {
background: #0A2C3E;
border-color: #0A2C3E;
color: #FFFFFF;
}
.mk-tourslist-filter__count { margin-left: auto; font-size: 13.5px; color: #7E97A6; font-weight: 500; }
.mk-tourslist {
max-width: 1240px;
margin: 0 auto;
padding: 0 28px;
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
}
.mk-trow {
display: grid;
grid-template-columns: minmax(260px, 400px) minmax(0, 1fr) 250px;
gap: 32px;
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 22px;
padding: 22px;
box-shadow: 0 2px 4px rgba(10, 44, 62, 0.03);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mk-trow:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -16px rgba(10, 44, 62, 0.2);
}
.mk-trow.is-hidden { display: none; }
.mk-trow__media {
position: relative;
border-radius: 16px;
overflow: hidden;
display: block;
}
.mk-trow__media img {
width: 100%;
height: 258px;
object-fit: cover;
display: block;
filter: saturate(0.9) contrast(1.03);
}
.mk-trow__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(190deg, rgba(41, 160, 215, 0.2) 0%, rgba(10, 44, 62, 0) 55%, rgba(10, 44, 62, 0.3) 100%);
mix-blend-mode: multiply;
pointer-events: none;
}
.mk-trow__pill {
position: absolute;
top: 14px;
left: 14px;
z-index: 1;
background: rgba(255, 255, 255, 0.94);
color: #0A2C3E;
font-size: 12.5px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
}
.mk-trow__body {
display: flex;
flex-direction: column;
padding: 6px 0;
min-width: 0;
}
.mk-trow__loc {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #7E97A6;
font-weight: 600;
}
.mk-trow__title {
font-family: "Lora", Georgia, serif;
font-size: 29px;
line-height: 1.16;
letter-spacing: -0.02em;
margin-top: 10px;
color: #0A2C3E;
display: block;
text-decoration: none;
}
.mk-trow__title:hover { color: #16667F; }
.mk-trow__excerpt {
font-size: 16px;
line-height: 1.6;
color: #4C6C7D;
margin: 12px 0 0;
max-width: 440px;
text-wrap: pretty;
}
.mk-trow__host {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 20px;
font-size: 14.5px;
color: #4C6C7D;
}
.mk-trow__host img {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.mk-trow__host strong { color: #0A2C3E; }
.mk-trow__book {
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
border-left: 1px solid rgba(10, 44, 62, 0.08);
padding-left: 28px;
}
.mk-trow__price {
display: flex;
align-items: baseline;
gap: 5px;
}
.mk-trow__amt {
font-size: 34px;
font-weight: 700;
letter-spacing: -0.02em;
}
.mk-trow__unit { font-size: 13.5px; color: #7E97A6; }
.mk-trow__hold { font-size: 13px; color: #16667F; font-weight: 600; margin-top: 6px; }
.mk-trow__cta {
background: #29A0D7;
color: #FFFFFF;
padding: 14px 22px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-align: center;
text-decoration: none;
box-shadow: 0 8px 20px rgba(41, 160, 215, 0.28);
transition: background 0.15s ease, transform 0.15s ease;
}
.mk-trow__cta:hover { background: #1E8FC4; color: #FFFFFF; transform: translateY(-1px); }
.mk-trow__fineprint { font-size: 12.5px; color: #7E97A6; line-height: 1.45; }
/* flat dark CTA on the tours screen */
.mk-banner--flat .mk-banner { background: #0A2C3E; }
.mk-banner--flat .mk-banner__inner { background: none; padding: 56px; }
/* ══════════════════════════════════════════════════════════════════════════
* TOUR DETAIL (PDP)
* ══════════════════════════════════════════════════════════════════════════ */
/* gallery: 2fr/1fr two-row grid, 440px tall */
.mk-gallery--grid {
position: relative;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
margin-top: 18px;
height: 440px;
max-width: 1240px;
margin-left: auto;
margin-right: auto;
padding: 0 28px;
box-sizing: content-box;
}
.mk-gallery--grid .mk-gallery__cell {
position: relative;
border-radius: 20px;
overflow: hidden;
padding: 0;
border: 0;
background: rgba(41, 160, 215, 0.1);
cursor: pointer;
display: block;
}
.mk-gallery--grid .mk-gallery__cell--hero { grid-row: span 2; }
.mk-gallery--grid .mk-gallery__cell:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.mk-gallery--grid .mk-gallery__cell:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.mk-gallery--grid .mk-gallery__cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.92) contrast(1.04);
}
.mk-gallery--grid .mk-gallery__cell::after {
content: "";
position: absolute;
inset: 0;
background: rgba(41, 160, 215, 0.16);
mix-blend-mode: multiply;
pointer-events: none;
}
.mk-gallery--grid .mk-gallery__cell--hero::after {
background: linear-gradient(190deg, rgba(41, 160, 215, 0.22) 0%, rgba(10, 44, 62, 0) 50%, rgba(10, 44, 62, 0.4) 100%);
}
.mk-gallery__badges {
position: absolute;
left: 22px;
bottom: 22px;
z-index: 2;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mk-gallery__badge {
background: rgba(255, 255, 255, 0.94);
color: #0A2C3E;
font-size: 12.5px;
font-weight: 600;
padding: 7px 13px;
border-radius: 999px;
white-space: nowrap;
}
.mk-gallery__badge--accent {
background: rgba(41, 160, 215, 0.92);
color: #FFFFFF;
}
.mk-gallery__showall {
/* A GRID ITEM pinned to the bottom-right cell — NOT position:absolute.
Absolute + inset:0 with no positioned ancestor stretched the overlay
across the whole gallery, veiling every photo and eating their clicks
(founder report 2026-08-31). Sharing the cell with the last small
photo is the demo pattern (gradient + label over that tile only). */
grid-column: 2;
grid-row: 2;
position: relative;
z-index: 2;
display: grid;
place-items: center;
gap: 6px;
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
background: linear-gradient(rgba(41, 160, 215, 0.16), rgba(10, 44, 62, 0.55));
border: 0;
border-radius: 20px;
cursor: pointer;
}
.mk-gallery--grid .mk-gallery__cell--overflow { position: relative; }
@media (max-width: 900px) {
.mk-gallery--grid { grid-template-columns: 1fr 1fr; height: 340px; }
.mk-gallery--grid .mk-gallery__cell--hero { grid-row: span 2; }
}
/* title block + facts strip */
.mk-pdp-titleblock {
max-width: 1240px;
margin: 0 auto;
padding: 44px 28px 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 372px);
gap: 56px;
align-items: start;
}
.mk-pdp-titleblock__main { min-width: 0; }
.mk-pdp-eyebrow {
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.13em;
color: #29A0D7;
font-weight: 700;
}
.mk-pdp-titleblock h1 {
font-size: clamp(34px, 3.8vw, 54px);
line-height: 1.06;
letter-spacing: -0.025em;
margin: 14px 0 0;
text-wrap: balance;
}
.mk-pdp-lede {
font-size: 18.5px;
line-height: 1.62;
color: #4C6C7D;
margin: 18px 0 0;
max-width: 640px;
text-wrap: pretty;
}
.mk-pdp-desc {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 18px;
max-width: 640px;
}
.mk-pdp-desc p {
font-size: 16.5px;
line-height: 1.65;
color: #4C6C7D;
margin: 0;
text-wrap: pretty;
}
.mk-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1px;
background: rgba(10, 44, 62, 0.1);
border: 1px solid rgba(10, 44, 62, 0.1);
border-radius: 18px;
overflow: hidden;
margin-top: 32px;
max-width: 640px;
}
.mk-facts__cell { background: #FFFFFF; padding: 18px 22px; }
.mk-facts__label {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.11em;
color: #7E97A6;
font-weight: 600;
}
.mk-facts__value { font-size: 16.5px; font-weight: 600; margin-top: 5px; }
/* PDP sections: full-width cards on the same 1240 rail */
.mk-pdp-sections {
max-width: 1240px;
margin: 0 auto;
padding: 0 28px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 372px);
gap: 56px;
align-items: start;
}
.mk-pdp-sections__main { min-width: 0; }
.mk-pdp-section__head .mk-title__eyebrow {
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.13em;
color: #29A0D7;
font-weight: 700;
}
.mk-pdp-section__title {
font-size: clamp(26px, 2.6vw, 36px);
line-height: 1.14;
letter-spacing: -0.02em;
margin: 12px 0 0;
}
.mk-pdp-section {
background: none;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
margin-top: 52px;
}
.mk-pdp-section:first-child { margin-top: 0; }
/* itinerary rows: [108px thumb][pill + title + desc] */
.mk-itin {
list-style: none;
margin: 26px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.mk-itin__stop {
display: grid;
grid-template-columns: 108px minmax(220px, 1fr);
gap: 22px;
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 18px;
padding: 18px;
align-items: center;
}
.mk-itin__media, .mk-itin__media-btn {
position: relative;
border-radius: 12px;
overflow: hidden;
width: 108px;
margin: 0;
padding: 0;
border: 0;
background: rgba(41, 160, 215, 0.1);
cursor: pointer;
display: block;
}
.mk-itin__media img, .mk-itin__media-btn img {
width: 100%;
height: 84px;
object-fit: cover;
display: block;
filter: saturate(0.9);
}
.mk-itin__media::after, .mk-itin__media-btn::after {
content: "";
position: absolute;
inset: 0;
background: rgba(41, 160, 215, 0.16);
mix-blend-mode: multiply;
pointer-events: none;
}
.mk-itin__media-zoom { display: none; }
.mk-itin__body { min-width: 0; }
.mk-itin__n {
display: inline-block;
font-size: 12.5px;
font-weight: 700;
color: #16667F;
background: rgba(41, 160, 215, 0.12);
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
font-family: inherit;
}
.mk-itin__h {
display: inline;
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 0 12px;
vertical-align: middle;
}
.mk-itin__d {
font-size: 15px;
line-height: 1.55;
color: #4C6C7D;
margin: 7px 0 0;
}
.mk-itin__more { display: none; }
/* included / not-included cards */
.mk-pdp-lists {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 44px;
}
.mk-pdp-listcard {
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 20px;
padding: 26px;
}
.mk-pdp-listcard .mk-list__label { font-size: 17px; font-weight: 700; color: #0A2C3E; }
.mk-list { margin-top: 16px; }
.mk-list li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 10px;
font-size: 15px;
line-height: 1.5;
color: #4C6C7D;
margin-bottom: 10px;
}
.mk-list li::before {
content: "✓";
color: #29A0D7;
font-weight: 700;
}
.mk-list--notinc li::before { content: "–"; color: #A8BDC9; }
/* host card */
.mk-pdp-section .mk-host {
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 22px;
padding: 28px;
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: center;
margin-top: 20px;
}
.mk-host__portrait img,
.mk-pdp-section .mk-host__portrait img {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.mk-pdp-section .mk-host__body { flex: 1 1 240px; min-width: 240px; }
.mk-pdp-section .mk-host__name { font-family: "Lora", Georgia, serif; font-size: 27px; letter-spacing: -0.02em; }
.mk-pdp-section .mk-host__bio { font-size: 15.5px; line-height: 1.55; color: #4C6C7D; margin-top: 8px; }
.mk-pdp-section .mk-host__msg {
background: #FFFFFF;
color: #0A2C3E;
padding: 13px 22px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
border: 1px solid rgba(10, 44, 62, 0.14);
white-space: nowrap;
text-decoration: none;
flex-shrink: 0;
}
.mk-pdp-section .mk-host__msg:hover { color: #16667F; border-color: rgba(41, 160, 215, 0.5); }
.mk-pdp-section .mk-guide-stats { margin-top: 10px; }
/* things-to-know: divided white cells, no icons */
.mk-thingsknow {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1px;
background: rgba(10, 44, 62, 0.1);
border: 1px solid rgba(10, 44, 62, 0.1);
border-radius: 18px;
overflow: hidden;
margin-top: 24px;
}
.mk-thingsknow__cell {
background: #FFFFFF;
padding: 24px;
display: grid;
grid-template-columns: 1fr;
align-items: start;
}
.mk-thingsknow__icon { display: none; }
.mk-thingsknow__body b { font-size: 16px; font-weight: 700; }
.mk-thingsknow__body p {
font-size: 15px;
line-height: 1.58;
color: #4C6C7D;
margin: 8px 0 0;
}
.mk-thingsknow__sla { font-size: 13.5px; color: #7E97A6; margin-top: 14px; }
/* related: horizontal mini cards */
.mk-related {
list-style: none;
margin: 26px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.mk-related .mk-tourcard,
.mk-related li.mk-tourcard {
display: grid;
grid-template-columns: 168px minmax(0, 1fr);
gap: 22px;
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 20px;
padding: 18px;
align-items: center;
box-shadow: none;
}
.mk-related .mk-tourcard__media { border-radius: 14px; }
.mk-related .mk-tourcard__media img { height: 124px; border-radius: 14px; }
.mk-related .mk-tourcard__pill { display: none; }
.mk-related .mk-tourcard__title { font-size: 21px; letter-spacing: -0.015em; margin-top: 8px; }
.mk-related .mk-tourcard__excerpt { display: none; }
.mk-related .mk-tourcard__loc { margin-top: 0; }
.mk-related .mk-tourcard__foot {
border-top: 0;
padding-top: 12px;
gap: 10px;
}
.mk-related .mk-tourcard__price { font-size: 19px; }
.mk-related .mk-tourcard__price-unit,
.mk-related .mk-tourcard__guide { font-size: 13px; }
@media (max-width: 560px) {
.mk-related .mk-tourcard, .mk-related li.mk-tourcard { grid-template-columns: 1fr; }
}
/* ── booking card (aside) ─────────────────────────────────────────────────── */
.mk-tour__aside {
position: sticky;
top: 88px;
align-self: start;
max-height: calc(100vh - 108px);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.mk-tour__grid { display: block; background: none; padding: 0; max-width: none; }
.mk-cta {
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.11);
border-radius: 22px;
padding: 26px;
box-shadow: 0 24px 48px -28px rgba(10, 44, 62, 0.35);
position: static;
max-width: none;
width: auto;
visibility: visible;
transform: none;
}
.mk-cta__head { display: none; }
.mk-cta__top {
display: flex;
align-items: baseline;
gap: 6px;
border: 0;
padding: 0;
}
.mk-cta__top .l {
font-family: inherit;
font-size: 38px;
font-weight: 700;
letter-spacing: -0.025em;
color: #0A2C3E;
}
.mk-cta__top .l::after { content: ""; }
.mk-cta__top .r {
font-size: 14px;
color: #7E97A6;
font-weight: 400;
background: none;
padding: 0;
border-radius: 0;
}
.mk-cta-hold {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
background: rgba(41, 160, 215, 0.1);
border-radius: 12px;
padding: 11px 14px;
}
.mk-cta-hold__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #29A0D7;
display: inline-block;
flex-shrink: 0;
}
.mk-cta-hold__text {
font-size: 13.5px;
color: #16667F;
font-weight: 600;
line-height: 1.4;
}
.mk-cta__form { margin-top: 20px; }
.mk-qty {
display: flex;
flex-direction: column;
gap: 8px;
}
.mk-qty__label, .mk-prefdate__label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #7E97A6;
font-weight: 600;
margin: 0 0 8px;
display: block;
}
.mk-qty__row {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(10, 44, 62, 0.14);
border-radius: 12px;
padding: 9px 12px;
}
.mk-qty__btn {
width: 34px;
height: 34px;
border-radius: 9px;
border: 1px solid rgba(10, 44, 62, 0.14);
background: #FFFFFF;
color: #0A2C3E;
font-size: 18px;
font-family: inherit;
cursor: pointer;
line-height: 1;
}
.mk-qty__btn:hover { border-color: rgba(41, 160, 215, 0.5); color: #16667F; }
.mk-qty__val { font-size: 16px; font-weight: 600; }
.mk-cta__form > input[type="number"] { display: none; }
.mk-prefdate { margin-top: 14px; }
.mk-prefdate__input,
.mk-cta .mk-prefdate input[type="date"] {
border: 1px solid rgba(10, 44, 62, 0.14);
border-radius: 12px;
padding: 13px 14px;
font-size: 15px;
color: #4C6C7D;
width: 100%;
box-sizing: border-box;
background: #FFFFFF;
font-family: inherit;
}
.mk-prefdate__hint { font-size: 12.5px; color: #7E97A6; margin-top: 6px; display: block; }
.mk-cta-total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(10, 44, 62, 0.09);
}
.mk-cta-total__l { font-size: 14.5px; color: #4C6C7D; }
.mk-cta-total__r { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.mk-cta__btn {
display: block;
background: #29A0D7;
color: #FFFFFF;
padding: 16px 24px;
border-radius: 999px;
font-weight: 600;
font-size: 16px;
text-align: center;
margin-top: 14px;
box-shadow: 0 10px 24px rgba(41, 160, 215, 0.32);
border: 0;
cursor: pointer;
width: 100%;
font-family: inherit;
justify-content: center;
}
.mk-cta__btn:hover { background: #1E8FC4; color: #FFFFFF; }
.mk-cta__note {
font-size: 13px;
line-height: 1.5;
color: #7E97A6;
margin-top: 12px;
border: 0;
padding: 0;
background: none;
}
.mk-cta-questions {
background: #0A2C3E;
color: #EFF7FB;
border-radius: 22px;
padding: 24px;
}
.mk-cta-questions__label {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.11em;
color: #6FC4E8;
font-weight: 600;
}
.mk-cta-questions__text {
font-size: 15.5px;
line-height: 1.55;
color: #9BB6C4;
margin-top: 10px;
}
.mk-cta-questions__btn {
display: block;
margin-top: 16px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #FFFFFF;
padding: 13px 20px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-align: center;
text-decoration: none;
}
.mk-cta-questions__btn:hover { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; }
/* mobile: single column; booking card stays inline (sheet pattern retired) */
@media (max-width: 980px) {
.mk-tourslist-head { grid-template-columns: 1fr; gap: 32px; }
.mk-trow { grid-template-columns: 1fr; }
.mk-trow__media img { height: 220px; }
.mk-trow__book { border-left: 0; padding-left: 0; border-top: 1px solid rgba(10, 44, 62, 0.08); padding-top: 20px; }
.mk-pdp-titleblock, .mk-pdp-sections { grid-template-columns: 1fr; }
.mk-tour__aside { position: static; max-height: none; overflow: visible; }
.mk-cta-bar, .mk-cta-scrim { display: none !important; }
}
/* ── v1.8.2 header layout hardening ────────────────────────────────────────
* WooCommerce auto-injects account + mini-cart blocks into block-theme
* headers, and generated group-layout CSS can put margin:auto on every
* child — which pushed the wordmark off the left edge. Reset margins on
* the inner rail, re-anchor the nav, keep the cart (travelers need it),
* hide the account icon (old design did the same — accounts aren't a v1
* surface). */
/* 1.9.3: WP layout styles give injected blocks (nav, mini-cart)
* margin-top:24px — flex centering then centers box+margin, pushing nav/cart
* 12px below the wordmark. Reset vertical margins on the inner rail too. */
.mk-site-header__inner > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.mk-site-header__inner > * { margin-left: 0 !important; margin-right: 0 !important; }
.mk-site-header__inner > .wp-block-navigation,
.mk-site-header__inner > nav { margin-left: auto !important; }
.mk-site-header .wp-block-woocommerce-customer-account { display: none !important; }
.mk-site-header .wc-block-mini-cart { margin-left: 14px !important; flex-shrink: 0; }
.mk-site-header .wc-block-mini-cart .wc-block-mini-cart__button {
background: transparent;
border: 0;
padding: 6px;
border-radius: 999px;
color: #0A2C3E;
}
.mk-site-header .wc-block-mini-cart .wc-block-mini-cart__button:hover { color: #16667F; }
.mk-site-header .wc-block-mini-cart .wc-block-mini-cart__amount { display: none; }
/* ── v1.8.2 PDP body restructure ────────────────────────────────────────────
* One grid from the H1 down: content column + sticky booking aside TOP-ALIGNED
* with the title (demo layout), replacing the old two stacked wrappers.
* Also: unhook main.mk-tour's legacy 1200px frame (demo rail is 1240) and let
* grid cells shrink so the 440px gallery actually clamps its images. */
main.mk-tour { max-width: none; padding: 0; }
.mk-pdp-body {
max-width: 1240px;
margin: 0 auto;
padding: 44px 28px 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 372px);
gap: 56px;
align-items: start;
}
.mk-pdp-body__main { min-width: 0; }
.mk-pdp-related {
max-width: 1240px;
margin: 0 auto;
padding: 88px 28px 0;
}
.mk-gallery--grid { box-sizing: border-box; width: 100%; max-width: 1240px; }
.mk-gallery--grid .mk-gallery__cell { min-height: 0; min-width: 0; }
/* legacy wrappers retired — neutralize their paddings if they ever reappear */
.mk-pdp-titleblock, .mk-pdp-sections { padding: 0; display: block; }
@media (max-width: 980px) {
.mk-pdp-body { grid-template-columns: 1fr; gap: 40px; }
}
/* Buttons ignore min-height:0 clamping (intrinsic sizing) — fill the cell
* with the image absolutely instead; the cell is position:relative + clipped. */
.mk-gallery--grid .mk-gallery__cell img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Legacy 1.7.x pinned .mk-gallery__cell to aspect-ratio 4/3 — with the
* 1.8.x 2fr track the ratio sets height=614px and blows past the 440px grid.
* The 1.8.x grid sizes cells by track; kill the ratio. */
.mk-gallery--grid .mk-gallery__cell,
.mk-gallery--grid .mk-gallery__cell--hero,
.mk-gallery--grid .mk-gallery__cell--overflow { aspect-ratio: auto; }
.mk-gallery--grid .mk-gallery__cell:not(.mk-gallery__cell--hero) { aspect-ratio: auto; }
/* ── v1.8.4 mobile PDP un-break ─────────────────────────────────────────────
* Two legacy 1.7.x mobile rules beat the 1.8.x base by specificity and
* gutted the tour page on viewports ≤881px:
* 1) .mk-tour__aside .mk-cta became a HIDDEN fixed bottom-sheet
* (visibility:hidden + translateY(100%)) — the booking card vanished.
* 2) @media ≤781px forced the gallery to ONE full-width image and hid the
* small cells — instead of the 2×2 mosaic.
* Overrides below match the legacy specificity INSIDE the same media widths. */
@media (max-width: 881px) {
.mk-tour__aside .mk-cta {
position: static !important;
left: auto; right: auto; bottom: auto; top: auto;
transform: none !important;
visibility: visible !important;
z-index: auto;
border-radius: 22px;
max-height: none;
box-shadow: 0 24px 48px -28px rgba(10, 44, 62, 0.35);
padding: 26px;
}
}
@media (max-width: 781px) {
.mk-gallery--grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: 1fr 1fr !important; height: 300px; }
.mk-gallery--grid .mk-gallery__cell--hero { grid-row: span 2 !important; aspect-ratio: auto !important; }
.mk-gallery--grid .mk-gallery__cell:not(.mk-gallery__cell--hero) { display: block !important; aspect-ratio: auto !important; }
}
/* ════════════════════════════════════════════════════════════════════════════
* v1.9.1 — desktop-first breakpoints (founder feedback: "bể nát" at ~868px)
*
* The reference mockup has ZERO responsive rules — at 868px it still shows
* the full 2-column layout. Our 980px collapse switched to a 1-column
* mobile stack hundreds of pixels before the demo would, so a laptop-width
* window looked nothing like the reference. Shift the collapse points down
* to match the mockup's effective floor (≈760px); below that, stack.
* ════════════════════════════════════════════════════════════════════════════ */
/* PDP: keep content + sticky booking aside side-by-side down to 760px */
@media (max-width: 980px) {
.mk-pdp-body { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: 28px; }
.mk-tour__aside { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 520px) {
.mk-pdp-body { grid-template-columns: 1fr; gap: 40px; }
.mk-pdp-related { padding-top: 64px; }
}
/* Home hero: two columns until 760px (was 900) */
@media (max-width: 900px) and (min-width: 521px) {
.mk-hero { grid-template-columns: 1.02fr 1fr; gap: 28px; }
.mk-hero__figure img { height: 420px; max-height: none; }
}
/* Hosts: side-by-side until 900px (was 1024) */
@media (max-width: 1024px) and (min-width: 901px) {
.mk-hosts { grid-template-columns: 1fr 1.25fr; gap: 40px; }
}
/* Tours list rows: keep the desktop 3-zone row until 1020px, then a 2-zone
* variant (image | body, booking strip under the body) instead of full stack */
@media (max-width: 1020px) and (min-width: 521px) {
.mk-trow { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); }
.mk-trow__media img { height: 220px; }
.mk-trow__book {
grid-column: 1 / -1;
border-left: 0;
padding-left: 0;
border-top: 1px solid rgba(10, 44, 62, 0.08);
padding-top: 18px;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
}
@media (max-width: 520px) {
.mk-trow { grid-template-columns: 1fr; }
.mk-trow__media img { height: 200px; }
.mk-trow__book { flex-direction: column; align-items: stretch; }
}
/* hosts section keeps the demo's side-by-side until 760px too */
@media (max-width: 1024px) {
.mk-hosts { grid-template-columns: 1fr 1.25fr; gap: 40px; }
}
@media (max-width: 520px) {
.mk-hosts { grid-template-columns: 1fr; gap: 32px; }
}
/* ── 1.9.4: admin-bar overlap fix ────────────────────────────────────────────
* The founder browses LOGGED IN: WP's fixed #wpadminbar (z 99999) sits on top
* of the sticky header (z 50, top 0) once the page scrolls — the wordmark and
* the nav disappear behind the black bar. Shift the sticky offsets by the bar
* height. ≤600px the admin bar becomes position:absolute (scrolls away), so
* the header returns to top 0 there.
*/
body.admin-bar .mk-site-header { top: 32px; }
body.admin-bar .mk-tour__aside { top: 120px; }
@media (max-width: 600px) {
body.admin-bar .mk-site-header { top: 46px; }
body.admin-bar .mk-tour__aside { top: 0; }
}
/* ── 1.9.6: itinerary as a TripAdvisor-style vertical timeline ──────────────
* Founder asked for the itinerary kept in the style of the TA product page:
* a dot + vertical rule rail, a fixed time column, and plain text rows.
* The stop images live in the "See details" modal (data-mk-itin-open), the
* list itself stays text-first. The old .mk-itin card rows are retired. */
.mk-timeline {
list-style: none;
margin: 26px 0 0;
padding: 0 0 0 6px;
position: relative;
max-width: 640px;
}
.mk-timeline::before {
content: "";
position: absolute;
left: 10px;
top: 14px;
bottom: 14px;
width: 2px;
background: rgba(10, 44, 62, 0.12);
border-radius: 2px;
}
.mk-tl {
display: grid;
grid-template-columns: 20px 88px minmax(0, 1fr);
gap: 0 16px;
padding: 13px 0;
position: relative;
}
.mk-tl__rail { display: flex; justify-content: center; }
.mk-tl__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #29A0D7;
box-shadow: 0 0 0 3px rgba(41, 160, 215, 0.18);
margin-top: 7px;
position: relative;
z-index: 1;
}
.mk-tl__time {
font-size: 13px;
font-weight: 700;
color: #16667F;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
margin-top: 4px;
white-space: nowrap;
}
.mk-tl__time--num { color: #7E97A6; }
.mk-tl__h {
font-size: 16.5px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
}
.mk-tl__d {
font-size: 15px;
line-height: 1.55;
color: #4C6C7D;
margin: 5px 0 0;
text-wrap: pretty;
}
.mk-tl__open {
background: none;
border: 0;
padding: 6px 0 0;
color: #16667F;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.mk-tl__open:hover { color: #29A0D7; }
@media (max-width: 640px) {
.mk-tl { grid-template-columns: 20px minmax(0, 1fr); }
.mk-tl__time { grid-column: 2; grid-row: 1; margin-top: 0; }
.mk-tl__body { grid-column: 2; grid-row: 2; }
}
/* ── 1.9.7: portrait/tall images no longer stretch surfaces ────────────────
* Founder report: a 1045x1568 photo made the layout look shattered —
* "nó dài quá". Any image rendered at natural aspect (width:100% +
* height:auto) becomes a 1000-1400px tower inside a ~790px dialog.
* Clamp every content-driven image: itinerary modal ≤56vh, description
* images ≤560px, both letterboxed + centered via contain. */
.mk-itinmodal__media img {
max-height: 56vh;
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
margin: 0 auto;
}
.mk-pdp-desc img {
max-height: 560px;
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
margin: 12px auto;
border-radius: 12px;
}
/* ── 1.9.8: itinerary in the full TripAdvisor pattern ──────────────────────
* Matches the TA product-page structure: "Itinerary" heading + stop count,
* endpoint rows (You'll start/end at ), NUMBERED circular
* markers on a light 2px rail, per-stop meta line ("Stop: from 5:00 AM"),
* underlined "See details". The previous time-column variant is retired. */
.mk-timeline__head { display: flex; align-items: baseline; gap: 12px; }
.mk-timeline__count { font-size: 14px; color: #7E97A6; font-weight: 500; }
.mk-timeline {
position: relative;
margin: 10px 0 0;
padding: 0;
max-width: 680px;
}
.mk-timeline::before {
content: "";
position: absolute;
left: 15px;
top: 16px;
bottom: 16px;
width: 2px;
background: #D9E4EC;
border-radius: 2px;
}
.mk-timeline__stops { list-style: none; margin: 0; padding: 0; }
.mk-tl {
position: relative;
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
column-gap: 16px;
padding-bottom: 26px;
}
.mk-tl__marker { position: relative; z-index: 1; }
.mk-tl__marker--num {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.25);
color: #0A2C3E;
font-size: 14px;
font-weight: 700;
box-shadow: 0 1px 3px rgba(10, 44, 62, 0.12);
}
.mk-tl__marker--endpoint {
display: block;
width: 12px;
height: 12px;
margin: 10px 0 0 10px;
border-radius: 50%;
background: #0A2C3E;
border: 2px solid #F2F8FB;
box-shadow: 0 0 0 2px rgba(10, 44, 62, 0.25);
}
.mk-tl__body { min-width: 0; padding-top: 3px; }
.mk-tl__eyebrow {
display: block;
font-size: 14px;
font-weight: 600;
color: #7E97A6;
margin-bottom: 3px;
}
.mk-tl__h {
font-family: inherit;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
color: #0A2C3E;
}
.mk-tl__meta {
margin: 4px 0 0;
font-size: 14px;
color: #7E97A6;
}
.mk-tl__d {
margin: 6px 0 0;
font-size: 15px;
line-height: 1.55;
color: #4C6C7D;
text-wrap: pretty;
}
.mk-tl__open {
margin-top: 10px;
padding: 0;
border: 0;
background: none;
color: #16667F;
font-size: 14px;
font-weight: 600;
font-family: inherit;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.mk-tl__open:hover { color: #29A0D7; }
/* retire the 1.9.6 time-column layout rules */
.mk-tl__rail, .mk-tl__dot, .mk-tl__time { display: none; }
@media (max-width: 640px) {
.mk-tl { grid-template-columns: 32px minmax(0, 1fr); }
}
/* ── 1.9.9: itinerary as Airbnb's "What you'll do" rows ────────────────────
* Per the founder's reference (airbnb.com/experiences/522199): each stop =
* a photo LEFT (~40%, rounded 8px) beside title + description — no timeline
* rail, no numbers, no pills, plain white background, generous spacing.
* The founder's per-stop time renders as a small muted line above the
* title (Airbnb shows none; keeping the data readable). Clicking the photo
* still opens the detail modal. */
.mk-ab__head { display: flex; align-items: baseline; gap: 12px; }
.mk-ab__count { font-size: 14px; color: #7E97A6; font-weight: 500; }
.mk-ab {
list-style: none;
margin: 28px 0 0;
padding: 0;
max-width: 720px;
display: flex;
flex-direction: column;
gap: 36px;
}
.mk-ab__row {
display: grid;
grid-template-columns: minmax(200px, 40%) minmax(0, 1fr);
gap: 28px;
align-items: center;
}
.mk-ab__media {
border: 0;
padding: 0;
margin: 0;
background: none;
display: block;
width: 100%;
border-radius: 8px;
overflow: hidden;
cursor: zoom-in;
}
.mk-ab__media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
border-radius: 8px;
}
.mk-ab__body { min-width: 0; }
.mk-ab__time {
display: block;
font-size: 13px;
font-weight: 600;
color: #7E97A6;
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
}
.mk-ab__h {
font-family: inherit;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
color: #0A2C3E;
}
.mk-ab__d {
margin: 8px 0 0;
font-size: 15.5px;
line-height: 1.6;
color: #4C6C7D;
text-wrap: pretty;
}
@media (max-width: 640px) {
.mk-ab__row { grid-template-columns: 1fr; gap: 14px; }
.mk-ab { gap: 28px; }
}
/* ── 1.9.10: itinerary modal = Airbnb photo viewer ─────────────────────────
* Founder: "bấm vào nó có 1 cái gallery nằm dọc theo tấm ảnh, và hỗ trợ
* vuốt". Dark viewer, vertical thumbnail filmstrip beside the photo
* (active = accent ring), swipe/drag to page (pointer events in the part's
* JS, touch-action keeps vertical scroll native). Mobile hides the rail. */
.mk-itinmodal { background: rgba(8, 20, 28, 0.96); padding: 20px; }
.mk-itinmodal__card {
background: none;
box-shadow: none;
border-radius: 0;
max-width: min(1040px, 96vw);
max-height: 92vh;
overflow: visible;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 18px;
}
.mk-itinmodal__rail {
display: flex !important; /* was display:none in the 1.9 core */
flex-direction: column;
gap: 8px;
overflow-y: auto;
padding: 4px;
align-self: center;
max-height: 84vh;
scrollbar-width: thin;
}
.mk-itinmodal__thumb {
width: 72px;
height: 72px;
border: 0;
padding: 0;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
opacity: 0.55;
background: rgba(41, 160, 215, 0.12);
transition: opacity 0.15s ease;
flex: 0 0 auto;
}
.mk-itinmodal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-itinmodal__thumb:hover { opacity: 0.85; }
.mk-itinmodal__thumb.is-active { opacity: 1; outline: 2px solid #29A0D7; outline-offset: 2px; }
.mk-itinmodal__thumb--noimg { color: #9BB6C4; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.mk-itinmodal__stage { display: flex; flex-direction: column; min-width: 0; overflow: visible; }
.mk-itinmodal__media {
margin: 0;
position: relative;
align-self: center;
width: 100%;
touch-action: pan-y;
cursor: grab;
}
.mk-itinmodal__media:active { cursor: grabbing; }
.mk-itinmodal__media img {
max-height: 66vh;
width: auto;
max-width: 100%;
object-fit: contain;
border-radius: 12px;
margin: 0 auto;
display: block;
}
.mk-itinmodal__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #FFFFFF;
display: grid;
place-items: center;
cursor: pointer;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.mk-itinmodal__prev { left: 10px; }
.mk-itinmodal__next { right: 10px; }
.mk-itinmodal__body { padding: 14px 4px 0; color: #FFFFFF; }
.mk-itinmodal__n { color: #6FC4E8; background: rgba(41, 160, 215, 0.18); }
.mk-itinmodal__h { color: #FFFFFF; font-size: 19px; }
.mk-itinmodal__close { color: #FFFFFF; background: none; border: 0; cursor: pointer; padding: 6px; }
.mk-itinmodal__d { color: #9BB6C4; margin-top: 8px; font-size: 15px; line-height: 1.6; }
@media (max-width: 700px) {
.mk-itinmodal__card { grid-template-columns: 1fr; }
.mk-itinmodal__rail { display: none !important; }
.mk-itinmodal__media img { max-height: 56vh; }
.mk-itinmodal { padding: 12px; }
}
/* ════════════════════════════════════════════════════════════════════════════
* v1.10.0 — tour detail reskinned to the Airbnb Experiences layout
* (founder ref: airbnb.com/experiences/522199). Scoped to the PDP via
* body.mk-tour-detail where it fights earlier rules.
* ════════════════════════════════════════════════════════════════════════════ */
/* PDP typography → Airbnb: bold sans headings (Lora stays on home/shop) */
.mk-tour-detail h1,
.mk-tour-detail .mk-pdp-section__title,
.mk-tour-detail .mk-ab__h {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
.mk-tour-detail h1 { font-weight: 700; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; line-height: 1.15; }
.mk-tour-detail .mk-pdp-section__title { font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
/* ── photo carousel ─────────────────────────────────────────────────────── */
.mk-carousel {
position: relative;
max-width: 1240px;
margin: 14px auto 0;
padding: 0 28px;
}
.mk-carousel__stage {
display: block;
width: 100%;
padding: 0;
border: 0;
background: rgba(41, 160, 215, 0.1);
border-radius: 16px;
overflow: hidden;
cursor: zoom-in;
}
.mk-carousel__stage img {
width: 100%;
aspect-ratio: 16 / 8;
max-height: 500px;
object-fit: cover;
display: block;
}
.mk-carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 38px;
height: 38px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.08);
color: #0A2C3E;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(10, 44, 62, 0.16);
}
.mk-carousel__nav:hover { color: #16667F; }
.mk-carousel__prev { left: 40px; }
.mk-carousel__next { right: 40px; }
.mk-carousel__counter {
position: absolute;
right: 44px;
bottom: 16px;
z-index: 2;
background: rgba(10, 44, 62, 0.78);
color: #FFFFFF;
font-size: 12.5px;
font-weight: 600;
padding: 5px 11px;
border-radius: 999px;
}
@media (max-width: 760px) {
.mk-carousel { padding: 0 14px; }
.mk-carousel__stage img { aspect-ratio: 4 / 3; max-height: none; }
.mk-carousel__prev { left: 22px; }
.mk-carousel__next { right: 22px; }
}
/* ── title block ────────────────────────────────────────────────────────── */
.mk-abnb-title {
max-width: 1240px;
margin: 0 auto;
padding: 22px 28px 6px;
}
.mk-abnb-title__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 14.5px;
color: #4C6C7D;
margin-top: 8px;
}
.mk-abnb-title__meta .dot { color: #9FB8C7; }
.mk-abnb-title__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mk-abnb-chip {
font-size: 13px;
font-weight: 500;
color: #0A2C3E;
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.14);
padding: 7px 14px;
border-radius: 999px;
}
/* ── sections rhythm (Airbnb: whitespace, no cards) ─────────────────────── */
.mk-tour-detail .mk-pdp-section { margin-top: 48px; }
.mk-ab__intro { margin-top: 18px; max-width: 680px; color: #4C6C7D; font-size: 15.5px; line-height: 1.65; }
.mk-ab__intro p { margin: 0 0 14px; }
.mk-ab { margin-top: 10px; }
/* meet point */
.mk-meetpoint { display: flex; gap: 16px; margin-top: 14px; align-items: flex-start; }
.mk-meetpoint__pin {
width: 44px; height: 44px; border-radius: 50%;
background: #FFFFFF; border: 1px solid rgba(10, 44, 62, 0.12);
display: grid; place-items: center; color: #16667F; flex-shrink: 0;
}
.mk-meetpoint__body b { font-size: 15.5px; }
.mk-meetpoint__loc { margin: 4px 0 0; font-size: 15px; color: #4C6C7D; }
.mk-meetpoint__note { margin: 4px 0 0; font-size: 13.5px; color: #7E97A6; }
/* host card (About me) — Airbnb row: round portrait + name + bio */
.mk-tour-detail .mk-pdp-section .mk-host {
background: none;
border: 0;
border-radius: 0;
padding: 6px 0 0;
box-shadow: none;
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
margin-top: 10px;
}
.mk-tour-detail .mk-pdp-section .mk-host__portrait img { width: 88px; height: 88px; border-radius: 50%; }
.mk-tour-detail .mk-pdp-section .mk-host__name { font-family: inherit; font-size: 20px; font-weight: 700; }
.mk-tour-detail .mk-pdp-section .mk-host__bio { font-size: 15px; color: #4C6C7D; max-width: 520px; }
/* things-to-know grid incl. included lists */
.mk-thingsknow { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 16px; }
.mk-thingsknow__cell { padding: 20px; }
.mk-thingsknow__body b { font-size: 15px; }
.mk-thingsknow__body p { font-size: 14px; margin-top: 6px; }
/* related: Airbnb horizontal cards */
.mk-related { grid-template-columns: 1fr; max-width: 640px; }
.mk-tour-detail .mk-related .mk-tourcard,
.mk-tour-detail .mk-related li.mk-tourcard {
grid-template-columns: 108px minmax(0, 1fr);
gap: 18px;
border: 0;
padding: 0;
background: none;
box-shadow: none;
}
.mk-tour-detail .mk-related .mk-tourcard__media img { height: 88px; border-radius: 12px; }
.mk-tour-detail .mk-related .mk-tourcard__title { font-family: inherit; font-size: 15.5px; font-weight: 600; margin-top: 0; }
.mk-tour-detail .mk-related .mk-tourcard__loc { font-size: 11.5px; }
.mk-tour-detail .mk-related .mk-tourcard__foot { padding-top: 4px; border-top: 0; }
.mk-tour-detail .mk-related .mk-tourcard__price { font-size: 15.5px; }
.mk-related .mk-tourcard:hover { transform: none; box-shadow: none; }
/* ── booking card — Airbnb widget ───────────────────────────────────────── */
.mk-tour__aside { top: 88px; }
.mk-tour-detail .mk-cta {
border: 1px solid rgba(10, 44, 62, 0.1);
border-radius: 16px;
box-shadow: 0 6px 24px -12px rgba(10, 44, 62, 0.25);
padding: 24px;
}
.mk-cta__top .l { font-size: 24px; font-weight: 700; }
.mk-cta__top .r { font-size: 14px; }
.mk-cta-hold { border-radius: 10px; padding: 9px 12px; }
.mk-cta__btn {
background: #0A2C3E;
border-radius: 12px;
box-shadow: none;
padding: 15px 24px;
}
.mk-cta__btn:hover { background: #07293B; color: #FFFFFF; }
.mk-cta__note { font-size: 12.5px; text-align: center; }
.mk-cta-questions { border-radius: 16px; }
@media (max-width: 980px) { .mk-tour__aside { top: 0; } }
/* ── 1.10.1: port the last legacy component styles the PDP still uses ──────
* Founder paste showed "Tenure11 yrs LangEN, VI" run together — the host
* stats + verified pill + message button were legacy-era classes never
* carried into the v2 sheet (the PDP no longer loads the legacy file).
* Also: related-card images collapsed to alt text when the media span had
* no explicit min size under a narrow grid — pin the media box. */
.mk-guide-stats {
display: flex;
flex-wrap: wrap;
gap: 22px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(10, 44, 62, 0.08);
}
.mk-guide-stats__item { font-size: 12px; color: #7E97A6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.mk-guide-stats__item b {
display: block;
font-size: 15px;
color: #0A2C3E;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
margin-top: 3px;
}
.mk-guide__verified {
font-size: 12px;
font-weight: 600;
color: #16667F;
background: rgba(41, 160, 215, 0.12);
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.mk-host__msg {
display: inline-block;
margin-top: 14px;
background: #0A2C3E;
color: #FFFFFF;
padding: 12px 20px;
border-radius: 12px;
font-weight: 600;
font-size: 14.5px;
text-decoration: none;
}
.mk-host__msg:hover { background: #16667F; color: #FFFFFF; }
.mk-lightbox__count { font-variant-numeric: tabular-nums; }
.mk-abnb-title__main { min-width: 0; }
/* related-card media box: explicit size so lazy images can't collapse the
grid cell to zero (alt-text blowout on slow loads) */
.mk-related .mk-tourcard__media {
min-width: 108px;
min-height: 88px;
border-radius: 12px;
overflow: hidden;
background: rgba(41, 160, 215, 0.1);
}
.mk-related .mk-tourcard__media img { width: 108px; height: 88px; object-fit: cover; flex: none; }
/* ── 1.10.2: related cards — grid the LINK, not the li ─────────────────────
* .mk-tourcard's only child is (flex COLUMN
* from the 1.8.0 layer). Putting the li in a 2-col grid squeezed that whole
* link into the 108px column → text stacked into 500px towers. Make the
* LINK the [photo | body] grid; the li stays a plain row. */
.mk-related .mk-tourcard { display: block; }
.mk-related .mk-tourcard__link {
display: grid;
grid-template-columns: 108px minmax(0, 1fr);
gap: 18px;
align-items: center;
}
/* the 1.8.0 layer rule ".mk-related li.mk-tourcard { display:grid }"
(0,2,1) outranked the reset above — kill it at its own specificity */
.mk-related li.mk-tourcard,
.mk-tour-detail .mk-related .mk-tourcard,
.mk-tour-detail .mk-related li.mk-tourcard {
display: block;
grid-template-columns: none;
}
.mk-related .mk-tourcard__link {
grid-template-columns: 108px minmax(0, 1fr) !important;
}
/* ── 1.10.3: carousel drag-follow swipe ─────────────────────────────────────
* touch-action: pan-y hands horizontal pans to the pointer handler while
* vertical page scroll stays native; the photo translates with the finger
* (no transition mid-drag), springs back via transition on release. */
.mk-carousel { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mk-carousel__stage img { transition: transform 0.25s ease; will-change: transform; }
.mk-carousel.is-dragging,
.mk-carousel.is-dragging .mk-carousel__stage img { transition: none; }
/* 1.10.4: "Message host" anchor — the footer contact id is restored in
* footer.html. NOTE: do NOT add `html { scroll-behavior: smooth }` here:
* combined with the `overflow-x: clip` root guard it silently kills ALL
* programmatic scrolling (scrollTo/scrollIntoView/anchor jumps) on Chromium
* — verified by toggling each property live. Native instant jumps are fine.
*/
/* ── 1.10.4 (2): chat FAB panel — style the REAL widget classes ─────────────
* The floating widget renders .mk-chat-panel/.mk-chat-panel__channel* and a
* .mk-chat-fab__badge; the 1.9.0 core styled an older structure, so on v2
* surfaces the panel opened unstyled and the badge floated loose. */
.mk-chat-fab__badge {
position: absolute;
top: -3px;
right: -3px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: #E0294B;
color: #FFFFFF;
font-size: 10.5px;
font-weight: 700;
display: grid;
place-items: center;
border: 2px solid #F2F8FB;
box-sizing: content-box;
}
.mk-chat-panel {
position: fixed;
right: 18px;
bottom: 86px;
z-index: 9991;
width: min(320px, calc(100vw - 36px));
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.12);
border-radius: 16px;
padding: 16px;
box-shadow: 0 24px 56px -20px rgba(10, 44, 62, 0.45);
}
.mk-chat-panel[hidden] { display: none; }
.mk-chat-panel__title {
margin: 0 0 12px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #7E97A6;
}
.mk-chat-panel__channel {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 12px;
border: 1px solid rgba(10, 44, 62, 0.1);
border-radius: 12px;
margin-bottom: 8px;
background: #FFFFFF;
color: #0A2C3E;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: border-color 0.15s ease;
}
.mk-chat-panel__channel:last-child { margin-bottom: 0; }
.mk-chat-panel__channel:hover { border-color: var(--mk-channel-color, #29A0D7); }
.mk-chat-panel__channel-icon {
display: inline-flex;
color: var(--mk-channel-color, #16667F);
flex: 0 0 auto;
}
.mk-chat-panel__channel-icon svg { width: 18px; height: 18px; }
.mk-chat-panel__channel-text { flex: 1 1 auto; line-height: 1; }
.mk-chat-panel__channel-arrow { width: 16px; height: 16px; color: #7E97A6; flex: 0 0 auto; }
/* ── 1.10.4 (3): footer vs WP layout engine ────────────────────────────────
* The footer group used to declare layout:constrained, so WP stamped
* .is-layout-constrained + .has-global-padding on mk-footer__inner — its
* generated CSS capped EVERY column at content-size 768px with auto center
* margins and added root paddings, shattering the 3-col grid; wpautop also
* injected stray around the contact links. The group attr is gone at
* the source; these neutralize the classes on already-rendered pages and
* make the bottom bar span the grid wherever the parser nests it. */
.mk-footer__inner.is-layout-constrained > * {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.mk-footer__inner.has-global-padding { padding-left: 0 !important; padding-right: 0 !important; }
.mk-footer__inner > p:not(.mk-footer__coltitle):not(.mk-footer__blurb) { display: none; }
.mk-footer__bottom { grid-column: 1 / -1; }
/* ════════════════════════════════════════════════════════════════════════════
* v1.10.5 — guide profile page (/guide/{slug}/) in the v2 sheet
*
* is_product_taxonomy() is TRUE for guide archives (the taxonomy is
* attached to product), so this page loads the v2 sheet — but its markup
* is legacy-era classes that only exist in the legacy file. Ported here
* with the Airbnb-clean look (matches the PDP "About me" pattern).
* ════════════════════════════════════════════════════════════════════════════ */
.mk-guide-detail {
max-width: 1080px;
margin: 0 auto;
padding: 8px 28px 56px;
}
.mk-guide-detail__back {
display: inline-block;
font-size: 14px;
font-weight: 600;
color: #16667F;
text-decoration: none;
margin-bottom: 20px;
}
.mk-guide-detail__back:hover { color: #29A0D7; }
.mk-guide-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 48px;
align-items: start;
}
.mk-guide-hero__title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
font-weight: 700;
font-size: clamp(26px, 3vw, 34px);
letter-spacing: -0.02em;
margin: 0 0 16px;
}
.mk-guide-attrs {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
font-size: 15px;
color: #4C6C7D;
}
.mk-guide-attrs li { display: flex; align-items: center; gap: 10px; }
.mk-guide-attrs svg { width: 16px; height: 16px; color: #29A0D7; flex: 0 0 auto; }
.mk-guide-attrs__verified { color: #16667F; font-weight: 600; }
.mk-guide-hero__bio {
font-size: 15.5px;
line-height: 1.65;
color: #4C6C7D;
max-width: 560px;
}
.mk-guide-idcard {
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.1);
border-radius: 16px;
box-shadow: 0 6px 24px -12px rgba(10, 44, 62, 0.25);
padding: 26px 24px;
text-align: center;
}
.mk-guide-idcard__portrait img,
.mk-guide-idcard__portrait .attachment-320x320 {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto;
}
.mk-guide-idcard__name {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
font-size: 20px;
font-weight: 700;
margin: 14px 0 2px;
}
.mk-guide-idcard__role { font-size: 13px; color: #7E97A6; margin: 0; }
.mk-guide-stats--idcard {
display: flex;
justify-content: center;
gap: 26px;
margin: 18px 0 0;
padding-top: 16px;
border-top: 1px solid rgba(10, 44, 62, 0.08);
}
.mk-guide-stats--idcard .mk-guide-stats__cell dt {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #7E97A6;
font-weight: 600;
}
.mk-guide-stats--idcard .mk-guide-stats__cell dd {
margin: 4px 0 0;
font-size: 18px;
font-weight: 700;
color: #0A2C3E;
}
.mk-guide-stats__star { color: #29A0D7; font-size: 13px; margin-left: 2px; }
/* reviews */
.mk-guide-reviews { margin-top: 48px; }
.mk-guide-reviews__head h2 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0;
}
.mk-guide-reviews__summary { font-size: 14px; color: #7E97A6; margin: 4px 0 0; }
.mk-review-list {
list-style: none;
margin: 20px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
}
.mk-review-card {
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 16px;
padding: 20px;
}
.mk-review-card__head { display: flex; align-items: center; gap: 11px; }
.mk-review-card__avatar {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(41, 160, 215, 0.12);
color: #16667F;
font-size: 14px; font-weight: 700;
display: grid; place-items: center;
flex: 0 0 auto;
}
.mk-review-card__who { display: flex; flex-direction: column; line-height: 1.3; }
.mk-review-card__name { font-size: 14.5px; font-weight: 600; color: #0A2C3E; }
.mk-review-card__tour { font-size: 12.5px; color: #7E97A6; }
.mk-review-card__meta { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; color: #7E97A6; }
.mk-review-card__sep { color: #9FB8C7; }
.mk-stars { color: #29A0D7; font-size: 13px; letter-spacing: 0.08em; }
.mk-review-card__text {
margin: 10px 0 0;
font-size: 15px;
line-height: 1.55;
color: #4C6C7D;
}
/* tours by this guide */
.mk-guide-detail__tours { margin-top: 48px; }
.mk-guide-detail__heading {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0;
}
.mk-tourcard-grid {
list-style: none;
margin: 22px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 22px;
}
.mk-guide-detail__empty { color: #7E97A6; font-size: 15px; }
@media (max-width: 900px) {
.mk-guide-hero { grid-template-columns: 1fr; gap: 28px; }
.mk-guide-idcard { max-width: 380px; }
}
/* ── 1.10.6: mobile nav overlay + booking card position + hero chip icon ── */
/* 1) Mobile menu: brand the core navigation overlay. The block's color
* attrs generate a malformed class (has-#0A2C3E-color) so core falls
* back to black-on-white; and the overlay must sit ABOVE our sticky
* header (z 50) or the header covers its close button. */
.wp-block-navigation__responsive-container.is-menu-open {
background: #F2F8FB;
z-index: 100000;
padding-top: 84px;
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
color: #0A2C3E;
font-size: 17px;
font-weight: 600;
padding: 14px 0;
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .mk-nav-cta .wp-block-navigation-item__content {
color: #FFFFFF;
margin-top: 8px;
}
/* 2) Mobile tour detail: the booking card must sit right under the title
* block (Airbnb), not after the whole content column. */
@media (max-width: 980px) {
.mk-pdp-body { display: flex; flex-direction: column; }
.mk-tour__aside { order: -1; }
.mk-tour__aside .mk-cta { box-shadow: 0 6px 24px -14px rgba(10, 44, 62, 0.3); }
}
/* 3) Hero float chip: WP emoji converts the ⌛ text to a twemoji ![]()
* (s.w.org asset — wrong look, extra request). Ship an inline SVG
* hourglass instead, matching the accent tile. */
.mk-hero__float-icon svg,
.mk-hero__float-icon .mk-hourglass { width: 20px; height: 20px; display: block; }
/* core's default-overlay rule (0-3-1) beats the block above — match it. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
background-color: #F2F8FB;
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
top: 18px;
right: 18px;
width: 44px;
height: 44px;
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.12);
border-radius: 999px;
display: grid;
place-items: center;
}
/* 1.10.7: the "Card held" chip anchors to the PHOTO CARD, not the page.
* .mk-hero__float is absolute inside .mk-hero__figurewrap — which was
* static, so the chip resolved against a distant ancestor and floated
* mid-page (-26px from viewport left, 137px below the photo). */
.mk-hero__figurewrap { position: relative; }
/* 1.10.7 (2): open mobile menu is LEFT-aligned (Airbnb convention). The
* nav block keeps items-justified-right from desktop, which in the column
* overlay pushes every link against the right edge. */
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
justify-content: flex-start;
align-items: stretch;
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
width: 100%;
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
display: block;
padding: 15px 0;
border-bottom: 1px solid rgba(10, 44, 62, 0.07);
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .mk-nav-cta .wp-block-navigation-item__content {
display: inline-block;
border-bottom: 0;
background: #29A0D7;
color: #FFFFFF;
padding: 14px 24px;
border-radius: 999px;
margin-top: 18px;
font-weight: 600;
}
/* items-justified-right drives alignment via CSS custom properties that
outrank plain selectors in the open overlay — pin the axis explicitly. */
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
justify-content: flex-start !important;
align-items: stretch !important;
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item {
width: 100% !important;
justify-content: flex-start !important;
}
/* kill the alignment vars at the source AND per-item (align-self always
beats the parent's align-items, whatever rule sets it) */
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open {
--navigation-layout-justify: flex-start;
--navigation-layout-justification-setting: flex-start;
--navigation-layout-alignment: flex-start;
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item {
align-self: stretch !important;
}
/* the UL itself was the shrink-wrapped box pushed right by the content
wrapper's align-items — stretch the UL, everything inside follows */
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
width: 100% !important;
align-self: stretch !important;
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
align-items: stretch !important;
}
/* FINALLY: each LI is itself a flex-column with align-items:flex-end (the
core open-menu item rule) — the A was right-aligned INSIDE the li. */
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item {
align-items: flex-start !important;
}
/* ── 1.10.8: hamburger in the 600–1024px band ───────────────────────────────
* Core shows the burger only below 600px, but the desktop nav (5 links +
* pill + account + cart) doesn't fit until ~1100px — every width in
* between wrapped into a broken two-row header with NO way to open the
* menu. Force the overlay pattern across the whole band. */
@media (min-width: 600px) and (max-width: 1024px) {
.mk-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex !important;
}
.mk-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none !important;
}
}
/* keep the open overlay fullscreen in that band too (core assumes ≥600 =
* inline) */
@media (min-width: 600px) and (max-width: 1024px) {
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open {
position: fixed;
inset: 0;
}
}
/* desktop: the inline nav also wrapped its pill until ~1100px — let the
nav items share one row (they fit from 1025px with the tighter gap) */
@media (min-width: 1025px) {
.mk-site-header .wp-block-navigation .wp-block-navigation__container { gap: 20px; flex-wrap: nowrap; }
.mk-site-header .wp-block-navigation-item { flex-shrink: 0; }
}
/* ── 1.10.9: the mobile menu was TRAPPED inside the header ──────────────────
* backdrop-filter on .mk-site-header creates a containing block for fixed
* descendants — the nav overlay's position:fixed; inset:0 resolved against
* the 63px HEADER box, so the open menu rendered as a clipped sliver
* ("bị che mất") on EVERY width. Drop the blur (near-opaque bg keeps the
* frosted look); the overlay is fixed to the viewport again. */
.mk-site-header {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: rgba(242, 248, 251, 0.97);
}
/* short (landscape) viewports: tighten the open menu so all 5 items fit
without scrolling */
@media (max-height: 500px) {
.wp-block-navigation__responsive-container.is-menu-open { padding-top: 60px; }
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: 9px 0; }
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .mk-nav-cta .wp-block-navigation-item__content { margin-top: 10px; padding: 11px 22px; }
}
@media (max-height: 500px) {
.wp-block-navigation__responsive-container.is-menu-open { padding-top: 52px; }
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: 7px 0; }
}
/* 1.10.10: the open mobile menu hugged the viewport edge (links at x=16,
* no side padding) — give the overlay content a comfortable inset. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding-left: 28px;
padding-right: 28px;
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open .mk-nav-cta .wp-block-navigation-item__content {
margin-left: 0;
}
@media (max-height: 500px) {
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding-left: 24px;
padding-right: 24px;
}
}
/* ── 1.10.11: gallery restored to the DEMO mosaic (founder request) ─────────
* 2fr/1fr, rows 1fr 1fr: hero spans col 1; col 2 row 1 = one photo;
* col 2 row 2 = a nested 1fr/1fr pair whose last tile carries the
* "All N photos" overlay. Retire the 1.10.0 single-carousel styles. */
.mk-carousel { display: none !important; }
.mk-gallery--grid { display: grid !important; }
/* nested pair + all-photos tile */
.mk-gallery__pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
min-height: 0;
min-width: 0;
}
.mk-gallery__cell--half { position: relative; border-radius: 20px; overflow: hidden; padding: 0; border: 0; background: rgba(41, 160, 215, 0.1); cursor: pointer; display: block; min-width: 0; }
.mk-gallery__cell--half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9) contrast(1.03); }
.mk-gallery__cell--allphotos::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(41, 160, 215, 0.16), rgba(10, 44, 62, 0.5));
mix-blend-mode: multiply;
pointer-events: none;
}
.mk-gallery__allphotos-label {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
z-index: 2;
}
/* the old standalone showall button is gone from markup; hide any stray */
.mk-gallery__showall { display: none !important; }
/* the nested pair halves must shrink to their tracks (buttons keep
intrinsic sizing without min-height/min-width 0) */
.mk-gallery__pair > .mk-gallery__cell--half { min-height: 0; min-width: 0; aspect-ratio: auto; }
/* ════════════════════════════════════════════════════════════════════════════
* v1.10.12 — /our-guides/ restyled to the demo #/guides screen
* ════════════════════════════════════════════════════════════════════════════ */
/* head: eyebrow + Lora title + lede LEFT, mini trust strip RIGHT */
.mk-gpage-head {
max-width: 1240px;
margin: 0 auto;
padding: 56px 28px 0;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
align-items: end;
}
.mk-gpage-eyebrow {
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.13em;
color: #29A0D7;
font-weight: 700;
}
.mk-gpage-title {
font-family: "Lora", Georgia, serif;
font-weight: 400;
font-size: clamp(38px, 4.3vw, 64px);
line-height: 1.06;
letter-spacing: -0.025em;
margin: 16px 0 0;
text-wrap: balance;
}
.mk-gpage-lede {
font-size: 18px;
line-height: 1.62;
color: #4C6C7D;
max-width: 480px;
margin: 20px 0 0;
text-wrap: pretty;
}
/* guide cards: horizontal 232px | body | 260px actions */
.mk-gcards {
max-width: 1240px;
margin: 0 auto;
padding: 48px 28px 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.mk-gcard {
display: grid;
grid-template-columns: 232px minmax(0, 1fr) 260px;
gap: 34px;
background: #FFFFFF;
border: 1px solid rgba(10, 44, 62, 0.09);
border-radius: 22px;
padding: 26px;
align-items: center;
box-shadow: 0 2px 4px rgba(10, 44, 62, 0.03);
}
.mk-gcard__media {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.mk-gcard__media img {
width: 100%;
height: 232px;
object-fit: cover;
display: block;
filter: saturate(0.92) contrast(1.03);
}
.mk-gcard__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(190deg, rgba(41, 160, 215, 0.2), rgba(10, 44, 62, 0.24));
mix-blend-mode: multiply;
pointer-events: none;
}
.mk-gcard__namerow {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.mk-gcard__name {
font-family: "Lora", Georgia, serif;
font-size: 34px;
line-height: 1;
letter-spacing: -0.02em;
}
.mk-gcard__verified {
font-size: 12px;
font-weight: 600;
color: #16667F;
background: rgba(41, 160, 215, 0.12);
padding: 5px 10px;
border-radius: 999px;
white-space: nowrap;
}
.mk-gcard__bio {
font-size: 16.5px;
line-height: 1.6;
color: #4C6C7D;
margin: 10px 0 0;
max-width: 460px;
text-wrap: pretty;
}
.mk-gcard__stats {
display: flex;
gap: 32px;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid rgba(10, 44, 62, 0.08);
}
.mk-gcard__stat-label {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #7E97A6;
font-weight: 600;
}
.mk-gcard__stat-value { font-size: 16px; font-weight: 600; margin-top: 3px; }
.mk-gcard__actions { display: flex; flex-direction: column; gap: 10px; }
.mk-gcard__actions .mk-btn {
padding: 14px 24px;
font-size: 15px;
text-align: center;
}
.mk-gcard__soon { cursor: default; }
.mk-gcard__replies {
font-size: 12.5px;
color: #7E97A6;
text-align: center;
line-height: 1.45;
margin-top: 4px;
}
/* how-we-work dark band */
.mk-gwork { margin-top: 88px; background: #0A2C3E; color: #EFF7FB; }
.mk-gwork__inner { max-width: 1240px; margin: 0 auto; padding: 84px 28px; }
.mk-gwork__eyebrow {
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.13em;
color: #6FC4E8;
font-weight: 700;
}
.mk-gwork__title {
font-family: "Lora", Georgia, serif;
font-weight: 400;
font-size: clamp(30px, 3.1vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 14px 0 0;
max-width: 640px;
}
.mk-gwork__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 44px;
}
.mk-gwork__cell {
background: rgba(255, 255, 255, 0.043);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 20px;
padding: 30px;
}
.mk-gwork__h {
font-family: "Lora", Georgia, serif;
font-size: 22px;
line-height: 1.25;
}
.mk-gwork__p {
font-size: 15.5px;
line-height: 1.62;
color: #9BB6C4;
margin: 12px 0 0;
}
.mk-gwork__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 40px;
align-items: center;
}
.mk-gwork__note { font-size: 15px; color: #9BB6C4; }
/* responsive */
@media (max-width: 980px) {
.mk-gpage-head { grid-template-columns: 1fr; gap: 32px; }
.mk-gcard { grid-template-columns: 180px minmax(0, 1fr); }
.mk-gcard__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
.mk-gcard__actions .mk-btn { flex: 1 1 160px; }
.mk-gcard__media img { height: 180px; }
.mk-gwork__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.mk-gcard { grid-template-columns: 1fr; padding: 18px; }
.mk-gcard__media img { height: 260px; }
}
/* The page renders inside .entry-content (post-content, max-width 768px)
* — the 1240px guide sections squeezed into 768 and the cards crushed
* their middle column to 98px. Let the demo sections break out to the
* full rail on this page only. */
.page .entry-content > .mk-gpage-head,
.page .entry-content > .mk-gcards,
.page .entry-content > .mk-gwork {
max-width: 1240px;
margin-left: calc(50% - min(620px, 50vw - 28px));
margin-right: calc(50% - min(620px, 50vw - 28px));
width: auto;
}
/* the prose block (page content) stays at its comfortable reading width */
/* guides page: suppress the template H1 (shortcode has its own demo
* title) and make the dark work band FULL-BLEED like the demo (1280) */
body.mk-guides-page .wp-block-post-title { display: none; }
.page .entry-content > .mk-gwork,
body.mk-guides-page .entry-content > .mk-gwork {
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: auto;
border-radius: 0;
}