/* ============================================================
   HSJ BLOCKS — Experience & Review sections
   Loaded only by the relevant blade templates
   ============================================================ */

/* Northwell Swash — local script font */
@font-face {
    font-family: 'Northwell Swash';
    src: url('/module/quotation/fonts/Northwell-Swash.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Shared section header ─────────────────────────────────── */
.ace-section-header {
    text-align: center;
    padding: 52px 0 28px;
}

/* Script decorative line — "What Our" */
.ace-section-script {
    display: block;
    font-family: 'Dancing Script', cursive;
    font-size: 2rem;
    font-weight: 700;
    color: #FBA504;
    line-height: 1;
    margin-bottom: -8px;
    position: relative;
    z-index: 2;
    letter-spacing: 0.01em;
}

/* Bold condensed main title */
.ace-section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #c8c0b4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px;
    line-height: 1.15;
    position: relative;
    z-index: 0;
}

.ace-section-underline {
    display: none;
}

.ace-section-desc {
    font-size: 15px;
    color: #6b7280;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── Section wrappers ──────────────────────────────────────── */
.ace-video-section,
.ace-reviews-section {
    background: #ffffff;
    padding-bottom: 64px;
}

.ace-slider-wrap {
    padding: 0 52px;
    position: relative;
}

/* ── Video card ────────────────────────────────────────────── */
.ace-vid-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15,23,42,0.08);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}

.ace-vid-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 14px 36px rgba(15,23,42,0.13);
}

.ace-vid-thumb {
    display: block;
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #e5e7eb;
}

.ace-vid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.ace-vid-card:hover .ace-vid-thumb img { transform: scale(1.06); }

.ace-vid-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);
    transition: background 0.3s ease;
}

.ace-vid-card:hover .ace-vid-overlay { background: rgba(0,0,0,0.2); }

.ace-vid-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,0.93);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    backdrop-filter: blur(4px);
}

.ace-vid-play svg { fill: #111827; margin-left: 3px; }

.ace-vid-card:hover .ace-vid-play {
    transform: translate(-50%,-50%) scale(1.12);
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}

.ace-vid-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.ace-vid-info {
    padding: 14px 14px 16px;
    text-align: center;
    background: #fff;
}

.ace-vid-name {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.ace-vid-trip {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* ── Watch More — circle + text, centered via Swiper flex-stretch ── */

/* Slide: narrow width so circle sits close to the last card */
.ace-watch-more-slide {
    width: 140px !important;
}

/* Inner div fills full slide height, flexbox centers content */
.ace-wm-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Button: no positioning tricks needed */
.ace-watch-more-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #111827;
    background: none;
    border: none;
    padding: 0;
}

.ace-watch-more-btn:hover { color: #111827; }

/* Circle */
.ace-watch-more-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(17,24,39,0.22);
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    flex-shrink: 0;
}

.ace-watch-more-icon svg { margin-left: 3px; }

.ace-watch-more-btn:hover .ace-watch-more-icon {
    background: #d97706;
    transform: scale(1.1);
    box-shadow: 0 6px 22px rgba(217,119,6,0.30);
}

/* Text below */
.ace-watch-more-label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ── Swiper nav (shared) ───────────────────────────────────── */
.ace-nav-btn {
    width: 44px !important;
    height: 44px !important;
    background: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.09) !important;
    color: #374151 !important;
    transition: all 0.22s ease !important;
}

.ace-nav-btn::after { display: none !important; }

.ace-nav-btn:hover {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #fff !important;
}

.ace-nav-btn:hover i { color: #fff !important; }

/* ── TripAdvisor badge ─────────────────────────────────────── */
.ace-ta-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
}

.ace-ta-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.ace-ta-dots { display: flex; gap: 5px; align-items: center; }

.ace-ta-dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #34E0A1;
    display: inline-block;
}

.ace-ta-dot--half {
    background: linear-gradient(90deg, #34E0A1 50%, #d1d5db 50%);
}

.ace-ta-link {
    font-size: 13px;
    color: #059669;
    text-decoration: underline;
    font-weight: 500;
}

/* ── Review card ───────────────────────────────────────────── */
.ace-reviews-section .swiper-slide { height: auto !important; }

.ace-review-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ace-review-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.09);
    transform: translateY(-3px);
}

.ace-review-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ace-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.ace-review-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ace-review-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #374151;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ace-review-author { flex: 1; min-width: 0; }

.ace-review-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ace-review-location { font-size: 11.5px; color: #9ca3af; margin-top: 1px; }

.ace-review-stars { font-size: 13px; line-height: 1; }
.ace-review-stars i,
.ace-review-stars .fa-star { color: #f59e0b !important; }

.ace-review-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
}

.ace-review-body {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.ace-read-more { color: #d97706; font-weight: 500; text-decoration: none; }
.ace-read-more:hover { text-decoration: underline; }

/* Reviews slider wrap — side padding creates space for nav buttons */
.ace-reviews-slider-wrap {
    padding: 0 52px;
    position: relative;
}

/* Allow nav buttons to be visible outside swiper's overflow */
.ace-reviews-swiper {
    overflow: visible !important;
}

/* Review nav — left/right sides, vertically centered */
.ace-rev-btn-next,
.ace-rev-btn-prev {
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
}

.ace-rev-btn-next { right: -16px !important; left: auto !important; }
.ace-rev-btn-prev { left: -16px !important; right: auto !important; }

@media (max-width: 768px) {
    .ace-reviews-slider-wrap { padding: 0 36px; }
}

/* ── Empty state ───────────────────────────────────────────── */
.ace-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: #9ca3af;
}

.ace-empty-state i { font-size: 2.5rem; margin-bottom: 10px; display: block; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ace-slider-wrap { padding: 0 36px; }
    .ace-section-script { font-size: 1.8rem; margin-bottom: -8px; }
    .ace-section-title { font-size: 1.7rem; }
    .ace-section-header { padding: 36px 0 20px; }
}

@media (max-width: 480px) {
    .ace-slider-wrap { padding: 0 28px; }
}

/* ── Hero Slider ────────────────────────────────────────────── */
.hsj-hero-section {
    width: 100%;
    overflow: hidden;
}

.hsj-hero-swiper {
    height: 600px;
    width: 100%;
}

.hsj-hero-slide {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hsj-hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hsj-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.10) 0%,
        rgba(0,0,0,0.48) 55%,
        rgba(0,0,0,0.68) 100%
    );
}

.hsj-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    max-width: 820px;
}

.hsj-hero-heading {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px;
    line-height: 1.2;
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
    letter-spacing: -0.4px;
}

.hsj-hero-sub {
    font-size: 18px;
    color: rgba(255,255,255,0.88);
    margin: 0 0 30px;
    line-height: 1.6;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

.hsj-hero-cta {
    display: inline-block;
    padding: 13px 34px;
    background: #d97706;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(217,119,6,0.42);
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.hsj-hero-cta:hover {
    background: #b45309;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(217,119,6,0.52);
    text-decoration: none;
}

/* Nav buttons */
.hsj-hero-next,
.hsj-hero-prev {
    width: 46px !important;
    height: 46px !important;
    background: rgba(255,255,255,0.88) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.22) !important;
    color: #111827 !important;
    backdrop-filter: blur(4px);
    transition: background 0.22s ease, transform 0.22s ease !important;
}

.hsj-hero-next::after,
.hsj-hero-prev::after { display: none !important; }

.hsj-hero-next i,
.hsj-hero-prev i { color: #111827; font-size: 14px; }

.hsj-hero-next:hover,
.hsj-hero-prev:hover {
    background: #ffffff !important;
    transform: scale(1.08) translateY(-50%) !important;
}

/* Pagination dots */
.hsj-hero-pagination { bottom: 22px !important; }

.hsj-hero-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.55);
    opacity: 1;
    transition: all 0.22s ease;
}

.hsj-hero-pagination .swiper-pagination-bullet-active {
    background: #d97706;
    width: 26px;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .hsj-hero-swiper { height: 420px; }
    .hsj-hero-heading { font-size: 30px; }
    .hsj-hero-sub { font-size: 15px; }
}

@media (max-width: 480px) {
    .hsj-hero-swiper { height: 320px; }
    .hsj-hero-heading { font-size: 24px; }
    .hsj-hero-sub { font-size: 13px; margin-bottom: 20px; }
    .hsj-hero-cta { padding: 10px 24px; font-size: 13px; }
}


/* ============================================================
   HSJ HEADER V2 — Sticky + Transparent System
   ============================================================ */

/* --- Custom properties --- */
:root {
    --hsj-main-hdr-h: 66px;
    --hsj-nav-hdr-h:  52px;
    --hsj-amber:      #f8b736;
    --hsj-navy:       #1A4B89;
    --hsj-navy-dark:  #122f5e;
    --hsj-transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Suppress old top-bar markup (replaced by hsj-top-bar) --- */
.gray-main-bg { display: none !important; }

/* --- Top Bar --- */
.hsj-top-bar {
    background: var(--hsj-amber);
    color: var(--hsj-navy-dark);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

.hsj-top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 91%;
    margin: 0 auto;
    height: 36px;
    padding: 0 4px;
}

.hsj-top-bar-trust {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--hsj-navy-dark);
}

.hsj-top-bar-trust svg {
    color: var(--hsj-navy-dark);
    flex-shrink: 0;
}

.hsj-top-bar-sep {
    opacity: 0.4;
}

.hsj-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--hsj-navy-dark) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 12px;
    transition: opacity 0.15s;
}

.hsj-trust-badge:hover { opacity: 0.75; }

.hsj-trust-badge img { flex-shrink: 0; }

/* Center promo strip */
.hsj-top-bar-promo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hsj-navy-dark);
}

.hsj-top-bar-promo-text { white-space: nowrap; }

.hsj-top-bar-deal-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--hsj-navy);
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s;
}

.hsj-top-bar-deal-btn:hover {
    background: var(--hsj-navy-dark);
    color: #fff !important;
}

.hsj-top-bar-flags {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hsj-flag-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--hsj-navy-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 11.5px;
    transition: opacity 0.15s;
}

.hsj-flag-link:hover {
    opacity: 0.7;
    color: var(--hsj-navy-dark);
    text-decoration: none;
}

.hsj-flag-emoji {
    font-size: 14px;
    line-height: 1;
}

/* Desktop: hide mobile top bar */
.hsj-top-bar-mobile { display: none; }

@media (max-width: 767px) {
    /* Show mobile top bar, hide desktop top bar inner */
    .hsj-top-bar-inner { display: none !important; }
    .hsj-top-bar-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        height: 44px;
    }
    .hsj-top-bar-mobile-logo img { height: 28px; width: auto; display: block; filter: brightness(0) invert(1); }
    .hsj-top-bar-mobile-logo span { font-weight: 800; font-size: 15px; letter-spacing: -0.3px; color: #fff; }
    .hsj-top-bar-mobile-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .hsj-topbar-mobile-phone {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 700;
        color: var(--hsj-navy-dark) !important;
        text-decoration: none !important;
        white-space: nowrap;
    }
    .hsj-chatnow-btn--sm {
        padding: 3px 9px 3px 7px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
}

.bravo_wrap {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Disable theme JS-driven sticky classes — header scrolls with the page */
.header-sticky,
#header-sticky.header-sticky {
    position: static !important;
    animation: none !important;
    box-shadow: none !important;
}

.sticky-menu,
#sticky-header.sticky-menu {
    position: static !important;
    animation: none !important;
    box-shadow: none !important;
}

.main-header {
    background: oklch(1 0.002 240);
    box-shadow: 0 1px 0 oklch(0.88 0.006 240);
}

/* --- Plan My Trip button --- */
.hsj-plan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    background: var(--hsj-amber);
    color: var(--hsj-navy-dark) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 6px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.18s, transform 0.18s;
    flex-shrink: 0;
}

.hsj-plan-btn:hover {
    background: oklch(0.78 0.14 74);
    color: var(--hsj-navy-dark) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* --- Phone link --- */
.hsj-header-phone {
    gap: 6px;
}

.hsj-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hsj-navy) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: color 0.15s;
}

.hsj-phone-link:hover {
    color: var(--hsj-navy-dark) !important;
    text-decoration: none !important;
}

/* --- Mobile WhatsApp CTA --- */
.hsjmobile__wa-cta {
    padding: 20px 24px;
    border-top: 1px solid oklch(0.9 0.005 240);
    margin-top: 8px;
}

.hsjmobile__wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    background: #25d366;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background 0.18s;
}

.hsjmobile__wa-btn:hover {
    background: #1fb855;
    color: #fff !important;
    text-decoration: none !important;
}

/* Ensure hsjmobile menu overlaps headers */
.hsjmobile__menu {
    z-index: 1100 !important;
}

@media (max-width: 575px) {
    .hsj-plan-btn { display: none !important; }
}


/* ============================================================
   HSJ HEADER — 3-Tier Layout
   ============================================================ */

/* --- Utility bar: 3-column flex layout --- */
.main-header .header-container,
.main-header .hsj-util-bar {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: var(--hsj-main-hdr-h) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Left column: shrink to fit logo + hamburger */
.hsj-util-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* Center column: takes all remaining space */
.hsj-util-center {
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
}

/* Right column: shrink to fit actions */
.hsj-util-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* --- Search form: prominent pill style --- */
.hsj-search-wrap {
    position: relative;
    width: 100%;
}

.hsj-search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.hsj-search-icon-left {
    position: absolute;
    left: 14px;
    color: oklch(0.55 0.02 240);
    pointer-events: none;
    flex-shrink: 0;
    z-index: 1;
}

.hsj-search-form .hsj-search-input,
.main-header .hsj-search-input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 20px 0 42px !important;
    border-radius: 8px !important;
    border: 1.5px solid oklch(0.88 0.008 240) !important;
    background: oklch(0.975 0.003 240) !important;
    font-size: 14px !important;
    color: oklch(0.18 0.01 240) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

.hsj-search-form .hsj-search-input::placeholder {
    color: oklch(0.62 0.015 240);
}

.hsj-search-form .hsj-search-input:focus {
    border-color: var(--hsj-navy) !important;
    background: oklch(1 0.002 240) !important;
    box-shadow: 0 0 0 3px oklch(0.35 0.12 240 / 0.10) !important;
}

/* Hide the old search wrapper from header-center if present */
.main-header .header-center .hsj-blog-sidebar-form {
    display: none !important;
}

/* --- WhatsApp icon button (mobile) --- */
.hsj-wa-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #25d366;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: background 0.18s, transform 0.18s;
}

.hsj-wa-icon-btn:hover {
    background: #1fb855;
    transform: scale(1.07);
    color: #fff !important;
}


/* ── Mobile header (≤767px) — Luxury Escapes pattern ─────── */
@media (max-width: 767px) {

    /* Prevent any horizontal overflow */
    .main-header { overflow: hidden !important; }

    /* Utility bar: two-row layout */
    .main-header .header-container,
    .main-header .hsj-util-bar {
        flex-wrap: wrap !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 0 8px !important;
        min-height: 52px !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Left: hamburger + logo */
    .hsj-util-left {
        flex: 0 0 auto;
        gap: 8px;
    }

    /* Logo: smaller on mobile */
    .hsj-logo-img {
        max-height: 32px !important;
        width: auto !important;
    }

    /* Right actions: fill remaining space, right-aligned */
    .hsj-util-right {
        flex: 1 1 auto !important;
        justify-content: flex-end;
        gap: 8px;
    }

    /* Search: full-width second row */
    .hsj-util-center {
        display: flex !important;
        order: 10;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0 10px !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .hsj-search-wrap,
    .hsj-search-form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .hsj-search-form .hsj-search-input,
    .main-header .hsj-search-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hide Plan My Trip — top bar Chat Now covers it */
    .hsj-plan-btn { display: none !important; }

    /* Hide WA circle icon — top bar covers WhatsApp */
    .hsj-wa-icon-btn { display: none !important; }

    /* Currency: compact */
    .hsj-currency-picker { display: block !important; }
    .hsj-currency-btn--bar {
        font-size: 12px !important;
        padding: 5px 8px 5px 7px !important;
    }
    .hsj-currency-dropdown {
        right: 0 !important;
        left: auto !important;
        min-width: 160px !important;
    }

    /* Nav bar: hide — offcanvas handles mobile nav */
    #header.header { display: none !important; }
}

/* ── Fix Swiper horizontal overflow on all screen sizes ─────
   ace-reviews-swiper intentionally uses overflow:visible for
   nav arrows — everything else should be clipped.           */
.swiper-container:not(.ace-reviews-swiper),
.swiper:not(.ace-reviews-swiper) {
    overflow: hidden !important;
}

/* Ensure no section bleeds outside viewport horizontally */
.bravo_section,
.luxuryslider,
section,
.ace-video-section,
.ace-reviews-section {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ── Tablet (768px–991px) ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
    .main-header .hsj-util-bar {
        min-height: 58px !important;
    }
    .hsj-plan-btn { display: none !important; }
    /* Keep search visible on tablet */
    .hsj-util-center { display: flex !important; }
}


/* ============================================================
   HSJ Currency Picker Dropdown
   ============================================================ */

/* Right group: Chat Now + currency picker side by side */
.hsj-top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Phone link in top bar */
.hsj-topbar-phone {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--hsj-navy-dark) !important;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.hsj-topbar-phone:hover {
    opacity: 0.75;
    color: var(--hsj-navy-dark) !important;
    text-decoration: none !important;
}

/* Chat Now button */
.hsj-chatnow-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    background: #25d366;
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 5px;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
    transition: background 0.15s;
}

.hsj-chatnow-btn:hover {
    background: #1db954;
    color: #fff !important;
    text-decoration: none !important;
}

.hsj-currency-picker {
    position: relative;
}

/* Trigger button — amber top bar variant (default) */
.hsj-currency-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    background: rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 5px;
    color: var(--hsj-navy-dark);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s;
    white-space: nowrap;
}

.hsj-currency-btn:hover {
    background: rgba(0,0,0,0.16);
}

/* White utility bar variant */
.hsj-currency-btn--bar {
    background: transparent;
    border: none;
    color: oklch(0.18 0.01 240);
    font-size: 13px;
    font-weight: 600;
    padding: 5px 7px 5px 5px;
    border-radius: 8px;
    gap: 6px;
    letter-spacing: 0.01em;
}

.hsj-currency-btn--bar:hover {
    background: oklch(0.94 0.005 240);
}

/* Circular flag image */
.hsj-flag-wrap {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    box-shadow: 0 0 0 1px oklch(0.82 0.008 240 / 0.6);
}

.hsj-flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hsj-currency-flag { display: flex; align-items: center; }

.hsj-currency-chevron {
    color: oklch(0.42 0.01 240);
    opacity: 0.8;
    transition: transform 0.18s ease;
    flex-shrink: 0;
    margin-left: 1px;
}

.hsj-currency-picker.hsj-open .hsj-currency-chevron {
    transform: rotate(180deg);
}

/* Dropdown panel */
.hsj-currency-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid oklch(0.9 0.005 240);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    min-width: 180px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.hsj-currency-picker.hsj-open .hsj-currency-dropdown,
.hsj-currency-dropdown.hsj-dropdown-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Option row */
.hsj-currency-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    transition: background 0.12s;
}

.hsj-currency-option:hover {
    background: oklch(0.97 0.004 240);
}

.hsj-currency-option--active {
    background: oklch(0.96 0.008 74);
    color: var(--hsj-navy-dark);
}

.hsj-currency-option--active:hover {
    background: oklch(0.94 0.01 74);
}

.hsj-currency-option .hsj-flag-emoji {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.hsj-currency-option-name {
    font-size: 11.5px;
    font-weight: 400;
    color: #6b7280;
    margin-left: auto;
    padding-left: 8px;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE HEADER v3 — New 2-bar sticky layout (≤767px)
   Bar 1: [Logo + ≡] left  |  [🇳🇵 phone + Chat Now + USD] right
   Bar 2: [Search bar — full width]
   Both bars sticky. Amber top bar hidden entirely on mobile.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* 1 — Kill amber top bar on mobile */
    .hsj-top-bar { display: none !important; }

    /* 2 — Main header: white */
    .main-header {
        background: #fff !important;
        box-shadow: 0 1px 8px rgba(0,0,0,0.08) !important;
        overflow: visible !important;   /* allow search dropdown to escape */
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* 3 — Util bar: two-row flex */
    .main-header .header-container,
    .main-header .hsj-util-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 0 12px !important;
        gap: 0 6px !important;
        min-height: auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* 4 — Row 1 LEFT: hamburger + logo — shrinkable so right side fits same row */
    .hsj-util-left {
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Logo: natural colours, slightly smaller to save row space */
    .hsj-logo-img {
        max-height: 26px !important;
        width: auto !important;
        display: block !important;
        filter: none !important;
        flex-shrink: 0 !important;
    }

    /* 5 — Row 1 RIGHT: phone + Chat Now + USD — never wraps to new row */
    .hsj-util-right {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 8px 0 !important;
        flex-shrink: 0 !important;
    }

    /* Show mobile contact block */
    .hsj-mobile-contact {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    /* Phone link — flag + number */
    .hsj-mobile-phone-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #1a2332 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        letter-spacing: -0.2px !important;
    }

    /* Chat Now: compact */
    .hsj-chatnow-btn--sm {
        padding: 4px 8px 4px 7px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        gap: 4px !important;
    }

    /* Currency btn: compact */
    .hsj-currency-btn--bar {
        padding: 5px 7px !important;
        font-size: 11px !important;
        gap: 3px !important;
    }

    /* Currency dropdown: open to the left on mobile */
    .hsj-currency-dropdown {
        right: 0 !important;
        left: auto !important;
        min-width: 160px !important;
    }

    /* Hide Plan My Trip and old WA circle icon */
    .hsj-plan-btn    { display: none !important; }
    .hsj-wa-icon-btn { display: none !important; }

    /* 6 — Row 2: search bar — full width, sticks below row 1 */
    .hsj-util-center {
        order: 10 !important;
        flex: 0 0 100% !important;
        display: flex !important;       /* override Bootstrap d-none */
        padding: 0 0 10px !important;
        position: relative !important;  /* anchor for results dropdown */
    }

    /* Search elements full width, no overflow */
    .hsj-search-wrap,
    .hsj-search-form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    .hsj-search-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Search results dropdown: visible, not clipped */
    .version_search_3_results_container {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }

    /* 7 — Nav bar: hidden on mobile (hamburger slide-out handles nav) */
    #header.header { display: none !important; }
}

/* ── Small phone fix (≤480px): hide phone number text, keep flag icon only
   Standalone rule — nested @media inside @media is invalid in most browsers.
   At ≤480px the full number + Chat Now + USD won't fit next to the logo.
   Hiding the number text saves ~80px and keeps everything on one row. ── */
@media (max-width: 480px) {
    .hsj-mobile-phone-link span { display: none !important; }
    .hsj-mobile-phone-link img  { width: 16px !important; height: 11px !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FIXES — search visibility, menu search removal, padding
   ══════════════════════════════════════════════════════════════ */

/* 1 — Remove search bar from mobile slide-out menu (duplicate of header search) */
.hsjmobile__search { display: none !important; }

@media (max-width: 767px) {

    /* 2 — Breathing room between sticky header and first page section */
    main#page { padding-top: 28px; }

    /* 3 — Search results dropdown: must escape sticky header's stacking context.
       Force a new z-index layer high enough to appear above everything. */
    .hsj-search-wrap,
    .hsj-search-wrap.search__wrapper {
        position: relative !important;
        overflow: visible !important;
    }

    .hsj-search-wrap .version_search_3_results_container {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.13) !important;
        border-radius: 10px !important;
        background: #fff !important;
    }

    /* Ensure the util-center row creates its own containing block */
    .hsj-util-center {
        position: relative !important;
        overflow: visible !important;
        z-index: 1 !important;
    }

    /* Ensure nothing above clips the dropdown */
    .main-header,
    .main-header .header-container,
    .main-header .hsj-util-bar {
        overflow: visible !important;
    }
}

/* ── Top bar colour change: amber → #FAFAFA ─────────────────── */
.hsj-top-bar {
    background: #FAFAFA !important;
    border-bottom: 1px solid #ebebeb;
}

/* Hide mobile-only contact block on desktop (shown only on ≤767px via media query) */
@media (min-width: 768px) {
    .hsj-mobile-contact { display: none !important; }
}

/* Keep logo visible when header-sticky class is added on scroll
   (main.css hides .logo-1 expecting a .logo-2 swap that doesn't exist here) */
.header-sticky .logo-1 { display: block !important; }

/* ── Restore Swiper peek effect ─────────────────────────────────
   Previous fix set overflow:hidden on all swipers which broke the
   edge-to-edge card peek. Revert swipers to visible and prevent
   horizontal page scroll at the html/body root level instead.   */
.swiper-container:not(.ace-reviews-swiper),
.swiper:not(.ace-reviews-swiper) {
    overflow: visible !important;
}

/* Root-level horizontal scroll prevention — clips at viewport
   boundary without hiding swiper peek cards inside the viewport */
html {
    overflow-x: hidden;
    max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   HSJ OPTION A — Image-first card design
   Used by: loop-luxuryslider, loop-big, loop-furious, loop-carousel
   ══════════════════════════════════════════════════════════════ */

.hsj-card {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.hsj-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.14);
}
.hsj-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* ── Image ─────────────────────────────────────────────────── */
.hsj-card-img-wrap {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #e5e7eb;
}
.hsj-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.hsj-card:hover .hsj-card-img {
    transform: scale(1.05);
}
.hsj-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.72) 0%,
        rgba(0,0,0,0.25) 42%,
        transparent 65%
    );
    pointer-events: none;
}

/* ── Badge top-left ─────────────────────────────────────────── */
.hsj-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #f7931d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px 4px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
    z-index: 2;
}

/* ── Wishlist top-right ─────────────────────────────────────── */
.hsj-card-wish {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(4px);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #374151;
    z-index: 2;
    transition: background 0.15s, color 0.15s;
}
.hsj-card-wish:hover { background: #fff; color: #ef4444; }
.service-wishlist.wishlist-added .hsj-card-wish svg { fill: #ef4444; stroke: #ef4444; }

/* ── Price overlay bottom-left ─────────────────────────────── */
.hsj-card-price-overlay {
    position: absolute;
    bottom: 13px;
    left: 14px;
    z-index: 2;
    pointer-events: none;
}
.hsj-card-save-tag {
    display: inline-block;
    background: #16a34a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 5px;
    letter-spacing: 0.2px;
}
.hsj-card-price-amount {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.hsj-card-price-per {
    font-size: 12px;
    color: rgba(255,255,255,0.82);
    margin-top: 1px;
}

/* ── Body below image ───────────────────────────────────────── */
.hsj-card-body {
    padding: 13px 14px 15px;
}
.hsj-card-meta {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    margin-bottom: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hsj-card-meta i { font-size: 10px; flex-shrink: 0; }
.hsj-card-category { color: #f7931d; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.hsj-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2332;
    line-height: 1.35;
    margin: 0;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hsj-card-title a {
    color: inherit;
    text-decoration: none;
}

/* ── Edge-to-edge slider fix ────────────────────────────────────
   Strip horizontal padding from section/container wrappers so
   swipers reach the screen edge. Push padding to headers only.  */

/* Luxury / furious / normal trek sliders (share section.luxuryslider) */
section.luxuryslider {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    overflow-x: visible !important;
}
.luxuryslider .luxury-header,
.luxuryslider .luxury-filter-tags {
    padding-left: 150px !important;
    padding-right: 2rem !important;
}

/* Bestseller (Most Exclusive Day Tours / Spiritual Journey) */
.bestseller-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}
.bestseller-container .bestseller-header {
    padding-left: 150px !important;
    padding-right: 2rem !important;
}

/* Most Popular Tour Packages (normalbigswiper) — edge-to-edge + title fix */
section.normalbigswiper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    overflow-x: visible !important;
}
/* Removed min-height — was forcing card height to 390px via Swiper wrapper height:100%+align-items:stretch,
   making these cards taller than other sections (e.g. furious-slider). Cards are naturally consistent. */
/* Override Bootstrap .container to align header with 150px inset */
.offers-container .container.offers-header,
.offers-container .container.big-slider-category-wrapper {
    max-width: 100% !important;
    padding-left: 150px !important;
    padding-right: 2rem !important;
}

/* Section headings — Oswald condensed sans */
.offers-header h2,
.luxury-header-content h1,
.bestseller-header h2 {
    font-family: 'Oswald', sans-serif !important;
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    font-weight: 700 !important;
    color: #18202e !important;
    font-style: normal !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
}

/* offers em — amber Oswald block (two-line layout) */
.offers-header em {
    display: block !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: #FBA504 !important;
    font-family: 'Oswald', sans-serif !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FBA504 !important;
    line-height: 1.2 !important;
}

/* luxury + bestseller + experience + reviews em — Oswald amber, stays inline */
.luxury-header-content h1 em,
.bestseller-header h2 em,
.ace-video-section .ace-section-title em,
.ace-reviews-section .ace-section-title em {
    display: inline !important;
    font-family: 'Oswald', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: inherit !important;
    text-transform: uppercase !important;
    color: #FBA504 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #FBA504 !important;
}

/* ── Reviews section — edge-to-edge with 150px inset ─────────
   Break out of Bootstrap container, push heading/badge padding
   to match the slidesOffsetBefore: 150 on the review cards.   */
.ace-reviews-section .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.ace-reviews-section .ace-section-header,
.ace-reviews-section .ace-ta-badge {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}
.ace-reviews-section .ace-section-underline {
    margin-left: 0 !important;
}
.ace-reviews-section .ace-reviews-slider-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Centred desc */
.ace-reviews-section .ace-section-desc {
    margin: 8px auto 0 !important;
    max-width: 680px !important;
    text-align: center !important;
}
/* Centred TripAdvisor badge */
.ace-reviews-section .ace-ta-badge {
    justify-content: center !important;
}
.ace-reviews-section .ace-ta-rating {
    justify-content: center !important;
    align-items: center !important;
}
/* Reposition nav buttons to sit in the inset margins */
.ace-reviews-section .ace-rev-btn-prev {
    display: flex !important;
    left: 75px !important;
    right: auto !important;
    z-index: 10;
}
.ace-reviews-section .ace-rev-btn-next {
    right: 20px !important;
    left: auto !important;
    z-index: 10;
}

/* ── Responsive: reduce left inset on tablet & mobile ─────────────────────── */

/* Tablet (768–1023px): 60px inset */
@media (max-width: 1023px) {
    .luxuryslider .luxury-header,
    .luxuryslider .luxury-filter-tags,
    .bestseller-container .bestseller-header,
    .offers-container .container.offers-header,
    .offers-container .container.big-slider-category-wrapper,
    .ace-reviews-section .ace-section-header,
    .ace-reviews-section .ace-ta-badge {
        padding-left: 60px !important;
        padding-right: 1rem !important;
    }
    .ace-reviews-section .ace-section-desc { max-width: 100% !important; text-align: center !important; }
    .ace-reviews-section .ace-rev-btn-prev { left: 10px !important; }
}

/* Mobile (< 768px): 16px inset */
@media (max-width: 767px) {
    .luxuryslider .luxury-header,
    .luxuryslider .luxury-filter-tags,
    .bestseller-container .bestseller-header,
    .offers-container .container.offers-header,
    .offers-container .container.big-slider-category-wrapper,
    .ace-reviews-section .ace-section-header,
    .ace-reviews-section .ace-ta-badge {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Keep section containers edge-to-edge */
    section.luxuryslider,
    .bestseller-container,
    .offers-container {
        overflow-x: hidden !important;
    }
    /* Reviews nav buttons hidden on mobile — swipe only */
    .ace-reviews-section .ace-rev-btn-prev,
    .ace-reviews-section .ace-rev-btn-next {
        display: none !important;
    }
    /* Headings scale down */
    .luxury-header-content h1,
    .bestseller-header h2,
    .offers-header h2 {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    }
}

/* Fix: bestseller-swiper has overflow:hidden by default (Swiper), which clips buttons
   positioned at left:-1.25rem / right:-1.25rem. Allow overflow so buttons show. */
.bestseller-swiper {
    overflow: visible !important;
}
/* Also reposition to sit visibly at the edges (not outside) */
.bestseller-button-prev {
    left: 10px !important;
}
.bestseller-button-next {
    right: 10px !important;
}

/* Fix: extra.css has .swiper-container [aria-disabled="true"] { width:1px; height:1px; ... }
   which collapses disabled nav buttons to 1×1px. Override for nav buttons only. */
.swiper-button-next[aria-disabled="true"],
.swiper-button-prev[aria-disabled="true"] {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Desktop: ensure slider nav buttons are always visible */
@media (min-width: 768px) {
    .experiences-button-next,
    .experiences-button-prev {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Hide all slider prev/next arrows on mobile — swipe only */
@media (max-width: 767px) {
    .experiences-button-next,
    .experiences-button-prev,
    .bestseller-button-next,
    .bestseller-button-prev,
    .swiper-button-next:not(.ace-rev-btn-next):not(.ace-nav-next),
    .swiper-button-prev:not(.ace-rev-btn-prev):not(.ace-nav-prev) {
        display: none !important;
    }
}

/* Fix: furious slider cards stuck at ~41% width
   Root cause: extra.css FOUC rule targets .luxuryv2-swiper (wrapper) with :not(.swiper-container-initialized)
   but Swiper only adds swiper-container-initialized to the container — wrapper never gets it, so rule always applies.
   Override: reset flex so Swiper's inline width calculation takes effect. */
.furious-slider .swiper-wrapper .bestseller-slide {
    flex: none !important;
}

/* ── FOUC fix: A (pre-size) + B (fade in) ────────────────────────────────
   A: Pre-size slides using CONTAINER selectors — these correctly receive
      .swiper-container-initialized so the rule auto-disables once Swiper takes over.
   B: Opacity 0 before init hides ugly layout jump; fades in after init.
   Together: user sees a clean blank space for ~100–300ms, then slides
   appear smoothly at the correct size. No jumping boxes.
   ─────────────────────────────────────────────────────────────────────── */

/* A — wrapper must be horizontal flex row before init (both Swiper v6 + modern) */
.normalmainswiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-wrapper,
.bestseller-swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-wrapper,
.furious-slider:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-wrapper,
.luxuryslider-swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-wrapper,
.hsj-normal2-slider:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
}

/* A — Desktop: pre-size to ~3.6 cards (1/3.6 ≈ 27%) */
@media (min-width: 1024px) {
    .normalmainswiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .bestseller-swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .furious-slider:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .luxuryslider-swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .hsj-normal2-slider:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide {
        flex: 0 0 calc(27% - 15px) !important;
        width: calc(27% - 15px) !important;
    }
}

/* A — Tablet: ~1.8 cards (1/1.8 ≈ 55%) */
@media (min-width: 768px) and (max-width: 1023px) {
    .normalmainswiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .bestseller-swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .furious-slider:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .luxuryslider-swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .hsj-normal2-slider:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide {
        flex: 0 0 calc(55% - 10px) !important;
        width: calc(55% - 10px) !important;
    }
}

/* A — Mobile: ~1.2 cards (83%) */
@media (max-width: 767px) {
    .normalmainswiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .bestseller-swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .furious-slider:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .luxuryslider-swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide,
    .hsj-normal2-slider:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide {
        flex: 0 0 83% !important;
        width: 83% !important;
    }
}

/* B — Invisible before init (handles both modern .swiper-initialized and legacy .swiper-container-initialized) */
.normalmainswiper:not(.swiper-initialized):not(.swiper-container-initialized),
.bestseller-swiper:not(.swiper-initialized):not(.swiper-container-initialized),
.furious-slider:not(.swiper-initialized):not(.swiper-container-initialized),
.luxuryslider-swiper:not(.swiper-initialized):not(.swiper-container-initialized),
.hsj-normal2-slider:not(.swiper-initialized):not(.swiper-container-initialized) {
    opacity: 0;
}

/* B — Fade in once Swiper initializes (modern: swiper-initialized  |  legacy: swiper-container-initialized) */
.normalmainswiper.swiper-initialized,    .normalmainswiper.swiper-container-initialized,
.bestseller-swiper.swiper-initialized,   .bestseller-swiper.swiper-container-initialized,
.furious-slider.swiper-initialized,      .furious-slider.swiper-container-initialized,
.luxuryslider-swiper.swiper-initialized, .luxuryslider-swiper.swiper-container-initialized,
.hsj-normal2-slider.swiper-initialized,  .hsj-normal2-slider.swiper-container-initialized {
    opacity: 1;
    transition: opacity 0.35s ease;
}

/* C — Reset FOUC slide widths after Swiper initializes ─────────────────
   The compiled frontend-oSNMAHmK.css (Vite bundle) has stale FOUC rules
   including .luxuryv2-swiper:not(.swiper-initialized) which targets the
   WRAPPER (not container) and NEVER deactivates — slides stay stuck at 41%.
   blocks.css loads LAST so these !important rules always win the cascade.
   Swiper's own inline style="width:Xpx" takes effect once flex:none is set. */
.normalmainswiper.swiper-initialized    .swiper-slide,
.normalmainswiper.swiper-container-initialized .swiper-slide,
.bestseller-swiper.swiper-initialized   .swiper-slide,
.bestseller-swiper.swiper-container-initialized .swiper-slide,
.luxuryslider-swiper.swiper-initialized .swiper-slide,
.luxuryslider-swiper.swiper-container-initialized .swiper-slide,
.hsj-normal2-slider.swiper-initialized  .swiper-slide,
.hsj-normal2-slider.swiper-container-initialized .swiper-slide {
    flex: none !important;  /* flex-grow:0; flex-shrink:0; flex-basis:auto → Swiper inline width wins */
}

/* ======================================================
   Scroll-compact header — Option B (Luxury Escapes style)
   Transitions on default state so compact feels smooth
   ====================================================== */

.main-header {
    transition: box-shadow 0.3s ease !important;
}

.main-header .header-container,
.main-header .hsj-util-bar {
    transition: min-height 0.3s ease !important;
}

.hsj-logo-img {
    transition: max-height 0.3s ease;
}

.hsj-search-form .hsj-search-input,
.main-header .hsj-search-input {
    transition: height 0.3s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, background 0.18s ease !important;
}

#header.header {
    transition: top 0.3s ease !important;
}

/* Compact state — all screen sizes */
.main-header.hsj-scrolled {
    box-shadow: 0 2px 24px oklch(0.15 0.01 240 / 0.13) !important;
}

/* Mobile compact: 52px → 44px */
@media (max-width: 767px) {
    .main-header.hsj-scrolled .header-container,
    .main-header.hsj-scrolled .hsj-util-bar {
        min-height: 44px !important;
    }

    .main-header.hsj-scrolled .hsj-logo-img {
        max-height: 26px !important;
    }
}

/* Desktop compact: 70px → 54px */
@media (min-width: 768px) {
    .main-header.hsj-scrolled .header-container,
    .main-header.hsj-scrolled .hsj-util-bar {
        min-height: 54px !important;
    }

    .main-header.hsj-scrolled .hsj-logo-img {
        max-height: 28px !important;
    }

    .main-header.hsj-scrolled .hsj-search-input {
        height: 38px !important;
    }
}


/* ============================================================
   HSJ REGION & CURRENCY MODAL
   ============================================================ */

.hsj-region-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.hsj-region-modal[hidden] { display: none !important; }

.hsj-region-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
}

.hsj-region-dialog {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    animation: hsjModalIn 0.22s ease;
}

@keyframes hsjModalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.hsj-region-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.hsj-region-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a2332;
    margin: 0;
}

.hsj-region-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.hsj-region-close:hover { background: #e8e8e8; }

.hsj-region-body {
    padding: 20px 28px 28px;
}

.hsj-region-section-label {
    font-size: 13px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 14px;
}

.hsj-region-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hsj-region-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid #efefef;
    text-decoration: none !important;
    color: #1a2332 !important;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}

.hsj-region-option:hover {
    border-color: #d0d0d0;
    background: #fafafa;
    text-decoration: none !important;
}

.hsj-region-option--active {
    border-color: #1a2332 !important;
    background: #f7fbff !important;
}

.hsj-region-flag {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.hsj-region-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.hsj-region-country {
    font-size: 14px;
    font-weight: 600;
    color: #1a2332;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hsj-region-currency {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}

.hsj-region-check {
    color: #1a2332;
    flex-shrink: 0;
    margin-left: auto;
}

body.hsj-modal-open { overflow: hidden; }

@media (max-width: 520px) {
    .hsj-region-grid { grid-template-columns: 1fr; }
    .hsj-region-dialog { border-radius: 12px; }
    .hsj-region-header { padding: 20px 20px 14px; }
    .hsj-region-body { padding: 16px 20px 24px; }
    .hsj-region-title { font-size: 17px; }
}

/* ============================================================
   Big Slider Category Filter Pills
   ============================================================ */

.big-slider-category-wrapper {
    position: relative;
    padding: 0;
    margin-bottom: 24px;
}

.big-slider-category-links {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 8px;
}

.big-slider-category-links::-webkit-scrollbar {
    display: none;
}

/* Each pill */
.big-slider-category-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 8px 16px;
    background: #f4f1ec;
    border: none;
    border-radius: 50px;
    color: #7a6e66;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Hover */
.big-slider-category-link:hover,
.big-slider-category-link:focus {
    background: #ece7df;
    color: #2e2620;
    text-decoration: none;
    outline: none;
}

/* Active */
.big-slider-category-link.active {
    background: #FBA504;
    color: #fff;
    font-weight: 600;
}

/* Icon */
.bsf-tab-icon {
    font-size: 13px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.big-slider-category-link:hover .bsf-tab-icon {
    opacity: 0.75;
}

.big-slider-category-link.active .bsf-tab-icon {
    opacity: 1;
}

/* Hidden slide class used by JS filter */
.swiper-slide.bsf-hidden {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.big-slider-scroll-indicator {
    display: none;
}

@media (max-width: 768px) {
    .big-slider-category-wrapper {
        margin-bottom: 16px;
    }
    .big-slider-category-link {
        padding: 7px 14px;
        font-size: 13px;
        gap: 6px;
    }
    .bsf-tab-icon {
        font-size: 12px;
    }
}

/* ── Tour detail — tab navigation orange active state ─────────────────────── */
.tour-page .section-nav-item:hover,
.tour-page .section-nav-item.active {
    color: #18202e !important;
    border-bottom-color: #FBA504 !important;
    font-weight: 700;
}

/* Breadcrumb strip above hero */
.hsj-tour-breadcrumb {
    font-size: 13px;
}
.hsj-tour-breadcrumb .hsj-breadcrumb-list-4 ul {
    padding: 0;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TOUR DETAIL — CLEAN SECTION DESIGN (matches demo)
   Overrides tourpage.css bordered-card styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Remove outer container padding/border ─────────────────── */
.tour-page .hsj-tour-details-area {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.tour-page .main-content {
    padding: 0 !important;
}
.tour-page .content-main {
    padding: 32px 40px 0 0 !important;
}

/* ── Section block spacing ─────────────────────────────────── */
.tour-page .content-section,
.tour-page .includes-exclude,
.tour-page .itinerary-section,
.tour-page .mb-5 > section {
    margin-bottom: 48px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Section headings — demo style ────────────────────────── */
.tour-page .section-header,
.tour-page .itinerary-header.sticky-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: static !important;
}

.tour-page .inclusions-title,
.tour-page .itinerary-title {
    font-family: 'Oswald', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #18202e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Section heading icon prefix */
.tour-page .section-header::before,
.tour-page .itinerary-header::before {
    content: '';
    display: inline-block;
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: rgba(251, 165, 4, 0.12);
    border-radius: 8px;
}

/* ── Include / Exclude cards — remove heavy borders ────────── */
.tour-page .includes-card,
.tour-page .excludes-card {
    background: #fafafa !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    padding: 20px 22px !important;
}

/* ── Itinerary accordion — clean items ─────────────────────── */
.tour-page .itinerary-header {
    border-bottom: none !important;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    background: transparent !important;
}

/* ── section-title (overview h2) ───────────────────────────── */
.tour-page .section-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #18202e !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    line-height: 1.6 !important;
}

/* ── Flight schedule — remove gradient card ─────────────────── */
.tour-page .flight-schedule {
    background: transparent !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    padding: 24px !important;
    border-radius: 10px !important;
}