/* Samui Journey 2026 - shared base: tokens, header, menu sheet, footer, buttons, motion */
:root{--sj-ink:#0F2A33;--sj-cream:#F6F2EA;--sj-red:#BF0808;--sj-red-dark:#990606;--sj-teal:#0E5E63;--sj-muted:#4A5D63;--sj-hdr-h:84px;--sj-top:var(--sj-hdr-h)}
@media (max-width: 600px){:root{--sj-hdr-h:72px}}
html{scroll-behavior:smooth}
html.sj-lock,html.sj-lock body{overflow:hidden}
body.sj-theme{margin:0;background:#F6F2EA;color:#0F2A33;font-family:'Noto Sans',sans-serif;font-weight:400;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.sj-hdr-hidden{--sj-top:0px}
[hidden]{display:none !important}
.sj-anchor{position:absolute;top:0;left:0;width:1px;height:1px}
.sj-skip{position:absolute;left:12px;top:-200px;z-index:100;background:#0F2A33;color:#FFFFFF !important;padding:12px 20px;border-radius:999px;font-family:'Noto Sans',sans-serif;font-size:15px;font-weight:600;text-decoration:none !important}
.sj-skip:focus{top:12px;outline:2px solid #BF0808;outline-offset:2px}
.sj-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main.sj-x:focus,main.sj-g:focus{outline:0}
/* overlay pages: the hero slides under the transparent sticky header */
.sj-hdr-overlay .sj-x .hero.sj-under{margin-top:calc(-1 * var(--sj-hdr-h))}

/* shared typography + layout used by header, sheet, footer and pages */
.hdr,.sheet,.foot,.sj-wa{font-family:'Noto Sans',sans-serif;font-variant-numeric:lining-nums}
.hdr *,.sheet *,.foot *,.sj-wa *{box-sizing:border-box}
.hdr a,.sheet a,.foot a{color:inherit;text-decoration:none}
.hdr .wrap,.foot .wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.serif{font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:-0.035em;font-variant-numeric:lining-nums}

/* buttons (Main.dc.html + motion & nav) */
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:0.01em;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,0.32) 50%,transparent 75%);transform:translateX(-130%);transition:transform .75s ease}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn:hover::after{transform:translateX(130%)}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(15,42,51,0.6)}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn:active{transform:translateY(0)}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn-sun{background:#BF0808;color:#FFFFFF}
:is(.hdr,.foot,.sj-x,.sj-g-links) a.btn-sun:hover{background:#990606;color:#FFFFFF}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn-light{background:#FFFFFF;color:#0F2A33}
:is(.hdr,.foot,.sj-x,.sj-g-links) a.btn-light:hover{background:#BF0808;color:#FFFFFF}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn-ghost{border:1px solid rgba(255,255,255,0.75);color:#FFFFFF}
:is(.hdr,.foot,.sj-x,.sj-g-links) a.btn-ghost:hover{background:#FFFFFF;color:#0F2A33;border-color:#FFFFFF}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn-line{border:1px solid rgba(15,42,51,0.35);color:#0F2A33}
:is(.hdr,.foot,.sj-x,.sj-g-links) a.btn-line:hover{background:#0F2A33;color:#F6F2EA;border-color:#0F2A33}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn:focus-visible{outline:2px solid #0E5E63;outline-offset:3px}
.foot .btn:focus-visible{outline-color:#F6F2EA}

/* header (unified) */
.hdr{position:sticky;top:0;z-index:40;color:#FFFFFF;transition:background-color .3s ease,box-shadow .3s ease,color .3s ease,transform .3s ease}
.hdr.solid{background:rgba(246,242,234,0.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(15,42,51,0.1);color:#0F2A33}
.sj-trip .hdr:not(.solid){background:linear-gradient(180deg,rgba(8,26,32,0.55) 0%,rgba(8,26,32,0) 100%)}
.hdr.hide{transform:translateY(-100%)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:var(--sj-hdr-h)}
.brand{display:flex;align-items:center;gap:12px;color:inherit}
.brand img{height:56px;width:auto;display:block;max-width:none}
.brand .lg-d{display:none}
.hdr.solid .brand .lg-w{display:none}
.hdr.solid .brand .lg-d{display:block}
.nav{display:flex;gap:26px;align-items:center;font-size:15px;font-weight:500;line-height:1.4}
.nav a.btn{min-height:44px;padding:0 22px;font-size:14px}
a.lk{position:relative;padding:6px 0}
a.lk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
a.lk:hover::after,a.lk.on::after{transform:scaleX(1);transform-origin:left}
a.lk:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hdr-prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:#BF0808;transition:width .1s linear;pointer-events:none}
.burger{display:none;position:relative;width:48px;height:48px;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;padding:0;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none}
.burger:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.burger .bl{position:absolute;left:calc(50% - 12px);width:24px;height:1.6px;background:currentColor;border-radius:2px;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.burger .bl:nth-child(1){top:calc(50% - 7px)}
.burger .bl:nth-child(2){top:calc(50% - 1px);width:14px}
.burger .bl:nth-child(3){top:calc(50% + 5px)}
.burger:hover .bl:nth-child(2){width:24px}

/* full-screen mobile menu sheet */
.sheet{position:fixed;inset:0;z-index:60;background:#0F2A33;color:#F6F2EA;padding:14px 20px 24px;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:sjSheet .4s cubic-bezier(.2,.7,.2,1)}
.sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sheet-top img{height:36px;width:auto;display:block;max-width:none}
.sheet-x{width:44px;height:44px;border-radius:999px;border:1px solid rgba(246,242,234,0.4);background:transparent;color:#F6F2EA;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.sheet-x svg{transition:transform .35s ease}
.sheet-x:hover svg{transform:rotate(90deg)}
.sheet-x:focus-visible,.sheet a:focus-visible{outline:2px solid #F2B8B8;outline-offset:2px}
.sheet a.m{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid rgba(246,242,234,0.12);font-family:'Manrope',sans-serif;font-weight:500;font-size:19px;letter-spacing:-0.01em;color:#F6F2EA;animation:sjItem .55s cubic-bezier(.2,.7,.2,1) both}
.sheet a.m small{font-family:'Noto Sans',sans-serif;font-size:13px;opacity:.65}
.sheet a.m.on{color:#F2B8B8}
.sheet a.m span{transition:transform .35s ease}
.sheet a.m:hover span{transform:translateX(8px)}
.sheet a.m:nth-of-type(2){animation-delay:.04s}.sheet a.m:nth-of-type(3){animation-delay:.08s}.sheet a.m:nth-of-type(4){animation-delay:.12s}.sheet a.m:nth-of-type(5){animation-delay:.16s}.sheet a.m:nth-of-type(6){animation-delay:.2s}.sheet a.m:nth-of-type(7){animation-delay:.24s}.sheet a.m:nth-of-type(8){animation-delay:.28s}.sheet a.m:nth-of-type(9){animation-delay:.32s}.sheet a.m:nth-of-type(10){animation-delay:.36s}
.sheet-cta{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.sheet-cta a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-size:15px;font-weight:600}
.sheet-cta a.b1{background:#BF0808;color:#FFFFFF}
.sheet-cta a.b2{border:1px solid rgba(246,242,234,0.5);color:#F6F2EA}
@keyframes sjSheet{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes sjItem{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* footer (footer#contact.foot from Main.dc.html) */
.foot{background:#0F2A33;color:#F6F2EA;padding:110px 0 44px;line-height:1.5}
.foot-logo{height:120px;width:auto;display:block;margin:0 0 32px;max-width:none}
.foot h2{font-size:68px;line-height:1;margin:0 0 32px;max-width:720px;padding:0;color:inherit}
.foot .ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px;margin-top:88px;padding-top:40px;border-top:1px solid rgba(246,242,234,0.16);font-size:15px;line-height:1.9;color:rgba(246,242,234,0.82)}
.fgrid h4{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:#F6F2EA;margin:0 0 12px;padding:0;line-height:1.5}
.fgrid a,.legal a{transition:color .25s ease}
.fgrid a:hover,.legal a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.foot a:focus-visible{outline:2px solid #F6F2EA;outline-offset:2px}
.legal{margin-top:56px;font-size:13px;color:rgba(246,242,234,0.6);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* floating WhatsApp button */
.sj-wa{position:fixed;right:22px;bottom:22px;z-index:15;width:58px;height:58px;border-radius:999px;background:#0E5E63;color:#FFFFFF !important;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -12px rgba(15,42,51,0.6);opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s,bottom .3s ease}
.sj-wa.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .35s ease,transform .35s ease,visibility 0s,bottom .3s ease}
.sj-wa:focus-visible{outline:2px solid #0E5E63;outline-offset:3px}

@media (max-width: 1180px){
.nav{display:none}
.burger{display:inline-flex}
}
@media (max-width: 1000px){
.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sj-has-mbar .sj-wa{bottom:94px}
}
@media (max-width: 600px){
.hdr .wrap,.foot .wrap{padding:0 20px}
.brand img{height:44px}
.foot{padding:80px 0 104px}
.foot-logo{height:96px}
.foot h2{font-size:42px}
.foot .ctas .btn{width:100%}
.fgrid{grid-template-columns:minmax(0,1fr);margin-top:56px}
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn,:is(.hdr,.foot,.sj-x,.sj-g-links) .btn::after,a.lk::after,.burger .bl,.sheet,.sheet a.m,.sheet a.m span,.sheet-x svg,.hdr,.sj-wa{transition:none !important;animation:none !important}
:is(.hdr,.foot,.sj-x,.sj-g-links) .btn:hover{transform:none}
}

/* Safety resets against leftover Divi/plugin CSS (specificity 0,0,2: beats bare h1 rules, loses to any class rule) */
html :where(body.sj-theme) :is(h1,h2,h3,h4,h5,h6){color:inherit;padding-bottom:0;line-height:revert}
/* Legacy FareHarbor floating buttons (WPCode footer) — the theme has its own booking bars */
body.sj-theme .fh-fixed--bottom{display:none!important}
/* When the chat concierge is active it offers WhatsApp itself — hide the theme's floating WhatsApp button */
body.sj-concierge-on .sj-wa{display:none!important}
/* Review stars: darker gold for contrast on cream */
body.sj-theme .stars{color:#9A6B00!important}
/* Page gutters: some design rules (.layout, .intro …) reset the .wrap side padding via shorthand; restore it */
body.sj-theme .wrap{padding-left:48px!important;padding-right:48px!important}
@media (max-width:600px){body.sj-theme .wrap{padding-left:20px!important;padding-right:20px!important}}

/* PDPA Thailand cookie notice (.dpdpa--popup): compact bottom card on the theme templates.
   Only size, spacing and colours change; the plugin still controls when it shows and hides. */
body.sj-theme .dpdpa--popup{left:16px !important;right:auto !important;width:calc(100% - 32px) !important;max-width:420px !important;margin:0 0 16px !important;padding:0 !important;background:transparent !important;box-shadow:none !important;z-index:9990 !important}
body.sj-theme .dpdpa--popup .container{width:auto !important;max-width:none !important;margin:0 !important;padding:0 !important}
body.sj-theme .dpdpa--popup-container{position:relative !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:12px !important;max-height:40vh !important;overflow:auto !important;margin:0 !important;padding:16px 18px !important;background:#FFFFFF !important;color:#0F2A33 !important;border:1px solid rgba(15,42,51,0.1) !important;border-radius:16px !important;box-shadow:0 24px 50px -20px rgba(15,42,51,0.55) !important;font-family:'Noto Sans',sans-serif !important;font-size:13px !important;line-height:1.45 !important;text-align:left !important}
body.sj-theme .dpdpa--popup-text,body.sj-theme .dpdpa--popup-text p{margin:0 !important;padding:0 40px 0 0 !important;font-size:13px !important;line-height:1.45 !important;color:#0F2A33 !important;text-align:left !important;width:auto !important;max-width:none !important}
body.sj-theme .dpdpa--popup-text a{color:#0E5E63 !important;font-weight:600 !important;text-decoration:underline !important;text-underline-offset:2px}
body.sj-theme .dpdpa--popup-button-group{display:flex !important;flex-wrap:wrap !important;gap:8px !important;margin:0 !important;padding:0 !important;width:auto !important}
body.sj-theme .dpdpa--popup-button{display:inline-flex !important;align-items:center !important;justify-content:center !important;flex:1 1 auto !important;min-height:44px !important;min-width:120px !important;margin:0 !important;padding:0 22px !important;border:0 !important;border-radius:999px !important;background:#0F2A33 !important;color:#FFFFFF !important;font-family:'Noto Sans',sans-serif !important;font-size:14px !important;font-weight:600 !important;line-height:1 !important;text-decoration:none !important;text-transform:none !important}
body.sj-theme .dpdpa--popup-button:hover{background:#0E5E63 !important}
body.sj-theme .dpdpa--popup-button:focus-visible,body.sj-theme .dpdpa--popup-close:focus-visible{outline:2px solid #0E5E63 !important;outline-offset:2px}
body.sj-theme .dpdpa--popup-close{position:absolute !important;top:4px !important;right:4px !important;width:44px !important;height:44px !important;margin:0 !important;display:flex !important;align-items:center !important;justify-content:center !important}
@media (max-width: 600px){
body.sj-theme .dpdpa--popup{left:12px !important;right:12px !important;width:auto !important;max-width:none !important;margin:0 0 12px !important}
body.sj-theme.sj-has-mbar .dpdpa--popup{margin-bottom:88px !important}
}

/* Footer items (block on desktop) */
.fgrid .fi{display:block}
/* Compact footer on phones (owner feedback: too long) */
@media (max-width:600px){
.foot{padding:44px 0 96px}
.foot-logo{height:60px;margin-bottom:16px}
.foot h2{font-size:28px;margin-bottom:16px}
.foot .ctas{gap:8px}
.foot .ctas .btn{min-height:46px;font-size:14px}
.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin-top:28px;padding-top:22px;font-size:13.5px;line-height:1.6}
.fgrid h4{font-size:11px;margin-bottom:6px}
.fgrid .fcontact{grid-column:1/-1}
.fgrid .fcontact .fi{display:inline}
.fgrid .fcontact .fi:not(:last-child)::after{content:" · ";color:rgba(246,242,234,0.45)}
.fgrid .fi{padding:3px 0}
.legal{margin-top:22px;font-size:12px;gap:6px}
}

/* Language switcher (v1.0.8): compact dropdown in the desktop header, row of pills in the menu sheet.
   Hidden entirely until a language is switched on in Settings > SJ Languages. */
.lsw{position:relative;font-family:'Manrope',sans-serif;font-weight:700}
.lsw-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid rgba(255,255,255,0.55);border-radius:999px;font-size:13px;letter-spacing:0.02em;line-height:1;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,border-color .2s ease}
.hdr.solid .lsw-btn{border-color:rgba(15,42,51,0.3)}
.lsw-btn::-webkit-details-marker{display:none}
.lsw-btn::marker{content:""}
.lsw-btn:hover{background:rgba(255,255,255,0.14)}
.hdr.solid .lsw-btn:hover{background:rgba(15,42,51,0.06)}
.lsw-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.lsw-chev{transition:transform .2s ease}
.lsw[open] .lsw-chev{transform:rotate(180deg)}
.lsw-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:30;min-width:176px;margin:0;padding:6px;list-style:none;background:#FFFFFF;color:#0F2A33;border:1px solid rgba(15,42,51,0.08);border-radius:16px;box-shadow:0 24px 50px -20px rgba(15,42,51,0.55)}
.lsw-menu li{margin:0;padding:0;list-style:none}
.hdr .lsw-o{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 14px;border-radius:12px;font-size:14px;color:#0F2A33;transition:background-color .2s ease}
.hdr .lsw-o b{font-size:11px;font-weight:700;letter-spacing:0.08em;color:#4A5D63}
.hdr .lsw-o:hover{background:#F6F2EA}
.hdr .lsw-o.on{background:#0F2A33;color:#F6F2EA}
.hdr .lsw-o.on b{color:rgba(246,242,234,0.7)}
.hdr .lsw-o:focus-visible{outline:2px solid #0E5E63;outline-offset:2px}
@media (max-width: 1320px){.nav:has(.lsw){gap:20px}}
.sheet-lang{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sheet .sheet-lang a.lo{display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:44px;padding:0 14px;border:1px solid rgba(246,242,234,0.4);border-radius:999px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;color:#F6F2EA;transition:background-color .2s ease,color .2s ease}
.sheet .sheet-lang a.lo:hover{background:rgba(246,242,234,0.12)}
.sheet .sheet-lang a.lo.on{background:#F6F2EA;color:#0F2A33;border-color:#F6F2EA}
/* "EN" tag after links from a language page to an English page */
.en-tag{display:inline-block;margin-inline-start:6px;padding:1px 5px;border:1px solid currentColor;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:0.06em;line-height:1.3;vertical-align:2px;opacity:.7}
/* Editor preview of a language that is switched off */
.sj-lang-preview{position:fixed;left:12px;bottom:12px;z-index:9998;max-width:min(520px,calc(100vw - 24px));padding:10px 14px;border-radius:12px;background:#BF0808;color:#FFFFFF;font:600 13px/1.45 'Noto Sans',sans-serif;box-shadow:0 14px 30px -12px rgba(15,42,51,0.6)}
@media (max-width: 1000px){.sj-has-mbar .sj-lang-preview{bottom:96px}}

/* RTL (Hebrew pages): mirror the few physical left/right rules of the shell */
[dir="rtl"] .sj-skip{left:auto;right:12px}
[dir="rtl"] .hdr-prog{left:auto;right:0}
[dir="rtl"] .burger .bl{left:auto;right:calc(50% - 12px)}
[dir="rtl"] a.lk::after{transform-origin:left}
[dir="rtl"] a.lk:hover::after,[dir="rtl"] a.lk.on::after{transform-origin:right}
[dir="rtl"] .sheet a.m:hover span{transform:translateX(-8px)}
/* Hebrew: Manrope has no Hebrew glyphs, so everything uses Noto Sans Hebrew (Latin falls back to
   Noto Sans) with no negative letter-spacing. */
html[lang="he"] body.sj-theme,html[lang="he"] body.sj-theme *{font-family:'Noto Sans Hebrew','Noto Sans',sans-serif !important;letter-spacing:0 !important}

/* PDPA cookie notice on phones (v1.0.8): compact bottom sheet, at most ~30% of the screen, one row of
   buttons, safe-area aware. Only the layout changes; the plugin still decides when it shows and what
   it does. While it is open the chat launcher and the WhatsApp button move above it (body.sj-pdpa-on
   and --sj-pdpa-h come from sj.js; the :has() rules cover the moment before the script runs). */
@media (max-width: 600px){
body.sj-theme .dpdpa--popup{left:12px !important;right:12px !important;width:auto !important;max-width:none !important;margin:0 !important;bottom:calc(12px + env(safe-area-inset-bottom,0px)) !important}
body.sj-theme.sj-has-mbar .dpdpa--popup{margin:0 !important;bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important}
body.sj-theme .dpdpa--popup-container{max-height:30vh !important;max-height:30dvh !important;overflow:hidden !important;gap:8px !important;padding:12px 14px !important;border-radius:14px !important;font-size:13px !important}
body.sj-theme .dpdpa--popup-text{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 36px 0 0 !important}
body.sj-theme .dpdpa--popup-text::-webkit-scrollbar{display:none}
body.sj-theme .dpdpa--popup-text p{padding:0 !important;font-size:13px !important;line-height:1.4 !important}
body.sj-theme .dpdpa--popup-button-group{flex:none !important;flex-wrap:nowrap !important;gap:8px !important}
body.sj-theme .dpdpa--popup-button{flex:1 1 0 !important;min-width:0 !important;min-height:42px !important;padding:0 12px !important;font-size:13px !important}
body.sj-theme .dpdpa--popup-close{top:2px !important;right:2px !important}
body.sj-pdpa-on .sjc-launch,body.sj-theme:has(.dpdpa--popup.active) .sjc-launch,body.sj-pdpa-on .sj-wa,body.sj-theme:has(.dpdpa--popup.active) .sj-wa{bottom:calc(var(--sj-pdpa-h,30vh) + 24px + env(safe-area-inset-bottom,0px)) !important}
body.sj-has-mbar.sj-pdpa-on .sjc-launch,body.sj-theme.sj-has-mbar:has(.dpdpa--popup.active) .sjc-launch,body.sj-has-mbar.sj-pdpa-on .sj-wa,body.sj-theme.sj-has-mbar:has(.dpdpa--popup.active) .sj-wa{bottom:calc(var(--sj-pdpa-h,30vh) + 96px + env(safe-area-inset-bottom,0px)) !important}
}

/* v1.0.11 layout fixes (owner report on /fr/catamaran-koh-samui/).
   1. Stacking: the header (z-index 40 above) now sits above the sticky trip sub-nav (.sub, z 20), the
      mobile booking bar (19) and the WhatsApp button (15), so the language menu always opens on top.
      The menu sheet (60), lightbox (70) and cookie notice stay above the header. */
.lsw-menu{max-height:calc(100vh - var(--sj-hdr-h) - 24px);max-height:calc(100dvh - var(--sj-hdr-h) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.lsw-menu::-webkit-scrollbar{display:none}
/* 2. Header at mid widths: logo never shrinks, labels never wrap; below 1280px the small "EN" badges hide
      (screen readers still hear "(in English)"), gaps and the button tighten; below 1180px the burger menu
      takes over (unchanged, see the 1180px query above). */
.hdr-in{gap:24px}
.brand{flex:none}
.nav{min-width:0}
.nav a.lk,.nav .lsw-btn,.nav a.btn{white-space:nowrap;flex:none}
@media (max-width: 1280px){
.hdr .nav{gap:18px}
.hdr .nav .en-tag{display:none}
.hdr .nav a.btn{padding:0 18px}
.hdr .lsw-btn{padding:0 10px}
}
/* 3. Trip sub-nav tabs (catamaran, elephant, safari and the language pages): the active tab is scrolled
      fully into view by sj.js; soft fades show that more tabs sit beyond the edge. */
main.sj-x .sub .tabs{min-width:0;scroll-padding-inline:20px;overscroll-behavior-x:contain}
main.sj-x .sub .tabs.fade-e{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
main.sj-x .sub .tabs.fade-s{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
main.sj-x .sub .tabs.fade-s.fade-e{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
[dir="rtl"] main.sj-x .sub .tabs.fade-e{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
[dir="rtl"] main.sj-x .sub .tabs.fade-s{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
main.sj-x .sub .sub-cta{flex:none}
/* 4. Booking card: the brochure button wraps neatly (icon + centred text, auto height); the sticky top
      comes from sj.js (--sj-book-top) so a tall card sticks by its bottom edge, clear of the chat button;
      on short screens the card tightens up. */
main.sj-x .book .brochure{height:auto;min-height:48px;padding:10px 22px;line-height:1.35;text-align:center;text-wrap:balance}
main.sj-x .book .brochure svg{flex:none}
main.sj-x .book .brochure .bro-t{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:start;line-height:1.3}
main.sj-x .book .brochure .bro-t small{font-size:12.5px;font-weight:500;opacity:.75}
main.sj-x .book{top:var(--sj-book-top,calc(var(--sj-top) + 96px))}
@media (min-width: 1001px) and (max-height: 860px){
main.sj-x .book{padding:24px 26px}
main.sj-x .book h3{margin:2px 0 10px}
main.sj-x .book .prow{padding:10px 0}
main.sj-x .book .btn{margin-top:16px;min-height:52px}
main.sj-x .book .ok{margin-top:10px}
}
/* chat launcher (SJ Concierge plugin): icon-only while it would cover the booking card (class set by sj.js) */
body.sj-launch-mini .sjc-launch[aria-expanded="false"]{width:56px;height:56px;min-height:56px;padding:0;justify-content:center;gap:0}
body.sj-launch-mini .sjc-launch[aria-expanded="false"] .sjc-launch-label{display:none}

/* v1.0.12 focus: no ring after a mouse click or tap (the browser's heavy black/white box), a slim brand-teal
   ring with an offset for keyboard users only. Zero-specificity :where() so component rules still win. */
:where(body.sj-theme) :focus:not(:focus-visible){outline:none}
:where(body.sj-theme) :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #0E5E63;outline-offset:3px;border-radius:2px}
:where(body.sj-theme) :where(.hero,.dark,.foot,.sheet,.help,.promo,.sj-promo,.band,.rgrid a.all) :where(a,button,summary,[tabindex]):focus-visible{outline-color:#F6F2EA}

/* v1.0.14 header: "Private tours" item (a.lk-pvt). Measured with EN / DE / FR / HE labels and the language
   switcher: with 18px gaps the full row fits the 1144px header from 1281px up; between 1181 and 1280px the item
   is hidden (it stays in the footer, and in the menu sheet below 1180px), as the "EN" badges are. */
.hdr .nav:has(.lk-pvt){gap:18px}
@media (max-width: 1280px){.hdr .nav .lk-pvt{display:none}}