/* ============================================================
   MFALME LUXURY LIVING — BUTTONS, CARDS & COMPONENTS
   ============================================================ */

/* ============================================================
   CURRENCY SELECTOR
   ============================================================ */
.currency-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.currency-select-wrap .bi {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-strong);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}

.currency-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    background: var(--mfalme-white);
    padding: 0.45rem 2rem 0.45rem 2.05rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 1.3;
    transition: border-color var(--speed-fast) ease, box-shadow var(--speed-fast) ease,
                color var(--speed-fast) ease, background-color var(--speed-fast) ease;
}

.currency-select:hover {
    border-color: var(--mfalme-gold);
}

.currency-select:focus-visible {
    outline: 2px solid var(--mfalme-gold-dark);
    outline-offset: 2px;
}

.currency-select-wrap::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-65%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    pointer-events: none;
}

/* --- Header (desktop) variant: hidden on mobile, adapts to nav state --- */
.nav-currency {
    display: none;
}

.nav-currency .currency-select {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.site-header.is-transparent .nav-currency .currency-select {
    background: rgba(248, 245, 239, 0.08);
    color: var(--text-on-dark);
    border-color: rgba(248, 245, 239, 0.5);
}

.site-header.is-transparent .nav-currency .currency-select:hover {
    border-color: var(--mfalme-gold-light);
}

.site-header.is-scrolled .nav-currency .currency-select {
    background: var(--mfalme-white);
    color: var(--ink-soft);
    border-color: var(--hairline);
}

/* --- Offcanvas (mobile) variant: light-on-dark --- */
.offcanvas-currency {
    display: flex;
    width: 100%;
    margin-bottom: 1.5rem;
}

.offcanvas-currency .currency-select {
    flex: 1;
    width: 100%;
    background: rgba(248, 245, 239, 0.06);
    color: var(--text-on-dark);
    border-color: var(--hairline-dark);
}

.offcanvas-currency .currency-select::placeholder {
    color: var(--text-on-dark-muted);
}

.offcanvas-currency .currency-select:hover {
    border-color: var(--mfalme-gold);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-padding-x: 1.7rem;
    --bs-btn-font-size: var(--text-small);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--radius-pill);
    --bs-btn-letter-spacing: 0.05em;
    --bs-btn-transition: color var(--speed-fast) ease, background-color var(--speed-fast) ease,
                         border-color var(--speed-fast) ease, box-shadow var(--speed-fast) ease,
                         transform var(--speed-fast) ease;
    text-transform: none;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.btn-lg {
    --bs-btn-padding-y: 0.95rem;
    --bs-btn-padding-x: 2.2rem;
    font-size: 0.92rem;
}

.btn-block {
    width: 100%;
    display: flex;
}

/* Gold — the brand CTA */
.btn-gold {
    --bs-btn-color: #201a12;
    --bs-btn-bg: var(--mfalme-gold);
    --bs-btn-border-color: var(--mfalme-gold);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mfalme-gold-dark);
    --bs-btn-hover-border-color: var(--mfalme-gold-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mfalme-gold-dark);
    --bs-btn-active-border-color: var(--mfalme-gold-dark);
    --bs-btn-focus-shadow-rgb: 184, 155, 99;
    box-shadow: 0 10px 26px -14px rgba(159, 131, 80, 0.65);
}

.btn-gold:hover {
    box-shadow: 0 14px 30px -14px rgba(104, 82, 42, 0.55);
    transform: translateY(-1px);
}

.btn-gold:active {
    transform: translateY(0);
}

/* Charcoal — secondary dark */
.btn-dark {
    --bs-btn-color: var(--text-on-dark);
    --bs-btn-bg: var(--mfalme-charcoal);
    --bs-btn-border-color: var(--mfalme-charcoal);
    --bs-btn-hover-color: var(--mfalme-white);
    --bs-btn-hover-bg: var(--mfalme-black);
    --bs-btn-hover-border-color: var(--mfalme-black);
    --bs-btn-active-color: var(--mfalme-white);
    --bs-btn-active-bg: var(--mfalme-black);
    --bs-btn-active-border-color: var(--mfalme-black);
}

/* Outline light (used over imagery) */
.btn-outline-light {
    --bs-btn-color: var(--text-on-dark);
    --bs-btn-border-color: rgba(248, 245, 239, 0.65);
    --bs-btn-hover-color: var(--mfalme-charcoal);
    --bs-btn-hover-bg: var(--text-on-dark);
    --bs-btn-hover-border-color: var(--text-on-dark);
    --bs-btn-active-color: var(--mfalme-charcoal);
    --bs-btn-active-bg: var(--text-on-dark);
    --bs-btn-active-border-color: var(--text-on-dark);
}

/* ============================================================
   CARD BASE (editorial, quietly customised)
   ============================================================ */
.mcard {
    background: var(--mfalme-white);
    border: 1px solid rgba(23, 20, 18, 0.07);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--speed-med) var(--ease-out), box-shadow var(--speed-med) var(--ease-out),
                border-color var(--speed-med) var(--ease-out);
}

.mcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(184, 155, 99, 0.4);
}

.mcard-media {
    position: relative;
    overflow: hidden;
}

.mcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out);
}

.mcard:hover .mcard-media img {
    transform: scale(1.06);
}

.mcard-body {
    padding: 1.35rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.mcard-footer {
    padding-top: 0.5rem;
    margin-top: auto;
}

/* ============================================================
   PROPERTY CARD
   ============================================================ */
.property-card .mcard-media {
    aspect-ratio: 4 / 3;
}

.property-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    background: rgba(248, 245, 239, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-pill);
}

.wishlist-btn {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: rgba(248, 245, 239, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: color var(--speed-fast) ease, background-color var(--speed-fast) ease,
                transform var(--speed-fast) ease;
}

.wishlist-btn:hover {
    transform: scale(1.08);
}

.wishlist-btn.is-active {
    color: #c0392b;
    background: var(--mfalme-white);
}

.wishlist-btn.is-active .bi {
    animation: heartPop 0.45s var(--ease-out);
}

.property-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: var(--weight-serif);
    line-height: 1.15;
    color: var(--ink);
    margin: 0;
}

.property-location {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-small);
    color: var(--text-muted);
}

.property-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: var(--text-small);
    color: var(--text-muted);
}

.property-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.property-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.property-rating .stars {
    color: var(--mfalme-gold);
    letter-spacing: 0.08em;
    /* mask partial via layered stars below */
}

.property-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--hairline);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.property-price {
    line-height: 1.3;
}

.property-price b {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: var(--weight-serif-bold);
    color: var(--ink);
}

.property-price span {
    font-size: var(--text-small);
    color: var(--text-muted);
}

.property-link,
.card-link {
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-strong);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.property-link i,
.card-link i {
    transition: transform var(--speed-fast) var(--ease-out);
}

.property-card:hover .property-link i,
.mcard:hover .card-link i {
    transform: translateX(4px);
}

/* ============================================================
   EXPERIENCE (IMAGE) CARD
   ============================================================ */
.experience-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 3 / 3.6;
    display: block;
    isolation: isolate;
}

.experience-card .exp-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.experience-card .exp-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out), filter var(--speed-med) ease;
}

.experience-card:hover .exp-media img {
    transform: scale(1.07);
}

.experience-card .exp-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(14, 13, 11, 0.06) 30%, rgba(10, 9, 8, 0.82) 86%);
    transition: background var(--speed-med) ease;
}

.experience-card:hover .exp-scrim {
    background: linear-gradient(180deg, rgba(14, 13, 11, 0.18) 30%, rgba(8, 7, 6, 0.9) 86%);
}

.exp-category {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-on-dark);
    background: rgba(14, 13, 11, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(248, 245, 239, 0.22);
}

.exp-price {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    font-size: 0.78rem;
    color: var(--text-on-dark);
    background: rgba(248, 245, 239, 0.92);
    color: var(--ink-soft);
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
}

.exp-price b {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--ink);
}

.exp-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.4rem 1.4rem 1.5rem;
    color: var(--text-on-dark);
}

.exp-title {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    font-weight: var(--weight-serif);
    line-height: 1.14;
    margin: 0 0 0.35rem;
}

.exp-location {
    font-size: var(--text-small);
    color: rgba(248, 245, 239, 0.82);
}

.exp-desc {
    display: block;
    margin-top: 0.45rem;
    font-size: var(--text-small);
    line-height: 1.5;
    color: rgba(248, 245, 239, 0.7);
}

.exp-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mfalme-gold-light);
}

.exp-link i {
    transition: transform var(--speed-fast) var(--ease-out);
}

.experience-card:hover .exp-link i {
    transform: translateX(4px);
}

/* Filter chip */
.filter-chip {
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius-pill);
    transition: color var(--speed-fast) ease, border-color var(--speed-fast) ease,
                background-color var(--speed-fast) ease;
}

.filter-chip:hover {
    border-color: var(--mfalme-gold);
    color: var(--accent-strong);
}

.filter-chip.active {
    background: var(--mfalme-charcoal);
    border-color: var(--mfalme-charcoal);
    color: var(--text-on-dark);
}

.experience-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}

/* ============================================================
   VEHICLE CARD
   ============================================================ */
.vehicle-card .mcard-media {
    aspect-ratio: 4 / 3;
    background: #eae6dd;
}

.vehicle-card .mcard-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 20, 18, 0.08), rgba(23, 20, 18, 0.02) 60%);
    pointer-events: none;
}

.vehicle-class {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.vehicle-title {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: var(--weight-serif);
    line-height: 1.12;
    color: var(--ink);
    margin: 0.1rem 0 0.6rem;
}

.vehicle-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    font-size: var(--text-small);
    color: var(--text-muted);
    border-top: 1px solid var(--hairline);
    padding-top: 0.9rem;
    margin-top: 0.2rem;
}

.vehicle-specs span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.vehicle-specs i {
    color: var(--accent-strong);
}

.vehicle-price b {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: var(--weight-serif-bold);
    color: var(--ink);
}

/* ============================================================
   DESTINATION TILE
   ============================================================ */
.dest-tile {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    isolation: isolate;
}

.dest-tile .dest-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.dest-tile .dest-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s var(--ease-out);
}

.dest-tile:hover .dest-media img {
    transform: scale(1.08);
}

.dest-tile .dest-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10, 9, 8, 0.12) 40%, rgba(8, 7, 6, 0.72) 100%);
    transition: background var(--speed-med) ease;
}

.dest-tile:hover .dest-scrim {
    background: linear-gradient(180deg, rgba(10, 9, 8, 0.3) 40%, rgba(6, 5, 4, 0.88) 100%);
}

.dest-name {
    position: absolute;
    left: 1.3rem;
    right: 1.3rem;
    bottom: 1.2rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--text-on-dark);
}

.dest-name h3 {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: var(--weight-serif);
    color: inherit;
    margin: 0;
    transform: translateY(0);
    transition: transform var(--speed-med) var(--ease-out);
}

.dest-tile:hover .dest-name h3 {
    transform: translateY(-4px);
}

.dest-arrow {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(248, 245, 239, 0.5);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
    opacity: 0;
    transform: translate(-8px, 8px);
    transition: opacity var(--speed-med) ease, transform var(--speed-med) var(--ease-out),
                background-color var(--speed-fast) ease, border-color var(--speed-fast) ease;
}

.dest-tile:hover .dest-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

.dest-arrow:hover {
    background: var(--text-on-dark);
    color: var(--mfalme-charcoal);
    border-color: var(--text-on-dark);
}

/* Wide tile variant */
.dest-tile--wide {
    aspect-ratio: 4 / 3.4;
}

/* ============================================================
   BENEFIT (WHY MFALME)
   ============================================================ */
.benefit {
    position: relative;
    padding: 2rem 1.4rem 2.2rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    height: 100%;
    transition: border-color var(--speed-med) ease, transform var(--speed-med) var(--ease-out),
                box-shadow var(--speed-med) var(--ease-out);
}

.benefit:hover {
    border-color: rgba(184, 155, 99, 0.45);
    box-shadow: var(--shadow-card);
    transform: translateY(-4px);
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1.4rem;
    border: 1px solid rgba(184, 155, 99, 0.5);
    border-radius: 50%;
    color: var(--accent-strong);
    font-size: 1.3rem;
    background: rgba(184, 155, 99, 0.06);
}

.benefit-index {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(119, 115, 107, 0.55);
}

.benefit h3 {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: var(--weight-serif);
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.benefit p {
    font-size: var(--text-small);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.7;
}

/* ============================================================
   BLOG / JOURNAL CARD
   ============================================================ */
.journal-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.journal-card .mcard-media {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
}

.journal-card .mcard-media img {
    border-radius: var(--radius-md);
}

.journal-category {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.journal-title {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: var(--weight-serif);
    line-height: 1.22;
    color: var(--ink);
    margin: 0.35rem 0 0.6rem;
}

.journal-title a {
    color: inherit;
    transition: color var(--speed-fast) ease;
}

.journal-title a:hover {
    color: var(--accent-strong);
}

.journal-excerpt {
    font-size: var(--text-small);
    color: var(--text-muted);
    margin: 0 0 1rem;
    line-height: 1.75;
}

.journal-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.journal-meta i {
    color: var(--accent-strong);
}

.journal-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--mfalme-sand);
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testimonial-stage {
    position: relative;
    max-width: 52rem;
    margin-inline: auto;
}

.testimonial-track {
    position: relative;
    min-height: 300px;
}

.testimonial-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--speed-slow) var(--ease-out), transform var(--speed-slow) var(--ease-out),
                visibility var(--speed-slow) ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding-bottom: 0.5rem;
}

.testimonial-slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

.testimonial-mark {
    font-family: var(--font-serif);
    font-size: 6rem;
    line-height: 0.6;
    color: var(--mfalme-gold);
    opacity: 0.55;
}

.testimonial-quote {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: var(--weight-serif);
    line-height: 1.45;
    color: var(--text-on-dark);
    max-width: 46rem;
    font-style: italic;
}

.testimonial-stars {
    color: var(--mfalme-gold-light);
    letter-spacing: 0.12em;
    margin-top: 0.6rem;
}

.testimonial-person {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.2rem;
}

.testimonial-person img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(248, 245, 239, 0.25);
}

.testimonial-person .t-name {
    font-weight: 600;
    color: var(--text-on-dark);
    display: block;
    line-height: 1.3;
}

.testimonial-person .t-location {
    font-size: var(--text-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
}

.testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.25rem;
}

.testimonial-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(248, 245, 239, 0.35);
    background: transparent;
    color: var(--text-on-dark);
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--speed-fast) ease, color var(--speed-fast) ease,
                border-color var(--speed-fast) ease;
}

.testimonial-arrow:hover {
    background: var(--text-on-dark);
    color: var(--mfalme-charcoal);
    border-color: var(--text-on-dark);
}

.testimonial-dots {
    display: flex;
    gap: 0.55rem;
}

.testimonial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(248, 245, 239, 0.28);
    transition: background-color var(--speed-fast) ease, transform var(--speed-fast) ease;
}

.testimonial-dot:hover {
    background: rgba(248, 245, 239, 0.55);
}

.testimonial-dot.is-active {
    background: var(--mfalme-gold-light);
    transform: scale(1.25);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}

.mfalme-input {
    background: var(--mfalme-white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: var(--text-small);
    color: var(--ink);
    transition: border-color var(--speed-fast) ease, box-shadow var(--speed-fast) ease;
}

.mfalme-input:focus {
    border-color: var(--mfalme-gold);
    box-shadow: 0 0 0 0.2rem rgba(184, 155, 99, 0.18);
    outline: 0;
}

.form-feedback {
    font-size: var(--text-small);
    font-weight: 500;
    margin: 0.8rem 0 0;
}

.form-feedback--error {
    color: #b33a2e;
}

.form-feedback--success {
    color: #6d7a3a;
}

.form-feedback--success i {
    margin-right: 0.4rem;
}

/* ============================================================
   NEWSLETTER (inline inside panel)
   ============================================================ */
.newsletter-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    max-width: 36rem;
    margin-inline: auto;
    background: var(--mfalme-white);
    border: 1px solid rgba(23, 20, 18, 0.08);
    border-radius: var(--radius-pill);
    padding: 0.45rem 0.45rem 0.45rem 1.4rem;
    box-shadow: var(--shadow-card);
}

.newsletter-input {
    border: 0;
    background: transparent;
    font-size: var(--text-small);
    color: var(--ink);
    padding: 0.55rem 0;
}

.newsletter-input:focus {
    outline: 0;
    box-shadow: none;
}

.newsletter-input::placeholder {
    color: var(--text-muted);
}

/* ============================================================
   MODAL
   ============================================================ */
.mfalme-modal {
    background: var(--mfalme-ivory);
    border: 1px solid rgba(23, 20, 18, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
}

.mfalme-modal .modal-header {
    border-bottom: 1px solid var(--hairline);
    padding: 1.5rem 1.75rem 1.1rem;
}

.mfalme-modal .modal-body {
    padding: 1.5rem 1.75rem 1.75rem;
}

.mfalme-modal .modal-title {
    margin: 0;
    color: var(--ink);
}

.mfalme-modal .btn-close {
    background: transparent;
}

.modal-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 1.4rem 0 1rem;
}

.modal-divider::before,
.modal-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

.mfalme-social {
    --bs-btn-padding-y: 0.7rem;
    font-size: var(--text-small);
}

.modal-footnote {
    text-align: center;
    font-size: var(--text-small);
    color: var(--text-muted);
    margin: 1.25rem 0 0;
}

.modal-footnote a {
    color: var(--accent-strong);
    font-weight: 600;
}

/* ============================================================
   TOASTS
   ============================================================ */
.mfalme-toast {
    background: var(--mfalme-white);
    color: var(--ink);
    border: 1px solid rgba(23, 20, 18, 0.08);
    border-left: 3px solid var(--mfalme-gold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
}

.mfalme-toast .toast-header {
    background: transparent;
    border-bottom-color: var(--hairline);
    font-weight: 600;
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: var(--z-hover);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: var(--mfalme-white);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--speed-med) ease, transform var(--speed-med) var(--ease-out),
                visibility var(--speed-med) ease, background-color var(--speed-fast) ease, color var(--speed-fast) ease;
    box-shadow: var(--shadow-card);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--mfalme-charcoal);
    color: var(--text-on-dark);
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.page-hero {
    position: relative;
    min-height: 56vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8rem 0 0;
    background: var(--mfalme-charcoal);
    overflow: hidden;
}

.page-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.55) 0%, rgba(17, 17, 17, 0.78) 100%);
}

.page-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.page-hero-content .display-lg {
    max-width: 18ch;
    margin-top: 0.4rem;
}

.page-hero-lead {
    max-width: 52ch;
    margin-top: 1rem;
    color: var(--text-on-dark-muted);
    font-size: 1.05rem;
}

.page-search-wrap {
    position: relative;
    z-index: 2;
    padding-bottom: 3.5rem;
}

.search-results {
    background: var(--mfalme-white);
}

.search-results .section-sub {
    padding-top: 0.5rem;
    margin-bottom: 2rem;
}

.search-results .section-sub + .section-sub {
    padding-top: 2rem;
    margin-top: 2.5rem;
    border-top: 1px solid var(--hairline);
}

.search-results-head {
    margin-bottom: 2.5rem;
}

.search-results-head .heading-lg {
    margin-bottom: 0.4rem;
}

.search-summary {
    color: var(--text-muted);
    font-size: 1.02rem;
    margin-bottom: 0;
}

.search-summary::before {
    content: '';
    display: block;
    width: 44px;
    height: 2px;
    background: var(--mfalme-gold);
    margin-bottom: 0.9rem;
}

.section-sub-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    margin-bottom: 1.5rem;
}

.empty-state {
    text-align: center;
    padding: 5rem 1.5rem;
    border: 1px dashed rgba(23, 20, 18, 0.22);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
}

.empty-state i {
    font-size: 2.4rem;
    color: var(--mfalme-gold);
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3 {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    margin-bottom: 0.6rem;
    color: var(--ink);
}

.empty-state p {
    max-width: 46ch;
    margin: 0 auto;
}