/* ==========================================================================
   OLS KIT · olk-modern.css  (shared, identical in every template)
   Moderate modern refresh + rendering guards + mobile bar + motion features.
   Loaded AFTER the template's inline <style>. Colours/fonts come from the
   --k-* tokens written per template in <style id="olk-tokens"> (which map to
   the template's own variables and the theme-picker --tp-* tokens).
   ========================================================================== */
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-wrap:break-word}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:color-mix(in srgb,var(--k-accent) 35%,transparent)}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid var(--k-ring,var(--k-accent));outline-offset:3px;border-radius:6px}
:where(input,textarea,select){transition:border-color .2s,box-shadow .2s,background-color .2s}
:where(form) :where(input,textarea,select):focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--k-accent) 22%,transparent);outline:none}
:where(form) :where(input,textarea,select){border-radius:var(--k-field-radius,8px)}
img{height:auto}

/* ---- rendering guards carried over from pier-pleasure (real-site fixes) ---- */
section:not(#nearby):not(#contact),.snap-section{position:relative;isolation:isolate}
#nearby{overflow-y:visible!important}
/* stop slide-in / translate animations from creating sideways scroll (clip keeps sticky working) */
section,.snap-section,.panel{overflow-x:clip}
.olk-near-wrap,.olk-near,.olk-rev,.olk-amen{min-width:0;max-width:100%}
.olk-near-wrap{width:100%}
:where(div,section):has(> .olk-near-wrap,> .olk-near,> .olk-rev){min-width:0}
p,h1,h2,h3{overflow-wrap:break-word;max-width:100%}
#hero{opacity:1!important;visibility:visible!important}
#hero img.bg,#hero .bg,#hero .parallax-bg,.hero-right img,.hero-img-wrap img{object-fit:cover}
.olk-gcard{overflow:hidden}
.olk-gcard img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- buttons: consistent radius, lift on hover, visible focus ---- */
.olk-btn{border-radius:var(--k-btn-radius,999px)!important;transition:transform .2s ease,box-shadow .25s ease,background-color .2s,color .2s,border-color .2s,filter .2s!important}
.olk-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--k-accent) 75%,transparent);filter:brightness(1.04)}
.olk-btn:active{transform:translateY(0) scale(.98)}
.olk-btn:focus-visible{outline:3px solid var(--k-ring,var(--k-accent));outline-offset:3px}
:where(form) :where(button[type=submit]){border-radius:var(--k-btn-radius,999px);transition:transform .2s,box-shadow .25s,filter .2s}
:where(form) :where(button[type=submit]):hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 12px 26px -14px rgba(0,0,0,.45)}

/* ---- sticky nav that turns solid on scroll (class set by olk-modern.js) ---- */
.olk-nav{transition:background-color .35s ease,box-shadow .35s ease,padding .3s ease,backdrop-filter .35s}
.olk-nav.is-scrolled,nav.scrolled{mix-blend-mode:normal!important;background:color-mix(in srgb,var(--k-nav-solid,var(--k-dark)) 90%,transparent)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
html[data-olk-nav="light"] .olk-nav.is-scrolled{background:color-mix(in srgb,var(--k-bg) 92%,transparent)!important;box-shadow:0 8px 24px -14px rgba(0,0,0,.25)}
html[data-olk-nav="shadow"] .olk-nav.is-scrolled{background:inherit;box-shadow:0 8px 24px -14px rgba(0,0,0,.28)}

/* ---- reveal on scroll (motion-safe only; failsafe in JS) ---- */
@media (prefers-reduced-motion:no-preference){
  html.olk-js .olk-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.22,.61,.36,1) var(--olk-delay,0ms),transform .8s cubic-bezier(.22,.61,.36,1) var(--olk-delay,0ms)}
  html.olk-js .olk-reveal.olk-in{opacity:1;transform:none}
}

/* ---- inline Lucide icons (replace Bootstrap Icons font glyphs) ---- */
.olk-ico{display:inline-flex;align-items:center;justify-content:center;line-height:1;vertical-align:-.125em;font-style:normal}
.olk-ico>svg{width:1em;height:1em;display:block;flex-shrink:0}
svg.olk-i{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex-shrink:0}

/* ---- Mobile sticky action bar (Book Now + WhatsApp) — a <div>, never a <nav> ---- */
.mbar{display:none}
/* T = phones + tablets (portrait & landscape, incl. touch tablets up to 1200px wide) */
@media (max-width:1024px),(hover:none) and (pointer:coarse) and (max-width:1200px){
  :root{--mbar-h:68px}
  body{padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom,0px))!important}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;top:auto!important;height:auto!important;max-height:none;flex-direction:row;z-index:1100;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--k-dark) 92%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -8px 30px rgba(0,0,0,.18)}
  .mbar.mbar-single{grid-template-columns:1fr}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;min-height:48px;max-height:56px;border-radius:var(--k-btn-radius-sm,12px);
    font-family:var(--k-body);font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
    transition:transform .15s ease,filter .2s ease;-webkit-tap-highlight-color:transparent}
  .mbar a:active{transform:scale(.97)}
  .mbar a svg{width:18px;height:18px}
  .mbar .mbar-book{background:var(--k-cta,var(--k-accent));color:var(--k-on-cta,var(--k-on-accent));box-shadow:0 4px 14px color-mix(in srgb,var(--k-cta,var(--k-accent)) 40%,transparent)}
  .mbar .mbar-wa{background:#25d366;color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.35)}
  .mbar a:focus-visible{outline:3px solid #fff;outline-offset:2px}
  /* the bar replaces floating WhatsApp / book buttons on mobile */
  .wa-fab,.wa,.wf,.olk-wa-float,a.wa-float,.book-float,body>a[href*="wa.me"][style*="position:fixed"]{display:none!important}
  .cc-top{bottom:calc(var(--mbar-h) + 16px + env(safe-area-inset-bottom,0px))!important;right:14px!important}
}
@media print{.mbar,.tp-root{display:none!important}}
/* ---- touch targets (phones + tablets): menu/close icon buttons, tabs, chips get an invisible >=44px hit area (look and layout unchanged) ---- */
@media (max-width:1024px),(hover:none) and (pointer:coarse) and (max-width:1200px){
  :where(#menu-btn,#mob-btn,#mb,#dc,#mob-close,#drawer-close,#d-close,.tab-btn,.cc-tab-btn,.olk-dn-btn,.olkn-chip){position:relative}
  :is(#menu-btn,#mob-btn,#mb,#dc,#mob-close,#drawer-close,#d-close,.tab-btn,.cc-tab-btn,.olk-dn-btn,.olkn-chip)::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}
}
/* underlined text-link CTAs: invisible 44px hit area on touch screens (look unchanged) */
@media (pointer:coarse){
  :is(a.btn-txt,a.h-btn2){position:relative}
  :is(a.btn-txt,a.h-btn2)::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
  a.h-btn2.cc-shine{overflow:visible}
}
/* hero slider dots / carousel dots: tiny visuals, 44px invisible hit area */
:is(.h-dot,.car-dot,.q-dot,.o5-dot,.o5-qd,.o5-seg,.hero-dots>button){position:relative}
:is(.h-dot,.car-dot,.q-dot,.o5-dot,.o5-qd,.o5-seg,.hero-dots>button)::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}


/* ---- responsive safety at 390px ---- */
@media (max-width:480px){
  iframe{max-width:100%}
  h1,h2{overflow-wrap:break-word;hyphens:auto}
  table{display:block;overflow-x:auto}
}

/* ==========================================================================
   MOTION FEATURES (opt-in per template via <html data-olk-motion="...">)
   kenburns · parallax · drift · marquee · wipe · hoverslide
   All respect prefers-reduced-motion (static fallback).
   ========================================================================== */
/* kenburns: hero crossfade slideshow of the template's own gallery images */
.olk-kb{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.olk-kb-s{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease;will-change:opacity,transform}
.olk-kb-s.on{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .olk-kb-s.on{animation:olk-ken 9s ease-out both}
  .olk-kb.paused .olk-kb-s{animation-play-state:paused}
}
@keyframes olk-ken{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-2%,-1.5%,0)}}
.olk-kb-dots{position:absolute;right:18px;bottom:18px;display:flex;gap:6px;z-index:5;pointer-events:auto}
.olk-kb-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .3s,background .3s}
.olk-kb-dots button[aria-current="true"]{width:22px;border-radius:6px;background:#fff}
@media (max-width:768px){.olk-kb-dots{display:none}}

/* parallax: JS moves [data-olk-px] images (desktop only) */
[data-olk-px]{will-change:transform}

/* drift: slowly drifting colour mesh behind a section's content */
.olk-drift-layer{position:absolute;inset:-20%;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(40% 50% at 20% 30%,color-mix(in srgb,var(--k-accent) 38%,transparent),transparent 70%),
             radial-gradient(35% 45% at 80% 70%,color-mix(in srgb,var(--k-primary,var(--k-accent)) 42%,transparent),transparent 70%),
             radial-gradient(30% 40% at 60% 10%,color-mix(in srgb,var(--k-accent2,var(--k-accent)) 26%,transparent),transparent 70%)}
.olk-drift-host{overflow:hidden}
@media (prefers-reduced-motion:no-preference){.olk-drift-layer{animation:olk-drift 28s ease-in-out infinite alternate}}
@keyframes olk-drift{0%{transform:translate3d(-4%,-3%,0) rotate(0deg) scale(1)}50%{transform:translate3d(3%,2%,0) rotate(8deg) scale(1.08)}100%{transform:translate3d(5%,-2%,0) rotate(-6deg) scale(1.02)}}

/* marquee: amenity ticker strip (markup injected by apply.py) */
.olk-marquee{overflow:hidden;background:var(--k-mq-bg,var(--k-dark));color:var(--k-mq-fg,#fff);border-block:1px solid color-mix(in srgb,var(--k-accent) 25%,transparent);padding:14px 0;position:relative;z-index:1}
.olk-mq-track{display:flex;width:max-content;gap:0}
.olk-mq-item{display:inline-flex;align-items:center;gap:10px;padding:0 28px;font-family:var(--k-body);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.olk-mq-item svg{width:18px;height:18px;color:var(--k-accent)}
.olk-mq-item::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--k-accent);margin-left:28px;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .olk-mq-track{animation:olk-mq 38s linear infinite}
  .olk-marquee:hover .olk-mq-track,.olk-marquee:focus-within .olk-mq-track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.olk-marquee{overflow-x:auto}.olk-mq-dup{display:none}}
@keyframes olk-mq{to{transform:translateX(-50%)}}

/* wipe: image reveal on scroll */
@media (prefers-reduced-motion:no-preference){
  html.olk-js .olk-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.77,0,.18,1) var(--olk-delay,0ms)}
  html.olk-js .olk-wipe.olk-wiped{clip-path:inset(0 0 0 0)}
}

/* hoverslide: gallery cards pan + zoom with a sliding accent bar */
html[data-olk-motion~="hoverslide"] .olk-gcard{position:relative}
html[data-olk-motion~="hoverslide"] .olk-gcard img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1),filter .6s}
html[data-olk-motion~="hoverslide"] .olk-gcard::before{content:'';position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--k-accent);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,.61,.36,1);z-index:2;pointer-events:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html[data-olk-motion~="hoverslide"] .olk-gcard:hover img{transform:scale(1.1) translateX(-3%);filter:saturate(1.12)}
  html[data-olk-motion~="hoverslide"] .olk-gcard:hover::before{transform:scaleX(1)}
}

/* ---- Hero star rating badge (.hero-rating / .olk-rating) — PLACEHOLDER value set in data-rating on the element.
   Launch checklist: right after the hero h1, gold stars with half-star support + score, generic label,
   no OTA names/logos, no review count; hidden when data-rating is empty or 0. ---- */
.olk-rating{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;width:max-content;max-width:100%;margin:14px 0 18px;padding:7px 14px 7px 11px;
  border-radius:999px;font-family:var(--k-body);font-size:13.5px;line-height:1;font-weight:500;letter-spacing:.01em;color:inherit;
  background:color-mix(in srgb,currentColor 11%,transparent);border:1px solid color-mix(in srgb,currentColor 24%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);position:relative;z-index:3;text-transform:none;font-style:normal}
.olk-rating[hidden]{display:none!important}
.olk-stars{position:relative;display:inline-block;line-height:0;white-space:nowrap;flex-shrink:0}
.olk-stars svg{width:15px;height:15px;margin-right:1.5px;display:inline-block;vertical-align:top}
.olk-stars-base{color:color-mix(in srgb,currentColor 30%,transparent)}
.olk-stars-fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--k-star,#f5b301)}
.olk-rating-score{font-weight:700;font-variant-numeric:tabular-nums}
.olk-rating-sep{opacity:.55}
.olk-rating-label{opacity:.88;white-space:nowrap}
.olk-js .olk-rating{animation:olkRateIn .7s cubic-bezier(.2,.8,.2,1) .7s both}
@keyframes olkRateIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:480px){.olk-rating{font-size:12.5px;gap:7px;margin:10px 0 14px;padding:6px 12px 6px 10px}.olk-stars svg{width:13px;height:13px}}
@media (prefers-reduced-motion:reduce){.olk-rating{animation:none!important}}