/**
* Mekongtodo — "Trusted Warm" brand CSS.
* Source: DESIGN.md tokens + ux-mekongtodo mockup. System stacks only (FR-22).
* Terracotta is the accent (CTA, active step, price breakaway, verified tag);
* saffron is decorative only — never text (DESIGN.md Do/Don't).
*
* Class prefix: .mk- (BEM-ish). WooCommerce block selectors kept for branding.
*/
/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
body.mekongtodo-body,
body {
background: #FAF6EE; /* surface-base — warm market stone */
color: #2B1A12; /* ink-primary ~12:1 on base */
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
.mono,
.mk-mono {
font-family: "SF Mono", UI-monospace, Menlo, Consolas, "Liberation Mono", monospace;
font-feature-settings: "tnum";
}
/* ---------------------------------------------------------------- site header / wordmark (P1-2) */
.mk-site-header .wp-block-site-title,
.mk-site-header .wp-block-site-title a {
font-size: 19px;
font-weight: 800;
letter-spacing: -0.02em;
color: #2B1A12;
text-decoration: none;
line-height: 1;
}
.mk-site-header .wp-block-site-title a::after {
content: ""; /* terracotta accent dot — brand recognition */
display: inline-block;
width: 6px; height: 6px;
border-radius: var(--wp--custom--radius--pill, 9999px);
background: #B14A24;
margin-left: 4px;
vertical-align: 1px;
}
/* site-logo (image) — constrain so a square logo doesn't bloat the header.
Inline width from the block attr is overridden with !important; height auto
keeps the aspect ratio. */
.mk-site-header .wp-block-site-logo img,
.mk-site-header img.custom-logo {
max-height: 60px !important; /* 2026-07-06: bumped 52→60 so the brand mark carries more weight alongside the tagline */
width: auto !important;
height: auto !important;
display: block;
}
/* ---------------------------------------------------------------- hero (P1-1: destination imagery) */
.mk-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.mk-hero__media { display: flex; align-items: center; }
.mk-hero__img { margin: 0; }
.mk-hero__img img {
width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
border-radius: 4px; /* radius.imagery — documentary sharpness */
box-shadow: 0 12px 32px -16px rgba(60, 30, 10, .28);
}
@media (max-width: 781px) {
.mk-hero__media { order: -1; } /* lead with the destination on mobile */
.mk-hero__img img { aspect-ratio: 4 / 3; }
}
/* ---------------------------------------------------------------- tour-card (catalog) */
.mk-tourcard {
background: #FFFDF9; /* surface-raised */
border: 1px solid #D6C4A2; /* border-hairline */
border-radius: 6px; /* radius.card */
overflow: hidden;
}
.mk-tourcard__link { display: block; text-decoration: none; color: inherit; }
.mk-tourcard__media img,
.mk-tourcard__media .wc-block-grid__product-image img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
border-radius: 4px; /* radius.imagery — documentary sharpness */
}
.mk-tourcard__body { padding: 14px 16px 16px; }
.mk-tourcard__title {
display: block;
font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; /* tour-title */
color: #2B1A12; margin-bottom: 8px;
}
.mk-tourcard__price { display: block; font-size: 13px; color: #8E3717; font-weight: 700; }
/* ---------------------------------------------------------------- trust-band */
.mk-trustband {
display: flex;
background: #FFFDF9;
border-bottom: 1px solid #D6C4A2;
}
.mk-trustband__cell {
flex: 1; padding: 12px 8px 10px; text-align: center;
border-right: 1px solid #E7D8B6; /* border-rule between cells */
border-top: 2px solid #D49238; /* saffron hairline accent — decorative */
}
.mk-trustband__cell:last-child { border-right: 0; }
.mk-trustband__label {
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: #6E4F38; font-weight: 700; margin-bottom: 3px;
}
.mk-trustband__value { font-size: 11.5px; color: #2B1A12; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.mk-trustband__value .ic { color: #8E3717; flex-shrink: 0; } /* SVG icon, terra-deep 7:1 */
/* ---------------------------------------------------------------- section card */
.mk-card {
background: #FFFDF9;
border-bottom: 1px solid #D6C4A2;
padding: 18px 18px; /* card-pad */
}
.mk-card--inset { margin: 10px 12px; border: 1px solid #D6C4A2; border-radius: 6px; border-bottom: 1px solid #D6C4A2; }
/* ---------------------------------------------------------------- gallery */
.mk-gallery { padding: 12px 14px 0; position: relative; }
.mk-gallery__main {
border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5;
background: #D6C4A2; position: relative;
}
.mk-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-gallery__count {
position: absolute; top: 10px; right: 10px;
background: rgba(26, 18, 8, .84); color: #FFFFFF;
font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 3px;
}
/* ---------------------------------------------------------------- title block */
.mk-title__eyebrow {
font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
color: #8E3717; font-weight: 700; margin-bottom: 10px;
}
.mk-title__eyebrow .mk-ref { color: #8E3717; float: right; letter-spacing: .04em; }
.mk-tourtitle { font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; color: #2B1A12; }
.mk-metarow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 14px; }
.mk-metarow__item {
font-size: 11px; color: #6E4F38; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.mk-metarow__item b {
display: block; font-size: 13.5px; color: #2B1A12;
text-transform: none; letter-spacing: 0; font-weight: 600; margin-top: 2px;
}
/* ---------------------------------------------------------------- price block */
.mk-priceblock { padding: 16px 18px; background: #FFFDF9; border-bottom: 1px solid #D6C4A2; }
.mk-price-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.mk-price {
font-size: 34px; font-weight: 700; color: #B14A24; /* terracotta-fill, 5.2:1 on card */
letter-spacing: -0.02em; line-height: 1;
}
.mk-price__cur { font-size: 18px; font-weight: 600; color: #8E3717; vertical-align: 6px; margin-right: 2px; }
.mk-price small { font-size: 12px; color: #6E4F38; font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.mk-price-tag {
border: 1px solid #D6C4A2; border-radius: 4px; padding: 6px 9px;
font-size: 11px; color: #8E3717; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; text-align: right; line-height: 1.3; background: #FAF6EE;
}
.mk-price-tag .mono { display: block; color: #2B1A12; font-size: 11.5px; letter-spacing: 0; text-transform: none; margin-top: 2px; }
.mk-price-break {
margin-top: 12px; padding-top: 12px; border-top: 1px dashed #D6C4A2;
font-size: 11.5px; color: #6E4F38; display: flex; justify-content: space-between; gap: 10px;
}
.mk-stamp-mono {
color: #8E3717; font-weight: 700; background: #FAF6EE; border: 1px solid #D6C4A2;
padding: 1px 6px; border-radius: 3px; letter-spacing: .02em; white-space: nowrap;
}
/* ---------------------------------------------------------------- guide card */
.mk-guide { display: flex; gap: 14px; align-items: center; }
.mk-guide__portrait { width: 52px; height: 52px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #D6C4A2; }
.mk-guide__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-guide__name { font-size: 14.5px; color: #2B1A12; font-weight: 700; }
.mk-guide__verified { color: #8E3717; font-size: 11px; font-weight: 700; margin-left: 6px; letter-spacing: .04em; }
.mk-guide__role { font-size: 12px; color: #6E4F38; margin-top: 3px; line-height: 1.45; }
.mk-guide__role b { color: #2B1A12; font-weight: 600; }
.mk-guide-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.mk-guide-stats__item { font-size: 10px; color: #6E4F38; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mk-guide-stats__item b { display: inline; color: #2B1A12; font-weight: 700; letter-spacing: 0; text-transform: none; margin-left: 3px; font-size: 11.5px; }
/* ---------------------------------------------------------------- lists */
.mk-list__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8E3717; font-weight: 700; margin-bottom: 10px; }
.mk-list { list-style: none; margin-bottom: 16px; }
.mk-list:last-child { margin-bottom: 0; }
.mk-list li { font-size: 13px; line-height: 1.5; color: #2B1A12; padding: 5px 0 5px 22px; position: relative; }
.mk-list li::before {
content: ""; position: absolute; left: 0; top: 9px; width: 13px; height: 13px;
background: #8E3717; border-radius: 3px; /* terra-deep check swatch */
}
.mk-list li::after {
content: ""; position: absolute; left: 3.5px; top: 12.5px; width: 6px; height: 3px;
border-left: 1.8px solid #FFFDF9; border-bottom: 1.8px solid #FFFDF9; transform: rotate(-45deg);
}
.mk-list--notinc li::before { background: transparent; border: 1.5px solid #D6C4A2; }
.mk-list--notinc li::after { display: none; }
.mk-list--notinc li { color: #6E4F38; }
/* ---------------------------------------------------------------- refund card */
.mk-refund { display: flex; gap: 14px; align-items: flex-start; }
.mk-refund__icon {
width: 30px; height: 30px; border-radius: 4px; background: #FAF6EE; border: 1px solid #D6C4A2;
display: flex; align-items: center; justify-content: center; color: #8E3717; font-weight: 700; flex-shrink: 0; font-size: 13px;
}
.mk-refund__body { font-size: 12px; line-height: 1.5; color: #6E4F38; }
.mk-refund__body b { color: #2B1A12; font-weight: 700; display: block; margin-bottom: 2px; font-size: 12.5px; }
/* ---------------------------------------------------------------- testimonial */
.mk-quote blockquote {
font-size: 14px; line-height: 1.55; color: #2B1A12; font-weight: 500;
border-left: 3px solid #8E3717; padding-left: 12px;
}
.mk-quote__src { font-size: 11px; color: #6E4F38; margin-top: 8px; font-weight: 600; padding-left: 15px; letter-spacing: .04em; }
/* ---------------------------------------------------------------- sticky CTA
Mobile: a compact bar (.mk-cta-bar) pins to the viewport bottom; tapping
"Book now ▲" opens .mk-cta as a bottom-sheet (.is-open) over a scrim.
Desktop (>=882px): .mk-cta is an inline box in the aside rail; the bar,
scrim and sheet head are hidden (see the desktop media block below). */
.mk-cta {
background: #FFFDF9; border-top: 1px solid #D6C4A2; padding: 12px 14px 16px;
}
.mk-cta__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; padding: 0 2px; gap: 8px; }
.mk-cta__top .l { font-size: 11px; color: #6E4F38; font-weight: 600; letter-spacing: .04em; }
.mk-cta__top .l b { color: #2B1A12; font-weight: 700; }
.mk-cta__top .r { font-size: 11px; color: #8E3717; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.mk-cta__btn {
display: flex; justify-content: center; align-items: center; gap: 10px;
background: #8E3717; color: #FFFFFF; padding: 15px 16px; border-radius: 4px;
font-size: 14.5px; font-weight: 700; text-decoration: none; letter-spacing: .01em;
min-height: 44px; /* tap target AA */
}
.mk-cta__btn .amt { background: rgba(255, 255, 255, .16); padding: 3px 9px; border-radius: 3px; }
.mk-cta__btn .amt .mono { font-size: 13.5px; }
.mk-cta__note { font-size: 10.5px; line-height: 1.45; color: #6E4F38; margin-top: 9px; text-align: center; font-weight: 500; padding: 0 4px; }
.mk-cta__note b { color: #2B1A12; font-weight: 700; }
/* ---- mobile compact bar + bottom-sheet scaffolding (hidden on desktop) ----
The bar (.mk-cta-bar) replaces the old always-visible fixed booking bar so
the sheet (.mk-cta) can stay hidden until opened. Defaults here target the
mobile sheet; the desktop media block below resets .mk-cta to an inline box
and hides the bar/scrim/head. */
.mk-cta-bar {
display: none; /* shown only <=881px */
}
.mk-cta-scrim {
position: fixed; inset: 0; z-index: 1004;
background: rgba(26, 18, 8, .5);
opacity: 0; transition: opacity .28s ease;
}
.mk-cta-scrim:not([hidden]) { opacity: 1; }
.mk-cta__head {
display: none; /* shown only <=881px (sheet grab handle + close) */
}
.mk-cta__head-title { font-size: 14px; font-weight: 700; color: #2B1A12; letter-spacing: .01em; }
.mk-cta__close {
flex: 0 0 32px; width: 32px; height: 32px; border: 0; background: #F1E7D4; color: #2B1A12;
border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mk-cta__close:hover { background: #E5D6BA; }
/* ---------------------------------------------------------------- confirmation status bar */
.mk-conf-statusbar {
background: #2B1A12; color: #FFFDF9; padding: 11px 16px; display: flex; align-items: center; gap: 10px;
}
.mk-conf-statusbar__seal {
width: 22px; height: 22px; border-radius: 3px; background: rgba(255, 255, 255, .18);
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; color: #FFFFFF;
}
.mk-conf-statusbar__text { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.mk-conf-statusbar__text span { color: #D49238; font-weight: 500; display: block; font-size: 10.5px; margin-top: 1px; }
/* ---------------------------------------------------------------- step tracker */
.mk-conf-amount { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px 12px; border-bottom: 1px solid #E7D8B6; gap: 10px; }
.mk-conf-amount .l { font-size: 11px; color: #6E4F38; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mk-conf-amount .v { font-size: 24px; font-weight: 700; color: #B14A24; letter-spacing: -0.01em; }
.mk-conf-amount .v small { font-size: 11px; color: #6E4F38; font-weight: 600; margin-left: 4px; }
.mk-conf-step { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px dashed #D6C4A2; align-items: flex-start; }
.mk-conf-step:last-child { border-bottom: 0; }
.mk-conf-step__n {
width: 22px; height: 22px; border-radius: 3px; background: #FAF6EE; color: #8E3717;
display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0;
border: 1px solid #D6C4A2;
}
.mk-conf-step--locked .mk-conf-step__n { background: #8E3717; color: #FFFFFF; border-color: #8E3717; }
.mk-conf-step--active .mk-conf-step__n { background: #FBEDD3; color: #8E3717; border-color: #D49238; border-width: 1.5px; }
.mk-conf-step--future .mk-conf-step__n { background: #FFFDF9; color: #A89374; border: 1px dashed #D6C4A2; }
.mk-conf-step__body { font-size: 12px; color: #6E4F38; line-height: 1.45; }
.mk-conf-step__body b { color: #2B1A12; font-weight: 700; display: block; font-size: 12.5px; margin-bottom: 1px; }
.mk-conf-step__stamp {
font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #8E3717; font-weight: 700;
margin-left: auto; align-self: flex-start; white-space: nowrap;
}
.mk-conf-step--future .mk-conf-step__stamp { color: #A89374; }
.mk-conf-foot { background: #FAF6EE; padding: 12px 18px; font-size: 10.5px; color: #6E4F38; font-weight: 500; line-height: 1.5; text-align: center; }
.mk-conf-foot b { color: #2B1A12; font-weight: 700; }
/* ---------------------------------------------------------------- footer */
.mk-footer { background: #FAF6EE; border-top: 1px solid #D6C4A2; color: #6E4F38; padding: 24px 14px; }
.mk-footer a { color: #8E3717; text-decoration: none; font-weight: 600; }
.mk-footer a:hover { color: #B14A24; }
.mk-footer__contact { font-size: 12px; line-height: 1.6; }
/* ---------------------------------------------------------------- danger (decline/void only — never primary CTA) */
.mk-danger { color: #9A3A2A; font-weight: 700; }
.mk-alert {
background: #FBEEEA; border: 1px solid #D6C4A2; border-radius: 6px; padding: 12px 14px;
color: #9A3A2A; font-size: 13px; line-height: 1.5;
}
/* ---------------------------------------------------------------- accessibility */
:focus-visible { outline: 2px solid #8E3717; outline-offset: 2px; }
.mk-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* ---------------------------------------------------------------- 360px floor reflows (FR-22) */
@media (max-width: 360px) {
body { padding-left: 8px; padding-right: 8px; }
.mk-price-row { flex-direction: column; align-items: flex-start; gap: 10px; }
.mk-price-tag { align-self: stretch; }
.mk-metarow { grid-template-columns: 1fr; }
.mk-conf-amount { flex-direction: column; align-items: flex-start; gap: 4px; }
}
/* ---------------------------------------------------------------- reduced motion (EXPERIENCE.md Interaction Primitives) */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* ---------------------------------------------------------------- 360px floor guard (FR-2 / FR-22 — release-blocker)
WooCommerce's mini-cart drawer can exceed the 360px viewport and induce
horizontal scroll (measured 8px overflow). Clip page overflow and constrain
the drawer so the mobile floor holds. overflow-x:clip keeps position:sticky
working (overflow:hidden would break the sticky CTA). */
html, body { overflow-x: clip; max-width: 100%; }
.wc-block-mini-cart__drawer,
.wc-block-components-drawer__content,
.wc-block-components-drawer__screen-overlay { max-width: 100vw; box-sizing: border-box; }
/* ---------------------------------------------------------------- Woo catalog card → Trusted Warm (AD-1, DESIGN.md tour-card)
The Shop archive renders product-collection cards, which do NOT fire the
woocommerce_blocks_product_grid_item_html filter (only legacy grid blocks do).
Scope brand styles to the archive product-template so the homepage handpicked
grid (.mk-tourcard) is untouched, and the catalog stops shipping raw Woo. */
.wp-block-woocommerce-product-template .wc-block-product {
background: #FFFDF9; /* surface-raised */
border: 1px solid #D6C4A2; /* border-hairline */
border-radius: 6px; /* radius.card */
overflow: hidden;
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-product-template .wc-block-product .wc-block-components-product-image img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
border-radius: 4px; /* radius.imagery — documentary sharpness */
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-name,
.wp-block-woocommerce-product-template .wc-block-components-product-name,
.wp-block-woocommerce-product-template .wc-block-components-product-name a,
.wp-block-woocommerce-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title a {
font-size: 23px !important; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; /* tour-title — !important beats WP .has-*-font-size utility */
color: #2B1A12; text-decoration: none;
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-template .wc-block-components-product-price {
font-size: 13px; color: #8E3717; font-weight: 700; /* per-traveller price, terracotta-text */
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price .woocommerce-Price-amount,
.wp-block-woocommerce-product-template .wc-block-components-product-price .woocommerce-Price-amount {
font-weight: 700; color: #8E3717;
}
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button .wp-element-button,
.wp-block-woocommerce-product-template .wc-block-components-product-button__button {
background: #8E3717; color: #fff; border-radius: 4px; font-weight: 700; font-size: 14px;
}
@media (max-width: 360px) {
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-name,
.wp-block-woocommerce-product-template .wc-block-components-product-name { font-size: 19px; }
}
/* ================================================================ REDESIGN 2026-07-05
Photo-forward + layout-upgrade layer. Extends Trusted Warm (no rebrand).
Tokens: var(--wp--custom--color--*), var(--wp--custom--shadow--*),
var(--wp--preset--font-size--hero|xxl), var(--wp--preset--spacing--7|8|9). */
/* ---------------------------------------------------------------- foundation utilities */
.mk-section { padding-block: clamp(28px, 4vw, 56px); }
.mk-container { max-width: 1080px; margin-inline: auto; padding-inline: 14px; }
.mk-section-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.mk-section-head .mk-title__eyebrow { margin-bottom: 0; }
.mk-section-head h2 { font-size: var(--wp--preset--font-size--xxl); }
.mk-eyebrow-row { display: flex; align-items: center; gap: 10px; }
.mk-eyebrow-row::before { content: ""; width: 24px; height: 1px; background: #8E3717; }
.mk-surface--warm {
background:
linear-gradient(180deg, rgba(212,146,56,.10) 0%, rgba(250,246,238,0) 280px),
#FAF6EE;
}
/* ---------------------------------------------------------------- hero — full-bleed photo with overlaid copy */
.mk-hero { position: relative; width: 100%; }
.mk-hero__bleed {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
aspect-ratio: 21 / 9;
overflow: hidden;
background: #D6C4A2;
}
.mk-hero__bg {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.mk-hero__scrim {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(26,18,8,0) 42%, rgba(26,18,8,.82) 100%),
linear-gradient(90deg, rgba(26,18,8,.82) 0%, rgba(26,18,8,.45) 55%, rgba(26,18,8,.05) 100%);
}
.mk-hero__copy {
position: absolute; left: 0; right: 0; bottom: 0;
padding: clamp(20px, 4vw, 56px) clamp(14px, 5vw, 72px);
max-width: 760px;
}
.mk-hero__title {
font-size: var(--wp--preset--font-size--hero);
line-height: 1.05; letter-spacing: -0.025em;
color: #FFFDF9; font-weight: 800;
text-shadow: 0 2px 12px rgba(0,0,0,.28);
margin: 8px 0 12px;
}
.mk-hero__lede {
color: rgba(255,253,249,.94);
font-size: clamp(15px, 1.4vw, 18px);
max-width: 52ch; line-height: 1.55;
}
.mk-eyebrow--light { color: #FBEDD3; }
.mk-hero__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.mk-hero__btns .wp-block-button__link {
background: #B14A24; /* terracotta-fill — primary CTA */
color: #FFFDF9; border-radius: 4px;
padding: 14px 28px; font-weight: 700; font-size: 16px;
min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
box-shadow: 0 1px 2px rgba(26,18,8,.2);
}
.mk-hero__btns .wp-block-button__link:hover {
background: #8E3717; /* terracotta-text — darken on hover */
transform: translateY(-1px);
box-shadow: 0 8px 18px -8px rgba(0,0,0,.45);
}
.mk-hero__btns .wp-block-button__link:active { transform: translateY(0); }
.mk-hero__btns .wp-block-button__link:focus-visible {
outline: 2px solid #FFFDF9; outline-offset: 2px;
}
.mk-hero__btns .is-style-ghost-light .wp-block-button__link {
background: rgba(255,253,249,.14); color: #FFFDF9;
border: 1px solid rgba(255,253,249,.6);
backdrop-filter: blur(2px);
box-shadow: none;
}
.mk-hero__btns .is-style-ghost-light .wp-block-button__link:hover {
background: rgba(255,253,249,.26);
border-color: rgba(255,253,249,.85);
transform: translateY(-1px);
box-shadow: none;
}
@media (max-width: 781px) {
.mk-hero__bleed { aspect-ratio: 4 / 5; }
.mk-hero__scrim {
background:
linear-gradient(180deg, rgba(26,18,8,.16) 0%, rgba(26,18,8,.78) 60%, rgba(26,18,8,.92) 100%);
}
.mk-hero__copy { padding: 20px 16px 24px; }
.mk-hero__lede { font-size: 14px; }
}
/* Block-theme template-parts drop a stray
between the wrapper and the
next block (wpautop on inter-block whitespace) — it opens a visible gap
right under the header / above the hero. Hide that specific br. */
.wp-block-template-part + br { display: none !important; }
/* ---------------------------------------------------------------- tour card — richer meta + hover */
.mk-tourcard {
transition: box-shadow .18s ease, transform .18s ease;
box-shadow: var(--wp--custom--shadow--card-rest, 0 1px 2px rgba(60,30,10,.04));
}
.mk-tourcard:hover {
box-shadow: var(--wp--custom--shadow--card-hover, 0 2px 4px rgba(60,30,10,.06));
transform: translateY(-2px);
}
.mk-tourcard__media img,
.mk-tourcard__media .wc-block-grid__product-image img { aspect-ratio: 3 / 2; }
.mk-tourcard__body { padding: 16px 18px 18px; }
.mk-tourcard__meta { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; font-size: 12.5px; color: #6E4F38; }
.mk-tourcard__avatar { width: 22px; height: 22px; border-radius: 9999px; object-fit: cover; border: 1px solid #D6C4A2; flex-shrink: 0; }
.mk-tourcard__guide { font-weight: 600; }
.mk-tourcard__loc { font-size: 11.5px; color: #8E3717; font-weight: 700; letter-spacing: .02em; display: block; margin-bottom: 6px; }
.mk-tourcard__duration { margin-left: auto; font-size: 11px; color: #6E4F38; font-weight: 600; white-space: nowrap; }
.mk-tourcard__title { margin-bottom: 4px; }
/* ---------------------------------------------------------------- gallery — thumbnail strip */
.mk-gallery__main { aspect-ratio: 4 / 3; }
.mk-gallery__slide { display: none; }
.mk-gallery__slide.is-active { display: block; }
.mk-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 0 14px 6px; }
.mk-gallery__thumb {
flex: 0 0 88px; aspect-ratio: 4 / 3; border: 0; padding: 0;
background: #D6C4A2; border-radius: 4px; overflow: hidden;
cursor: pointer; opacity: .68; transition: opacity .15s;
}
.mk-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-gallery__thumb.is-active,
.mk-gallery__thumb:hover { opacity: 1; outline: 2px solid #8E3717; outline-offset: 1px; }
/* ---------------------------------------------------------------- guide card — warmer surface, bigger portrait */
.mk-guide-card-wrap { background: #FFFDF9; border-bottom: 1px solid #D6C4A2; padding: 18px 18px; }
.mk-guide-card-wrap .mk-guide {
background: #FFFDF9; border-left: 3px solid #D49238;
padding: 14px 16px; border-radius: 6px; gap: 16px;
}
.mk-guide__portrait { width: 72px; height: 72px; border-radius: 8px; }
.mk-guide__name { font-size: 16px; }
/* ---------------------------------------------------------------- footer — 3-column grid */
.mk-footer__grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
align-items: start;
}
.mk-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.mk-footer__brand .wp-block-site-logo { max-width: 96px; }
.mk-footer__tag { font-size: 12px; color: #6E4F38; line-height: 1.5; max-width: 32ch; }
.mk-footer__contact { font-size: 12px; line-height: 1.6; }
.mk-footer__legal { font-size: 11px; color: #A89374; text-align: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid #E7D8B6; }
@media (max-width: 781px) {
.mk-footer__grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ---------------------------------------------------------------- header — locale chip */
.mk-locale-chip {
font-size: 11px; color: #6E4F38; font-weight: 600; letter-spacing: .04em;
display: inline-flex; align-items: center; gap: 5px;
}
.mk-locale-chip::before {
content: ""; width: 6px; height: 6px; border-radius: 9999px;
background: var(--wp--preset--color--verified-green, #4E7A3A);
}
/* ---------------------------------------------------------------- tour-detail — 2-column desktop PDP */
.mk-tour { max-width: 1200px; margin-inline: auto; }
.mk-tour__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
gap: 40px;
align-items: start;
padding: 0 16px;
}
.mk-tour__main { min-width: 0; }
.mk-tour__aside { min-width: 0; }
/* desktop: aside is a sticky buy-box rail (price + CTA follow the scroll).
The mobile-only bar/scrim/head stay hidden; .mk-cta is a plain inline box. */
@media (min-width: 882px) {
.mk-tour__aside { position: sticky; top: 88px; }
.mk-tour__aside .mk-cta {
position: static;
transform: none; visibility: visible; /* reset bottom-sheet props */
box-shadow: none;
border: 1px solid #D6C4A2;
border-radius: 8px;
padding: 18px;
margin-top: 12px;
}
.mk-cta-spacer,
.mk-cta-bar,
.mk-cta-scrim,
.mk-cta__head { display: none; } /* mobile-only scaffolding off on desktop */
}
/* mobile: 1-col. A compact bar (.mk-cta-bar, ~64px) pins to the viewport
bottom; the full form lives in a bottom-sheet (.mk-cta) that slides up over
a scrim when the bar's "Book now" button is tapped (.mk-cta.is-open). */
@media (max-width: 881px) {
.mk-tour__grid { grid-template-columns: 1fr; gap: 0; }
/* compact always-visible bar */
.mk-cta-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 14px;
background: #FFFDF9; border-top: 1px solid #D6C4A2;
box-shadow: 0 -8px 16px -10px rgba(60, 30, 10, .18);
}
.mk-cta-bar__total { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mk-cta-bar__total .amt { font-size: 16px; font-weight: 700; color: #2B1A12; }
.mk-cta-bar__total .sub { font-size: 11px; color: #6E4F38; font-weight: 600; }
.mk-cta-bar__open {
flex: 0 0 auto; background: #8E3717; color: #FFFFFF; border: 0; border-radius: 4px;
padding: 12px 18px; font-size: 14px; font-weight: 700; letter-spacing: .01em;
min-height: 44px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.mk-cta-bar__open:hover { background: #B14A24; }
.mk-cta-bar__open .caret { font-size: 12px; }
/* bottom-sheet holding the full booking form */
.mk-tour__aside .mk-cta {
position: fixed; left: 0; right: 0; bottom: 0; top: auto;
z-index: 1005;
border-radius: 14px 14px 0 0;
max-height: 86vh; overflow-y: auto;
box-shadow: 0 -8px 24px -10px rgba(60, 30, 10, .28);
padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
transform: translateY(100%);
visibility: hidden;
transition: transform .28s ease, visibility 0s linear .28s;
}
.mk-tour__aside .mk-cta.is-open {
transform: translateY(0);
visibility: visible;
transition: transform .28s ease;
}
.mk-cta__head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ECE0CC;
}
}
/* ---------------------------------------------------------------- button hover lift */
.mk-cta__btn:hover { background: #B14A24; }
.mk-cta__btn:active { transform: translateY(1px); }
/* ---------------------------------------------------------------- home booking step-flow timeline
Mobile (default): vertical timeline, numbered nodes on a saffron rule.
Desktop (>=782px, item 3): 3 equal columns with a connecting rule running
behind the (smaller, cleaner) numbered nodes. */
.mk-steps { display: flex; flex-direction: column; gap: 0; }
.mk-step {
display: flex; gap: 16px; padding: 14px 0;
border-left: 2px solid #D49238; margin-left: 12px; padding-left: 22px;
position: relative;
}
.mk-step:last-child { border-left-color: transparent; }
.mk-step__n {
width: 26px; height: 26px; border-radius: 9999px;
background: #8E3717; color: #FFFDF9;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; flex-shrink: 0;
margin-left: -35px; margin-top: 2px;
}
.mk-step__body { font-size: 13px; color: #6E4F38; line-height: 1.5; }
.mk-step__body b { color: #2B1A12; font-weight: 700; display: block; font-size: 14px; margin-bottom: 2px; }
@media (min-width: 782px) {
.mk-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 28px;
position: relative;
}
.mk-steps::before {
content: "";
position: absolute;
top: 12px; /* aligns with the numbered node's vertical center */
left: calc(100% / 6);
right: calc(100% / 6);
height: 2px;
background: #D49238;
z-index: 0;
}
.mk-step {
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
border-left: 0;
margin-left: 0;
padding: 0 14px;
}
.mk-step__n {
width: 24px; height: 24px;
font-size: 11px;
margin-left: 0; margin-top: 0;
position: relative; z-index: 1;
box-shadow: 0 0 0 4px #FAF6EE; /* punches a clean gap in the connecting rule */
}
.mk-step__body { font-size: 12.5px; }
.mk-step__body b { font-size: 13.5px; }
}
/* ---------------------------------------------------------------- home FAQ teaser 2-col */
/* faq-teaser wasn't picking up the section's constrained content width and rendered
full-bleed (flush left). Cap to wide-size and centre so it aligns with the other
home sections (Featured grid, booking steps). */
.mk-faq-teaser { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; max-width: 1080px; margin-inline: auto; }
.mk-faq-teaser__links { display: flex; flex-direction: column; gap: 8px; }
.mk-faq-teaser__link {
display: block; padding: 12px 14px; background: #FFFDF9;
border: 1px solid #D6C4A2; border-radius: 6px;
text-decoration: none; color: #2B1A12; font-size: 13.5px; font-weight: 600;
}
.mk-faq-teaser__link:hover { border-color: #8E3717; }
@media (max-width: 781px) {
.mk-faq-teaser { grid-template-columns: 1fr; gap: 24px; }
}
/* ================================================================ P2.1 nav tap targets (AA 44px)
Nav links render at 21px height — pad them to clear the 44px target floor
without changing the visual line-height. */
.mk-site-header .wp-block-navigation .wp-block-navigation__container {
gap: 4px;
}
.mk-site-header .wp-block-navigation-item__content {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 6px 10px;
border-radius: 4px;
transition: color .15s ease, background-color .15s ease;
}
.mk-site-header .wp-block-navigation-item__content:hover,
.mk-site-header .wp-block-navigation-item__content:focus-visible {
background: rgba(142, 55, 23, .06);
color: #8E3717; /* terracotta-text affordance */
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
/* ================================================================ P2.2 eyebrow legibility on mobile */
@media (max-width: 781px) {
.mk-title__eyebrow { font-size: 11px; letter-spacing: .14em; }
}
/* ---------------------------------------------------------------- Our Guides grid (P1.1) */
.mk-guides {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin: 24px 0 32px;
}
.mk-guides__card { padding: 0; }
.mk-guides__card .mk-guide {
flex-direction: column;
gap: 14px;
padding: 20px;
height: 100%;
}
.mk-guides__card .mk-guide__portrait { width: 96px; height: 96px; border-radius: 8px; }
.mk-guides__card .mk-guide__name { font-size: 17px; }
.mk-guides__cta {
display: inline-block;
margin-top: 12px;
padding: 10px 16px;
background: #8E3717;
color: #FFFDF9;
border-radius: 4px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
min-height: 44px;
line-height: 24px;
}
.mk-guides__cta:hover { background: #B14A24; color: #FFFDF9; }
/* Guides with no tours yet — muted "Tours coming soon" instead of a dead link. */
.mk-guides__cta--soon {
display: inline-block;
margin-top: 14px;
padding: 6px 0;
background: transparent;
color: #8C8F94;
font-size: 12.5px;
font-style: italic;
}
.mk-guides__empty { padding: 24px; color: #6E4F38; }
@media (max-width: 781px) {
.mk-guides { grid-template-columns: 1fr; gap: 16px; }
.mk-guides__card .mk-guide { flex-direction: row; gap: 16px; padding: 16px; }
.mk-guides__card .mk-guide__portrait { width: 72px; height: 72px; flex-shrink: 0; }
}
/* ---------------------------------------------------------------- guide archive (/guide/{slug}/)
Airbnb-style guide profile: hero (About + identity card) → aggregated reviews →
tours grid. Trusted Warm palette only (DESIGN.md). */
.mk-guide-detail { padding-block: 8px 0; }
.mk-guide-detail__back {
display: inline-block;
margin-bottom: 20px;
font-size: 13px;
font-weight: 600;
color: #8E3717;
text-decoration: none;
}
.mk-guide-detail__back:hover { text-decoration: underline; }
/* hero: narrative left, identity card right (sticky on desktop). */
.mk-guide-hero {
display: grid;
grid-template-columns: 1fr 300px;
gap: 36px;
align-items: start;
margin-bottom: 8px;
}
.mk-guide-hero__title { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; color: #2B1A12; margin: 0; }
.mk-guide-attrs { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mk-guide-attrs li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #2B1A12; }
.mk-guide-attr__icon { color: #8E3717; flex-shrink: 0; }
.mk-guide-attrs__verified { font-weight: 600; }
.mk-guide-hero__bio { margin-top: 18px; font-size: 14.5px; line-height: 1.65; color: #4A3527; max-width: 56ch; }
.mk-guide-hero__bio p { margin: 0 0 12px; }
.mk-guide-hero__bio p:last-child { margin-bottom: 0; }
/* identity card */
.mk-guide-idcard {
background: #FFFDF9;
border: 1px solid #D6C4A2;
border-radius: 14px;
padding: 24px 20px;
text-align: center;
position: sticky;
top: 16px;
box-shadow: 0 10px 30px -22px rgba(60, 30, 10, .35);
}
.mk-guide-idcard__portrait {
width: 96px; height: 96px; border-radius: 9999px; overflow: hidden;
margin: 0 auto 12px; background: #D6C4A2; border: 3px solid #FAF6EE;
box-shadow: 0 0 0 1px #D6C4A2;
}
.mk-guide-idcard__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-guide-idcard__name { font-size: 18px; font-weight: 700; color: #2B1A12; margin: 0; }
.mk-guide-idcard__role { font-size: 12.5px; color: #6E4F38; margin: 3px 0 0; }
.mk-guide-stats--idcard {
display: flex;
justify-content: center;
gap: 0;
margin: 18px 0 0;
padding-top: 16px;
border-top: 1px dashed #D6C4A2;
}
.mk-guide-stats__cell { flex: 1; padding: 0 4px; display: flex; flex-direction: column; gap: 3px; }
.mk-guide-stats__cell + .mk-guide-stats__cell { border-left: 1px solid #E5D7BB; }
.mk-guide-stats__cell dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6E4F38; font-weight: 600; order: 2; }
.mk-guide-stats__cell dd { font-size: 19px; font-weight: 800; color: #2B1A12; margin: 0; line-height: 1; order: 1; display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.mk-guide-stats__star { color: #C9821B; font-size: 14px; }
/* reviews (aggregated from this guide's tours) */
.mk-guide-reviews { margin-top: 44px; }
.mk-guide-reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.mk-guide-reviews__head .mk-tourtitle { margin: 0; }
.mk-guide-reviews__summary { font-size: 13.5px; color: #4A3527; margin: 0; }
.mk-guide-reviews__summary b { font-size: 15px; color: #2B1A12; font-weight: 800; }
.mk-guide-reviews__sep { color: #B9A982; margin: 0 2px; }
.mk-review-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mk-review-card { background: #FFFDF9; border: 1px solid #E5D7BB; border-radius: 12px; padding: 18px 20px; }
.mk-review-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mk-review-card__avatar {
width: 40px; height: 40px; border-radius: 9999px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: #F3E4D6; color: #8E3717; font-size: 14px; font-weight: 700; letter-spacing: .02em;
border: 1px solid #E5D7BB;
}
.mk-review-card__who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mk-review-card__name { font-size: 14px; font-weight: 700; color: #2B1A12; }
.mk-review-card__tour { font-size: 11.5px; color: #8C8F94; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-review-card__meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6E4F38; margin-bottom: 9px; }
.mk-stars { display: inline-flex; gap: 1px; font-size: 13px; line-height: 1; }
.mk-star { font-size: 13px; }
.mk-star--on { color: #C9821B; }
.mk-star--off { color: #D6C4A2; }
.mk-review-card__sep { color: #B9A982; }
.mk-review-card__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: #3A2A1E; }
/* tours grid — auto-fill so 1-3 tours look balanced (1 = full width, 2 = 2-up). */
.mk-guide-detail__tours { margin-top: 44px; }
.mk-guide-detail__heading { margin: 0 0 20px; }
.mk-tourcard-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.mk-guide-detail__empty { color: #6E4F38; }
@media (max-width: 781px) {
.mk-guide-hero { grid-template-columns: 1fr; gap: 20px; }
.mk-guide-idcard { position: static; display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px; }
.mk-guide-idcard__portrait { width: 72px; height: 72px; margin: 0; flex-shrink: 0; }
.mk-guide-idcard__name { font-size: 17px; }
.mk-guide-stats--idcard { flex-wrap: wrap; margin-top: 14px; padding-top: 12px; }
.mk-review-list { grid-template-columns: 1fr; gap: 12px; }
.mk-tourcard-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 480px) {
.mk-guide-hero__title { font-size: 24px; }
.mk-tourcard-grid { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------- FAQ accordions (P2.3) */
.mk-faq { margin: 20px 0; }
.mk-faq__item {
border: 1px solid #D6C4A2;
border-radius: 6px;
background: #FFFDF9;
margin-bottom: 10px;
overflow: hidden;
}
.mk-faq__item[open] { border-color: #8E3717; box-shadow: 0 4px 12px -8px rgba(60,30,10,.18); }
.mk-faq__q {
list-style: none;
cursor: pointer;
padding: 16px 48px 16px 18px;
font-size: 15px;
font-weight: 700;
color: #2B1A12;
position: relative;
line-height: 1.4;
}
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
width: 9px;
height: 9px;
border-right: 2px solid #8E3717;
border-bottom: 2px solid #8E3717;
transform: translateY(-65%) rotate(45deg);
transition: transform .15s ease;
}
.mk-faq__item[open] .mk-faq__q { color: #8E3717; }
.mk-faq__item[open] .mk-faq__q::after { transform: translateY(-35%) rotate(-135deg); }
.mk-faq__a {
padding: 0 18px 18px;
font-size: 14px;
line-height: 1.6;
color: #6E4F38;
}
.mk-faq__a p { margin: 0 0 10px; }
.mk-faq__a p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------- Contact hero CTA (P2.4) */
.mk-contact-hero {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin: 16px 0 8px;
}
.mk-contact-hero__wa {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 28px;
min-height: 52px;
background: #8E3717;
color: #FFFDF9;
border-radius: 6px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
}
.mk-contact-hero__wa:hover { background: #B14A24; color: #FFFDF9; }
.mk-contact-hero__alt { font-size: 13px; color: #6E4F38; }
/* ---------------------------------------------------------------- Shop catalog injected meta (P1.2)
The product-collection block centers its text — keep the injected loc/meta
aligned and visually grouped with the title. */
.wp-block-woocommerce-product-template .mk-tourcard__loc,
.wp-block-woocommerce-product-template .mk-tourcard__meta {
display: flex;
justify-content: center;
text-align: center;
}
/* `.mk-tourcard__duration { margin-left:auto }` (catalog grid) makes the flex
child snap right and overrides the justify-content:center above — so the meta
row split Guide-left | Duration-right while loc/title/price stayed centred.
Drop the auto-margin here so the row recentres and matches the rest of the card. */
.wp-block-woocommerce-product-template .mk-tourcard__duration {
margin-left: 0;
}
/* ---- round-2 P2-b: mobile nav toggle AA 44x44 tap target ----
FIXED 2026-07-05: scoped to the mobile breakpoint. The previous unconditional
`display:inline-flex` outranked core's `@media (min-width:600px){…open{display:none}}`
and leaked the hamburger onto desktop next to the inline menu. Only size the
toggle where core actually shows it (<600px); let core control display elsewhere. */
@media (max-width: 599.98px) {
.mk-site-header .wp-block-navigation__responsive-container-open,
.mk-site-header .wp-block-navigation__responsive-container-close {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
}
/* Defensive: force the inline nav links to hide on mobile so they live in the
hamburger overlay only. Core normally handles this, but if the block CSS is
served stale/missing the links leak inline and wrap → broken header. */
.mk-site-header .wp-block-navigation > .wp-block-navigation__container {
display: none;
}
}
/* ---- mobile overlay menu alignment ----
header.html sets the nav block's justifyContent:"right" (so the inline
desktop menu hugs the right edge) with setCascadingProperties:true. WP core
cascades that into --navigation-layout-justification-setting, which the open
overlay uses for align-items — so the stacked overlay items render
right-aligned instead of left. Reset the overlay content to left-align.
Desktop keeps its right-aligned inline menu (the overlay never opens there). */
@media (max-width: 599.98px) {
/* Root out the cascade: reset the justification CSS vars on the open
overlay so every descendant that reads them gets flex-start. */
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open,
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
--navigation-layout-justification-setting: flex-start !important;
--navigation-layout-justify: flex-start !important;
--navigation-layout-align: flex-start !important;
}
/* Belt-and-braces: force left alignment down the item chain regardless of
what the inline justify vars resolve to. */
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content,
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation__container,
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item {
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left;
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item__content {
justify-content: flex-start;
text-align: left;
}
/* Generous spacing for the stacked overlay: the inline-desktop `gap:4px`
(line ~711) and core's `padding:0` on items leak into the overlay and
crush the links together. Give the overlay Airbnb-style breathing room. */
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation__container {
gap: 4px; /* small inter-item rhythm */
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item {
margin-bottom: 8px; /* vertical breathing room */
}
.mk-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item__content {
display: block;
padding: 8px 0; /* undo core's padding:0 crush */
font-size: 22px; /* large tap target, Airbnb-like */
font-weight: 600;
line-height: 1.3;
}
}
/* Header de-clutter on every small/medium viewport (phone + tablet, ≤781px):
the block header carries logo + nav + Woo account + Woo cart spread via
space-between, which crowds the bar and parks the hamburger mid-header. Pin
the logo left, hide the account icon (reachable via my-account), and nudge
the cart next to the hamburger. Core still controls the hamburger/inline
switch at its own 600px breakpoint. */
@media (max-width: 781px) {
.mk-site-header .mk-brand { margin: 0 auto 0 0 !important; }
.mk-site-header .wp-block-woocommerce-customer-account { display: none; }
.mk-site-header .wc-block-mini-cart { margin-left: 4px; }
}
/* ---- round-2 P2-c: quantity input min height ---- */
.mk-cta input[type="number"],
.quantity input.qty,
input.qty {
min-height: 44px;
}
.wp-block-woocommerce-product-template .wp-block-post-title { margin-top: 4px; }
/* ================================================================ enhancements 2026-07-05
Item 2 — brand lockup: logo + tagline grouped at the header's left. */
/* Header layout (fixed 2026-07-05): vertically centre all children, keep the brand
hard-left and cluster nav + account + cart to the right (margin-right:auto absorbs
the free space so the 4 flex children stop spreading), and restore side padding
that was collapsing to 0. */
.mk-site-header {
align-items: center;
column-gap: 16px;
padding-left: 16px;
padding-right: 16px;
}
.mk-site-header > .mk-brand { margin-right: auto; }
.mk-brand { display: flex; flex-direction: column; gap: 2px; justify-content: center; align-items: center; } /* 2026-07-06: logo centered over the tagline (was flex-start = logo left-aligned vs tagline) */
.mk-brand__tagline {
margin: 0;
font-size: 11px; /* 11px floor (round-2 a11y) */
letter-spacing: .06em;
text-transform: uppercase;
color: #6E4F38; /* ink-secondary */
font-weight: 600;
white-space: nowrap;
}
@media (max-width: 600px) {
.mk-brand__tagline { display: none; } /* crowds the header at narrow widths */
}
/* Item 4 — home handpicked-products card CTA (mk_product_grid_item_html).
The /shop/ Product Collection card gets its "Book now" label for free via
WC_Product::add_to_cart_text() + the woocommerce_product_add_to_cart_text
filter (functions.php:mk_book_now_cta_text) — no markup change needed there. */
.mk-tourcard__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
font-size: 12.5px;
font-weight: 700;
color: #8E3717; /* terracotta-text */
letter-spacing: .02em;
}
.mk-tourcard__cta-arrow { transition: transform .15s ease; }
.mk-tourcard:hover .mk-tourcard__cta-arrow { transform: translateX(3px); }
/* ---- home Featured grid layout fix (2026-07-05) ----
`.mk-tourcard__body`/`__media` are s; without an explicit block display the
body's padding did not contain its block-level children (`.mk-tourcard__loc`,
`.mk-tourcard__meta`), so the guide/duration meta row escaped to the card's full
width and clipped at the viewport edges on the two outer cards. Give them block
display, and constrain the handpicked grid to the site wide-size (1080px) so the
cards stop bleeding past the page gutters (grid was rendering ~full-viewport wide,
first card at x=-8). Home-only: /shop/ uses the product-collection template. */
.mk-tourcard__media { display: block; }
.mk-tourcard__body { display: block; }
.wc-block-grid.wp-block-handpicked-products {
max-width: 1080px;
margin-inline: auto;
padding-inline: 14px;
box-sizing: border-box;
}
/* Item 5 — floating multi-channel chat widget
(functions.php:mk_floating_chat_widget). Fixed bottom-right, all front-end
pages. Single configured channel = direct link in that brand color; 2+
channels = neutral Trusted-Warm FAB that expands a popover panel. Brand
colors are outside the Trusted Warm palette by design — recognizable chat
affordances, not brand surfaces (same justification as the prior WA green). */
.mk-chat-fab {
position: fixed;
right: 16px;
bottom: 16px;
width: 56px;
height: 56px;
border: 0;
border-radius: 9999px;
background: var(--mk-channel-color, #6E4F38);
color: #FFFDF9;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px -4px rgba(20, 20, 10, .4);
z-index: 1000;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.mk-chat-fab:hover,
.mk-chat-fab:focus-visible {
transform: translateY(-2px);
box-shadow: 0 10px 22px -4px rgba(20, 20, 10, .48);
outline: none;
}
.mk-chat-fab__icon { width: 26px; height: 26px; display: block; }
.mk-chat-fab__icon svg { width: 26px; height: 26px; display: block; }
/* Single-channel variant keeps the channel's brand color (e.g. WhatsApp green). */
.mk-chat-fab--single { background: var(--mk-channel-color, #25D366); }
/* Badge = channel count, shown only on the multi-channel FAB. */
.mk-chat-fab__badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9999px;
background: #8E3717;
color: #FFFDF9;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px #FAF6EE;
}
/* Expandable panel — hidden until .is-open. */
.mk-chat-panel {
position: fixed;
right: 16px;
bottom: 82px;
width: 244px;
max-width: calc(100vw - 32px);
background: #FFFDF9;
border: 1px solid #D6C4A2;
border-radius: 10px;
box-shadow: 0 10px 30px -8px rgba(20, 20, 10, .35);
z-index: 1001;
padding: 8px;
opacity: 0;
transform: translateY(8px) scale(.98);
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
}
.mk-chat-panel.is-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.mk-chat-panel[hidden] { display: none; }
.mk-chat-panel__title {
margin: 4px 6px 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #6E4F38;
}
.mk-chat-panel__channel {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 8px;
border-radius: 8px;
text-decoration: none;
color: #2A1F14;
font-size: 14px;
font-weight: 600;
transition: background .12s ease;
}
.mk-chat-panel__channel:hover,
.mk-chat-panel__channel:focus-visible { background: #FAF0E6; outline: none; }
.mk-chat-panel__channel-icon {
width: 30px;
height: 30px;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
background: var(--mk-channel-color, #6E4F38);
color: #FFFDF9;
flex: 0 0 30px;
}
.mk-chat-panel__channel-icon svg { width: 17px; height: 17px; display: block; }
.mk-chat-panel__channel-text { flex: 1; }
.mk-chat-panel__channel-arrow { width: 14px; height: 14px; color: #B79B7A; flex: 0 0 14px; }
/* Collision guard: on tour detail (mobile) a compact booking bar (.mk-cta-bar,
~64px) pins to the viewport bottom below the 881px breakpoint — keep the chat
widget clear of it. (The full booking form opens as a bottom-sheet at
z-index 1005, above the chat widget, so it needs no offset here.) */
@media (max-width: 881px) {
body.single-product .mk-chat-fab { bottom: 80px; }
body.single-product .mk-chat-panel { bottom: 146px; }
}
/* Item 6 — footer chat-channel list + email + reassurance line
(mu-plugins/mekongtodo-config.php:mk_footer_contact_shortcode). */
.mk-footer__channels {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.mk-footer a.mk-footer__chat-btn {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 6px 12px;
background: #FFFDF9;
border: 1px solid #D6C4A2;
border-radius: 4px;
color: #2A1F14;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
transition: border-color .12s ease, background .12s ease;
}
.mk-footer a.mk-footer__chat-btn:hover,
.mk-footer a.mk-footer__chat-btn:focus-visible {
border-color: #8E3717;
background: #FAF0E6;
outline: none;
}
.mk-footer__chat-icon { display: inline-flex; width: 16px; height: 16px; color: var(--mk-channel-color, #6E4F38); }
.mk-footer__chat-icon svg { width: 16px; height: 16px; display: block; }
.mk-footer__email,
.mk-footer__hours { font-size: 12px; }
.mk-footer__reassure {
font-size: 11.5px;
color: #6E4F38;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed #D6C4A2;
line-height: 1.5;
}
/* Generic channel-button list (used by [mk_chat_channels] shortcode, e.g. the
Contact page). Same affordance as the footer buttons, sized for body copy. */
.mk-chat-channels { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-chat-channels__label { width: 100%; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #6E4F38; }
a.mk-chat-channel {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 18px;
background: #FFFDF9;
border: 1px solid var(--mk-channel-color, #D6C4A2);
border-radius: 6px;
color: #2A1F14;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background .12s ease, border-color .12s ease;
}
a.mk-chat-channel:hover,
a.mk-chat-channel:focus-visible {
background: var(--mk-channel-color, #FAF0E6);
border-color: var(--mk-channel-color, #8E3717);
color: #FFFDF9;
outline: none;
}
a.mk-chat-channel:hover .mk-chat-channel__icon,
a.mk-chat-channel:focus-visible .mk-chat-channel__icon { color: #FFFDF9; }
.mk-chat-channel__icon { display: inline-flex; width: 18px; height: 18px; color: var(--mk-channel-color, #6E4F38); }
.mk-chat-channel__icon svg { width: 18px; height: 18px; display: block; }
/* ============================================================
* TOUR DETAIL (PDP) — Airbnb-experiences redesign layer (v1.4.0)
* Extends the Trusted Warm system. Net-new: gallery grid + lightbox,
* sticky section nav, itinerary, reviews, meet-point, host-about,
* things-to-know, related, preferred-date, rating row.
* ============================================================ */
/* Sticky-offset: every PDP section clears the sticky section nav. */
.mk-pdp-section,
.mk-pdp-overview { scroll-margin-top: 64px; }
/* Overview wrapper (gallery + title + highlights), sits above the content grid. */
.mk-pdp-overview { padding: 0 16px; }
/* ---- PDP section heading (eyebrow + h2) ---- */
.mk-pdp-section__head { margin-bottom: 14px; }
.mk-pdp-section__head .mk-title__eyebrow { display: block; margin-bottom: 4px; }
.mk-pdp-section__title {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 700;
letter-spacing: -0.015em;
color: #2B1A12;
line-height: 1.25;
margin: 0;
}
/* Some sections (host-about) show only the eyebrow; others add an h2. */
.mk-pdp-section__head:has(.mk-pdp-section__title) { margin-bottom: 16px; }
/* ===================== GALLERY GRID (1 + 4) + lightbox ===================== */
.mk-gallery.mk-gallery--grid { padding: 0; margin: 16px 0 0; }
.mk-gallery--grid {
position: relative;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
}
.mk-gallery--grid .mk-gallery__cell {
position: relative;
overflow: hidden;
border: 0;
padding: 0;
margin: 0;
background: #D6C4A2;
border-radius: 4px;
cursor: pointer;
display: block;
}
.mk-gallery--grid .mk-gallery__cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .25s ease;
}
.mk-gallery--grid .mk-gallery__cell:hover img { transform: scale(1.02); }
.mk-gallery--grid .mk-gallery__cell--hero {
grid-column: 1 / 2;
grid-row: 1 / 3;
aspect-ratio: 4 / 3;
}
.mk-gallery--grid .mk-gallery__cell:not(.mk-gallery__cell--hero) { aspect-ratio: 1 / 1; }
/* Single-photo fallback: hero fills the whole grid when no small cells exist. */
.mk-gallery--grid:not(:has(.mk-gallery__cell:not(.mk-gallery__cell--hero))) .mk-gallery__cell--hero {
grid-column: 1 / -1;
}
/* The last small cell overlays a "+more" tint when there are >5 photos. */
.mk-gallery--grid .mk-gallery__cell--overflow img { filter: brightness(.6); }
.mk-gallery--grid .mk-gallery__cell--overflow::after {
content: "+more";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #FFFDF9;
font-weight: 700;
font-size: 14px;
pointer-events: none;
}
.mk-gallery__showall {
position: absolute;
bottom: 12px;
right: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
background: #FFFDF9;
border: 1px solid #D6C4A2;
border-radius: 4px;
padding: 7px 12px;
font-size: 12.5px;
font-weight: 600;
color: #2B1A12;
box-shadow: 0 2px 6px -2px rgba(60,30,10,.25);
cursor: pointer;
}
.mk-gallery__showall:hover { border-color: #8E3717; color: #8E3717; }
@media (max-width: 781px) {
.mk-gallery--grid { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.mk-gallery--grid .mk-gallery__cell--hero { grid-row: auto; aspect-ratio: 4 / 3; }
.mk-gallery--grid .mk-gallery__cell:not(.mk-gallery__cell--hero) { display: none; }
.mk-gallery--grid .mk-gallery__showall { bottom: 10px; right: 10px; }
}
/* ---- Lightbox ---- */
.mk-lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(26,18,8,.96);
padding: 48px 16px 64px;
}
.mk-lightbox[hidden] { display: none; }
.mk-lightbox__stage {
margin: 0;
max-width: min(1100px, 92vw);
max-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.mk-lightbox__stage img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 4px;
display: block;
}
.mk-lightbox__close,
.mk-lightbox__prev,
.mk-lightbox__next {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,253,249,.12);
border: 1px solid rgba(255,253,249,.25);
color: #FFFDF9;
border-radius: 9999px;
cursor: pointer;
transition: background .12s ease;
}
.mk-lightbox__close:hover,
.mk-lightbox__prev:hover,
.mk-lightbox__next:hover { background: rgba(255,253,249,.24); }
.mk-lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; }
.mk-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.mk-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.mk-lightbox__bar { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; }
.mk-lightbox__count { color: #FFFDF9; font-size: 13px; background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 9999px; }
@media (prefers-reduced-motion: reduce) {
.mk-gallery--grid .mk-gallery__cell img { transition: none; }
}
/* ===================== STICKY SECTION NAV ===================== */
.mk-sectionnav {
position: sticky;
top: 0;
z-index: 40;
background: rgba(250,246,238,.96);
backdrop-filter: saturate(1.1) blur(6px);
border-bottom: 1px solid #D6C4A2;
margin: 16px 0 0;
}
.mk-sectionnav__list {
list-style: none;
margin: 0 auto;
padding: 0 16px;
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
max-width: 1200px;
}
.mk-sectionnav__list::-webkit-scrollbar { display: none; }
.mk-sectionnav__tab {
display: inline-block;
padding: 12px;
font-size: 13.5px;
font-weight: 600;
color: #6E4F38;
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color .12s ease, border-color .12s ease;
}
.mk-sectionnav__tab:hover { color: #8E3717; }
.mk-sectionnav__tab.is-active { color: #8E3717; border-bottom-color: #8E3717; }
/* ===================== TITLE RATING ROW ===================== */
.mk-title__ratingrow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 8px 0 0;
font-size: 13.5px;
color: #6E4F38;
}
.mk-title__rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: #2B1A12; }
.mk-title__star { color: #D49238; font-size: 15px; }
.mk-title__rating .mono { color: #2B1A12; }
/* ===================== ITINERARY ("What you'll do") ===================== */
.mk-itin { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.mk-itin__stop { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; position: relative; }
.mk-itin__media { margin: 0; border-radius: 6px; overflow: hidden; background: #D6C4A2; }
.mk-itin__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mk-itin__body { position: relative; padding-left: 38px; }
.mk-itin__n {
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
border-radius: 9999px;
background: #FFFDF9;
border: 1px solid #D6C4A2;
color: #8E3717;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mk-itin__h { font-size: 17px; font-weight: 700; color: #2B1A12; margin: 4px 0 6px; letter-spacing: -0.01em; }
.mk-itin__d { font-size: 14px; line-height: 1.6; color: #6E4F38; margin: 0; }
@media (min-width: 600px) {
.mk-itin__stop { grid-template-columns: minmax(0,240px) 1fr; gap: 18px; align-items: start; }
}
/* ===================== REVIEWS ===================== */
.mk-review__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-review__avg { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: #2B1A12; }
.mk-review__stars { color: #D49238; font-size: 15px; letter-spacing: 1px; }
.mk-review__stars--sm { font-size: 12px; }
.mk-review__count { color: #6E4F38; font-size: 14px; }
.mk-review__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; }
.mk-review { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid #E7D8B6; }
.mk-review:first-child { border-top: 0; padding-top: 0; }
.mk-review__avatar {
width: 40px;
height: 40px;
border-radius: 9999px;
background: #FAF0E6;
color: #8E3717;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
border: 1px solid #D6C4A2;
}
.mk-review__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-review__name { font-size: 14px; color: #2B1A12; }
.mk-review__date { font-size: 12px; color: #A89374; display: block; margin: 2px 0 6px; }
.mk-review__text { font-size: 14px; line-height: 1.6; color: #2B1A12; margin: 0; }
.mk-review--more { display: none; }
.mk-review--more.is-open { display: grid; }
.mk-review__toggle {
margin-top: 14px;
background: none;
border: 1px solid #D6C4A2;
border-radius: 4px;
padding: 9px 16px;
font-size: 13px;
font-weight: 600;
color: #8E3717;
cursor: pointer;
}
.mk-review__toggle:hover { background: #FAF6EE; border-color: #8E3717; }
/* ===================== MEET POINT ===================== */
.mk-meetpoint { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; }
.mk-meetpoint__pin {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 6px;
background: #FAF6EE;
border: 1px solid #D6C4A2;
color: #8E3717;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mk-meetpoint__body b { color: #2B1A12; font-size: 14px; }
.mk-meetpoint__loc { font-size: 14px; color: #2B1A12; margin: 4px 0; font-weight: 600; }
.mk-meetpoint__note { font-size: 12.5px; color: #6E4F38; margin: 4px 0 0; }
/* ===================== HOST ABOUT ===================== */
.mk-host { display: flex; gap: 16px; align-items: flex-start; }
.mk-host__portrait { flex-shrink: 0; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: #D6C4A2; }
.mk-host__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-host__name { font-size: 17px; font-weight: 700; color: #2B1A12; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.mk-host__bio { font-size: 14px; line-height: 1.6; color: #6E4F38; margin: 8px 0; }
.mk-host__bio p { margin: 0 0 8px; }
.mk-host__bio p:last-child { margin-bottom: 0; }
.mk-host__msg {
display: inline-block;
margin-top: 10px;
padding: 9px 16px;
border: 1px solid #8E3717;
border-radius: 4px;
color: #8E3717;
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.mk-host__msg:hover { background: #8E3717; color: #FFFDF9; }
/* ===================== THINGS TO KNOW ===================== */
.mk-thingsknow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mk-thingsknow__cell { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #D6C4A2; border-radius: 6px; background: #FFFDF9; }
.mk-thingsknow__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 6px; background: #FAF0E6; color: #8E3717; display: inline-flex; align-items: center; justify-content: center; }
.mk-thingsknow__body b { display: block; font-size: 13.5px; color: #2B1A12; margin-bottom: 4px; }
.mk-thingsknow__body p { font-size: 13px; line-height: 1.5; color: #6E4F38; margin: 0; }
.mk-thingsknow__sla { font-size: 12px; color: #6E4F38; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed #D6C4A2; }
@media (max-width: 600px) { .mk-thingsknow { grid-template-columns: 1fr; } }
/* ===================== RELATED ===================== */
.mk-related { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 781px) { .mk-related { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .mk-related { grid-template-columns: 1fr; } }
/* ===================== PREFERRED DATE (in booking rail) ===================== */
.mk-prefdate { margin: 12px 0; padding: 12px; border: 1px dashed #D6C4A2; border-radius: 6px; background: #FAF6EE; }
.mk-prefdate__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8E3717; margin-bottom: 6px; }
.mk-prefdate__input {
width: 100%;
padding: 10px 12px;
border: 1px solid #D6C4A2;
border-radius: 4px;
background: #FFFDF9;
color: #2B1A12;
font-size: 14px;
font-family: inherit;
}
.mk-prefdate__input:focus { outline: 2px solid #D49238; outline-offset: 1px; border-color: #D49238; }
.mk-prefdate__hint { display: block; font-size: 11.5px; color: #6E4F38; margin-top: 6px; line-height: 1.4; }
/* ===================== LISTING HIGHLIGHTS (guide-card tweak) ===================== */
.mk-guide--highlights .mk-guide__name { font-size: 16px; }
/* ===================== ITINERARY: clickable media + detail modal (v1.4.1) ===================== */
/* Card description clamps to 3 lines; full text shown in the detail modal. */
.mk-itin__d {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mk-itin__media-btn {
display: block;
padding: 0;
margin: 0;
border: 0;
background: none;
cursor: pointer;
border-radius: 6px;
overflow: hidden;
position: relative;
width: 100%;
}
.mk-itin__media-btn .mk-itin__media { margin: 0; }
.mk-itin__media-btn .mk-itin__media img { transition: transform .25s ease; }
.mk-itin__media-btn:hover .mk-itin__media img { transform: scale(1.03); }
.mk-itin__media-btn:focus-visible { outline: 2px solid #D49238; outline-offset: 2px; }
.mk-itin__media-zoom {
position: absolute;
bottom: 10px;
right: 10px;
width: 34px;
height: 34px;
border-radius: 9999px;
background: rgba(255,253,249,.94);
color: #2B1A12;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px -2px rgba(60,30,10,.35);
opacity: 0;
transition: opacity .15s ease;
pointer-events: none;
}
.mk-itin__media-btn:hover .mk-itin__media-zoom,
.mk-itin__media-btn:focus-visible .mk-itin__media-zoom { opacity: 1; }
.mk-itin__more {
margin-top: 8px;
background: none;
border: 0;
padding: 0;
color: #8E3717;
font-size: 13px;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
.mk-itin__more:hover { color: #B14A24; }
/* ---- Itinerary detail modal (Airbnb-style: large image + heading + full desc) ---- */
.mk-itinmodal {
position: fixed;
inset: 0;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
background: rgba(26,18,8,.72);
padding: 24px 16px;
}
.mk-itinmodal[hidden] { display: none; }
.mk-itinmodal__card {
position: relative;
background: #FFFDF9;
border-radius: 12px;
width: 100%;
max-width: 880px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: row;
box-shadow: 0 24px 60px -12px rgba(40,20,5,.5);
animation: mk-itinmodal-in .18s ease-out;
}
@keyframes mk-itinmodal-in {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: none; }
}
/* Vertical thumbnail rail (left) — jump to any stop; active is highlighted. */
.mk-itinmodal__rail {
flex-shrink: 0;
width: 68px;
background: #FAF6EE;
border-right: 1px solid #E7D8B6;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
scrollbar-width: thin;
}
.mk-itinmodal__thumb {
padding: 0;
border: 0;
background: none;
cursor: pointer;
width: 52px;
height: 52px;
border-radius: 6px;
overflow: hidden;
position: relative;
flex-shrink: 0;
display: block;
}
.mk-itinmodal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .62; transition: opacity .12s ease; }
.mk-itinmodal__thumb:hover img { opacity: 1; }
.mk-itinmodal__thumb.is-active { outline: 2px solid #8E3717; outline-offset: 1px; }
.mk-itinmodal__thumb.is-active img { opacity: 1; }
.mk-itinmodal__thumb--noimg { background: #FFFDF9; color: #8E3717; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #D6C4A2; }
/* Stage: main image + text (right of the rail). */
.mk-itinmodal__stage { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.mk-itinmodal__media { margin: 0; background: #D6C4A2; position: relative; aspect-ratio: 3 / 2; max-height: 52vh; overflow: hidden; flex-shrink: 0; }
.mk-itinmodal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-itinmodal__body { padding: 20px 24px 24px; overflow-y: auto; }
.mk-itinmodal__topbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.mk-itinmodal__n {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 9999px;
background: #FAF0E6;
border: 1px solid #D6C4A2;
color: #8E3717;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mk-itinmodal__h { font-size: 19px; font-weight: 700; color: #2B1A12; margin: 0; letter-spacing: -0.015em; line-height: 1.25; flex: 1; min-width: 0; }
.mk-itinmodal__d { font-size: 15px; line-height: 1.65; color: #2B1A12; white-space: pre-wrap; }
/* Close button (top-right, in the topbar). */
.mk-itinmodal__close {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 9999px;
background: #FAF6EE;
border: 1px solid #D6C4A2;
color: #6E4F38;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.mk-itinmodal__close:hover { background: #8E3717; color: #FFFDF9; border-color: #8E3717; }
/* Prev/next chevrons over the image. */
.mk-itinmodal__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 42px;
height: 42px;
border-radius: 9999px;
background: rgba(255,253,249,.95);
border: 1px solid rgba(60,30,10,.1);
color: #2B1A12;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px -2px rgba(60,30,10,.35);
transition: background .12s ease, color .12s ease, opacity .12s ease;
}
.mk-itinmodal__nav:hover:not(:disabled) { background: #FFFDF9; color: #8E3717; }
.mk-itinmodal__nav:disabled { opacity: .3; cursor: not-allowed; }
.mk-itinmodal__nav:focus-visible { outline: 2px solid #D49238; outline-offset: 2px; }
.mk-itinmodal__prev { left: 12px; }
.mk-itinmodal__next { right: 12px; }
@media (max-width: 600px) {
.mk-itinmodal__card { flex-direction: column; max-width: 100%; max-height: 92vh; }
.mk-itinmodal__rail { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid #E7D8B6; padding: 8px 10px; }
.mk-itinmodal__thumb { width: 48px; height: 48px; }
.mk-itinmodal__media { aspect-ratio: 16 / 10; max-height: 36vh; }
.mk-itinmodal__body { padding: 16px 16px 20px; }
.mk-itinmodal__nav { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.mk-itinmodal__card { animation: none; }
.mk-itin__media-btn .mk-itin__media img { transition: none; }
}
/* ---------------------------------------------------------------- skeleton + image fade-in (PSI/UX 1.7.0 — Airbnb-style perceived loading)
.mk-skeleton: shimmer placeholder, shape-matched via aspect-ratio on the
same selector that normally holds the image. Shown while the Shop grid
re-renders (Woo Interactivity sort/filter/pagination) and as a fallback
background on lazy image containers.
.mk-img-fade: image starts at opacity:0, fades to 1 on load (onload adds
.loaded). Eliminates the raw pop-in of lazy images streaming in. */
.mk-skeleton {
background: linear-gradient(90deg, #ECE2CA 25%, #F5EFE0 37%, #ECE2CA 63%);
background-size: 400% 100%;
animation: mk-shimmer 1.4s ease infinite;
}
@keyframes mk-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.mk-img-fade { opacity: 0; transition: opacity .3s ease; }
.mk-img-fade.loaded { opacity: 1; }
/* Print + reduced-motion: never hide content, never animate. */
@media print { .mk-img-fade { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.mk-skeleton { animation: none; background: #ECE2CA; }
.mk-img-fade { opacity: 1; transition: none; }
}
/* Shop grid loading state — toggled by the meta-inject MutationObserver
(functions.php mk_shop_meta_inject) while WooCommerce re-renders cards.
Existing cards fade their media to the skeleton surface; once applyMeta()
completes the class is removed and images fade back. */
.wp-block-woocommerce-product-template.is-loading .wc-block-product,
.wc-block-grid.is-loading .wc-block-grid__product {
position: relative;
}
.wp-block-woocommerce-product-template.is-loading .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-product-template.is-loading .wc-block-components-product-image img,
.wc-block-grid.is-loading .wc-block-grid__product-image img {
opacity: 0;
}
.wp-block-woocommerce-product-template.is-loading .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-template.is-loading .wc-block-components-product-image,
.wc-block-grid.is-loading .wc-block-grid__product-image {
background: linear-gradient(90deg, #ECE2CA 25%, #F5EFE0 37%, #ECE2CA 63%);
background-size: 400% 100%;
animation: mk-shimmer 1.4s ease infinite;
aspect-ratio: 4 / 3;
}