/* 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);
}


/* ship.css */
/*
 * [hub_statek] — ship page (?statek=...) and the ship index (no parameter).
 * Cruise cards are [hub_boxy]'s own .hub-cs-box-card (boxes.css); only the
 * page's own chrome lives here. Colors inherit the theme (see README →
 * Theming): nothing below hardcodes an accent.
 */
.hub-cs-ship {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.hub-cs-ship-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    background: #0b2b50;
}

/* Doubled class + !important: page builders size every image with a stronger
   rule (Elementor: ".elementor img { height: auto }"), which made the photo its
   natural height, stuck to the top, so only its upper part showed. */
.hub-cs-ship-hero .hub-cs-ship-hero-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0;
    object-fit: cover;
    /* Crop around the middle of the photo (50% 50%). */
    object-position: 50% 50% !important;
}

.hub-cs-ship-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 60%);
}

.hub-cs-ship-hero-plain {
    min-height: 0;
}

.hub-cs-ship-hero-plain::after {
    display: none;
}

.hub-cs-ship-hero-text {
    position: relative;
    z-index: 1;
    padding: 24px 28px;
    color: #fff;
}

/* The logo files are trimmed to the artwork, so their proportions vary a lot
   (Carnival is a thin strip, AIDA nearly square). A fixed white box with the
   logo contained inside makes every operator's logo the same size. */
.hub-cs-ship-operator-logo {
    display: block;
    box-sizing: border-box;
    width: 140px;
    max-width: 40vw;
    height: 80px;
    padding: 10px 12px;
    margin-bottom: 10px;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.hub-cs-ship-operator {
    display: block;
    font-size: calc(var(--hub-cs-base-font, 16px) * .875);
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
}

.hub-cs-ship-name {
    margin: 4px 0 0;
    color: inherit;
    line-height: 1.15;
}

.hub-cs-ship-count {
    margin: 6px 0 0;
    opacity: .9;
}

.hub-cs-ship-description {
    max-width: none;
}

/* Full container width also for the paragraphs, headings and lists inside —
   some themes cap those on their own (e.g. a "readable width" on p). */
.hub-cs-ship-description > * {
    max-width: none;
}

.hub-cs-ship-description > :first-child {
    margin-top: 0;
}

.hub-cs-ship-description > :last-child {
    margin-bottom: 0;
}

/* ---- Accordion: same look as the offer card's (offer.css .hub-cs-acc*) ---- */
.hub-cs-ship-accordion {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    overflow: hidden;
}

.hub-cs-ship-accordion .hub-cs-acc {
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.hub-cs-ship-accordion .hub-cs-acc:first-child {
    border-top: none;
}

.hub-cs-ship-accordion .hub-cs-acc-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}

.hub-cs-ship-accordion .hub-cs-acc-summary::-webkit-details-marker {
    display: none;
}

.hub-cs-ship-accordion .hub-cs-acc-summary::after {
    content: "";
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .5;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.hub-cs-ship-accordion .hub-cs-acc[open] > .hub-cs-acc-summary::after {
    transform: rotate(-135deg);
}

.hub-cs-ship-accordion .hub-cs-acc-label {
    margin: 0;
    font-size: 1.05em;
}

.hub-cs-ship-accordion .hub-cs-acc-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    object-fit: contain;
}

.hub-cs-ship-accordion .hub-cs-acc-body {
    padding: 0 20px 20px 57px;
    line-height: 1.6;
}

.hub-cs-ship-accordion .hub-cs-acc-body > :first-child {
    margin-top: 0;
}

.hub-cs-ship-cabin-group {
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.hub-cs-ship-cabin-group:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.hub-cs-ship-cabin-group > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

.hub-cs-ship-cabin-group > summary::-webkit-details-marker {
    display: none;
}

.hub-cs-ship-cabin-group > summary::after {
    content: "+";
    margin-left: auto;
    font-weight: 400;
    opacity: .6;
}

.hub-cs-ship-cabin-group[open] > summary::after {
    content: "−";
}

.hub-cs-ship-cabin-count {
    font-weight: 400;
    opacity: .6;
}

.hub-cs-ship-cabin-group > .hub-cs-ship-cabins {
    padding-bottom: 16px;
}

.hub-cs-ship-cabins {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.hub-cs-ship-cabin {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.hub-cs-ship-cabin img {
    width: 120px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    flex: 0 0 auto;
}

.hub-cs-ship-cabin-desc {
    font-size: .9em;
    opacity: .8;
}

.hub-cs-ship-cabin-desc p {
    margin: 4px 0 0;
}

.hub-cs-ship-specs {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 28px;
}

.hub-cs-ship-specs > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.hub-cs-ship-specs dt {
    opacity: .7;
}

.hub-cs-ship-specs dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.hub-cs-ship-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.hub-cs-ship-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}

.hub-cs-ship-offers-heading {
    margin: 0;
}

.hub-cs-ship-pagination a.hub-cs-page-btn {
    color: inherit;
    text-decoration: none;
}

/* Gallery on tablet/phone: a swipe slider instead of a grid that stacks the
   photos down the page — same scroll-snap pattern as boxes.css (no JS),
   per request: tablet 3 photos + a sliver of the 4th, phone 1 + a sliver. */
@media (max-width: 900px) {
    .hub-cs-ship-gallery {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hub-cs-ship-gallery::-webkit-scrollbar {
        display: none;
    }

    .hub-cs-ship-gallery img {
        scroll-snap-align: start;
        flex: 0 0 calc((100% - 3 * 10px) / 3.1);
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .hub-cs-ship-gallery img {
        flex: 0 0 calc((100% - 10px) / 1.1);
    }
}

/* The cruise cards deliberately get NO mobile override here: they use
   boxes.css's own swipe slider exactly like [hub_boxy] (per request —
   phone: 1 card + a sliver of the next, tablet: 2 + a sliver). */
@media (max-width: 600px) {
    .hub-cs-ship-accordion .hub-cs-acc-body {
        padding-left: 20px;
    }

    .hub-cs-ship-cabin img {
        width: 88px;
    }

    .hub-cs-ship-hero {
        min-height: 220px;
    }

    .hub-cs-ship-hero-text {
        padding: 18px 16px;
    }
}

/* ---- Index (no ?statek=): operator logos, a click opens the operator's ships ---- */
.hub-cs-ship-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
    align-items: start;
}

.hub-cs-ship-index-group > summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 12px;
    cursor: pointer;
    list-style: none;
    text-align: center;
    transition: background-color .15s ease;
}

.hub-cs-ship-index-group > summary::-webkit-details-marker {
    display: none;
}

.hub-cs-ship-index-group > summary:hover,
.hub-cs-ship-index-group[open] > summary {
    background: rgba(0, 0, 0, .05);
}

.hub-cs-ship-index-group > summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.hub-cs-ship-index-group .hub-cs-ship-operator-logo {
    margin-bottom: 4px;
}

.hub-cs-ship-index-name {
    font-weight: 600;
}

.hub-cs-ship-index-count {
    font-size: .85em;
    opacity: .7;
}

.hub-cs-ship-index-count::after {
    content: " ▾";
}

.hub-cs-ship-index-group[open] .hub-cs-ship-index-count::after {
    content: " ▴";
}

/* The ships open under the operator's logo, in place: the other logos keep their spots. */
.hub-cs-ship-index-group ul {
    margin: 6px 0 8px;
    padding: 0 8px;
    list-style: none;
}

.hub-cs-ship-index-group li {
    padding: 3px 0;
}

.hub-cs-ship-index-group a {
    color: var(--theme-link-initial-color, inherit);
}

.hub-cs-ship-deckplan {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: var(--hub-cs-button-radius, 8px);
    color: inherit;
    text-decoration: none;
}

.hub-cs-ship-deckplan:hover {
    border-color: currentColor;
}

/* Breadcrumbs (Hub_CS_Seo::breadcrumbs(), same look as the weather and port pages). */
.hub-cs-wx-crumbs { font-size: .875em; opacity: .75; margin-bottom: .75em; }
.hub-cs-wx-crumbs a { color: inherit; }

/* Lead of the ships index and of an operator's fleet page; one sentence per ship (SEO guidelines point 7). */
.hub-cs-ship-index-lead {
    margin: 0 0 1.2em;
    line-height: 1.6;
}
.hub-cs-ship-index-lead .hub-cs-ship-operator-logo {
    float: right;
    max-height: 48px;
    margin: 0 0 8px 16px;
}
.hub-cs-ship-fleet {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px 24px;
}
.hub-cs-ship-fleet li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.hub-cs-ship-fleet a {
    display: block;
    font-weight: 600;
    color: var(--theme-link-initial-color, inherit);
}
.hub-cs-ship-fleet span {
    display: block;
    font-size: .9em;
    opacity: .75;
    margin-top: 2px;
}


/* 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);
}