.map_holder { height: min(66.67vh, 800px) !important; min-height: 400px; }
@media (max-width: 768px) { .map_holder { height: min(50vh, 100vw) !important; min-height: 300px; } }
.map_holder .port_name { color: #10233a !important; text-shadow: 0 0 6px #fff, 0 0 12px rgba(255,255,255,.75), 0 1px 2px #fff !important; }
#pg-hero { position: absolute; inset: 0; z-index: 5; overflow: hidden; }
#pg-map, #pg-fallback { position: absolute; inset: 0; }
#pg-map { background: transparent; }
#pg-fallback { display: none; background-position: center; background-size: cover; }
#pg-hero.pg-failed #pg-map { display: none; }
#pg-hero.pg-failed #pg-fallback { display: block; }
#pg-map .maplibregl-canvas { outline: none; }
#pg-map .maplibregl-canvas:focus-visible { outline: 2px solid rgba(255,255,255,.95); outline-offset: -3px; }
.pg-name { border: 0; border-radius: 999px; padding: 6px 9px; background: rgba(16,35,58,.88); white-space: nowrap; cursor: pointer; user-select: none;
  color: #fff; font: 800 11.5px/1.1 Gabarito,Inter,system-ui,sans-serif; letter-spacing: .07em; text-transform: uppercase;
  z-index: 4; text-shadow: none; transition: opacity .25s ease,background .18s ease; }
.pg-name:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pg-name.pg-label-hidden, .pg-zoomed .pg-name, .pg-freelook .pg-name { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.pg-port-label { position: absolute; z-index: 4; display: block; transform: translate(-50%,-50%); white-space: nowrap;
  border-radius: 2px; padding: 3px 6px; text-decoration: none; color: #fff; background: rgba(16,35,58,.82);
  font: 700 12.5px/1.2 Inter,system-ui,sans-serif; transition: opacity .15s ease,background .15s ease; }
.pg-port-label:hover { background: rgba(16,35,58,.97); }
.pg-port-label:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pg-port-label.pg-label-hidden { opacity: 0 !important; visibility: hidden; pointer-events: none; }

/* Selection spotlight remains a tiny screen-space SVG so its soft feather is
   independent of map zoom and never turns into a huge GPU texture. */
#pg-dimsvg { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#pg-dim { fill: rgba(0,0,0,.18); fill-rule: evenodd; opacity: 1; transition: opacity .45s ease; }
#pg-hero.pg-region-flight #pg-dim { opacity: 0; }
#pg-label-lines { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#pg-label-lines line { stroke: rgba(16,35,58,.9); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .15s ease; }
#pg-hero.pg-region-flight .pg-port-label, #pg-hero.pg-region-flight #pg-label-lines line { opacity: 0 !important; pointer-events: none; }
.cs-hero-topwash { transition: opacity .45s ease; }
.map_holder:has(#pg-hero.pg-zoomed) .cs-hero-topwash { opacity: 0; }

.pg-ctl { position: absolute; z-index: 7; bottom: 14px; display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 999px; padding: 8px 16px; background: rgba(10,19,34,.84); color: #fff;
  font: 700 13px/1.2 Inter,system-ui,sans-serif; cursor: pointer; text-decoration: none; transition: background .18s ease; }
.pg-ctl:hover { background: rgba(10,19,34,.97); }
.pg-ctl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pg-ctl[hidden] { display: none; }
#pg-reset { right: 16px; }
#pg-jump { right: 148px; }

.pg-attribution { position: absolute; z-index: 8; bottom: 12px; left: 12px; display: flex; align-items: center; max-width: calc(100% - 300px); }
.pg-attribution-toggle { display: inline-flex; flex: 0 0 31px; width: 31px; height: 31px; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(10,19,34,.8); color: #fff;
  box-shadow: 0 1px 5px rgba(10,19,34,.13); font: 800 15px/1 Georgia,serif; cursor: pointer; backdrop-filter: blur(4px); }
.pg-attribution-toggle:hover { background: rgba(10,19,34,.96); }
.pg-attribution-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pg-attribution-copy { overflow: hidden; max-width: 280px; margin-left: 6px; border-radius: 999px; padding: 7px 11px;
  background: rgba(10,19,34,.8); color: #fff; font: 600 9.5px/1.2 Inter,system-ui,sans-serif; white-space: nowrap;
  opacity: 1; transition: max-width .22s ease,margin .22s ease,padding .22s ease,opacity .16s ease; backdrop-filter: blur(4px); }
.pg-attribution-copy a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.pg-attribution:not(.pg-attribution-open) .pg-attribution-copy { max-width: 0; margin-left: 0; padding-right: 0; padding-left: 0; opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .pg-name { display: none; }
  #pg-jump { display: none; }
  #pg-reset { right: 12px; bottom: 12px; }
  .pg-attribution { max-width: calc(100% - 128px); }
  .pg-attribution-copy { max-width: 230px; }
}
.pg-port-guide-page .crumbs { display: none !important; }
.pg-port-guide-page main > .container { padding-top: 18px !important; }
.pg-port-guide-page .cruise_blurb > h1:first-child { margin-top: 0 !important; }