/* Base package.
   Component markup is shared; packages restyle it. These are structural
   defaults only, deliberately unopinionated about colour and type. */

/* ── Scoped baseline ──
   A theme reset (hello-elementor ships assets/css/reset.css) sets margins,
   list styles and heading sizes globally, and Elementor adds its own. Rather
   than dequeue a file the rest of the site depends on, the plugin states what
   it needs for the elements it owns. Everything here is scoped to an lmls
   container, so it can only affect plugin markup.

   Do not "simplify" this away: without it a package's appearance depends on
   whichever theme is active. */
.lmls-single, .lmls-archive, .lmls-results, .lmls-grid, .lmls-card, .lmls-scbar {
    box-sizing: border-box;
}
.lmls-single *, .lmls-archive *, .lmls-results *, .lmls-grid *, .lmls-card *,
.lmls-single *::before, .lmls-archive *::before, .lmls-results *::before {
    box-sizing: inherit;
}
.lmls-single ul, .lmls-single ol, .lmls-archive ul, .lmls-archive ol,
.lmls-results ul, .lmls-results ol, .lmls-card ul, .lmls-card ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lmls-single dl, .lmls-single dd, .lmls-single dt { margin: 0; }
.lmls-single h1, .lmls-single h2, .lmls-single h3, .lmls-single h4,
.lmls-archive h1, .lmls-archive h2, .lmls-archive h3,
.lmls-results h1, .lmls-results h2, .lmls-results h3 {
    margin: 0;
    line-height: 1.25;
    /* A theme heading colour would fight the package palette. */
    color: inherit;
}
.lmls-single img, .lmls-archive img, .lmls-results img, .lmls-card img {
    max-width: 100%;
    height: auto;
    border: 0;
}
.lmls-single a, .lmls-archive a, .lmls-results a, .lmls-card a { text-decoration: none; }
.lmls-single button, .lmls-archive button, .lmls-results button, .lmls-card button {
    font: inherit;
    color: inherit;
}

.lmls-grid {
    display: grid;
    grid-template-columns: repeat(var(--lmls-columns, 3), minmax(0, 1fr));
    gap: var(--lmls-card-gap, 20px);
}
/* Narrower screens cap the grid rather than set it: two across is the most a
   tablet can hold, but a grid asked for one column has to stay at one — the
   flat `repeat(2, …)` this replaces widened it back out again, which was
   invisible while the column count was a site-wide setting nobody set to one
   and obvious as soon as `columns` moved onto the shortcode. */
@media (max-width: 960px) { .lmls-grid { grid-template-columns: repeat(min(var(--lmls-columns, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 600px) { .lmls-grid { grid-template-columns: 1fr; } }

/* The image box holds its own shape, so what is inside it — photo, static map
   fallback, or nothing — never changes the height of a card. --lmls-ratio is
   set per template (4:3 on most cards, 1:1 on compact, 16:9 in map popups). */
/* Three answers, most specific first: the ratio the caller asked for, then
   the site's Settings → Design → Images choice, then 4/3. The caller's is an
   inline custom property and is only set when a template genuinely needs a
   shape — a map pin's popup, a compact thumbnail — so everything else follows
   the design token. */
.lmls-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--lmls-ratio, var(--lmls-image-ratio, 4 / 3));
    background: #eef1f5;
}
.lmls-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Last resort: no photo, and no coordinates to draw a map from. A house
   outline, inlined so it costs no request and cannot itself 404. */
.lmls-image__placeholder {
    position: absolute;
    inset: 0;
    background: #eef1f5 center / 44px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bfcc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
}
/* A map is information, not a photo: hold it back a little so it does not
   compete with the cards that do have pictures. */
.lmls-image--fallback img { opacity: .92; }

.lmls-gallery__item img { display: block; width: 100%; height: auto; }

.lmls-card { position: relative; display: flex; flex-direction: column; }
.lmls-card__media { position: relative; display: block; }
.lmls-card__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; }
.lmls-card__link { text-decoration: none; color: inherit; }

/* Status and tags, stacked in the media's corner — the card equivalent of
   .lmls-single__chips below. A package that overlays .lmls-badge on the photo
   wraps it with .lmls-tags in this container so the tag row stacks under the
   badge instead of falling into the document flow beneath the image. */
.lmls-card__chips {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* ── Detail page ──
   The base package styles structure, not brand: layout, rhythm and the two
   things a detail page lives or dies by — a readable description column and a
   fact table that scans. Packages restyle on top of these class names.

   Custom properties are the seam packages hook: overriding --lmls-accent or
   --lmls-radius is enough for a different look without repeating the layout. */
/* This block used to DECLARE --lmls-accent, --lmls-ink, --lmls-muted,
   --lmls-line, --lmls-surface and --lmls-radius with hardcoded values. Every
   one of those is a Settings → Design control now, printed on :root by
   DesignSystem — and a declaration here would shadow it, because an element
   beats :root. So they are only ever READ, always with the old value as the
   fallback, which is why a site that never opens the Design tab looks exactly
   as it did.

   A package still overrides any of them the same way it always has: a rule on
   its own container (`.lmls-single--luxury { --lmls-accent: #c9a96e }`) is on
   an element too, and comes later in source order. */
.lmls-single {
    color: var(--lmls-ink, #111827);
    max-width: var(--lmls-content-width, 1180px);
    margin: 0 auto;
    /* Long description text at full browser width is unreadable; this is the
       one measurement on the page that is not decorative. */
    line-height: 1.6;
}

/* Hero */
.lmls-single__hero { position: relative; margin-bottom: 24px; }
.lmls-single__hero .lmls-gallery { border-radius: var(--lmls-radius, 12px); overflow: hidden; }
.lmls-single__chips {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}
.lmls-single__chips > * { pointer-events: auto; }
.lmls-single__chips .lmls-favorite { margin-left: auto; }
/* Nothing in the hero to sit on top of, so the chips return to the flow. */
.lmls-single__hero:not(:has(.lmls-gallery)) .lmls-single__chips { position: static; padding: 0; }

/* Status chip */
.lmls-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: rgba(17, 24, 39, .78);
    color: #fff;
    backdrop-filter: blur(4px);
}
.lmls-badge[data-tone="new"]     { background: #047857; }
.lmls-badge[data-tone="active"]  { background: var(--lmls-accent, #1d4ed8); }
.lmls-badge[data-tone="pending"] { background: #b45309; }
.lmls-badge[data-tone="sold"],
.lmls-badge[data-tone="closed"]  { background: #4b5563; }
.lmls-badge[data-tone="reduced"] { background: #be123c; }

/* Tags. The admin's own labels, in the colours they chose — which is why there
   are no colours here: each tag carries its own, and this only says how a row
   of them sits. Structure, not brand, like everything else in the base package. */
.lmls-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
}
.lmls-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Favourite. The heart is an inline SVG that inherits currentColor, so a
   package restyles it with one colour and there is no mask to fail. */
.lmls-favorite {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(17, 24, 39, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, border-color .15s, transform .15s;
}
.lmls-favorite:hover { transform: scale(1.06); border-color: rgba(190, 18, 60, .4); color: #be123c; }
.lmls-favorite__icon { display: block; width: 19px; height: 19px; }
.lmls-favorite[data-favorite="1"] { color: #be123c; }

/* Summary: price, address, and the spec strip */
.lmls-single__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--lmls-line, #e5e7eb);
    margin-bottom: 28px;
}
.lmls-single__headline { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lmls-single__summary .lmls-price { display: flex; align-items: baseline; gap: 10px; }
.lmls-single__summary .lmls-price__amount {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.lmls-price__previous { font-size: 15px; color: var(--lmls-muted, #6b7280); text-decoration: line-through; }
.lmls-price--reduced .lmls-price__amount { color: #be123c; }

.lmls-address { display: flex; flex-direction: column; gap: 2px; }
.lmls-address__street { font-size: 17px; font-weight: 600; }
.lmls-address__locality { font-size: 14px; color: var(--lmls-muted, #6b7280); }

/* Spec strip. Each spec is a value with its label underneath, separated by
   rules — reading "6 Beds  9 Baths  11,940 sqft" as one run of grey text was
   the single biggest legibility problem on this page. */
.lmls-single__summary .lmls-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: auto;
}
.lmls-single__summary .lmls-specs__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 20px;
    border-left: 1px solid var(--lmls-line, #e5e7eb);
}
.lmls-single__summary .lmls-specs__item:first-child { border-left: 0; padding-left: 0; }
.lmls-single__summary .lmls-specs__item:last-child { padding-right: 0; }
.lmls-single__summary .lmls-specs__value { font-size: 19px; font-weight: 700; line-height: 1.2; }
.lmls-single__summary .lmls-specs__unit { display: none; }
.lmls-single__summary .lmls-specs__label,
/* One fact states itself in its unit rather than in a label: living area is
   "3,200 sqft", not "3,200 Area". Hiding the unit strip-wide left that column
   as a bare number standing between BEDS and GARAGE with nothing saying what
   it counted, so where there is no label the unit becomes one. Written as
   :has() rather than by naming the sqft item, because the rule is about a spec
   having no label, not about which spec that happens to be. */
.lmls-single__summary .lmls-specs__item:not(:has(.lmls-specs__label)) .lmls-specs__unit {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lmls-muted, #6b7280);
}

/* Body: description and facts beside the map */
.lmls-single__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--lmls-section-gap, 32px);
    align-items: start;
}
/* Nothing placed in the sidebar, no sidebar. The column used to be guaranteed
   full by a map written into the template; now that the map is a block like
   everything else, a site that places none would otherwise keep 340px of empty
   page beside its description. */
.lmls-single__body:not(:has(.lmls-single__aside > *)) { grid-template-columns: minmax(0, 1fr); }
.lmls-single__aside:empty { display: none; }
@media (max-width: 900px) {
    .lmls-single__body { grid-template-columns: minmax(0, 1fr); }
}
.lmls-single__main { min-width: 0; display: flex; flex-direction: column; gap: var(--lmls-section-gap, 32px); }

.lmls-single__section-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}
/* 70ch keeps a paragraph readable; the MLS remarks on a big listing run long. */
.lmls-single__prose { max-width: 70ch; }
.lmls-single__prose p { margin: 0 0 1em; }
.lmls-single__prose p:last-child { margin-bottom: 0; }

/* Facts. Two columns of category cards, each a definition list of label/value
   rows. The flat label-above-value stack this replaced needed a full page of
   scrolling to read twelve numbers. */
/* One category per row, its fields in two columns inside it. The other way
   round — two narrow categories side by side, each a single column of fields —
   made a long page of half-empty cards, and put "Bathrooms" and "Year Built"
   at different heights depending on how many fields the category beside them
   happened to carry. */
.lmls-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.lmls-facts__group {
    background: var(--lmls-surface, #fff);
    border: 1px solid var(--lmls-line, #e5e7eb);
    border-radius: var(--lmls-radius, 12px);
    padding: 18px 20px;
    /* The fields inside ask about the width of their own card, not of the
       window: this block sits in a column beside the map on a listing page and
       across the full width in print, and two columns are right in one and not
       the other at the same viewport. */
    container-type: inline-size;
}
.lmls-facts__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lmls-accent, #1d4ed8);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--lmls-line, #e5e7eb);
}
.lmls-facts__list {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 36px;
}
.lmls-facts__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--lmls-line, #e5e7eb);
}
.lmls-facts__row:last-child { border-bottom: 0; padding-bottom: 0; }

@container (min-width: 520px) {
    .lmls-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The separator comes off the last row, and in two columns the last row is
       a pair: the field before the last one is beside it, not above it — but
       only when it sits in the left-hand column, which is what the odd position
       says. On an odd count the final field is alone and this matches nothing. */
    .lmls-facts__row:nth-last-child(2):nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
}
.lmls-facts__label { flex: 0 0 auto; font-size: 13px; color: var(--lmls-muted, #6b7280); }
/* Dotted leader would be nicer, but the value has to win the space on a long
   label like "Club Membership Available". */
.lmls-facts__value {
    margin: 0 0 0 auto;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Locked facts ──
   A field this visitor has not signed in for keeps its row: the label is the
   point — it says what an account is worth — and the value is a random decoy.
   Blurring a decoy is honest; the real value was never sent, so there is
   nothing in the page to reveal by removing this rule. */
.lmls-facts__value--locked { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.lmls-locked-value {
    filter: blur(4px);
    color: var(--lmls-muted, #6b7280);
    letter-spacing: .05em;
    user-select: none;
    /* Blur bleeds past the glyphs; without this it clips on the row edge. */
    padding: 0 4px;
}

/* The icon beside it is the whole explanation: hover or focus it and the
   tooltip says what an account would open. One row, one affordance — no
   banner underneath repeating it per section. */
.lmls-locked-info {
    position: relative;
    display: flex;
    flex-shrink: 0;
    color: var(--lmls-muted, #6b7280);
    cursor: help;
}
.lmls-locked-info svg { width: 15px; height: 15px; display: block; }
.lmls-locked-info:hover, .lmls-locked-info:focus-visible { color: var(--lmls-accent, #1d4ed8); outline: none; }
.lmls-locked-info__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: -6px;
    z-index: 5;
    width: max-content;
    max-width: 220px;
    padding: 7px 10px;
    border-radius: var(--lmls-radius-sm, 8px);
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    /* Hidden by opacity rather than display so the fade has something to
       animate, and pointer-events keeps it from swallowing the hover. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, visibility .12s ease;
}
/* The arrow. Inherits the bubble's colour so a theme override moves both. */
.lmls-locked-info__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 10px;
    border: 5px solid transparent;
    border-top-color: #1f2937;
}
.lmls-locked-info:hover .lmls-locked-info__tip,
.lmls-locked-info:focus-visible .lmls-locked-info__tip { opacity: 1; visibility: visible; }

/* Map */
.lmls-single__aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .lmls-single__aside { position: static; } }
.lmls-map { border-radius: var(--lmls-radius, 12px); overflow: hidden; border: 1px solid var(--lmls-line, #e5e7eb); }
.lmls-map .lmls-map-container { min-height: 300px; }

/* Hero gallery: one big image, the rest as a filmstrip under it. */
.lmls-gallery--hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lmls-gallery--hero .lmls-gallery__item { margin: 0; overflow: hidden; border-radius: 8px; }
.lmls-gallery--hero .lmls-gallery__item:first-child { grid-column: 1 / -1; }
.lmls-gallery--hero .lmls-gallery__item:first-child img { aspect-ratio: 16 / 9; }
.lmls-gallery--hero .lmls-gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.lmls-gallery--hero .lmls-gallery__item:nth-child(n+6) { display: none; }
.lmls-gallery--fallback { grid-template-columns: 1fr; }

/* A tile that opens the viewer says so: the cursor, a lift on the photo, and
   on the last visible tile the count of everything the mosaic is not showing. */
.lmls-gallery__item--zoomable { position: relative; cursor: zoom-in; }
.lmls-gallery__item--zoomable img { transition: transform .35s ease, filter .35s ease; }
.lmls-gallery__item--zoomable:hover img,
.lmls-gallery__item--zoomable:focus-visible img { transform: scale(1.04); }
.lmls-gallery__item--zoomable:focus-visible { outline: 2px solid var(--lmls-accent, #1d4ed8); outline-offset: 2px; }

.lmls-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, .55);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

/* ── Detail-page forms: Contact, Schedule a Tour, Mortgage Calculator ──
   None had a single rule anywhere, in any package, so all three rendered as the
   browser's default controls stacked down the sidebar. Structure only, over
   the same custom properties as everything else, so a package restyles them by
   setting --lmls-accent and friends rather than by restating any of this.

   The three are one card each and sit under one another in the same column, so
   they take the same panel: a contact form that came with no surface of its own
   read as loose fields spilling out of the tour box above it. */
.lmls-contact-form,
.lmls-tour,
.lmls-mortgage {
    display: block;
    background: var(--lmls-surface, #fff);
    border: 1px solid var(--lmls-line, #e5e7eb);
    border-radius: var(--lmls-radius, 12px);
    padding: clamp(16px, 2.2vw, 22px);
}

.lmls-contact-form__heading,
.lmls-tour__heading,
.lmls-mortgage__heading {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.3;
    color: var(--lmls-ink, #111827);
}

/* The line of copy an admin can put under the heading. */
.lmls-contact-form__intro {
    margin: -6px 0 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--lmls-muted, #6b7280);
}

/* Fields. One column: these live in a sidebar in every layout that places
   them, and a two-column form in a 280px column is unreadable. */
.lmls-contact-form__field,
.lmls-mortgage__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
}

.lmls-contact-form__field label,
.lmls-mortgage__field label,
.lmls-tour__kind legend {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--lmls-muted, #6b7280);
}
.lmls-contact-form__optional { font-weight: 400; opacity: .8; }

.lmls-contact-form__field input,
.lmls-contact-form__field select,
.lmls-contact-form__field textarea,
.lmls-mortgage__field input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--lmls-line, #e5e7eb);
    border-radius: calc(var(--lmls-radius, 12px) / 2);
    background: var(--lmls-surface, #fff);
    color: var(--lmls-ink, #111827);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.lmls-contact-form__field textarea { resize: vertical; min-height: 76px; }

.lmls-contact-form__field input:focus,
.lmls-contact-form__field select:focus,
.lmls-contact-form__field textarea:focus,
.lmls-mortgage__field input:focus {
    outline: none;
    border-color: var(--lmls-accent, #1d4ed8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lmls-accent, #1d4ed8) 18%, transparent);
}

/* Date and time sit together: they are one question asked twice. */
.lmls-tour__when { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.lmls-tour__kind {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}
.lmls-tour__kind legend { padding: 0; margin-bottom: 8px; }
.lmls-tour__kind label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 16px;
    font-size: 14px;
    color: var(--lmls-ink, #111827);
    cursor: pointer;
}
.lmls-tour__kind input { accent-color: var(--lmls-accent, #1d4ed8); }

.lmls-contact-form__submit {
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: calc(var(--lmls-radius, 12px) / 2);
    background: var(--lmls-accent, #1d4ed8);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease, transform .1s ease;
}
.lmls-contact-form__submit:hover { filter: brightness(1.08); }
.lmls-contact-form__submit:active { transform: translateY(1px); }
.lmls-contact-form__submit[disabled] { opacity: .6; cursor: default; }

.lmls-contact-form__status {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--lmls-muted, #6b7280);
}
.lmls-contact-form__status:empty { display: none; }

/* The honeypot is for robots, not people: off-screen rather than display:none,
   which a bot can detect as easily as a browser can. */
.lmls-contact-form__gotcha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The figure is the point of the calculator, so it is the biggest thing in it. */
.lmls-mortgage__result {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lmls-line, #e5e7eb);
}
.lmls-mortgage__amount {
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 800;
    line-height: 1;
    color: var(--lmls-accent, #1d4ed8);
    font-variant-numeric: tabular-nums;
}
.lmls-mortgage__per { font-size: 13px; color: var(--lmls-muted, #6b7280); }

.lmls-mortgage__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.lmls-mortgage__note {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--lmls-muted, #6b7280);
}

@media (max-width: 480px) {
    .lmls-tour__when,
    .lmls-mortgage__fields { grid-template-columns: 1fr; }
}

/* ── Photo viewer ──
   Appended to <body>, so nothing here may depend on a listing's context. The
   image is bounded by the viewport rather than given a fixed size: a portrait
   photo and a panorama both have to fit without the frame moving around. */
.lmls-lightbox-open { overflow: hidden; }

.lmls-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lmls-lightbox[hidden] { display: none; }

.lmls-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 11, .92);
    backdrop-filter: blur(6px);
}

.lmls-lightbox__frame {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: clamp(12px, 3vw, 40px);
    box-sizing: border-box;
}

.lmls-lightbox__stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.lmls-lightbox__image {
    max-width: 100%;
    max-height: calc(100% - 54px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    opacity: 1;
    transition: opacity .18s ease;
}
.lmls-lightbox__image.is-loading { opacity: 0; }

.lmls-lightbox__caption {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    max-width: 100%;
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}
.lmls-lightbox__title { font-weight: 600; }
.lmls-lightbox__count {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
}

.lmls-lightbox__nav,
.lmls-lightbox__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.lmls-lightbox__nav:hover,
.lmls-lightbox__close:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); }
.lmls-lightbox__nav:active { transform: scale(.94); }
.lmls-lightbox__nav[hidden] { display: none; }

.lmls-lightbox__nav svg,
.lmls-lightbox__close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lmls-lightbox__close {
    position: absolute;
    top: clamp(12px, 3vw, 28px);
    right: clamp(12px, 3vw, 28px);
    z-index: 2;
}

@media (max-width: 700px) {
    .lmls-lightbox__frame { padding: 10px; gap: 4px; }
    .lmls-lightbox__nav { width: 40px; height: 40px; }
    /* Thumb-reach on a phone: the arrows sit over the bottom of the photo
       rather than stealing width from it. */
    .lmls-lightbox__nav { position: absolute; bottom: 18px; }
    .lmls-lightbox__nav--prev { left: 18px; }
    .lmls-lightbox__nav--next { right: 18px; }
    .lmls-lightbox__image { max-height: calc(100% - 96px); }
}

@media (max-width: 600px) {
    .lmls-single__summary { align-items: flex-start; }
    .lmls-single__summary .lmls-specs { margin-left: 0; }
    .lmls-single__summary .lmls-specs__item { padding: 0 14px; }
    .lmls-gallery--hero { grid-template-columns: repeat(2, 1fr); }
}

/* ── Results header: count and sort ──
   The sort control is a list of links, which without styling rendered as a
   bulleted column of every sort direction — sixteen bullet points above the
   listings. It reads as a row of chips instead.

   `.lmls-search__*`, not `.lmls-results__*`: search.php has always emitted the
   former and nothing has ever emitted the latter, so on the surface that most
   sites actually use — the shortcode — none of this applied. The count sat
   flush against the page edge, the sort dropped onto its own line beneath it
   because `margin-left: auto` needs a flex parent to push against, and the
   grid started immediately under both. */
.lmls-archive__head,
.lmls-search__head {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin: 4px 0 22px;
}
.lmls-archive__count,
.lmls-search__count { margin: 0; font-size: 14px; font-weight: 600; color: var(--lmls-ink, #374151); }

.lmls-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    /* Without this the control's content sets the header's minimum width and
       the whole results column overflows the page. */
    min-width: 0;
}
.lmls-sort__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--lmls-muted, #6b7280);
    white-space: nowrap;
    flex: 0 0 auto;
}
.lmls-sort__select {
    max-width: 220px;
    min-width: 0;
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--lmls-line, #e5e7eb);
    border-radius: calc(var(--lmls-radius, 12px) / 1.5);
    background: var(--lmls-surface, #fff);
    font-size: 13px;
    color: var(--lmls-ink, #374151);
    cursor: pointer;
}
.lmls-sort__select:hover { border-color: var(--lmls-accent, #c4cdd9); }
.lmls-sort__select:focus {
    outline: none;
    border-color: var(--lmls-accent, #1d4ed8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lmls-accent, #1d4ed8) 18%, transparent);
}
/* The no-JS fallback list. */
.lmls-sort__options { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lmls-sort__option a {
    display: block;
    padding: 5px 10px;
    border: 1px solid var(--lmls-line, #e5e7eb);
    border-radius: 999px;
    font-size: 12px;
    color: var(--lmls-muted, #4b5563);
    text-decoration: none;
    white-space: nowrap;
}
.lmls-sort__option--current a {
    background: var(--lmls-accent, #1d4ed8);
    border-color: var(--lmls-accent, #1d4ed8);
    color: #fff;
}

/* Pagination */
.lmls-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: var(--lmls-section-gap, 28px);
}
.lmls-pagination a, .lmls-pagination span {
    display: inline-block;
    min-width: 38px;
    padding: 8px 10px;
    border: 1px solid var(--lmls-line, #e5e7eb);
    border-radius: calc(var(--lmls-radius, 12px) / 1.5);
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    color: var(--lmls-ink, #374151);
}
.lmls-pagination a:hover { border-color: var(--lmls-accent, #1d4ed8); color: var(--lmls-accent, #1d4ed8); }
.lmls-pagination [aria-current="page"],
.lmls-pagination [aria-current="true"] {
    background: var(--lmls-accent, #1d4ed8);
    border-color: var(--lmls-accent, #1d4ed8);
    color: #fff;
}

/* ══ Sign in / register / reset ══
   The form was 130 lines of CSS printed into wp_head by the plugin, scoped to
   #loyalModal so nothing could override it without !important. It is package
   CSS now: a package restyles it here, and the markup it hangs off is a
   component like any other. Colours defer to the design tokens the site sets
   (--lmls-primary and friends) with a sane fallback, because this form appears
   on every page of the site and has to sit inside whatever the theme is. */
.lmls-auth {
    box-sizing: border-box;
    font-family: var(--lmls-font, inherit);
    color: var(--lmls-text, #111827);
}
.lmls-auth * { box-sizing: inherit; }

/* Modal variant: the root IS the backdrop, which is what lets a click landing
   on it close the form without a second element to hit-test. */
.lmls-auth--modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, .55);
}
.lmls-auth--modal.is-open { display: flex; }
body.lmls-auth-open { overflow: hidden; }

.lmls-auth__panel {
    width: 100%;
    max-width: 420px;
    background: var(--lmls-card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
    overflow: hidden;
}
.lmls-auth--inline .lmls-auth__panel {
    margin: 0 auto;
    border: 1px solid #f0f2f5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.lmls-auth__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 0;
}
.lmls-auth__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.lmls-auth__close {
    padding: 4px 6px;
    border: none;
    border-radius: 6px;
    background: none;
    color: #9ca3af;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.lmls-auth__close:hover { color: #374151; background: #f3f4f6; }

.lmls-auth__body { padding: 16px 24px 26px; }
.lmls-auth__intro { margin: 6px 0 20px; font-size: 13px; color: #6b7280; }
.lmls-auth__hint { margin: 12px 0 0; font-size: 12px; color: #9ca3af; text-align: center; }

/* Every step is in the DOM from the first paint; one of them is on screen. */
.lmls-auth__step { display: none; }
.lmls-auth__step.is-active { display: block; }

.lmls-auth__field { margin-bottom: 14px; }
.lmls-auth__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}
.lmls-auth__field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 9px;
    background: #fafafa;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    outline: none;
    transition: border-color .15s, background .15s;
}
.lmls-auth__field input:focus {
    border-color: var(--lmls-primary, #1d4ed8);
    background: #fff;
}

.lmls-auth__submit {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 9px;
    background: var(--lmls-primary, #1d4ed8);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.lmls-auth__submit:hover { background: var(--lmls-secondary, #1344c0); }
.lmls-auth__submit:disabled { opacity: .6; cursor: not-allowed; }

.lmls-auth__link {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 4px;
    border: none;
    background: none;
    color: var(--lmls-primary, #1d4ed8);
    font-family: inherit;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.lmls-auth__link:hover { text-decoration: underline; }

/* ── Social sign-in ──
   Google's button is an iframe they render and we do not style; Apple's is
   ours to draw to their specification. What is shared is the rule above them
   and the width they both fill. */
.lmls-auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: #9ca3af;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.lmls-auth__divider::before,
.lmls-auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.lmls-auth__google {
    display: flex;
    justify-content: center;
    /* Google's button is sized in pixels at render time, so the box holds the
       height it will take and the panel does not jump when it appears. */
    min-height: 40px;
}

/* Apple's mark, Apple's wording, and the sizes their guidelines set: black on
   the light panel, and a minimum height nothing may squeeze. */
.lmls-auth__apple {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    margin-top: 10px;
    padding: 0 14px;
    border: 1px solid #000;
    border-radius: 4px;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: opacity .15s;
}
.lmls-auth__apple:hover { opacity: .85; }
.lmls-auth__apple:focus-visible { outline: 2px solid var(--lmls-primary, #1d4ed8); outline-offset: 2px; }
/* Disabled until Apple's script has answered — a button that cannot do its job
   yet should not look like one that can. */
.lmls-auth__apple:disabled { opacity: .45; cursor: default; }
.lmls-auth__apple-mark { width: 15px; height: 18px; display: block; margin-top: -2px; }

.lmls-auth__msg {
    display: none;
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
}
.lmls-auth__msg.is-error { display: block; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.lmls-auth__msg.is-ok    { display: block; background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }

/* ══ Profile ══
   Also package CSS now, and for the same reason: it was an inline <style>
   inside templates/profile-content.php, which meant a package could not touch
   it without replacing the whole page. */
.lmls-profile {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 16px 64px;
    box-sizing: border-box;
    font-family: var(--lmls-font, inherit);
    color: var(--lmls-text, #111827);
}
.lmls-profile * { box-sizing: border-box; }

/* Signed out — the prompt. */
.lmls-profile--guest { padding: 48px 20px; text-align: center; }
.lmls-profile__lock { margin-bottom: 16px; font-size: 40px; }
.lmls-profile__prompt { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.lmls-profile__prompt-sub { margin: 0 0 24px; font-size: 14px; color: #6b7280; }
.lmls-profile__signin {
    padding: 12px 28px;
    border: none;
    border-radius: 9px;
    background: var(--lmls-primary, #1d4ed8);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.lmls-profile__header { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.lmls-profile__avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lmls-primary, #1d4ed8) 15%, #fff);
    color: var(--lmls-primary, #1d4ed8);
    font-size: 24px;
    font-weight: 700;
}
.lmls-profile__name  { margin: 0 0 3px; font-size: 22px; font-weight: 700; }
.lmls-profile__email { margin: 0; font-size: 14px; color: #6b7280; }
.lmls-profile__logout {
    margin-left: auto;
    padding: 8px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    transition: border-color .15s, color .15s;
}
.lmls-profile__logout:hover { border-color: #9ca3af; color: #374151; }

.lmls-profile__tabs { display: flex; gap: 2px; margin-bottom: 28px; border-bottom: 2px solid #f3f4f6; }
.lmls-profile__tab {
    margin-bottom: -2px;
    padding: 10px 20px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: #6b7280;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.lmls-profile__tab:hover { color: var(--lmls-primary, #1d4ed8); }
.lmls-profile__tab.is-active {
    color: var(--lmls-primary, #1d4ed8);
    border-bottom-color: var(--lmls-primary, #1d4ed8);
}
.lmls-profile__count {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--lmls-primary, #1d4ed8);
    color: #fff;
    font-size: 10px;
}

.lmls-profile__panel { display: none; }
.lmls-profile__panel.is-active { display: block; }

.lmls-profile__card {
    padding: 24px;
    border: 1px solid #f0f2f5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.lmls-profile__card-title { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.lmls-profile__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lmls-profile__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}
.lmls-profile__optional { font-weight: 400; color: #9ca3af; }
.lmls-profile__field input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 9px;
    background: #fafafa;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    outline: none;
    transition: border-color .15s;
}
.lmls-profile__field input:focus { border-color: var(--lmls-primary, #1d4ed8); background: #fff; }
.lmls-profile__field input[readonly] { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }

.lmls-profile__save {
    margin-top: 20px;
    padding: 11px 26px;
    border: none;
    border-radius: 9px;
    background: var(--lmls-primary, #1d4ed8);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.lmls-profile__save:disabled { opacity: .6; cursor: not-allowed; }
.lmls-profile__form-msg { display: none; margin: 12px 0 0; font-size: 13px; }
.lmls-profile__form-msg.is-ok    { display: block; color: #16a34a; }
.lmls-profile__form-msg.is-error { display: block; color: #dc2626; }

.lmls-profile__empty { padding: 48px 20px; color: #6b7280; text-align: center; }
.lmls-profile__empty-icon  { margin-bottom: 12px; font-size: 36px; }
.lmls-profile__empty-title { margin: 0 0 6px; color: #374151; font-weight: 600; }
.lmls-profile__empty-text  { margin: 0; font-size: 13px; }

.lmls-search-card {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    padding: 18px 20px;
    border: 1px solid #f0f2f5;
    border-radius: 12px;
    background: #fff;
    transition: opacity .3s;
}
.lmls-search-card.is-removing { opacity: 0; }
.lmls-search-card__icon { font-size: 20px; line-height: 1.2; }
.lmls-search-card__body { flex: 1; min-width: 0; }
.lmls-search-card__name { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.lmls-search-card__params { font-size: 13px; color: #4b5563; }
.lmls-search-card__meta { margin-top: 6px; font-size: 12px; color: #9ca3af; }
.lmls-search-card__notify {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
}
.lmls-search-card__notify input {
    width: 16px;
    height: 16px;
    accent-color: var(--lmls-primary, #1d4ed8);
    cursor: pointer;
}
.lmls-search-card__actions { display: flex; flex-direction: column; gap: 8px; }
.lmls-search-card__btn {
    padding: 7px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.lmls-search-card__btn:hover { border-color: var(--lmls-primary, #1d4ed8); color: var(--lmls-primary, #1d4ed8); }
.lmls-search-card__btn--danger:hover { border-color: #dc2626; color: #dc2626; }

@media (max-width: 600px) {
    .lmls-profile__grid { grid-template-columns: 1fr; }
    .lmls-search-card { flex-wrap: wrap; }
    .lmls-search-card__actions { flex-direction: row; width: 100%; }
}

/* ══ Account link ══
   Deliberately quiet. In a nav menu it sits among the theme's own items, and
   an item that arrives styled like a plugin is an item that looks bolted on —
   so the button inherits the font and colour it lands in, and only the pointer
   gives it away. The shortcode variant is the same control with a wrapper. */
.lmls-account-link { list-style: none; }
.lmls-account-link__item { display: inline-block; }

.lmls-account-link__signin {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}
.lmls-account-link__signin:hover,
.lmls-account-link__account:hover,
.lmls-account-link__logout:hover { opacity: .75; }

.lmls-account-link__account,
.lmls-account-link__logout { color: inherit; text-decoration: none; }
.lmls-account-link__logout { opacity: .7; }

/* ── Standing up to a theme's button reset ──────────────────────────────────
   hello-elementor — and it is far from alone — styles bare `button`,
   `[type="button"]` and `[type="submit"]`: a #c36 border and text, filled #c36
   on hover. `[type="submit"]` weighs the same as one class and `button:hover`
   weighs more, so every plugin button named with a single class lost its hover
   to the theme and turned pink under the pointer. On a listing page it lost its
   resting border too, because there the package stylesheets are enqueued
   *before* the theme's and equal specificity is settled by source order.

   Nothing new is designed here. Each rule restates what the rule above already
   said, with the button's own container in front of it, which is enough weight
   to settle it. A package overrides these the way it overrides anything else:
   its stylesheet is enqueued after this one, so an equally specific rule of its
   own wins — and most of a package's buttons are already scoped to a surface
   (`.lmls-single--luxury .lmls-…`) and outweigh both. */

/* The one button on the detail page's forms. */
.lmls-contact-form .lmls-contact-form__submit,
.lmls-tour .lmls-contact-form__submit,
.lmls-mortgage .lmls-contact-form__submit {
    border: 0;
    background: var(--lmls-accent, #1d4ed8);
    color: #fff;
}
.lmls-contact-form .lmls-contact-form__submit:hover,
.lmls-contact-form .lmls-contact-form__submit:focus,
.lmls-tour .lmls-contact-form__submit:hover,
.lmls-tour .lmls-contact-form__submit:focus {
    background: var(--lmls-accent, #1d4ed8);
    color: #fff;
    filter: brightness(1.08);
}

/* The heart. Its hover is a lift and a red outline, never a fill. */
.lmls-card .lmls-favorite,
.lmls-single .lmls-favorite {
    border: 1px solid rgba(17, 24, 39, .12);
    background: rgba(255, 255, 255, .92);
    color: #6b7280;
}
.lmls-card .lmls-favorite:hover,
.lmls-card .lmls-favorite:focus,
.lmls-single .lmls-favorite:hover,
.lmls-single .lmls-favorite:focus {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(190, 18, 60, .4);
    color: #be123c;
}
.lmls-card .lmls-favorite[data-favorite="1"],
.lmls-single .lmls-favorite[data-favorite="1"] { color: #be123c; }

/* Profile: the two filled buttons, the tabs, and the saved-search row. */
.lmls-profile .lmls-profile__signin,
.lmls-profile .lmls-profile__save {
    border: none;
    background: var(--lmls-primary, #1d4ed8);
    color: #fff;
}
.lmls-profile .lmls-profile__signin:hover,
.lmls-profile .lmls-profile__signin:focus,
.lmls-profile .lmls-profile__save:hover,
.lmls-profile .lmls-profile__save:focus {
    background: var(--lmls-primary, #1d4ed8);
    color: #fff;
    filter: brightness(1.06);
}

.lmls-profile .lmls-profile__tab {
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #6b7280;
}
.lmls-profile .lmls-profile__tab:hover,
.lmls-profile .lmls-profile__tab:focus { background: none; color: var(--lmls-primary, #1d4ed8); }
.lmls-profile .lmls-profile__tab.is-active {
    background: none;
    color: var(--lmls-primary, #1d4ed8);
    border-bottom-color: var(--lmls-primary, #1d4ed8);
}

.lmls-profile .lmls-search-card__btn {
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #374151;
}
.lmls-profile .lmls-search-card__btn:hover,
.lmls-profile .lmls-search-card__btn:focus {
    background: #fff;
    border-color: var(--lmls-primary, #1d4ed8);
    color: var(--lmls-primary, #1d4ed8);
}
.lmls-profile .lmls-search-card__btn--danger:hover,
.lmls-profile .lmls-search-card__btn--danger:focus { border-color: #dc2626; color: #dc2626; }

/* The sign-in dialog. */
.lmls-auth .lmls-auth__submit {
    border: none;
    background: var(--lmls-primary, #1d4ed8);
    color: #fff;
}
.lmls-auth .lmls-auth__submit:hover,
.lmls-auth .lmls-auth__submit:focus { background: var(--lmls-secondary, #1344c0); color: #fff; }
.lmls-auth .lmls-auth__close {
    border: none;
    background: none;
    color: #9ca3af;
}
.lmls-auth .lmls-auth__close:hover,
.lmls-auth .lmls-auth__close:focus { background: #f3f4f6; color: #374151; }

/* The photo viewer's controls, over a photograph where pink would be loud. */
.lmls-lightbox .lmls-lightbox__nav,
.lmls-lightbox .lmls-lightbox__close {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.lmls-lightbox .lmls-lightbox__nav:hover,
.lmls-lightbox .lmls-lightbox__nav:focus,
.lmls-lightbox .lmls-lightbox__close:hover,
.lmls-lightbox .lmls-lightbox__close:focus {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

/* Two more the theme repaints, found by forcing :hover on every button the
   plugin renders rather than by guessing which ones look like buttons. Both are
   <button> elements that read as links — the account link in a menu, and the
   dialog's "Forgot your password" / "Use a verification code" / "Back" — so
   they carry no button styling of their own to outweigh the reset, and both
   turned into a solid #c36 block under the pointer. */
.lmls-auth .lmls-auth__link {
    border: none;
    background: none;
    color: var(--lmls-primary, #1d4ed8);
}
.lmls-auth .lmls-auth__link:hover,
.lmls-auth .lmls-auth__link:focus {
    background: none;
    color: var(--lmls-primary, #1d4ed8);
    text-decoration: underline;
}

/* The account link has no container of its own — in a menu it *is* the item —
   so this is the one place a doubled class earns its keep. */
.lmls-account-link__signin.lmls-account-link__signin {
    border: none;
    background: none;
    color: inherit;
}
.lmls-account-link__signin.lmls-account-link__signin:hover,
.lmls-account-link__signin.lmls-account-link__signin:focus {
    background: none;
    color: inherit;
    opacity: .75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NATIVE LAYOUTS
   ═══════════════════════════════════════════════════════════════════════════

   Everything below is STRUCTURE. Not one rule here names a colour, a font or a
   measurement that is not derived from a design token — a layout decides what
   sits where, and Settings → Design decides what it looks like. That
   separation is the reason there is no "Luxury layout" and no "Dark layout":
   those were palettes wearing a layout's name.

   Three independent choices, three groups of rules:

     .lmls-results--<flow>     Grid · List · Editorial · Compact
     .lmls-card--<layout>      Standard · Overlay · Horizontal · Minimal ·
                               Detailed · Editorial
     .lmls-single--<layout>    Classic · Split · Hero Split · Full Width ·
                               Sticky Aside

   They compose: any card layout inside any results flow, any detail layout
   beside either.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── The page container ─────────────────────────────────────────────────────
   The theme keeps its header and its footer. Between them the plugin owns a
   box with a width it can rely on, which is what every measurement in every
   layout below is written against.

   `overflow-x: clip` rather than `hidden`: hidden creates a scroll container,
   and a scroll container is the one thing that silently kills `position:
   sticky` for everything inside it — which is what the Sticky Aside layout and
   the side map both depend on. Clip contains the overflow and creates no
   scroll container at all. Themes that support neither simply get the default,
   which is what they have today.

   This REPLACES the `body { overflow-x: hidden !important }` the plugin used
   to print into wp_head on every listing page. */
.lmls-page {
    box-sizing: border-box;
    overflow-x: clip;
    background: var(--lmls-bg, transparent);
    color: var(--lmls-text, inherit);
    font-family: var(--lmls-font, inherit);
    font-size: var(--lmls-font-size, inherit);
}
.lmls-page *, .lmls-page *::before, .lmls-page *::after { box-sizing: inherit; }

.lmls-page__container {
    width: 100%;
    margin-inline: auto;
    /* Side padding is what stops a card touching the edge of a phone. It
       scales, because 16px on a 1440px page is a different amount of nothing
       than 16px on a 375px one. */
    padding-inline: clamp(14px, 4vw, 32px);
    padding-block: clamp(20px, 3vw, 40px);
}
.lmls-page--contained .lmls-page__container { max-width: var(--lmls-content-width, 1180px); }
.lmls-page--full .lmls-page__container      { max-width: none; }

/* The detail page carries its own max-width for the case where it is rendered
   outside this container — an Elementor template, a theme that calls the
   renderer itself. Inside the container the container has already decided, so
   it stands down rather than measuring the page twice. */
.lmls-page__container .lmls-single { max-width: none; }


/* ── Results flows ──────────────────────────────────────────────────────────
   One grid template, four arrangements. The cards are the same cards; what
   changes is how many go across, how much air is between them, and — for List
   and Compact — whether a card lays itself out as a row.

   The row treatment is written against the shared card skeleton
   (`.lmls-card__media` + `.lmls-card__body`) rather than against any one card
   layout, which is what keeps the two choices independent: put an Overlay card
   in a List flow and it becomes a wide overlay row, not a broken grid cell. */

.lmls-results { color: var(--lmls-ink, inherit); }

/* Grid — the default. The column count comes from [loyal_listings columns="…"]
   as an inline custom property, and the shared media queries above cap it
   rather than set it, so a grid asked for one column stays at one. There is
   nothing left for this flow to say, which is why it has no rules of its own. */

/* List, Editorial and Compact are one listing per row by definition, so their
   column count is already 1 and the grid collapses to a stack. What is left to
   say is the rhythm. */
.lmls-grid--list,
.lmls-grid--editorial,
.lmls-grid--compact { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 960px) {
    .lmls-grid--list,
    .lmls-grid--editorial,
    .lmls-grid--compact { grid-template-columns: minmax(0, 1fr); }
}

/* ── List ── image beside the information, one row per listing. */
.lmls-grid--list { gap: var(--lmls-card-gap, 20px); }

.lmls-grid--list > .lmls-card {
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    background: var(--lmls-card-bg, transparent);
    border: var(--lmls-card-border, 0) solid var(--lmls-line, #e5e7eb);
    border-radius: var(--lmls-radius, 12px);
    box-shadow: var(--lmls-card-shadow, none);
}
.lmls-grid--list > .lmls-card .lmls-card__media { height: 100%; }
.lmls-grid--list > .lmls-card .lmls-image {
    height: 100%;
    /* The row's height is set by its text, so the photo fills whatever that
       comes to rather than imposing its own aspect ratio on the row. */
    aspect-ratio: auto;
    min-height: 200px;
}
.lmls-grid--list > .lmls-card .lmls-card__body {
    justify-content: center;
    gap: 8px;
    padding: clamp(14px, 2vw, 22px);
}
.lmls-grid--list > .lmls-card .lmls-card__overlay { position: static; padding: 0; }
.lmls-grid--list > .lmls-card .lmls-card__scrim { display: none; }

@media (max-width: 700px) {
    .lmls-grid--list > .lmls-card { grid-template-columns: minmax(0, 1fr); }
    .lmls-grid--list > .lmls-card .lmls-image { aspect-ratio: var(--lmls-image-ratio, 4 / 3); min-height: 0; }
}

/* ── Editorial ── one photograph at a time, with a rule between properties.
   Low density on purpose: this is for a curated page somebody reads, not a
   result set somebody scans. */
.lmls-grid--editorial { gap: 0; }

.lmls-grid--editorial > .lmls-card {
    padding-block: clamp(24px, 4vw, 48px);
    border-bottom: 1px solid var(--lmls-line, #e5e7eb);
}
.lmls-grid--editorial > .lmls-card:first-child { padding-top: 0; }
.lmls-grid--editorial > .lmls-card:last-child  { border-bottom: 0; }
.lmls-grid--editorial > .lmls-card .lmls-image {
    aspect-ratio: var(--lmls-image-ratio, 16 / 9);
    border-radius: var(--lmls-radius, 12px);
}
.lmls-grid--editorial > .lmls-card .lmls-card__body {
    gap: 10px;
    padding-top: clamp(14px, 2vw, 22px);
}
.lmls-grid--editorial > .lmls-card .lmls-price__amount { font-size: clamp(20px, 2.4vw, 26px); }
.lmls-grid--editorial > .lmls-card .lmls-address__street { font-size: clamp(17px, 2vw, 21px); }

/* ── Compact ── the densest flow: a thumbnail, the address, the price and the
   facts on one line. Not a table — a table cannot reflow, and this has to be
   readable on a phone — but a row that reads like one. */
.lmls-grid--compact { gap: 8px; }

.lmls-grid--compact > .lmls-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 8px;
    border: var(--lmls-card-border, 0) solid var(--lmls-line, #e5e7eb);
    border-radius: calc(var(--lmls-radius, 12px) / 1.5);
    background: var(--lmls-card-bg, transparent);
}
.lmls-grid--compact > .lmls-card .lmls-image {
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--lmls-radius, 12px) / 2);
}
.lmls-grid--compact > .lmls-card .lmls-card__body { padding: 0; gap: 2px; }
.lmls-grid--compact > .lmls-card .lmls-card__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.lmls-grid--compact > .lmls-card .lmls-price__amount { font-size: 17px; font-weight: 700; }
.lmls-grid--compact > .lmls-card .lmls-address { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; }
.lmls-grid--compact > .lmls-card .lmls-address__street { font-size: 14px; }
.lmls-grid--compact > .lmls-card .lmls-address__locality { font-size: 13px; }
.lmls-grid--compact > .lmls-card .lmls-specs { gap: 4px 12px; }
.lmls-grid--compact > .lmls-card .lmls-card__chips { position: static; flex-direction: row; }
.lmls-grid--compact > .lmls-card .lmls-card__overlay { position: static; padding: 0; }
.lmls-grid--compact > .lmls-card .lmls-card__scrim { display: none; }
.lmls-grid--compact > .lmls-card .lmls-card__facts--secondary { display: none; }

@media (max-width: 700px) {
    .lmls-grid--compact > .lmls-card { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; }
}
@media (max-width: 460px) {
    .lmls-grid--compact > .lmls-card { grid-template-columns: 72px minmax(0, 1fr); }
    .lmls-grid--compact > .lmls-card .lmls-card__aside { grid-column: 2; }
}


/* ── Card layouts ───────────────────────────────────────────────────────────
   The shared skeleton first — media, body, and the surface the card sits on —
   then what each layout changes. Every surface value is a design token, so a
   site with a card radius of 0 and no shadow gets that on all six. */

/* Enumerated rather than written as a bare `.lmls-card`, and deliberately so.
   A package that ships its own card — luxury, modern, zillow, compact — owns
   its surface, and a shared rule at the same weight would have repainted every
   one of them the first time somebody opened the Design tab. These six are the
   layouts base ships, and they are the ones the design tokens govern. */
.lmls-card--standard,
.lmls-card--overlay,
.lmls-card--horizontal,
.lmls-card--minimal,
.lmls-card--detailed,
.lmls-card--editorial {
    background: var(--lmls-card-bg, transparent);
    border-radius: var(--lmls-radius, 12px);
}
.lmls-card__media > .lmls-image:first-child { border-radius: inherit; }
.lmls-card__facts:empty { display: none; }

/* The favourite button floats in the media's opposite corner from the chips.
   It is outside the anchor in every card template — a button inside a link is
   neither, and the keyboard reaches only one of them — so it needs positioning
   of its own rather than a place in a flex row.

   Horizontal is absent because its template gives the button a column of the
   grid; the other five leave it floating over the photograph. */
.lmls-card--standard > .lmls-favorite,
.lmls-card--overlay > .lmls-favorite,
.lmls-card--minimal > .lmls-favorite,
.lmls-card--detailed > .lmls-favorite,
.lmls-card--editorial > .lmls-favorite {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
}

/* ── Standard ── photo, then price, address and facts beneath. */
.lmls-card--standard {
    overflow: hidden;
    border: var(--lmls-card-border, 0) solid var(--lmls-line, #e5e7eb);
    box-shadow: var(--lmls-card-shadow, none);
}
.lmls-card--standard .lmls-card__body { padding: 12px 14px 16px; gap: 6px; }
.lmls-card--standard .lmls-price__amount { font-size: 19px; font-weight: 700; }

/* ── Overlay ── price and address on the photograph.
   The scrim is a gradient built from the CARD background, so a light palette
   gets a light scrim under dark text and a dark palette the reverse. Nothing
   here assumes white text on a dark photo. */
.lmls-card--overlay {
    overflow: hidden;
    border: var(--lmls-card-border, 0) solid var(--lmls-line, #e5e7eb);
    box-shadow: var(--lmls-card-shadow, none);
}
.lmls-card--overlay .lmls-card__media { border-radius: inherit; }
.lmls-card__scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--lmls-card-bg, #ffffff) 92%, transparent) 0%,
        color-mix(in srgb, var(--lmls-card-bg, #ffffff) 70%, transparent) 45%,
        transparent 100%
    );
}
.lmls-card__overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    color: var(--lmls-ink, #111827);
}
.lmls-card--overlay .lmls-price__amount { font-size: 20px; font-weight: 700; }
.lmls-card--overlay .lmls-card__body { padding: 12px 14px 16px; }

/* ── Horizontal ── photo beside the information. Independent of the results
   flow: a horizontal card in a three-across grid is a wide-ish card with the
   photo on the left, and it stacks when the cell gets narrow. */
.lmls-card--horizontal {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr) auto;
    align-items: stretch;
    overflow: hidden;
    border: var(--lmls-card-border, 0) solid var(--lmls-line, #e5e7eb);
    border-radius: var(--lmls-radius, 12px);
    box-shadow: var(--lmls-card-shadow, none);
    /* The card asks about its own width rather than the window's: the same
       card sits in a 1200px row and in a 300px grid cell on one page. */
    container-type: inline-size;
}
.lmls-card--horizontal .lmls-card__media { height: 100%; }
.lmls-card--horizontal .lmls-image { height: 100%; aspect-ratio: auto; min-height: 168px; }
.lmls-card--horizontal .lmls-card__body { justify-content: center; gap: 6px; padding: 14px 16px; }
.lmls-card--horizontal .lmls-card__aside { display: flex; align-items: flex-start; padding: 12px 12px 0 0; }
.lmls-card--horizontal .lmls-price__amount { font-size: 19px; font-weight: 700; }

@container (max-width: 460px) {
    .lmls-card--horizontal { grid-template-columns: minmax(0, 1fr) auto; }
    .lmls-card--horizontal .lmls-card__media { grid-column: 1 / -1; }
    .lmls-card--horizontal .lmls-image { aspect-ratio: var(--lmls-image-ratio, 4 / 3); min-height: 0; }
}

/* ── Minimal ── no panel, no border, no shadow. Typography and the photograph.
   The favourite button stays: a quieter card is not a card with less function. */
.lmls-card--minimal { background: transparent; }
.lmls-card--minimal .lmls-image { border-radius: var(--lmls-radius, 12px); }
.lmls-card--minimal .lmls-card__body { padding: 12px 0 0; gap: 4px; }
.lmls-card--minimal .lmls-price__amount { font-size: 18px; font-weight: 700; }
.lmls-card--minimal .lmls-specs { font-size: 13px; }
.lmls-card--minimal > .lmls-favorite { top: 10px; right: 10px; }

/* ── Detailed ── everything the card is configured to show, in two rows.
   The secondary row is quieter and hides itself when the site has configured
   no facts beyond the first three. */
.lmls-card--detailed {
    overflow: hidden;
    border: var(--lmls-card-border, 1px) solid var(--lmls-line, #e5e7eb);
    box-shadow: var(--lmls-card-shadow, none);
}
.lmls-card--detailed .lmls-card__body { padding: 14px 16px 18px; gap: 10px; }
.lmls-card--detailed .lmls-price__amount { font-size: 20px; font-weight: 700; }
.lmls-card--detailed .lmls-card__facts--primary .lmls-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.lmls-card--detailed .lmls-card__facts--primary .lmls-specs__item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 14px;
    border-left: 1px solid var(--lmls-line, #e5e7eb);
}
.lmls-card--detailed .lmls-card__facts--primary .lmls-specs__item:first-child { border-left: 0; padding-left: 0; }
.lmls-card--detailed .lmls-card__facts--primary .lmls-specs__value { font-size: 16px; font-weight: 700; }
.lmls-card--detailed .lmls-card__facts--primary .lmls-specs__label,
.lmls-card--detailed .lmls-card__facts--primary .lmls-specs__unit {
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lmls-muted, #6b7280);
}
.lmls-card--detailed .lmls-card__facts--secondary {
    padding-top: 10px;
    border-top: 1px dashed var(--lmls-line, #e5e7eb);
    font-size: 13px;
    color: var(--lmls-muted, #6b7280);
}

/* ── Editorial ── the photograph leads and the address names the property
   before the price quotes a number. */
.lmls-card--editorial { background: transparent; }
.lmls-card--editorial .lmls-image {
    aspect-ratio: var(--lmls-image-ratio, 4 / 3);
    border-radius: var(--lmls-radius, 12px);
}
.lmls-card--editorial .lmls-card__body { padding: 14px 0 0; gap: 8px; }
.lmls-card--editorial .lmls-card__link { display: flex; flex-direction: column; gap: 6px; }
.lmls-card--editorial .lmls-address__street { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.lmls-card--editorial .lmls-price__amount { font-size: 17px; font-weight: 600; color: var(--lmls-muted, #6b7280); }
.lmls-card--editorial .lmls-specs { font-size: 13px; }


/* ── Shared card pieces ─────────────────────────────────────────────────────
   The spec row, which every card layout uses and none of them redefines. */
.lmls-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--lmls-muted, #6b7280);
    font-size: 13.5px;
}
.lmls-specs__item { display: inline-flex; align-items: baseline; gap: 4px; }
.lmls-specs__value { font-weight: 700; color: var(--lmls-ink, #111827); }
.lmls-specs--inline { gap: 4px 10px; font-size: 13px; }
.lmls-specs--inline .lmls-specs__item:not(:last-child)::after {
    content: "\00b7";
    margin-left: 10px;
    color: var(--lmls-line, #e5e7eb);
}


/* ── Detail layouts ─────────────────────────────────────────────────────────
   Classic is the shape the rules above already describe. These four change it.
   All five render all five regions, so no widget an admin has placed can be
   lost by switching between them. */

/* ── Split ── the summary asks two questions side by side instead of one
   across. Below the breakpoint it stacks into the order it is written in,
   which is Classic's order. */
.lmls-single__summary--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 16px 40px;
}
.lmls-single__summary--split .lmls-single__figures {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.lmls-single__summary--split .lmls-specs { margin-left: 0; }
@media (min-width: 901px) {
    .lmls-single__summary--split .lmls-single__figures { align-items: flex-end; }
    .lmls-single__summary--split .lmls-single__figures .lmls-specs { justify-content: flex-end; }
}
@media (max-width: 900px) {
    .lmls-single__summary--split { grid-template-columns: minmax(0, 1fr); }
}

/* ── Hero Split ── the gallery and the headline share the first screen.
   The panel is a column, so anything an admin puts in the `hero` region — a
   contact form, an open-house notice — lands beside the photographs rather
   than a scroll below them. */
.lmls-single--hero-split .lmls-single__split {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--lmls-section-gap, 32px);
    align-items: start;
    margin-bottom: var(--lmls-section-gap, 32px);
}
.lmls-single--hero-split .lmls-single__hero { margin-bottom: 0; }
.lmls-single--hero-split .lmls-single__panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: clamp(18px, 2.4vw, 26px);
    background: var(--lmls-surface, #fff);
    border: 1px solid var(--lmls-line, #e5e7eb);
    border-radius: var(--lmls-radius, 12px);
}
.lmls-single--hero-split .lmls-single__panel .lmls-price__amount {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}
/* In a narrow column the spec strip reads as a small grid rather than a row
   that wraps mid-fact. */
.lmls-single--hero-split .lmls-single__panel .lmls-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
}
.lmls-single--hero-split .lmls-single__panel .lmls-specs__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    border: 0;
}
.lmls-single--hero-split .lmls-single__panel .lmls-specs__value { font-size: 18px; font-weight: 700; }
/* The gallery is the same component in the same variant; only its mosaic is
   tightened, because it is in a column rather than across the page. */
.lmls-single--hero-split .lmls-gallery--hero { grid-template-columns: repeat(3, 1fr); }
.lmls-single--hero-split .lmls-gallery--hero .lmls-gallery__item:nth-child(n+5) { display: none; }

@media (max-width: 900px) {
    .lmls-single--hero-split .lmls-single__split { grid-template-columns: minmax(0, 1fr); }
    .lmls-single--hero-split .lmls-gallery--hero { grid-template-columns: repeat(2, 1fr); }
}

/* ── Full Width ── no sidebar in the main flow.
   The `aside` region is not discarded; it renders in a band of its own beneath
   the main column, laid out across the page. A layout is a shape, not a licence
   to drop configuration. */
.lmls-single--full-width { max-width: none; }
.lmls-single--full-width .lmls-single__body--wide { grid-template-columns: minmax(0, 1fr); }
.lmls-single--full-width .lmls-single__prose { max-width: 78ch; }

.lmls-single__band { margin-top: var(--lmls-section-gap, 32px); }
.lmls-single__band:empty { display: none; }
.lmls-single__band--aside .lmls-region {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--lmls-card-gap, 20px);
    align-items: start;
}

/* ── Sticky Aside ── the sidebar follows the reader.
   CSS only. No scroll listener, no measured offsets — and below the layout
   breakpoint the property simply stops applying, which is the right behaviour
   on a phone and costs nothing to get. */
.lmls-single__aside--sticky {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    /* Room for the scrollbar when a tall sidebar does need to scroll. */
    scrollbar-width: thin;
}
@media (max-width: 900px) {
    .lmls-single__aside--sticky {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}


/* ── Region wrappers ────────────────────────────────────────────────────────
   A region prints nothing when it is empty, so these cost nothing where they
   are unused. Where they are used they give the blocks inside them the same
   rhythm as everything around them. */
.lmls-region { display: flex; flex-direction: column; gap: var(--lmls-card-gap, 20px); }
.lmls-single__main > .lmls-region,
.lmls-single > .lmls-region { margin-block: var(--lmls-section-gap, 32px); }
.lmls-single__aside > .lmls-region { margin: 0; }


/* ── Empty results ─────────────────────────────────────────────────────────── */
.lmls-empty {
    margin: 0;
    padding: clamp(28px, 6vw, 56px) 20px;
    text-align: center;
    color: var(--lmls-muted, #6b7280);
    border: 1px dashed var(--lmls-line, #e5e7eb);
    border-radius: var(--lmls-radius, 12px);
}