.inner-header {
    position: relative;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(5, 24, 40, .88), rgba(5, 24, 40, .35));
    overflow: hidden;
}

.inner-hero {
    position: relative;
    z-index: 2;
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    padding: 74px 0 86px;
}

.inner-hero p,
.detail-hero-content p {
    margin: 0 0 10px;
    color: rgba(255,255,255,.86);
}

.inner-hero h1,
.detail-hero h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1;
}

.accom-page,
.detail-page {
    background: linear-gradient(180deg, #f6f9fc 0, #fff 380px);
}

.accom-list {
    padding: 44px 0 64px;
}

.accommodation-results {
    position: relative;
    min-height: 320px;
}

.accommodation-results-inner {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease;
}

.accommodation-results.is-swapping .accommodation-results-inner {
    opacity: 0;
    transform: translateY(8px);
}

.accommodation-results.is-ready .accommodation-results-inner {
    animation: resultFadeIn 260ms ease both;
}

.accommodation-loader {
    position: absolute;
    inset: 72px 0 auto;
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(320px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 24px;
    border: 1px solid rgba(199,149,74,.28);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, rgba(3, 16, 30, .92), rgba(8, 38, 65, .88));
    box-shadow: 0 24px 58px rgba(21,42,65,.22);
    text-align: center;
    font-weight: 800;
}

.accommodation-loader .moon-loader-orb {
    width: 44px;
    height: 44px;
}

.accommodation-loader .moon-loader-orb::after {
    width: 44px;
    height: 44px;
    background: #082943;
}

.filter-error {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(199,149,74,.35);
    border-radius: 10px;
    color: #6c4a12;
    background: #fff8ea;
    font-weight: 800;
}

@keyframes resultFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accom-list .section-row p {
    margin: 6px 0 0;
    color: var(--muted);
}

.zone-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 8px;
}

.zone-filter-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 61, 62, .12);
    border-radius: 999px;
    color: #244157;
    background: rgba(255,255,255,.82);
    box-shadow: 0 10px 24px rgba(21, 42, 65, .07);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.zone-filter-btn:hover,
.zone-filter-btn:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(44, 130, 216, .35);
    box-shadow: 0 14px 28px rgba(21, 42, 65, .12);
    outline: none;
}

.zone-filter-btn.active {
    color: #fff;
    border-color: rgba(255,255,255,.28);
    background: linear-gradient(135deg, var(--teal), var(--blue-dark));
    box-shadow: 0 16px 32px rgba(31, 101, 185, .22);
}

.zone-filter-btn > span:not(.zone-icon) {
    flex: 1;
    text-align: left;
    font-weight: 800;
}

.zone-filter-btn b {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--teal);
    background: #eef6f5;
    font-size: 13px;
}

.zone-filter-btn.active b {
    color: var(--navy);
    background: #fff;
}

.zone-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    color: var(--blue-dark);
    background: #edf6ff;
}

.zone-filter-btn.active .zone-icon {
    color: var(--teal);
    background: rgba(255,255,255,.92);
}

.zone-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hotel-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 24px;
}

.hotel-card,
.info-card,
.policy-card,
.mini-stay-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(21,42,65,.08);
}

.hotel-card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.hotel-card.filter-hidden {
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
}

.filter-empty {
    margin-top: 22px;
    padding: 22px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--muted);
    background: #fff;
    text-align: center;
}

.hotel-card-image {
    position: relative;
    display: block;
}

.hotel-card-image img {
    width: 100%;
    height: 235px;
    object-fit: cover;
}

.hotel-card-image span,
.zone-pill,
.mini-stay-card span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    color: #fff;
    background: var(--gold);
    font-size: 13px;
    font-weight: 800;
}

.hotel-card-image span {
    position: absolute;
    left: 14px;
    top: 14px;
}

.hotel-card-body {
    padding: 18px;
}

.hotel-card-body h3 {
    margin: 0 0 8px;
    font-size: 23px;
}

.card-highlight {
    min-height: 52px;
    margin: 0 0 14px;
    color: var(--muted);
}

.card-meta,
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.card-meta span,
.hero-facts span {
    padding: 7px 10px;
    border-radius: 6px;
    background: #f1f6fb;
    color: #28435f;
    font-size: 14px;
}

.rate-price {
    margin: 16px 0 0;
    color: var(--navy);
    font-size: 24px;
    font-weight: 900;
}

.price-note {
    margin: 2px 0 16px;
    color: var(--muted);
    font-size: 13px;
}

.detail-hero {
    position: relative;
    min-height: 560px;
    color: #fff;
    background-position: center;
    background-size: cover;
}

.detail-hero-content {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    padding: 48px 380px 76px 0;
}

.breadcrumbs {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 42px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
}

.zone-pill {
    margin-bottom: 14px;
}

.detail-hero h1 {
    margin-bottom: 12px;
}

.detail-hero-content > p {
    max-width: 650px;
    font-size: 22px;
}

.hero-facts {
    margin: 22px 0 28px;
}

.hero-facts span {
    background: rgba(255,255,255,.12);
    color: #fff;
    backdrop-filter: blur(8px);
}

.price-panel {
    position: absolute;
    right: max(32px, calc((100% - 1160px) / 2));
    top: 180px;
    width: 300px;
    padding: 26px;
    color: var(--ink);
    background: rgba(255,255,255,.96);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

.price-panel span,
.price-panel small {
    display: block;
    color: var(--muted);
}

.price-panel strong {
    display: block;
    margin: 4px 0;
    color: var(--navy);
    font-size: 30px;
}

.price-panel .btn {
    margin-top: 18px;
}

.quick-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    transform: translateY(-34px);
    gap: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
}

.quick-facts div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 2px 10px;
    align-items: center;
    min-width: 0;
    padding: 16px;
    border-right: 1px solid var(--line);
}

.quick-facts div:last-child {
    border-right: 0;
}

.quick-facts strong,
.quick-facts span {
    display: block;
}

.quick-fact-icon {
    grid-row: span 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff !important;
    background: linear-gradient(180deg, var(--gold), #b8792d);
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(199,149,74,.18);
}

.quick-facts strong {
    color: var(--navy);
    min-width: 0;
    font-size: 16px;
    line-height: 1.25;
}

.quick-facts span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.detail-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr);
    gap: 28px;
    padding-bottom: 28px;
}

.detail-intro h2,
.album h2,
.amenities h2,
.policies h2,
.related h2,
.map-callout h2 {
    margin-bottom: 12px;
}

.detail-intro p {
    color: #40566f;
    font-size: 18px;
}

.check-list {
    padding: 0;
    margin: 18px 0 0;
    list-style: none;
}

.check-list li {
    margin-top: 8px;
    color: #31485f;
}

.check-list li::before {
    content: "✓";
    margin-right: 9px;
    color: var(--gold);
    font-weight: 900;
}

.info-card {
    padding: 22px;
}

.info-card h3 {
    margin: 0 0 12px;
}

.info-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 18px;
}

.info-card dt {
    color: var(--muted);
    font-size: 13px;
}

.info-card dd {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
}

.album,
.map-callout,
.amenities,
.policies,
.related {
    padding: 28px 0;
}

.album-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 12px;
}

.album-main img,
.album-thumbs img {
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.album-main img {
    height: 380px;
}

.album-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.album-thumbs img {
    height: 184px;
}

.map-callout {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 28px;
    align-items: center;
}

.map-callout img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(21,42,65,.1);
}

.map-callout p {
    color: var(--muted);
}

.amenity-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.amenity-grid div {
    padding: 16px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 18px rgba(21,42,65,.05);
}

.policy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.policy-card {
    padding: 18px;
}

.policy-card h3 {
    margin: 0 0 10px;
    color: var(--navy);
}

.policy-card ul {
    padding-left: 18px;
    margin: 0;
    color: #425870;
}

.policy-card li + li {
    margin-top: 6px;
}

.stay-policy-head p {
    margin: 6px 0 18px;
    color: var(--muted);
}

.stay-summary-card {
    border-color: rgba(199,149,74,.34);
    background: linear-gradient(180deg, #fff, #fffaf1);
}

.stay-summary-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.stay-summary-list div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(219,229,238,.8);
}

.stay-summary-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.stay-summary-list dt {
    color: var(--muted);
    font-weight: 700;
}

.stay-summary-list dd {
    margin: 0;
    color: var(--navy);
    font-weight: 800;
    text-align: right;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.mini-stay-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.mini-stay-card div {
    padding: 14px;
}

.mini-stay-card span {
    padding: 4px 9px;
    color: var(--navy);
    background: #f2d9ae;
}

.mini-stay-card h3 {
    margin: 9px 0 6px;
    font-size: 18px;
}

.mini-stay-card p {
    margin: 0 0 8px;
    color: var(--muted);
}

.booking-bar {
    position: sticky;
    bottom: 0;
    z-index: 9;
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px max(24px, calc((100% - 1160px) / 2));
    color: #fff;
    background: var(--navy);
    box-shadow: 0 -16px 35px rgba(0,0,0,.16);
}

.booking-bar strong,
.booking-bar span {
    display: block;
}

.booking-bar span {
    color: rgba(255,255,255,.72);
}

@media (max-width: 980px) {
    .hotel-card-grid,
    .policy-grid,
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .zone-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-hero-content {
        padding-right: 0;
    }

    .price-panel {
        position: static;
        width: min(1160px, calc(100% - 48px));
        margin: -42px auto 0;
    }

    .detail-intro,
    .album-grid,
    .map-callout,
    .booking-bar {
        grid-template-columns: 1fr;
    }

    .quick-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        transform: none;
        margin-top: 24px;
    }

    .quick-facts div {
        padding: 12px;
    }

    .quick-facts strong {
        font-size: 14px;
    }

    .detail-page {
        display: flex;
        flex-direction: column;
    }

    .quick-facts {
        order: 1;
    }

    .detail-intro {
        order: 2;
    }

    .detail-map-section {
        order: 3;
    }

    .album {
        order: 4;
    }

    .related {
        order: 5;
    }

    .policies {
        order: 6;
    }

    .amenity-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .inner-hero,
    .detail-hero-content {
        width: min(100% - 28px, 1160px);
    }

    .hotel-card-grid,
    .policy-grid,
    .related-grid,
    .amenity-grid {
        grid-template-columns: 1fr;
    }

    .quick-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    .quick-facts div {
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 18px rgba(21,42,65,.06);
    }

    .quick-facts div:last-child {
        border-right: 1px solid var(--line);
    }

    .zone-filter {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
    }

    .zone-filter-btn {
        min-width: 178px;
        scroll-snap-align: start;
    }

    .accommodation-loader {
        position: sticky;
        top: 18px;
    }

    .album-main img,
    .album-thumbs img {
        height: 220px;
    }

    .album-thumbs {
        grid-template-columns: 1fr;
    }

    .booking-bar {
        position: static;
        padding: 18px;
    }
}