/* THE SHARED HEADER AND FOOTER — every traveller page (Chiran, 22–23 October 2026)
   Generated from sarisara-home-2026.css: every header, mega-menu, phone-menu and footer rule,
   tied to .ss-chrome so the old theme's own .nav / .btn / .close classes elsewhere on a page are
   never touched. The homepage loads this too. Edit the rules here, not in the homepage file. */
.ss-chrome .pg {max-width: 1440px; margin: 0 auto;}
.ss-chrome .pad {padding-left: 64px; padding-right: 64px;}
@media (max-width: 900px) {
.ss-chrome .pad {padding-left: 24px; padding-right: 24px;}
}
.ss-chrome .nav {position: absolute; top: 0; left: 0; right: 0; z-index: 30;
         display: flex; align-items: center; gap: 26px; padding-top: 22px; padding-bottom: 22px;}
.ss-chrome .nav__logo {display: flex; align-items: center; gap: 11px; margin-right: auto; text-decoration: none; flex: 0 0 auto;}
.ss-chrome .nav__logo img {width: auto; height: auto; object-fit: contain;}
.ss-chrome .nav__logo .nav__mark {width: 36px; height: auto;}
.ss-chrome .nav__logo .nav__word {height: 15px; width: auto;}
.ss-chrome .nav a.l {position: relative; font-family: var(--font-label); font-size: var(--t-micro);
             color: rgba(255,255,255,.86); text-decoration: none; letter-spacing: .01em;
             white-space: nowrap; padding: 8px 0; transition: color .15s;}
.ss-chrome .nav a.l:hover {color: #fff;}
@media (max-width: 1279px) {
.ss-chrome .nav a.l, .ss-chrome .nav .drop {display: none;}
}
.ss-chrome .nav__burger {display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.34);
                 border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
                 color: #fff; cursor: pointer; align-items: center; justify-content: center;}
.ss-chrome .nav__burger svg {width: 18px !important; height: 18px !important; min-width: 18px !important; display: block; stroke: #fff; fill: none;}
.ss-chrome .nav__burger svg path {stroke: #fff;}
@media (max-width: 1279px) {
.ss-chrome .nav.open {flex-wrap: wrap; background: rgba(9,9,32,.94); backdrop-filter: blur(14px);
                padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12);}
.ss-chrome .nav.open a.l, .ss-chrome .nav.open .drop {display: block; flex: 0 0 100%; order: 10; padding: 13px 0;
                border-top: 1px solid rgba(255,255,255,.1); font-size: 15px; letter-spacing: 0; text-transform: none;}
.ss-chrome .nav.open .drop > a.l {border-top: 0; padding: 0; display: flex;}
.ss-chrome .nav.open .drop__p {position: static; opacity: 1; visibility: visible; transform: none; margin-top: 12px;
                box-shadow: none; max-width: none; width: 100%;}
.ss-chrome .nav.open .nav__burger {order: 1;}
}
@media (max-width: 1279px) {
.ss-chrome .nav__burger {display: flex;}
.ss-chrome .nav {gap: 12px;}
.ss-chrome .nav__logo {width: 142px;}
}
.ss-chrome .nav .cta {font-family: var(--font-label); font-size: 13px; font-weight: var(--fw-ui);
              color: var(--navy); background: #fff; padding: 11px 20px; border-radius: 999px;
              text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s;}
.ss-chrome .nav .cta:hover {background: var(--primary); color: #fff;}
.ss-chrome .ftr {padding-bottom: 8px; font-family: var(--font-label); color: #fff;}
.ss-chrome .ftr a {color: inherit; text-decoration: none;}
.ss-chrome .ftr__news {display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); flex-wrap: wrap;}
.ss-chrome .ftr__news b {display: block; font-family: var(--font-heading); font-size: 20px; font-weight: 600; letter-spacing: -.01em;}
.ss-chrome .ftr__news span {display: block; font-size: 13px; color: rgba(255,255,255,.64); margin-top: 4px;}
.ss-chrome .ftr__form {flex: 0 1 560px; min-width: 0;}
.ss-chrome .ftr__main {display: grid; grid-template-columns: minmax(240px, 1.1fr) 3fr; gap: 56px; padding: 48px 0 40px;}
.ss-chrome .ftr__logo {display: inline-flex; align-items: center; gap: 11px;}
.ss-chrome .ftr__logo .mk {width: 36px !important; height: auto !important;}
.ss-chrome .ftr__logo .wm {height: 15px !important; width: auto !important;}
.ss-chrome .ftr p.ftr__slogan {max-width: none; font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin: 20px 0 6px; letter-spacing: -.01em; color: #fff;}
.ss-chrome .ftr p.ftr__promise {font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.64); margin: 0 0 22px; max-width: 30ch;}
.ss-chrome .ftr__socs {display: flex; gap: 10px; flex-wrap: wrap;}
.ss-chrome .ftr__soc {width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); display: grid; place-items: center; color: rgba(255,255,255,.86) !important; transition: background-color .15s, border-color .15s;}
.ss-chrome .ftr__soc:hover {background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4);}
.ss-chrome .ftr__soc svg {width: 18px !important; height: 18px !important; display: block;}
.ss-chrome .ftr__cols {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;}
.ss-chrome .ftr__col h4 {margin: 0 0 14px; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5);}
.ss-chrome .ftr__col ul {list-style: none; margin: 0; padding: 0; display: grid; gap: 11px;}
.ss-chrome .ftr__col a {font-size: 13px; color: rgba(255,255,255,.86) !important; transition: color .15s;}
.ss-chrome .ftr__col a:hover {color: #fff !important;}
.ss-chrome .ftr__contact {display: flex; gap: 12px; flex-wrap: wrap; padding: 0 0 28px;}
.ss-chrome .ftr__contact a {display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: 13px;}
.ss-chrome .ftr__contact a:hover {background: rgba(255,255,255,.1);}
.ss-chrome .ftr__contact svg {width: 18px !important; height: 18px !important; color: #C9A5FF;}
.ss-chrome .ftr__contact em {font-style: normal; color: rgba(255,255,255,.6); font-size: 12px;}
.ss-chrome .ftr__base {display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: center; padding: 22px 0 28px; border-top: 1px solid rgba(255,255,255,.12);}
.ss-chrome .ftr__pay {grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.ss-chrome .ftr__pay .lbl {font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-right: 4px;}
.ss-chrome .ftr__pay img {display: block; height: 32px !important; width: auto !important; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.14);}
.ss-chrome .ftr__pay .sep {width: 1px; height: 20px; background: rgba(255,255,255,.18); margin: 0 4px;}
.ss-chrome .ftr__pay .chip {display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); font-size: 12px; color: rgba(255,255,255,.86);}
.ss-chrome .ftr__pay .chip svg {width: 16px !important; height: 16px !important;}
.ss-chrome .ftr p.ftr__legal {max-width: none; line-height: 1.6; margin: 0; font-size: 11px; color: rgba(255,255,255,.46);}
.ss-chrome .ftr p.ftr__value {max-width: none; margin: 0; justify-self: end; font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: #C9A5FF;}
.ss-chrome .ftr__form .fluentform, .ss-chrome .ftr__form form {margin: 0 !important;}
.ss-chrome .ftr__form .ff-el-group {margin: 0 !important;}
.ss-chrome .ftr__form fieldset {display: block; margin: 0; padding: 0; border: 0; min-width: 0;}
.ss-chrome .ftr__form .ff-column-container {display: flex !important; gap: 10px; align-items: flex-start; flex-wrap: nowrap; margin: 0 !important;}
.ss-chrome .ftr__form .ff-column-container > .ff-t-cell {padding: 0 !important; width: auto !important; flex: 1 1 0; min-width: 0;}
.ss-chrome .ftr__form .ff-column-container > .ff-t-column-3 {flex: 0 0 auto; min-width: max-content;}
.ss-chrome .ftr__form .ff_submit_btn_wrapper {width: auto !important;}
.ss-chrome .ftr__form .ff-name-field-wrapper .ff-t-container {display: block !important; margin: 0 !important;}
.ss-chrome .ftr__form .ff-name-field-wrapper .ff-t-cell {padding: 0 !important; width: 100% !important;}
.ss-chrome .ftr__form .ff-el-input--label {position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
.ss-chrome .ftr__form input.ff-el-form-control {height: 46px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(255,255,255,.07) !important; color: #fff !important; padding: 0 20px !important; font: 400 14px var(--font-body) !important; box-shadow: none !important;}
.ss-chrome .ftr__form input.ff-el-form-control::placeholder {color: rgba(255,255,255,.46) !important;}
.ss-chrome .ftr__form input.ff-el-form-control:focus {border-color: var(--primary-mid, #A866FF) !important;}
.ss-chrome .ftr__form .ff_submit_btn_wrapper {flex: 0 0 auto;}
.ss-chrome .ftr__form .ff-btn-submit {width: auto !important; min-width: max-content !important; white-space: nowrap; height: 46px !important; padding: 0 24px !important; border-radius: 999px !important; border: 0 !important; background: var(--primary) !important; color: #fff !important; font: 500 13px var(--font-label) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;}
.ss-chrome .ftr__form .ff-btn-submit:hover {background: var(--primary-dark) !important;}
.ss-chrome .ftr__form .ff-message-success, .ss-chrome .ftr__form .text-danger, .ss-chrome .ftr__form .error {color: #fff !important; font-size: 13px; background: transparent !important; border: 0 !important; padding: 6px 0 0 !important; box-shadow: none !important;}
@media (max-width: 1080px) {
.ss-chrome .ftr__main {grid-template-columns: minmax(0, 1fr); gap: 34px;}
}
@media (max-width: 700px) {
.ss-chrome .ftr__news {flex-direction: column; align-items: stretch;}
.ss-chrome .ftr__form {flex: 1 1 auto;}
.ss-chrome .ftr__cols {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 18px;}
.ss-chrome .ftr__contact {flex-direction: column;}
.ss-chrome .ftr__contact a {justify-content: flex-start;}
.ss-chrome .ftr__base {grid-template-columns: 1fr;}
.ss-chrome .ftr p.ftr__value {justify-self: start;}
.ss-chrome .ftr__form .ff-column-container {flex-wrap: wrap;}
.ss-chrome .ftr__form .ff-column-container > .ff-t-cell {flex: 1 1 140px;}
.ss-chrome .ftr__form .ff-column-container > .ff-t-column-3 {flex: 1 1 100%;}
.ss-chrome .ftr__form .ff-btn-submit {width: 100% !important;}
}
.ss-chrome .nav__menu {display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0;}
.ss-chrome .nav__menu li {position: relative; margin: 0; padding: 0;}
.ss-chrome .nav__menu > li > a {position: relative; display: inline-block; font-family: var(--font-label); font-size: 13px; font-weight: var(--fw-ui);
  letter-spacing: 0; text-transform: lowercase; color: rgba(255,255,255,.86) !important; text-decoration: none; white-space: nowrap; padding: 8px 0; transition: color .15s;}
.ss-chrome .nav__menu > li > a::first-letter {text-transform: uppercase;}
.ss-chrome .nav__menu > li > a:hover, .ss-chrome .nav__menu > li.current-menu-item > a {color: #fff !important;}
.ss-chrome .nav__menu .sub-menu {position: absolute; left: -16px; top: 100%; min-width: 230px; margin: 0; padding: 10px; list-style: none; background: #fff; border-radius: 14px;
  box-shadow: var(--sh-4); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s; z-index: 40;}
.ss-chrome .nav__menu li:not(.has-mega):hover > .sub-menu, .ss-chrome .nav__menu li:not(.has-mega):focus-within > .sub-menu {opacity: 1; visibility: visible; transform: none;}
.ss-chrome .nav__menu .sub-menu a {display: block; padding: 9px 12px; border-radius: 8px; font-size: var(--t-body-sm); color: var(--navy) !important; text-decoration: none;}
.ss-chrome .nav__menu .sub-menu a:hover {background: var(--primary-ultra-light); color: var(--primary-dark) !important;}
@media (max-width: 1279px) {
.ss-chrome .nav__menu {display: none;}
.ss-chrome .nav.open .nav__menu {display: block; flex: 0 0 100%; order: 10;}
.ss-chrome .nav.open .nav__menu > li > a {display: block; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 15px; letter-spacing: 0; text-transform: lowercase;}
.ss-chrome .nav.open .nav__menu .sub-menu {position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255,255,255,.06); padding: 4px 10px 8px; margin: 0 0 10px;}
.ss-chrome .nav.open .nav__menu .sub-menu a {color: rgba(255,255,255,.86) !important;}
}
.ss-chrome .nav__menu > li.menu-item-has-children > a {padding-right: 16px;}
.ss-chrome .nav__menu > li.menu-item-has-children > a::after {content: ""; position: absolute; right: 0; top: 50%; width: 11px; height: 11px; margin-top: -5px;
  background: no-repeat center / 11px 11px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5.4 9.4 12 16l6.6-6.6'/></svg>");
  opacity: .8; transition: transform .18s;}
.ss-chrome .nav__menu > li.menu-item-has-children:hover > a::after {transform: rotate(180deg);}
.ss-chrome .nav .cta {background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important;}
.ss-chrome .nav .cta:hover {background: var(--primary-dark) !important; border-color: var(--primary-dark) !important;}
.ss-chrome .nav:not(.open) {flex-wrap: nowrap;}
@media (min-width: 901px) {
.ss-chrome .nav {max-width: none; padding-right: 64px; padding-left: max(64px, calc(50% - 656px));}
}
.ss-chrome .nav__tools {display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid rgba(255,255,255,.24);}
.ss-chrome .nav__partner {font-family: var(--font-label); font-size: 13px; font-weight: var(--fw-ui); color: rgba(255,255,255,.86) !important; text-decoration: none; white-space: nowrap; padding: 8px 0; transition: color .15s;}
.ss-chrome .nav__partner:hover {color: #fff !important;}
.ss-chrome .nav__tools li {position: relative; margin: 0; padding: 0;}
.ss-chrome .nav__tools a {font-family: var(--font-label); font-size: 13px; font-weight: var(--fw-ui); letter-spacing: .01em; color: rgba(255,255,255,.86) !important; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 8px 0; transition: color .15s;}
.ss-chrome .nav__tools a:hover {color: #fff !important;}
.ss-chrome .nav__tools .dropdown-toggle::after {display: none;}
.ss-chrome .nav__tools .dropdown-currency > a .fa, .ss-chrome .nav__tools .dropdown-user-dashboard > a .fa {display: inline-block; width: 11px; height: 11px; font-size: 0;}
.ss-chrome .nav__tools .dropdown-currency > a .fa::before, .ss-chrome .nav__tools .dropdown-user-dashboard > a .fa::before {content: ""; display: block; width: 11px; height: 11px;
  background: no-repeat center / 11px 11px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.86)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5.4 9.4 12 16l6.6-6.6'/></svg>");}
.ss-chrome .nav__tools .dropdown-menu {position: absolute; right: 0; left: auto; top: 100%; min-width: 150px; margin: 6px 0 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh-3); display: none; z-index: 40;}
.ss-chrome .nav__tools .dropdown-menu.show {display: block;}
.ss-chrome .nav__tools .dropdown-menu li {margin: 0;}
.ss-chrome .nav__tools .dropdown-menu a {display: block; padding: 8px 12px; border-radius: 8px; font-size: var(--t-body-sm); color: var(--navy) !important;}
.ss-chrome .nav__tools .dropdown-menu a:hover {background: var(--primary-ultra-light); color: var(--primary-dark) !important;}
.ss-chrome .nav__tools .dropdown-menu .dropdown-divider {margin: 6px 0; border: 0; border-top: 1px solid var(--border);}
.ss-chrome .nav__tools .nav__user {width: 44px; height: 44px; justify-content: center; padding: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.34);}
.ss-chrome .nav__tools .nav__user:hover {background: rgba(255,255,255,.12);}
.ss-chrome .nav__tools .nav__user svg {width: 17px !important; height: 17px !important; display: block;}
.ss-chrome .nav__tools .dropdown-user-dashboard {display: flex; align-items: center;}
.ss-chrome .nav__tools .nav__user--me {overflow: hidden; border: 0;}
.ss-chrome .nav__tools .nav__user--me img {width: 44px !important; height: 44px !important; border-radius: 999px; object-fit: cover; display: block; margin: 0 !important;}
.ss-chrome .nav__tools .dropdown-menu .nav__hi {padding: 8px 12px 10px; margin: 0 0 6px !important; border-bottom: 1px solid var(--border); font-family: var(--font-label); font-size: var(--t-body-sm); font-weight: var(--fw-strong); color: var(--navy); white-space: nowrap;}
.ss-chrome .nav__tools #sarisara-notif-bell {flex: 0 0 auto;}
.ss-chrome .nav__tools .dropdown-currency.d-none {display: list-item !important;}
@media (min-width: 1280px) and (max-width: 1439px) {
.ss-chrome .nav, .ss-chrome .nav__menu {gap: 14px;}
.ss-chrome .nav__tools {padding-left: 14px; gap: 12px;}
}
@media (min-width: 1280px) and (max-width: 1365px) {
.ss-chrome .nav, .ss-chrome .nav__menu {gap: 11px;}
.ss-chrome .nav__tools {padding-left: 12px; gap: 10px;}
}
@media (max-width: 1279px) {
.ss-chrome .nav__partner {display: none;}
.ss-chrome .nav.open .nav__partner {display: block; flex: 0 0 100%; order: 10; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 15px;}
.ss-chrome .nav__tools {display: none;}
.ss-chrome .nav.open .nav__tools {display: flex; flex-wrap: wrap; gap: 14px 22px; flex: 0 0 100%; order: 11; padding: 14px 0 4px; border-left: 0; border-top: 1px solid rgba(255,255,255,.1);}
.ss-chrome .nav.open .nav__tools a {font-size: 14px;}
/* The bell stays on a phone (Chiran, 25 Oct 2026): only the bell shows in the closed bar. */
.ss-chrome .nav:not(.open) .nav__tools {display: flex; align-items: center; gap: 0; padding: 0; margin-left: auto; border-left: 0;}
.ss-chrome .nav:not(.open) .nav__tools > *:not(#sarisara-notif-bell) {display: none;}
}
/* With the bell in the bar, a 390px phone needs a little room so the menu button keeps its 16px gutter. */
@media (max-width: 430px) {
.ss-chrome .nav:not(.open) {gap: 6px;}
.ss-chrome .nav:not(.open) .cta {padding-left: 12px !important; padding-right: 12px !important; font-size: 13px !important;}
.ss-chrome .nav:not(.open) #sarisara-notif-bell, .ss-chrome .nav:not(.open) #sarisara-notif-bell > a {width: 38px !important; height: 38px !important; min-width: 38px !important;}
.ss-chrome .nav:not(.open) .nav__burger {width: 38px; height: 38px;}
}
.ss-chrome .nav__menu > li.has-mega {position: static;}
.ss-chrome .nav__menu > li.has-mega > .sub-menu.mega-wrap {position: absolute; left: auto; right: 28px; top: 100%; transform: translateY(6px);
  width: min(1040px, calc(100vw - 56px)); min-width: 0; margin: 0; padding: 6px 0 0; background: transparent; box-shadow: none; border-radius: 0; z-index: 40;
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility 0s .18s;}
.ss-chrome .nav__menu > li.has-mega.is-open > .sub-menu.mega-wrap, .ss-chrome .nav__menu > li.has-mega:focus-within > .sub-menu.mega-wrap {opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s;}
.ss-chrome .nav__menu > li.has-mega:hover > .sub-menu.mega-wrap {opacity: 1; visibility: visible; transform: none;}
@media (max-width: 900px) {
.ss-chrome .nav__menu > li.has-mega > .sub-menu.mega-wrap {right: 16px; width: min(1040px, calc(100vw - 32px));}
}
.ss-chrome .nav__menu .mega {display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 12px; padding: 14px; background: #fff; border-radius: var(--r-card, 14px); border: 1px solid var(--border); box-shadow: var(--sh-4); color: var(--navy);}
.ss-chrome .nav__menu .mega__col {display: flex; flex-direction: column; gap: 0; padding-top: 2px;}
.ss-chrome .nav__menu .mega__h {margin: 0 0 4px 12px; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary);}
.ss-chrome .nav__menu .mm-row {display: block; padding: 8px 12px 9px; border-radius: 12px; text-decoration: none; color: var(--navy) !important; transition: background-color .14s;}
.ss-chrome .nav__menu .mm-row:hover {background: var(--primary-ultra-light);}
.ss-chrome .nav__menu .mm-top {display: flex; align-items: center; gap: 10px;}
.ss-chrome .nav__menu .mm-ico {flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; color: var(--primary);}
.ss-chrome .nav__menu .mm-ico svg {width: 18px !important; height: 18px !important; display: block;}
.ss-chrome .nav__menu .mm-top b {font-size: var(--t-body-sm); font-weight: var(--fw-strong); letter-spacing: -.005em; line-height: 1.3;}
.ss-chrome .nav__menu .mm-row small {display: block; margin: 2px 0 0 34px; font-size: var(--t-micro); color: var(--text-secondary); line-height: 1.45;}
.ss-chrome .nav__menu .mega__feature {display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); text-decoration: none; color: var(--navy) !important;}
.ss-chrome .nav__menu .mega__kicker {display: block; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px;}
.ss-chrome .nav__menu .mega__feature b {display: block; font-size: 14px; font-weight: var(--fw-strong); letter-spacing: -.005em; line-height: 1.3; margin-bottom: 6px;}
.ss-chrome .nav__menu .mega__feature small {display: block; font-size: var(--t-micro); color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px;}
.ss-chrome .nav__menu .mega__img {display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 10px; overflow: hidden; background: var(--border); margin-bottom: 12px;}
.ss-chrome .nav__menu .mega__img img {width: 100%; height: 100%; object-fit: cover; display: block;}
.ss-chrome .nav__menu .mega__btn {display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: var(--primary); color: #fff; font-family: var(--font-label); font-size: 12px; font-weight: var(--fw-strong); line-height: 1.2; transition: background-color .15s;}
.ss-chrome .nav__menu .mega__feature:hover .mega__btn {background: var(--primary-dark);}
@media (max-width: 1279px) {
.ss-chrome .nav__menu > li.has-mega {position: relative;}
.ss-chrome .nav.open .nav__menu > li.has-mega > .sub-menu.mega-wrap {position: static; transform: none; width: auto; padding: 0 0 10px; opacity: 1; visibility: visible;}
.ss-chrome .nav.open .nav__menu .mega {grid-template-columns: 1fr; padding: 12px; background: rgba(255,255,255,.06); box-shadow: none; border: 0;}
.ss-chrome .nav.open .nav__menu .mega__h, .ss-chrome .nav.open .nav__menu .mm-top b, .ss-chrome .nav.open .nav__menu .mm-row small, .ss-chrome .nav.open .nav__menu .mega__feature b, .ss-chrome .nav.open .nav__menu .mega__feature small {color: #fff;}
.ss-chrome .nav.open .nav__menu .mm-ico {background: transparent; border-color: rgba(255,255,255,.3); color: #fff;}
.ss-chrome .nav.open .nav__menu .mega__feature {background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15);}
.ss-chrome .nav__menu > li.menu-item-has-children > a::after {display: none;}
}
@media (max-width: 1279px) {
html.nav-locked, html.nav-locked body {overflow: hidden !important;}
.ss-chrome .nav.open {position: fixed; inset: 0; z-index: 60; overflow-y: auto; -webkit-overflow-scrolling: touch;
    align-content: flex-start; background: rgba(9,9,32,.98); padding-bottom: 40px;}
.ss-chrome .nav.open .nav__menu > li.has-mega > a {display: flex !important; align-items: center; justify-content: space-between;}
.ss-chrome .nav.open .nav__menu > li.has-mega > a::after {content: ""; display: block !important; width: 14px; height: 14px; flex: 0 0 auto; margin-left: 12px; transition: transform .2s;
    background: no-repeat center / 14px 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.8)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5.4 9.4 12 16l6.6-6.6'/></svg>");}
.ss-chrome .nav.open .nav__menu > li.has-mega.is-sub > a::after {transform: rotate(180deg);}
/* the arrow is its own tap area on a phone (25 Oct 2026): a round 36px target at the right of the row */
.ss-chrome .nav.open .nav__menu > li.has-mega > a::after {box-sizing: content-box; padding: 11px; margin: -11px -11px -11px 12px; border-radius: 50%; background-color: rgba(255,255,255,.08); align-self: center; position: relative; top: -6px;}
.ss-chrome .nav.open .nav__menu > li.has-mega > .sub-menu.mega-wrap {display: none !important;}
.ss-chrome .nav.open .nav__menu > li.has-mega.is-sub > .sub-menu.mega-wrap {display: block !important;}
.ss-chrome .nav.open .nav__menu .mega__img {display: none;}
}
@media (max-width: 1279px) {
.ss-chrome .nav.open .nav__menu > li.has-mega > a {text-transform: none !important;}
}
@media (min-width: 1280px) {
.ss-chrome .nav__logo {gap: 14px;}
.ss-chrome .nav__logo .nav__mark {width: 64px !important;}
.ss-chrome .nav__logo .nav__word {height: 18px !important;}
}
@media (min-width: 1280px) and (max-width: 1365px) {
.ss-chrome .nav__logo {gap: 12px;}
.ss-chrome .nav__logo .nav__mark {width: 46px !important;}
.ss-chrome .nav__logo .nav__word {height: 16px !important;}
}
.ss-chrome .nav:not(.open) {padding-top: 42px;}
@media (min-width: 1440px) and (max-width: 1599px) {
.ss-chrome .nav:has(#sarisara-pending-pill), .ss-chrome .nav:has(#sarisara-pending-pill) .nav__menu {gap: 14px;}
}
.ss-chrome .nav__burger .nb {display: grid; place-items: center;}
.ss-chrome .nav__burger .nb svg {width: 18px !important; height: 18px !important; min-width: 18px !important; stroke: #fff;}
.ss-chrome .nav__burger .nb--close, .ss-chrome .nav.open .nav__burger .nb--open {display: none;}
.ss-chrome .nav.open .nav__burger .nb--close {display: grid;}
@media (max-width: 1279px) {
.ss-chrome .nav.open {padding-top: 42px;}
}
@media (max-width: 1279px) {
.ss-chrome .nav.open .nav__burger {position: fixed; top: 42px; right: 64px; z-index: 70; background: rgba(9,9,32,.9);}
.ss-chrome .nav.open .cta {margin-right: 54px;}
}
@media (max-width: 900px) {
.ss-chrome .nav.open .nav__burger {right: 24px;}
}
@media (max-width: 360px) {
.ss-chrome .nav .cta {display: none;}
}
@media (max-width: 1279px) {
.ss-chrome .nav.open {backdrop-filter: none !important; -webkit-backdrop-filter: none !important;}
}
@media (max-width: 1279px) {
.ss-chrome .nav.open {background: #090920 !important;}
}
@media (max-width: 1279px) {
.ss-chrome .nav__logo {width: auto; min-height: 42px; flex-shrink: 0;}
.ss-chrome .nav .cta, .ss-chrome .nav__burger {flex-shrink: 0;}
}
@media (max-width: 400px) {
.ss-chrome .nav__logo {gap: 10px;}
.ss-chrome .nav__logo .nav__word {height: 14px;}
.ss-chrome .nav .cta {padding-left: 14px !important; padding-right: 14px !important;}
}

/* ── inner pages (not the homepage): the bar sits on its own navy band until the photo banner
   arrives; the footer gets the homepage's navy ground. ── */
.ss-bar { position: relative; z-index: 30; background: #090920; }
.ss-bar .nav { position: relative; }
/* the header over a page's own full picture (the 404 page): no navy band, the page's picture runs up behind it */
.ss-bar.ss-bar--over { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
/* signed in on a computer: the page itself is already pushed down below the black admin bar (html margin 32px)
   and this bar is placed inside it, so it needs no extra 32px; 32px here put the logo 32px lower than on every
   other page (found on the Journal stories, 6 Nov 2026). On a phone the admin bar is drawn differently and the 46px stays. */
.admin-bar .ss-bar.ss-bar--over { top: 0; }
@media (max-width: 782px) { .admin-bar .ss-bar.ss-bar--over { top: 46px; } }
.ss-foot { background: #090920; color: #fff; padding-top: 8px; }
.ss-chrome a:hover { text-decoration: none !important; background-color: transparent; }

/* ══ THE SHORT PHOTO BANNER — every inner page (Chiran, 22–23 Oct 2026) ══════════════════════
   Design System sheet "Inner pages — short banner, same header, search". The same header as the
   homepage, on a photo with the same dark shade; 350px on a computer (420 until 23 Oct morning), 340px on a phone, the same
   on every inner page. Printed by inc/rebrand/banner.php. The banner is NOT its own layer
   (z-index auto), so the search form below can sit half on the photo while the header and its
   menus stay above everything. */
.ss-bar.ss-hero { position: relative; z-index: auto; height: 350px; background: #0d1b2a; color: #fff; }   /* 350, was 420 (Chiran, 23 Oct 2026 morning: too tall) */
.ss-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ss-hero__media .ss-hero__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; object-position: 50% 50%; display: block; border-radius: 0 !important; }
.ss-hero__scrim { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(9,9,32,.78) 0%, rgba(9,9,32,.55) 22%, rgba(9,9,32,0) 52%),   /* option C, Chiran 23 Oct 2026: deeper behind the menu */
  linear-gradient(97deg, rgba(9,9,32,.80) 0%, rgba(9,9,32,.48) 34%, rgba(9,9,32,.10) 62%, rgba(9,9,32,0) 78%),
  linear-gradient(0deg, rgba(9,9,32,.55) 0%, rgba(9,9,32,0) 46%); }
.ss-bar.ss-hero .nav:not(.open) { position: absolute; top: 0; left: 0; right: 0; z-index: 40; }   /* open on a phone: the full-screen menu, as on the homepage */
.ss-chrome.ss-hero .ss-hero__in { position: relative; z-index: 2; box-sizing: border-box; padding: 142px 64px 0 max(64px, calc(50% - 656px)); }
.ss-chrome.ss-hero .ss-hero__in > * { max-width: 760px; }
.ss-chrome.ss-hero .ss-hero__eye { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #C9A5FF; margin: 0 0 8px; line-height: 1.4; }
.ss-chrome.ss-hero .ss-hero__crumb ol { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; align-items: center;
  font-family: var(--font-label); font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.72); }
.ss-chrome.ss-hero .ss-hero__crumb li { margin: 0; padding: 0; color: inherit; font-size: inherit; }
.ss-chrome.ss-hero .ss-hero__crumb li + li::before { content: "/"; margin: 0 5px; }
.ss-chrome.ss-hero .ss-hero__crumb a, .ss-chrome.ss-hero .ss-hero__crumb span { color: rgba(255,255,255,.72) !important; font: inherit; text-decoration: none; }
.ss-chrome.ss-hero .ss-hero__crumb a:hover { color: #fff !important; }
.ss-chrome.ss-hero .ss-hero__h1 { font-family: var(--font-heading); font-weight: 700; font-size: 48px; line-height: 1.05; letter-spacing: -.035em;
  margin: 0 0 10px; padding: 0; color: #fff; text-transform: none; text-shadow: 0 2px 30px rgba(9,9,32,.4);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ss-chrome.ss-hero.ss-hero--long .ss-hero__h1 { font-size: 42px; }
.ss-chrome.ss-hero.ss-hero--xlong .ss-hero__h1 { font-size: 36px; line-height: 1.1; }
.ss-chrome.ss-hero .ss-hero__sub { font-family: var(--font-body, var(--font-label)); font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.88);
  margin: 0; max-width: 54ch; }
/* THE GLASS WINGS, AS CHIRAN PLACED THEM IN AFFINITY (banner A, 4 Nov 2026). Sized from the banner's
   HEIGHT so they look the same on every screen: 1.4 x the banner height, top 11.7% above the banner,
   right edge 31 px inside a 1440 banner (on wider screens it follows the 1440 content, not the screen edge).
   The frosted background behind may crop; the wings are never cropped sideways. */
/* The title's soft shadow must not show a box edge (Chiran, 4 Nov 2026): the 3-line limit clips the
   shadow at the title's box, so on this banner the title is never clipped (it is 2 lines by design). */
.ss-chrome.ss-hero.ss-hero--glass .ss-hero__h1 { display: block; overflow: visible; -webkit-line-clamp: unset; }
/* No dark shade on the Glass Wings banner (Chiran, 4 Nov 2026: "the Affinity one has more green"): the frosted
   picture is already soft and dark enough for white words; the shared shade turned it near-black. */
.ss-hero--glass .ss-hero__scrim { display: none; }
.ss-hero--glass .ss-hero__wings { position: absolute; z-index: 1; height: 140%; width: auto !important; max-width: none !important;
  top: -11.7%; right: max(31px, calc(50% - 689px)); pointer-events: none; border-radius: 0 !important; }
/* A soft shade behind the menu only (Chiran, 4 Nov 2026: "visible, but not lots of dark"), above the wings. */
.ss-hero--glass .ss-hero__media::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 130px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,9,32,.50) 0%, rgba(9,9,32,.28) 55%, rgba(9,9,32,0) 100%); }
@media (max-width: 767px) {
  /* Phone (Chiran's Affinity phone frame, 4 Nov 2026): ONE big wing — the pair flipped so the hotel wing shows,
     262 high on a 340 banner (77%), top 44 (12.9%), half of the pair past the right edge. */
  .ss-hero--glass .ss-hero__wings { height: 77%; top: 12.9%; right: 0; transform: translateX(50%) scaleX(-1); }
  .ss-hero--glass .ss-hero__h1 { text-shadow: 0 1px 14px rgba(9,9,32,.55), 0 0 2px rgba(9,9,32,.35); }   /* the title crosses the wing on a phone */
  .ss-hero--glass .ss-hero__media::after { height: 110px; }
  .ss-hero--glass .ss-hero__btn--primary { display: none; }   /* the same button sits in the menu bar right above (Chiran, 4 Nov 2026) */
}
/* The Glass Wings banner's two buttons (Become a Sarisarian, 4 Nov 2026): the partner pages' violet pill + white outline. */
.ss-chrome.ss-hero .ss-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.ss-chrome.ss-hero .ss-hero__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box;
  padding: 11px 24px; border-radius: 999px; font-family: var(--font-label); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none !important; }
.ss-chrome.ss-hero .ss-hero__btn--primary { background: #7700FF; color: #fff !important; border: 1.5px solid #7700FF; box-shadow: 0 6px 20px -6px rgba(119,0,255,.65); }
.ss-chrome.ss-hero .ss-hero__btn--primary:hover { background: #6A00E6 !important; border-color: #6A00E6; }
.ss-chrome.ss-hero .ss-hero__btn--ghost { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.75); }
.ss-chrome.ss-hero .ss-hero__btn--ghost:hover { background: rgba(255,255,255,.08) !important; }
@media (max-width: 900px) {
  .ss-chrome.ss-hero .ss-hero__in { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 767px) {
  .ss-bar.ss-hero { height: 340px; }
  .ss-chrome.ss-hero .ss-hero__in { padding-top: 128px; }
  .ss-chrome.ss-hero .ss-hero__h1 { font-size: 40px; }
  .ss-chrome.ss-hero.ss-hero--long .ss-hero__h1 { font-size: 32px; line-height: 1.1; }
  .ss-chrome.ss-hero.ss-hero--xlong .ss-hero__h1 { font-size: 26px; line-height: 1.15; -webkit-line-clamp: 4; }
  .ss-chrome.ss-hero .ss-hero__btns { margin-top: 12px; gap: 8px; }
  .ss-chrome.ss-hero .ss-hero__btn { min-height: 40px; padding: 9px 16px; font-size: 13.5px; }
  .ss-chrome.ss-hero .ss-hero__sub { display: none; }   /* the phone design shows the name only */
}

/* ONE BANNER: the theme's own banner and breadcrumb go on pages that carry ours. */
body.ss-hero-page:not(.ss-hero-page--search) #st-content-wrapper > .banner,
body.ss-hero-page #st-content-wrapper > .st-breadcrumb { display: none !important; }
/* The three search pages keep the theme's search form (until the new search bars, step 3),
   lifted so it sits half on the photo, centred. */
body.ss-hero-page--search #st-content-wrapper > .banner { background: none !important; height: auto !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; position: relative; z-index: 5; }
body.ss-hero-page--search #st-content-wrapper > .banner::before,
body.ss-hero-page--search #st-content-wrapper > .banner::after,
body.ss-hero-page--search #st-content-wrapper > .banner > #overlay { display: none !important; }
body.ss-hero-page--search #st-content-wrapper > .banner > .container { transform: translateY(-50%); padding-top: 0 !important; padding-bottom: 0 !important; }
/* The theme leaves 90px above its own banner for a see-through menu; with ours it is not needed. */
body.ss-hero-page #st-content-wrapper.st-page-default { padding-top: 0 !important; }
body.ss-hero-page--town #st-content-wrapper.st-page-default { padding-top: 24px !important; }
/* Town pages: the region and district now sit in the banner, so not again above "About Kandy". */
body.ss-hero-page--town .stp-about > .stp-eyebrow { display: none; }
/* Phones: the theme's search form is tall (about 500px), so it sits under the photo, not on it.
   The new one-line "Where to?" search (step 3) will sit half on the photo. */
@media (max-width: 767px) {
  body.ss-hero-page--search #st-content-wrapper > .banner > .container { transform: none; padding-top: 16px !important; }
}
body.ss-hero-page--search #st-content-wrapper > .banner .st-banner-search-form { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; }
/* "Start your trip" came out 48px tall on inner pages (the theme's line height), 42px on the homepage,
   so on phones the logo and menu button sat 3px lower and the button jumped when the menu opened. */
.ss-chrome .nav .cta { line-height: 20px; }
/* THE MENU 14px (Chiran, 23 Oct 2026 morning): the menu links, "Become a partner" and "Start your
   trip" go from 13 to 14px. The currency (USD) stays 13px: it is in capitals and looked too big. */
@media (min-width: 1280px) {
  .ss-chrome .nav__menu > li > a, .ss-chrome .nav__partner, .ss-chrome .nav .cta { font-size: 14px !important; }
}

/* MENU ON BRIGHT PHOTOS — option C (Chiran, 23 Oct 2026: "the text has been popped out"; Design System
   sheet "Header — the menu on bright photos"). A deeper top shade (above) plus a soft dark glow behind every
   word and the logo, so white links stay readable on a white sky or a white temple. Not inside the open
   phone menu, which already sits on solid navy. */
.ss-chrome .nav:not(.open) .nav__menu > li > a,
.ss-chrome .nav:not(.open) .nav__partner,
.ss-chrome .nav:not(.open) .dropdown-currency > a,
.ss-chrome.ss-hero .ss-hero__crumb { text-shadow: 0 1px 2px rgba(9,9,32,.55), 0 0 14px rgba(9,9,32,.55); }
.ss-chrome .nav:not(.open) .nav__logo img { filter: drop-shadow(0 1px 6px rgba(9,9,32,.5)); }

/* ═══ THE GALLERY BANNER — every single listing page (Chiran, 23 Oct 2026; Design System "Single listing
   pages", section 1). The listing's own photos are the top of the page: 1 big + up to 4 small, the same
   header on them (option C shade), the name bottom-left, Share / Save / All photos bottom-right, all lined
   up with the 1312px centre. One photo you swipe on a phone. Printed by sarisara_banner_render_gallery(). */
.ss-bar.ss-hero.ss-hero--gallery { height: 580px; overflow: hidden; }
.ss-hero--gallery .ss-gal { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; background: #0d1b2a; }
.ss-hero--gallery.ss-gal--n1 .ss-gal { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ss-hero--gallery.ss-gal--n2 .ss-gal { grid-template-columns: 2fr 1fr; }
.ss-hero--gallery.ss-gal--n2 .ss-gal__ph:nth-child(2) { grid-row: 1 / 3; }
.ss-hero--gallery.ss-gal--n3 .ss-gal { grid-template-columns: 2fr 1fr; }
.ss-hero--gallery.ss-gal--n4 .ss-gal__ph:nth-child(4) { grid-column: 2 / 4; }
.ss-hero--gallery .ss-gal__ph { all: unset; display: block; position: relative; overflow: hidden; cursor: zoom-in; min-width: 0; min-height: 0; }
.ss-hero--gallery .ss-gal__ph:first-child { grid-row: 1 / 3; }
.ss-hero--gallery .ss-gal__ph img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border-radius: 0 !important; transition: transform .5s ease; }
.ss-hero--gallery .ss-gal__ph:hover img { transform: scale(1.03); }
.ss-hero--gallery > .ss-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(180deg, rgba(9,9,32,.78) 0%, rgba(9,9,32,.5) 14%, rgba(9,9,32,0) 34%),
  linear-gradient(0deg, rgba(9,9,32,.88) 0%, rgba(9,9,32,.5) 26%, rgba(9,9,32,0) 52%); }
.ss-chrome.ss-hero.ss-hero--gallery .ss-gal__in { position: absolute; z-index: 2; left: max(64px, calc(50% - 656px)); right: max(64px, calc(50% - 656px)); bottom: 34px;
  padding: 0 !important; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; pointer-events: none; }
.ss-chrome.ss-hero.ss-hero--gallery .ss-gal__in > * { max-width: none; }
.ss-hero--gallery .ss-gal__words { max-width: 780px; min-width: 0; }
.ss-hero--gallery .ss-gal__in a, .ss-hero--gallery .ss-gal__in button, .ss-hero--gallery .ss-gal__acts > * { pointer-events: auto; }
.ss-hero--gallery .ss-gal__tab { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.3);
  font-family: var(--font-label); font-size: 12.5px; font-weight: 600; line-height: 1; color: #fff; }
.ss-hero--gallery .ss-gal__tab svg { width: 14px; height: 14px; }
.ss-hero--gallery .ss-hero__h1 { margin-bottom: 12px; }
.ss-hero--gallery .ss-gal__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-family: var(--font-label); font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(9,9,32,.55), 0 0 14px rgba(9,9,32,.55); }
.ss-hero--gallery .ss-gal__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ss-hero--gallery .ss-gal__meta svg { width: 15px; height: 15px; }
.ss-hero--gallery .ss-gal__acts { display: flex; gap: 10px; flex: 0 0 auto; }
.ss-chrome .ss-gal__acts .ss-gal__btn, .ss-chrome .ss-gal__acts .ss-gal__btn.service-add-wishlist { position: relative; inset: auto; display: inline-flex; align-items: center; gap: 8px;
  width: auto; height: 42px; margin: 0; padding: 0 16px; border-radius: 999px; border: 0; background: #fff; color: var(--navy) !important; box-shadow: var(--sh-1);
  font-family: var(--font-label); font-size: 13px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ss-chrome .ss-gal__acts .ss-gal__btn--ghost, .ss-chrome .ss-gal__acts .ss-gal__btn--ghost.service-add-wishlist { background: rgba(255,255,255,.14); color: #fff !important; border: 1px solid rgba(255,255,255,.36); box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ss-chrome .ss-gal__acts .ss-gal__btn svg { width: 15px; height: 15px; }
.ss-chrome .ss-gal__acts .service-add-wishlist.added, .ss-chrome .ss-gal__acts .ss-gal__btn--ghost.service-add-wishlist.added { background: #7700FF !important; border-color: #7700FF !important; color: #fff !important; }
.ss-chrome .ss-gal__acts .service-add-wishlist.added svg { fill: #fff; color: #fff; }   /* saved = solid violet, white words (Chiran, 24 Oct 2026), never red */
.ss-chrome .ss-gal__acts .service-add-wishlist .lds-dual-ring { display: none; }
.ss-chrome .ss-gal__acts .service-add-wishlist.loading .lds-dual-ring { display: inline-block; width: 14px; height: 14px; }
.ss-hero--gallery .ss-gal__cnt { display: none; }
/* the old collage and the rating/share row under the banner — the banner does their job now */
body.ss-hero-page--gallery .st-gallery, body.ss-hero-page--gallery .st-service-header2 { display: none !important; }
@media (max-width: 899px) {
  .ss-bar.ss-hero.ss-hero--gallery { height: 400px; }
  .ss-hero--gallery .ss-gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; }
  .ss-hero--gallery .ss-gal::-webkit-scrollbar { display: none; }
  .ss-hero--gallery .ss-gal__ph { flex: 0 0 100%; scroll-snap-align: start; }
  .ss-chrome.ss-hero.ss-hero--gallery .ss-gal__in { left: 20px; right: 20px; bottom: 24px; flex-direction: column; align-items: stretch; gap: 14px; }
  .ss-hero--gallery .ss-gal__acts { gap: 8px; }
  .ss-chrome .ss-gal__acts .ss-gal__btn, .ss-chrome .ss-gal__acts .ss-gal__btn.service-add-wishlist { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .ss-chrome .ss-gal__acts .ss-gal__btn span { display: none; }
  .ss-hero--gallery .ss-gal__cnt { display: block; position: absolute; z-index: 2; right: 16px; bottom: 16px; padding: 4px 10px; border-radius: 999px;
    background: rgba(9,9,32,.6); color: #fff; font-family: var(--font-label); font-size: 12px; pointer-events: none; }
}

/* the All photos view */
.ss-gv { position: fixed; inset: 0; z-index: 100000; background: #090920; display: flex; flex-direction: column; font-family: var(--font-label); color: #fff; }
.ss-gv__h { display: flex; align-items: center; gap: 12px; padding: 16px max(20px, calc(50% - 656px)); }
.ss-gv__h b { font-size: 16px; font-weight: 600; } .ss-gv__h span { color: rgba(255,255,255,.6); font-size: 13px; }
.ss-gv__x { all: unset; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; cursor: pointer; color: #fff; }
.ss-gv__x svg { width: 20px; height: 20px; }
.ss-gv__g { flex: 1; overflow-y: auto; padding: 0 max(20px, calc(50% - 656px)) 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.ss-gv__g img { width: 100% !important; aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; border-radius: 10px; display: block; cursor: zoom-in; }
.ss-gv__one { position: absolute; inset: 0; background: rgba(9,9,32,.97); display: flex; align-items: center; justify-content: center; }
.ss-gv__one img { max-width: 92vw; max-height: 86vh; width: auto !important; height: auto !important; border-radius: 8px; }
.ss-gv__nav { all: unset; position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; cursor: pointer; color: #fff; font-size: 22px; }
.ss-gv__nav--p { left: 20px; } .ss-gv__nav--n { right: 20px; }
.ss-gv__c { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 13px; color: rgba(255,255,255,.75); }
@media (max-width: 899px) { .ss-gv__g { grid-template-columns: 1fr 1fr; } }

/* the picture on the profile button (Chiran, 24 Oct 2026): never blank — photo, initials, or the Sarisara mark */
.ss-chrome .nav__tools .nav__user--me { border: 2px solid rgba(255,255,255,.7); }
.ss-chrome .nav__tools .ss-me { width: 100%; height: 100%; border-radius: 999px; display: grid; place-items: center; overflow: hidden; }
.ss-chrome .nav__tools .ss-me img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 999px; display: block; margin: 0 !important; }
.ss-chrome .nav__tools .ss-me--brand { background: #7700FF; }
.ss-chrome .nav__tools .ss-me--brand img { width: 58% !important; height: 58% !important; object-fit: contain; border-radius: 0; }
.ss-chrome .nav__tools .ss-me--initials { background: #7700FF; color: #fff; font: 700 15px/1 var(--font-label, 'Google Sans', sans-serif); letter-spacing: .02em; }
.ss-chrome .ss-gal__acts .service-add-wishlist.added span, .ss-chrome .ss-gal__acts .service-add-wishlist.added * { color: #fff !important; }
.ss-gv--solo .ss-gv__h, .ss-gv--solo .ss-gv__g { visibility: hidden; }   /* a banner photo opened on its own: no grid behind it (24 Oct 2026) */
/* PHOTO VIEWER controls (Chiran, 24 Oct 2026): the same round white arrows as the homepage carousels,
   big enough to see at once, and a close button on a white circle. Icons from the canonical sheet. */
.ss-gv .ss-gv__nav { width: 52px; height: 52px; border-radius: 999px; background: #fff; color: #090920; border: 1px solid #E5E5E5;
  box-shadow: 0 6px 18px rgba(0,0,0,.28); font-size: 26px; line-height: 1; transition: color .15s, border-color .15s, transform .15s; }
.ss-gv .ss-gv__nav svg { width: 22px !important; height: 22px !important; display: block; }
.ss-gv .ss-gv__nav:hover, .ss-gv .ss-gv__nav:focus-visible { color: #7700FF; border-color: #7700FF; }
.ss-gv .ss-gv__nav--p { left: 24px; } .ss-gv .ss-gv__nav--n { right: 24px; }
.ss-gv .ss-gv__x { background: #fff; color: #090920; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.ss-gv .ss-gv__x svg { width: 20px !important; height: 20px !important; display: block; }
.ss-gv .ss-gv__x:hover, .ss-gv .ss-gv__x:focus-visible { color: #7700FF; }
.ss-gv .ss-gv__x--one { position: absolute; top: 18px; right: 20px; margin: 0; z-index: 2; }
.ss-gv .ss-gv__c { color: #fff; font-family: var(--font-label, 'Google Sans', sans-serif); font-size: 13px; font-weight: 600; background: rgba(9,9,32,.6); padding: 5px 12px; border-radius: 999px; }
@media (max-width: 899px) { .ss-gv .ss-gv__nav { width: 44px; height: 44px; } .ss-gv .ss-gv__nav--p { left: 10px; } .ss-gv .ss-gv__nav--n { right: 10px; } }
/* the profile picture: no white ring, the same 44px as the bell (Chiran, 24 Oct 2026) */
.ss-chrome .nav__tools .nav__user--me, .nav__tools .nav__user--me { border: 0 !important; width: 44px; height: 44px; }
.ss-gv button.ss-gv__nav, .ss-gv button.ss-gv__x { padding: 0 !important; box-sizing: border-box !important; min-width: 0; min-height: 0; }   /* the theme pads every <button> by 20px */
/* phones: at most the first 2 facts under the title, so a long trip title never pushes the crumbs into the logo (24 Oct 2026) */
@media (max-width: 899px) { .ss-hero--gallery .ss-gal__meta span:nth-child(n+3) { display: none; } .ss-hero--gallery .ss-gal__meta { font-size: 13px; gap: 4px 14px; } }

/* PHONE MENU (Chiran, 24 Oct 2026, phone screenshots):
   1. The open menu sat UNDER a page's sticky tabs bar (both z-index 60, the tabs later in the page). The open menu
      now sits above everything on the page except the photo viewer.
   2. Tapping a link in the dark menu painted the desktop hover (pale violet) behind white words — unreadable.
      In the open menu a link's hover / tap is a light veil on the dark, the words stay white. */
.ss-chrome .nav.open { z-index: 1000; }
.ss-chrome .nav.open .nav__burger { z-index: 1010; }
.ss-chrome .nav.open .nav__menu .mm-row:hover, .ss-chrome .nav.open .nav__menu .mm-row:focus, .ss-chrome .nav.open .nav__menu .mm-row:active,
.ss-chrome .nav.open .nav__menu .sub-menu a:hover, .ss-chrome .nav.open .nav__menu .sub-menu a:focus, .ss-chrome .nav.open .nav__menu .sub-menu a:active {
  background: rgba(255,255,255,.10) !important; color: #fff !important; }
.ss-chrome .nav.open .nav__menu .mm-row:hover .mm-top b, .ss-chrome .nav.open .nav__menu .mm-row:hover small,
.ss-chrome .nav.open .nav__menu .mm-row:active .mm-top b, .ss-chrome .nav.open .nav__menu .mm-row:active small { color: #fff !important; }
.ss-chrome .nav.open .nav__menu .mm-row { -webkit-tap-highlight-color: transparent; }

/* The go-to-top button (Chiran, 25 Oct 2026): black as it is; violet when tapped or pointed at — never the theme's blue. */
body #gotop:hover, body #gotop:focus, body #gotop:focus-visible, body #gotop:active { background-color: #7700FF !important; border-color: #7700FF !important; color: #fff !important; outline: none; }

/* On a phone page with no price bar (hotels, activities, search pages) the go-to-top button sits low, 24px
   from the bottom; on a trip page it stays 16px above the price bar (sarisara-single.css). 25 Oct 2026. */
@media (max-width: 991px) { body:not(:has(.ss-mbar)) #gotop { bottom: 24px !important; } }
/* The floating "Map" button on a phone search page: violet, not the theme's blue (25 Oct 2026). */
body .map-view-mobile a, body .map-view-mobile a:hover, body .map-view-mobile a:focus { background: #7700FF !important; color: #fff !important; border-color: #7700FF !important; }

/* THE BACK BUTTON on a listing (Chiran, 25 Oct 2026): the banner's frosted round button, above the breadcrumb */
.ss-chrome.ss-hero a.ss-back { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0 0 12px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.36); color: #fff !important; text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, border-color .15s; }
.ss-chrome.ss-hero a.ss-back:hover, .ss-chrome.ss-hero a.ss-back:focus-visible { background: #7700FF; border-color: #7700FF; }
.ss-chrome.ss-hero a.ss-back svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .ss-chrome.ss-hero a.ss-back { width: 36px; height: 36px; margin-bottom: 8px; } }


/* ===== "Become a Sarisarian" — the bar's button (Chiran, 25 Oct 2026). RULE: every "Become a Sarisarian" BUTTON carries the
   trip page's Apply-button animation (sarisara-single.css, .sibs-guest-apply-btn): a light running round the pill's edge, a soft
   band of light sweeping across inside, a violet glow; faster on hover; still for reduced motion. ===== */
@property --ss-apply-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
body .ss-chrome .nav a.cta.ss-apply-btn, body .ss-chrome .ss-hero__btns a.ss-apply-btn {
  position: relative; overflow: hidden; isolation: isolate;
  border: 2px solid transparent !important; color: #fff !important; white-space: nowrap;
  background: linear-gradient(135deg, #7700FF, #6A00E6) padding-box,
              conic-gradient(from var(--ss-apply-a), #7700FF 0deg, #B57BFF 40deg, #FFFFFF 90deg, #B57BFF 140deg, #7700FF 190deg, #7700FF 360deg) border-box !important;
  box-shadow: 0 6px 20px -6px rgba(119,0,255,.65), 0 0 0 4px rgba(119,0,255,.10) !important;
  animation: ss-apply-edge 2.6s linear infinite;
}
body .ss-chrome .nav a.cta.ss-apply-btn::before, body .ss-chrome .ss-hero__btns a.ss-apply-btn::before {
  content: ""; display: block; position: absolute; z-index: -1; top: -20%; left: 0; width: 60%; height: 140%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.06) 70%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%) skewX(-18deg); animation: ss-apply-wave 2.6s ease-in-out infinite; pointer-events: none;
}
body .ss-chrome .nav a.cta.ss-apply-btn:hover, body .ss-chrome .nav a.cta.ss-apply-btn:focus-visible, body .ss-chrome .ss-hero__btns a.ss-apply-btn:hover, body .ss-chrome .ss-hero__btns a.ss-apply-btn:focus-visible {
  background: linear-gradient(135deg, #6600DB, #5A00C2) padding-box,
              conic-gradient(from var(--ss-apply-a), #6600DB 0deg, #B57BFF 40deg, #FFFFFF 90deg, #B57BFF 140deg, #6600DB 190deg, #6600DB 360deg) border-box !important;
  box-shadow: 0 10px 24px -8px rgba(119,0,255,.75), 0 0 0 5px rgba(119,0,255,.14) !important;
  animation-duration: 1.4s;
}
@keyframes ss-apply-edge { to { --ss-apply-a: 360deg; } }
@keyframes ss-apply-wave { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(220%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { body .ss-chrome .nav a.cta.ss-apply-btn, body .ss-chrome .nav a.cta.ss-apply-btn::before, body .ss-chrome .ss-hero__btns a.ss-apply-btn, body .ss-chrome .ss-hero__btns a.ss-apply-btn::before { animation: none; } }

/* The phone bar always keeps a 16px gap on both sides (27 Oct 2026). Before: signed in at 390px the menu button ran
   16px off the screen (logo + Become a Sarisarian + bell + menu did not fit), and on 361-389px phones it touched the
   edge even for visitors. Now: 16px sides like the page below; with the bell, slightly smaller gaps and button; where
   it still cannot fit, Become a Sarisarian moves into the menu (as it already did at 360px). */
@media (max-width: 400px) {
body .ss-chrome .nav:not(.open) {padding-left: 16px; padding-right: 16px;}
}
@media (max-width: 430px) {
body .ss-chrome .nav:not(.open):has(#sarisara-notif-bell) {gap: 4px;}
body .ss-chrome .nav:not(.open):has(#sarisara-notif-bell) .nav__logo {gap: 8px;}
body .ss-chrome .nav:not(.open):has(#sarisara-notif-bell) .nav__logo .nav__word {height: 13px;}
body .ss-chrome .nav:not(.open):has(#sarisara-notif-bell) a.cta {padding-left: 10px !important; padding-right: 10px !important; font-size: 12px !important;}
}
@media (max-width: 374px) { body .ss-chrome .nav:not(.open) .cta {display: none;} }
@media (max-width: 386px) { body .ss-chrome .nav:not(.open):has(#sarisara-notif-bell) .cta {display: none;} }

/* ══ THE BUTTERFLY PATTERN ON A PURPLE TOP (Chiran, 4 Nov 2026) — content pages (partner pages, policies). His FILLED
   butterfly pattern (assets/img/pattern, one size: 150px tile), white at 16%, strongest on the right and fading to
   nothing towards the words. Put <span class="ss-pat" aria-hidden="true"></span> first inside a purple top that has
   position:relative and overflow:hidden; the words sit above it (z-index 1). */
.ss-pat{position:absolute;inset:0;z-index:0;pointer-events:none;background:#fff;opacity:.16;
  -webkit-mask-image:url(../img/pattern/butterfly-fill.png),linear-gradient(to left,#000 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,0) 62%);
  -webkit-mask-size:150px auto,100% 100%;-webkit-mask-repeat:repeat,no-repeat;-webkit-mask-position:0 0,0 0;-webkit-mask-composite:source-in;
  mask-image:url(../img/pattern/butterfly-fill.png),linear-gradient(to left,#000 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,0) 62%);
  mask-size:150px auto,100% 100%;mask-repeat:repeat,no-repeat;mask-position:0 0,0 0;mask-composite:intersect}
@media (max-width:900px){
  .ss-pat{-webkit-mask-image:url(../img/pattern/butterfly-fill.png),linear-gradient(to left,#000 0%,rgba(0,0,0,.4) 35%,rgba(0,0,0,0) 70%);mask-image:url(../img/pattern/butterfly-fill.png),linear-gradient(to left,#000 0%,rgba(0,0,0,.4) 35%,rgba(0,0,0,0) 70%)}}