/* ============================================================
   ParkoLow — Desktop layer
   ------------------------------------------------------------
   Loaded AFTER app.css. Everything lives inside
   @media (min-width: 820px) so the mobile experience (<820px) is
   byte-for-byte unchanged. From 820px up this layer dissolves the
   420px "phone frame" (and the 820–1023px tablet framing in app.css)
   and lays the same DOM out as a real full-width desktop site.
   No markup/JS changes required beyond one optional wrapper on the
   results page (.results-sidebar).
   ============================================================ */

@media (min-width: 820px) {

    /* ── 0. Shared edge / container width ──────────────────────
       --edge-home is symmetric horizontal padding that caps content at a
       max width and keeps every page's header/nav/grid aligned on the same
       left/right edges. The 100% inside resolves against the using element
       (= viewport). This used to be three separate widths (--edge-wide
       1240px for results/lot-detail, --edge-read 820px for legal/FAQ pages,
       plus an unused --edge-mid) — now everything shares this one rail so
       page width doesn't jump around when navigating the site. Long-form
       article/legal body text still caps narrower on its own (.legal-body's
       860px max-width) for readability — that's an intentional exception,
       not part of this shared rail.
       --section-gap is the standard spacing between/within top-level page
       sections (was a mix of 18/30/40px on the homepage) — use this for any
       new section-level gap instead of a new hardcoded value.
       --shadow-card-desktop is the "floating panel" shadow shared by the
       desktop-only white cards (results sidebar, amenities panel, inline
       reservation result, ...) — distinct from app.css's --shadow-card,
       which is the smaller mobile+desktop card-hover shadow. */
    .phone-frame {
        --edge-home: max(24px, calc((100% - 1140px) / 2));
        --section-gap: 24px;
        --shadow-card-desktop: 0 1px 6px rgba(15, 36, 96, 0.08);
    }

    /* ── 1. Un-cage the phone frame ──────────────────────────── */
    body { display: block; background: #eef2ff; }

    .desktop-layout { display: block; height: auto; overflow: visible; }

    .phone-frame-wrapper {
        display: block;
        flex: none;
        width: 100%;
        min-height: 100vh;
        padding: 0;
        background: #eef2ff;
    }

    .phone-frame {
        max-width: none;
        width: 100%;
        height: auto;
        max-height: none;
        min-height: 100vh;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
        transform: none;            /* kills the 1.2/1.45/1.9 scale rules */
        background: transparent;
        display: block;
    }

    /* The per-page inner scrollers now flow in the normal document. */
    .page-scroll {
        overflow: visible;
        height: auto;
        min-height: 0;
        background: transparent;
    }

    .results-root {
        display: block;
        height: auto;
        overflow: visible;
    }

    /* ── 2. Shared full-width sticky headers ─────────────────── */
    .results-topbar {
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 13px var(--edge-home);
        box-shadow: 0 1px 10px rgba(15, 36, 96, 0.18);
    }

    /* The language switcher keeps its globe + code + chevron dropdown here
       too — one control, one behaviour at every width (app.css). */

    /* ── 3. Home ─────────────────────────────────────────────── */
    /* Home's body block is `.phone-frame > .page-scroll` (unique to home). */
    .phone-frame > .page-scroll { background: transparent; }

    .hero {
        padding: 13px var(--edge-home) 52px;
        gap: var(--section-gap);
        background-image:
            linear-gradient(160deg, rgba(26, 79, 214, 0.65) 0%, rgba(26, 86, 219, 0.65) 60%, rgba(37, 99, 235, 0.65) 100%),
            url('/img/page-hero.jpg');
        background-size: cover;
        background-position: center;
    }

    .hero .top-bar { width: 100%; }


    /* Fluid across the desktop range, not a step up to 40px at 820px: the
       tagline only gets half the rail once .hero-cols splits, and that half is
       ~380px at the narrow end. The clamp lands on the old 40px/20px sizes
       once the rail is actually wide enough for them (~1180px). */
    .tagline { margin-top: 8px; margin-bottom: 20px; }
    .tagline h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; }
    .tagline h2,
    .tagline p { font-size: clamp(17px, 1.7vw, 20px); margin-top: 10px; }

    /* Hero splits in two: the untouched search card left, stats panel right.
       The card keeps its own rules below — max-width + auto margins now just
       centre it inside its own column, which is the intended look.
       minmax(0, 1fr): a long stat label or an unbreakable lot name must not be
       able to push its column past half the rail. */
    .hero-cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--section-gap);
        align-items: stretch;
    }

    /* The stats panel and the search card share a bottom edge whichever column
       is taller. Both columns stretch to the row height; the left one is a flex
       column whose auto top margin on .hero-stats pushes it down, leaving the
       tagline pinned to the top. */
    .hero-intro {
        display: flex;
        flex-direction: column;
    }
    .hero-intro .hero-stats { margin-top: auto; }

    .hero-stats {
        padding: 24px;
        border-radius: 18px;
    }
    .hero-stats__row { gap: 12px; }

    .hero-stat__value { font-size: 30px; }
    .hero-stat__label { font-size: 13px; }

    .hero-stats__foot { margin-top: 16px; padding-top: 14px; }
    .hero-stats__fresh { font-size: 14px; }
    /* Tracks the card's larger padding (24px) and radius (18px). */
    .hero-stats__source-bar {
        margin: 16px -24px -24px;
        padding: 12px 24px;
        border-radius: 0 0 18px 18px;
    }
    .hero-stats__source { font-size: 13px; }

    /* Search card → same stacked layout as mobile, just centered */
    .hero .search-card {
        width: 100%;
        /* max-width: 470px; */
        margin: 0 auto;
        padding: 20px;
        align-self: end;
    }
    /* Form type — bumped slightly */
    .hero .search-card .field-label { font-size: 12px; }
    .hero .search-card .date-pill { font-size: 15px; padding: 12px 14px; }
    .hero .search-card .days-chip-inner { font-size: 14px; }
    .hero .search-card .stepper-count { font-size: 18px; }
    .hero .search-card .stepper-hint { font-size: 12px; }
    .hero .search-card .search-btn { font-size: 19px; padding: 16px; }
    .hero .search-card .search-badge { font-size: 13px; }

    /* Below-the-fold content sections — type bumped noticeably.
       All share --edge-home so every section's content lines up on the
       same left/right edges (uniform 1140px rail). */

    .home-winners-section .section-title {
        padding: 0 var(--edge-home);
        font-size: 30px;
        text-align: center;
        margin-bottom: 4px;
    }
    .home-winners-section .winners-intro {
        padding: 0 var(--edge-home);
        text-align: center;
        font-size: 16px;
        margin-bottom: 0;
    }
    .home-winners {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--section-gap);
        padding: 18px var(--edge-home) 0;
    }
    /* flex: 1 on the card so all three stay the same height even when one
       category's name wraps — the toplist links then sit on one line. */
    .home-winner {
        flex: 1;
        padding: 16px 18px;
        border-radius: 16px;
        box-shadow: var(--shadow-card-desktop);
    }
    .home-winner__media { width: 96px; height: 96px; border-radius: 14px; }
    .home-winner__label { font-size: 11px; }
    .home-winner__value { font-size: 26px; }
    .home-winner__name { font-size: 18px; }
    .home-winner__toplist { font-size: 14px; padding: 4px; justify-content: center; }

    /* The horizontal rail lives on the section, not the grid inside it: the
       grid caps at 1140px but has no padding of its own, so between 820px and
       1188px this is what keeps it off the viewport edge — and aligned with
       the heading and intro above it. */
    .home-prices { padding: 28px var(--edge-home) 0; }
    .home-prices .section-title {
        font-size: 30px;
        text-align: center;
    }
    .home-prices .prices-intro {
        text-align: center;
        font-size: 16px;
    }
    /* The grid's own desktop rules live in section 10. */

    .how-it-works {
        padding: 36px var(--edge-home) 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--section-gap);
        align-items: stretch;
    }
    .how-it-works .section-title {
        grid-column: 1 / -1;
        text-align: center;
        font-size: 30px;
        margin-bottom: 4px;
    }
    /* Icon sits inline with the title (row 1); description spans the full
       card width underneath (row 2) — `display: contents` lets step-text's
       children (strong/span) join this grid directly instead of being
       trapped inside their own flex column, which is what forced the icon
       above the title and left the card mostly empty. */
    .how-it-works .step-row {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        row-gap: 4px;
        align-items: center;
        margin: 0;
        background: #fff;
        border-radius: 16px;
        padding: 16px 18px;
        box-shadow: 0 1px 4px rgba(15, 36, 96, 0.08);
        transition: box-shadow 0.15s;
    }
    /* Hover lift lives here rather than in the base rule: a step row is only a
       card at this breakpoint — on mobile it's bare text on the page background,
       where a shadow would draw a halo around nothing. */
    .how-it-works .step-row:hover {
        box-shadow: var(--shadow-card-hover);
    }
    .how-it-works .step-icon {
        grid-row: 1;
        grid-column: 1;
        width: 34px;
        height: 34px;
        font-size: 16px;
        border-radius: 9px;
        margin: 0;
    }
    .how-it-works .step-text { display: contents; }
    .how-it-works .step-text strong { grid-row: 1; grid-column: 2; font-size: 16px; }
    .how-it-works .step-text span { grid-row: 2; grid-column: 1 / -1; font-size: 14px; margin-top: 0; }

    .faq-section { padding: 24px var(--edge-home) 32px; }
    /* Drop the mobile full-bleed negative margin so the FAQ header lines up
       with the shared content rail (it stays full-bleed on mobile). */
    .faq-section .faq-header { margin-inline: 0; }
    .faq-section .faq-header__title { font-size: 36px; }
    .faq-section .faq-item summary { font-size: 16px; padding: 18px 20px; min-height: 60px; }
    .faq-section .faq-answer { font-size: 15px; padding: 0 20px 18px; }

    .lot-links { padding-inline: var(--edge-home); }
    .lot-links__title { font-size: 12px; }
    .lot-links__item { font-size: 13px; }

    .section-divider { margin-inline: var(--edge-home); }

    /* Latest-articles block (home only). Scoped to .blog-latest so the
       standalone blog list page (.blog-list) keeps its app.css layout. */
    .blog-latest {
        padding: 28px var(--edge-home) 8px;
    }
    .blog-latest .section-title {
        text-align: center;
        font-size: 30px;
        margin-bottom: 16px;
    }
    .blog-latest__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--section-gap);
    }
    .blog-latest .faq-see-all {
        display: block;
        text-align: center;
        margin-top: 18px;
    }

    /* FAQ + Latest-articles side by side on desktop; on mobile the same DOM
       order just stacks. */
    .home-faq-blog {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--section-gap);
        align-items: start;
        padding: 24px var(--edge-home) 32px;
    }
    /* Rail lives on the wrapper; the sections drop their own horizontal
       padding so both columns start at the same point. */
    .home-faq-blog > .faq-section,
    .home-faq-blog > .blog-latest {
        padding: 0;
    }
    /* Two columns of cards, not four — each half of the row is ~550px, so the
       auto-fit minmax(300px, …) above would otherwise split each side again. */
    .home-faq-blog > .blog-latest .blog-latest__list {
        grid-template-columns: 1fr;
    }
    /* FAQ's photo banner is hidden here only (still shown on mobile and on
       the standalone /faq page) and its title becomes a plain heading, so it
       matches the Latest-articles heading beside it. */
    .home-faq-blog .faq-image { display: none; }
    .home-faq-blog .faq-header { margin: 0; overflow: visible; }
    .home-faq-blog .faq-header__title {
        position: static;
        inset: auto;
        display: block;
        padding: 0;
        background: none;
        color: var(--dark);
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 16px;
    }
    /* Match it, so the two column headings read as one row. Centering only
       makes sense for the full-width sections; these are half-width. */
    .home-faq-blog > .blog-latest .section-title {
        font-size: 26px;
        line-height: 1.2;
        text-align: left;
    }
    .home-faq-blog > .blog-latest .faq-see-all {
        text-align: left;
    }

    /* Footer: full-bleed dark band on every page, its content aligned to the
       shared rail. Applies everywhere (not home-only as before) — the two
       pages whose footer sits inside a padded grid get the bleed back with
       negative margins in sections 4 and 5. */
    .site-footer {
        padding: 40px var(--edge-home) 20px;
    }

    /* Wider first column than the logo alone would need — the about paragraph
       under it renders as a tall ribbon at the old 230px cap. */
    .site-footer__top {
        grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
        align-items: start;
        gap: 48px;
    }

    .site-footer__brand img { width: 165px; }

    /* auto-fit, not a fixed 4: the partners column is conditional, so the
       row has to look deliberate at 3 columns too. */
    .site-footer__cols {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 24px 32px;
    }

    .site-footer__bottom {
        justify-content: space-between;
        margin-top: 32px;
        padding-top: 16px;
    }

    /* ── 4. Results: sticky sidebar + card grid ────────────────
       Guarded on :has(> .results-sidebar) — only the results page has that
       wrapper. Without the guard this also matched the top-list landing
       page's .results-root > .page-scroll (same base markup, no sidebar),
       scrambling its header/intro/list/search-form into a 280px/1fr grid
       with no sidebar to fill the first column. */
    .results-root > .page-scroll:has(> .results-sidebar) {
        display: grid;
        /* The rail is two gutter tracks, not `padding: 0 var(--edge-home)`, so
           the footer can bleed to the viewport edges by spanning every track.
           --edge-home can't do that job from in here: it is
           `calc((100% - 1140px) / 2)`, and a percentage inside a child's
           negative margin resolves against the *padded* box — already capped
           at 1140px — so the bleed came out 24px instead of the real gutter.
           The column gap is an explicit track rather than `column-gap`, which
           would also open between the gutters and the content and push the
           rail 28px in; row-gap still handles the vertical spacing. The tracks
           reproduce --edge-home exactly: 280 + 28 + 832 = the same 1140px cap,
           and the gutter minimum is the same 24px floor. */
        grid-template-columns:
            [full-start] minmax(24px, 1fr)
            [content-start sidebar-start] 280px [sidebar-end]
            28px
            [main-start] minmax(0, 832px) [main-end content-end]
            minmax(24px, 1fr) [full-end];
        align-items: start;
        column-gap: 0;
        row-gap: 28px;
        padding: 28px 0 56px;
    }

    /* Summary bar (from the .results-search-widget display:contents wrapper —
       see app.css). Explicit placement: column 2 (content column) only, row 1,
       so it sits above .results-content without also sitting above the sidebar
       — the sidebar spans both rows below and keeps starting flush at the top.
       The pill-badge / blue-button look is shared with mobile (defined in
       app.css) — this just bumps sizing up to match the sidebar's card
       weight and swaps in the fuller wording now that there's room for it. */
    /* The wrapper is the grid item, not the bar inside it: app.css's
       `display: contents` is commented out, so the bar is a grandchild and any
       grid placement on it is inert. It used to land in the right cell only
       because auto-placement skipped column 1, which the sidebar occupies —
       once the rail added gutter tracks, "first free cell" became the left
       gutter. Placing it explicitly is what should have been here all along. */
    .results-search-widget {
        grid-column: main;
        grid-row: 1;
        background: transparent;
        padding: 0;
    }

    .results-summary-bar {
        border: 1px solid var(--orange);
        margin: 0;
        padding: 16px 22px;
        border-radius: 16px;
        box-shadow: var(--shadow-card-desktop);
        flex-wrap: nowrap;
        transition: box-shadow 0.15s, border-color 0.15s;
    }
    .results-summary-bar:hover {
        border-color: var(--orange);
        box-shadow: 0 4px 16px rgba(15, 36, 96, 0.12);
    }
    .rsb-dates {
        font-size: 16px;
        gap: 8px;
    }
    .rsb-right { gap: 16px; }
    .rsb-meta { gap: 8px; }
    .rsb-meta span {
        padding: 6px 13px;
        font-size: 13px;
    }
    .rsb-edit {
        padding: 9px 16px;
        font-size: 14px;
        gap: 6px;
    }

    /* Sidebar (the wrapper added in the template). Mobile keeps display:contents.
       grid-row is pinned to 1 / 3 (not 1 / -1) — .page-scroll has a 3rd grid item
       further down (.site-footer, auto-placed into row 3 since it has no
       explicit grid-row of its own, only grid-column: 1 / -1). `-1` would pull
       the sidebar's span across that row too, forcing the row-sizing algorithm
       to inflate rows 1–2 to fit the sidebar's now-taller span — producing a
       large empty gap above .results-content. */
    .results-sidebar {
        grid-column: sidebar;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
        gap: 18px;
        position: sticky;
        top: 84px;
        background: #fff;
        border-radius: 18px;
        padding: 20px;
        /* Blue accent border — every other card on this page is plain white
           with the same subtle shadow, so without this the sidebar just
           blends into the results grid instead of reading as its own
           sort/filter control panel. */
        border: 1px solid var(--blue);
        box-shadow: var(--shadow-card-desktop);
    }
    .results-sidebar .results-meta-bar,
    .results-sidebar .results-meta-bar--filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0;
        background: transparent;
        overflow: visible;
    }
    .results-sidebar .meta-bar-label {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
    }
    .results-sidebar .sort-pills {
        flex-direction: column;
        gap: 8px;
    }
    .results-sidebar .sort-pill {
        text-align: center;
        padding: 10px 14px;
    }

    /* Main column */
    .results-content {
        grid-column: main;
        grid-row: 2;
        padding-bottom: 8px;
    }

    .results-content .top-picks-section { padding: 4px 0 18px; }
    .results-content .top-picks-header { padding: 0 0 14px; font-size: 18px; }
    /* Top Picks is a curated 2-card row, not a wrap-friendly list like
       Reservable Lots below — keep it a horizontally-scrolling carousel
       rather than a grid that could wrap to 1 column or stretch with only
       2 items. Card width matches the Reservable Lots grid columns when
       there's room (half the row, minus half the gap); below that it clamps
       to the same 260px floor and the row scrolls instead of squeezing
       the price + button below a usable width. */
    .results-content .top-picks-scroll {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        padding: 4px 0 8px;
    }
    .results-content .top-picks-scroll .pick-card {
        width: max(260px, calc(50% - 8px));
        flex-shrink: 0;
    }
    .results-content .pick-card-image { height: 170px; }

    .results-content .all-results-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
        align-items: start;
        padding: 18px 0 8px;
    }
    /* Reservable Lots: a single-column list of horizontal cards (square
       image left, details right) — matching Booking.com's list style —
       instead of the vertical image-on-top grid used for Top Picks above.
       .pick-card-list is otherwise a single grid item in .all-results-
       section's grid; span it across the row so the list gets the full
       content width, which a horizontal card needs room for. */
    .results-content .pick-card-list {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 0;
    }
    .results-content .pick-card-list .pick-card {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .results-content .pick-card-list .pick-card-image {
        width: 220px;
        height: auto;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }
    .results-content .pick-card-list .pick-card-body {
        flex: 1;
        min-width: 0;
    }
    /* The square image no longer fills the whole card width like it did in
       the vertical layout, leaving spare room next to it — use it for the
       lot's own description instead of empty space. Clamped to 3 lines
       rather than a hard character cut, so it adapts to the card's actual
       width instead of a fixed guess. */
    .results-content .pick-card-list .pick-card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 6px 0 12px;
        font-size: var(--fs-sm);
        color: var(--muted);
        line-height: 1.5;
    }
    .results-content .all-results-header {
        grid-column: 1 / -1;
        padding: 0 0 4px;
    }
    /* Flip the macro cards from the mobile side-layout to cover-image-on-top
       so every result card matches the top cards. Mobile keeps the side layout. */
    .results-content .lot-card {
        margin: 0;
        height: 100%;
        flex-direction: column;
    }
    .results-content .lot-card-left {
        width: auto;
        height: 170px;
        padding: 0;
    }
    /* Logo fallback: contained + centered with breathing room (never cropped). */
    .results-content .lot-card-left--icon {
        padding: 24px;
        background-origin: content-box;
        background-size: contain;
    }
    .results-content .lot-card-right {
        padding: 14px 16px 16px;
    }
    .results-content .lot-card--clickable:hover {
        /* transform: translateY(-2px) already applies via the base
           .lot-card--clickable:hover rule in app.css — just the stronger
           shadow is desktop-specific. */
        box-shadow: 0 6px 20px rgba(15, 36, 96, 0.14);
    }

    .results-content .empty-state { grid-column: 1 / -1; }

    /* Full viewport width, like the home page's bands: spanning the gutter
       tracks is all it takes now that the rail lives in the grid rather than
       in padding. Only the grid's bottom padding still needs undoing. Its own
       content still lines up on the rail — that comes from .site-footer's
       `padding: 40px var(--edge-home)`, where the percentage now resolves
       against the full-width footer. */
    .results-root > .page-scroll:has(> .results-sidebar) > .site-footer {
        grid-column: full;
        margin: 0 0 -56px;
    }

    /* ── 5. Lot detail: gallery left, sticky booking right ────── */
    /* Only the detail page has `> .lot-booking-col`; the booking entry
       page (also .lot-page) is excluded and centered instead. */
    .lot-page > .page-scroll:has(> .lot-booking-col) {
        display: grid;
        /* The rail is two 1fr gutter tracks, not `padding: 0 var(--edge-home)`,
           so the footer can bleed to the viewport edges by simply spanning
           every track. --edge-home can't do that job from in here: it is
           `calc((100% - 1140px) / 2)`, and a percentage inside a child's
           negative margin resolves against the *padded* box — already capped
           at 1140px — so the bleed came out 24px instead of the real gutter
           and the dark band sat inset from both edges.
           The tracks reproduce --edge-home exactly: 720 + 400 + one 20px gap
           = the same 1140px cap, and the 4px minimum plus that gap gives the
           same 24px floor.
           The sticky column caps at 400px on wide desktops but scales down
           with the viewport below that, so the gallery/form column (the part
           people actually read and fill in) isn't left squeezed at the narrow
           end of the desktop range (e.g. 820px iPad-Air-portrait width). */
        grid-template-columns:
            [full-start] minmax(4px, 1fr)
            [content-start main-start] minmax(0, 720px)
            [main-end side-start] clamp(300px, 38vw, 400px) [side-end content-end]
            minmax(4px, 1fr) [full-end];
        gap: 20px;
        align-items: start;
        padding: 28px 0 56px;
        background: transparent;
    }
    /* Everything is a reading-column block by default; the booking column, the
       header and the footer opt out below. The mobile margins on those blocks
       are the grid's job here, so they're dropped. */
    .lot-page > .page-scroll:has(> .lot-booking-col) > * {
        grid-column: main;
        margin: 0;
    }
    .lot-page > .page-scroll:has(> .lot-booking-col) > .lot-page-header {
        grid-column: content;
        padding: 4px 0 0;
    }
    /* The gallery, description and pricelist cards all get the same floating
       panel treatment; on the phone .lot-panel's border carries them instead. */
    .lot-page > .page-scroll:has(> .lot-booking-col) > .lot-gallery-card,
    .lot-page > .page-scroll:has(> .lot-booking-col) > .lot-panel {
        background: #fff;
        border: 0;
        border-radius: 18px;
        padding: 18px;
        box-shadow: var(--shadow-card-desktop);
    }
    .lot-how-it-works {
        padding: 8px 0;
    }
    .lot-gallery-card .lot-gallery {
        aspect-ratio: 16 / 9;
    }
    /* Thumbnails stop scrolling and become a fixed row — with 8 of them the
       strip lines up edge to edge under the stage. */
    .lot-thumbs {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        overflow: visible;
    }
    .lot-thumb {
        width: auto;
        height: 62px;
    }
    /* Dots are the phone's slide affordance; the thumbnails replace them. */
    .lot-gallery__dots {
        display: none;
    }
    /* The booking widget and its assurances sit in the reading column, right
       under the gallery — the sidebar carries the pricelist instead. */
    .lot-page > .page-scroll:has(> .lot-booking-col) > .lot-booking-col {
        gap: 12px;
    }
    .lot-booking-col > .lot-page-search {
        border-radius: 18px;
        scroll-margin-top: 100px;
    }
    /* The side panel shares the gallery's row and ends on the same line as the
       gallery card. `height: 0` keeps its own content — a price table that can
       run to 60+ rows — from sizing the row; `min-height: 100%` then stretches
       it back to whatever height the gallery gave that row. Plain `stretch`
       can't do this: an auto-sized grid row grows to its tallest item, so the
       full table would set the height and the gallery would be left short. */
    .lot-page > .page-scroll:has(> .lot-booking-col) > .lot-side-panel {
        grid-column: side;
        grid-row: 2;
        height: 0;
        min-height: 100%;
    }
    /* Takes the slack left by the assurances, the heading and the dates. */
    .lot-side-panel .lot-prices-scroll {
        flex: 1;
        min-height: 80px;
        max-height: none;
    }
    /* Reservation result (form / not-reservable / success / payment-error) —
       same card treatment as the panels above it, so the section doesn't just
       float on the page background under the gallery card. */
    .lot-page > .page-scroll:has(> .lot-booking-col) > .lot-search-result {
        background: #fff;
        border-radius: 18px;
        box-shadow: var(--shadow-card-desktop);
        overflow: hidden;
        padding: 14px 0;
        /* scrollIntoView({block:'start'}) (reservationApp.js/searchApp.js)
           aligns this element's top edge with the viewport's top edge — but
           .results-topbar is sticky here (~84px tall, matching the sticky
           sidebar's own `top` offset above), so it was covering the first
           field labels after the auto-scroll. Base app.css's 12px
           scroll-margin-top only accounted for mobile, where the topbar
           doesn't overlay content. */
        scroll-margin-top: 82px;
    }
    .lot-services {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* A page-level closing section, not a reading-column card — it runs the
       full content rail, under the sidebar as well. */
    .lot-page > .page-scroll:has(> .lot-booking-col) > .lot-how-it-works {
        grid-column: content;
    }
    /* Full viewport width, like the home page's bands: spanning the gutter
       tracks is all it takes now that the rail lives in the grid rather than
       in padding. Only the grid's bottom padding still needs undoing. */
    .lot-page > .page-scroll:has(> .lot-booking-col) > .site-footer {
        grid-column: full;
        margin: 0 0 -56px;
    }

    .lot-page .modal-lot-name { font-size: 28px; }

    /* ── 6. Booking modal → centered dialog ──────────────────── */
    .modal-overlay {
        position: fixed;
        align-items: center;
    }
    .modal-sheet {
        border-radius: 22px;
        max-width: 520px;
        max-height: min(88vh, 820px);
        animation: modalPop 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .modal-handle { display: none; }

    /* Terms / privacy overlay → centered dialog */
    .terms-overlay {
        position: fixed;
        align-items: center;
    }
    .terms-sheet {
        border-radius: 22px;
        max-width: 780px;
        height: min(82vh, 760px);
        animation: modalPop 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .terms-sheet-handle { display: none; }

    @keyframes modalPop {
        from { transform: translateY(14px) scale(0.98); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }

    /* ── 7. FAQ / legal pages → centered reading column ──────── */
    .legal-page {
        display: block;
        height: auto;
        overflow: visible;
        flex: none;
    }
    /* Header is now .results-topbar + .lot-page-header, same markup as the
       /top landing pages — .results-topbar already gets its sticky/padding/
       shadow treatment from its own generic rule above (section 2), and the
       .landing-page header-sizing rules below (section 9) are shared with
       .legal-page too. Nothing legal-page-specific needed here anymore. */
    .legal-body {
        overflow: visible;
        max-width: 860px;
        margin: 28px auto;
        padding: 36px 44px 48px;
        background: #fff;
        border-radius: 18px;
        box-shadow: var(--shadow-card-desktop);
    }
    .legal-body p,
    .legal-body li { font-size: 14px; }
    .faq-page-body.legal-body { padding-inline: 36px; }
    .faq-page-body .faq-section { max-width: none; padding: 0; }

    /* Blog list page (.legal-page.blog-page): give it a real card grid
       instead of the full-width 2-col mobile fallback. */
    .blog-page .blog-list {
        padding: 28px var(--edge-home) 40px;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--section-gap);
        align-items: start;
    }
    .blog-page .blog-empty { padding: 28px var(--edge-home); }

    /* ── 8. Error pages ──────────────────────────────────────── */
    .error-page { min-height: 80vh; }

    /* ── 9. Top-list landing page ───────────────────────────────
       Shares .results-root/.page-scroll markup with the results page but
       has no .results-sidebar (see the :has() guard in section 4), so it
       falls back to a plain single column there. Cap it to the shared
       content rail and give it normal desktop spacing/type instead of the
       raw mobile 16px-padding blocks stacked full width.
       .lot-page-header/.modal-lot-name sizing is shared with .legal-page
       (FAQ/terms/privacy/blog) too — same header markup, both page families. */
    .landing-page .lot-page-header,
    .legal-page .lot-page-header {
        padding: 24px var(--edge-home) 0;
    }
    .landing-page .modal-lot-name,
    .legal-page .modal-lot-name {
        font-size: 32px;
    }
    .landing-page .landing-intro {
        /* Left edge stays aligned with .lot-page-header's edge-home padding above it.
           max-width includes that same padding twice (border-box) so the actual text
           column stays capped at 860px regardless of how wide --edge-home grows —
           without this, a wide viewport's padding alone could exceed 860px and leave
           almost no room for text (wrapping one or two words per line). */
        padding: 10px var(--edge-home) 6px;
        /* max-width: calc(860px + (2 * var(--edge-home))); */
        font-size: 16px;
        line-height: 1.5;
    }
    .landing-page .results-content {
        padding: 8px var(--edge-home) 4px;
    }
    .landing-page .results-disclaimer {
        padding: 4px var(--edge-home) 8px;
    }
    /* Unlike the home hero (full-bleed band with enough tagline copy to fill
       it), this section has only a short heading + the form — so cap the
       whole card (blue background included) to the home hero's search-card
       width and center it, instead of stretching the blue background across
       the full rail with the form floating in a lot of empty blue space. */
    .landing-page .lot-page-search {
        max-width: 470px;
        margin: 20px auto 0;
        border-radius: 18px;
        padding: 28px;
    }

    /* ── 10. Prices comparison grid (homepage #prices) ────────
       Centered card on the shared content rail; both sticky axes
       (header top, lot column left) carry over from the mobile rules. */
    .prices-grid {
        width: 100%;
        max-width: 1140px;
        /* No padding of its own — the rail comes from .home-prices, so the
           table lines up with the section heading above it. */
        margin: 0 auto 40px;
        padding: 0;
    }
    .prices-intro {
        font-size: 16px;
        /* max-width: 860px; */
    }
    .prices-days { gap: 8px; margin-bottom: 16px; }
    .prices-day-chip { font-size: 14px; padding: 8px 14px; }

    /* Desktop keeps the whole matrix visible — a chip only highlights its
       column. This single override is what lets one JS pass serve both
       behaviours, with 820px still declared in exactly one place. */
    .is-day-hidden { display: table-cell; }

    .prices-table thead th.is-day-active,
    .prices-table tbody td.is-day-active {
        box-shadow: inset 2px 0 0 var(--blue), inset -2px 0 0 var(--blue);
    }
    .prices-table thead th.is-day-active {
        background: var(--light-bg);
        box-shadow: inset 2px 0 0 var(--blue), inset -2px 0 0 var(--blue), inset 0 2px 0 var(--blue);
    }
    .prices-scroll {
        max-height: none;
        border-radius: 18px;
        box-shadow: var(--shadow-card-desktop);
    }
    .prices-table {
        font-size: 13px;
    }
    /* Widths tuned so lot + rating + distance + every day column + the CTA
       land inside the 1100px rail without a horizontal scrollbar. It is a
       tight fit at 10 day columns — widening the day range again will push
       the CTA back out of view (the table still scrolls, so nothing breaks). */
    .prices-sort-btn { padding: 8px 7px; }
    .prices-col-lot {
        width: 155px;
        min-width: 155px;
        max-width: 155px;
    }
    .prices-col-rating,
    .prices-col-dist {
        padding: 9px 7px;
        font-size: 12px;
    }
    .prices-cell {
        min-width: 62px;
        padding: 9px 6px;
    }
    .prices-col-cta { padding: 6px 7px; }
    .prices-details-btn { padding: 6px 9px; font-size: 11px; }
}