/*
 * Adriatico Real Estate — client pack stylesheet. GENERATED — do not edit.
 * Source: clients/adriatico/areas/<area>/style.css, assembled by
 * tools/build-css.mjs (base first, then areas alphabetically).
 *
 * Loaded AFTER every core stylesheet: on public/portal/auth pages by
 * PackStyle, in the design-editor canvas as the last public sheet. Everything
 * is scoped to [data-client="adriatico"] (stamped on the page shell and the
 * canvas body). Brand colours and fonts are admin data (SiteSettings, seeded
 * by migrations/001-seed-branding.js) — read them via var(--brand-*).
 */

/* ════════ areas/base/style.css ════════ */

/* ── Adriatico — base surface tokens ───────────────────────────────────────
   The site runs a LOCKED, token-driven base theme (pack.config.js baseTheme).
   Core components read the --theme-* tokens (public/editor/css/themes.css);
   this block re-declares the FULL set for Adriatico's flat navy design.

   Selector: the shell wrapper (and the editor canvas body) carry
   data-client="adriatico", and every themed section re-stamps its own
   [data-theme] — which re-declares the theme's tokens on that element. The
   descendant selector (0,2,0) beats that per-section re-declaration (0,1,0),
   and this file loads after themes.css, so the wrapper rule wins too.

   No accent colours here — those are admin data (--brand-*, seeded by
   migrations/001-seed-branding.js). Neutrals/shapes only. */

[data-client="adriatico"],
[data-client="adriatico"] [data-theme] {
    /* shape — small, tight corners (design: 2–4px) */
    --theme-radius-card: 2px;
    --theme-radius-control: 3px;
    --theme-radius-pill: 3px;
    --theme-radius-image: 2px;
    /* elevation — flat at rest, a quiet lift on hover */
    --theme-shadow-card: 0 1px 2px rgba(10, 34, 64, 0.04);
    --theme-shadow-card-hover: 0 12px 28px -18px rgba(10, 34, 64, 0.28), 0 2px 6px rgba(10, 34, 64, 0.05);
    /* strokes — cool hairlines */
    --theme-card-border: 1px solid #e6e8ed;
    --theme-divider: 1px solid #e6e8ed;
    --theme-card-top-border: 1px solid #e6e8ed;
    --theme-card-accent-width: 1px;
    --theme-section-rule: none;
    --theme-section-divider: none;
    /* surfaces — white page, white cards, cool light greys */
    --theme-page-bg: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-2: #f7f8fa;
    --theme-line: #e6e8ed;
    --theme-line-2: #e3e6ec;
    /* rhythm */
    --theme-section-pad: 80px;
    --theme-section-pad-min: 52px;
    /* type — Roboto 500 headings, no tracking tricks */
    --theme-heading-scale: 1;
    --theme-heading-weight: 500;
    --theme-heading-transform: none;
    --theme-heading-spacing: normal;
    /* accents-adjacent — square-ish badges and buttons */
    --theme-badge-radius: 2px;
    --theme-btn-radius: 2px;
    --theme-btn-transform: none;
    --theme-btn-spacing: normal;
    /* cards: media + motion. Ratio held at 4/3 like every core theme (the
       design's 318/238 card is 4/3 within a pixel). */
    --theme-card-image-ratio: 4 / 3;
    --theme-card-hover-transform: none;
    --theme-card-img-hover-transform: scale(1.03);
    --theme-badge-spacing: 0.04em;

    /* Pack-local palette (used by the adr-* areas). Neutrals and the fixed
       design navies; the admin-editable accents stay --brand-*. */
    --adr-navy: #0a2240;
    --adr-btn: var(--brand-primary, #0f1f3d);
    --adr-btn-hover: var(--brand-primary-hover, #16305c);
    --adr-ink: #111111;
    --adr-ink-2: #1b1f27;
    --adr-body: #4a5160;
    --adr-muted: #8a93a3;
    --adr-line: #e6e8ed;
    --adr-line-2: #e3e6ec;
    --adr-field-line: #dce0e0;
    --adr-surface-2: #f7f8fa;
    --adr-surface-3: #f2f5f8;
    --adr-surface-4: #e8edf3;
    --adr-red: #b3261e;
}

/* Page surface. ThemeSurfaceStyle paints <body> with the base theme's paper
   colour from an inline <style>; html body (0,0,2) outranks its body (0,0,1)
   regardless of document order. Only this client's build ships this file. */
html body {
    background: #ffffff;
}

/* Prose links (links without a class — rich text, CMS copy) take the design's
   navy on hover. Classed links (buttons, cards, nav) keep their own rules. */
[data-client="adriatico"] a:not([class]):hover {
    color: var(--adr-navy, #0a2240);
}

/* Shared visually-hidden helper for the adr-* areas (labels on placeholder-only
   fields, icon-button text). */
[data-client="adriatico"] .adr-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ════════ areas/archive/style.css ════════ */

/* ── Adriatico — archive + search pages (areas/archive) ────────────────────
   Design: Adriatico Archive.dc.html. ar-hero / sr-hero = breadcrumb + h1;
   sr-search-app = the PACK-BUILT search app (AdrSearchApp.js): a full-width
   filter band ("Traka pretrage"), then results + 362px sidebar from 1100px.
   Breadcrumb styles: .adr-crumb in areas/property/style.css. The canvas
   preview (previews.js) uses the same classes, plus the *facade* rules at the
   bottom for its inert controls.
   Traps handled: every <button> here resets the global button{} (padding,
   radius, border, background, line-height, letter-spacing); every <svg> is
   sized by a wrapper rule; NextSelect's trigger is restyled at (0,4,0)+ over
   its own .ns-wrap .ns-trigger (0,2,0). The NextSelect dropdown is portalled
   to <body> (outside [data-client]) and keeps the core look. */

[data-client="adriatico"] .adr-arhero {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 24px 0;
    box-sizing: border-box;
}

[data-client="adriatico"] .adr-arhero__title {
    margin: 14px 0 0;
    font-family: var(--brand-font-heading, var(--brand-font-body, inherit));
    font-size: 30px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--adr-ink, #111);
}

/* Core's composed heading: lead + highlight on one line, same weight (the
   design prints "Nekretnine Kuća" as one plain line). */
[data-client="adriatico"] .adr-arhero__lead,
[data-client="adriatico"] .adr-arhero__hl {
    font-family: inherit;
    font-weight: inherit;
}

[data-client="adriatico"] .adr-arhero__desc {
    max-width: 760px;
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--adr-body, #4a5160);
}

/* ── sr-search-app ───────────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-sr {
    margin-top: 28px;
    color: var(--adr-ink, #111);
    font-family: var(--brand-font-body, "Roboto", sans-serif);
}

[data-client="adriatico"] .adr-sr :where(button) {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1.2;
    letter-spacing: normal;
    cursor: pointer;
}

/* Filter band — full width, sticky from 700px like the design. When the
   header is sticky too, the band docks under it (84px header bar). */
[data-client="adriatico"] .adr-sr__bar {
    position: relative;
    z-index: 25;
    background: #fff;
    border-top: 1px solid var(--adr-line, #e6e8ed);
    border-bottom: 1px solid var(--adr-line, #e6e8ed);
}

@media (min-width: 700px) {
    [data-client="adriatico"] .adr-sr__bar {
        position: sticky;
        top: 0;
    }

    [data-client="adriatico"]:has(.adr-hd--sticky) .adr-sr__bar {
        top: 85px;
    }
}

[data-client="adriatico"] .adr-sr__form {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[data-client="adriatico"] .adr-sr__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

[data-client="adriatico"] .adr-sr__kw {
    position: relative;
    flex: 3 1 260px;
    min-width: 0;
    display: flex;
}

[data-client="adriatico"] .adr-sr__kwicon {
    position: absolute;
    left: 14px;
    top: 13px;
    width: 16px;
    height: 16px;
    color: #8a8f98;
    pointer-events: none;
}

[data-client="adriatico"] .adr-sr__kwicon svg {
    display: block;
    width: 16px;
    height: 16px;
}

[data-client="adriatico"] .adr-sr__input {
    flex: 1;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 14px 0 40px;
    border: 1px solid var(--adr-field-line, #dce0e0);
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
    color: var(--adr-ink, #111);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: normal;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

[data-client="adriatico"] .adr-sr__input::placeholder {
    color: #8a8f98;
    opacity: 1;
}

[data-client="adriatico"] .adr-sr__input::-webkit-search-cancel-button {
    cursor: pointer;
}

[data-client="adriatico"] .adr-sr__input:focus {
    border-color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-sr__field {
    flex: 1 1 110px;
    min-width: 110px;
    display: flex;
}

[data-client="adriatico"] .adr-sr__field--city {
    flex-basis: 120px;
}

[data-client="adriatico"] .adr-sr__field--beds {
    flex-basis: 140px;
}

[data-client="adriatico"] .adr-sr__field--baths {
    flex: 0 1 200px;
    min-width: 140px;
}

/* NextSelect → the design's flat select. */
[data-client="adriatico"] .adr-sr .ns-wrap.adr-sr__ns .ns-trigger {
    min-height: 42px;
    height: 42px;
    padding: 0 12px 0 15px;
    border: 1px solid var(--adr-field-line, #dce0e0);
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
    color: var(--adr-ink, #111);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
}

[data-client="adriatico"] .adr-sr .ns-wrap.adr-sr__ns .ns-trigger:hover:not(:disabled),
[data-client="adriatico"] .adr-sr .ns-wrap.adr-sr__ns.ns-open .ns-trigger {
    border-color: var(--adr-navy, #0a2240);
    box-shadow: none;
}

[data-client="adriatico"] .adr-sr .adr-sr__ns .ns-placeholder {
    color: #8a8f98;
}

[data-client="adriatico"] .adr-sr .adr-sr__ns .ns-chevron {
    color: #6b7280;
}

[data-client="adriatico"] .adr-sr .adr-sr__ns.ns-open .ns-chevron {
    color: var(--adr-navy, #0a2240);
}

/* A locked control (the archive's own scope) shows its value, fixed. */
[data-client="adriatico"] .adr-sr .ns-wrap.adr-sr__ns.ns-disabled {
    opacity: 1;
}

[data-client="adriatico"] .adr-sr .ns-wrap.adr-sr__ns.ns-disabled .ns-trigger {
    background: var(--adr-surface-2, #f7f8fa);
    cursor: default;
}

[data-client="adriatico"] .adr-sr .adr-sr__ns.ns-disabled .ns-chevron {
    visibility: hidden;
}

[data-client="adriatico"] .adr-sr__advbtn {
    flex: 1 1 110px;
    min-width: 110px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--adr-field-line, #dce0e0);
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--adr-ink, #111);
    font-size: 15px;
    transition: background 0.15s, border-color 0.15s;
}

[data-client="adriatico"] .adr-sr__advbtn:hover,
[data-client="adriatico"] .adr-sr__advbtn[aria-expanded="true"] {
    background: var(--adr-surface-3, #f2f5f8);
}

[data-client="adriatico"] .adr-sr__advicon {
    display: flex;
    width: 16px;
    height: 16px;
}

[data-client="adriatico"] .adr-sr__advicon svg {
    width: 16px;
    height: 16px;
}

[data-client="adriatico"] .adr-sr__submit {
    flex: 1 1 120px;
    min-width: 110px;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 3px;
    background: var(--adr-btn, #0f1f3d);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    transition: background 0.15s;
}

[data-client="adriatico"] .adr-sr__submit:hover {
    background: var(--adr-btn-hover, #16305c);
}

[data-client="adriatico"] .adr-sr :where(button, a, input):focus-visible {
    outline: 2px solid var(--adr-navy, #0a2240);
    outline-offset: 2px;
}

[data-client="adriatico"] .adr-sr__adv {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 0 0 4px;
}

[data-client="adriatico"] .adr-sr__adv[hidden] {
    display: none;
}

/* ── Results + sidebar ───────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-sr__body {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 24px 60px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

[data-client="adriatico"] .adr-sr__results {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[data-client="adriatico"] .adr-sr__aside {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

@media (min-width: 1100px) {
    [data-client="adriatico"] .adr-sr[data-aside="true"] .adr-sr__body {
        grid-template-columns: minmax(0, 1fr) 362px;
    }
}

[data-client="adriatico"] .adr-sr__chips {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

[data-client="adriatico"] .adr-sr .adr-sr__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--adr-line-2, #e3e6ec);
    border-radius: 2px;
    background: var(--adr-surface-3, #f2f5f8);
    color: var(--adr-ink-2, #1b1f27);
    font-size: 13px;
}

[data-client="adriatico"] .adr-sr .adr-sr__chip:hover {
    border-color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-sr__chipx {
    display: flex;
    width: 9px;
    height: 9px;
    color: var(--adr-body, #4a5160);
}

[data-client="adriatico"] .adr-sr__chipx svg {
    width: 9px;
    height: 9px;
}

[data-client="adriatico"] .adr-sr .adr-sr__clear {
    padding: 4px 2px;
    color: var(--adr-navy, #0a2240);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

[data-client="adriatico"] .adr-sr__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 10px 0 20px;
    font-size: 15px;
}

[data-client="adriatico"] .adr-sr__count {
    font-size: 15px;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-sr__sort {
    display: flex;
    align-items: center;
    gap: 6px;
}

[data-client="adriatico"] .adr-sr__sortlabel {
    white-space: nowrap;
}

[data-client="adriatico"] .adr-sr__sortfield {
    width: 250px;
    max-width: 62vw;
}

/* Sort: the design's borderless grey select. */
[data-client="adriatico"] .adr-sr .ns-wrap.adr-sr__ns--sort .ns-trigger {
    min-height: 30px;
    height: 30px;
    padding: 0 4px 0 0;
    border: 0;
    background: none;
    color: #8a8f98;
}

[data-client="adriatico"] .adr-sr .ns-wrap.adr-sr__ns--sort .ns-trigger:hover:not(:disabled),
[data-client="adriatico"] .adr-sr .ns-wrap.adr-sr__ns--sort.ns-open .ns-trigger {
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-sr__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    transition: opacity 0.15s;
}

[data-client="adriatico"] .adr-sr__cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

[data-client="adriatico"] .adr-sr__cell > * {
    flex: 1;
}

@media (min-width: 700px) {
    [data-client="adriatico"] .adr-sr__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    [data-client="adriatico"] .adr-sr__grid[data-columns="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Busy: the old grid stays, dimmed, until the new page lands. */
[data-client="adriatico"] .adr-sr__results[data-busy="true"] .adr-sr__grid {
    opacity: 0.45;
    pointer-events: none;
}

[data-client="adriatico"] .adr-sr__skel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    border: 1px solid var(--adr-line, #e6e8ed);
    border-radius: 2px;
}

[data-client="adriatico"] .adr-sr__skel-img {
    display: block;
    aspect-ratio: 318 / 238;
    background: var(--adr-surface-3, #f2f5f8);
}

[data-client="adriatico"] .adr-sr__skel-line {
    display: block;
    height: 14px;
    margin: 0 18px;
    border-radius: 2px;
    background: var(--adr-surface-3, #f2f5f8);
}

[data-client="adriatico"] .adr-sr__skel-line--short {
    width: 45%;
}

[data-client="adriatico"] .adr-sr__skel-img,
[data-client="adriatico"] .adr-sr__skel-line {
    animation: adr-sr-pulse 1.4s ease-in-out infinite;
}

@keyframes adr-sr-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    [data-client="adriatico"] .adr-sr__skel-img,
    [data-client="adriatico"] .adr-sr__skel-line {
        animation: none;
    }
}

[data-client="adriatico"] .adr-sr__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 0;
    color: var(--adr-body, #4a5160);
    font-size: 16px;
    text-align: center;
}

[data-client="adriatico"] .adr-sr__empty p {
    margin: 0;
}

[data-client="adriatico"] .adr-sr .adr-sr__outline {
    padding: 10px 18px;
    border: 1px solid var(--adr-navy, #0a2240);
    border-radius: 2px;
    background: #fff;
    color: var(--adr-navy, #0a2240);
    font-size: 14px;
}

[data-client="adriatico"] .adr-sr .adr-sr__outline:hover {
    background: var(--adr-surface-3, #f2f5f8);
}

[data-client="adriatico"] .adr-sr__error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--adr-line-2, #e3e6ec);
    border-radius: 2px;
    background: var(--adr-surface-2, #f7f8fa);
    color: var(--adr-red, #b3261e);
    font-size: 14px;
}

/* Numbered pager: ‹ 1 2 3 … › */
[data-client="adriatico"] .adr-sr__pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 60px;
}

[data-client="adriatico"] .adr-sr__pg {
    min-width: 40px;
    height: 42px;
    padding: 0 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: var(--adr-ink, #111);
    font-size: 15px;
    text-decoration: none;
    transition: background 0.15s;
}

[data-client="adriatico"] a.adr-sr__pg:hover {
    background: var(--adr-surface-3, #f2f5f8);
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-sr__pg.is-current {
    background: var(--adr-btn, #0f1f3d);
    color: #fff;
}

[data-client="adriatico"] .adr-sr__pg.is-disabled {
    opacity: 0.35;
}

[data-client="adriatico"] .adr-sr__pg--gap {
    min-width: 24px;
    color: var(--adr-body, #4a5160);
}

[data-client="adriatico"] .adr-sr__pg--arrow svg {
    display: block;
    width: 8px;
    height: 14px;
}

/* ── Canvas facades (previews.js) ────────────────────────────────────────── */

[data-client="adriatico"] .adr-sr__input--facade {
    display: flex;
    align-items: center;
    color: #8a8f98;
}

[data-client="adriatico"] .adr-sr__facade {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--adr-field-line, #dce0e0);
    border-radius: 3px;
    background: #fff;
    color: #8a8f98;
    font-size: 15px;
}

[data-client="adriatico"] .adr-sr__facade-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-client="adriatico"] .adr-sr__facade-chev {
    display: flex;
    flex-shrink: 0;
    width: 8px;
    height: 12px;
    color: #6b7280;
}

[data-client="adriatico"] .adr-sr__facade-chev svg {
    width: 8px;
    height: 12px;
}

[data-client="adriatico"] .adr-sr__sortfacade {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8a8f98;
}

/* The canvas body is not scrolled like a page — never stick there. */
[data-client="adriatico"] .adr-sr__bar:not(:has(form)) {
    position: relative;
    top: auto;
}

/* ── Mobile (< 700px): keyword full width, selects 2-up, buttons full width;
   the sidebar already sits below the results (single column < 1100px). ── */

@media (max-width: 699px) {
    [data-client="adriatico"] .adr-arhero {
        padding: 24px 16px 0;
    }

    [data-client="adriatico"] .adr-arhero__title {
        font-size: 26px;
    }

    [data-client="adriatico"] .adr-sr {
        margin-top: 20px;
    }

    [data-client="adriatico"] .adr-sr__form {
        padding: 12px 16px;
    }

    [data-client="adriatico"] .adr-sr__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-client="adriatico"] .adr-sr__kw,
    [data-client="adriatico"] .adr-sr__advbtn,
    [data-client="adriatico"] .adr-sr__submit {
        grid-column: 1 / -1;
    }

    [data-client="adriatico"] .adr-sr__field,
    [data-client="adriatico"] .adr-sr__advbtn,
    [data-client="adriatico"] .adr-sr__submit {
        min-width: 0;
    }

    [data-client="adriatico"] .adr-sr__field--baths {
        flex: 1 1 100%;
    }

    [data-client="adriatico"] .adr-sr__body {
        padding: 24px 16px 40px;
    }

    [data-client="adriatico"] .adr-sr__head {
        margin-top: 0;
    }

    [data-client="adriatico"] .adr-sr__sortfield {
        width: 210px;
    }

    [data-client="adriatico"] .adr-sr__pager {
        margin-top: 40px;
        gap: 4px;
    }
}

/* Page heading rendered inside the app under the filter bar (showheading). */
[data-client="adriatico"] .adr-sr__heading .adr-arhero {
    padding-top: 30px;
}
[data-client="adriatico"] .adr-sr__heading + .adr-sr__body {
    padding-top: 28px;
}

/* ════════ areas/blog/style.css ════════ */

/* ── Adriatico — blog post (areas/blog) ────────────────────────────────────
   Design: Adriatico Blog Post.dc.html. cl-bs-columns = breadcrumb + an
   article / 362px sidebar grid from 1000px; bs-hero = h1 30px/500, byline,
   887/580 cover; bs-content = the core article (np-article typography,
   public/editor/css/blog-blocks.css) re-set to the design's 15px/1.67 #222
   body, plus the agency author box. Breadcrumb: .adr-crumb in
   areas/property/style.css. */

[data-client="adriatico"] .adr-bs-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 24px 30px;
    box-sizing: border-box;
}

[data-client="adriatico"] .adr-bs-cols {
    margin-top: 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 31px;
    align-items: start;
}

[data-client="adriatico"] .adr-bs-cols:first-child {
    margin-top: 0;
}

[data-client="adriatico"] .adr-bs-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

[data-client="adriatico"] .adr-bs-col[data-zone="main"] {
    gap: 0;
}

@media (min-width: 1000px) {
    [data-client="adriatico"] .adr-bs-cols {
        grid-template-columns: minmax(0, 1fr) 362px;
    }

    [data-client="adriatico"] .adr-bs-cols[data-sidebar="left"] {
        grid-template-columns: 362px minmax(0, 1fr);
    }

    [data-client="adriatico"] .adr-bs-cols[data-sidebar="left"] > :first-child {
        order: 2;
    }
}

/* ── bs-hero ─────────────────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-bs-hero__head {
    padding: 0 40px;
}

[data-client="adriatico"] .adr-bs-hero__title {
    margin: 0;
    font-family: var(--brand-font-heading, var(--brand-font-body, inherit));
    font-size: 30px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    color: var(--adr-ink, #111);
    text-wrap: pretty;
}

[data-client="adriatico"] .adr-bs-hero__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    font-size: 15px;
    line-height: 1.4;
    color: #222;
}

[data-client="adriatico"] .adr-bs-hero__mark {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 0;
}

[data-client="adriatico"] .adr-bs-hero__date {
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-client="adriatico"] .adr-bs-hero__date .adr-i {
    color: var(--adr-body, #4a5160);
}

[data-client="adriatico"] .adr-bs-hero__cover {
    display: block;
    margin-top: 42px;
}

[data-client="adriatico"] .adr-bs-hero__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 887 / 580;
    object-fit: cover;
    background: #e6e8ed;
    border-radius: 0;
}

/* ── bs-content (core article inside pack chrome) ────────────────────────── */

[data-client="adriatico"] .adr-bs-body .np-article {
    max-width: none;
    margin: 0;
    padding: 50px 55px 0;
    color: #222;
}

[data-client="adriatico"] .adr-bs-body .np-article p,
[data-client="adriatico"] .adr-bs-body .np-article li {
    font-size: 15px;
    line-height: 1.67;
    color: #222;
}

[data-client="adriatico"] .adr-bs-body .np-article p {
    margin: 0 0 20px;
}

[data-client="adriatico"] .adr-bs-body .np-article :is(h2, h3, h4) {
    margin: 30px 0 14px;
    font-family: var(--brand-font-heading, var(--brand-font-body, inherit));
    font-weight: 500;
    letter-spacing: normal;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-bs-body .np-article h2 {
    font-size: 22px;
    line-height: 1.35;
}

[data-client="adriatico"] .adr-bs-body .np-article h3 {
    font-size: 18px;
    line-height: 1.4;
}

[data-client="adriatico"] .adr-bs-body .np-article h4 {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
}

[data-client="adriatico"] .adr-bs-body .np-article a {
    color: #222;
    text-decoration: underline;
    word-break: break-word;
}

[data-client="adriatico"] .adr-bs-body .np-article a:hover {
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-bs-body .np-article img {
    border-radius: 0;
}

/* author box */
[data-client="adriatico"] .adr-bs-author {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin: 110px 55px 60px 50px;
}

[data-client="adriatico"] .adr-bs-author__mark {
    flex: none;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    object-fit: contain;
    border-radius: 0;
}

[data-client="adriatico"] .adr-bs-author__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

[data-client="adriatico"] .adr-bs-author__name {
    margin: 0;
    font-family: var(--brand-font-heading, var(--brand-font-body, inherit));
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-bs-author__bio {
    margin: 0;
    font-size: 15px;
    line-height: 1.67;
    color: #222;
}

@media (max-width: 699px) {
    [data-client="adriatico"] .adr-bs-wrap {
        padding: 24px 16px 24px;
    }

    [data-client="adriatico"] .adr-bs-hero__head {
        padding: 0;
    }

    [data-client="adriatico"] .adr-bs-hero__title {
        font-size: 24px;
    }

    [data-client="adriatico"] .adr-bs-hero__cover {
        margin-top: 30px;
    }

    [data-client="adriatico"] .adr-bs-body .np-article {
        padding: 40px 0 0;
    }

    [data-client="adriatico"] .adr-bs-author {
        gap: 16px;
        margin: 70px 0 40px;
    }
}

/* ── design-editor canvas only: the structural cl-bs-* elements ──────────── */

[data-client="adriatico"] cl-bs-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 362px;
    gap: 31px;
    align-items: start;
    min-height: 80px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 24px 30px;
    box-sizing: border-box;
}

[data-client="adriatico"] cl-bs-columns[sidebarposition="left"] {
    grid-template-columns: 362px minmax(0, 1fr);
}

[data-client="adriatico"] cl-bs-columns[sidebarposition="left"] > cl-bs-col:first-child {
    order: 2;
}

[data-client="adriatico"] cl-bs-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
    min-height: 70px;
    padding: 4px;
    border: 1px dashed #d8dee8;
    border-radius: 4px;
}

[data-client="adriatico"] cl-bs-col[data-zone="main"] {
    gap: 0;
}

[data-client="adriatico"] cl-bs-col:empty::after {
    content: "Drop sections here";
    display: block;
    padding: 24px 0;
    text-align: center;
    font-size: 12px;
    color: #9aa6b5;
}

@media (max-width: 999px) {
    [data-client="adriatico"] cl-bs-columns,
    [data-client="adriatico"] cl-bs-columns[sidebarposition="left"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ════════ areas/card/style.css ════════ */

/* ── Adriatico — property card (PropertyCard slot) ─────────────────────────
   Design: "Listing Card". Flat white card, hairline border, 2px corners, navy
   badges, outlined "Email" footer button. The swipe gallery inside the image
   is core's CardGallery (its own CSS module); this file styles only the host.
   Every <button> resets the global button{}; every <svg> is sized here. */

[data-client="adriatico"] .adr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--adr-line, #e6e8ed);
    border-radius: 2px;
    overflow: hidden;
    color: var(--adr-ink, #111);
    font-family: var(--brand-font-body, "Roboto", sans-serif);
    transition: box-shadow 0.2s;
}

[data-client="adriatico"] .adr-card:hover {
    box-shadow: 0 12px 28px -18px rgba(10, 34, 64, 0.32), 0 2px 6px rgba(10, 34, 64, 0.05);
}

/* ── Image well ─────────────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-card__media {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 318 / 238;
    overflow: hidden;
    background: var(--adr-line, #e6e8ed);
}

[data-client="adriatico"] .adr-card__media-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
}

/* Single-photo branch (the multi-photo gallery uses its own slide class). */
[data-client="adriatico"] .adr-card__img {
    object-fit: cover;
    transition: transform 0.35s ease;
}

[data-client="adriatico"] .adr-card:hover .adr-card__img {
    transform: scale(1.03);
}

[data-client="adriatico"] .adr-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adr-surface-3, #f2f5f8);
}

[data-client="adriatico"] .adr-card__placeholder-icon {
    width: 36px;
    height: 36px;
    opacity: 0.15;
}

/* Overlays sit at z 2+ — CardGallery seals its own scrim/dots/arrows into a
   z=0 layer (isolation: isolate). */
[data-client="adriatico"] .adr-card__tags {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}

[data-client="adriatico"] .adr-card__tag,
[data-client="adriatico"] .adr-card__status {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-client="adriatico"] .adr-card__tag {
    background: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-card__status {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    background: rgba(40, 40, 40, 0.85);
    pointer-events: none;
}

[data-client="adriatico"] .adr-card__status--sold {
    background: var(--adr-red, #b3261e);
}

[data-client="adriatico"] .adr-card__actions {
    position: absolute;
    z-index: 3;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}

[data-client="adriatico"] .adr-card__action {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    line-height: 1;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

[data-client="adriatico"] .adr-card__action:hover,
[data-client="adriatico"] .adr-card__action:focus-visible {
    background: var(--adr-btn, #0f1f3d);
    color: #fff;
}

[data-client="adriatico"] .adr-card__action--on {
    background: var(--adr-btn, #0f1f3d);
}

[data-client="adriatico"] .adr-card__action svg {
    width: 15px;
    height: 15px;
}

[data-client="adriatico"] .adr-card__corner {
    display: inline-flex;
    align-items: center;
}

/* ── Body ───────────────────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 14px;
    min-width: 0;
}

[data-client="adriatico"] .adr-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

[data-client="adriatico"] .adr-card__type {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--adr-ink-2, #1b1f27);
}

[data-client="adriatico"] .adr-card__id {
    flex-shrink: 0;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 2px;
    background: var(--adr-navy, #0a2240);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

[data-client="adriatico"] .adr-card__price-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}

[data-client="adriatico"] .adr-card__price-old {
    font-size: 13px;
    line-height: 1.2;
    color: var(--adr-muted, #8a93a3);
    text-decoration: line-through;
}

[data-client="adriatico"] .adr-card__price {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-card__price-period {
    font-size: 13px;
    font-weight: 400;
    color: var(--adr-body, #4a5160);
}

[data-client="adriatico"] .adr-card__price--request {
    font-size: 15px;
    color: var(--adr-body, #4a5160);
}

[data-client="adriatico"] .adr-card__ppm {
    font-size: 9px;
    line-height: 1.3;
    color: var(--adr-ink-2, #1b1f27);
}

[data-client="adriatico"] h3.adr-card__title {
    margin: 6px 0 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-card__title-link {
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-client="adriatico"] .adr-card__title-link:hover {
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-card__city {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: #666;
}

[data-client="adriatico"] .adr-card__stats {
    list-style: none;
    margin: auto 0 0;
    padding: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 13px;
    color: #222;
}

[data-client="adriatico"] .adr-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
}

[data-client="adriatico"] .adr-card__stat svg {
    width: 17px;
    height: 14px;
    flex-shrink: 0;
}

[data-client="adriatico"] .adr-card__unit {
    margin-left: 3px;
    font-size: 10px;
}

/* ── Footer: outlined Email button ──────────────────────────────────────── */

[data-client="adriatico"] .adr-card__foot {
    padding: 0 18px 18px;
}

[data-client="adriatico"] .adr-card__email {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--adr-btn, #0f1f3d);
    border-radius: 2px;
    background: #fff;
    color: var(--adr-btn, #0f1f3d);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

[data-client="adriatico"] .adr-card__email:hover,
[data-client="adriatico"] .adr-card__email:focus-visible {
    background: var(--adr-btn, #0f1f3d);
    color: #fff;
}

[data-client="adriatico"] .adr-card__email svg {
    width: 14px;
    height: 10px;
    flex-shrink: 0;
}

/* ── Horizontal variant (sr-search-app "horizontal" card style) ──────────
   Image left, body + footer right. The archive's "Slični oglasi" row has its
   own component; this is the graceful search-grid fallback. */
[data-client="adriatico"] .adr-card[data-card-variant="horizontal"] {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
}

[data-client="adriatico"] .adr-card[data-card-variant="horizontal"] .adr-card__media {
    grid-row: 1 / span 2;
    aspect-ratio: auto;
    height: 100%;
    min-height: 200px;
}

[data-client="adriatico"] .adr-card[data-card-variant="horizontal"] .adr-card__foot {
    padding-top: 0;
}

[data-client="adriatico"] .adr-card[data-card-variant="horizontal"] .adr-card__email {
    width: auto;
    display: inline-flex;
}

@media (max-width: 700px) {
    [data-client="adriatico"] .adr-card[data-card-variant="horizontal"] {
        display: flex;
    }

    [data-client="adriatico"] .adr-card[data-card-variant="horizontal"] .adr-card__media {
        aspect-ratio: 318 / 238;
        height: auto;
        min-height: 0;
    }

    [data-client="adriatico"] .adr-card[data-card-variant="horizontal"] .adr-card__email {
        width: 100%;
        display: flex;
    }
}

/* ════════ areas/footer/style.css ════════ */

/* ── Adriatico — footer area (ft-top / ft-newsletter / ft-bottom; restyles
   the CORE ft-col and ft-iconlist cells inside the ft-top grid) ──────────
   Public: FooterLayout hardwires <footer class=footer><div class=container>
   (CSS-module classes, hashed) around the layout. The shell is re-skinned
   through :has() on our own roots instead of guessing hashed names; the
   [data-client][data-theme] pair (both on PublicShell's wrapper) outranks
   core's non-modern `[data-theme]… .footer` variant (0,3,0).
   Core cells are restyled by element selectors under .adr-ft-grid (core's
   module rules are single-class, 0,1,0). Canvas rules at the bottom. */

[data-client="adriatico"][data-theme] footer:has(.adr-ft-top, .adr-ft-bottom) {
    padding: 0;
    border-top: 0;
    background: var(--adr-surface-3, #f2f5f8);
    color: var(--adr-ink, #111111);
    font-size: 14px;
}

[data-client="adriatico"][data-theme] footer:has(.adr-ft-top, .adr-ft-bottom) > div {
    max-width: none;
    padding: 0;
}

/* ── Top band + grid ── */
[data-client="adriatico"] .adr-ft-top {
    background: var(--adr-surface-3, #f2f5f8);
    color: var(--adr-ink, #111111);
}

[data-client="adriatico"] .adr-ft-grid {
    box-sizing: border-box;
    max-width: 1300px;
    margin: 0 auto;
    padding: 100px 24px 90px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px 60px;
    /* core ft-iconlist colour hooks */
    --ft-icon-color: var(--adr-ink, #111111);
    --ft-icon-text: var(--adr-ink, #111111);
}

[data-client="adriatico"] .adr-ft-grid > * {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Column headings: core ft-col / ft-iconlist <h5> and our own .adr-ft-heading */
[data-client="adriatico"] .adr-ft-grid h5,
[data-client="adriatico"] .adr-ft-heading {
    margin: 0;
    color: var(--adr-ink, #111111);
    font-family: var(--brand-font-heading, var(--brand-font-body, sans-serif));
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
}

/* ft-col link lists */
[data-client="adriatico"] .adr-ft-grid ul {
    margin: 40px 0 0;
    padding: 0 0 0 15px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

[data-client="adriatico"] .adr-ft-grid li {
    margin: 0;
    padding: 0;
}

[data-client="adriatico"] .adr-ft-grid ul a {
    color: var(--adr-ink, #111111);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

[data-client="adriatico"] .adr-ft-grid ul a:hover {
    color: var(--adr-navy, #0a2240);
}

/* ft-iconlist (its rows carry an icon): no indent, plain weight */
[data-client="adriatico"] .adr-ft-grid ul:has(svg) {
    margin-top: 36px;
    padding-left: 0;
    gap: 18px;
}

[data-client="adriatico"] .adr-ft-grid ul:has(svg) li > * {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--adr-ink, #111111);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

[data-client="adriatico"] .adr-ft-grid ul:has(svg) span:has(> svg) {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: none;
}

[data-client="adriatico"] .adr-ft-grid ul:has(svg) svg {
    width: 14px;
    height: 14px;
}

/* ── Newsletter cell ── */
[data-client="adriatico"] .adr-ft-news {
    display: flex;
    flex-direction: column;
}

[data-client="adriatico"] .adr-ft-news__text {
    margin: 16px 0 0;
    color: var(--adr-body, #4a5160);
    font-size: 14px;
    line-height: 1.6;
}

[data-client="adriatico"] .adr-ft-news__form {
    display: flex;
    margin-top: 26px;
}

[data-client="adriatico"] .adr-ft-news__input {
    box-sizing: border-box;
    flex: 2 1 0;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #dfe3e9;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: #ffffff;
    color: var(--adr-ink, #111111);
    font: inherit;
    font-size: 15px;
}

[data-client="adriatico"] .adr-ft-news__input::placeholder {
    color: var(--adr-ink-2, #1b1f27);
    opacity: 1;
}

[data-client="adriatico"] .adr-ft-news__btn {
    flex: 1 1 0;
    height: 42px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0 6px 6px 0;
    background: var(--adr-btn, #0f1f3d);
    color: #ffffff;
    line-height: 1;
    letter-spacing: normal;
    cursor: pointer;
}

[data-client="adriatico"] .adr-ft-news__btn:hover {
    background: var(--adr-btn-hover, #16305c);
}

[data-client="adriatico"] .adr-ft-news__btn:disabled {
    opacity: 0.7;
    cursor: default;
}

[data-client="adriatico"] .adr-ft-ico--send {
    width: 16px;
    height: 15px;
    flex: none;
}

[data-client="adriatico"] .adr-ft-news__ok {
    margin: 36px 0 0;
    color: var(--adr-navy, #0a2240);
    font-size: 14px;
}

[data-client="adriatico"] .adr-ft-news__err {
    margin: 10px 0 0;
    color: var(--adr-red, #b3261e);
    font-size: 13px;
}

/* ── Bottom bar ── */
[data-client="adriatico"] .adr-ft-bottom {
    background: var(--adr-surface-4, #e8edf3);
    color: var(--adr-ink, #111111);
}

[data-client="adriatico"] .adr-ft-bottom__inner {
    box-sizing: border-box;
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
}

[data-client="adriatico"] .adr-ft-bottom__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[data-client="adriatico"] .adr-ft-bottom__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}

[data-client="adriatico"] .adr-ft-bottom__link {
    color: var(--adr-ink, #111111);
    text-decoration: none;
}

[data-client="adriatico"] a.adr-ft-bottom__link:hover {
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-ft-bottom__social {
    display: flex;
    align-items: center;
    gap: 14px;
}

[data-client="adriatico"] .adr-ft-bottom__icon {
    display: flex;
    align-items: center;
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-ft-ico--fb {
    width: 8px;
    height: 15px;
}

[data-client="adriatico"] .adr-ft-ico--sq {
    width: 15px;
    height: 15px;
}

[data-client="adriatico"] .adr-ft-ico--yt {
    width: 17px;
    height: 12px;
}

@media (max-width: 699.98px) {
    [data-client="adriatico"] .adr-ft-grid {
        padding: 64px 20px 56px;
        gap: 40px;
    }

    [data-client="adriatico"] .adr-ft-bottom__inner {
        padding: 24px 20px;
    }
}

/* ── Editor canvas ──────────────────────────────────────────────────────
   ft-top is a plain GrapesJS element (core: section-previews-real.css
   restates the stock grid on it, incl. a non-modern variant at 0,2,1 — the
   attribute qualifier lifts ours to match, and pack.css loads last). The
   core ft-col / ft-iconlist previews inside it are restyled here. */
[data-client="adriatico"] ft-top[data-gjs-type="ft-top"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 40px 60px;
    padding: 100px max(24px, calc((100% - 1252px) / 2)) 90px;
    background: var(--adr-surface-3, #f2f5f8);
    border-top: 0;
    color: var(--adr-ink, #111111);
    --ft-icon-color: var(--adr-ink, #111111);
    --ft-icon-text: var(--adr-ink, #111111);
}

[data-client="adriatico"] ft-top[data-gjs-type="ft-top"] > * {
    grid-column: auto;
    min-width: 0;
}

[data-client="adriatico"] ft-top .ft-col__heading {
    margin: 0;
    color: var(--adr-ink, #111111);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
}

[data-client="adriatico"] ft-top .ft-col__list {
    margin: 40px 0 0;
    padding: 0 0 0 15px;
    gap: 14px;
}

[data-client="adriatico"] ft-top .ft-col__link {
    color: var(--adr-ink, #111111);
    font-size: 14px;
    font-weight: 500;
}

[data-client="adriatico"] ft-top .ft-iconlist__items {
    margin-top: 36px;
    gap: 18px;
}

[data-client="adriatico"] ft-top .ft-iconlist__row {
    align-items: center;
    gap: 8px;
    color: var(--adr-ink, #111111);
    font-size: 14px;
}

[data-client="adriatico"] ft-top .ft-iconlist__icon {
    width: 14px;
    height: 14px;
    margin-top: 0;
}

[data-client="adriatico"] ft-top .ft-iconlist__icon svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 699.98px) {
    [data-client="adriatico"] ft-top[data-gjs-type="ft-top"] {
        padding: 64px 20px 56px;
        gap: 40px;
    }
}

/* ════════ areas/forms/style.css ════════ */

/* ── Adriatico — forms area ─────────────────────────────────────────────────
   Shared modal shell (adr-modal), agency row (adr-badge) and the two forms
   (adr-forms: inquiry modal/sidebar/inline, contact modal/card).
   Every <button> resets the global button{} padding/radius/background; every
   inline <svg> is sized by a class rule (the global svg{100%} trap). */

/* ═══ Modal shell ═══════════════════════════════════════════════════════════ */

/* Above the header (z 10001) and the cookie banner (9999), below NextSelect's
   portalled dropdown (1000001) so the role select still opens on top. */
[data-client="adriatico"].adr-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--brand-font-body, "Roboto", sans-serif);
    color: var(--adr-ink, #111);
    animation: adrModalFade 0.16s ease-out;
}

@keyframes adrModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

[data-client="adriatico"] .adr-modal__dialog {
    position: relative;
    width: 100%;
    margin: auto 0;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    outline: none;
    box-shadow: 0 24px 60px -24px rgba(10, 34, 64, 0.45);
}

[data-client="adriatico"] .adr-modal__dialog--sm {
    max-width: 498px;
    padding: 16px;
    gap: 16px;
    border-radius: 3px;
}

[data-client="adriatico"] .adr-modal__dialog--md {
    max-width: 560px;
    padding: 36px;
    gap: 18px;
    border-radius: 6px;
}

[data-client="adriatico"] .adr-modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: #333;
    line-height: 1;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

[data-client="adriatico"] .adr-modal__close:hover {
    background: var(--adr-surface-3, #f2f5f8);
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-modal__close svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 700px) {
    [data-client="adriatico"].adr-modal {
        padding: 16px 12px;
    }

    [data-client="adriatico"] .adr-modal__dialog--md {
        padding: 28px 18px 22px;
    }
}

/* ═══ Agency row ═══════════════════════════════════════════════════════════ */

[data-client="adriatico"] .adr-badge {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

[data-client="adriatico"] .adr-badge--modal {
    gap: 20px;
    padding-top: 20px;
}

[data-client="adriatico"] .adr-badge__logo {
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

[data-client="adriatico"] .adr-badge__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    font-size: 15px;
    line-height: 1.3;
}

[data-client="adriatico"] .adr-badge__name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-badge__name .adr-icon-person {
    width: 14px;
    height: 15px;
    flex-shrink: 0;
}

[data-client="adriatico"] .adr-badge__link {
    color: var(--adr-ink, #111);
    text-decoration: none;
}

[data-client="adriatico"] .adr-badge__link:hover {
    color: var(--adr-navy, #0a2240);
    text-decoration: underline;
}

/* ═══ Forms ════════════════════════════════════════════════════════════════
   Per-variant metrics live in custom properties so one rule set serves all
   five layouts (and the NextSelect trigger follows the inputs). */

[data-client="adriatico"] .adr-forms {
    --adr-f-h: 42px;
    --adr-f-radius: 3px;
    --adr-f-size: 15px;
    --adr-f-gap: 16px;
    --adr-f-check-size: 13px;
    display: flex;
    flex-direction: column;
    gap: var(--adr-f-gap);
    min-width: 0;
    color: var(--adr-ink, #111);
    font-family: var(--brand-font-body, "Roboto", sans-serif);
}

[data-client="adriatico"] .adr-forms--sidebar {
    --adr-f-h: 38px;
    --adr-f-radius: 2px;
    --adr-f-size: 14px;
    --adr-f-gap: 15px;
    --adr-f-check-size: 12px;
}

[data-client="adriatico"] .adr-forms--inline {
    --adr-f-h: 38px;
    --adr-f-radius: 2px;
    --adr-f-size: 13px;
    --adr-f-gap: 22px;
    --adr-f-check-size: 12px;
}

[data-client="adriatico"] .adr-forms--contact.adr-forms--modal {
    --adr-f-gap: 12px;
    --adr-f-check-size: 12px;
}

[data-client="adriatico"] .adr-forms--card {
    --adr-f-h: 46px;
    --adr-f-radius: 2px;
    --adr-f-size: 15px;
    --adr-f-gap: 22px;
    --adr-f-check-size: 13px;
}

[data-client="adriatico"] h3.adr-forms__title {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--adr-ink, #111);
    letter-spacing: normal;
    text-transform: none;
}

[data-client="adriatico"] .adr-forms__form {
    display: flex;
    flex-direction: column;
    gap: var(--adr-f-gap);
    margin: 0;
    min-width: 0;
}

[data-client="adriatico"] .adr-forms--inline .adr-forms__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
}

[data-client="adriatico"] .adr-forms--inline .adr-forms__field--message,
[data-client="adriatico"] .adr-forms--inline .adr-forms__check,
[data-client="adriatico"] .adr-forms--inline .adr-forms__error,
[data-client="adriatico"] .adr-forms--inline .adr-forms__actions {
    grid-column: 1 / -1;
}

[data-client="adriatico"] .adr-forms__field {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

[data-client="adriatico"] .adr-forms__label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-forms--card .adr-forms__field {
    gap: 8px;
}

[data-client="adriatico"] .adr-forms--card .adr-forms__label {
    font-weight: 500;
    color: var(--adr-ink-2, #1b1f27);
}

[data-client="adriatico"] .adr-forms--card .adr-forms__label--section {
    font-size: 15px;
    font-weight: 500;
}

[data-client="adriatico"] .adr-forms__section {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-forms__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 20px;
}

[data-client="adriatico"] .adr-forms__field--span2 {
    grid-column: span 2;
}

/* Inputs + textarea */
[data-client="adriatico"] .adr-forms__input,
[data-client="adriatico"] .adr-forms__textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--adr-field-line, #dce0e0);
    border-radius: var(--adr-f-radius);
    background: #fff;
    color: var(--adr-ink, #111);
    font-family: inherit;
    font-size: var(--adr-f-size);
    font-weight: 400;
    box-shadow: none;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

[data-client="adriatico"] .adr-forms__input {
    height: var(--adr-f-h);
    padding: 0 12px;
    line-height: normal;
}

[data-client="adriatico"] .adr-forms__textarea {
    min-height: 104px;
    padding: 10px 12px;
    line-height: 1.55;
    resize: vertical;
}

[data-client="adriatico"] .adr-forms--sidebar .adr-forms__textarea {
    min-height: 94px;
    line-height: 1.5;
}

[data-client="adriatico"] .adr-forms--inline .adr-forms__textarea {
    min-height: 114px;
    line-height: 1.5;
}

[data-client="adriatico"] .adr-forms--card .adr-forms__textarea {
    min-height: 150px;
}

[data-client="adriatico"] .adr-forms__input::placeholder,
[data-client="adriatico"] .adr-forms__textarea::placeholder {
    color: var(--adr-muted, #8a93a3);
    opacity: 1;
}

[data-client="adriatico"] .adr-forms__input:focus,
[data-client="adriatico"] .adr-forms__textarea:focus {
    border-color: var(--adr-navy, #0a2240);
    box-shadow: 0 0 0 3px rgba(10, 34, 64, 0.08);
}

/* NextSelect restyled to the design's flat select (the trigger is a <button>;
   (0,4,0) here beats its own .ns-wrap .ns-trigger (0,2,0)). The dropdown is
   portalled to <body> and keeps the core NextSelect look. */
[data-client="adriatico"] .adr-forms .ns-wrap .ns-trigger {
    min-height: var(--adr-f-h);
    height: var(--adr-f-h);
    padding: 0 14px 0 14px;
    border: 1px solid var(--adr-field-line, #dce0e0);
    border-radius: var(--adr-f-radius);
    background: #fff;
    font-family: inherit;
    font-size: var(--adr-f-size);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--adr-ink, #111);
    box-shadow: none;
}

[data-client="adriatico"] .adr-forms .ns-wrap .ns-trigger:hover,
[data-client="adriatico"] .adr-forms .ns-wrap.ns-open .ns-trigger {
    border-color: var(--adr-navy, #0a2240);
    box-shadow: none;
}

[data-client="adriatico"] .adr-forms .ns-placeholder {
    color: var(--adr-muted, #8a93a3);
}

[data-client="adriatico"] .adr-forms .ns-wrap.ns-open .ns-chevron {
    color: var(--adr-navy, #0a2240);
}

/* GDPR / consent row */
[data-client="adriatico"] .adr-forms__gdpr {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[data-client="adriatico"] .adr-forms__check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--adr-f-check-size);
    line-height: 1.7;
    color: var(--adr-ink, #111);
    cursor: pointer;
}

[data-client="adriatico"] .adr-forms--contact .adr-forms__check {
    gap: 10px;
    line-height: 1.5;
    color: var(--adr-body, #4a5160);
}

[data-client="adriatico"] .adr-forms__check input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 4px 0 0;
    padding: 0;
    accent-color: var(--adr-btn, #0f1f3d);
    cursor: pointer;
}

[data-client="adriatico"] .adr-forms--contact .adr-forms__check input {
    margin-top: 1px;
}

[data-client="adriatico"] .adr-forms__check a {
    color: var(--adr-ink, #111);
    text-decoration: underline;
    text-underline-offset: 2px;
}

[data-client="adriatico"] .adr-forms__check a:hover {
    color: var(--adr-navy, #0a2240);
}

/* Messages */
[data-client="adriatico"] .adr-forms__error {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--adr-red, #b3261e);
}

[data-client="adriatico"] .adr-forms__success {
    margin: 0;
    padding: 12px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--adr-navy, #0a2240);
}

/* Submit */
[data-client="adriatico"] .adr-forms__actions {
    display: flex;
}

[data-client="adriatico"] .adr-forms__submit {
    flex: 1 1 auto;
    height: var(--adr-f-h);
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: var(--adr-f-radius);
    background: var(--adr-btn, #0f1f3d);
    color: #fff;
    font-family: inherit;
    font-size: var(--adr-f-size);
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background 0.15s;
}

[data-client="adriatico"] .adr-forms__submit:hover:not(:disabled) {
    background: var(--adr-btn-hover, #16305c);
}

[data-client="adriatico"] .adr-forms__submit:disabled {
    opacity: 0.7;
    cursor: progress;
}

[data-client="adriatico"] .adr-forms--sidebar .adr-forms__submit {
    font-size: 14px;
    font-weight: 400;
}

[data-client="adriatico"] .adr-forms--inline .adr-forms__submit {
    flex: 0 0 auto;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
}

[data-client="adriatico"] .adr-forms--contact.adr-forms--modal .adr-forms__submit {
    height: 44px;
}

[data-client="adriatico"] .adr-forms--card .adr-forms__submit {
    flex: 0 0 auto;
    min-width: 180px;
    padding: 0 34px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@media (max-width: 700px) {
    [data-client="adriatico"] .adr-forms--inline .adr-forms__form,
    [data-client="adriatico"] .adr-forms__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-client="adriatico"] .adr-forms__field--span2 {
        grid-column: auto;
    }

    [data-client="adriatico"] .adr-forms--card .adr-forms__submit {
        flex: 1 1 auto;
    }
}

/* ════════ areas/global/style.css ════════ */

/* ── Adriatico — global widgets ─────────────────────────────────────────────
   Fixed "Kontaktirajte nas" side tab, back-to-top button, and the contact
   modal's head + agent row (the modal shell and form live in areas/forms).
   z-index 40: under the header (1000+), the cookie banner (9999) and the
   modals (100000). Buttons reset the global button{}; svgs sized here. */

[data-client="adriatico"] .adr-global__tab {
    position: fixed;
    z-index: 40;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    margin: 0;
    padding: 18px 12px;
    border: 0;
    /* Rotated 180°, so the visual left corners are the box's right ones. */
    border-radius: 0 4px 4px 0;
    background: var(--adr-btn, #0f1f3d);
    color: #fff;
    font-family: var(--brand-font-body, "Roboto", sans-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: background 0.15s;
}

[data-client="adriatico"] .adr-global__tab:hover,
[data-client="adriatico"] .adr-global__tab:focus-visible {
    background: var(--adr-btn-hover, #16305c);
}

[data-client="adriatico"] .adr-global__top {
    position: fixed;
    z-index: 40;
    right: 24px;
    bottom: 22px;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--adr-btn, #0f1f3d);
    color: #fff;
    line-height: 1;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s, background 0.15s;
}

[data-client="adriatico"] .adr-global__top--on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s, transform 0.2s, visibility 0s, background 0.15s;
}

[data-client="adriatico"] .adr-global__top:hover,
[data-client="adriatico"] .adr-global__top:focus-visible {
    background: var(--adr-btn-hover, #16305c);
}

[data-client="adriatico"] .adr-global__top svg {
    width: 16px;
    height: 9px;
}

/* Phones: the tab stays (the design keeps it) but slimmer, so it covers as
   little of the content's right edge as possible. */
@media (max-width: 700px) {
    [data-client="adriatico"] .adr-global__tab {
        padding: 12px 7px;
        font-size: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    [data-client="adriatico"] .adr-global__top {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-client="adriatico"] .adr-global__top {
        transition: none;
    }
}

/* ── Contact modal content ──────────────────────────────────────────────── */

[data-client="adriatico"] .adr-global__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 24px;
}

[data-client="adriatico"] .adr-global__eyebrow {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] h3.adr-global__title {
    margin: 0;
    font-family: var(--brand-font-heading, "Roboto", sans-serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-global__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--adr-body, #4a5160);
}

[data-client="adriatico"] .adr-global__agent {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--adr-line, #e6e8ed);
    border-bottom: 1px solid var(--adr-line, #e6e8ed);
}

[data-client="adriatico"] .adr-global__agent-img {
    display: block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: contain;
    background: #f3f5f8;
}

/* An agent photo (AssetImage → <picture>/<img>) fills the round mark. */
[data-client="adriatico"] .adr-global__agent-img--photo {
    overflow: hidden;
}

[data-client="adriatico"] .adr-global__agent-img--photo picture,
[data-client="adriatico"] .adr-global__agent-img--photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-client="adriatico"] .adr-global__agent-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
}

[data-client="adriatico"] .adr-global__agent-text strong {
    font-weight: 500;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-global__agent-text a {
    color: var(--adr-body, #4a5160);
    text-decoration: none;
}

[data-client="adriatico"] .adr-global__agent-text a:hover {
    color: var(--adr-navy, #0a2240);
}

@media (max-width: 700px) {
    [data-client="adriatico"] h3.adr-global__title {
        font-size: 21px;
    }
}

/* ════════ areas/header/style.css ════════ */

/* ── Adriatico — header area (hd-header / hd-logo / hd-nav / hd-actions) ──
   Public renders: HeaderShell / HeaderLogo / HeaderNav / HeaderActions.
   Canvas: the same adr-hd-* classes from previews.js, plus the `hd-header`
   ELEMENT rules at the bottom (the shell is a plain GrapesJS type).
   Traps handled here: the global `svg { width:100% }` (every icon is sized
   by .adr-ico--*), the global `button {}` (every button below resets
   padding/radius/background/border/line-height/letter-spacing). */

[data-client="adriatico"] .adr-hd {
    position: relative;
    z-index: 30;
    background: #ffffff;
    border-bottom: 1px solid var(--adr-line, #e6e8ed);
    color: var(--adr-ink, #111111);
}

[data-client="adriatico"] .adr-hd--sticky {
    position: sticky;
    top: 0;
}

[data-client="adriatico"] .adr-hd__bar {
    box-sizing: border-box;
    max-width: 1300px;
    height: 84px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Shared button reset for every header control (beats the global button
   rule; component rules below set what they need). */
[data-client="adriatico"] .adr-hd :where(button) {
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

/* Icons */
[data-client="adriatico"] .adr-ico--chev {
    width: 10px;
    height: 6px;
    flex: none;
}

[data-client="adriatico"] .adr-ico--phone {
    width: 18px;
    height: 18px;
    flex: none;
}

[data-client="adriatico"] .adr-ico--burger {
    width: 24px;
    height: 18px;
    flex: none;
}

[data-client="adriatico"] .adr-ico--action {
    width: 20px;
    height: 20px;
    flex: none;
}

/* ── Logo ── */
[data-client="adriatico"] .adr-hd-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    color: var(--adr-ink, #111111);
    text-decoration: none;
}

[data-client="adriatico"] .adr-hd-logo__img {
    display: block;
    width: 208px;
    height: auto;
    max-height: 72px;
    object-fit: contain;
    object-position: left center;
}

[data-client="adriatico"] .adr-hd-logo__text {
    font-size: 16px;
    font-weight: 500;
}

[data-client="adriatico"] .adr-hd-logo__ph {
    display: block;
    width: 208px;
    height: 40px;
    background: var(--adr-surface-3, #f2f5f8);
}

/* ── Desktop nav ── */
[data-client="adriatico"] .adr-hd-nav {
    margin-left: auto;
}

[data-client="adriatico"] .adr-hd-nav__list {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
}

[data-client="adriatico"] .adr-hd-nav__item {
    position: relative;
    margin: 0;
}

[data-client="adriatico"] .adr-hd-nav__item--drop {
    padding: 30px 0;
}

[data-client="adriatico"] .adr-hd-nav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--adr-ink, #111111);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
    white-space: nowrap;
}

[data-client="adriatico"] .adr-hd-nav__link:hover,
[data-client="adriatico"] .adr-hd-nav__item.is-open > .adr-hd-nav__link,
[data-client="adriatico"] .adr-hd-nav__item.is-open .adr-hd-nav__split > .adr-hd-nav__link {
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-hd-nav__split {
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-client="adriatico"] .adr-hd .adr-hd-nav__chev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 22px;
    color: var(--adr-ink, #111111);
}

[data-client="adriatico"] .adr-hd-nav__item.is-open .adr-ico--chev {
    transform: rotate(180deg);
}

/* Dropdown panel */
[data-client="adriatico"] .adr-hd-drop {
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 40;
    min-width: 220px;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-client="adriatico"] .adr-hd-drop[hidden] {
    display: none;
}

[data-client="adriatico"] .adr-hd-drop__group {
    display: flex;
    flex-direction: column;
}

[data-client="adriatico"] .adr-hd-drop__label {
    padding: 10px 20px 4px;
    color: #8a8f98;
    font-size: 12px;
    font-weight: 400;
}

[data-client="adriatico"] .adr-hd-drop__link {
    display: block;
    padding: 10px 20px;
    color: var(--adr-ink, #111111);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}

[data-client="adriatico"] .adr-hd-drop__link.is-indented {
    padding: 8px 32px;
}

[data-client="adriatico"] .adr-hd-drop__link:hover,
[data-client="adriatico"] .adr-hd-drop__link:focus-visible {
    background: #f3f5f8;
    color: var(--adr-ink, #111111);
}

/* ── Actions ── */
[data-client="adriatico"] .adr-hd-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: none;
    font-size: 14px;
    font-weight: 500;
}

[data-client="adriatico"] .adr-hd-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--adr-ink, #111111);
    text-decoration: none;
    white-space: nowrap;
}

[data-client="adriatico"] .adr-hd-phone:hover {
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-hd-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adr-ink, #111111);
}

[data-client="adriatico"] .adr-hd-icon__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--adr-navy, #0a2240);
    color: #ffffff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

[data-client="adriatico"] .adr-hd-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-hd .adr-hd-burger {
    width: 44px;
    height: 44px;
}

/* ── Mobile drop panel ── */
[data-client="adriatico"] .adr-hd-mob {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 0 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    font-size: 15px;
    font-weight: 500;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
}

[data-client="adriatico"] .adr-hd-mob[hidden] {
    display: none;
}

[data-client="adriatico"] .adr-hd-mob__list,
[data-client="adriatico"] .adr-hd-mob__sub,
[data-client="adriatico"] .adr-hd-mob__grouplist {
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-client="adriatico"] .adr-hd-mob__item {
    border-bottom: 1px solid #eef0f3;
}

[data-client="adriatico"] .adr-hd-mob__row {
    display: flex;
    align-items: stretch;
}

[data-client="adriatico"] .adr-hd .adr-hd-mob__link {
    display: block;
    flex: 1 1 auto;
    padding: 14px 24px;
    color: var(--adr-ink, #111111);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    text-decoration: none;
}

[data-client="adriatico"] .adr-hd .adr-hd-mob__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    flex: none;
    color: var(--adr-ink, #111111);
}

[data-client="adriatico"] .adr-hd-mob__toggle.is-open .adr-ico--chev {
    transform: rotate(180deg);
}

[data-client="adriatico"] .adr-hd-mob__sub {
    padding: 0 0 10px;
}

[data-client="adriatico"] .adr-hd-mob__sub[hidden] {
    display: none;
}

[data-client="adriatico"] .adr-hd-mob__label {
    display: block;
    padding: 10px 36px 4px;
    color: #8a8f98;
    font-size: 12px;
    font-weight: 400;
}

[data-client="adriatico"] .adr-hd-mob__sublink {
    display: block;
    padding: 10px 36px;
    color: var(--adr-ink, #111111);
    font-size: 14px;
    text-decoration: none;
}

[data-client="adriatico"] .adr-hd-mob__grouplist.is-indented .adr-hd-mob__sublink {
    padding-left: 48px;
}

[data-client="adriatico"] .adr-hd-mob__flags {
    padding: 14px 24px;
}

[data-client="adriatico"] .adr-hd-mob__phone {
    padding: 6px 24px;
    color: var(--adr-navy, #0a2240);
    text-decoration: none;
}

/* Desktop never shows the drop panel, whatever its state. */
@media (min-width: 1100px) {
    [data-client="adriatico"] .adr-hd-mob {
        display: none;
    }
}

/* 1100–1249px: the full bar only just fits — tighten its rhythm. */
@media (min-width: 1100px) and (max-width: 1249.98px) {
    [data-client="adriatico"] .adr-hd__bar,
    [data-client="adriatico"] .adr-hd-nav__list,
    [data-client="adriatico"] .adr-hd-actions {
        gap: 20px;
    }

    [data-client="adriatico"] .adr-hd-logo__img {
        width: 180px;
    }
}

/* Below 1100px: hamburger only. */
@media (max-width: 1099.98px) {
    [data-client="adriatico"] .adr-hd-nav {
        display: none;
    }

    [data-client="adriatico"] .adr-hd-actions {
        margin-left: auto;
    }

    [data-client="adriatico"] .adr-hd-actions > :not(.adr-hd-burger) {
        display: none;
    }

    [data-client="adriatico"] .adr-hd-actions .adr-hd-burger {
        display: flex;
    }
}

@media (max-width: 699.98px) {
    [data-client="adriatico"] .adr-hd__bar {
        padding: 0 16px;
        gap: 16px;
    }

    [data-client="adriatico"] .adr-hd-logo__img,
    [data-client="adriatico"] .adr-hd-logo__ph {
        width: 160px;
    }
}

/* ── Editor canvas ──────────────────────────────────────────────────────
   hd-header is a plain GrapesJS element (core styles it from
   section-previews-real.css); restate the Adriatico bar on it. Children sit
   in GrapesJS wrappers ([data-gjs-type]) — those are the flex items. */
[data-client="adriatico"] hd-header {
    height: 84px;
    min-height: 84px;
    padding: 0 max(24px, calc((100% - 1252px) / 2));
    gap: 30px;
    background: #ffffff;
    border-bottom: 1px solid var(--adr-line, #e6e8ed);
    color: var(--adr-ink, #111111);
}

[data-client="adriatico"] hd-header [data-gjs-type="hd-nav"] {
    margin-left: auto;
}

[data-client="adriatico"] hd-header hd-actions,
[data-client="adriatico"] hd-header [data-gjs-type="hd-actions"] {
    margin-left: 0;
}

[data-client="adriatico"] .adr-hd-lang-prev {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

[data-client="adriatico"] .adr-hd-lang-prev__flag {
    display: block;
    width: 18px;
    height: 12px;
    background: linear-gradient(#ff0000 0 33.3%, #ffffff 33.3% 66.6%, #171796 66.6%);
}

@media (max-width: 1099.98px) {
    [data-client="adriatico"] hd-header [data-gjs-type="hd-nav"] {
        display: none;
    }

    [data-client="adriatico"] hd-header [data-gjs-type="hd-actions"] {
        margin-left: auto;
    }
}

@media (max-width: 699.98px) {
    [data-client="adriatico"] hd-header {
        padding: 0 16px;
        gap: 16px;
    }
}

/* ════════ areas/home/style.css ════════ */

/* ── Adriatico — homepage area (hp-hero / hp-featured / hp-cta / hp-tiles) ──
   Public renders + their canvas previews share the adr-* classes; canvas-only
   mocks (listing card, search card, notices) are at the bottom.
   Traps handled: every <svg> is sized by a class rule; every <button>
   resets padding / radius / border / background / line-height / spacing. */

/* ── Section heading (eyebrow / h2 / lead) ── */
[data-client="adriatico"] .adr-sec-head {
    margin: 0 0 60px;
}

[data-client="adriatico"] .adr-sec-head--center {
    text-align: center;
}

[data-client="adriatico"] .adr-sec-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 40px;
}

[data-client="adriatico"] .adr-sec-head__eyebrow {
    display: block;
    color: var(--adr-navy, #0a2240);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

[data-client="adriatico"] .adr-sec-head__title {
    margin: 0;
    color: var(--adr-ink, #111111);
    font-family: var(--brand-font-heading, var(--brand-font-body, sans-serif));
    font-size: 36px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
}

[data-client="adriatico"] .adr-sec-head__eyebrow + .adr-sec-head__title {
    margin-top: 36px;
}

[data-client="adriatico"] .adr-sec-head__lead {
    max-width: 720px;
    margin: 34px 0 0;
    color: #222222;
    font-size: 18px;
    line-height: 1.6;
}

[data-client="adriatico"] .adr-sec-head--center .adr-sec-head__lead {
    margin-left: auto;
    margin-right: auto;
}

/* ── hp-hero ── */
[data-client="adriatico"] .adr-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    margin: 0 71px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--adr-navy, #0a2240);
    color: #ffffff;
}

[data-client="adriatico"] .adr-hero--plain {
    background: linear-gradient(135deg, var(--adr-navy, #0a2240) 0%, #1f5d8c 100%);
}

[data-client="adriatico"] .adr-hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-client="adriatico"] .adr-hero__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10, 34, 64, 0.32) 0%, rgba(10, 34, 64, 0.18) 55%, rgba(10, 34, 64, 0.32) 100%);
}

[data-client="adriatico"] .adr-hero__content {
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

[data-client="adriatico"] .adr-hero__eyebrows {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #ffffff;
    font-family: var(--brand-font-body, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* letter-spacing trails the last glyph — pad the start to keep it centred */
[data-client="adriatico"] .adr-hero__eyebrow {
    display: block;
    padding-left: 0.5em;
    font-family: inherit;
}

[data-client="adriatico"] .adr-hero__title {
    margin: 30px 0 0;
    color: #ffffff;
    font-family: var(--brand-font-heading, var(--brand-font-body, sans-serif));
    font-size: 36px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

[data-client="adriatico"] .adr-hero__search {
    width: 100%;
    max-width: 840px;
    margin-top: 44px;
    color: var(--adr-ink, #111111);
    text-align: left;
    text-shadow: none;
}

/* ── hp-featured ── */
[data-client="adriatico"] .adr-feat {
    padding: 100px 24px;
    background: #ffffff;
}

[data-client="adriatico"] .adr-feat__inner {
    max-width: 1300px;
    margin: 0 auto;
}

[data-client="adriatico"] .adr-feat__nav {
    display: flex;
    gap: 10px;
    flex: none;
}

[data-client="adriatico"] .adr-feat .adr-feat__navbtn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 2px;
    background: var(--adr-btn, #0f1f3d);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    cursor: pointer;
}

[data-client="adriatico"] .adr-feat .adr-feat__navbtn:hover {
    background: var(--adr-btn-hover, #16305c);
}

[data-client="adriatico"] .adr-feat__viewport {
    overflow: hidden;
    overflow: clip;
    /* card shadows sit just outside the slide box */
    padding: 6px 0 24px;
    margin: -6px 0 -24px;
}

[data-client="adriatico"] .adr-feat__track {
    --adr-per: 4;
    --adr-gap: 30px;
    display: flex;
    gap: var(--adr-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateX(calc(var(--adr-i, 0) * -1 * (100% + var(--adr-gap)) / var(--adr-per)));
    transition: transform 0.45s ease;
}

[data-client="adriatico"] .adr-feat__slide {
    flex: 0 0 calc((100% - (var(--adr-per) - 1) * var(--adr-gap)) / var(--adr-per));
    min-width: 0;
    margin: 0;
}

[data-client="adriatico"] .adr-feat__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 30px;
}

[data-client="adriatico"] .adr-feat .adr-feat__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    line-height: 1;
    letter-spacing: normal;
    cursor: pointer;
}

[data-client="adriatico"] .adr-feat__dot::before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #bfc4cc;
}

[data-client="adriatico"] .adr-feat__dot.is-active::before {
    width: 6px;
    height: 6px;
    background: var(--adr-ink-2, #1b1f27);
}

[data-client="adriatico"] .adr-feat__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-client="adriatico"] .adr-feat__cell {
    min-width: 0;
    margin: 0;
}

[data-client="adriatico"] .adr-feat__more {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

[data-client="adriatico"] .adr-feat__morebtn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 42px;
    border: 1px solid var(--adr-navy, #0a2240);
    border-radius: 2px;
    background: transparent;
    color: var(--adr-navy, #0a2240);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

[data-client="adriatico"] .adr-feat__morebtn:hover {
    background: var(--adr-navy, #0a2240);
    color: #ffffff;
}

@media (max-width: 1249.98px) {
    [data-client="adriatico"] .adr-feat__track {
        --adr-per: 3;
    }
}

@media (max-width: 899.98px) {
    [data-client="adriatico"] .adr-feat__track {
        --adr-per: 2;
        --adr-gap: 20px;
    }
}

@media (max-width: 599.98px) {
    [data-client="adriatico"] .adr-feat__track {
        --adr-per: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-client="adriatico"] .adr-feat__track {
        transition: none;
    }
}

/* ── hp-cta ── */
[data-client="adriatico"] .adr-cta {
    padding: 120px 24px 40px;
    background: var(--adr-cta-band, linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%));
}

[data-client="adriatico"] .adr-cta__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1120px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: var(--adr-cta-card, #f7f8fa);
    box-shadow: 0 20px 60px rgba(10, 34, 64, 0.12);
}

[data-client="adriatico"] .adr-cta__card--solo {
    grid-template-columns: 1fr;
}

[data-client="adriatico"] .adr-cta__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 70px;
}

[data-client="adriatico"] .adr-cta__title {
    margin: 0 0 24px;
    color: var(--adr-ink, #111111);
    font-family: var(--brand-font-heading, var(--brand-font-body, sans-serif));
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
}

[data-client="adriatico"] .adr-cta__p {
    margin: 0 0 18px;
    color: #222222;
    font-size: 16px;
    line-height: 1.9;
}

[data-client="adriatico"] .adr-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    padding: 16px 34px 16px calc(34px + 0.18em);
    border-radius: 999px;
    background: var(--adr-btn, #0f1f3d);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s;
}

[data-client="adriatico"] .adr-cta__btn:hover {
    background: var(--adr-btn-hover, #16305c);
    color: #ffffff;
}

[data-client="adriatico"] .adr-cta__media {
    position: relative;
    min-height: 830px;
}

[data-client="adriatico"] .adr-cta__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── hp-tiles ── */
[data-client="adriatico"] .adr-tiles {
    padding: 100px 24px 150px;
    background: var(--adr-surface-2, #f7f8fa);
}

[data-client="adriatico"] .adr-tiles__inner {
    max-width: 1300px;
    margin: 0 auto;
}

[data-client="adriatico"] .adr-tiles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-client="adriatico"] .adr-tiles__cell {
    min-width: 0;
    margin: 0;
}

[data-client="adriatico"] .adr-tile {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 504px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--adr-navy, #0a2240);
    box-shadow: 0 20px 40px rgba(10, 34, 64, 0.15);
    color: #ffffff;
    text-decoration: none;
}

[data-client="adriatico"] .adr-tile:hover {
    color: #ffffff;
}

[data-client="adriatico"] .adr-tile__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

[data-client="adriatico"] .adr-tile:hover .adr-tile__img {
    transform: scale(1.04);
}

[data-client="adriatico"] .adr-tile__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10, 34, 64, 0.55) 0%, rgba(10, 34, 64, 0) 38%, rgba(10, 34, 64, 0) 62%, rgba(10, 34, 64, 0.6) 100%);
}

[data-client="adriatico"] .adr-tile__top {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 30px 30px 0;
}

[data-client="adriatico"] .adr-tile__count {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: capitalize;
}

[data-client="adriatico"] .adr-tile__name {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

[data-client="adriatico"] .adr-tile__more {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 30px 30px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

[data-client="adriatico"] .adr-home-ico--play {
    width: 9px;
    height: 11px;
    flex: none;
}

@media (min-width: 1100px) {
    [data-client="adriatico"] .adr-tiles__cell:nth-child(2n) {
        margin-top: 50px;
    }
}

/* ── Responsive ── */
@media (max-width: 1099.98px) {
    [data-client="adriatico"] .adr-hero {
        margin: 0 24px;
    }
}

@media (max-width: 899.98px) {
    [data-client="adriatico"] .adr-cta__card {
        grid-template-columns: 1fr;
    }

    [data-client="adriatico"] .adr-cta__text {
        padding: 50px 28px;
    }

    [data-client="adriatico"] .adr-cta__media {
        min-height: 420px;
    }
}

@media (max-width: 699.98px) {
    [data-client="adriatico"] .adr-hero {
        min-height: 560px;
        margin: 0 12px;
    }

    [data-client="adriatico"] .adr-hero__content {
        padding: 56px 16px;
    }

    [data-client="adriatico"] .adr-hero__eyebrows {
        font-size: 12px;
        letter-spacing: 0.3em;
    }

    [data-client="adriatico"] .adr-hero__eyebrow {
        padding-left: 0.3em;
    }

    [data-client="adriatico"] .adr-hero__title,
    [data-client="adriatico"] .adr-sec-head__title {
        font-size: 28px;
    }

    [data-client="adriatico"] .adr-sec-head {
        margin-bottom: 40px;
    }

    [data-client="adriatico"] .adr-sec-head__eyebrow + .adr-sec-head__title {
        margin-top: 20px;
    }

    [data-client="adriatico"] .adr-sec-head__lead {
        margin-top: 20px;
        font-size: 16px;
    }

    [data-client="adriatico"] .adr-feat,
    [data-client="adriatico"] .adr-tiles {
        padding: 64px 16px;
    }

    [data-client="adriatico"] .adr-cta {
        padding: 64px 12px 30px;
    }

    [data-client="adriatico"] .adr-tile {
        height: 420px;
    }
}

/* ── Editor canvas only (previews.js mocks) ── */
[data-client="adriatico"] .adr-prev-note {
    display: block;
    margin: -36px 0 24px;
    color: var(--adr-muted, #8a93a3);
    font-size: 12px;
}

[data-client="adriatico"] .adr-prev-loading {
    height: 360px;
    background: var(--adr-surface-2, #f7f8fa);
}

[data-client="adriatico"] .adr-pcard-prev {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--adr-line, #e6e8ed);
    border-radius: 2px;
    background: #ffffff;
    overflow: hidden;
}

[data-client="adriatico"] .adr-pcard-prev__media {
    aspect-ratio: 4 / 3;
    background: var(--adr-surface-3, #f2f5f8);
}

[data-client="adriatico"] .adr-pcard-prev__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-client="adriatico"] .adr-pcard-prev__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 20px;
}

[data-client="adriatico"] .adr-pcard-prev__price {
    color: var(--adr-navy, #0a2240);
    font-size: 18px;
    font-weight: 500;
}

[data-client="adriatico"] .adr-pcard-prev__title {
    color: var(--adr-ink, #111111);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

[data-client="adriatico"] .adr-pcard-prev__place {
    color: var(--adr-body, #4a5160);
    font-size: 13px;
}

/* ════════ areas/locale/style.css ════════ */

/* ── Adriatico — language switcher (LocaleSwitcher slot) + FlagRow ────────
   Every flag <svg> is sized here (global svg{100%} trap); the trigger
   <button> resets the global button{} rule. */

[data-client="adriatico"] .adr-locale {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--brand-font-body, "Roboto", sans-serif);
}

[data-client="adriatico"] .adr-locale__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--adr-ink, #111);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
}

[data-client="adriatico"] .adr-locale__trigger:hover,
[data-client="adriatico"] .adr-locale--open .adr-locale__trigger {
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-locale .adr-flag {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 12px;
}

[data-client="adriatico"] .adr-locale__chevron {
    flex-shrink: 0;
    width: 10px;
    height: 6px;
    margin-left: 2px;
    transition: transform 0.15s;
}

[data-client="adriatico"] .adr-locale--open .adr-locale__chevron {
    transform: rotate(180deg);
}

[data-client="adriatico"] .adr-locale__menu {
    position: absolute;
    z-index: 50;
    top: 100%;
    left: -16px;
    min-width: 170px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

[data-client="adriatico"] .adr-locale__menu li {
    margin: 0;
    padding: 0;
}

[data-client="adriatico"] .adr-locale__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    color: var(--adr-ink, #111);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

/* Legacy header link chrome (theme.css `header a::after` underline) must not
   reach the menu items. */
[data-client="adriatico"] .adr-locale__item::after,
[data-client="adriatico"] .adr-locale-row__item::after {
    content: none;
}

[data-client="adriatico"] .adr-locale__item:hover,
[data-client="adriatico"] .adr-locale__item:focus-visible {
    background: #f3f5f8;
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-locale__pill {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 2px;
    background: var(--adr-surface-4, #e8edf3);
    color: var(--adr-body, #4a5160);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Flag row (mobile menu) ─────────────────────────────────────────────── */

[data-client="adriatico"] .adr-locale-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

[data-client="adriatico"] .adr-locale-row__item {
    display: block;
    line-height: 0;
    opacity: 0.85;
    transition: opacity 0.15s, transform 0.15s;
}

[data-client="adriatico"] .adr-locale-row__item:hover,
[data-client="adriatico"] .adr-locale-row__item--current {
    opacity: 1;
}

[data-client="adriatico"] .adr-locale-row__item--current {
    outline: 2px solid var(--adr-navy, #0a2240);
    outline-offset: 2px;
}

[data-client="adriatico"] .adr-locale-row .adr-flag {
    display: block;
    width: 24px;
    height: 16px;
}

/* ════════ areas/pages/style.css ════════ */

/* ═══ Page blocks (areas/pages) ═══════════════════════════════════════════
   cl-contact-card (adr-pages-cc) and cl-contact-info (adr-pages-ci) — public
   render and canvas preview share the markup, so these rules serve both.
   Breakpoints: 700 (mobile), 1000 (card goes two-column). The seeded pages
   (migrations/002-install-site.js) tune the outer spacing per page with
   #id rules in the page's own CSS. */

/* ── cl-contact-card ───────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-pages-cc {
    padding: 100px 24px 0;
    box-sizing: border-box;
}

[data-client="adriatico"] .adr-pages-cc__card {
    max-width: 1188px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 4px;
    border-bottom: 2px solid var(--adr-navy, #0a2240);
    box-shadow: 0 50px 80px rgba(0, 0, 0, 0.08);
    padding: 60px 40px 64px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 50px 100px;
    align-items: center;
}

[data-client="adriatico"] .adr-pages-cc__intro {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[data-client="adriatico"] h2.adr-pages-cc__title {
    margin: 0;
    max-width: 240px;
    font-family: var(--brand-font-heading, "Roboto", sans-serif);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.38;
    letter-spacing: normal;
    text-transform: none;
    color: var(--adr-ink, #111111);
}

[data-client="adriatico"] .adr-pages-cc__text {
    margin: 28px 0 0;
    max-width: 230px;
    font-size: 14px;
    line-height: 1.65;
    color: #8a8f98;
}

[data-client="adriatico"] .adr-pages-cc__contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 40px;
    font-size: 14px;
    line-height: 1.5;
}

[data-client="adriatico"] .adr-pages-cc__person {
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-pages-cc__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--adr-navy, #0a2240);
    text-decoration: none;
    overflow-wrap: anywhere;
}

[data-client="adriatico"] a.adr-pages-cc__link:hover,
[data-client="adriatico"] a.adr-pages-cc__link:focus-visible {
    text-decoration: underline;
}

[data-client="adriatico"] .adr-pages-cc__icon {
    display: inline-flex;
    flex: none;
    width: 12px;
    height: 12px;
    align-items: center;
}

[data-client="adriatico"] .adr-pages-cc__icon svg {
    display: block;
    width: 12px;
    height: 12px;
}

[data-client="adriatico"] .adr-pages-cc__icon--mail svg {
    height: 10px;
}

[data-client="adriatico"] .adr-pages-cc__form {
    min-width: 0;
}

[data-client="adriatico"] .adr-pages-cc--tall .adr-forms__textarea {
    min-height: 237px;
}

@media (min-width: 1000px) {
    [data-client="adriatico"] .adr-pages-cc__card {
        grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
        padding: 90px 90px 94px;
    }

    [data-client="adriatico"] .adr-pages-cc__intro {
        padding-left: 62px;
    }
}

@media (max-width: 700px) {
    [data-client="adriatico"] .adr-pages-cc {
        padding-left: 12px;
        padding-right: 12px;
    }

    [data-client="adriatico"] .adr-pages-cc__card {
        padding: 36px 22px;
    }

    [data-client="adriatico"] h2.adr-pages-cc__title,
    [data-client="adriatico"] .adr-pages-cc__text {
        max-width: none;
    }
}

/* ── cl-contact-info ───────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-pages-ci {
    padding: 76px 24px 0;
    box-sizing: border-box;
}

[data-client="adriatico"] .adr-pages-ci__grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 48px 60px;
}

[data-client="adriatico"] .adr-pages-ci__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

[data-client="adriatico"] .adr-pages-ci__icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 46px;
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-pages-ci__icon svg {
    display: block;
    width: 46px;
    height: 46px;
}

[data-client="adriatico"] .adr-pages-ci__icon--mail svg {
    height: 36px;
}

[data-client="adriatico"] .adr-pages-ci__icon--connect svg {
    width: 58px;
    height: 40px;
}

[data-client="adriatico"] .adr-pages-ci__title,
[data-client="adriatico"] h2.adr-pages-ci__title {
    margin: 24px 0 0;
    font-family: var(--brand-font-heading, "Roboto", sans-serif);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--adr-ink, #111111);
    overflow-wrap: anywhere;
}

[data-client="adriatico"] a.adr-pages-ci__title {
    text-decoration: none;
}

[data-client="adriatico"] a.adr-pages-ci__title:hover,
[data-client="adriatico"] a.adr-pages-ci__title:focus-visible {
    color: var(--adr-navy, #0a2240);
    text-decoration: underline;
}

[data-client="adriatico"] .adr-pages-ci__text {
    margin: 20px 0 0;
    max-width: 300px;
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
}

[data-client="adriatico"] .adr-pages-ci__social {
    color: var(--adr-navy, #0a2240);
    text-decoration: underline;
    text-underline-offset: 2px;
}

[data-client="adriatico"] .adr-pages-ci__social:hover {
    color: var(--adr-btn-hover, #16305c);
}

@media (max-width: 700px) {
    [data-client="adriatico"] .adr-pages-ci {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ── Editor canvas only (previews.js form facade) ──────────────────────── */

[data-client="adriatico"] .adr-pages-facade__input {
    display: block;
    box-sizing: border-box;
    min-height: var(--adr-f-h, 46px);
}

[data-client="adriatico"] .adr-pages-facade__input.adr-forms__textarea {
    min-height: 150px;
    color: var(--adr-muted, #8a93a3);
}

[data-client="adriatico"] .adr-pages-cc--tall .adr-pages-facade__input.adr-forms__textarea {
    min-height: 237px;
}

[data-client="adriatico"] .adr-pages-facade__box {
    display: inline-block;
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: 4px;
    border: 1px solid var(--adr-field-line, #dce0e0);
    border-radius: 2px;
    background: #ffffff;
}

[data-client="adriatico"] .adr-pages-facade__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ════════ areas/property/style.css ════════ */

/* ── Adriatico — property page (areas/property) ───────────────────────────
   Design: Adriatico Property.dc.html. Public renders (sections.js) and the
   canvas previews (previews.js) share these adr-* classes; the canvas-only
   rules at the bottom restyle the structural <ps-columns>/<ps-col> elements.

   Global traps handled here (CLAUDE.md): every <svg> is sized inline by
   lib/icons.js; every <button> resets padding / border / radius / background
   / line-height / letter-spacing; headings set their own size, weight,
   line-height, spacing and margin (theme.css h1–h6 rules); images reset the
   global img { border-radius: 8px }. Breakpoints: 700px (mobile), 1000px
   (two columns, per the design's property page). */

/* ── shared: breadcrumb, icons, ID badge (also used by archive + blog) ───── */

[data-client="adriatico"] .adr-i {
    display: block;
    flex: none;
}

[data-client="adriatico"] .adr-crumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
}

[data-client="adriatico"] .adr-crumb li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

[data-client="adriatico"] .adr-crumb a {
    color: var(--adr-ink, #111);
    text-decoration: none;
}

[data-client="adriatico"] .adr-crumb a:hover {
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-crumb li > span {
    color: var(--adr-body, #4a5160);
    overflow-wrap: anywhere;
}

[data-client="adriatico"] .adr-crumb .adr-i {
    color: #8a8f98;
}

[data-client="adriatico"] .adr-idbadge {
    display: inline-block;
    background: var(--adr-navy, #0a2240);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    padding: 3px 9px;
    border-radius: 2px;
}

/* ── page column ─────────────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-ps-crumb,
[data-client="adriatico"] .adr-ps-head,
[data-client="adriatico"] .adr-ps-cols {
    max-width: 1152px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

[data-client="adriatico"] .adr-ps-crumb {
    margin-top: 12px;
}

[data-client="adriatico"] .adr-ps-crumb ol {
    font-size: 12px;
}

/* ── ps-header ───────────────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-ps-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px 24px;
    margin-top: 16px;
}

[data-client="adriatico"] .adr-ps-head__main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 520px;
    min-width: 0;
}

[data-client="adriatico"] .adr-ps-head__title {
    margin: 0;
    font-family: var(--brand-font-heading, var(--brand-font-body, inherit));
    font-size: 28px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--adr-ink, #111);
    overflow-wrap: anywhere;
}

[data-client="adriatico"] .adr-ps-head__badges {
    display: flex;
}

[data-client="adriatico"] .adr-ps-head__city {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--adr-body, #4a5160);
}

[data-client="adriatico"] .adr-ps-head__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

[data-client="adriatico"] .adr-ps-actions {
    position: relative;
    display: flex;
    gap: 4px;
}

[data-client="adriatico"] .adr-ps-iconbtn {
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--adr-navy, #0a2240);
    border-radius: 2px;
    background: #fff;
    color: var(--adr-navy, #0a2240);
    font: inherit;
    line-height: 1;
    letter-spacing: normal;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s;
}

[data-client="adriatico"] .adr-ps-iconbtn:hover,
[data-client="adriatico"] .adr-ps-iconbtn.is-open {
    background: #f3f5f8;
}

[data-client="adriatico"] .adr-ps-iconbtn:disabled {
    cursor: default;
}

[data-client="adriatico"] .adr-ps-iconbtn:focus-visible {
    outline: 2px solid var(--adr-navy, #0a2240);
    outline-offset: 2px;
}

[data-client="adriatico"] .adr-ps-share {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 20;
    min-width: 160px;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    font-size: 14px;
    line-height: 1.4;
}

[data-client="adriatico"] .adr-ps-share__item {
    padding: 9px 18px;
    color: var(--adr-ink, #111);
    text-decoration: none;
}

[data-client="adriatico"] .adr-ps-share__item:hover,
[data-client="adriatico"] .adr-ps-share__item:focus-visible {
    background: #f3f5f8;
    color: var(--adr-ink, #111);
}

/* price block (ps-header) */
[data-client="adriatico"] .adr-ps-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    text-align: right;
}

[data-client="adriatico"] .adr-ps-price__old {
    font-size: 15px;
    line-height: 1.2;
    color: var(--adr-muted, #8a93a3);
}

[data-client="adriatico"] .adr-ps-price__value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-ps-price__value small {
    font-size: 14px;
    font-weight: 400;
}

[data-client="adriatico"] .adr-ps-price__value.is-request {
    font-size: 20px;
    font-weight: 500;
}

[data-client="adriatico"] .adr-ps-price__ppm {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-ps-price__sold {
    background: var(--adr-red, #b3261e);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    padding: 3px 8px;
    border-radius: 2px;
    text-transform: uppercase;
}

/* ── ps-columns / ps-col (public render) ─────────────────────────────────── */

[data-client="adriatico"] .adr-ps-cols {
    margin-top: 38px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px 27px;
    /* stretch: the side column spans the row, so the sticky contact card
       inside it has room to travel */
    align-items: stretch;
}

[data-client="adriatico"] .adr-ps-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

@media (min-width: 1000px) {
    [data-client="adriatico"] .adr-ps-cols {
        grid-template-columns: minmax(0, 1fr) 326px;
    }

    [data-client="adriatico"] .adr-ps-cols[data-sidebar="left"] {
        grid-template-columns: 326px minmax(0, 1fr);
    }

    [data-client="adriatico"] .adr-ps-cols[data-sidebar="left"] > :first-child {
        order: 2;
    }

    [data-client="adriatico"] .adr-ps-contact[data-sticky="true"] {
        position: sticky;
        top: 20px;
    }
}

/* ── ps-gallery ──────────────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-ps-gallery {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[data-client="adriatico"] .adr-ps-gallery__stage {
    position: relative;
    aspect-ratio: 798 / 535;
    overflow: hidden;
    background: #e6e8ed;
    outline: none;
}

[data-client="adriatico"] .adr-ps-gallery__stage:focus-visible {
    outline: 2px solid var(--adr-navy, #0a2240);
    outline-offset: 2px;
}

[data-client="adriatico"] .adr-ps-gallery__main {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: zoom-in;
    line-height: 0;
    letter-spacing: normal;
}

[data-client="adriatico"] .adr-ps-gallery__main picture,
[data-client="adriatico"] .adr-ps-gallery__thumb picture {
    display: block;
    width: 100%;
    height: 100%;
}

[data-client="adriatico"] .adr-ps-gallery__img,
[data-client="adriatico"] .adr-ps-gallery__thumbimg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
}

[data-client="adriatico"] .adr-ps-gallery__full,
[data-client="adriatico"] .adr-ps-gallery__arrow {
    position: absolute;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 2px;
    color: #fff;
    line-height: 1;
    letter-spacing: normal;
    cursor: pointer;
    transition: background-color 0.15s;
}

[data-client="adriatico"] .adr-ps-gallery__full {
    top: 44px;
    right: 46px;
    width: 42px;
    height: 42px;
    background: rgba(10, 18, 32, 0.65);
}

[data-client="adriatico"] .adr-ps-gallery__full:hover {
    background: rgba(10, 18, 32, 0.85);
}

[data-client="adriatico"] .adr-ps-gallery__arrow {
    top: 50%;
    margin-top: -17px;
    width: 35px;
    height: 35px;
    background: rgba(60, 60, 60, 0.6);
}

[data-client="adriatico"] .adr-ps-gallery__arrow:hover {
    background: rgba(30, 30, 30, 0.8);
}

[data-client="adriatico"] .adr-ps-gallery__arrow.is-prev {
    left: 27px;
}

[data-client="adriatico"] .adr-ps-gallery__arrow.is-next {
    right: 27px;
}

[data-client="adriatico"] .adr-ps-gallery__strip {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 28px) / 8);
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

[data-client="adriatico"] .adr-ps-gallery__thumb {
    display: block;
    aspect-ratio: 96 / 63;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #e6e8ed;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.55;
    line-height: 0;
    letter-spacing: normal;
    transition: opacity 0.15s;
}

[data-client="adriatico"] .adr-ps-gallery__thumb:hover,
[data-client="adriatico"] .adr-ps-gallery__thumb.is-active {
    opacity: 1;
}

/* lightbox — portalled to <body> (Gallery.js); its root re-stamps
   data-client and adds no box of its own. Same layer as the pack modals. */
[data-client="adriatico"].adr-ps-lb-root {
    display: contents;
}

[data-client="adriatico"] .adr-ps-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
}

[data-client="adriatico"] .adr-ps-lb__pic {
    display: block;
}

[data-client="adriatico"] .adr-ps-lb__img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(92vw, 1400px);
    max-height: 84vh;
    object-fit: contain;
    border-radius: 0;
    user-select: none;
}

[data-client="adriatico"] .adr-ps-lb__arrow,
[data-client="adriatico"] .adr-ps-lb__close {
    position: absolute;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #fff;
    line-height: 1;
    letter-spacing: normal;
    cursor: pointer;
}

[data-client="adriatico"] .adr-ps-lb__arrow {
    top: 50%;
    margin-top: -24px;
    width: 48px;
    height: 48px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
}

[data-client="adriatico"] .adr-ps-lb__arrow:hover {
    background: rgba(255, 255, 255, 0.24);
}

[data-client="adriatico"] .adr-ps-lb__arrow.is-prev {
    left: 16px;
}

[data-client="adriatico"] .adr-ps-lb__arrow.is-next {
    right: 16px;
}

[data-client="adriatico"] .adr-ps-lb__close {
    top: 12px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: none;
}

[data-client="adriatico"] .adr-ps-lb__count {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}

/* ── content boxes (Osnovno / Opis / Detalji / Značajke / Kontakt) ───────── */

[data-client="adriatico"] .adr-ps-box {
    display: flex;
    flex-direction: column;
    padding: 27px;
    border: 1px solid var(--adr-line, #e6e8ed);
    border-radius: 2px;
    background: #fff;
    box-sizing: border-box;
}

[data-client="adriatico"] .adr-ps-box__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

[data-client="adriatico"] .adr-ps-box__title,
[data-client="adriatico"] .adr-ps-desc h2,
[data-client="adriatico"] .adr-ps-related__title {
    margin: 0;
    font-family: var(--brand-font-heading, var(--brand-font-body, inherit));
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: normal;
    color: var(--adr-ink, #111);
}

/* Osnovno */
[data-client="adriatico"] .adr-ps-basics__list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 80px;
    margin: 44px 0 0;
    padding: 0;
}

[data-client="adriatico"] .adr-ps-basics__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[data-client="adriatico"] .adr-ps-basics__value {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-ps-basics__label {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--adr-body, #4a5160);
}

/* Opis — the core ps-description render inside pack chrome */
[data-client="adriatico"] .adr-ps-desc > section,
[data-client="adriatico"] .adr-ps-desc > [data-hide] > section {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

[data-client="adriatico"] .adr-ps-desc h2 {
    margin: 0 0 28px;
}

[data-client="adriatico"] .adr-ps-desc h2 + div {
    font-size: 14px;
    line-height: 1.62;
    color: #222;
}

[data-client="adriatico"] .adr-ps-desc h2 + div p,
[data-client="adriatico"] .adr-ps-desc h2 + div li {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.62;
    color: #222;
}

[data-client="adriatico"] .adr-ps-desc h2 + div :is(h2, h3, h4, h5, h6) {
    margin: 18px 0 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-ps-desc h2 + div a {
    color: var(--adr-navy, #0a2240);
    text-decoration: underline;
}

/* Detalji */
[data-client="adriatico"] .adr-ps-details__updated {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--adr-body, #4a5160);
}

[data-client="adriatico"] .adr-ps-details__updated .adr-i {
    color: #6b7280;
}

[data-client="adriatico"] .adr-ps-details__panel {
    margin-top: 34px;
    padding: 26px 27px 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    background: #eaf5fa;
    border: 1px solid var(--adr-navy, #0a2240);
    border-radius: 3px;
}

[data-client="adriatico"] .adr-ps-details__col {
    display: flex;
    flex-direction: column;
    margin: 0;
}

[data-client="adriatico"] .adr-ps-details__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 13px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-ps-details__row dt {
    margin: 0;
    font-weight: 700;
}

[data-client="adriatico"] .adr-ps-details__row dd {
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Značajke */
[data-client="adriatico"] .adr-ps-features__list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    column-count: 3;
    column-gap: 20px;
    font-size: 14px;
    line-height: 1.4;
}

[data-client="adriatico"] .adr-ps-features__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 0 16px;
    break-inside: avoid;
    color: var(--adr-ink, #111);
}

/* Podaci za kontakt */
[data-client="adriatico"] .adr-ps-inquiry__agency {
    margin-top: 28px;
}

/* ps-contact — sidebar card */
[data-client="adriatico"] .adr-ps-contact__card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 40px 28px 28px;
    border: 1px solid var(--adr-line, #e6e8ed);
    border-radius: 2px;
    background: #fff;
}

/* Contact people above the sidebar form (ContactPeople.js) — the design's
   contact-modal person row: round mark, name, muted tel / mailto links,
   between two hairlines. */
[data-client="adriatico"] .adr-ps-people {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--adr-line, #e6e8ed);
    border-bottom: 1px solid var(--adr-line, #e6e8ed);
}

[data-client="adriatico"] .adr-ps-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

[data-client="adriatico"] .adr-ps-person__mark {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f5f8;
    color: var(--brand-heading, #0a2240);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

[data-client="adriatico"] .adr-ps-person__mark picture,
[data-client="adriatico"] .adr-ps-person__mark img {
    display: block;
    width: 100%;
    height: 100%;
}

[data-client="adriatico"] .adr-ps-person__img {
    object-fit: cover;
}

[data-client="adriatico"] .adr-ps-person__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
}

[data-client="adriatico"] .adr-ps-person__name {
    font-weight: 500;
    color: #111;
}

[data-client="adriatico"] .adr-ps-person__role {
    font-size: 13px;
    color: #8a93a3;
}

[data-client="adriatico"] .adr-ps-person__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--brand-body, #4a5160);
    text-decoration: none;
    overflow-wrap: anywhere;
}

[data-client="adriatico"] .adr-ps-person__link:hover {
    color: var(--brand-heading, #0a2240);
    text-decoration: underline;
}

[data-client="adriatico"] .adr-ps-person__link .adr-i {
    flex: 0 0 auto;
}

/* ── ps-related → "Slični oglasi" ────────────────────────────────────────── */

[data-client="adriatico"] .adr-ps-related {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

[data-client="adriatico"] .adr-ps-related__title {
    margin: 16px 0 4px;
}

[data-client="adriatico"] .adr-ps-related::after {
    content: "";
    display: block;
    margin-top: 2px;
    border-top: 1px solid var(--adr-line, #e6e8ed);
}

[data-client="adriatico"] .adr-rel-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

[data-client="adriatico"] .adr-rel {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--adr-line, #e6e8ed);
    background: #fff;
}

[data-client="adriatico"] .adr-rel__media {
    position: relative;
    flex: 0 0 228px;
    height: 172px;
    overflow: hidden;
    background: #e6e8ed;
}

[data-client="adriatico"] .adr-rel__imglink,
[data-client="adriatico"] .adr-rel__imglink picture,
[data-client="adriatico"] .adr-rel__noimg {
    display: block;
    width: 100%;
    height: 100%;
}

[data-client="adriatico"] .adr-rel__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
}

[data-client="adriatico"] .adr-rel__fav {
    position: absolute;
    right: 18px;
    bottom: 16px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    line-height: 1;
    letter-spacing: normal;
    cursor: pointer;
}

[data-client="adriatico"] .adr-rel__fav:hover {
    background: rgba(0, 0, 0, 0.55);
}

[data-client="adriatico"] .adr-rel__body {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px 12px;
}

[data-client="adriatico"] .adr-rel__main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

[data-client="adriatico"] .adr-rel__status,
[data-client="adriatico"] .adr-rel__id {
    align-self: flex-start;
    padding: 2px 5px;
    border-radius: 2px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
}

[data-client="adriatico"] .adr-rel__status {
    background: rgba(40, 40, 40, 0.85);
    text-transform: uppercase;
}

[data-client="adriatico"] .adr-rel__id {
    align-self: auto;
    background: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-rel__title {
    margin: 6px 0 0;
    max-width: 320px;
    font-family: var(--brand-font-body, inherit);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
}

[data-client="adriatico"] .adr-rel__title a {
    color: var(--adr-ink, #111);
    text-decoration: none;
}

[data-client="adriatico"] .adr-rel__title a:hover {
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-rel__city {
    font-size: 12px;
    line-height: 1.4;
    color: #666;
}

[data-client="adriatico"] .adr-rel__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.3;
    color: #222;
}

[data-client="adriatico"] .adr-rel__stats span {
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-client="adriatico"] .adr-rel__stats small {
    font-size: 10px;
}

[data-client="adriatico"] .adr-rel__type {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-rel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--adr-body, #4a5160);
}

[data-client="adriatico"] .adr-rel__meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

[data-client="adriatico"] .adr-rel__meta .adr-i {
    color: #6b7280;
}

[data-client="adriatico"] .adr-rel__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

[data-client="adriatico"] .adr-rel__pricebox {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

[data-client="adriatico"] .adr-rel__old {
    font-size: 12px;
    line-height: 1.2;
    color: var(--adr-muted, #8a93a3);
}

[data-client="adriatico"] .adr-rel__price {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-rel__ppm {
    font-size: 9px;
    line-height: 1.3;
}

[data-client="adriatico"] .adr-rel__btn {
    margin-bottom: 6px;
    padding: 6px 10px;
    border-radius: 2px;
    background: var(--adr-btn, #0f1f3d);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s;
}

[data-client="adriatico"] .adr-rel__btn:hover {
    background: var(--adr-btn-hover, #16305c);
    color: #fff;
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 999px) {
    [data-client="adriatico"] .adr-ps-features__list {
        column-count: 2;
    }
}

@media (max-width: 699px) {
    [data-client="adriatico"] .adr-ps-head__title {
        font-size: 22px;
    }

    [data-client="adriatico"] .adr-ps-head__aside {
        align-items: flex-start;
    }

    [data-client="adriatico"] .adr-ps-price {
        align-items: flex-start;
        text-align: left;
    }

    [data-client="adriatico"] .adr-ps-share {
        right: auto;
        left: 0;
    }

    [data-client="adriatico"] .adr-ps-box {
        padding: 22px 18px;
    }

    [data-client="adriatico"] .adr-ps-basics__list {
        gap: 20px 40px;
        margin-top: 26px;
    }

    [data-client="adriatico"] .adr-ps-details__panel {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 24px;
        padding: 20px 16px 8px;
    }

    [data-client="adriatico"] .adr-ps-features__list {
        column-count: 1;
        margin-top: 22px;
    }

    [data-client="adriatico"] .adr-ps-contact__card {
        padding: 28px 18px 20px;
    }

    [data-client="adriatico"] .adr-ps-gallery__full {
        top: 12px;
        right: 12px;
    }

    [data-client="adriatico"] .adr-ps-gallery__arrow.is-prev {
        left: 10px;
    }

    [data-client="adriatico"] .adr-ps-gallery__arrow.is-next {
        right: 10px;
    }

    [data-client="adriatico"] .adr-ps-gallery__strip {
        grid-auto-columns: calc((100% - 16px) / 5);
    }

    [data-client="adriatico"] .adr-ps-lb__arrow {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }

    [data-client="adriatico"] .adr-ps-lb__arrow.is-prev {
        left: 6px;
    }

    [data-client="adriatico"] .adr-ps-lb__arrow.is-next {
        right: 6px;
    }

    [data-client="adriatico"] .adr-rel__media {
        flex-basis: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    [data-client="adriatico"] .adr-rel__body {
        flex-basis: 100%;
        padding: 12px 14px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-client="adriatico"] .adr-ps-gallery__thumb,
    [data-client="adriatico"] .adr-ps-iconbtn,
    [data-client="adriatico"] .adr-rel__btn {
        transition: none;
    }
}

@media print {
    [data-client="adriatico"] .adr-ps-actions,
    [data-client="adriatico"] .adr-ps-gallery__strip,
    [data-client="adriatico"] .adr-ps-gallery__arrow,
    [data-client="adriatico"] .adr-ps-gallery__full,
    [data-client="adriatico"] .adr-ps-contact,
    [data-client="adriatico"] .adr-ps-inquiry,
    [data-client="adriatico"] .adr-ps-related {
        display: none;
    }

    [data-client="adriatico"] .adr-ps-cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── design-editor canvas only ───────────────────────────────────────────── */
/* The canvas keeps core's structural <ps-columns>/<ps-col> ELEMENTS (plain
   GrapesJS types); restate the public adr-ps-cols grid on them. Same
   specificity as core's section-previews(-real).css element rules, which
   load earlier — pack.css wins by order. */

[data-client="adriatico"] ps-columns {
    max-width: 1152px;
    margin: 38px auto 0;
    grid-template-columns: minmax(0, 1fr) 326px;
    gap: 28px 27px;
    align-items: start;
}

[data-client="adriatico"] ps-columns[sidebarposition="left"] {
    grid-template-columns: 326px minmax(0, 1fr);
}

[data-client="adriatico"] ps-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

@media (max-width: 999px) {
    [data-client="adriatico"] ps-columns,
    [data-client="adriatico"] ps-columns[sidebarposition="left"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

[data-client="adriatico"] .adr-canvas-loading {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d8dee8;
    border-radius: 2px;
    color: #9aa6b5;
    font-size: 12px;
}

[data-client="adriatico"] .adr-canvas-input {
    display: flex;
    align-items: center;
    min-height: 37px;
    color: var(--adr-muted, #8a93a3);
    box-sizing: border-box;
}

[data-client="adriatico"] .adr-canvas-textarea {
    min-height: 94px;
}

/* ════════ areas/search/style.css ════════ */

/* ── Adriatico — hero search card (PropertySearchCard slot) ────────────────
   Dark translucent panel; white 40px controls with 6px corners; the
   NextSelect triggers are restyled to match the inputs (their dropdown is
   portalled to <body> and keeps the core look). */

[data-client="adriatico"] .adr-search {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 16px;
    border-radius: 10px;
    background: rgba(8, 18, 30, 0.88);
    font-family: var(--brand-font-body, "Roboto", sans-serif);
    color: var(--adr-ink-2, #1b1f27);
}

[data-client="adriatico"] .adr-search__row {
    display: flex;
    gap: 10px;
    min-width: 0;
}

[data-client="adriatico"] .adr-search__field {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

[data-client="adriatico"] .adr-search__row--main .adr-search__field--select {
    flex: 3 1 0;
}

[data-client="adriatico"] .adr-search__row--main .adr-search__field--id {
    flex: 2 1 0;
}

[data-client="adriatico"] .adr-search__input {
    display: block;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff;
    color: var(--adr-ink-2, #1b1f27);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

[data-client="adriatico"] .adr-search__input::placeholder {
    color: var(--adr-ink-2, #1b1f27);
    opacity: 1;
}

[data-client="adriatico"] .adr-search__input:focus {
    border-color: var(--adr-navy, #0a2240);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

/* NextSelect trigger → same metrics as the inputs ((0,4,0) beats core's
   .ns-wrap .ns-trigger at (0,2,0)). */
[data-client="adriatico"] .adr-search .ns-wrap .ns-trigger {
    min-height: 40px;
    height: 40px;
    padding: 0 12px 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff;
    color: var(--adr-ink-2, #1b1f27);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    box-shadow: none;
}

[data-client="adriatico"] .adr-search .ns-wrap .ns-trigger:hover,
[data-client="adriatico"] .adr-search .ns-wrap.ns-open .ns-trigger {
    border-color: var(--adr-navy, #0a2240);
    box-shadow: none;
}

[data-client="adriatico"] .adr-search .ns-placeholder {
    color: var(--adr-ink-2, #1b1f27);
}

[data-client="adriatico"] .adr-search .ns-chevron {
    color: #6b7280;
}

[data-client="adriatico"] .adr-search .ns-wrap.ns-open .ns-chevron {
    color: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-search__submit {
    flex: 2 1 0;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: var(--adr-btn, #101e3a);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

[data-client="adriatico"] .adr-search__submit:hover,
[data-client="adriatico"] .adr-search__submit:focus-visible {
    background: var(--adr-btn-hover, #16305c);
}

[data-client="adriatico"] .adr-search__submit svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Canvas mirror (areas/home/previews.js SearchFacade): the same .adr-search
   markup with inert <span> fields instead of inputs / NextSelect triggers. */
[data-client="adriatico"] .adr-search__facade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
}

[data-client="adriatico"] .adr-search__facade > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-client="adriatico"] .adr-search__facade .adr-search__facade-chev {
    flex: 0 0 auto;
    width: 8px;
    height: 12px;
    color: #6b7280;
}

@media (max-width: 700px) {
    [data-client="adriatico"] .adr-search {
        padding: 14px;
    }

    [data-client="adriatico"] .adr-search__row--main {
        flex-direction: column;
    }

    [data-client="adriatico"] .adr-search__row--main .adr-search__field,
    [data-client="adriatico"] .adr-search__row--main .adr-search__submit {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Ranges as a 2×2 grid on phones. */
    [data-client="adriatico"] .adr-search__row--ranges {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ════════ areas/sidebar/style.css ════════ */

/* ── Adriatico — sidebar boxes (areas/sidebar) ─────────────────────────────
   Designs: Adriatico Archive (featured carousel) + Adriatico Blog Post
   (featured list). Boxes: 1px #ebedf0 border, 2px radius, 30px padding,
   18px/500 title, 15px/500 list links padded 8px 0 8px 15px. Used by the
   cl-side-* sections AND inside the sr-search-app wrapper's <aside>. */

[data-client="adriatico"] .adr-side {
    min-width: 0;
}

[data-client="adriatico"] .adr-side-box {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid #ebedf0;
    border-radius: 2px;
    background: #fff;
    box-sizing: border-box;
}

[data-client="adriatico"] .adr-side-box__title {
    margin: 0;
    font-family: var(--brand-font-heading, var(--brand-font-body, inherit));
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    color: var(--adr-ink, #111);
}

[data-client="adriatico"] .adr-side-box__list {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

[data-client="adriatico"] .adr-side-box__list li {
    margin: 0;
}

[data-client="adriatico"] .adr-side-box__list a {
    display: block;
    padding: 8px 0 8px 15px;
    color: var(--adr-ink, #111);
    text-decoration: none;
}

[data-client="adriatico"] .adr-side-box__list a:hover {
    color: var(--adr-navy, #0a2240);
}

/* ── featured listings ───────────────────────────────────────────────────── */

[data-client="adriatico"] .adr-sfeat {
    margin-top: 28px;
}

[data-client="adriatico"] .adr-sfeat--list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 26px;
}

[data-client="adriatico"] .adr-sfeat__slide {
    position: relative;
}

[data-client="adriatico"] .adr-sfeat__card {
    position: relative;
    display: block;
    aspect-ratio: 301 / 226;
    overflow: hidden;
    background: #e6e8ed;
    color: #fff;
    text-decoration: none;
}

[data-client="adriatico"] .adr-sfeat__card:hover {
    color: #fff;
}

[data-client="adriatico"] .adr-sfeat__card picture,
[data-client="adriatico"] .adr-sfeat__noimg {
    display: block;
    width: 100%;
    height: 100%;
}

[data-client="adriatico"] .adr-sfeat__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.4s ease;
}

[data-client="adriatico"] .adr-sfeat__card:hover .adr-sfeat__img {
    transform: scale(1.03);
}

[data-client="adriatico"] .adr-sfeat__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

[data-client="adriatico"] .adr-sfeat__flag,
[data-client="adriatico"] .adr-sfeat__status {
    position: absolute;
    top: 20px;
    padding: 3px 5px;
    border-radius: 2px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

[data-client="adriatico"] .adr-sfeat__flag {
    left: 20px;
    background: var(--adr-navy, #0a2240);
}

[data-client="adriatico"] .adr-sfeat__status {
    right: 20px;
    background: rgba(40, 40, 40, 0.85);
}

[data-client="adriatico"] .adr-sfeat__info {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #fff;
    line-height: 1.3;
}

[data-client="adriatico"] .adr-sfeat__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

[data-client="adriatico"] .adr-sfeat__prices s {
    font-size: 13px;
    opacity: 0.85;
}

[data-client="adriatico"] .adr-sfeat__prices strong {
    font-size: 14px;
    font-weight: 700;
}

[data-client="adriatico"] .adr-sfeat__ppm {
    font-size: 10px;
    font-weight: 700;
}

[data-client="adriatico"] .adr-sfeat__city {
    margin-top: 8px;
    font-size: 14px;
}

[data-client="adriatico"] .adr-sfeat__arrow {
    position: absolute;
    top: 46%;
    z-index: 2;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 2px;
    background: var(--adr-btn, #0f1f3d);
    color: #fff;
    line-height: 1;
    letter-spacing: normal;
    cursor: pointer;
}

[data-client="adriatico"] .adr-sfeat__arrow:hover {
    background: var(--adr-btn-hover, #16305c);
}

[data-client="adriatico"] .adr-sfeat__arrow.is-prev {
    left: 20px;
}

[data-client="adriatico"] .adr-sfeat__arrow.is-next {
    right: 20px;
}

[data-client="adriatico"] .adr-sfeat__dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

[data-client="adriatico"] .adr-sfeat__dot {
    width: 26px;
    height: 20px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: none;
    line-height: 1;
    letter-spacing: normal;
    cursor: pointer;
}

[data-client="adriatico"] .adr-sfeat__dot span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #bfc4cc;
}

[data-client="adriatico"] .adr-sfeat__dot.is-active span {
    width: 6px;
    height: 6px;
    background: var(--adr-ink, #111);
}

@media (max-width: 699px) {
    [data-client="adriatico"] .adr-side-box {
        padding: 24px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-client="adriatico"] .adr-sfeat__img {
        transition: none;
    }
}