/*
 * ============================================================
 *  Emeris Virtual Tour — KolorMenu CSS Overrides
 *  Updated: Arial font, logo header, accent colours on categories
 * ============================================================
 */

/* ══════════════════════════════════════════════════════════
   LOGO HEADER — white Emeris logo at top of menu panel
══════════════════════════════════════════════════════════ */

#emeris-menu-logo {
  display        : block;
  width          : 100%;
  padding        : 18px 14px;
  box-sizing     : border-box;
  border-bottom  : 1px solid rgba(255,255,255,0.12);
  margin-bottom  : 0;
  position       : sticky !important;
  top            : 0 !important;
  z-index        : 30 !important;
  background     : rgba(6, 79, 98, 0.42) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}

#emeris-menu-logo img {
  width          : 100%;
  max-width      : 180px;
  height         : auto;
  display        : block;
  margin         : 0 auto;
}

/* ══════════════════════════════════════════════════════════
   CONTAINER
══════════════════════════════════════════════════════════ */

div.kolorMenuContainer {
  width      : 200px !important;
  max-width  : 200px !important;
  position   : fixed !important;
  top        : 0 !important;
  bottom     : 0 !important;
  left       : 0 !important;
  height     : auto !important;
  overflow-y : auto !important;
  overflow-x : hidden !important;
  background : rgba(6, 79, 98, 0.75) !important;
  opacity    : 1 !important;
  -webkit-overflow-scrolling: touch !important;
}

div.kolorMenuMain {
  width      : 200px !important;
  min-height : 100% !important;
  background : transparent !important;
  overflow   : visible !important;
}

ul.kolorMenu {
  width      : 200px !important;
  min-height : 100% !important;
  background : transparent !important;
  overflow   : visible !important;
}

/* ══════════════════════════════════════════════════════════
   TOP-LEVEL ITEMS — category headers
   Sky blue accent colour to match splash screen
══════════════════════════════════════════════════════════ */

ul.kolorMenu > li {
  width      : 200px !important;
  max-width  : 200px !important;
  white-space: normal !important;
  display    : block !important;
  position   : relative !important;
  float      : none !important;
}

ul.kolorMenu > li > p,
ul.kolorMenu > li > p[style] {
  font-family   : Arial, "Liberation Sans", Helvetica, sans-serif !important;
  font-size     : 13px !important;
  font-weight   : bold !important;
  font-style    : normal !important;
  text-transform: uppercase !important;
  text-align    : left !important;
  letter-spacing: 0.12em !important;
  line-height   : 1 !important;
  color         : #FFFFFF !important;
  position      : relative !important;
  z-index       : 20 !important;
  text-shadow   : 0 1px 6px rgba(0,0,0,0.4) !important;
  height        : 50px !important;
  padding       : 0 14px 0 14px !important;
  display       : flex !important;
  align-items   : center !important;
  border-left   : 3px solid transparent !important;
  border-top    : 1px solid rgba(255,255,255,0.07) !important;
  border-right  : none !important;
  border-bottom : none !important;
  background    : transparent !important;
  width         : 200px !important;
  box-sizing    : border-box !important;
  cursor        : pointer !important;
  transition    : color 0.27s, background 0.27s, border-color 0.27s;
  white-space   : nowrap !important;
  overflow      : hidden !important;
  text-overflow : ellipsis !important;
}

ul.kolorMenu > li:first-child > p,
ul.kolorMenu > li:first-child > p[style] {
  border-top: none !important;
}

ul.kolorMenu > li > p span,
ul.kolorMenu > li > p[style] span {
  font-family   : Arial, "Liberation Sans", Helvetica, sans-serif !important;
  font-size     : 13px !important;
  font-weight   : bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color         : #FFFFFF !important;
  position      : relative !important;
  z-index       : 21 !important;
  white-space   : normal !important;
}

/* ── Hover ── */
ul.kolorMenu > li:hover > p,
ul.kolorMenu > li:hover > p[style] {
  color        : #ffffff !important;
  background   : rgba(107, 191, 228, 0.25) !important;
  border-left  : 3px solid #6BBFE4 !important;
}

/* ── Selected ── */
ul.kolorMenu > li.menuSelected > p,
ul.kolorMenu > li.menuSelected > p[style],
ul.kolorMenu > li.kolorMenuSelected > p,
ul.kolorMenu > li.pressed > p {
  color        : #ffffff !important;
  background   : rgba(107, 191, 228, 0.30) !important;
  border-left  : 3px solid #6BBFE4 !important;
}

/* ══════════════════════════════════════════════════════════
   SUB-MENU items — white, regular weight
══════════════════════════════════════════════════════════ */

ul.kolorMenu li ul,
ul.kolorMenu li ul.kolorMenuGroup,
div.kolorMenuContainer ul.kolorMenu ul,
div.kolorMenuContainer ul.kolorMenu ul.kolorMenuGroup {
  position   : relative !important;
  left       : 0 !important;
  top        : 0 !important;
  right      : auto !important;
  bottom     : auto !important;
  width      : 200px !important;
  max-width  : 200px !important;
  background : transparent !important;
  overflow-x : hidden !important;
  overflow-y : visible !important;
  display    : none;
}

ul.kolorMenu li.menuSelected > ul,
ul.kolorMenu li.menuSelected > ul.kolorMenuGroup,
ul.kolorMenu ul.kolorMenuGroup.forceDisplayBlock {
  display : block !important;
}

ul.kolorMenu ul.kolorMenuGroup.forceDisplayNone {
  display : none !important;
}

ul.kolorMenu li ul > li,
ul.kolorMenu li ul.kolorMenuGroup > li {
  width      : 200px !important;
  max-width  : 200px !important;
  white-space: normal !important;
  display    : block !important;
  float      : none !important;
  border-left: none !important;
}

ul.kolorMenu li ul > li > p,
ul.kolorMenu li ul > li > p[style],
ul.kolorMenu li ul.kolorMenuGroup > li > p,
ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
  font-family   : Arial, "Liberation Sans", Helvetica, sans-serif !important;
  font-size     : 14px !important;
  font-weight   : normal !important;
  font-style    : normal !important;
  text-transform: none !important;
  text-align    : left !important;
  letter-spacing: 0.01em !important;
  line-height   : 1.4 !important;
  color         : #FFFFFF !important;
  opacity       : 0.90 !important;
  position      : relative !important;
  z-index       : 20 !important;
  text-shadow   : 0 1px 6px rgba(0,0,0,0.35) !important;
  padding       : 12px 14px 12px 18px !important;
  border-left   : 2px solid transparent !important;
  border-top    : 1px solid rgba(255,255,255,0.05) !important;
  border-right  : none !important;
  border-bottom : none !important;
  background    : transparent !important;
  width         : 200px !important;
  box-sizing    : border-box !important;
  white-space   : normal !important;
  transition    : color 0.27s, background 0.27s, border-color 0.27s;
}

ul.kolorMenu li ul > li > p span,
ul.kolorMenu li ul.kolorMenuGroup > li > p span {
  font-family   : Arial, "Liberation Sans", Helvetica, sans-serif !important;
  font-size     : 14px !important;
  font-weight   : normal !important;
  text-transform: none !important;
  color         : #FFFFFF !important;
  position      : relative !important;
  z-index       : 21 !important;
  white-space   : normal !important;
}

/* Sub hover */
ul.kolorMenu li ul > li:hover > p,
ul.kolorMenu li ul > li:hover > p[style],
ul.kolorMenu li ul.kolorMenuGroup > li:hover > p {
  color        : #ffffff !important;
  opacity      : 1 !important;
  background   : rgba(165, 200, 135, 0.25) !important;
  border-left  : 2px solid rgba(165, 200, 135, 0.9) !important;
}

/* Sub selected */
ul.kolorMenu li ul > li.menuSelected > p,
ul.kolorMenu li ul > li.pressed > p,
ul.kolorMenu li ul > li > p.menuSelected,
ul.kolorMenu li ul.kolorMenuGroup > li > p.menuSelected {
  color        : #ffffff !important;
  opacity      : 1 !important;
  background   : rgba(165, 200, 135, 0.30) !important;
  border-left  : 2px solid #A5C887 !important;
}


/* ══════════════════════════════════════════════════════════
   SUBMENU EXPANSION HARDENING
   Prevent Panotour inline height/max-height and overflow rules
   from clipping longer groups in short landscape viewports.
══════════════════════════════════════════════════════════ */

ul.kolorMenu > li,
ul.kolorMenu li ul > li,
ul.kolorMenu li ul.kolorMenuGroup > li {
  overflow: visible !important;
}

ul.kolorMenu ul.kolorMenuGroup.forceDisplayBlock,
ul.kolorMenu li.menuSelected > ul.kolorMenuGroup {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* ══════════════════════════════════════════════════════════
   FADE-IN ANIMATION
══════════════════════════════════════════════════════════ */

@keyframes emerisFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

ul.kolorMenu li > ul > li,
ul.kolorMenu li > ul.kolorMenuGroup > li {
  animation: emerisFadeIn 0.3s ease both;
}

ul.kolorMenu li > ul > li:nth-child(1)  { animation-delay: 0.03s; }
ul.kolorMenu li > ul > li:nth-child(2)  { animation-delay: 0.07s; }
ul.kolorMenu li > ul > li:nth-child(3)  { animation-delay: 0.11s; }
ul.kolorMenu li > ul > li:nth-child(4)  { animation-delay: 0.15s; }
ul.kolorMenu li > ul > li:nth-child(5)  { animation-delay: 0.19s; }
ul.kolorMenu li > ul > li:nth-child(6)  { animation-delay: 0.23s; }
ul.kolorMenu li > ul > li:nth-child(7)  { animation-delay: 0.27s; }
ul.kolorMenu li > ul > li:nth-child(8)  { animation-delay: 0.31s; }
ul.kolorMenu li > ul > li:nth-child(9)  { animation-delay: 0.35s; }

/* ══════════════════════════════════════════════════════════
   iOS / TOUCH FIXES
══════════════════════════════════════════════════════════ */

div.kolorMenuContainer {
  touch-action  : pan-y !important;
  overscroll-behavior-y: contain;
}

ul.kolorMenu li > p {
  touch-action  : manipulation !important;
  cursor        : pointer !important;
}

/* ══════════════════════════════════════════════════════════
   SCROLLBAR HIDDEN
══════════════════════════════════════════════════════════ */

div.kolorMenuContainer::-webkit-scrollbar { width: 0 !important; display: none !important; }
div.kolorMenuContainer { scrollbar-width: none !important; -ms-overflow-style: none !important; }

/* ══════════════════════════════════════════════════════════
   OPACITY LOCK — keep everything fully visible
══════════════════════════════════════════════════════════ */

div.kolorMenuContainer,
div.kolorMenuMain,
ul.kolorMenu {
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE PORTRAIT — 480px and below
══════════════════════════════════════════════════════════ */

@media only screen and (max-width: 480px) and (orientation: portrait) {

  div.kolorMenuContainer,
  div.kolorMenuMain,
  ul.kolorMenu,
  ul.kolorMenu > li,
  ul.kolorMenu li ul,
  ul.kolorMenu li ul.kolorMenuGroup,
  div.kolorMenuContainer ul.kolorMenu ul,
  div.kolorMenuContainer ul.kolorMenu ul.kolorMenuGroup,
  ul.kolorMenu li ul > li,
  ul.kolorMenu li ul.kolorMenuGroup > li {
    width     : 160px !important;
    max-width : 160px !important;
    min-width : 0 !important;
  }

  ul.kolorMenu > li > p,
  ul.kolorMenu > li > p[style] {
    font-size     : 10px !important;
    height        : auto !important;
    min-height    : 40px !important;
    padding       : 10px 8px !important;
    width         : 160px !important;
    max-width     : 160px !important;
    white-space   : normal !important;
    overflow      : visible !important;
    text-overflow : clip !important;
    box-sizing    : border-box !important;
  }

  ul.kolorMenu > li > p span,
  ul.kolorMenu > li > p[style] span {
    white-space : normal !important;
    max-width   : 140px !important;
  }

  ul.kolorMenu li ul > li > p,
  ul.kolorMenu li ul > li > p[style],
  ul.kolorMenu li ul.kolorMenuGroup > li > p,
  ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
    font-size   : 11px !important;
    padding     : 8px 8px 8px 12px !important;
    width       : 160px !important;
    max-width   : 160px !important;
    white-space : normal !important;
    box-sizing  : border-box !important;
  }
}

@media only screen and (max-width: 430px) and (orientation: portrait) {

  div.kolorMenuContainer,
  div.kolorMenuMain,
  ul.kolorMenu,
  ul.kolorMenu > li,
  ul.kolorMenu li ul,
  ul.kolorMenu li ul.kolorMenuGroup,
  div.kolorMenuContainer ul.kolorMenu ul,
  ul.kolorMenu li ul > li,
  ul.kolorMenu li ul.kolorMenuGroup > li {
    width     : 140px !important;
    max-width : 140px !important;
    min-width : 0 !important;
  }

  ul.kolorMenu > li > p,
  ul.kolorMenu > li > p[style] {
    font-size   : 9px !important;
    min-height  : 36px !important;
    padding     : 8px 6px !important;
    width       : 140px !important;
    max-width   : 140px !important;
    white-space : normal !important;
    box-sizing  : border-box !important;
  }

  ul.kolorMenu li ul > li > p,
  ul.kolorMenu li ul > li > p[style],
  ul.kolorMenu li ul.kolorMenuGroup > li > p,
  ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
    font-size   : 10px !important;
    padding     : 7px 6px 7px 10px !important;
    width       : 140px !important;
    max-width   : 140px !important;
    white-space : normal !important;
    box-sizing  : border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE LANDSCAPE
══════════════════════════════════════════════════════════ */

@media only screen and (max-height: 500px) and (orientation: landscape) {

  #emeris-menu-logo {
    padding: 8px 10px !important;
  }

  #emeris-menu-logo img {
    max-width: 118px !important;
  }

  div.kolorMenuContainer {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  ul.kolorMenu > li,
  ul.kolorMenu li ul > li,
  ul.kolorMenu li ul.kolorMenuGroup > li {
    overflow: visible !important;
  }

  ul.kolorMenu ul.kolorMenuGroup.forceDisplayBlock {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }


  div.kolorMenuContainer { width: 160px !important; }

  div.kolorMenuMain,
  ul.kolorMenu,
  ul.kolorMenu > li,
  ul.kolorMenu li ul,
  ul.kolorMenu li ul.kolorMenuGroup,
  ul.kolorMenu li ul > li,
  ul.kolorMenu li ul.kolorMenuGroup > li {
    width     : 160px !important;
    max-width : 160px !important;
  }

  ul.kolorMenu > li > p,
  ul.kolorMenu > li > p[style] {
    font-size  : 9px !important;
    height     : 34px !important;
    padding    : 0 8px !important;
    width      : 160px !important;
  }

  ul.kolorMenu li ul > li > p,
  ul.kolorMenu li ul > li > p[style],
  ul.kolorMenu li ul.kolorMenuGroup > li > p,
  ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
    font-size  : 10px !important;
    padding    : 6px 8px 6px 12px !important;
    width      : 160px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PANO LABEL — current scene name bottom centre
══════════════════════════════════════════════════════════ */

#hc-pano-label {
  position      : fixed;
  bottom        : 60px;
  left          : 50%;
  transform     : translateX(-50%);
  z-index       : 500;
  text-align    : center;
  pointer-events: none;
}

#hc-pano-label .hc-label-name {
  font-family   : Arial, "Liberation Sans", Helvetica, sans-serif;
  font-size     : 15px;
  font-weight   : bold;
  letter-spacing: 0.06em;
  color         : rgba(255, 255, 255, 0.92);
  display       : inline-block;
  line-height   : 1.35;
  transition    : opacity 0.4s ease;
  text-shadow   : 0 1px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.5);
}


/* ══════════════════════════════════════════════════════════
   MOBILE LANDSCAPE — RIGHT-EDGE TEXT PADDING FIX
   Keeps submenu labels clear of the sidebar edge.
══════════════════════════════════════════════════════════ */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  ul.kolorMenu li ul > li > p,
  ul.kolorMenu li ul > li > p[style],
  ul.kolorMenu li ul.kolorMenuGroup > li > p,
  ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
    width         : 100% !important;
    max-width     : 100% !important;
    padding       : 6px 14px 6px 12px !important;
    box-sizing    : border-box !important;
    overflow      : visible !important;
    white-space   : normal !important;
    overflow-wrap : anywhere !important;
  }

  ul.kolorMenu li ul > li > p span,
  ul.kolorMenu li ul.kolorMenuGroup > li > p span {
    display       : block !important;
    width         : 100% !important;
    max-width     : 100% !important;
    box-sizing    : border-box !important;
    white-space   : normal !important;
    overflow      : visible !important;
    overflow-wrap : anywhere !important;
  }
}

/* ══════════════════════════════════════════════════════════
   EMERIS SCENE INFORMATION — Panotour KolorArea override
   Targets ONLY Panotour's description plugin (#description).
   Content continues to be managed entirely inside Panotour Pro.
══════════════════════════════════════════════════════════ */

#description.kolorAreaContainer {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 900 !important;
  pointer-events: none !important;
  font-family: Arial, "Liberation Sans", Helvetica, sans-serif !important;
}

#description .kolorArea {
  position: absolute !important;
  box-sizing: border-box !important;
  top: 50% !important;
  right: 42px !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: min(440px, calc(100vw - 290px)) !important;
  min-width: 320px !important;
  height: auto !important;
  max-height: min(72vh, 680px) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  background: rgba(6, 79, 98, 0.68) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 70px rgba(0,0,0,0.34), 0 4px 18px rgba(0,0,0,0.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  animation: emerisInfoIn 0.42s cubic-bezier(.22,.78,.28,1) both !important;
}

@keyframes emerisInfoIn {
  from { opacity: 0; transform: translateY(calc(-50% + 14px)) scale(0.985); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

#description .kolorAreaHeader {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 66px !important;
  margin: 0 !important;
  padding: 0 64px 0 26px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255,255,255,0.11) !important;
  background: rgba(107,191,228,0.07) !important;
}

#description .kolorAreaHeader::before {
  content: "ABOUT THIS VIEW";
  font-family: Arial, "Liberation Sans", Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  color: #A5C887 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.22) !important;
}

#description .kolorAreaTitle {
  display: none !important;
}

#description .kolorAreaCloseBtn {
  position: absolute !important;
  top: 15px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  cursor: pointer !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  background-image: none !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease !important;
}

#description .kolorAreaCloseBtn::before,
#description .kolorAreaCloseBtn::after {
  content: "" !important;
  position: absolute !important;
  left: 17px !important;
  top: 9px !important;
  width: 2px !important;
  height: 16px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.94) !important;
}

#description .kolorAreaCloseBtn::before { transform: rotate(45deg) !important; }
#description .kolorAreaCloseBtn::after  { transform: rotate(-45deg) !important; }

#description .kolorAreaCloseBtn:hover {
  background: rgba(107,191,228,0.22) !important;
  border-color: rgba(107,191,228,0.58) !important;
  transform: scale(1.05) !important;
}

#description .kolorAreaContent {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(min(72vh, 680px) - 66px) !important;
  margin: 0 !important;
  padding: 24px 26px 27px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: transparent !important;
  color: rgba(255,255,255,0.94) !important;
  font-family: Arial, "Liberation Sans", Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: normal !important;
  line-height: 1.62 !important;
  text-align: left !important;
  text-shadow: 0 1px 5px rgba(0,0,0,0.18) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(165,200,135,0.50) transparent !important;
}

#description .kolorAreaContent::-webkit-scrollbar { width: 5px !important; }
#description .kolorAreaContent::-webkit-scrollbar-track { background: transparent !important; }
#description .kolorAreaContent::-webkit-scrollbar-thumb {
  background: rgba(165,200,135,0.50) !important;
  border-radius: 10px !important;
}

#description .kolorAreaContent p {
  margin: 0 0 14px !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}
#description .kolorAreaContent p:last-child { margin-bottom: 0 !important; }

#description .kolorAreaContent strong,
#description .kolorAreaContent b {
  color: #FFFFFF !important;
  font-weight: bold !important;
}

#description .kolorAreaContent h1,
#description .kolorAreaContent h2,
#description .kolorAreaContent h3 {
  margin: 0 0 12px !important;
  color: #FFFFFF !important;
  font-family: Arial, "Liberation Sans", Helvetica, sans-serif !important;
  font-weight: bold !important;
  line-height: 1.24 !important;
}

#description .kolorAreaContent h1 { font-size: 22px !important; }
#description .kolorAreaContent h2 { font-size: 19px !important; }
#description .kolorAreaContent h3 { font-size: 16px !important; }

#description .kolorAreaContent a {
  color: #6BBFE4 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(107,191,228,0.42) !important;
}

#description .kolorAreaContent ul,
#description .kolorAreaContent ol {
  margin: 10px 0 14px 22px !important;
  padding: 0 !important;
}

#description .kolorAreaContent li { margin: 0 0 7px !important; }

/* Keep any Panotour loading treatment subtle inside the new card. */
#description .kolorAreaContent.loading {
  min-height: 70px !important;
  background-color: transparent !important;
}

/* Panotour's description overlay is disabled in this project; this is
   harmless insurance if it is ever enabled later. */
#description .kolorAreaOverlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(1px) !important;
  pointer-events: auto !important;
}

/* ── Tablet / narrower laptop ── */
@media only screen and (max-width: 820px) {
  #description .kolorArea {
    right: 24px !important;
    width: min(420px, calc(100vw - 210px)) !important;
    min-width: 300px !important;
  }
}

/* ── Mobile portrait: elegant bottom sheet ── */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  #description .kolorArea {
    top: auto !important;
    right: 12px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 62vh !important;
    border-radius: 17px !important;
    animation: emerisInfoMobileIn 0.40s cubic-bezier(.22,.78,.28,1) both !important;
  }

  @keyframes emerisInfoMobileIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  #description .kolorAreaHeader {
    height: 58px !important;
    padding: 0 58px 0 20px !important;
  }

  #description .kolorAreaHeader::before {
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }

  #description .kolorAreaCloseBtn {
    top: 12px !important;
    right: 13px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  #description .kolorAreaCloseBtn::before,
  #description .kolorAreaCloseBtn::after {
    left: 15px !important;
    top: 8px !important;
  }

  #description .kolorAreaContent {
    max-height: calc(62vh - 58px) !important;
    padding: 19px 20px 22px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* ── Mobile landscape: compact right-hand card ── */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  #description .kolorArea {
    top: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    transform: none !important;
    width: min(400px, 55vw) !important;
    min-width: 280px !important;
    max-height: none !important;
    height: auto !important;
    border-radius: 15px !important;
    animation: emerisInfoLandscapeIn 0.38s cubic-bezier(.22,.78,.28,1) both !important;
  }

  @keyframes emerisInfoLandscapeIn {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  #description .kolorAreaHeader {
    height: 50px !important;
    padding: 0 52px 0 18px !important;
  }

  #description .kolorAreaCloseBtn {
    top: 8px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  #description .kolorAreaCloseBtn::before,
  #description .kolorAreaCloseBtn::after {
    left: 14px !important;
    top: 7px !important;
  }

  #description .kolorAreaContent {
    max-height: calc(100vh - 74px) !important;
    padding: 16px 18px 18px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   SCENE INFORMATION — adaptive sizing + robust text wrapping
   Keeps Panotour's injected description content inside the card
   and lets the card height follow the amount of text naturally.
══════════════════════════════════════════════════════════ */

#description .kolorArea {
  width: auto !important;
  min-width: 320px !important;
  max-width: min(520px, calc(100vw - 290px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(72vh, 680px) !important;
}

#description .kolorAreaContent {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(min(72vh, 680px) - 66px) !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: normal !important;
}

#description .kolorAreaContent,
#description .kolorAreaContent * {
  box-sizing: border-box !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

#description .kolorAreaContent img,
#description .kolorAreaContent video,
#description .kolorAreaContent iframe {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Tablet / narrower desktop */
@media only screen and (max-width: 900px) and (min-width: 601px) {
  #description .kolorArea {
    width: auto !important;
    min-width: 300px !important;
    max-width: min(440px, calc(100vw - 210px)) !important;
  }
}

/* Mobile portrait — retain the full-width bottom-sheet behaviour. */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  #description .kolorArea {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #description .kolorAreaContent {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(62vh - 58px) !important;
  }
}

/* Mobile landscape — card follows its content until the viewport limit. */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  #description .kolorArea {
    width: auto !important;
    min-width: 280px !important;
    max-width: min(400px, 55vw) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #description .kolorAreaContent {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 74px) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   SCENE INFORMATION — WRAPPING FIX v2
   Keep a definite card width so KolorArea's JS cannot size the
   injected content independently. Height remains content-driven.
══════════════════════════════════════════════════════════ */

/* Desktop */
#description .kolorArea {
  width: min(440px, calc(100vw - 90px)) !important;
  min-width: 320px !important;
  max-width: 440px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 72vh !important;
}

#description .kolorAreaContent {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Panotour may inject spans/divs with inline sizing or whitespace rules.
   Override those so all prose remains inside the card. */
#description .kolorAreaContent div,
#description .kolorAreaContent p,
#description .kolorAreaContent span,
#description .kolorAreaContent a,
#description .kolorAreaContent strong,
#description .kolorAreaContent b,
#description .kolorAreaContent em,
#description .kolorAreaContent i,
#description .kolorAreaContent li {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#description .kolorAreaContent p,
#description .kolorAreaContent li,
#description .kolorAreaContent div {
  display: block !important;
}

/* Narrow tablet / portrait */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  #description .kolorArea {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    left: 12px !important;
    right: 12px !important;
    height: auto !important;
  }

  #description .kolorAreaContent {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Phone landscape */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  #description .kolorArea {
    width: min(400px, 55vw) !important;
    min-width: 280px !important;
    max-width: min(400px, 55vw) !important;
    height: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════
   SCENE INFORMATION — WRAPPING FIX v3
   Panotour stores scene descriptions as fixed-width HTML tables
   (e.g. width="560", width:420pt). Reset those table dimensions
   so the prose can wrap to the Emeris card width.
══════════════════════════════════════════════════════════ */

#description .kolorAreaContent table {
  display: table !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  box-sizing: border-box !important;
}

#description .kolorAreaContent colgroup,
#description .kolorAreaContent col {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#description .kolorAreaContent tbody,
#description .kolorAreaContent tr,
#description .kolorAreaContent td,
#description .kolorAreaContent th {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

#description .kolorAreaContent td,
#description .kolorAreaContent th {
  padding: 0 !important;
}

#description .kolorAreaContent font {
  white-space: normal !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

/* Let the card and content height follow the wrapped description. */
#description .kolorArea,
#description .kolorAreaContent {
  height: auto !important;
  min-height: 0 !important;
}

#description .kolorAreaContent {
  overflow-x: hidden !important;
}

/* ══════════════════════════════════════════════════════════
   SCENE INFORMATION — DEFINITIVE WRAP FIX v4
   Panotour's rich-text editor exports Excel-style fixed-width
   tables. Flatten that structure to block flow so the browser
   cannot preserve the exported 560px / 420pt column width.
══════════════════════════════════════════════════════════ */

#description div.kolorArea {
  width: 440px !important;
  max-width: calc(100vw - 100px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 72vh !important;
  box-sizing: border-box !important;
}

#description div.kolorAreaContent {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(72vh - 64px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  white-space: normal !important;
}

/* Flatten Panotour's exported fixed-width descriptor table. */
#description div.kolorAreaContent > table,
#description div.kolorAreaContent table,
#description div.kolorAreaContent table > colgroup,
#description div.kolorAreaContent table > colgroup > col,
#description div.kolorAreaContent table > tbody,
#description div.kolorAreaContent table > tbody > tr,
#description div.kolorAreaContent table > tbody > tr > td,
#description div.kolorAreaContent table > tbody > tr > th {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  word-break: normal !important;
}

#description div.kolorAreaContent table {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
}

#description div.kolorAreaContent td,
#description div.kolorAreaContent th {
  padding: 0 !important;
  border: 0 !important;
}

#description div.kolorAreaContent font,
#description div.kolorAreaContent span,
#description div.kolorAreaContent p,
#description div.kolorAreaContent div {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  word-break: normal !important;
}

/* Keep paragraph-level elements as blocks when Panotour supplies them. */
#description div.kolorAreaContent p,
#description div.kolorAreaContent div {
  display: block !important;
}

@media only screen and (max-width: 600px) and (orientation: portrait) {
  #description div.kolorArea {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media only screen and (max-height: 500px) and (orientation: landscape) {
  #description div.kolorArea {
    width: min(400px, 55vw) !important;
    max-width: min(400px, 55vw) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   EMERIS INFO — MOBILE RESPONSIVE POSITIONING FINAL
   Keep the information card centre-right on phones, clear of
   the left menu, with content-driven height in both orientations.
══════════════════════════════════════════════════════════ */

/* Phone portrait — menu is 160px wide on the larger portrait breakpoint. */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  #description div.kolorArea {
    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: calc(100vw - 184px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: 16px !important;
    animation: emerisInfoIn 0.42s cubic-bezier(.22,.78,.28,1) both !important;
  }

  #description div.kolorAreaContent {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 82px) !important;
    padding: 18px 18px 20px !important;
    font-size: 13px !important;
    line-height: 1.52 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
  }

  #description div.kolorAreaContent table,
  #description div.kolorAreaContent tbody,
  #description div.kolorAreaContent tr,
  #description div.kolorAreaContent td,
  #description div.kolorAreaContent th,
  #description div.kolorAreaContent p,
  #description div.kolorAreaContent div,
  #description div.kolorAreaContent span,
  #description div.kolorAreaContent font {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
  }
}

/* Smaller portrait phones — menu is 140px wide at this breakpoint. */
@media only screen and (max-width: 430px) and (orientation: portrait) {
  #description div.kolorArea {
    width: calc(100vw - 164px) !important;
  }

  #description .kolorAreaHeader {
    height: 54px !important;
    padding: 0 52px 0 16px !important;
  }

  #description .kolorAreaHeader::before {
    font-size: 9px !important;
    letter-spacing: 0.13em !important;
  }

  #description .kolorAreaCloseBtn {
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  #description div.kolorAreaContent {
    max-height: calc(100vh - 78px) !important;
    padding: 16px 16px 18px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}

/* Phone landscape — clear the 160px menu and centre vertically.
   Do NOT set both top and bottom: that forces an absolute element
   to stretch to the full available height. */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  #description div.kolorArea {
    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: min(440px, calc(100vw - 184px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 184px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 15px !important;
    animation: emerisInfoIn 0.42s cubic-bezier(.22,.78,.28,1) both !important;
  }

  #description .kolorAreaHeader {
    height: 50px !important;
    padding: 0 50px 0 17px !important;
  }

  #description .kolorAreaHeader::before {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }

  #description div.kolorAreaContent {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 70px) !important;
    padding: 15px 17px 17px !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
  }

  #description div.kolorAreaContent table,
  #description div.kolorAreaContent tbody,
  #description div.kolorAreaContent tr,
  #description div.kolorAreaContent td,
  #description div.kolorAreaContent th,
  #description div.kolorAreaContent p,
  #description div.kolorAreaContent div,
  #description div.kolorAreaContent span,
  #description div.kolorAreaContent font {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* ══════════════════════════════════════════════════════════
   EMERIS PHOTO GALLERY — KOLORBOX BRAND TREATMENT
   Visual-only override for Panotour's existing gallery plugin.
   Keeps the original gallery logic, image sizing and navigation.
══════════════════════════════════════════════════════════ */

/* Dim the panorama without making it feel blacked out. */
div.kolorBoxOverlay {
  background: rgba(3, 28, 36, 0.50) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
  backdrop-filter: blur(1.5px) !important;
}

/* Main gallery card — same frosted Emeris language as info panel. */
div.kolorBoxContainer div.kolorBox {
  background: rgba(6, 79, 98, 0.68) !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(107, 191, 228, 0.28) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.30) !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
}

/* Strip Panotour's white header/footer appearance. */
div.kolorBoxContainer div.kolorBoxHeader,
div.kolorBoxContainer div.kolorBoxFooter,
div.kolorBoxContainer div.kolorBoxTopUIBar,
div.kolorBoxContainer div.kolorBoxBottomUIBar,
div.kolorBoxContainer div.leftUIPlaceHolder,
div.kolorBoxContainer div.centerUIPlaceHolder,
div.kolorBoxContainer div.rightUIPlaceHolder {
  background: transparent !important;
  border: 0 !important;
}

/* Give the image a clean inset frame without changing its sizing logic. */
div.kolorBoxContainer div.kolorBoxBody {
  background: transparent !important;
}

div.kolorBoxContainer div.kolorBoxBodyCenter {
  background-color: rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

div.kolorBoxContainer div.kolorBoxBodyCenter img.displayedItem,
div.kolorBoxContainer div.kolorBoxBodyCenter .displayedItem {
  display: block !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Shared control styling. */
div.kolorBoxContainer a.playPauseBtn,
div.kolorBoxContainer a.previousBtn,
div.kolorBoxContainer a.nextBtn,
div.kolorBoxContainer a.closeBtn,
div.kolorBoxContainer a.fullscreenBtn {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  background-position: center !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  opacity: 0.92 !important;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, opacity 0.22s ease !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

div.kolorBoxContainer a.playPauseBtn:hover,
div.kolorBoxContainer a.previousBtn:hover,
div.kolorBoxContainer a.nextBtn:hover,
div.kolorBoxContainer a.closeBtn:hover,
div.kolorBoxContainer a.fullscreenBtn:hover {
  background: rgba(107, 191, 228, 0.24) !important;
  border-color: rgba(107, 191, 228, 0.60) !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

/* Rebuild the old bitmap controls with crisp CSS/text icons. */
div.kolorBoxContainer a.closeBtn::before,
div.kolorBoxContainer a.fullscreenBtn::before,
div.kolorBoxContainer a.playPauseBtn::before,
div.kolorBoxContainer a.previousBtn::before,
div.kolorBoxContainer a.nextBtn::before {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-indent: 0 !important;
  color: rgba(255,255,255,0.94) !important;
  font-family: Arial, "Liberation Sans", Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

div.kolorBoxContainer a.closeBtn::before {
  content: "×" !important;
  font-size: 28px !important;
  transform: translateY(-1px) !important;
}

div.kolorBoxContainer a.fullscreenBtn::before {
  content: "⛶" !important;
  font-size: 20px !important;
}

div.kolorBoxContainer a.previousBtn::before {
  content: "‹" !important;
  font-size: 31px !important;
  transform: translateY(-2px) !important;
}

div.kolorBoxContainer a.nextBtn::before {
  content: "›" !important;
  font-size: 31px !important;
  transform: translateY(-2px) !important;
}

div.kolorBoxContainer a.playBtn::before {
  content: "▶" !important;
  font-size: 15px !important;
  transform: translateX(1px) !important;
}

div.kolorBoxContainer a.pauseBtn::before {
  content: "Ⅱ" !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

/* Elegant image counter. */
div.kolorBoxContainer div.kolorBoxNavigation {
  width: auto !important;
  min-width: 118px !important;
  height: 32px !important;
  white-space: nowrap !important;
}

div.kolorBoxContainer span.counterSpan {
  width: 54px !important;
  height: 32px !important;
  line-height: 32px !important;
  color: rgba(255,255,255,0.88) !important;
  font-family: Arial, "Liberation Sans", Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: normal !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 1px 7px rgba(0,0,0,0.35) !important;
}

/* In-image hover arrows: subtle glass circles rather than old bitmap arrows. */
div.kolorBoxContainer p.kolorBoxBodyCenterLeftArrow,
div.kolorBoxContainer p.kolorBoxBodyCenterRightArrow {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(6, 79, 98, 0.62) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
}

div.kolorBoxContainer p.kolorBoxBodyCenterLeftArrow::before,
div.kolorBoxContainer p.kolorBoxBodyCenterRightArrow::before {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

div.kolorBoxContainer p.kolorBoxBodyCenterLeftArrow::before {
  content: "‹" !important;
  transform: translateY(-2px) !important;
}

div.kolorBoxContainer p.kolorBoxBodyCenterRightArrow::before {
  content: "›" !important;
  transform: translateY(-2px) !important;
}

/* Phone portrait — keep the gallery centred and use the viewport efficiently. */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  div.kolorBoxContainer div.kolorBox {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: 16px !important;
  }

  div.kolorBoxContainer div.kolorBoxBodyCenter {
    border-radius: 8px !important;
  }

  div.kolorBoxContainer a.playPauseBtn,
  div.kolorBoxContainer a.previousBtn,
  div.kolorBoxContainer a.nextBtn,
  div.kolorBoxContainer a.closeBtn,
  div.kolorBoxContainer a.fullscreenBtn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  div.kolorBoxContainer span.counterSpan {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
  }
}

/* Phone landscape — retain maximum image area and compact controls. */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  div.kolorBoxContainer div.kolorBox {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 18px) !important;
    border-radius: 14px !important;
  }

  div.kolorBoxContainer a.playPauseBtn,
  div.kolorBoxContainer a.previousBtn,
  div.kolorBoxContainer a.nextBtn,
  div.kolorBoxContainer a.closeBtn,
  div.kolorBoxContainer a.fullscreenBtn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  div.kolorBoxContainer span.counterSpan {
    height: 28px !important;
    line-height: 28px !important;
    font-size: 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════
   PHOTO GALLERY — JS-BACKED OPEN / CLOSE FADE
   Panotour/KolorBox inserts and removes the gallery directly,
   so JS supplies the state classes that these transitions use.
══════════════════════════════════════════════════════════ */

div.kolorBoxContainer.hc-gallery-fade-ready {
  opacity: 0 !important;
  transition: opacity 0.26s ease !important;
  will-change: opacity;
}

div.kolorBoxContainer.hc-gallery-fade-ready.hc-gallery-open {
  opacity: 1 !important;
}

div.kolorBoxContainer.hc-gallery-fade-ready.hc-gallery-closing {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fade the dimmed backdrop with the gallery as one coherent layer. */
div.kolorBoxContainer.hc-gallery-fade-ready div.kolorBoxOverlay {
  transition: opacity 0.26s ease !important;
}

/* Keep reduced-motion behaviour sensible. */
@media (prefers-reduced-motion: reduce) {
  div.kolorBoxContainer.hc-gallery-fade-ready,
  div.kolorBoxContainer.hc-gallery-fade-ready div.kolorBoxOverlay {
    transition: none !important;
  }
}


/* ══════════════════════════════════════════════════════════
   MAIN MENU — MINIMAL COLOURLESS FROST
   Keeps the existing menu colour/opacity unchanged.
   Adds only a very subtle ~5% glass blur effect.
══════════════════════════════════════════════════════════ */
#kolorMenu,
#kolorMenu .kolorMenu,
div[id*="kolorMenu"] {
  -webkit-backdrop-filter: blur(3px) saturate(100%) !important;
  backdrop-filter: blur(3px) saturate(100%) !important;
}


/* ══════════════════════════════════════════════════════════
   KRPANO RIGHT-CLICK CONTEXT MENU — EMERIS GLASS TREATMENT
   The JS tags krpano's dynamically-created menu with these classes.
══════════════════════════════════════════════════════════ */

.hc-krpano-contextmenu {
  background: rgba(18, 35, 40, 0.82) !important;
  -webkit-backdrop-filter: blur(16px) saturate(115%) !important;
  backdrop-filter: blur(16px) saturate(115%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.30) !important;
  overflow: hidden !important;
  color: rgba(255,255,255,0.94) !important;
  font-family: Arial, "Liberation Sans", Helvetica, sans-serif !important;
  min-width: 250px !important;
}

.hc-krpano-contextmenu,
.hc-krpano-contextmenu * {
  font-family: Arial, "Liberation Sans", Helvetica, sans-serif !important;
  box-sizing: border-box !important;
}

.hc-krpano-contextmenu .hc-context-row {
  color: rgba(255,255,255,0.92) !important;
  background: transparent !important;
  padding: 10px 14px !important;
  min-height: 38px !important;
  line-height: 1.3 !important;
  font-size: 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.09) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

.hc-krpano-contextmenu .hc-context-row:last-child {
  border-bottom: 0 !important;
}

.hc-krpano-contextmenu .hc-context-row.hc-context-action {
  cursor: pointer !important;
}

.hc-krpano-contextmenu .hc-context-row.hc-context-action:hover {
  background: rgba(107,191,228,0.18) !important;
  color: #ffffff !important;
}

.hc-krpano-contextmenu .hc-context-row.hc-context-muted {
  color: rgba(255,255,255,0.62) !important;
  font-size: 12px !important;
}

/* Neutralise krpano's light inline backgrounds/separators inside our shell. */
.hc-krpano-contextmenu [style] {
  color: inherit;
}


/* ══════════════════════════════════════════════════════════
   KRPANO CONTEXT MENU — REMOVE SQUARE OUTER BACKGROUND
   Makes krpano's surrounding wrapper fully transparent so only
   the rounded frosted Emeris panel remains visible.
══════════════════════════════════════════════════════════ */

.hc-krpano-contextmenu-shell {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* krpano can nest one or more light table/div wrappers around the
   actual menu. Neutralise those fills without disturbing layout. */
.hc-krpano-contextmenu-shell > div,
.hc-krpano-contextmenu-shell > table,
.hc-krpano-contextmenu table,
.hc-krpano-contextmenu tbody,
.hc-krpano-contextmenu tr,
.hc-krpano-contextmenu td {
  background-color: transparent !important;
}

/* Keep the actual rounded menu glass visible. */
.hc-krpano-contextmenu {
  background: rgba(18, 35, 40, 0.72) !important;
  background-color: rgba(18, 35, 40, 0.72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(110%) !important;
  backdrop-filter: blur(16px) saturate(110%) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}


/* ══════════════════════════════════════════════════════════
   KRPANO CONTEXT MENU — RESTORE TEXT COLOUR AFTER HOVER
   krpano writes black inline text during its native hover cycle.
   Force every tagged row and its descendants back to white.
══════════════════════════════════════════════════════════ */
.hc-krpano-contextmenu .hc-context-row,
.hc-krpano-contextmenu .hc-context-row *,
.hc-krpano-contextmenu .hc-context-row:hover,
.hc-krpano-contextmenu .hc-context-row:hover * {
  color: rgba(255,255,255,0.94) !important;
}

.hc-krpano-contextmenu .hc-context-muted,
.hc-krpano-contextmenu .hc-context-muted * {
  color: rgba(255,255,255,0.68) !important;
}


/* ══════════════════════════════════════════════════════════
   KRPANO CONTEXT MENU — CONSISTENT LEFT ALIGNMENT
   Align all four content groups to the same left inset.
══════════════════════════════════════════════════════════ */
.hc-krpano-contextmenu .hc-context-row {
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}

.hc-krpano-contextmenu .hc-context-row *,
.hc-krpano-contextmenu td,
.hc-krpano-contextmenu td * {
  margin-left: 0 !important;
  text-indent: 0 !important;
}

/* krpano gives the two action rows their own extra horizontal inset.
   Remove it so Enter Fullscreen / About align with the header/footer. */
.hc-krpano-contextmenu .hc-context-action {
  padding-left: 14px !important;
}

/* ══════════════════════════════════════════════════════════
   TOP-LEVEL MENU — WRAPPED HEADING LINE SPACING
   Adds breathing room between lines when category headings wrap.
   Applies consistently on desktop, portrait mobile and landscape.
══════════════════════════════════════════════════════════ */
ul.kolorMenu > li > p span,
ul.kolorMenu > li > p[style] span {
  line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════════════
   SUBMENU — RIGHT-EDGE BREATHING ROOM
   Adds extra clearance on the right for wrapped submenu labels.
   Applies on desktop, portrait mobile and landscape.
══════════════════════════════════════════════════════════ */
ul.kolorMenu li ul > li > p,
ul.kolorMenu li ul > li > p[style],
ul.kolorMenu li ul.kolorMenuGroup > li > p,
ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
  padding-right: 14px !important;
}

/* ══════════════════════════════════════════════════════════
   SUBMENU — DESKTOP INNER-WIDTH CONSTRAINT
   Ensures long desktop submenu labels wrap before reaching the
   right edge, while preserving existing mobile behaviour.
══════════════════════════════════════════════════════════ */
@media only screen and (min-width: 601px) {
  ul.kolorMenu li ul > li > p,
  ul.kolorMenu li ul > li > p[style],
  ul.kolorMenu li ul.kolorMenuGroup > li > p,
  ul.kolorMenu li ul.kolorMenuGroup > li > p[style] {
    padding-right: 16px !important;
    overflow: hidden !important;
  }

  ul.kolorMenu li ul > li > p span,
  ul.kolorMenu li ul.kolorMenuGroup > li > p span {
    display: block !important;
    width: 100% !important;
    max-width: 166px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
}