/*
 * Layout/spacing here is fixed (this is the product-card structure), but color and
 * type intentionally are not. Two different mechanisms depending on what the element
 * actually is:
 *   - Real heading tags (h1-h4: the offer title, "Kabiny i ceny", "Konkretne kabiny")
 *     get NO font-size/font-family/color from us at all — not even `inherit`. A
 *     class-scoped rule like `.hub-cs-offer h1 { color: inherit }` has HIGHER
 *     specificity than the theme's own bare `h1 { color: ... }` rule and would beat
 *     it, silently overriding real heading styling the theme already provides
 *     (found live: this exact pattern was suppressing Blocksy's actual h1/h2 size
 *     and color). Leaving these properties unset lets the theme's own tag-level CSS
 *     win outright, which is the only way to genuinely inherit a real heading style
 *     rather than approximate it.
 *   - Everything else (labels, meta text, prices, badges) isn't a tag the theme
 *     styles on its own, so it needs an explicit signal: `currentColor`+opacity for
 *     muted text, `var(--hub-cs-accent)` for the one primary CTA's color (default:
 *     inherits the theme's own button color, overridable once in Cruise Hub →
 *     Wygląd), `var(--hub-cs-base-font)` for sizes that should track the theme's
 *     font-size customizer (see that variable's own comment below).
 */
.hub-cs-offer {
    /* Overridden inline (see hub-cruise-search.php) only when the agent explicitly
       picks a color in Cruise Hub → Wygląd. Otherwise every value below is a live
       var() reference into the host theme's own button tokens — never a color
       captured/copied at build time — so it tracks whatever the agent's theme
       actually renders, including if they change themes or repaint their palette
       later. --theme-button-* is Blocksy's (the test site's theme) own semantic
       hook for "what a button looks like"; --wp--preset--color-- is the generic
       block-theme (theme.json) equivalent. Text pairs with its own background
       (button text-on-accent isn't always white — Blocksy's is black), and hover
       is its own separate pair since a theme's hover state is very often not just
       a lighter/darker tint of the base color. */
    --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));
    /* Separate hook for text that behaves like a hyperlink (Więcej toggles, Warunki
       uczestnictwa) — pulls the theme's own LINK color, not its button color. On
       most themes these differ; they happen to be the same yellow on the Blocksy
       test site, which is genuine, verified inheritance (--theme-link-initial-color
       really is defined as that yellow there), not a coincidence of reusing the
       button variable for an unrelated role. */
    --hub-cs-link-color: var(--theme-link-initial-color, var(--hub-cs-accent));
    --hub-cs-border: #e2e8f0;
    --hub-cs-surface: #f8fafc;
    /* Every font-size below is calc(var(--hub-cs-base-font) * ratio) instead of a
       flat rem value — rem is ALWAYS relative to <html>, but Blocksy's own font-size
       customizer never touches <html>, only `body` + its own selector list (via
       --theme-font-size, regenerated live in blocksy-dynamic-global-css.php whenever
       the agent changes the setting). rem therefore silently ignored the customizer
       entirely; this tracks the theme's real, current value instead. Defined once
       here (not per-declaration) so nested elements don't compound multiple relative
       steps into each other the way plain em would. */
    --hub-cs-base-font: var(--theme-font-size, 1rem);
    font-family: inherit;
    color: inherit;
}

.hub-cs-status {
    color: currentColor;
    opacity: .65;
}

.hub-cs-status-loading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 24px 0;
    opacity: .8;
}

.hub-cs-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hub-cs-spin .8s linear infinite;
}

.hub-cs-status-slow {
    flex-basis: 100%;
    font-size: .9em;
    opacity: .8;
}

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

@media (prefers-reduced-motion: reduce) {
    .hub-cs-spinner { animation-duration: 2.4s; }
}

.hub-cs-back {
    /* Colors/font-size/padding all come from .hub-cs-btn/.hub-cs-btn-primary/
       .hub-cs-btn-small in the markup — the exact same classes Zarezerwuj
       rejs/Szukaj/Wybierz/Zobacz ofertę already use, so this is styled
       identically to them, not a separate invented look. Only layout
       positioning lives here. Sits above .hub-cs-top rather than overlaid on
       the gallery image on purpose — the gallery hides itself entirely
       (display:none) when an offer has no photos, which would have taken this
       along with it if it lived inside that container, losing the only way
       back for exactly the offers where a visitor might most want it.
       Shown/hidden by JS (offer.js) based on whether the listing card that
       linked here actually supplied a `back` URL — not every visit originates
       from the listing (direct links, search engines), and there's nothing
       useful to return to in that case. */
    display: inline-block;
    margin-bottom: 14px;
    text-decoration: none;
}

/* ---------------------------------------------------------------- top: gallery + booking */

.hub-cs-top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 380px);
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}

/* Grid items default to min-width: auto (shrink no further than their own content's
   intrinsic width) — without an explicit 0 here, the track itself grows to fit that
   content instead of the content wrapping into the track, which is what actually
   broke mobile: at the 900px breakpoint below the track becomes a single 1fr column,
   but these two children still refused to shrink under ~1100px, pushing everything
   off-screen with no visible horizontal scrollbar (an ancestor's overflow:hidden was
   quietly clipping it instead of showing the overflow). */
.hub-cs-gallery,
.hub-cs-booking {
    min-width: 0;
}

.hub-cs-gallery {
    grid-row: 1 / span 2;
}

.hub-cs-booking {
    grid-column: 2;
    grid-row: 1;
}

.hub-cs-share {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 2px;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
}

.hub-cs-share-label {
    opacity: .75;
}

.hub-cs-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 50%;
    color: inherit;
    background: transparent;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.hub-cs-share-link:hover,
.hub-cs-share-link:focus-visible {
    color: inherit;
    background: var(--hub-cs-surface);
    border-color: currentColor;
}

.hub-cs-share-link svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

@media (max-width: 900px) {
    .hub-cs-top {
        grid-template-columns: 1fr;
    }

    .hub-cs-gallery,
    .hub-cs-booking,
    .hub-cs-share {
        grid-column: 1;
        grid-row: auto;
    }
}

.hub-cs-gallery-main {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--hub-cs-surface);
}

.hub-cs-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-cs-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .92);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--hub-cs-base-font) * 1.125);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.hub-cs-gallery-prev { left: 12px; }
.hub-cs-gallery-next { right: 12px; }

.hub-cs-gallery-counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    padding: 3px 10px;
    border-radius: 20px;
}

.hub-cs-gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.hub-cs-gallery-thumb {
    flex: 0 0 84px;
    width: 84px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: none;
    cursor: pointer;
}

.hub-cs-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-cs-gallery-thumb.is-active {
    border-color: var(--hub-cs-accent);
}

/* ---------------------------------------------------------------- booking card */

.hub-cs-booking {
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    background: #fff;
    padding: 24px;
}

/* Deliberately NOT position: sticky (it used to be, on desktop) — .hub-cs-share
   sits right below this card in the same grid column, and a sticky card slid
   over it on scroll, covering "Udostępnij". The fixed bottom bar
   (.hub-cs-sticky-bar) already keeps the price + CTA in reach once this card
   scrolls away. */

.hub-cs-booking-title {
    /* No font-size/color here on purpose — it's a real <h1>, let the theme's own
       h1 rule size and color it (see the file header comment). */
    margin: 0 0 8px;
    line-height: 1.3;
}

/* "Samolotem" / "Autokarem" / "Dojazd własny" — the listing's region-chip pill. */
.hub-cs-booking-chips {
    margin: 0 0 10px;
}

.hub-cs-transport-chip {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--hub-cs-accent);
    color: var(--hub-cs-accent-text);
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    line-height: 1.4;
    font-weight: 600;
}

.hub-cs-booking-meta {
    margin: 0 0 18px;
    opacity: .65;
    font-size: calc(var(--hub-cs-base-font) * .9);
}

.hub-cs-booking-price-label {
    margin: 0;
    font-size: calc(var(--hub-cs-base-font) * .8);
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
}

.hub-cs-price-note {
    text-transform: none;
    letter-spacing: 0;
    opacity: .8;
    font-size: calc(var(--hub-cs-base-font) * .75);
}

.hub-cs-booking-price {
    /* Now a real h3, sitting in a spacious sidebar card (same as the h1 title right
       above it) — no layout reason to fight the theme's own h3 size/weight/color,
       so none of that is set here, only spacing. */
    margin: 2px 0 18px;
    line-height: 1;
}

.hub-cs-btn {
    font-family: inherit;
    padding: 9px 18px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    /* Same reasoning as --hub-cs-accent: a real theme button's own font-size,
       not a guess. Found live (not by design): a plain <button> stayed at the
       0.875rem fallback while <button type="submit"> escaped to Blocksy's real
       --theme-button-font-size, purely because [type="submit"] happened to win a
       CSS specificity tie — i.e. the "wrong" one was accidentally the properly
       inherited one. Made deliberate and consistent for every button here instead
       of leaving it up to a selector-specificity coincidence. */
    font-size: var(--theme-button-font-size, 0.875rem);
}

.hub-cs-btn-block {
    /* No font-size here — .hub-cs-btn's own var(--theme-button-font-size, ...) was
       being silently overridden by this rule (equal specificity, later in the file
       wins), which is exactly what made the offer-card CTA buttons track
       paragraph size instead of the theme's real button size. */
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.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);
}

/* Deliberately NOT accent-colored. A secondary action doesn't need its own
   loud color — reserving --hub-cs-accent for the one primary CTA per view
   (Zapytaj o ten rejs / Szukaj / WYBIERZ) is what keeps that button reading as
   "the" action instead of competing with everything else on the page. Plain
   neutral border + inherited text color is also safe on every theme's accent,
   not just this one — a light/pale accent would be unreadable as button text
   the same way a saturated one is harsh, so this sidesteps that per-theme risk
   entirely rather than trying to special-case it. */
.hub-cs-btn-outline {
    background: transparent;
    border-color: var(--hub-cs-border);
    color: inherit;
}

.hub-cs-btn-outline:hover {
    background: var(--hub-cs-surface);
    border-color: var(--hub-cs-border);
    color: inherit;
}

.hub-cs-btn-small {
    /* No font-size here either — same .hub-cs-btn-block issue above. */
    padding: 7px 14px;
    font-weight: 700;
    white-space: nowrap;
}

.hub-cs-terms-link {
    margin: 4px 0 0;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    text-align: center;
}

.hub-cs-terms-link a {
    color: var(--hub-cs-link-color);
    text-decoration: underline;
}

.hub-cs-trust {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--hub-cs-border);
    display: grid;
    gap: 8px;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
}

.hub-cs-trust li {
    padding-left: 20px;
    position: relative;
}

.hub-cs-trust li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--hub-cs-accent);
    font-weight: 700;
}

/* ---------------------------------------------------------------- facts bar */

.hub-cs-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    background: color-mix(in srgb, var(--hub-cs-accent) 10%, #fff);
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    padding: 16px 22px;
    margin-bottom: 28px;
}

.hub-cs-fact {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex: 1 1 150px;
    min-width: 130px;
}

/* Same fix as .hub-cs-daterange-popup[hidden] in search.css: a plain `display`
   declaration on the class always beats the UA stylesheet's `[hidden]` rule, so
   offer.js toggling `factEl.hidden` for providers missing this field (route/ship/
   region) silently did nothing without this override. */
.hub-cs-fact[hidden] {
    display: none;
}

.hub-cs-fact-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    object-fit: contain;
}

.hub-cs-fact-label {
    display: block;
    font-size: calc(var(--hub-cs-base-font) * 0.6875);
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
}

.hub-cs-fact-value {
    display: block;
    font-weight: 600;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    margin-top: 1px;
}

@media (max-width: 600px) {
    .hub-cs-facts {
        gap: 14px 20px;
    }
    .hub-cs-fact {
        flex: 1 1 45%;
    }
}

/* ---------------------------------------------------------------- main layout */

.hub-cs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .hub-cs-layout {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- accordion */

.hub-cs-accordion {
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.hub-cs-acc {
    border-top: 1px solid var(--hub-cs-border);
}

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

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

.hub-cs-acc-label {
    /* No font-size — real h4, theme's own size wins outright. */
    margin: 0;
}

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

.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-acc[open] > .hub-cs-acc-summary::after {
    transform: rotate(-135deg);
}

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

.hub-cs-acc-body {
    padding: 0 20px 20px 57px;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    line-height: 1.6;
}

@media (max-width: 480px) {
    .hub-cs-acc-body {
        padding-left: 20px;
    }
}

.hub-cs-included-heading {
    margin: 16px 0 8px;
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
}

.hub-cs-included-heading:first-child {
    margin-top: 0;
}

.hub-cs-checklist {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.hub-cs-checklist li {
    padding-left: 22px;
    position: relative;
}

.hub-cs-checklist-yes li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--hub-cs-accent);
    font-weight: 700;
}

.hub-cs-checklist-no li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #d9363e;
    font-weight: 700;
}

.hub-cs-checklist-plain li::before {
    content: "–";
    position: absolute;
    left: 0;
    opacity: .5;
    font-weight: 700;
}

.hub-cs-checklist-item-body {
    opacity: .7;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    margin-top: 2px;
}

.hub-cs-overview-route,
.hub-cs-overview-text p {
    margin: 0 0 12px;
}

.hub-cs-highlights {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.hub-cs-highlights li {
    padding-left: 20px;
    position: relative;
}

.hub-cs-highlights li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--hub-cs-accent);
    font-weight: 700;
}

/* itinerary */

.hub-cs-route-map {
    /* Was a fixed 320px height regardless of width, so on this column's ~770px
       width the map came out close to 2.4:1 -- fitBounds() had to zoom out far
       enough to fill that whole wide-short box, leaving most cruise routes
       (rarely that wide relative to their height) tiny in the middle of a lot
       of empty ocean/land. 4:3 gives the route more vertical room to actually
       fill the frame. */
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

/* Leaflet's own popup chrome, kept minimal rather than pulling in extra plugin CSS */
.hub-cs-route-map .leaflet-popup-content {
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    line-height: 1.4;
}

.hub-cs-itinerary-days {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hub-cs-itinerary-day {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--hub-cs-border);
}

.hub-cs-itinerary-day:first-child {
    border-top: none;
    padding-top: 0;
}

.hub-cs-itinerary-daynum {
    font-size: calc(var(--hub-cs-base-font) * 0.6875);
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .55;
    padding-top: 2px;
}

.hub-cs-itinerary-day-sea .hub-cs-itinerary-daynum {
    opacity: .4;
}

.hub-cs-itinerary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.hub-cs-itinerary-day-sea .hub-cs-itinerary-head strong {
    opacity: .55;
    font-weight: 500;
    font-style: italic;
}

.hub-cs-itinerary-times,
.hub-cs-itinerary-date {
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    opacity: .65;
}

.hub-cs-itinerary-desc,
.hub-cs-cabin-item-desc {
    margin-top: 6px;
}

.hub-cs-itinerary-desc summary,
.hub-cs-cabin-item-desc summary {
    cursor: pointer;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    color: var(--hub-cs-link-color);
}

.hub-cs-cabin-item-desc .hub-cs-cabin-item-description {
    margin-top: 6px;
}

.hub-cs-itinerary-port-desc,
.hub-cs-itinerary-things {
    margin-top: 8px;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    opacity: .85;
}

.hub-cs-itinerary-things ul {
    margin: 4px 0 0;
    padding-left: 20px;
}

/* activities */

.hub-cs-activities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

@media (max-width: 480px) {
    .hub-cs-activities-grid {
        grid-template-columns: 1fr;
    }
}

.hub-cs-activities-col h4 {
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hub-cs-accent);
    margin: 0 0 8px;
}

.hub-cs-activities-col-extra h4 {
    color: currentColor;
    opacity: .55;
}

.hub-cs-activities-col ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.hub-cs-activity-desc {
    opacity: .7;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    margin-top: 2px;
}

.hub-cs-rate-block {
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------- cabins column */

.hub-cs-cabins {
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    background: #fff;
    padding: 20px;
    align-self: start;
}

.hub-cs-cabins h3 {
    /* No font-size here on purpose — real <h3>, let the theme size it (this sits in
       a spacious sidebar card, not a tight row, so there's no layout reason to
       fight it the way the accordion label above needs to). */
    margin: 0 0 4px;
}

.hub-cs-cabin-categories {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.hub-cs-cabin-category {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--hub-cs-border);
    border-radius: 10px;
    padding: 12px;
}

.hub-cs-cabin-category.hub-cs-cabin-is-selected,
.hub-cs-cabin-item.hub-cs-cabin-is-selected {
    border-color: var(--hub-cs-accent);
    box-shadow: 0 0 0 1px var(--hub-cs-accent) inset;
}

.hub-cs-cabin-category-image {
    flex: 0 0 84px;
    width: 84px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--hub-cs-surface);
}

.hub-cs-cabin-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-cs-cabin-category-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hub-cs-cabin-category-content > strong {
    font-size: calc(var(--hub-cs-base-font) * 0.875);
}

.hub-cs-cabin-category-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.hub-cs-cabin-category-price {
    font-weight: 700;
    color: inherit;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
}

.hub-cs-cabin-list {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--hub-cs-border);
}

/* "Kabiny i ceny" reuses the cabin-list accordion look, but it is the first
   block in the card, so no separator above it. */
.hub-cs-cabin-prices {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.hub-cs-cabin-prices + .hub-cs-cabin-list {
    margin-top: 16px;
}

.hub-cs-cabin-prices-from {
    font-size: calc(var(--hub-cs-base-font) * 0.875);
    font-weight: 600;
    white-space: nowrap;
}

.hub-cs-cabin-list-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.hub-cs-cabin-list-summary::-webkit-details-marker {
    display: none;
}

.hub-cs-cabin-list h4 {
    /* No font-size — real h4, theme's own size wins outright. */
    margin: 0;
}

.hub-cs-cabin-list-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
    font-weight: 600;
    color: var(--hub-cs-link-color);
    white-space: nowrap;
}

.hub-cs-cabin-list-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.hub-cs-cabin-list[open] .hub-cs-cabin-list-toggle::after {
    transform: rotate(-135deg);
}

.hub-cs-cabin-list-items {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.hub-cs-cabin-item {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 8px;
}

.hub-cs-cabin-item-image {
    flex: 0 0 90px;
    width: 90px;
    height: 68px;
    border-radius: 6px;
    overflow: hidden;
}

.hub-cs-cabin-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-cs-cabin-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hub-cs-cabin-item-description {
    margin: 2px 0 0;
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    line-height: 1.5;
    opacity: .7;
    white-space: pre-line;
}

.hub-cs-cabin-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.hub-cs-cabin-status {
    font-size: calc(var(--hub-cs-base-font) * 0.6875);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--hub-cs-accent);
    white-space: nowrap;
}

.hub-cs-cabin-status-sold-out {
    color: #b33;
}

.hub-cs-cabin-item-price {
    font-weight: 700;
    color: inherit;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
}

.hub-cs-cabin-item-original-price {
    font-weight: 400;
    opacity: .55;
    text-decoration: line-through;
    margin-right: 8px;
}

.hub-cs-cabin-item-meta {
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    opacity: .65;
}

.hub-cs-cabin-item-content > .hub-cs-btn {
    align-self: flex-start;
    margin-top: 4px;
}

.hub-cs-gratuities {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--hub-cs-border);
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    opacity: .65;
}

/* ---------------------------------------------------------------- sticky bottom bar */

.hub-cs-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    background: #fff;
    border-top: 1px solid var(--hub-cs-border);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
    transform: translateY(100%);
    transition: transform .2s ease;
    font-family: inherit;
    color: inherit;
}

.hub-cs-sticky-bar.is-visible {
    transform: translateY(0);
}

.hub-cs-sticky-image {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
}

.hub-cs-sticky-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.hub-cs-sticky-info h3 {
    /* No font-size — real h3, theme's own size wins outright. */
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-cs-sticky-info span {
    font-size: calc(var(--hub-cs-base-font) * 0.75);
    opacity: .65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-cs-sticky-price {
    /* No font-size — real h3, theme's own size wins outright. */
    margin: 0;
    font-weight: 800;
    color: inherit;
    white-space: nowrap;
}

.hub-cs-sticky-bar .hub-cs-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- inquiry modal */

html.hub-cs-modal-open {
    overflow: hidden;
}

.hub-cs-inquiry-modal[hidden],
.hub-cs-inquiry-form[hidden],
.hub-cs-inquiry-success[hidden],
[data-hub-cs-children-ages][hidden] {
    display: none !important;
}

.hub-cs-inquiry-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    box-sizing: border-box;
}

.hub-cs-inquiry-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.hub-cs-inquiry-dialog {
    position: relative;
    width: min(960px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    box-sizing: border-box;
    border-radius: var(--hub-cs-card-radius, 14px);
    background: #fff;
    color: inherit;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .25);
    outline: none;
}

.hub-cs-inquiry-header {
    padding: 28px 32px 22px;
    border-bottom: 1px solid var(--hub-cs-border);
}

.hub-cs-inquiry-header h2 {
    margin: 0;
    color: inherit;
}

.hub-cs-inquiry-header p {
    margin: 7px 0 0;
    opacity: .68;
}

.hub-cs-inquiry-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--hub-cs-border);
    border-radius: 50%;
    background: var(--hub-cs-surface);
    color: inherit;
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.hub-cs-inquiry-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 18px;
    margin: 22px 32px 0;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--hub-cs-surface);
}

.hub-cs-inquiry-offer span,
.hub-cs-inquiry-offer strong,
.hub-cs-inquiry-offer small {
    display: block;
}

.hub-cs-inquiry-offer small {
    margin-bottom: 3px;
    opacity: .62;
    font-size: calc(var(--hub-cs-base-font) * .75);
}

.hub-cs-inquiry-offer strong {
    font-size: calc(var(--hub-cs-base-font) * .875);
}

.hub-cs-inquiry-form {
    padding: 26px 32px 34px;
}

.hub-cs-inquiry-form fieldset {
    margin: 0 0 28px;
    padding: 0;
    border: 0;
}

.hub-cs-inquiry-form legend {
    width: 100%;
    margin: 0 0 5px;
    padding: 0;
    color: inherit;
    font-size: calc(var(--hub-cs-base-font) * 1.2);
    font-weight: 750;
}

.hub-cs-inquiry-section-note {
    margin: 0 0 17px;
    opacity: .65;
    font-size: calc(var(--hub-cs-base-font) * .8125);
}

.hub-cs-inquiry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.hub-cs-inquiry-grid label,
.hub-cs-inquiry-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hub-cs-inquiry-grid label > span,
.hub-cs-inquiry-message > span,
.hub-cs-inquiry-intent > span,
.hub-cs-inquiry-history > span {
    font-size: calc(var(--hub-cs-base-font) * .875);
    font-weight: 650;
}

.hub-cs-inquiry-form em {
    color: #bd3030;
    font-style: normal;
}

.hub-cs-inquiry-form input[type="text"],
.hub-cs-inquiry-form input[type="email"],
.hub-cs-inquiry-form input[type="tel"],
.hub-cs-inquiry-form input[type="number"],
.hub-cs-inquiry-form select,
.hub-cs-inquiry-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--hub-cs-border);
    border-radius: var(--hub-cs-button-radius, 7px);
    background: #fff;
    color: inherit;
    font: inherit;
    outline: none;
}

.hub-cs-inquiry-form input:focus,
.hub-cs-inquiry-form select:focus,
.hub-cs-inquiry-form textarea:focus {
    border-color: var(--hub-cs-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-cs-accent) 18%, transparent);
}

.hub-cs-inquiry-grid small,
.hub-cs-inquiry-choices small {
    display: block;
    opacity: .65;
    font-size: calc(var(--hub-cs-base-font) * .75);
}

.hub-cs-inquiry-full {
    grid-column: 1 / -1;
}

.hub-cs-inquiry-intent,
.hub-cs-inquiry-history,
.hub-cs-inquiry-message,
.hub-cs-inquiry-consent {
    margin-top: 20px;
}

.hub-cs-inquiry-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.hub-cs-inquiry-choices > label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 13px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 9px;
    cursor: pointer;
}

.hub-cs-inquiry-choices > label:has(input:checked) {
    border-color: var(--hub-cs-accent);
    background: color-mix(in srgb, var(--hub-cs-accent) 6%, white);
}

.hub-cs-inquiry-choices input,
.hub-cs-inquiry-consent input,
.hub-cs-inquiry-history input {
    accent-color: var(--hub-cs-accent);
}

.hub-cs-inquiry-choices input {
    margin-top: 3px;
}

.hub-cs-inquiry-history > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.hub-cs-inquiry-history label {
    padding: 7px 11px;
    border: 1px solid var(--hub-cs-border);
    border-radius: 999px;
    font-size: calc(var(--hub-cs-base-font) * .8125);
    cursor: pointer;
}

.hub-cs-inquiry-message textarea {
    min-height: 118px;
    resize: vertical;
}

.hub-cs-inquiry-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: calc(var(--hub-cs-base-font) * .8125);
    line-height: 1.5;
}

.hub-cs-inquiry-consent input {
    margin-top: 4px;
}

.hub-cs-inquiry-turnstile {
    margin-top: 18px;
}

.hub-cs-inquiry-error {
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: 8px;
    background: #fdeaea;
    color: #8d2424;
    font-size: calc(var(--hub-cs-base-font) * .875);
}

.hub-cs-inquiry-submit {
    display: block;
    margin-left: auto;
    padding: 13px 24px;
    font-weight: 750;
}

.hub-cs-inquiry-submit:disabled {
    opacity: .62;
    cursor: wait;
}

.hub-cs-inquiry-success {
    padding: 62px 32px 70px;
    text-align: center;
}

.hub-cs-inquiry-success > span {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #dff6e8;
    color: #157a43;
    font-size: 28px;
    font-weight: 800;
}

.hub-cs-inquiry-success h3 {
    margin: 18px 0 7px;
    color: inherit;
}

.hub-cs-inquiry-success p {
    margin: 0;
    opacity: .68;
}

.hub-cs-inquiry-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

@media (max-width: 700px) {
    .hub-cs-inquiry-modal {
        padding: 0;
        place-items: stretch;
    }

    .hub-cs-inquiry-dialog {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .hub-cs-inquiry-header,
    .hub-cs-inquiry-form {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hub-cs-inquiry-header {
        padding-right: 64px;
    }

    .hub-cs-inquiry-offer {
        margin-left: 20px;
        margin-right: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hub-cs-inquiry-offer span:first-child {
        grid-column: 1 / -1;
    }

    .hub-cs-inquiry-grid,
    .hub-cs-inquiry-choices {
        grid-template-columns: 1fr;
    }

    .hub-cs-inquiry-full {
        grid-column: auto;
    }

    .hub-cs-inquiry-submit {
        width: 100%;
    }
}

/* Below 560px (every real phone) this used to hide the offer name entirely, not
   just the thumbnail — losing the one piece of context that says which offer this
   bar is even for. Only the image (purely decorative here) is dropped now; the
   name stays, truncated by .hub-cs-sticky-info's own ellipsis handling so it still
   fits next to the price and button. */
@media (max-width: 560px) {
    .hub-cs-sticky-image {
        display: none;
    }
}

.hub-cs-offer.hub-cs-has-sticky-bar {
    padding-bottom: 74px;
}

/* Ship name -> its [hub_statek] page (see offer.js's setShipLink()). Keeps the
   surrounding text's look; the underline alone marks it as a link. */
.hub-cs-ship-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hub-cs-ship-link:hover {
    color: var(--hub-cs-link-color);
}

/* "Warianty tego rejsu" — fare variants of the same sailing (see fillVariants()).
   A standalone collapsed accordion row (.hub-cs-acc summary/body styles above),
   full width above the main layout. */
.hub-cs-variants {
    border: 1px solid var(--hub-cs-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 28px;
}

.hub-cs-variants[hidden] {
    display: none;
}

.hub-cs-variants-count {
    font-weight: 400;
    color: #64748b;
}

/* The price takes the free space; the chevron (::after) sits right after it. */
.hub-cs-variants > .hub-cs-acc-summary::after {
    margin-left: 4px;
}

.hub-cs-variants-from {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}

.hub-cs-variants-note {
    margin: 0 0 12px;
    color: #64748b;
    font-size: calc(var(--hub-cs-base-font) * 0.875);
}

.hub-cs-variants-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hub-cs-variant {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 6px 18px;
    padding: 10px 12px;
    margin: 0;
    border-top: 1px solid var(--hub-cs-border);
}

.hub-cs-variant:first-child {
    border-top: 0;
}

.hub-cs-variant.is-current {
    background: color-mix(in srgb, var(--hub-cs-accent) 10%, #fff);
    border-radius: 8px;
}

.hub-cs-variant-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hub-cs-variant-details,
.hub-cs-variant-route {
    color: #64748b;
    font-size: calc(var(--hub-cs-base-font) * 0.8125);
}

.hub-cs-variant-price {
    font-weight: 700;
    white-space: nowrap;
}

.hub-cs-variant-action {
    white-space: nowrap;
    font-weight: 600;
    color: var(--hub-cs-link-color);
}

.hub-cs-variant-action.is-current {
    color: #64748b;
    font-weight: 400;
}

@media (max-width: 600px) {
    .hub-cs-variant {
        grid-template-columns: 1fr auto;
    }

    .hub-cs-variant-main {
        grid-column: 1 / -1;
    }
}