/**
 * ═══════════════════════════════════════════════════════════════════════════
 * TOURWILL — ACCOMMODATION LANDING PAGE
 * Mobile-first stylesheet (matches the dlp- token system)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Design tokens are reused from the existing theme:
 *   --color-primary : #134e4a   (deep teal)
 *   --color-accent  : #eab308   (warm gold)
 * Local fallbacks are declared below so this file works in isolation.
 * ═══════════════════════════════════════════════════════════════════════════
 */

:root {
    --acc-primary:       var(--color-primary, #134e4a);
    --acc-primary-dark:  #0d3a35;
    --acc-primary-deep:  #062322;
    --acc-accent:        var(--color-accent, #eab308);
    --acc-accent-dark:   #ca8a04;
    /* Headings use the same forest-dark used across the homepage
       (--fpd-heading on front-page-destinations.css). Body text keeps
       the slate-ink for readable copy. */
    --acc-ink:           var(--color-forest-dark, #07261C);
    --acc-ink-body:      #334155;
    --acc-ink-soft:      #475569;
    --acc-muted:         #5f6b6a;
    /* Subtle teal used for in-card title hover and section title accents */
    --acc-heading-accent: var(--color-primary, #134e4a);
    --acc-line:          #e5e7eb;
    --acc-line-soft:     #eef0ee;
    --acc-bg-page:       #f8f8f6;
    --acc-bg-card:       #ffffff;
    --acc-radius-sm:     12px;
    --acc-radius:        18px;
    --acc-radius-lg:     24px;
    --acc-shadow-sm:     0 2px 8px rgba(15, 23, 42, .06);
    --acc-shadow:        0 12px 36px rgba(15, 23, 42, .08);
    --acc-shadow-lg:     0 20px 60px rgba(15, 23, 42, .12);
    --acc-ease:          cubic-bezier(.4, 0, .2, 1);
    /* ── Typography ──
       Matches the theme's canonical 3-font system (Inter / Playfair Display / Caveat)
       used by the About, Home-Hero, DLP and Footer-Plus components.
       Same fallback order is used everywhere so visual rhythm stays consistent
       even when the brand fonts haven't loaded yet. */
    --acc-font-sans:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --acc-font-serif:    "Playfair Display", Georgia, "Times New Roman", serif;
    --acc-font-script:   "Caveat", "Brush Script MT", cursive;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 1. BASE
 * ═════════════════════════════════════════════════════════════════════════ */

.acc-main {
    background: var(--acc-bg-page);
    color: var(--acc-ink-body);
    overflow-x: hidden;
    line-height: 1.55;
    font-family: var(--acc-font-sans);
}
.acc-main *,
.acc-main *::before,
.acc-main *::after { box-sizing: border-box; }

.acc-section {
    padding: 56px 0;
    position: relative;
}
.acc-section--categories { padding-top: 64px; padding-bottom: 24px; }
.acc-section--collections { padding-top: 32px; padding-bottom: 32px; }
.acc-section--hotels { padding-top: 40px; padding-bottom: 56px; }
.acc-section--philosophy { padding: 24px 0; }
.acc-section--final-cta { padding: 24px 0 80px; }

.acc-section__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.acc-section__head {
    /* Always stacks: title row, then description below. Keeps the layout
       readable on every viewport — no side-by-side title/description.
       The `--withFilters` variant (Hotels section) overrides this back
       to row layout at desktop so its filter dropdowns can sit on the
       right of the title block. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
}
.acc-section__heading {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
}
.acc-section__title {
    font-family: var(--acc-font-serif);
    /* Tighter mobile minimum + slightly stronger fluid scaling so the
       title never overflows on a 360px phone. */
    font-size: clamp(22px, 5.6vw, 38px);
    font-weight: 700;
    line-height: 1.18;
    color: var(--acc-ink);
    margin: 0;
    letter-spacing: -.01em;
    /* Wrap aggressively rather than overflow horizontally. */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.acc-section__desc {
    color: var(--acc-muted);
    font-size: 15px;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0;
    width: 100%;
}
/* Hotels section (has filter dropdowns) — at desktop only, lay out the
   heading block on the left and the filters block on the right. The
   description still sits directly under the title inside the heading
   block, so it's never "in front of" the title. */
.acc-section__head--withFilters {
    align-items: flex-start;
}
@media (min-width: 900px) {
    .acc-section__head--withFilters {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
    }
    .acc-section__head--withFilters .acc-section__heading {
        flex: 1 1 auto;
        width: auto;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
 * 2. BUTTONS (shared)
 * ═════════════════════════════════════════════════════════════════════════ */

.acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.2;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform .25s var(--acc-ease), background .25s var(--acc-ease), color .25s var(--acc-ease), box-shadow .25s var(--acc-ease);
    /* Mobile-first: let long labels wrap inside the button instead of pushing the
       button wider than the screen. We re-enable nowrap on tablet and up. */
    white-space: normal;
    text-align: center;
    max-width: 100%;
    letter-spacing: .005em;
}
@media (min-width: 600px) {
    .acc-btn { white-space: nowrap; }
}
.acc-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.acc-btn--primary {
    background: var(--acc-accent);
    color: var(--acc-primary-deep);
    box-shadow: 0 8px 20px rgba(234, 179, 8, .28);
}
.acc-btn--primary:hover {
    background: var(--acc-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(234, 179, 8, .35);
}

.acc-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(6px);
}
.acc-btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    transform: translateY(-2px);
}

.acc-btn--outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .45);
}
.acc-btn--outline:hover {
    background: rgba(255, 255, 255, .08);
    border-color: #fff;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 3. HERO
 * ═════════════════════════════════════════════════════════════════════════ */

.acc-hero {
    position: relative;
    min-height: 540px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.acc-hero__bg { position: absolute; inset: 0; z-index: -1; }
.acc-hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center right;
}
.acc-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        90deg,
        rgba(6, 35, 34, .92) 0%,
        rgba(6, 35, 34, .72) 35%,
        rgba(6, 35, 34, .35) 65%,
        rgba(6, 35, 34, .15) 100%
    );
}
@media (max-width: 768px) {
    .acc-hero__overlay {
        background: linear-gradient(
            180deg,
            rgba(6, 35, 34, .55) 0%,
            rgba(6, 35, 34, .82) 60%,
            rgba(6, 35, 34, .92) 100%
        );
    }
}

.acc-hero__inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    /* Mobile-first: clear the fixed navbar pill (matches home-hero pattern). */
    padding: 130px 20px 60px;
    min-height: 540px;
    display: flex;
    align-items: center;
}
@media (min-width: 1024px) {
    .acc-hero__inner {
        padding: 110px 24px 64px;
    }
}
.acc-hero__content {
    max-width: 620px;
    position: relative;
    z-index: 2;
}

.acc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--acc-accent);
    font-family: var(--acc-font-script);
    font-style: italic;
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.2;
}
.acc-hero__eyebrow-leaf { width: 22px; height: 22px; flex-shrink: 0; }

.acc-hero__heading {
    font-family: var(--acc-font-serif);
    font-size: clamp(32px, 6.2vw, 60px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.01em;
    margin: 0 0 18px;
    color: #fff;
}
.acc-hero__heading-accent {
    color: var(--acc-accent);
    display: block;
    font-style: italic;
}

.acc-hero__desc {
    font-size: clamp(14px, 1.7vw, 16px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
    max-width: 52ch;
    margin: 0 0 28px;
}

.acc-hero__ctas {
    /* Mobile-first: stack the buttons vertically but DON'T stretch them
       edge-to-edge. They get auto-width based on their content + the
       trimmed mobile padding (see the small-viewport override below). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.acc-hero__ctas .acc-btn { width: auto; max-width: 100%; }
@media (min-width: 600px) {
    .acc-hero__ctas {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }
}

/* Floating glass tags */
.acc-hero__tags {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
    display: none;
}
@media (min-width: 1024px) {
    .acc-hero__tags { display: block; }
}
.acc-hero__tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(13, 58, 53, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(234, 179, 8, .35);
    color: var(--acc-accent);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .01em;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    pointer-events: auto;
    animation: acc-float 6s ease-in-out infinite;
}
.acc-hero__tag-icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; }
.acc-hero__tag-icon svg { width: 100%; height: 100%; }

/* Positions are measured from the top of the hero. The navbar pill covers
   the top ~110px on desktop, so we keep the first tag well below that. */
.acc-hero__tag--1 { top: 22%; right: 12%; animation-delay: 0s; }
.acc-hero__tag--2 { top: 38%; right: 28%; animation-delay: 1.4s; }
.acc-hero__tag--3 { top: 56%; right: 6%;  animation-delay: 2.8s; }
.acc-hero__tag--4 { top: 72%; right: 30%; animation-delay: 4.2s; }

@keyframes acc-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ═════════════════════════════════════════════════════════════════════════
 * 4. CATEGORIES
 * ═════════════════════════════════════════════════════════════════════════ */

.acc-cats { position: relative; }
.acc-cats__swiper {
    overflow: hidden;
    padding: 4px 4px 8px;
    margin: 0 -4px;
}
.acc-cats__swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.acc-cat-card {
    background: var(--acc-bg-card);
    border-radius: var(--acc-radius);
    padding: 22px 18px;
    text-align: center;
    border: 1px solid var(--acc-line-soft);
    transition: transform .3s var(--acc-ease), box-shadow .3s var(--acc-ease), border-color .3s var(--acc-ease);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.acc-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--acc-shadow);
    border-color: rgba(234, 179, 8, .35);
}
.acc-cat-card__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.acc-cat-card__icon {
    color: var(--acc-accent);
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.acc-cat-card__icon svg { width: 100%; height: 100%; }
.acc-cat-card__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.acc-cat-card__title {
    font-family: var(--acc-font-serif);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--acc-ink);
    margin: 0 0 6px;
    line-height: 1.25;
}
.acc-cat-card__desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--acc-muted);
    margin: 0 0 12px;
    flex-grow: 1;
}
.acc-cat-card__count {
    font-size: 12px;
    color: var(--acc-muted);
    font-weight: 500;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--acc-line-soft);
    width: 100%;
}

.acc-cats__nav {
    display: none;
    position: absolute;
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--acc-bg-card);
    border: 1px solid var(--acc-line);
    color: var(--acc-ink-soft);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: background .25s var(--acc-ease), color .25s var(--acc-ease), transform .25s var(--acc-ease);
    box-shadow: var(--acc-shadow-sm);
}
.acc-cats__nav:hover {
    background: var(--acc-primary);
    color: #fff;
    border-color: var(--acc-primary);
}
.acc-cats__nav.is-disabled { opacity: .4; cursor: not-allowed; }
.acc-cats__nav svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
    .acc-cats__nav { display: inline-flex; }
}

/* ═════════════════════════════════════════════════════════════════════════
 * 5. COLLECTIONS
 * ═════════════════════════════════════════════════════════════════════════ */

.acc-cols { position: relative; }
.acc-cols__swiper {
    overflow: hidden;
    padding: 4px 4px 8px;
    margin: 0 -4px;
}
.acc-cols__swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.acc-col-card {
    position: relative;
    border-radius: var(--acc-radius);
    overflow: hidden;
    background: var(--acc-primary-deep);
    color: #fff;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    transition: transform .35s var(--acc-ease), box-shadow .35s var(--acc-ease);
}
.acc-col-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--acc-shadow-lg);
}
.acc-col-card__link {
    position: absolute;
    inset: 0;
    color: inherit;
    text-decoration: none;
    z-index: 2;
}
.acc-col-card__media {
    position: absolute; inset: 0;
    margin: 0;
    z-index: 0;
}
.acc-col-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--acc-ease);
}
.acc-col-card:hover .acc-col-card__media img { transform: scale(1.05); }
.acc-col-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        180deg,
        rgba(6, 35, 34, 0) 30%,
        rgba(6, 35, 34, .55) 60%,
        rgba(6, 35, 34, .92) 100%
    );
}
.acc-col-card__heart {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background .25s var(--acc-ease);
}
.acc-col-card__heart:hover { background: rgba(255, 255, 255, .3); }
.acc-col-card__heart svg { width: 16px; height: 16px; }

.acc-col-card__body {
    position: relative;
    z-index: 2;
    padding: 20px 20px 22px;
    width: 100%;
}
.acc-col-card__title {
    font-family: var(--acc-font-serif);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.acc-col-card__desc {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 12px;
}
.acc-col-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 14px;
}
.acc-col-card__badge svg { width: 12px; height: 12px; }
.acc-col-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--acc-accent);
    font-size: 13.5px;
    font-weight: 600;
    transition: gap .25s var(--acc-ease);
}
.acc-col-card:hover .acc-col-card__cta { gap: 10px; }
.acc-col-card__cta svg { width: 14px; height: 14px; }

.acc-cols__nav {
    display: none;
    position: absolute;
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--acc-bg-card);
    border: 1px solid var(--acc-line);
    color: var(--acc-ink-soft);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: background .25s var(--acc-ease), color .25s var(--acc-ease);
    box-shadow: var(--acc-shadow-sm);
}
.acc-cols__nav:hover {
    background: var(--acc-primary);
    color: #fff;
    border-color: var(--acc-primary);
}
.acc-cols__nav.is-disabled { opacity: .4; cursor: not-allowed; }
.acc-cols__nav svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
    .acc-cols__nav { display: inline-flex; }
}

/* ═════════════════════════════════════════════════════════════════════════
 * 6. FILTER BAR
 * ═════════════════════════════════════════════════════════════════════════ */

.acc-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    align-items: stretch;
}
@media (min-width: 1024px) {
    .acc-filters {
        margin-top: 0;
        align-self: flex-end;
    }
}

.acc-filters__field {
    position: relative;
    flex: 1 1 0;
    min-width: 140px;
}
.acc-filters__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.acc-filters__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--acc-bg-card);
    border: 1px solid var(--acc-line);
    border-radius: 10px;
    padding: 11px 38px 11px 16px;
    font-size: 14px;
    color: var(--acc-ink);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .25s var(--acc-ease), box-shadow .25s var(--acc-ease);
}
.acc-filters__select:hover { border-color: var(--acc-primary); }
.acc-filters__select:focus {
    outline: none;
    border-color: var(--acc-primary);
    box-shadow: 0 0 0 3px rgba(19, 78, 74, .12);
}
.acc-filters__chev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--acc-ink-soft);
    pointer-events: none;
}
.acc-filters__reset {
    background: transparent;
    border: 1px solid var(--acc-line);
    border-radius: 10px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    color: var(--acc-ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s var(--acc-ease), color .25s var(--acc-ease), border-color .25s var(--acc-ease);
    flex-shrink: 0;
}
.acc-filters__reset:hover {
    background: var(--acc-primary);
    border-color: var(--acc-primary);
    color: #fff;
}
.acc-filters__reset svg { width: 16px; height: 16px; }

/* ═════════════════════════════════════════════════════════════════════════
 * 7. HOTEL GRID + CARD
 * ═════════════════════════════════════════════════════════════════════════ */

.acc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 28px;
}
@media (min-width: 600px) { .acc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .acc-grid { grid-template-columns: repeat(4, 1fr); } }

.acc-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--acc-bg-card);
    border: 1px dashed var(--acc-line);
    border-radius: var(--acc-radius);
    color: var(--acc-muted);
}
.acc-grid__nomatch {
    text-align: center;
    margin-top: 32px;
    color: var(--acc-muted);
}
.acc-grid__nomatch-reset {
    background: none;
    border: 0;
    color: var(--acc-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.acc-card {
    background: var(--acc-bg-card);
    border-radius: var(--acc-radius);
    overflow: hidden;
    border: 1px solid var(--acc-line-soft);
    transition: transform .3s var(--acc-ease), box-shadow .3s var(--acc-ease);
    display: flex;
    flex-direction: column;
}
.acc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--acc-shadow);
}
.acc-card[hidden] { display: none !important; }

.acc-card__media {
    position: relative;
    aspect-ratio: 16 / 11;
    margin: 0;
    overflow: hidden;
    background: var(--acc-line-soft);
}
.acc-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s var(--acc-ease);
}
.acc-card:hover .acc-card__media img { transform: scale(1.04); }
.acc-card__media-link { position: absolute; inset: 0; }

.acc-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(13, 58, 53, .9);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    letter-spacing: .02em;
    z-index: 2;
    backdrop-filter: blur(4px);
}

.acc-card__heart {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0;
    color: var(--acc-ink-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .25s var(--acc-ease), color .25s var(--acc-ease), transform .25s var(--acc-ease);
}
.acc-card__heart:hover { background: #fff; color: #d33; transform: scale(1.08); }
.acc-card__heart:focus-visible {
    outline: 2px solid var(--acc-accent);
    outline-offset: 2px;
}
.acc-card__heart svg {
    width: 18px;
    height: 18px;
    transition: fill .2s var(--acc-ease), stroke .2s var(--acc-ease);
}
/* Active/saved state — filled red heart */
.acc-card__heart.is-active {
    background: #fff;
    color: #e11d48;
}
.acc-card__heart.is-active svg {
    fill: #e11d48;
    stroke: #e11d48;
}
/* Bounce animation when saved */
.acc-card__heart.is-bouncing { animation: acc-heart-bounce .42s var(--acc-ease); }
@keyframes acc-heart-bounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(.92); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .acc-card__heart.is-bouncing { animation: none; }
}

.acc-card__body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}
.acc-card__title {
    font-family: var(--acc-font-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: var(--acc-ink);
}
.acc-card__title a { color: inherit; text-decoration: none; transition: color .2s var(--acc-ease); }
.acc-card__title a:hover { color: var(--acc-primary); opacity: 1; }

.acc-card__loc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--acc-muted);
    font-size: 12.5px;
    margin: 0;
}
.acc-card__loc svg { width: 12px; height: 12px; color: var(--acc-accent); flex-shrink: 0; }

.acc-card__desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--acc-ink-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.acc-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.acc-card__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--acc-accent);
}
.acc-card__star { width: 14px; height: 14px; }
.acc-card__rating-num {
    font-size: 12px;
    color: var(--acc-muted);
    font-weight: 500;
    margin-left: 2px;
}

.acc-card__amenities {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}
.acc-card__amenity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--acc-ink-soft);
    line-height: 1;
}
.acc-card__amenity-icon { width: 13px; height: 13px; color: var(--acc-ink-soft); display: inline-flex; }
.acc-card__amenity-icon svg { width: 100%; height: 100%; }

.acc-card__styles {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.acc-card__style {
    background: var(--acc-bg-page);
    border: 1px solid var(--acc-line-soft);
    color: var(--acc-ink-soft);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: .01em;
}

.acc-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--acc-accent);
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    text-decoration: none;
    transition: gap .25s var(--acc-ease);
    padding-top: 8px;
    border-top: 1px solid var(--acc-line-soft);
}
.acc-card__cta:hover { gap: 9px; opacity: 1; }
.acc-card__cta svg { width: 13px; height: 13px; }

/* ═════════════════════════════════════════════════════════════════════════
 * 8. PHILOSOPHY
 * ═════════════════════════════════════════════════════════════════════════ */

.acc-phil {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--acc-bg-card);
    border-radius: var(--acc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--acc-line-soft);
}
@media (min-width: 900px) {
    .acc-phil { grid-template-columns: minmax(240px, 320px) 1fr; }
}

.acc-phil__media { margin: 0; min-height: 220px; }
.acc-phil__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    min-height: 220px;
}

.acc-phil__content {
    padding: 28px 24px 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
@media (min-width: 1100px) {
    .acc-phil__content {
        grid-template-columns: minmax(220px, 1fr) 1.4fr;
        padding: 40px;
        gap: 40px;
    }
}

.acc-phil__eyebrow {
    display: inline-block;
    color: var(--acc-accent);
    font-family: var(--acc-font-script);
    font-style: italic;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 8px;
}
.acc-phil__heading {
    font-family: var(--acc-font-serif);
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--acc-ink);
    margin: 0 0 12px;
    letter-spacing: -.005em;
}
.acc-phil__desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--acc-muted);
    margin: 0;
}

.acc-phil__highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 600px) {
    .acc-phil__highlights { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
}
.acc-phil__highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.acc-phil__highlight-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--acc-bg-page);
    color: var(--acc-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.acc-phil__highlight-icon svg { width: 16px; height: 16px; }
.acc-phil__highlight-title {
    font-family: var(--acc-font-serif);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--acc-ink);
    margin: 0 0 4px;
}
.acc-phil__highlight-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--acc-muted);
    margin: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 9. FINAL CTA
 * ═════════════════════════════════════════════════════════════════════════ */

.acc-cta {
    background: linear-gradient(135deg, var(--acc-primary) 0%, var(--acc-primary-dark) 60%, var(--acc-primary-deep) 100%);
    color: #fff;
    border-radius: var(--acc-radius-lg);
    padding: 32px 24px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
    isolation: isolate;
}
@media (min-width: 900px) {
    .acc-cta {
        grid-template-columns: 1.4fr 1fr;
        padding: 44px 56px;
    }
}

.acc-cta__leaf {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 90px;
    height: auto;
    color: rgba(234, 179, 8, .18);
    z-index: 0;
    display: none;
}
@media (min-width: 900px) {
    .acc-cta__leaf { display: block; left: -10px; width: 120px; }
}

.acc-cta__content { position: relative; z-index: 1; }
.acc-cta__heading {
    font-family: var(--acc-font-serif);
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -.005em;
}
.acc-cta__desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 18px;
    max-width: 50ch;
}

.acc-cta__supports {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 600px) {
    .acc-cta__supports { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
.acc-cta__support {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.acc-cta__support-icon {
    flex-shrink: 0;
    color: var(--acc-accent);
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.acc-cta__support-icon svg { width: 100%; height: 100%; }
.acc-cta__support-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 2px;
}
.acc-cta__support-text {
    display: block;
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .7);
}

.acc-cta__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}
@media (min-width: 600px) and (max-width: 899px) {
    .acc-cta__buttons { flex-direction: row; }
}

/* ═════════════════════════════════════════════════════════════════════════
 * 10. SWIPER OVERRIDES (use generic Swiper from theme)
 * ═════════════════════════════════════════════════════════════════════════ */

.acc-cats__swiper .swiper-slide,
.acc-cols__swiper .swiper-slide {
    height: auto;
    width: 75%;
    max-width: 280px;
}
@media (min-width: 600px) {
    .acc-cats__swiper .swiper-slide { width: 200px; }
    .acc-cols__swiper .swiper-slide { width: 320px; }
}
@media (min-width: 1024px) {
    .acc-cats__swiper .swiper-slide { width: calc((100% - 6 * 12px) / 7); max-width: none; }
    .acc-cols__swiper .swiper-slide { width: calc((100% - 3 * 16px) / 4); max-width: none; }
}

/* Hide native scrollbar inside swiper for safety */
.acc-cats__swiper,
.acc-cols__swiper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.acc-cats__swiper::-webkit-scrollbar,
.acc-cols__swiper::-webkit-scrollbar { display: none; }

/* ═════════════════════════════════════════════════════════════════════════
 * 11. RESPONSIVE TWEAKS
 * ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 599px) {
    .acc-hero { min-height: 560px; }
    /* Keep generous top padding so the navbar pill never overlaps the eyebrow.
       (Was 64px before — that put the eyebrow right under the nav.) */
    .acc-hero__inner { padding: 140px 20px 56px; min-height: 560px; }
    .acc-hero__heading { font-size: clamp(28px, 8vw, 36px); }

    /* Buttons: narrower than full-width, comfortably tappable. Padding
       is trimmed so labels like "Plan a Tailor-Made Tour" fit at a
       reasonable button width without spanning edge-to-edge. */
    .acc-hero__ctas .acc-btn {
        width: auto;
        align-self: flex-start;
        max-width: 100%;
        padding: 12px 18px;
        font-size: 14px;
    }

    .acc-section { padding: 40px 0; }
    .acc-section__head { margin-bottom: 18px; gap: 8px; }
    .acc-section__desc { font-size: 14px; }

    /* Stack the filter dropdowns vertically below 480px so each option
       label ("All Star Ratings", "4.5 Stars & up") gets full width and
       never truncates inside its select box. */
    .acc-filters { width: 100%; }
    .acc-filters__field { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .acc-filters__reset { flex: 0 0 42px; }

    .acc-cta { padding: 28px 22px; }
}

/* Extra-small phones — give each filter dropdown its own row so option
   text is never clipped. */
@media (max-width: 479px) {
    .acc-filters { flex-direction: column; }
    .acc-filters__field { flex: 1 1 100%; }
    .acc-filters__reset { width: 100%; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .acc-hero__tag,
    .acc-card,
    .acc-cat-card,
    .acc-col-card,
    .acc-col-card__media img,
    .acc-card__media img {
        animation: none !important;
        transition: none !important;
    }
}