/* Cruise Hub - built by tools/build-css-bundles.php, do not edit. Sources: assets/*.css */

/* search.css */
.hub-cs-search {
    
    --hub-cs-accent: var(--theme-button-background-initial-color, var(--wp--preset--color--primary, #0a6b58));
    --hub-cs-accent-text: var(--theme-button-text-initial-color, #fff);
    --hub-cs-accent-hover: var(--theme-button-background-hover-color, var(--hub-cs-accent));
    --hub-cs-accent-text-hover: var(--theme-button-text-hover-color, var(--hub-cs-accent-text));
    
    --hub-cs-base-font: var(--theme-font-size, 1rem);
    font-family: inherit;
}
.hub-cs-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.hub-cs-select {
    position: relative;
}
.hub-cs-select-native {
    display: none;
}
.hub-cs-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.hub-cs-select-btn span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hub-cs-select-btn::after {
    
    content: '';
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--hub-cs-accent);
    transition: transform 0.15s ease;
}
.hub-cs-select-btn.is-open::after {
    transform: rotate(180deg);
}
.hub-cs-select-popup {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 4px;
}
.hub-cs-select-option {
    padding: 7px 10px;
    border-radius: 5px;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hub-cs-select-option:hover,
.hub-cs-select-option.is-active {
    
    background: color-mix(in srgb, var(--hub-cs-accent) 25%, #fff);
}
.hub-cs-select-option.is-selected {
    font-weight: 700;
}
.hub-cs-select-option.is-selected::before {
    content: '✓ ';
    color: var(--hub-cs-accent);
}
.hub-cs-typeahead {
    position: relative;
}
.hub-cs-typeahead input.hub-cs-typeahead-input {
    display: block;
    box-sizing: border-box;
    
    height: auto;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    background: #fff;
    color: inherit;
}
.hub-cs-typeahead-suggestions {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 4px;
}
.hub-cs-typeahead-option {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 5px;
    background: none;
    font-family: inherit;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    text-align: left;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hub-cs-typeahead-option:hover {
    background: color-mix(in srgb, var(--hub-cs-accent) 25%, #fff);
}
.hub-cs-typeahead-option:has(.hub-cs-typeahead-option-meta) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.hub-cs-typeahead-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.hub-cs-typeahead-option-meta {
    flex-shrink: 0;
    font-size: .85em;
    color: #777;
}
.hub-cs-typeahead-country {
    font-weight: 600;
}
.hub-cs-typeahead-country::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 6px;
    vertical-align: -0.15em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hub-cs-typeahead-country + .hub-cs-typeahead-option:not(.hub-cs-typeahead-country) {
    margin-top: 4px;
    border-top: 1px solid #eee;
    border-radius: 0 0 5px 5px;
}
.hub-cs-typeahead-all {
    font-weight: 600;
    color: var(--hub-cs-accent);
    border-bottom: 1px solid #eee;
    border-radius: 5px 5px 0 0;
    margin-bottom: 4px;
}
.hub-cs-typeahead-heading {
    padding: 6px 10px 4px;
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #777;
}
.hub-cs-modal-open {
    overflow: hidden;
}
.hub-cs-typeahead.is-region-limited .hub-cs-typeahead-input {
    cursor: pointer;
}
.hub-cs-daterange {
    position: relative;
}
.hub-cs-daterange-toggle {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    text-align: left;
    background: #fff;
    cursor: pointer;
    color: inherit;
}
.hub-cs-daterange-popup {
    position: absolute;
    z-index: 20;
    top: 0;
    
    left: 100%;
    margin-left: 10px;
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.hub-cs-daterange-popup[hidden] {
    display: none;
}
.hub-cs-daterange-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}
.hub-cs-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hub-cs-calendar-nav {
    width: 26px;
    height: 26px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    line-height: 1;
    padding: 0;
}
.hub-cs-calendar-months {
    display: flex;
    gap: 18px;
}
.hub-cs-calendar-month {
    width: 200px;
}
.hub-cs-calendar-month-title {
    text-align: center;
    font-weight: 600;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    margin-bottom: 6px;
    text-transform: capitalize;
}
.hub-cs-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: calc(var(--hub-cs-base-font) * 0.6875);
    color: #888;
    text-align: center;
    margin-bottom: 4px;
}
.hub-cs-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.hub-cs-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    border: none;
    border-radius: 4px;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
}
.hub-cs-calendar-day.is-empty {
    visibility: hidden;
    cursor: default;
}
.hub-cs-calendar-day:disabled {
    color: #ccc;
    cursor: default;
}
.hub-cs-calendar-day:hover:not(:disabled):not(.is-selected) {
    background: color-mix(in srgb, var(--hub-cs-accent) 25%, #fff);
}
.hub-cs-calendar-day.is-selected {
    background: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
    font-weight: 700;
}
.hub-cs-calendar-day.is-in-range {
    background: color-mix(in srgb, var(--hub-cs-accent) 15%, #fff);
    border-radius: 0;
}
@media (max-width: 600px) {
.hub-cs-daterange-popup {
        left: 0;
        top: calc(100% + 6px);
        margin-left: 0;
        width: 260px;
    }
.hub-cs-calendar-months {
        flex-direction: column;
        gap: 14px;
    }
.hub-cs-calendar-month {
        width: 100%;
    }
}
.hub-cs-btn {
    padding: 9px 18px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    
    font-size: var(--theme-button-font-size, 0.875rem);
}
.hub-cs-btn-primary {
    background: var(--hub-cs-accent);
    border-color: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
}
.hub-cs-btn-primary:hover {
    background: var(--hub-cs-accent-hover);
    border-color: var(--hub-cs-accent-hover);
    color: var(--hub-cs-accent-text-hover);
}
.hub-cs-status {
    color: #555;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
}
.hub-cs-row {
    display: flex;
    align-items: stretch;
    
    height: 250px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: box-shadow 0.15s ease;
}
.hub-cs-row:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.hub-cs-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}
.hub-cs-page-btn {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: var(--theme-button-font-size, 0.875rem);
}
.hub-cs-page-btn.is-active {
    background: var(--hub-cs-accent);
    border-color: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
}
.hub-cs-page-btn:disabled {
    cursor: default;
    opacity: .4;
}
.hub-cs-page-ellipsis {
    padding: 6px 4px;
    color: #999;
}
@media (max-width: 900px) {
.hub-cs-layout {
        flex-direction: column;
    }
}
html.hub-cs-modal-open {
    overflow: hidden;
}
.hub-cs-nlp-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2147481000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    border: none;
    border-radius: 8px 0 0 8px;
    background: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
    cursor: pointer;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.18);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font: inherit;
    font-size: calc(var(--hub-cs-base-font) * 0.85);
}
.hub-cs-nlp-tab:hover {
    background: var(--hub-cs-accent-hover);
    color: var(--hub-cs-accent-text-hover);
}
.hub-cs-nlp-tab svg {
    transform: rotate(90deg);
}
.hub-cs-nlp-drawer {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
}
.hub-cs-nlp-drawer[hidden] {
    display: none;
}
.hub-cs-nlp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.hub-cs-nlp-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    outline: none;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
.hub-cs-nlp-drawer.is-open .hub-cs-nlp-panel {
    transform: translateX(0);
}
.hub-cs-nlp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: #ececec;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}
.hub-cs-nlp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 48px 14px 20px;
    border-bottom: 1px solid #eee;
    flex: 0 0 auto;
}
.hub-cs-nlp-header strong {
    font-size: calc(var(--hub-cs-base-font) * 1.05);
}
.hub-cs-nlp-header-avatar,
.hub-cs-nlp-msg-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--hub-cs-accent) 15%, #fff);
    color: var(--hub-cs-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hub-cs-nlp-header-avatar img,
.hub-cs-nlp-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hub-cs-nlp-header-avatar svg,
.hub-cs-nlp-msg-avatar svg {
    width: 60%;
    height: 60%;
}
.hub-cs-nlp-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hub-cs-nlp-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 88%;
}
.hub-cs-nlp-msg.is-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.hub-cs-nlp-msg.is-assistant {
    align-self: flex-start;
}
.hub-cs-nlp-bubble {
    padding: 9px 14px;
    border-radius: 16px;
    font-size: calc(var(--hub-cs-base-font) * 0.9);
    line-height: 1.4;
    white-space: pre-wrap;
}
.hub-cs-nlp-msg.is-user .hub-cs-nlp-bubble {
    background: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
    border-bottom-right-radius: 4px;
}
.hub-cs-nlp-msg.is-assistant .hub-cs-nlp-bubble {
    background: #f0f0f0;
    color: #222;
    border-bottom-left-radius: 4px;
}
.hub-cs-nlp-composer {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #eee;
}
.hub-cs-nlp-input {
    flex: 1 1 auto;
    padding: 9px 12px;
    border: 1px solid #ccc;
    border-radius: 999px;
    font: inherit;
    box-sizing: border-box;
}
.hub-cs-nlp-submit {
    margin: 0 20px 16px;
}
@media (max-width: 600px) {
.hub-cs-nlp-panel {
        width: 100%;
    }
}
.hub-cs-direction .hub-cs-wx-crumbs { font-size: .875em; opacity: .75; margin-bottom: .75em; }
.hub-cs-direction .hub-cs-wx-crumbs a { color: inherit; }
.hub-cs-direction-title { margin: 0 0 .5em; }
.hub-cs-direction-lead { font-size: 1.05em; margin: 0 0 .8em; }
.hub-cs-direction-children,
.hub-cs-direction-season,
.hub-cs-direction-ports { margin: 0 0 .6em; }
.hub-cs-direction-hero { margin: 0 0 1em; }
.hub-cs-direction-hero-img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 12px; }
.hub-cs-direction-text { margin: 0 0 1em; }
.hub-cs-direction-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 0 0 1.2em; }
.hub-cs-direction-gallery figure { margin: 0; }
.hub-cs-direction-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.hub-cs-direction-offers { margin-top: 1.4em; }
.hub-cs-direction-more { text-align: center; margin: 1.2em 0; }
.hub-cs-direction-index { margin: 2em 0 1em; line-height: 1.8; }


/* boxes.css */
/*
 * [hub_boxy] — curated offer-box grid. Dedicated card design (.hub-cs-box-card-*),
 * not a reuse of [hub_szukaj]'s .hub-cs-row — depends on search.css only for the
 * shared --hub-cs-accent/--hub-cs-base-font theme-inheriting variables (see that
 * file's :root), not for any of its row/card classes.
 */

.hub-cs-boxes-grid {
    /* Explicit width: 100% + box-sizing: border-box — this plugin has no
       global box-sizing reset, so left implicit this is content-box, and a
       shrink-to-fit-vs-fill-parent ambiguity on the SLIDER container itself
       (not just its .hub-cs-box-card children, already fixed) turned out to
       be part of why the mobile card was overflowing the viewport: the
       calc(100% - ...) flex-basis on each card only means what it says if
       this container's OWN 100% is unambiguously the actual visible width. */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: grid;
    /* Every box is 1/4 of the container (1/3 below 1100px) however many
       boxes the block has, so 1-3 boxes keep the same size and are not
       stretched across the page. auto-fill keeps the empty tracks; a track
       never drops under 220px, so a narrow container (sidebar, column)
       simply gets fewer columns. */
    grid-template-columns: repeat(auto-fill, minmax(max(220px, (100% - 61px) / 4), 1fr));
    gap: 20px;
}

@media (max-width: 1100px) {
    .hub-cs-boxes-grid {
        grid-template-columns: repeat(auto-fill, minmax(max(220px, (100% - 41px) / 3), 1fr));
    }
}

/*
 * Tablet/phone switch from a wrapping grid to a horizontal scroll-snap
 * slider — one row, native touch swipe (no JS needed), each card sized so
 * the NEXT one peeks in ~10% on the right edge as a visual invitation to
 * swipe, per request: 2 full cards + 10% of a 3rd on tablet, 1 full card +
 * 10% of the 2nd on phone. box-width * 1.1 = container width is the
 * relationship that makes "10% of the box" and "the sliver left over past N
 * full boxes" the same number, hence the /1.1 and /2.1 divisors below.
 */
@media (max-width: 900px) {
    .hub-cs-boxes-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        /* Room so each card's own :hover box-shadow doesn't clip against the
           scroll container's edge, and for platforms that render a visible
           horizontal scrollbar. */
        padding-bottom: 6px;
        /* Hides that scrollbar where the browser allows it — a swipeable
           row reads as a carousel, a scrollbar under it reads as a bug. */
        scrollbar-width: none;
    }

    .hub-cs-boxes-grid::-webkit-scrollbar {
        display: none;
    }

    .hub-cs-boxes-grid .hub-cs-box-card {
        scroll-snap-align: start;
        flex: 0 0 calc((100% - 2 * 16px) / 2.1);
    }
}

@media (max-width: 600px) {
    .hub-cs-boxes-grid .hub-cs-box-card {
        flex: 0 0 calc((100% - 16px) / 1.1);
    }

    /* Tighter than the desktop/tablet sizing — the narrowest slider card
       width is what was letting a date's own text outgrow its (equal-width,
       min-width: 0) box in the first place; this reduces how often the
       overflow: hidden safety net above actually has anything to clip. */
    .hub-cs-box-card-fact {
        padding: 6px 4px;
    }

    .hub-cs-box-card-fact b {
        font-size: 0.8125rem;
    }
}

.hub-cs-box-card {
    display: flex;
    flex-direction: column;
    /* A flex/grid item's default min-width is auto, not 0 — it refuses to
       shrink below its own content's natural width. A real cruise-ship photo
       is easily 1200-2000px+ wide, so without this, the card sized itself off
       THAT instead of its assigned flex-basis/grid track (found live: "the
       mobile card is at ~700% of screen width" in the horizontal slider,
       where flex: 0 0 calc(...) was being ignored entirely for exactly this
       reason). Set on the base rule, not just the mobile slider override, so
       the desktop grid (grid-template-columns: repeat(4, 1fr), which has the
       exact same footgun for a plain 1fr track) can't hit this either. */
    min-width: 0;
    /* The 1px border below would otherwise add to a calc()-based flex-basis
       width (content-box is the default here — no global reset in this
       plugin) instead of being absorbed into it. Small on its own (2px),
       included as part of the same box-sizing audit as the container fix
       above rather than leaving it as the one remaining implicit case. */
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: box-shadow 0.15s ease;
}

.hub-cs-box-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.hub-cs-box-card-media {
    position: relative;
    /* Explicit width: 100% (not left to flex's align-items: stretch to
       supply it) is what makes aspect-ratio reliably compute a height from
       it — .hub-cs-box-card is flex-direction: column, and an item's cross-
       axis stretch + aspect-ratio interaction is a newer, less consistently
       implemented part of the spec than "definite width -> aspect-ratio
       height", which every current browser handles the same way. Without
       this, the height side of the ratio wasn't resolving in the mobile
       stacked layout, so the <img> below (height: 100%, a percentage that's
       only meaningful against a PARENT with a definite height) fell back to
       its own raw intrinsic size instead — a real photo can easily be
       2000px+ tall, which is exactly what rendered (found live via
       screenshot: a single photo taller than the whole visible screen). */
    width: 100%;
    aspect-ratio: 16 / 10;
    /* Unconditional hard cap, independent of whether aspect-ratio above
       resolves correctly at all — two rounds of fixing the aspect-ratio/
       stretch computation itself (see the comment above) made zero visible
       difference per live testing, so this stops trusting that computation
       and just forbids the box from ever exceeding this height outright.
       max-height has no complex spec interactions to get wrong the way
       aspect-ratio+flex-stretch apparently does — combined with the
       existing overflow: hidden + the photo's own object-fit: cover, a
       genuinely huge intrinsic image just gets cropped, never renders at
       its raw size. */
    max-height: 220px;
    background: #eee;
    overflow: hidden;
}

.hub-cs-box-card-media img:not(.hub-cs-box-card-logo) {
    /* Absolutely positioned against .hub-cs-box-card-media's own position:
       relative box instead of a plain width/height: 100% — sidesteps the
       percentage-height-needs-a-definite-height-parent question entirely
       (belt-and-suspenders on top of the width: 100% fix above, not a
       replacement for it: something already this defensive shouldn't need
       a THIRD occurrence of this exact bug to get found). */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-cs-box-card-logo {
    position: absolute;
    top: 10px;
    left: 10px;
    /* -30% of the previous 30%/110px, per request. */
    width: 21%;
    max-width: 77px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* A cruise with a Polish guide: a small Polish flag in the photo's top right
   corner (map note 18.10.2026). Drawn, not an emoji: Windows shows the flag
   emoji as the letters "PL". Same rule in offer.css for "Podobne rejsy". */
.hub-cs-pilot-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 27px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(#fff 0 50%, #dc143c 50% 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    z-index: 1;
}

/* "Na zdjęciu etykieta z ceną" — overlaid on the photo itself (per request),
   not in its own section like the [hub_szukaj] row. No EUR hint line here at
   all, even for a non-EUR price — that conversion hint is a listing-only
   thing (see search.js), not shown on a box regardless of currency. */
.hub-cs-box-card-price {
    position: absolute;
    right: 10px;
    bottom: 10px;
    /* Fixed, not content-sized — otherwise "179 EUR" and "88 503 EUR" badges
       land at different widths/positions across cards in the same row. Wide
       enough for a realistic worst case ("123 456 EUR") at this font-size. */
    width: 150px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
}

.hub-cs-box-card-price-label {
    font-size: 0.75rem;
    opacity: 0.85;
}

.hub-cs-box-card-price-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.hub-cs-box-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
}

.hub-cs-box-card-region {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Region + transport chips in one line, same pill style for both. */
.hub-cs-box-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Parent-qualified (not just .hub-cs-box-card-title) and margin-block-*
   explicitly reset, not just margin: 0 — a bare single-class selector on a
   real <h3> ties in specificity with Blocksy's own
   `:is(.is-layout-flow,.is-layout-constrained) :where(h1..h6)` margin rule
   (its :where() contributes zero specificity, landing it at exactly one
   class), and a tie goes to whichever loads later (the theme) — the exact
   bug already found and fixed for search.css's own .hub-cs-row-title. */
.hub-cs-box-card-body .hub-cs-box-card-title {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    /* Reserves the full 2-line height regardless of whether THIS title
       actually wraps to 2 lines — without it, a 1-line title left everything
       below (route, fact boxes, footer) sitting higher than in a neighboring
       card whose title/route wrapped further, so the fact boxes across a row
       ended up at different Y positions instead of aligning (found live). */
    min-height: 2.6em;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    /* Clamped to 2 lines — only shows an ellipsis when it actually doesn't
       fit, never cuts a title that already fits in two lines. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-cs-box-card-route {
    margin: 0;
    /* Same reservation as the title above, same reason — a 1-line route
       (e.g. "Keelung → Busan") must take up as much vertical space as a
       2-line one, or the fact boxes below it drift up. */
    min-height: 2.8em;
    font-size: 0.8125rem;
    color: #555;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CSS Grid, not flex — a flex item's default min-width is auto, meaning it
   won't shrink below its own content's width even at equal flex-grow, so the
   OD/DO boxes ended up sized by their OWN date text ("23.09.2026" wider than
   "5.09.2026") instead of matching each other (found live). Grid's `1fr`
   tracks don't have that footgun IF paired with minmax(0, 1fr) — that's what
   actually forces both date columns to the same width regardless of their
   text, without touching the card's own outer padding at all. */
.hub-cs-box-card-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin: 4px 0 2px;
}

.hub-cs-box-card-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    border: 1.5px solid var(--hub-cs-accent);
    border-radius: 8px;
    text-align: center;
    min-width: 0;
    /* minmax(0, 1fr) on the grid track above deliberately allows this box to
       shrink narrower than its own date text's natural width (that's what
       makes the two date boxes match each other regardless of content) — on
       a narrow slider card that shrink can go far enough that the date
       spilled visually past this border instead of just being clipped by it
       (found live). This is the safety net for that case. */
    overflow: hidden;
}

.hub-cs-box-card-fact span {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888;
}

.hub-cs-box-card-fact b {
    font-size: 0.9375rem;
    white-space: nowrap;
}

.hub-cs-box-card-fact-nights {
    min-width: 60px;
}

.hub-cs-box-card-fact-nights b {
    font-size: 1.375rem;
    line-height: 1.1;
}

.hub-cs-box-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

/* Icon ABOVE the name (per the reference screenshot), not beside it — a
   centered column, not a row. flex: 0 1 auto (grow: 0) is what actually
   fixes the huge left/right "padding" look from the previous version: with
   flex-grow: 1 this column claimed ALL leftover space in the footer row
   (the CTA button is flex: 0 0 auto and never grows), so a short name like
   "Mein Schiff 2" sat centered inside a column much wider than it needed —
   reading as oversized padding even though no padding was ever set (found
   live via a DevTools screenshot). flex-shrink stays 1 + min-width: 0 so a
   genuinely long name still shrinks/ellipsizes against the button instead
   of pushing it off — it just no longer grows past its own content first.
   font-size set here (not just on the name span) so the icon's own em
   height below means exactly what was asked: relative to the name's own
   text height, not some unrelated inherited size. */
.hub-cs-box-card-ship {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.875rem;
}

.hub-cs-box-card-ship img {
    /* -20% of the previous 2.8em, per request. */
    height: 2.24em;
    width: auto;
    /* The width="122" height="66" attributes give this ratio before it loads (no jump). */
    aspect-ratio: 122 / 66;
}

.hub-cs-box-card-ship-name {
    /* align-items: center above sizes everything to its own content by
       default — fine for the icon, but the name then has no definite width
       to ellipsize against (content that's free to be as wide as it wants
       never overflows itself). align-self: stretch overrides just this one
       child back to the column's full (already width-constrained) size, and
       text-align centers whatever text ends up inside that box. */
    align-self: stretch;
    min-width: 0;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    /* Explicit, not theme-derived — this site's own --theme-link-initial-color
       resolves to black (verified live against Blocksy's actual generated
       CSS), which isn't blue at all; requested specifically as this exact hex
       rather than whatever the theme's real link color happens to be. */
    color: #004aad;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-cs-box-card-cta {
    flex: 0 0 auto;
    /* -10px each side from the original 20px, per request — frees up room
       for the ship name before it has to ellipsize. */
    padding: 10px 10px;
    border-radius: 8px;
    background: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap;
}

.hub-cs-box-card:hover .hub-cs-box-card-cta {
    background: var(--hub-cs-accent-hover);
    color: var(--hub-cs-accent-text-hover);
}


/* weather.css */
/* [hub_pogoda] — weather pages. Colours come from the theme (currentColor, the
   plugin's accent variables); only spacing and structure are set here. */
.hub-cs-weather { max-width: 1200px; margin: 0 auto; }
.hub-cs-wx-crumbs { font-size: .875em; opacity: .75; margin-bottom: .75em; }
.hub-cs-wx-crumbs a { color: inherit; }
.hub-cs-wx-title { margin: 0 0 .5em; }
.hub-cs-wx-lead { font-size: 1.1em; line-height: 1.6; margin: 0 0 1.25em; }
.hub-cs-wx-note { font-size: .9em; opacity: .75; }

.hub-cs-wx-table-wrap { overflow-x: auto; margin: 0 0 1em; -webkit-overflow-scrolling: touch; }
.hub-cs-wx-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hub-cs-wx-table caption { text-align: left; font-weight: 600; padding: 0 0 .5em; }
.hub-cs-wx-table th, .hub-cs-wx-table td { padding: .3em .75em; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); text-align: right; white-space: nowrap; }
.hub-cs-wx-table thead th { font-size: .85em; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
.hub-cs-wx-table th:first-child, .hub-cs-wx-table td:first-child { text-align: left; white-space: normal; }
.hub-cs-wx-table tbody th { font-weight: 600; }
.hub-cs-wx-table thead .hub-cs-wx-emoji-th { font-size: 1.3em; opacity: 1; cursor: help; }
.hub-cs-wx-table tbody th a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.hub-cs-wx-country { display: block; font-weight: 400; font-size: .85em; opacity: .7; }

.hub-cs-wx-method { margin: 0 0 1.5em; font-size: .925em; }
.hub-cs-wx-method summary { cursor: pointer; font-weight: 600; padding: .25em 0; }
.hub-cs-wx-method p { margin: .5em 0; line-height: 1.55; }

.hub-cs-wx-description { margin: 1.5em 0; line-height: 1.65; }
.hub-cs-wx-offers-heading { margin: 1.5em 0 .75em; }
.hub-cs-wx-all { text-align: center; margin: 1.25em 0; }
.hub-cs-wx-more { margin-top: 2.5em; }
.hub-cs-wx-more h2 { font-size: 1.15em; margin: 1.25em 0 .5em; }

.hub-cs-wx-month-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em .9em; }
.hub-cs-wx-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25em; }
.hub-cs-wx-region-card { padding: 1em 1.1em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 10px; }
.hub-cs-wx-region-card h2 { font-size: 1.15em; margin: 0 0 .5em; }

.hub-cs-wx-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75em; }
.hub-cs-wx-month a { display: flex; flex-direction: column; gap: .2em; padding: .85em 1em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 10px; text-decoration: none; color: inherit; }
.hub-cs-wx-month a:hover, .hub-cs-wx-month a:focus-visible { border-color: var(--hub-cs-accent, currentColor); }
.hub-cs-wx-month-name { font-weight: 600; }
.hub-cs-wx-month-count { font-size: .875em; opacity: .75; }
.hub-cs-wx-month.is-empty a { opacity: .55; }

/* Temperature tint: --hub-cs-wx-h is a hue set inline from the value
   (Hub_CS_Weather::temp_hue(), blue = cold, orange-red = hot). */
.hub-cs-wx-month.has-climate a { background: hsl(var(--hub-cs-wx-h) 85% 95%); border-color: hsl(var(--hub-cs-wx-h) 60% 80%); }
.hub-cs-wx-month-weather { display: flex; align-items: center; gap: .4em; margin: .2em 0; }
.hub-cs-wx-month-day { font-size: 1.2em; white-space: nowrap; font-variant-numeric: tabular-nums; color: hsl(var(--hub-cs-wx-h) 70% 32%); }
.hub-cs-wx-month-night { font-size: .875em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hub-cs-wx-sky { flex: none; }
.hub-cs-weather .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hub-cs-wx-chart { margin: 0 0 1.5em; padding: 1em 1em .5em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 10px; }
.hub-cs-wx-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hub-cs-wx-chart .grid { stroke: currentColor; stroke-opacity: .12; }
.hub-cs-wx-chart .axis { font-size: 12px; fill: currentColor; fill-opacity: .6; }
.hub-cs-wx-chart .month { font-size: 13px; fill: currentColor; font-weight: 600; }
.hub-cs-wx-chart a:hover .month, .hub-cs-wx-chart a:focus .month { fill: var(--hub-cs-accent, currentColor); text-decoration: underline; }
.hub-cs-wx-chart .band { stroke-width: 1.5; stroke-linejoin: round; }
.hub-cs-wx-chart .band.day { fill: #fb923c; fill-opacity: .35; stroke: #ea580c; }
.hub-cs-wx-chart .band.night { fill: #60a5fa; fill-opacity: .3; stroke: #2563eb; }
.hub-cs-wx-chart .range { stroke-width: 6; stroke-linecap: round; stroke-opacity: 0; }
.hub-cs-wx-chart .range:hover { stroke-opacity: .5; }
.hub-cs-wx-chart .range.day { stroke: #ea580c; }
.hub-cs-wx-chart .range.night { stroke: #2563eb; }
.hub-cs-wx-chart rect.rain { fill: #7cb6ec; fill-opacity: .55; }
.hub-cs-wx-chart figcaption { display: flex; flex-wrap: wrap; gap: .4em 1.25em; font-size: .85em; opacity: .85; padding-top: .25em; }
.hub-cs-wx-chart .key::before { content: ""; display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: .4em; vertical-align: middle; }
.hub-cs-wx-chart .key.day::before { background: #fb923c; height: 10px; }
.hub-cs-wx-chart .key.night::before { background: #60a5fa; height: 10px; }
.hub-cs-wx-chart .key.rain::before { background: #7cb6ec; height: 10px; }

.hub-cs-wx-temp { display: inline-block; min-width: 2.8em; padding: .1em .55em; border-radius: 6px; text-align: center; background: hsl(var(--hub-cs-wx-h) 85% 93%); color: hsl(var(--hub-cs-wx-h) 70% 28%); font-weight: 600; }
.hub-cs-wx-rain-cell { white-space: nowrap; line-height: 1.3; }
.hub-cs-wx-storm { white-space: nowrap; cursor: help; }
.hub-cs-wx-storm-pill { display: inline-block; min-width: 2.8em; padding: .1em .55em; border-radius: 6px; text-align: center; font-weight: 600; }
.hub-cs-wx-storm-pill.is-low { background: #fef3c7; color: #92400e; }
.hub-cs-wx-storm-pill.is-mid { background: #fed7aa; color: #9a3412; }
.hub-cs-wx-storm-pill.is-high { background: #fecaca; color: #991b1b; }
.hub-cs-wx-storm-note { margin: 1em 0; padding: .8em 1em; border-left: 4px solid #f97316; border-radius: 6px; background: color-mix(in srgb, #f97316 8%, transparent); }
.hub-cs-wx-storm-note p { margin: 0; }
/* Bar above the amount, two lines (map note 14.10): the cell stays narrow on a phone. */
.hub-cs-wx-rain-bar { display: block; width: 100%; max-width: 70px; min-width: 32px; height: 6px; margin: 0 0 .25em auto; border-radius: 4px; background: color-mix(in srgb, #7cb6ec 20%, transparent); overflow: hidden; }
.hub-cs-wx-rain-bar span { display: block; height: 100%; border-radius: 4px; background: #5aa2e6; }

.hub-cs-wx-map-wrap { margin: 0 0 1.5em; }
.hub-cs-wx-map { height: 420px; border-radius: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); z-index: 0; }
.hub-cs-wx-map-wrap figcaption { font-size: .85em; opacity: .75; margin-top: .4em; }
.hub-cs-wx-pin { background: none; border: 0; }
.hub-cs-wx-pin span { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 13px/1.4 system-ui, sans-serif; white-space: nowrap; background: hsl(var(--hub-cs-wx-h) 85% 92%); color: hsl(var(--hub-cs-wx-h) 75% 25%); border: 2px solid hsl(var(--hub-cs-wx-h) 70% 55%); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }

@media (max-width: 600px) {
    .hub-cs-wx-map { height: 320px; }
    .hub-cs-wx-chart { padding: .5em .25em .25em; }
    .hub-cs-wx-table th, .hub-cs-wx-table td { padding: .25em .4em; font-size: .9em; }
}

/* Main region with subregions: one card per subregion, a strip of 12 months with the day range. */
.hub-cs-wx-subnav { font-size: .95em; margin: 0 0 1em; }
.hub-cs-wx-subregions { display: grid; gap: 1em; margin: 1.25em 0; }
.hub-cs-wx-subregion { padding: .9em 1em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 10px; }
.hub-cs-wx-subregion h2 { font-size: 1.1em; margin: 0 0 .6em; }
.hub-cs-wx-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.hub-cs-wx-strip li { margin: 0; border-radius: 6px; text-align: center; line-height: 1.25; background: color-mix(in srgb, currentColor 5%, transparent); }
.hub-cs-wx-strip li.has-climate { background: hsl(var(--hub-cs-wx-h) 85% 50% / .22); }
.hub-cs-wx-strip li > a, .hub-cs-wx-strip li > span:first-child { display: block; }
.hub-cs-wx-strip a, .hub-cs-wx-strip li { color: inherit; text-decoration: none; padding: .35em .1em; }
.hub-cs-wx-strip li:has(> a) { padding: 0; }
.hub-cs-wx-strip a:hover, .hub-cs-wx-strip a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 6px; }
.hub-cs-wx-strip-month { display: block; font-size: .75em; opacity: .75; }
.hub-cs-wx-strip-temp { display: block; font-size: .85em; font-weight: 600; white-space: nowrap; }
.hub-cs-wx-strip li.is-empty .hub-cs-wx-strip-temp { font-weight: 400; opacity: .5; }
@media (max-width: 760px) { .hub-cs-wx-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 420px) { .hub-cs-wx-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Month page: "Sprawdź oferty" under the description jumps to the offers. */
.hub-cs-wx-to-offers { margin: 1em 0 1.5em; }
.hub-cs-weather .hub-cs-wx-to-offers .hub-cs-btn { display: inline-block; padding: .7em 1.6em; font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: 8px; }
.hub-cs-wx-offers-anchor { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html:has(.hub-cs-weather-month) { scroll-behavior: smooth; } }

/* Phone: port, day, night, water and rain must fit without scrolling sideways. */
@media (max-width: 480px) {
    .hub-cs-wx-table .hub-cs-wx-col-cruises, .hub-cs-wx-table .hub-cs-wx-wide { display: none; }
    .hub-cs-wx-table .hub-cs-wx-temp { min-width: 0; padding: .1em .35em; }
    .hub-cs-wx-table .hub-cs-wx-storm-pill { min-width: 0; padding: .1em .3em; }
    .hub-cs-wx-table th, .hub-cs-wx-table td { font-size: .85em; }
    .hub-cs-wx-table th, .hub-cs-wx-table td { padding: .25em .25em; }
    .hub-cs-wx-table thead th { font-size: .7em; letter-spacing: 0; white-space: normal; }
    .hub-cs-wx-table thead .hub-cs-wx-emoji-th { font-size: 1.1em; }
}


/* ports.css */
/* [hub_porty] — port guides. Built on weather.css (same page layout, tables,
   map frame); only the guide's own parts are here. */
.hub-cs-pt-summary { margin: 0 0 1.5em; padding: 1em 1.25em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-left: 4px solid var(--hub-cs-accent, currentColor); border-radius: 10px; }
.hub-cs-pt-summary h2 { font-size: 1em; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .5em; opacity: .8; }
.hub-cs-pt-summary dl { margin: 0; display: grid; gap: .4em; }
.hub-cs-pt-summary dl > div { display: grid; grid-template-columns: 11em 1fr; gap: .75em; }
.hub-cs-pt-summary dt { font-weight: 600; }
.hub-cs-pt-summary dd { margin: 0; }
.hub-cs-pt-reminder { margin: 0 0 1.5em; padding: .75em 1em; border-radius: 8px; background: color-mix(in srgb, var(--hub-cs-accent, currentColor) 10%, transparent); font-weight: 600; }
.hub-cs-pt-attractions { margin: 0 0 1.5em; padding-left: 1.5em; display: grid; gap: .6em; }
.hub-cs-pt-attractions .hub-cs-wx-country { display: inline; }
.hub-cs-pt-blurb { margin: .2em 0 0; font-size: .95em; line-height: 1.45; }
.hub-cs-pt-popup-text { display: block; margin-top: .3em; font-size: .9em; line-height: 1.4; }
.hub-cs-pt-airports { margin: 0 0 1.5em; padding-left: 1.25em; }
.hub-cs-pt-list { margin: 0; padding-left: 1.1em; }
.hub-cs-pt-pin { background: none; border: 0; }
.hub-cs-pt-pin span { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; font: 700 13px/1 system-ui, sans-serif; background: #fff; color: #1a1a1a; border: 2px solid var(--hub-cs-accent, #1f6feb); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.hub-cs-pt-pin.is-port span { background: var(--hub-cs-accent, #1f6feb); color: #fff; font-size: 15px; }
@media (max-width: 640px) {
    .hub-cs-pt-summary dl > div { grid-template-columns: 1fr; gap: 0; }
}
.hub-cs-pt-hero { margin: 0 0 1em; }
.hub-cs-pt-hero-img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 12px; }
/* "Ile masz czasu?" - sightseeing routes under the map (Hub_CS_Port_Tours, ports.js) */
.hub-cs-pt-tours { margin: 0 0 1.75em; }
.hub-cs-pt-tours h2 { margin-top: 0; }
.hub-cs-pt-tour-buttons { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1em; }
.hub-cs-pt-tour-btn { appearance: none; cursor: pointer; padding: .55em 1.1em; border-radius: 999px; border: 2px solid var(--hub-cs-accent, #1f6feb); background: transparent; color: inherit; font: inherit; font-weight: 600; line-height: 1.2; }
.hub-cs-pt-tour-btn[aria-pressed="true"] { background: var(--hub-cs-accent, #1f6feb); color: #fff; }
.hub-cs-pt-tour-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--hub-cs-accent, #1f6feb) 45%, transparent); outline-offset: 2px; }
.hub-cs-pt-tour-sum { margin: 0 0 .75em; }
.hub-cs-pt-tour-steps { list-style: none; margin: 0 0 .75em; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4em .5em; }
.hub-cs-pt-tour-stop { max-width: 100%; box-sizing: border-box; display: inline-flex; align-items: center; gap: .45em; padding: .35em .75em .35em .4em; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.hub-cs-pt-tour-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; font: 700 13px/1 system-ui, sans-serif; background: #fff; color: #1a1a1a; border: 2px solid var(--hub-cs-accent, #1f6feb); }
.hub-cs-pt-tour-stop.is-port .hub-cs-pt-tour-n { background: var(--hub-cs-accent, #1f6feb); color: #fff; }
.hub-cs-pt-tour-time { font-size: .9em; opacity: .75; white-space: nowrap; }
.hub-cs-pt-tour-leg { font-size: .85em; opacity: .75; white-space: nowrap; }
.hub-cs-pt-tour-leg::before { content: "→ "; }
.hub-cs-pt-tour-leg::after { content: " →"; }
.hub-cs-pt-pin.is-off { opacity: .3; }
.hub-cs-pt-pin.is-off span { border-color: #888; }
.hub-cs-pt-pin.is-on span { transition: transform .25s ease, background .25s ease, color .25s ease; }
.hub-cs-pt-pin.is-reached span { background: var(--hub-cs-accent, #1f6feb); color: #fff; animation: hub-cs-pt-reach .5s ease; }
@keyframes hub-cs-pt-reach { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .hub-cs-pt-pin.is-reached span { animation: none; } }
@media (max-width: 640px) {
    .hub-cs-pt-tour-steps { flex-direction: column; align-items: flex-start; }
    .hub-cs-pt-tour-leg { padding-left: 1.6em; }
    .hub-cs-pt-tour-leg::before { content: "↓ "; }
    .hub-cs-pt-tour-leg::after { content: none; }
}
.hub-cs-wx-map-wrap .hub-cs-pt-map-caption { margin: 0 0 .4em; }

/* Country list: sailings starting at the port (hub "starts"). */
.hub-cs-pt-starts { font-size: .8em; opacity: .65; }


/* tray.css */
/* Compare and recently viewed (assets/tray.js). Floating parts live on <body>,
   outside any .hub-cs-* scope, so the accent is defined here once more. */
.hub-cs-compare-fab,
.hub-cs-viewed-fab,
.hub-cs-tray-modal,
.hub-cs-compare-add,
.hub-cs-tray-toast {
    --hub-cs-tray-accent: var(--hub-cs-accent, var(--theme-button-background-initial-color, var(--wp--preset--color--primary, #0a6b58)));
    --hub-cs-tray-accent-text: var(--hub-cs-accent-text, var(--theme-button-text-initial-color, #fff));
    font-family: var(--hub-cs-font-family, inherit);
    box-sizing: border-box;
}

/* ---- "+" on cards ---- */
.hub-cs-row,
.hub-cs-box-card {
    position: relative;
}

.hub-cs-compare-add {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: 2px solid var(--hub-cs-tray-accent);
    border-radius: 50%;
    background: #fff;
    color: var(--hub-cs-tray-accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background .15s, color .15s, transform .15s;
}

.hub-cs-compare-add:hover,
.hub-cs-compare-add:focus-visible {
    transform: scale(1.08);
}

.hub-cs-compare-add.is-added {
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    font-size: 17px;
}

/* Tooltip: below the button, inside the card (cards clip their overflow). */
.hub-cs-compare-add::after,
.hub-cs-compare-fab::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    padding: 5px 9px;
    border-radius: 6px;
    background: #1d2733;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}

.hub-cs-compare-add:hover::after,
.hub-cs-compare-add:focus-visible::after,
.hub-cs-compare-fab:hover::after,
.hub-cs-compare-fab:focus-visible::after {
    opacity: 1;
}

/* Listing row: the button sits over the ship/price column, which gets room for it. */
.hub-cs-row .hub-cs-row-side {
    padding-top: 40px;
}

/* Offer page: top right corner of the title/price/"Zapytaj" block. */
.hub-cs-booking {
    position: relative;
}

.hub-cs-booking > .hub-cs-compare-add {
    top: 0;
    right: 0;
}

.hub-cs-booking > .hub-cs-booking-chips,
.hub-cs-booking > .hub-cs-booking-title {
    padding-right: 44px;
}

/* ---- Floating buttons ---- */
.hub-cs-compare-fab {
    position: fixed;
    top: 110px;
    right: 18px;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
    cursor: pointer;
}

.hub-cs-compare-fab[hidden],
.hub-cs-viewed-fab[hidden] {
    display: none;
}

.hub-cs-compare-fab img {
    width: 40px;
    height: auto;
    display: block;
}

.hub-cs-compare-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.hub-cs-viewed-fab {
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 9990;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    rotate: 180deg;
    padding: 16px 10px;
    border: 0;
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

/* rotate: 180deg (text read bottom to top) flips the corners too: these land on the screen's right. */
.hub-cs-viewed-fab {
    border-radius: 10px 0 0 10px;
}

@media (max-width: 600px) {
    .hub-cs-compare-fab {
        top: auto;
        bottom: 84px;
        right: 12px;
        width: 54px;
        height: 54px;
    }

    .hub-cs-compare-fab img {
        width: 34px;
    }

    .hub-cs-viewed-fab {
        padding: 12px 8px;
        font-size: 12px;
    }
}

/* ---- Dialogs ---- */
html.hub-cs-tray-locked {
    overflow: hidden;
}

.hub-cs-tray-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.hub-cs-tray-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 30, .55);
}

.hub-cs-tray-dialog {
    position: relative;
    width: min(1000px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: #fff;
    color: #1d2733;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.hub-cs-viewed-modal .hub-cs-tray-dialog {
    width: min(560px, 100%);
}

.hub-cs-tray-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e8ebee;
}

.hub-cs-tray-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.hub-cs-tray-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f3f5;
    color: #1d2733;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.hub-cs-tray-body {
    padding: 16px 20px 20px;
    overflow: auto;
}

.hub-cs-tray-empty,
.hub-cs-tray-note {
    margin: 0;
    color: #5b6670;
}

.hub-cs-tray-note {
    margin-top: 12px;
    font-size: 14px;
}

/* Comparison table: one column per cruise, scrolls sideways on a phone. */
.hub-cs-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hub-cs-compare-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.hub-cs-compare-table th,
.hub-cs-compare-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #eef0f2;
    text-align: left;
    vertical-align: top;
}

.hub-cs-compare-table th {
    width: 120px;
    color: #5b6670;
    font-weight: 600;
}

.hub-cs-compare-table tr:last-child th,
.hub-cs-compare-table tr:last-child td {
    border-bottom: 0;
}

.hub-cs-compare-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    padding: 8px;
    border: 2px dashed #d5dbe1;
    border-radius: 10px;
    color: #8a96a3;
    font-size: 13px;
    text-align: center;
}

.hub-cs-compare-photo {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    overflow: hidden;
    background: #eef1f4;
}

.hub-cs-compare-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}

.hub-cs-compare-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1d2733;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.hub-cs-compare-title {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.hub-cs-compare-title:hover {
    text-decoration: underline;
}

.hub-cs-compare-price {
    color: var(--hub-cs-tray-accent);
    font-size: 17px;
}

.hub-cs-tray-modal .hub-cs-compare-cta {
    display: inline-block;
    padding: 9px 14px;
    border-radius: var(--hub-cs-button-radius, 5px);
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    font-weight: 600;
    text-decoration: none;
}

/* Recently viewed list. */
.hub-cs-viewed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.hub-cs-viewed-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.hub-cs-viewed-item:hover {
    background: #f3f5f7;
}

.hub-cs-viewed-photo {
    flex: 0 0 96px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef1f4;
}

.hub-cs-viewed-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}

.hub-cs-viewed-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 13px;
    color: #5b6670;
}

.hub-cs-viewed-text strong {
    color: #1d2733;
    font-size: 15px;
    line-height: 1.3;
}

.hub-cs-viewed-price {
    color: var(--hub-cs-tray-accent);
    font-weight: 700;
}

.hub-cs-tray-clear {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: #5b6670;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.hub-cs-tray-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100000;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: 10px;
    background: #1d2733;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    transition: opacity .5s;
}

.hub-cs-tray-toast.is-gone {
    opacity: 0;
}

/* Footer of both dialogs: share the list and download it as PDF (map note
   17.10.2026). Colours come from the theme's button colour like the rest of
   the tray (--hub-cs-tray-accent) — yellow, orange or blue, whatever the site uses. */
.hub-cs-tray-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 14px 20px;
    border-top: 1px solid #e8ebee;
    background: #fafbfc;
}

.hub-cs-tray-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hub-cs-tray-share-label {
    margin-right: 2px;
    color: #44505c;
    font-size: 14px;
}

.hub-cs-tray-modal .hub-cs-tray-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid #dfe3e8;
    border-radius: 50%;
    background: #fff;
    color: #1d2733;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hub-cs-tray-modal .hub-cs-tray-share-icon:hover,
.hub-cs-tray-modal .hub-cs-tray-share-icon:focus-visible {
    border-color: var(--hub-cs-tray-accent);
    box-shadow: 0 0 0 1px var(--hub-cs-tray-accent) inset;
    color: #1d2733;
    background: #fff;
}

.hub-cs-tray-modal .hub-cs-tray-share-icon svg,
.hub-cs-tray-modal .hub-cs-tray-native-share svg,
.hub-cs-tray-modal .hub-cs-tray-pdf svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex: none;
}

.hub-cs-tray-modal .hub-cs-tray-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--hub-cs-button-radius, 5px);
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.hub-cs-tray-modal .hub-cs-tray-pdf:hover {
    background: var(--hub-cs-tray-accent);
    color: var(--hub-cs-tray-accent-text);
    filter: brightness(.95);
}

.hub-cs-tray-modal .hub-cs-tray-pdf.is-busy {
    cursor: progress;
    opacity: .85;
}

.hub-cs-tray-modal .hub-cs-tray-pdf.is-busy svg {
    display: none;
}

.hub-cs-tray-modal .hub-cs-tray-pdf.is-busy::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hub-cs-tray-spin .8s linear infinite;
}

@keyframes hub-cs-tray-spin {
    to { transform: rotate(360deg); }
}

.hub-cs-tray-modal .hub-cs-tray-native-share {
    display: none;
}

.hub-cs-tray-shared {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--hub-cs-tray-accent) 12%, #fff);
    font-size: 14px;
}

.hub-cs-tray-shared button {
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #1d2733;
    border-radius: var(--hub-cs-button-radius, 5px);
    background: #fff;
    color: #1d2733;
    font: inherit;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

@media (max-width: 640px) {
    .hub-cs-tray-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .hub-cs-tray-modal .hub-cs-tray-pdf {
        order: 1;
        justify-content: center;
        width: 100%;
    }

    .hub-cs-tray-share {
        order: 2;
        justify-content: center;
    }

    /* With the phone's own share sheet, one button instead of the icons. */
    .hub-cs-tray-foot.has-native-share .hub-cs-tray-share-label,
    .hub-cs-tray-foot.has-native-share .hub-cs-tray-share-icon {
        display: none;
    }

    .hub-cs-tray-foot.has-native-share .hub-cs-tray-native-share {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 12px;
        border: 1px solid #dfe3e8;
        border-radius: var(--hub-cs-button-radius, 5px);
        background: #fff;
        color: #1d2733;
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        text-transform: none;
        cursor: pointer;
    }
}

/* "×" on each recently viewed row (map note 17.10.2026). */
.hub-cs-viewed-list > li {
    position: relative;
}

.hub-cs-viewed-list > li > .hub-cs-viewed-item {
    padding-right: 44px;
}

.hub-cs-tray-modal .hub-cs-viewed-remove {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    margin: -15px 0 0;
    padding: 0;
    border: 1px solid #dfe3e8;
    border-radius: 50%;
    background: #fff;
    color: #5b6670;
    font: inherit;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.hub-cs-tray-modal .hub-cs-viewed-remove:hover,
.hub-cs-tray-modal .hub-cs-viewed-remove:focus-visible {
    border-color: #b33;
    background: #fff;
    color: #b33;
}


/* appearance.css */
/* User-configurable presentation layer. Empty variables keep component/theme defaults. */
.hub-cs-search,
.hub-cs-frontsearch,
.hub-cs-offer {
    font-family: var(--hub-cs-font-family, inherit);
    color: var(--hub-cs-text-custom, inherit);
}

.hub-cs-btn,
.hub-cs-box-card-cta,
.hub-cs-offer button,
.hub-cs-offer input[type="submit"] {
    border-radius: var(--hub-cs-button-radius, 5px);
}

.hub-cs-row,
.hub-cs-box-card {
    border-radius: var(--hub-cs-card-radius, 14px);
    background: var(--hub-cs-surface-custom, #fff);
    box-shadow: var(--hub-cs-card-shadow, none);
}

.hub-cs-row:hover,
.hub-cs-box-card:hover {
    box-shadow: var(--hub-cs-card-shadow, 0 4px 14px rgba(0,0,0,.1));
}

.hub-cs-sidebar,
.hub-cs-booking,
.hub-cs-accordion,
.hub-cs-cabin-group,
.hub-cs-inquiry,
.hub-cs-offer-section {
    border-radius: var(--hub-cs-card-radius, 12px);
}

.hub-cs-booking,
.hub-cs-accordion,
.hub-cs-cabin-group,
.hub-cs-inquiry {
    background: var(--hub-cs-surface-custom, #fff);
    box-shadow: var(--hub-cs-card-shadow, none);
}