/* Marinova shared yacht tours page: layout layer. */
/* Readiness: until the page script has finished wiring the page (data-st-ready on the root), the page is a readable list
   of tours, times and prices with the direct WhatsApp line; nothing half-wired looks usable. */
#st-root:not([data-st-ready]) .st-panel[hidden]{display:block}
#st-root:not([data-st-ready]) .st-book,#st-root:not([data-st-ready]) .st-continue,#st-root:not([data-st-ready]) .st-head-r,#st-root:not([data-st-ready]) .rt-tabs,#st-root:not([data-st-ready]) .syt-arrow{display:none}
#st-root:not([data-st-ready]) .st-head,#st-root:not([data-st-ready]) .st-slot,#st-root:not([data-st-ready]) .syt-thumb{pointer-events:none;cursor:default}
#st-root:not([data-st-ready]) .rt-panel{display:block}
#st-root[data-st-ready] [data-st-fallback]{display:none}
/* The FAQ items are native details/summary pairs: they open and close with no script, so their indicator stays. */
#st-root.uirh-service .faq-q{cursor:pointer}
#st-root.uirh-service .faq-q-ico{display:flex}
/* The shared header sits in the page flow, so the hero no longer reserves room for a fixed header. */
#st-root.uirh-service{--hh:0px}
/* Hero: the page keeps its own dark gradient hero (it has no photograph) under the standard shared header, in both themes.
   The hero re-declares the family's Dark token values so its text, gold and buttons read as on a dark surface whatever
   the page theme; the family's photographic hero geometry (left column, ivory fade, fixed-header padding) is replaced by
   the page's own centred layout. The header is in the page flow, so each legacy height loses the header height. */
#st-root.uirh-service .pg-hero{--navy:#0A1B29;--navy2:#0F2536;--navy3:#0F2536;--navy4:#16324A;--white:#EAF1F7;--t1:#EAF1F7;--t2:#A9BDD0;--t3:#8FA3B6;--b1:#22384C;--b2:#33506B;--b3:#1A2E40;--gold:#D9B981;--gold-h:#E8CFA3;--gold-dim:rgba(201,169,110,.12);--gold-dim2:rgba(201,169,110,.20);--gold-b:rgba(201,169,110,.42);--gold-dec:#C8A97A;--ink:#EAF1F7;--ink-h:#D7E3EC;--on-ink:#0B2234;
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:60px 24px 72px;min-height:clamp(454px,calc(65vh - 66px),614px);color:var(--t1)}
#st-root.uirh-service .pg-hero-fallback{inset:0;background:radial-gradient(ellipse 90% 70% at 50% 35%,rgba(20,55,110,.55) 0%,transparent 62%),radial-gradient(ellipse 60% 45% at 72% 72%,rgba(201,169,110,.09) 0%,transparent 55%),linear-gradient(155deg,#0b1e3a 0%,#162e52 55%,#0b1e3a 100%)}
#st-root.uirh-service .pg-hero-overlay{inset:0;left:0;right:0;bottom:0;height:auto;background:linear-gradient(180deg,rgba(11,22,40,.30) 0%,rgba(11,22,40,.68) 65%,rgba(11,22,40,.90) 100%)}
#st-root.uirh-service .pg-hero-in{max-width:680px;margin:0 auto;padding:0;min-height:0;width:100%}
#st-root.uirh-service .pg-hero h1{max-width:none;margin-left:auto;margin-right:auto}
#st-root.uirh-service .pg-hero-lbl{color:var(--gold)}
#st-root.uirh-service .pg-hero-sub{color:var(--t2);margin-left:auto;margin-right:auto}
#st-root.uirh-service .pg-hero-trust{color:var(--t3)}
#st-root.uirh-service .hero-btns{justify-content:center}
#st-root.uirh-service .btn-ghost{border-radius:999px;min-height:44px;padding:11px 22px;font-size:13.5px;letter-spacing:0;text-transform:none;justify-content:center;text-align:center;color:var(--t1);border-color:var(--b2)}
#st-root.uirh-service .btn-ghost:hover{border-color:var(--t2)}
@media(min-width:901px){#st-root.uirh-service .pg-hero{min-height:clamp(574px,calc(90vh - 66px),834px)}}
@media(max-width:900px){#st-root.uirh-service .pg-hero{padding:48px 24px 56px;min-height:calc(86vh - 56px)}}
@media(max-width:600px){#st-root.uirh-service .pg-hero{padding:40px 20px 48px;min-height:calc(88vh - 56px)}}
@media(max-width:600px){#st-root.uirh-service .hero-btns{flex-direction:column;align-items:center}#st-root.uirh-service .hero-btns>a{width:100%;max-width:320px}}
@media(max-width:359px){#st-root.uirh-service .btn-ghost{white-space:normal;max-width:100%;line-height:1.3}}
/* Light theme: the page's literal translucent-white borders were drawn for a dark surface; on the ivory surface they
   use the family border token. */
#st-root.uirh-service:not(:is([data-theme="dark"] *)) .st-slot,#st-root.uirh-service:not(:is([data-theme="dark"] *)) .st-in{border-color:var(--b2)}
/* Alignment: section steps, headings, short introductions, standalone actions and action groups are centred; every
   button label (wrapped or not, with its icon) is centred; fields, validation, summary values and long text stay
   start-aligned inside their centred containers. */
#st-root.uirh-service .st-step{text-align:center}
#st-root.uirh-service .sec-hd,#st-root.uirh-service .sec-sub{text-align:center;margin-left:auto;margin-right:auto}
#st-root.uirh-service :is(.btn,.btn-ghost,.st-send,.st-continue){justify-content:center;text-align:center}
#st-root.uirh-service :is(.st-book,.st-sum,.st-field,.st-err,.faq-a-in){text-align:start}
#st-root.uirh-service :is(.sec-hd,.sec-hd-c){text-align:center}
#st-root.uirh-service :is(.sec-hd,.sec-hd-c) :is(.stit,.sec-sub,.sec-body){margin-left:auto;margin-right:auto;text-align:center}
#st-root.uirh-service :is(.sec-hd,.sec-hd-c) .lbl{justify-content:center}
#st-root.uirh-service :is(.st-card-note,.rt-cap,.inc-note,.syt-gallery-note){text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
#st-root.uirh-service #family>.sec-in>p.sec-body{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
#st-root.uirh-service h3.hiw-ti{text-align:center}
/* One button system: the booking actions (Continue, Send) take the family's ink pill, full width as before. */
#st-root.uirh-service .btn-full{background:var(--ink);color:var(--on-ink);border:1px solid var(--ink);border-radius:999px;min-height:44px;font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none}
#st-root.uirh-service .btn-full:hover{background:var(--ink-h);border-color:var(--ink-h)}
#st-root.uirh-service .btn-full svg{width:15px;height:15px;flex:0 0 15px}
/* The page's translucent gold small labels were drawn for a dark surface; they take the theme's gold token, which meets
   text contrast on both surfaces. */
#st-root.uirh-service :is(.st-step,.st-slot-exp,.rt-tab.is-active .rt-tab-day,.rt-rules-hd){color:var(--gold)}
/* Hero actions: on wider screens the two buttons form one balanced row of equal widths. */
@media(min-width:601px){#st-root.uirh-service .hero-btns{display:grid;grid-template-columns:repeat(2,248px);justify-content:center;gap:12px}#st-root.uirh-service .hero-btns>a{width:100%}}
/* Validation colours: the page's literal pink error text and border were drawn for a dark surface; they take the
   family's error tokens (Light #9B3412, Dark #F0A88C), so the message reads on both surfaces. Wording unchanged. */
#st-root.uirh-service .st-err{color:var(--err);background:var(--err-bg);border-color:var(--err-b)}
#st-root.uirh-service .st-in--bad{border-color:var(--err)}
/* Centred labels keep no decorative rule before them (the legacy .sec-hd-c treatment, now on every centred label). */
#st-root.uirh-service :is(.sec-hd,.sec-hd-c) .lbl::before{display:none}
/* Buttons with an icon (the E2 treatment): a label that wraps (narrow phones, enlarged text) is centred line by line with
   the icon leading its first line, instead of the icon pinned to one edge beside a centred text block. One-line buttons
   keep a 44px height with the label centred vertically. Wording and behaviour unchanged. */
#st-root.uirh-service :is(.pg-hero .btn,#how-to-book .btn,#stSend),#st-root.uirh-service .st-item.st-ready .st-continue{display:block;text-align:center;line-height:20px;padding-block:12px;min-height:44px}
#st-root.uirh-service :is(.pg-hero .btn,#how-to-book .btn,#stSend,.st-continue) svg{display:inline-block;vertical-align:-3px;margin-inline-end:6px}
#st-root.uirh-service #how-to-book .btn{display:inline-block}
/* Route tabs: the duration figure's line box covers its glyphs (line-height 1 let WebKit draw the glyphs 2px above the
   box, so the tab label read high at enlarged text). */
#st-root.uirh-service .rt-tab-dur{line-height:1.15}
/* Fragment targets (the section links, the in-page Choose Tour & Time and Continue links, the skip link's sections) land
   below the shared sticky header. */
#st-root.uirh-service :is(section.sec[id],#st-book){scroll-margin-top:calc(var(--ui-header,66px) + 24px)}
/* Gallery arrows keep a 44px target on phones (the legacy 36px phone size is below the target size). */
#st-root.uirh-service .syt-arrow{width:44px;height:44px}
/* Two small notes on the token for secondary text that meets 4.5:1 in Light (the lighter tertiary token measured 3.7-4.0:1
   on the ivory and panel surfaces). */
#st-root.uirh-service :is(.st-sum-vat,.rt-cap){color:var(--t2)}
/* The child-age selects keep the 48px field height in WebKit too (its native menu control ignored the box height and
   rendered 25px high): drawn as a field like the inputs beside them, with a chevron in the secondary text colour of each
   theme. The options, values and keyboard behaviour stay the browser's own. */
#st-root.uirh-service select.st-in{-webkit-appearance:none;appearance:none;padding-right:40px;background-repeat:no-repeat;background-position:right 14px center;background-size:14px 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23425466' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
#st-root.uirh-service:is([data-theme="dark"] *) select.st-in{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BDD0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}