:root {
  --ink: #10253c;
  --ink-soft: #405064;
  --paper: #f7f7f5;
  --paper-bright: #ffffff;
  --line: #deded9;
  --red: #e8342a;
  --blue: #1a67d2;
  --acid: #d8e92c;
  --background: var(--paper-bright);
  --foreground: var(--ink);
  --card: var(--paper-bright);
  --card-foreground: var(--ink);
  --muted: #f3f3f0;
  --muted-foreground: #66717e;
  --border: var(--line);
  --primary: var(--red);
  --primary-foreground: #fff;
  --radius: 1rem;
  --sidebar-w: 17.5rem;
  --shadow: 0 12px 40px rgba(16, 37, 60, 0.11);
  --font-sans: "Manrope", sans-serif;
  --font-mono: "Spline Sans Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html.drawer-open, html.photo-viewer-open { overflow: hidden; }
body {
  position: relative;
  margin: 0;
  color: var(--ink);
  background: var(--background);
  font-family: var(--font-sans);
  min-width: 320px;
}
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); box-shadow: 0 8px 28px rgba(16,37,60,.06); backdrop-filter: blur(18px); transition: transform .24s cubic-bezier(.22,.8,.22,1); }
.site-header.is-scrolling { transform: translateY(calc(-100% - 2px)); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem clamp(1rem, 4vw, 4.5rem); }
.brand { display: flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; width: max-content; }
/* The shield supplies its own red field and gold border, so it sits bare rather
   than on the tinted tile the old square icon needed. Height drives the size and
   the width follows the artwork, which is portrait — fixing both would squash it.
   The tilt carries over from the old box. */
.brand-mark { display: grid; place-items: center; width: auto; height: 2.8rem; transform: rotate(-3deg); }
.brand-mark img { display: block; width: auto; height: 100%; }
.brand-copy { font: 800 .9rem/.86 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; }
.mobile-filter-toggle { display: none; }
main { overflow: hidden; }
.section-index { font: 500 .69rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.search-shell { position: relative; z-index: 2; width: min(1320px, calc(100% - 2rem)); margin: 0 auto .75rem; padding: .65rem; color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + .2rem); }
.type-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: max-content; margin-bottom: .65rem; padding: .22rem; border: 1px solid var(--border); border-radius: 999px; background: var(--background); }
.type-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.type-switch-thumb { position: absolute; z-index: 0; top: .22rem; left: .22rem; width: calc(50% - .22rem); height: calc(100% - .44rem); border-radius: 999px; background: var(--primary); box-shadow: 0 4px 14px rgba(232,52,42,.18); transition: transform .26s cubic-bezier(.22,.8,.22,1); }
.type-switch label { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; padding: .46rem .8rem; border-radius: 999px; color: var(--muted-foreground); background: transparent; font: 500 .61rem/1 var(--font-mono); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s ease; }
#car-type-imported:checked ~ .type-switch-thumb { transform: translateX(100%); }
#car-type-domestic:checked ~ label[for="car-type-domestic"],
#car-type-imported:checked ~ label[for="car-type-imported"] { color: var(--primary-foreground); }
.type-switch input:focus-visible ~ .type-switch-thumb { outline: 2px solid var(--primary); outline-offset: 3px; }
.filter-grid { display: grid; grid-template-columns: 1.2fr 1.15fr .85fr .95fr 1fr 1.1fr 1.1fr 1.5fr; gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .62rem .75rem; background: var(--card); border-right: 1px solid var(--border); }
.field > span { color: var(--muted-foreground); font: 500 .57rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.field > span b { color: var(--ink-soft); font-weight: 500; opacity: .75; }
.range-input { display: flex; align-items: center; gap: .25rem; min-width: 0; }
/* Half-width cells, so the chevron sits tight against the text. */
.range-input select { min-width: 0; flex: 1 1 0; min-height: auto; padding: .1rem 1rem .1rem .12rem; background-position: right -.05rem center; background-size: .82rem; }
.range-input i { flex: none; color: var(--muted-foreground); font-style: normal; font-size: .8rem; line-height: 1; }
.field input, .field select { width: 100%; min-width: 0; color: var(--foreground); border: 0; outline: 0; font-size: .9rem; }
.field input { padding: .1rem 0; background: transparent; }
.field select {
  min-height: 2rem;
  padding: .34rem 2rem .34rem .5rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  color-scheme: light;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23405064' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .48rem center;
  background-size: .9rem;
  appearance: none;
  -webkit-appearance: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.field select:hover { color: var(--ink); border-color: var(--border); background-color: var(--muted); }
.field select:focus-visible { border-color: rgba(232,52,42,.48); background-color: var(--paper-bright); box-shadow: 0 0 0 3px rgba(232,52,42,.1); }
.field select:disabled { cursor: not-allowed; opacity: .5; }
.field select option { color: var(--foreground); background: var(--paper-bright); font-family: var(--font-sans); }
.field:focus-within { box-shadow: inset 0 -2px var(--primary); }
.search-button { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .35rem; padding: .75rem 1rem; border: 0; border-radius: .75rem; color: var(--primary-foreground); background: var(--primary); font-weight: 700; text-align: left; }
.search-button b { font-size: 1.7rem; transition: transform .25s ease; }
.search-button:hover b { transform: translate(4px, -4px); }
/* Desktop: eight filters squeezed into one horizontal strip truncated every
   label, so above 1100px the whole header becomes a fixed left sidebar and the
   filters stack vertically with room to breathe. Tablet and mobile keep the
   top-bar layout, which fits their widths fine. */
@media (min-width: 1101px) {
  .site-header {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    padding: 1rem .85rem 1.1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    background: var(--card);
    box-shadow: 4px 0 28px rgba(16,37,60,.05);
    backdrop-filter: none;
    scrollbar-gutter: auto;
  }
  /* The hide-on-scroll transform would turn the sidebar into a scrolling
     element (a transformed ancestor becomes the containing block for its fixed
     descendants) and drag it off screen. */
  .site-header.is-scrolling { transform: none; }

  .masthead { flex-direction: column; align-items: stretch; gap: .85rem; padding: 0 .25rem; }
  .brand { gap: .6rem; }
  .brand-mark { width: auto; height: 2.6rem; }
  .brand-copy { font-size: .8rem; }
  .masthead-actions { width: 100%; }
  .favorites-toggle { flex: 1; justify-content: flex-start; padding: .55rem .8rem; border-radius: .7rem; }

  .search-shell {
    flex: 1;
    width: 100%;
    min-width: 0;
    margin: 1rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #search-form { display: flex; flex-direction: column; gap: .8rem; height: 100%; }
  .type-switch { width: 100%; margin: 0; padding: .22rem; border-radius: .7rem; }
  .type-switch label { padding: .5rem .3rem; border-radius: .54rem; font-size: .52rem; line-height: 1.15; text-align: center; white-space: normal; }
  .type-switch-thumb { border-radius: .54rem; }

  /* One field per row; the shared cell divider moves from the right edge to the
     bottom so the column reads as a stack rather than a squeezed strip. */
  .filter-grid { grid-template-columns: minmax(0, 1fr); border-radius: .8rem; }
  .field { gap: .3rem; padding: .6rem .7rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .field:last-of-type { border-bottom: 0; }
  .field > span { font-size: .5rem; }
  .field input, .field select { font-size: .84rem; }
  .field select { min-height: 1.9rem; padding: .3rem 1.5rem .3rem .3rem; background-position: right .35rem center; background-size: .85rem; }
  .range-input { gap: .3rem; }
  .range-input i { font-size: .75rem; }
  .range-input select { padding: .18rem 1.05rem .18rem .2rem; background-size: .8rem; }
  .search-button { margin: 0; padding: .8rem 1rem; border-radius: .7rem; font-size: .88rem; }
  .search-button b { font-size: 1.5rem; }

}
/* Tablet: the masthead has dead space between the brand and the favourites
   pill, and the filter grid wants its full width. The toggle stays inside the
   form (so mobile and desktop are untouched) and is lifted onto the brand line. */
@media (min-width: 721px) and (max-width: 1100px) {
  /* The sticky header is already a containing block; dropping the shell's own
     positioning lets the toggle anchor to the masthead row instead of the form. */
  .search-shell { position: static; }
  #search-form { display: flex; flex-direction: column; }
  .type-switch {
    position: absolute; top: .82rem; left: 50%; z-index: 3;
    margin: 0; background: var(--muted); transform: translateX(-50%);
  }
  .type-switch label { padding: .46rem .9rem; }
}
.results-section { width: min(1400px, calc(100% - 3rem)); margin: 0 auto; padding: 3rem 0 5rem; }
.results-header { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.75rem; }
.section-index { color: var(--red); }
h2 { margin: .4rem 0 0; font: 700 clamp(2.4rem, 4vw, 4.2rem)/.95 var(--font-sans); letter-spacing: -.055em; }
.result-count { margin-bottom: 1.6rem; font: 400 .72rem/1 var(--font-mono); text-align: right; }
.result-count strong { color: var(--red); font-size: 1.15rem; }
.result-count small { display: block; margin-top: .55rem; color: var(--ink-soft); font-size: .63rem; }
.results-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.4rem; }
.car-card { min-width: 0; overflow: hidden; color: var(--card-foreground); background: var(--card); border-radius: var(--radius); animation: card-in .45s both; animation-delay: var(--delay); transition: transform .22s ease; }
.car-card:hover { transform: translateY(-2px); }
.car-card.delay-0{--delay:0ms}.car-card.delay-1{--delay:55ms}.car-card.delay-2{--delay:110ms}.car-card.delay-3{--delay:165ms}.car-card.delay-4{--delay:220ms}.car-card.delay-5{--delay:275ms}.car-card.delay-6{--delay:330ms}.car-card.delay-7{--delay:385ms}.car-card.delay-8{--delay:440ms}
.card-carousel { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--muted); isolation: isolate; }
.carousel-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.carousel-open { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; }
.carousel-open img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: opacity .22s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .35s; }
.car-card:hover .carousel-open img { transform: scale(1.025); filter: saturate(1.02); }
.carousel-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid rgba(16,37,60,.16); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(16,37,60,.18); font: 500 1.35rem/1 sans-serif; opacity: 0; transform: translateY(-50%) scale(.92); transition: opacity .18s, transform .18s; }
.carousel-previous { left: .65rem; }
.carousel-next { right: .65rem; }
.card-carousel:hover .carousel-nav, .carousel-nav:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); }
.carousel-nav:disabled { opacity: 0 !important; pointer-events: none; }
.carousel-dots { position: absolute; left: 50%; bottom: .65rem; display: flex; gap: .28rem; padding: .25rem .35rem; border-radius: 999px; background: rgba(16,37,60,.22); transform: translateX(-50%); backdrop-filter: blur(6px); }
.carousel-dots button { width: .34rem; height: .34rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); transition: width .18s, background .18s; }
.carousel-dots button[aria-current="true"] { width: .8rem; border-radius: 999px; background: white; }
.encar-verified-badge { position: absolute; top: .65rem; left: .65rem; display: inline-flex; align-items: center; gap: .38rem; padding: .35rem .5rem .35rem .38rem; border: 1px solid rgba(16,37,60,.12); border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.95); box-shadow: 0 4px 14px rgba(16,37,60,.14); font-size: .6rem; font-weight: 800; line-height: 1; pointer-events: none; backdrop-filter: blur(8px); }
.encar-verified-badge b { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; color: white; background: var(--red); font-size: .68rem; }
.managed-location { position: absolute; z-index: 5; left: .65rem; bottom: .65rem; padding: .38rem .58rem; border-radius: 999px; color: white; background: rgba(16,37,60,.82); box-shadow: 0 4px 14px rgba(16,37,60,.18); font-size: .6rem; font-weight: 800; line-height: 1; pointer-events: none; backdrop-filter: blur(8px); }
.managed-location.is-kosovo { background: #16875f; }
.managed-sold-stamp { position: absolute; z-index: 6; top: 50%; left: 50%; min-width: 8.5rem; padding: .52rem .9rem; border: .22rem double white; color: white; background: rgba(232,52,42,.9); box-shadow: 0 .6rem 1.5rem rgba(16,37,60,.24); font-size: 1.2rem; font-weight: 900; line-height: 1; letter-spacing: .05em; text-align: center; transform: translate(-50%,-50%) rotate(-11deg); pointer-events: none; }
.car-card.is-sold .carousel-open img { filter: grayscale(.65) contrast(.92); }
.card-number { position: absolute; right: .6rem; bottom: .6rem; padding: .28rem .42rem; border-radius: .4rem; color: white; background: rgba(16,37,60,.78); font: 400 .52rem/1 var(--font-mono); backdrop-filter: blur(6px); }
.card-open { display: flex; flex-direction: column; gap: .7rem; width: 100%; padding: .85rem .15rem .2rem; border: 0; color: inherit; background: transparent; text-align: left; }
.card-header { display: grid; gap: .5rem; }
/* One line, always: the row never wraps and the last spec ellipsises instead. */
.card-specs { display: flex; flex-wrap: nowrap; align-items: center; gap: .52rem; margin: 0; min-width: 0; overflow: hidden; }
.card-spec { display: inline-flex; align-items: center; gap: .26rem; min-width: 0; color: var(--ink-soft); font: 500 .69rem/1 var(--font-sans); white-space: nowrap; }
.card-spec svg { flex: none; width: .8rem; height: .8rem; color: var(--muted-foreground); }
.card-spec > span { overflow: hidden; text-overflow: ellipsis; }
.glossary-hint { flex: none; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .12rem; border: 1px solid var(--border); border-radius: 50%; color: var(--muted-foreground); background: var(--card); font: 700 .58rem/1 var(--font-mono); cursor: help; vertical-align: middle; transition: color .16s ease, border-color .16s ease; }
.glossary-hint:hover, .glossary-hint[aria-expanded="true"] { color: var(--red); border-color: var(--red); }
.glossary-hint:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.glossary-popover { position: fixed; z-index: 200; max-width: min(22rem, calc(100vw - 1.5rem)); padding: .7rem .85rem; border-radius: .6rem; color: white; background: var(--ink); box-shadow: 0 12px 32px rgba(16,37,60,.28); font-size: .76rem; line-height: 1.45; }
/* Only the registration date is a badge — it anchors the row; the rest lean on icons. */
.card-spec.is-date { flex: none; padding: .26rem .44rem; border-radius: .4rem; color: white; background: var(--ink); font: 600 .66rem/1 var(--font-mono); letter-spacing: -.02em; }
.detail-badges { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 1.35rem; margin-bottom: .6rem; }
.service-badge {
  --badge-bg: #f5f5f2; --badge-fg: var(--ink); --badge-mark: var(--ink); --badge-border: #e5e5e0;
  display: inline-flex; align-items: center; gap: .38rem; min-height: 1.8rem; padding: .38rem .62rem .38rem .42rem;
  border: 1px solid var(--badge-border); border-radius: 999px;
  color: var(--badge-fg); background: var(--badge-bg);
  font: 700 .62rem/1 var(--font-sans); letter-spacing: -.01em;
}
.service-badge::before { content: "•"; display: grid; place-items: center; width: 1rem; height: 1rem; flex: none; border-radius: 50%; color: var(--badge-mark); font-size: .72rem; font-weight: 800; }
.service-badge[data-kind="diagnosis"], .service-badge[data-kind="diagnosis-plus"], .service-badge[data-kind="diagnosis-plus-plus"] { --badge-bg: #fff1f0; --badge-fg: #9d211b; --badge-mark: white; --badge-border: #ffd2cf; }
.service-badge[data-kind="diagnosis"]::before, .service-badge[data-kind="diagnosis-plus"]::before, .service-badge[data-kind="diagnosis-plus-plus"]::before { content: "✓"; background: var(--red); }
.service-badge[data-kind="meetgo"] { --badge-bg: #eef5ff; --badge-fg: #153b68; --badge-mark: white; --badge-border: #d5e5fa; }
.service-badge[data-kind="meetgo"]::before { content: "E"; background: var(--blue); }
.service-badge[data-kind="battery"] { --badge-bg: #eef7ff; --badge-fg: #17558a; --badge-mark: #17558a; --badge-border: #d2e9fb; }
.service-badge[data-kind="battery"]::before { content: "ϟ"; }
.service-badge[data-kind="delivery"]::before { content: "⌂"; }
.service-badge[data-kind="visit"]::before { content: "◎"; }
.service-badge[data-kind="return"] { --badge-bg: #eef9f5; --badge-fg: #17694f; --badge-mark: #17694f; --badge-border: #ccebdd; }
.service-badge[data-kind="return"]::before { content: "↩"; }
.service-badge[data-kind="warranty"] { --badge-bg: #eef9f5; --badge-fg: #17694f; --badge-mark: white; --badge-border: #ccebdd; }
.service-badge[data-kind="warranty"]::before { content: "✓"; background: #198266; }
.service-badge[data-kind="compensate"] { --badge-bg: #fbf8e8; --badge-fg: #6d5f10; --badge-mark: #6d5f10; --badge-border: #ece3a9; }
.service-badge[data-kind="compensate"]::before { content: "₩"; }
.car-card h3 { display: -webkit-box; min-height: 2.4em; margin: 0; overflow: hidden; font-size: 1rem; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-footer { display: flex; justify-content: space-between; align-items: end; gap: .75rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.card-price { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.card-price strong { font-size: 1rem; line-height: 1; }
.card-price span { color: var(--muted-foreground); font: 400 .59rem/1 var(--font-mono); }
.card-cta { display: inline-flex; align-items: center; gap: .25rem; color: var(--foreground); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.card-cta b { color: var(--primary); font-size: 1rem; transition: transform .18s; }
.card-open:hover .card-cta b { transform: translateX(3px); }
.load-more-sentinel { display: grid; place-items: center; min-height: 5rem; color: var(--muted-foreground); font-size: .75rem; }
.load-more-sentinel:empty { min-height: 1px; }
.load-more-sentinel[data-loading="true"]::before { content: ""; width: 1.35rem; height: 1.35rem; border: 2px solid var(--border); border-top-color: var(--red); border-radius: 50%; animation: loader-spin .7s linear infinite; }
.status, .empty-state { grid-column: 1 / -1; padding: 2rem; border: 1px solid var(--red); color: var(--red); background: #fff4ed; font-size: 1.1rem; }
.status.notice { border-color: var(--border); color: var(--ink); background: var(--muted); font-size: .9rem; }
.empty-state { display: flex; align-items: center; gap: 2rem; border: 0; color: var(--ink); background: var(--paper-bright); }
.empty-state b { color: var(--red); font: 700 6rem/1 var(--font-sans); }

/* Favourites — stored per browser, never on a server. */
.masthead-actions { display: flex; align-items: center; gap: .55rem; }
.favorites-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); background: white; font: 600 .74rem/1 var(--font-sans); cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.favorites-toggle:hover { border-color: rgba(232,52,42,.42); color: var(--red); }
.favorites-heart { color: var(--muted-foreground); font-size: .95rem; line-height: 1; transition: color .18s ease; }
.favorites-toggle.has-favorites .favorites-heart, .favorites-toggle[aria-pressed="true"] .favorites-heart { color: var(--red); }
.favorites-toggle[aria-pressed="true"] { border-color: var(--red); color: var(--red); }
.favorites-toggle b { display: grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 999px; color: white; background: var(--ink); font: 700 .64rem/1 var(--font-mono); }
/* The header is tight at both ends of the range; the label only fits mid-way. */
.favorites-toggle-copy { display: none; }
@media (min-width: 721px) and (max-width: 1100px) { .favorites-toggle-copy { display: inline; } }
.favorites-toggle.has-favorites b { background: var(--red); }
.favorites-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.ghost-button { padding: .5rem .85rem; border: 1px solid var(--border); border-radius: .6rem; color: var(--ink); background: transparent; font: 600 .7rem/1 var(--font-sans); cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.ghost-button:hover { border-color: var(--red); color: var(--red); }
/* No chrome around the heart — the shape itself is the control, sized to fill
   the tap target. A drop shadow keeps it readable over pale photos. */
.favorite-button { position: absolute; z-index: 3; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .18s ease; }
.favorite-button svg { width: 100%; height: 100%; fill: rgba(255,255,255,.96); stroke: rgba(16,37,60,.4); stroke-width: 1; filter: drop-shadow(0 2px 5px rgba(16,37,60,.5)); transition: fill .18s ease, stroke .18s ease; }
.favorite-button-card { top: .5rem; right: .5rem; }
.favorite-button:hover { transform: scale(1.12); }
.favorite-button:focus-visible { outline: 2px solid white; outline-offset: 1px; }
.favorite-button[aria-pressed="true"] svg { fill: var(--red); stroke: rgba(255,255,255,.85); animation: heart-pop .28s ease; }
/* On the drawer's white header a white heart would vanish, so it outlines instead. */
.favorite-button-detail { position: static; flex: none; width: 2.9rem; height: 2.9rem; }
.favorite-button-detail svg { fill: none; stroke: var(--muted-foreground); stroke-width: 1.7; filter: none; }
.favorite-button-detail:hover svg { stroke: var(--red); }
.favorite-button-detail[aria-pressed="true"] svg { fill: var(--red); stroke: var(--red); }
.favorite-button-gallery { position: absolute; z-index: 4; top: .6rem; right: .6rem; display: none; width: 2.7rem; height: 2.7rem; }
.favorite-button-gallery svg { width: 100%; height: 100%; fill: rgba(255,255,255,.94); stroke: rgba(16,37,60,.4); stroke-width: 1; filter: drop-shadow(0 2px 6px rgba(16,37,60,.45)); transition: fill .18s ease, stroke .18s ease; }
.favorite-button-gallery:hover { transform: scale(1.1); }
.favorite-button-gallery[aria-pressed="true"] svg { fill: var(--red); stroke: rgba(255,255,255,.9); animation: heart-pop .28s ease; }
.detail-gallery-empty { position: relative; }
.detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.detail-title-row h2 { margin-right: 0; }
@keyframes heart-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Kosovo landed-cost estimate on the detail drawer. */
.cost-calculator { margin: 0 clamp(1.2rem,5vw,4rem); padding: 1.5rem 0 .5rem; border-bottom: 1px solid var(--border); }
.cost-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cost-head .section-index { margin: 0 0 .4rem; }
.cost-head strong { display: block; font: 800 clamp(1.6rem,3.4vw,2.4rem)/1 var(--font-sans); letter-spacing: -.04em; }
.cost-note { max-width: 34rem; margin: 0; color: var(--muted-foreground); font-size: .68rem; line-height: 1.45; }
.cost-warnings { display: grid; gap: .5rem; margin: 1.1rem 0 0; }
.cost-warnings p { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .7rem .85rem; border: 1px solid rgba(232,52,42,.28); border-radius: .7rem; background: rgba(232,52,42,.05); color: var(--ink-soft); font-size: .72rem; line-height: 1.45; }
.cost-warnings b { display: grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; color: white; background: var(--red); font: 700 .7rem/1 var(--font-mono); }
.cost-breakdown { display: grid; gap: .1rem; margin: 1.1rem 0 0; }
.cost-breakdown div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--border); }
.cost-breakdown dt { color: var(--ink-soft); font-size: .78rem; }
.cost-breakdown dd { margin: 0; font: 600 .85rem/1 var(--font-mono); }
.cost-breakdown .is-subtotal { border-bottom-style: solid; border-color: var(--ink); }
.cost-breakdown .is-subtotal dt { color: var(--ink); font-weight: 700; }
.cost-breakdown .is-subtotal dd { color: var(--red); }
/* A bare <summary> reads as a link, not a toggle — this makes the open/closed
   state and the click target obvious, with a chevron that flips when open. */
.cost-settings { margin-top: 1.1rem; border: 1px solid var(--border); border-radius: .7rem; overflow: hidden; }
.cost-settings summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .9rem; list-style: none; color: var(--ink); background: var(--muted); font: 700 .76rem/1 var(--font-sans); cursor: pointer; transition: background .18s ease, color .18s ease; }
.cost-settings summary::-webkit-details-marker { display: none; }
.cost-settings summary::after { content: ""; flex: none; width: .52rem; height: .52rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .22s ease; }
.cost-settings[open] summary { color: white; background: var(--ink); }
.cost-settings[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.cost-settings summary:hover { color: var(--red); }
.cost-settings[open] summary:hover { color: white; background: var(--red); }
.cost-settings summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.cost-settings > *:not(summary) { margin-inline: .9rem; }
.cost-settings > .cost-note { margin-bottom: .9rem; }
.cost-settings .ghost-button { margin-bottom: .75rem; }
.cost-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .9rem .9rem .9rem; }
.cost-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--card); }
.cost-field > span { color: var(--muted-foreground); font: 500 .55rem/1.25 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.cost-field > span b { color: var(--ink-soft); }
.cost-field input { width: 100%; min-width: 0; padding: .1rem 0; border: 0; outline: 0; color: var(--foreground); background: transparent; font-size: .9rem; }
.cost-field:focus-within { border-color: rgba(232,52,42,.45); }
.skeleton { pointer-events: none; }
.skeleton-image, .skeleton-line { background: linear-gradient(90deg,#ddd8cc,#f5f2e9,#ddd8cc); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton-image { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); }
.skeleton-image::after, .image-frame::after, .ui-spinner { width: 1.45rem; height: 1.45rem; border: 2px solid rgba(16,37,60,.16); border-top-color: var(--red); border-radius: 50%; animation: loader-spin .72s linear infinite; }
.skeleton-image::after { content: ""; position: absolute; inset: 0; margin: auto; }
.image-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(145deg,rgba(247,247,245,.82),rgba(232,52,42,.045)); opacity: 0; transition: opacity .2s ease; }
.image-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; margin: auto; pointer-events: none; opacity: 0; transform: scale(.8); transition: opacity .18s ease, transform .18s ease; }
.image-frame.is-loading::before, .image-frame.is-loading::after { opacity: 1; }
.image-frame.is-loading::after { transform: scale(1); }
.image-frame.is-loading img { opacity: .28; }
.image-frame.is-error::before { opacity: .35; }
.image-frame.is-error img { opacity: 0; }
.skeleton-content { display: flex; flex-direction: column; gap: .65rem; padding: .85rem .15rem 0; }
.skeleton-line { width: 100%; height: .7rem; margin: 0; border-radius: 999px; }
.skeleton-line.wide { width: 82%; height: 1rem; }
.skeleton-line.short { width: 45%; }
footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem clamp(1rem,4vw,4.5rem); color: #c9d0d7; background: var(--ink); font: 400 .64rem/1.4 var(--font-mono); text-transform: uppercase; }
footer p { max-width: 520px; margin: 0; }
.detail-drawer {
  --drawer-drag-y: 0px;
  position: fixed;
  inset: auto 0 0;
  display: none;
  flex-direction: column;
  width: min(1120px, calc(100% - 2rem));
  height: min(90dvh, 900px);
  max-width: none;
  max-height: none;
  margin: 0 auto 1rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(16,37,60,.12);
  border-radius: 1.45rem;
  color: var(--ink);
  background: var(--paper-bright);
  box-shadow: 0 26px 90px rgba(16,37,60,.3);
  font-family: var(--font-sans);
  transform: translate3d(0,var(--drawer-drag-y),0);
  transform-origin: bottom center;
}
.detail-drawer[open] { display: flex; animation: drawer-in .34s cubic-bezier(.22,.82,.28,1) both; }
.detail-drawer.is-closing { pointer-events: none; animation: drawer-out .26s cubic-bezier(.4,0,1,1) both; }
.detail-drawer[data-dragging="true"] { cursor: grabbing; animation: none; transition: none; user-select: none; }
.detail-drawer.is-snapping { transition: transform .26s cubic-bezier(.22,.82,.28,1); }
.detail-drawer::backdrop { background: rgba(16,37,60,.46); backdrop-filter: blur(4px); animation: drawer-backdrop-in .25s ease-out both; }
.detail-drawer.is-closing::backdrop { animation: drawer-backdrop-out .22s ease-in both; }
/* The chrome must outrank every positioned element inside the scroll area,
   otherwise later-painted detail content can cover the close button. */
.drawer-chrome { position: relative; z-index: 5; flex: none; display: grid; place-items: center; min-height: 2.7rem; cursor: grab; touch-action: none; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(16,37,60,.07); }
.drawer-badge-slot { position: absolute; left: 1rem; top: 50%; z-index: 6; display: flex; align-items: center; transform: translateY(-50%); pointer-events: auto; }
.drawer-swipe-handle { width: 2.8rem; height: .3rem; border-radius: 999px; background: #c9ced3; transition: width .18s ease, background .18s ease; }
.drawer-chrome:hover .drawer-swipe-handle { width: 3.25rem; background: var(--muted-foreground); }
.drawer-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.dialog-close { position: absolute; z-index: 6; top: 50%; right: .75rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid rgba(16,37,60,.16); border-radius: 50%; color: white; background: var(--ink); box-shadow: 0 3px 12px rgba(16,37,60,.22); font-size: 1.2rem; line-height: 1; transform: translateY(-50%); transition: background .18s ease, transform .18s ease; }
.dialog-close:hover { background: var(--red); transform: translateY(-50%) scale(1.06); }
.dialog-close:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(232,52,42,.16); }
.detail-head { padding: 1.5rem clamp(1.2rem,5vw,4rem) 1.75rem; background: white; color: var(--ink); }
.detail-head p { margin: 0 0 .8rem; color: var(--muted-foreground); font: 400 .66rem/1 var(--font-mono); text-transform: uppercase; }
.managed-detail-state { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .7rem; }
.managed-detail-state .managed-location { position: static; display: inline-flex; box-shadow: none; pointer-events: auto; }
.managed-detail-sold { display: inline-flex; align-items: center; padding: .38rem .58rem; border: 2px solid var(--red); border-radius: .4rem; color: var(--red); font-size: .65rem; font-weight: 900; letter-spacing: .08em; transform: rotate(-3deg); }
.detail-head h2 { max-width: 850px; margin: 0 3rem 1.1rem 0; font-size: clamp(1.8rem,4vw,3rem); line-height: 1.05; letter-spacing: -.045em; }
.detail-price { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.detail-price strong { font: 700 1.8rem/1 var(--font-sans); }
.detail-price-original { color: var(--muted-foreground); font: 400 .61rem/1.2 var(--font-mono); }
/* Sits inline on the price row, in the slot the ECB rate note used to occupy;
   the flex parent wraps it onto its own line when the row runs out of width. */
.detail-badges { margin: 0; }
.detail-gallery { display: grid; grid-template-columns: minmax(0, 4fr) minmax(130px, 1fr); gap: .75rem; height: clamp(350px, 43vw, 470px); padding: 0 clamp(1.2rem,5vw,4rem) 1.75rem; background: white; }
.detail-gallery-main { position: relative; min-width: 0; height: 100%; overflow: hidden; border-radius: var(--radius); background: var(--muted); outline: 0; touch-action: pan-y; }
.detail-gallery-image { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; transition: opacity .22s ease; }
.detail-gallery-open { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; gap: .45rem; width: 100%; padding: .75rem; border: 0; color: white; background: linear-gradient(180deg,transparent 68%,rgba(6,13,21,.28)); text-align: left; }
.detail-gallery-open span, .detail-gallery-open b { display: inline-flex; align-items: center; min-height: 1.8rem; border-radius: 999px; background: rgba(16,37,60,.72); backdrop-filter: blur(8px); }
.detail-gallery-open span { justify-content: center; width: 1.8rem; font-size: .9rem; }
.detail-gallery-open b { padding: 0 .68rem; font-size: .62rem; letter-spacing: .02em; }
.detail-gallery-open:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px rgba(255,255,255,.72); }
.detail-gallery-controls { position: absolute; right: .75rem; bottom: .75rem; z-index: 3; display: flex; align-items: center; gap: .25rem; padding: .25rem; border-radius: 999px; color: white; background: rgba(16,37,60,.72); backdrop-filter: blur(8px); }
.detail-gallery-controls button { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: 50%; color: white; background: transparent; font-size: 1.25rem; line-height: 1; }
.detail-gallery-controls button:hover:not(:disabled), .detail-gallery-controls button:focus-visible { background: rgba(255,255,255,.18); }
.detail-gallery-controls button:disabled { cursor: default; opacity: .35; }
.detail-gallery-controls span { min-width: 3rem; font: 500 .6rem/1 var(--font-mono); text-align: center; }
.detail-gallery-rail { display: flex; flex-direction: column; gap: .75rem; height: 100%; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.detail-gallery-rail::-webkit-scrollbar { display: none; }
.detail-thumbnail { position: relative; flex: 0 0 calc((100% - 2.25rem) / 4); min-height: 0; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: .8rem; background: var(--muted); opacity: .72; scroll-snap-align: start; transition: border-color .18s, opacity .18s; }
.detail-thumbnail:hover { opacity: 1; }
.detail-thumbnail[aria-current="true"] { border-color: var(--red); opacity: 1; }
.detail-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .22s ease; }
.detail-gallery-empty { height: 360px; margin: 0 clamp(1.2rem,5vw,4rem) 1.75rem; overflow: hidden; border-radius: var(--radius); }
.detail-facts { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 clamp(1.2rem,5vw,4rem); padding: 1.5rem 0; border-block: 1px solid var(--border); }
.detail-facts div { min-width: 0; padding: .75rem 1rem .75rem 0; }
.detail-facts dt { color: var(--ink-soft); font: 400 .59rem/1 var(--font-mono); text-transform: uppercase; }
.detail-facts dd { margin: .5rem 0 0; font-weight: 700; }
.detail-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem clamp(1.2rem,5vw,4rem) 2rem; }
.detail-actions a,.detail-actions button { min-height: 2.8rem; padding: .8rem 1rem; border: 0; border-radius: .7rem; color: white; background: var(--red); text-decoration: none; font-weight: 700; }
.detail-actions button { color: var(--ink); border: 1px solid var(--border); background: white; }
.detail-actions p { font: 400 .61rem/1 var(--font-mono); }
.detail-provenance { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem 1.1rem; margin: 0; color: var(--muted-foreground); }
.detail-provenance b { color: var(--ink-soft); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.photo-viewer {
  position: fixed;
  inset: 0;
  display: none;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: white;
  background: #060b11;
  font-family: var(--font-sans);
}
.photo-viewer[open] { display: block; animation: photo-viewer-in .2s ease-out both; }
.photo-viewer::backdrop { background: rgba(3,7,11,.96); }
.photo-viewer-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 42%,#17212b 0,#0b1219 42%,#05090e 100%); }
.photo-viewer-header { position: absolute; inset: 0 0 auto; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 1rem max(1rem,env(safe-area-inset-left)); background: linear-gradient(180deg,rgba(4,8,12,.82),transparent); pointer-events: none; }
.photo-viewer-header > * { pointer-events: auto; }
.photo-viewer-header div { display: grid; gap: .28rem; min-width: 0; }
.photo-viewer-header strong { max-width: min(68vw,760px); overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.photo-viewer-header span { color: rgba(255,255,255,.66); font: 500 .6rem/1 var(--font-mono); }
.photo-viewer-close { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: white; background: rgba(58,68,78,.66); font-size: 1.45rem; line-height: 1; transition: background .18s ease, transform .18s ease; }
.photo-viewer-close:hover { background: rgba(255,255,255,.2); transform: scale(1.04); }
.photo-viewer-stage { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; touch-action: none; user-select: none; outline: 0; }
.photo-viewer-stage[data-zoomed="true"] { cursor: grab; }
.photo-viewer-stage[data-zoomed="true"]:active { cursor: grabbing; }
.photo-viewer-stage.image-frame::before { background: rgba(5,9,14,.74); }
.photo-viewer-stage.image-frame::after { border-color: rgba(255,255,255,.2); border-top-color: var(--red); }
.photo-viewer-stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
/* `will-change: transform` only while a pinch/pan gesture is running. Leaving it
   on permanently keeps the image on its own compositor layer, which makes the
   blurred bottom chrome re-snapshot its backdrop on every repaint and tear on
   mobile GPUs. */
.photo-viewer-image { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; transition: opacity .2s ease; }
.photo-viewer-image.is-animating { transition: transform .24s cubic-bezier(.22,.82,.28,1), opacity .2s ease; }
.photo-viewer-stage[data-gesturing="true"] .photo-viewer-image { will-change: transform; }
.photo-viewer-nav { position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; width: 3.15rem; height: 3.15rem; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: white; background: rgba(18,26,34,.86); font-size: 2rem; line-height: 1; transform: translateY(-50%); transition: opacity .18s ease, background .18s ease, transform .18s ease; }
.photo-viewer-nav:hover:not(:disabled) { background: rgba(255,255,255,.16); transform: translateY(-50%) scale(1.04); }
.photo-viewer-nav:disabled { cursor: default; opacity: .2; }
.photo-viewer-previous { left: max(1rem,env(safe-area-inset-left)); }
.photo-viewer-next { right: max(1rem,env(safe-area-inset-right)); }
.photo-viewer-toolbar { position: absolute; inset: auto 0 0; z-index: 6; display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 1rem max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); background: linear-gradient(0deg,rgba(4,8,12,.84),transparent); pointer-events: none; }
.photo-viewer-toolbar > * { pointer-events: auto; }
.photo-viewer-zoom-controls { display: flex; align-items: center; gap: .18rem; padding: .2rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(18,26,34,.86); }
.photo-viewer-zoom-controls button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; color: white; background: transparent; font-size: 1.2rem; }
.photo-viewer-zoom-controls button:hover { background: rgba(255,255,255,.14); }
.photo-viewer-zoom-controls span { min-width: 3.2rem; font: 500 .58rem/1 var(--font-mono); text-align: center; }
.photo-viewer-toolbar p { margin: 0; color: rgba(255,255,255,.68); font: 500 .58rem/1.3 var(--font-mono); }
.detail-loading { display: grid; justify-items: center; gap: 1rem; padding: 8rem 2rem; text-align: center; font: 600 1rem/1.4 var(--font-sans); }
.detail-loading p { margin: 0; }
.detail-loading.error { color: var(--red); }
.ui-spinner { display: block; }
.no-photo { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; color: var(--ink-soft); background: var(--muted); }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(232,52,42,0); } }
@keyframes card-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes filter-open { from { opacity: 0; transform: translateY(-8px); } }
@keyframes drawer-in { from { opacity: .82; transform: translate3d(0,100%,0) scale(.985); } to { opacity: 1; transform: translate3d(0,var(--drawer-drag-y),0) scale(1); } }
@keyframes drawer-out { from { opacity: 1; transform: translate3d(0,var(--drawer-drag-y),0); } to { opacity: .86; transform: translate3d(0,105%,0); } }
@keyframes drawer-backdrop-in { from { background: rgba(16,37,60,0); backdrop-filter: blur(0); } }
@keyframes drawer-backdrop-out { to { background: rgba(16,37,60,0); backdrop-filter: blur(0); } }
@keyframes photo-viewer-in { from { opacity: 0; transform: scale(.985); } }
@media (max-width: 1200px) {
  .results-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .field-wide { grid-column: span 2; }
  .field-model { grid-column: span 2; }
  .field-price { grid-column: span 2; }
  .search-button { grid-column: span 2; }
}
@media (max-width: 900px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  html { scrollbar-gutter: auto; }
  body { overflow-x: hidden; }
  .masthead { gap: 1rem; padding: .65rem 1rem; }
  .brand-mark { width: auto; height: 2.35rem; }
  .mobile-filter-toggle { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-width: 9.2rem; padding: .55rem .65rem .55rem .8rem; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); background: white; text-align: left; }
  .mobile-filter-toggle span { display: grid; gap: .12rem; }
  .mobile-filter-toggle strong { font-size: .78rem; line-height: 1; }
  .mobile-filter-toggle small { color: var(--muted-foreground); font-size: .6rem; line-height: 1; }
  .mobile-filter-toggle b { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; color: white; background: var(--red); font-size: 1rem; line-height: 1; }
  .site-header .search-shell { display: none; width: calc(100% - 1rem); margin: 0 auto .6rem; padding: .7rem; border-radius: 1rem; box-shadow: 0 14px 34px rgba(16,37,60,.12); }
  .site-header.filters-open .search-shell { display: block; animation: filter-open .2s both; }
  .type-switch { width: 100%; margin-bottom: .7rem; }
  .type-switch label { padding: .62rem .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: .8rem; }
  .field { padding: .7rem; }
  .field select { min-height: 2.35rem; padding-block: .48rem; }
  .field-wide { grid-column: span 2; }
  .field-model { grid-column: span 2; }
  .field-range { grid-column: span 2; }
  .range-input select { min-height: 2.35rem; padding-block: .48rem; padding-right: 1.35rem; background-position: right .3rem center; }
  .search-button { grid-column: span 2; min-height: 3.1rem; }
  .card-specs { gap: .65rem; }
  .card-spec { font-size: .74rem; }
  .card-spec svg { width: .86rem; height: .86rem; }
  .card-spec.is-date { font-size: .7rem; }
  .masthead-actions { gap: .4rem; }
  .favorites-toggle { padding: .5rem .6rem; }
  .favorites-header-actions { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .favorite-button { width: 2.85rem; height: 2.85rem; }
  .cost-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-head { gap: .75rem; }
  .cost-breakdown dt { font-size: .82rem; }
  .empty-state { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.75rem 1.25rem; }
  .empty-state b { font-size: 3.4rem; }
  .results-section { width: calc(100% - 1.5rem); padding: 2.5rem 0 4rem; }
  .results-header { flex-direction: column; align-items: start; gap: 1rem; }
  .results-header > div, h2 { width: 100%; max-width: 100%; }
  h2 { font-size: clamp(2.2rem, 12vw, 3.2rem); }
  .result-count { max-width: none; margin: 0; text-align: left; }
  .results-grid { grid-template-columns: 1fr; }
  .carousel-nav { opacity: .92; transform: translateY(-50%) scale(1); }
  .card-open { padding-top: .75rem; }
  footer { flex-direction: column; }
  .detail-drawer { width: 100%; height: 94dvh; margin: 0; border-width: 1px 0 0; border-radius: 1.4rem 1.4rem 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .drawer-chrome { min-height: 3rem; }
  .drawer-swipe-handle { width: 3.1rem; height: .32rem; }
  #detail-content { display: flex; flex-direction: column; }
  .detail-gallery, .detail-gallery-empty { order: 1; padding: .6rem 1.2rem 1.2rem; }
  .detail-head { order: 2; padding: 1.15rem 1.2rem 1.4rem; }
  .detail-head h2 { margin-right: 0; }
  .detail-facts { order: 3; }
  .cost-calculator { order: 4; }
  .detail-actions { order: 5; }
  .favorite-button-gallery { display: grid; }
  .favorite-button-detail { display: none; }
  .detail-gallery { display: flex; flex-direction: column; height: auto; }
  .detail-gallery-main { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .detail-gallery-rail { flex-direction: row; width: 100%; height: 76px; overflow-x: auto; overflow-y: hidden; }
  .detail-thumbnail { flex: 0 0 104px; height: 76px; }
  .detail-gallery-empty { height: 260px; margin: .6rem 1.2rem 1.2rem; }
  .photo-viewer-header { padding-inline: 1rem; }
  .photo-viewer-nav { top: auto; bottom: calc(max(1rem,env(safe-area-inset-bottom)) + 4.1rem); width: 2.65rem; height: 2.65rem; font-size: 1.65rem; transform: none; }
  .photo-viewer-nav:hover:not(:disabled) { transform: scale(1.04); }
  .photo-viewer-previous { left: 1rem; }
  .photo-viewer-next { right: 1rem; }
  .photo-viewer-toolbar { flex-direction: column; gap: .5rem; }
  .photo-viewer-toolbar p { font-size: .52rem; }
  .detail-facts { grid-template-columns: repeat(2,1fr); margin: 0 1.2rem; padding: 1rem 0; }
  .detail-actions { align-items: flex-start; flex-direction: column; padding: 1.25rem 1.2rem 2rem; }
}
/* Kept last: media queries carry no extra specificity, so these have to come
   after the plain .results-* rules and the max-width blocks above to win.
   Column counts are re-derived because the grid now shares the viewport with
   the fixed sidebar, which the bare viewport breakpoints don't account for. */
@media (min-width: 1101px) {
  main { padding-left: var(--sidebar-w); }
  .results-section { width: min(1400px, calc(100% - 4rem)); padding-top: 2.5rem; }
  .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The sidebar has room for the label the old top bar had to drop. */
  .favorites-toggle-copy { display: inline; }
  .favorites-toggle b { margin-left: auto; }
}
@media (min-width: 1600px) {
  .results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* White-label salon storefront -------------------------------------------------
   The owned inventory reads like a dealer's editorial lookbook. Encar remains
   the utilitarian sourcing catalogue below it, so the two origins never blur. */
.brand-mark.has-dealer-logo { width: 3rem; height: 3rem; overflow: hidden; border-radius: .55rem; transform: none; }
.brand-mark.has-dealer-logo img { width: 100%; height: 100%; object-fit: contain; }
.dealer-storefront { color: var(--ink); background: #efeee9; border-bottom: 1px solid var(--border); }
.dealer-hero { position: relative; min-height: min(650px, 72vh); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .65fr); align-items: end; gap: 4rem; overflow: hidden; padding: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 7vw, 7rem) clamp(3rem, 6vw, 5rem); color: white; background: var(--ink); isolation: isolate; }
.dealer-hero::before { content: ""; position: absolute; z-index: -1; right: -8%; bottom: -45%; width: min(70vw, 900px); aspect-ratio: 1; border: clamp(55px,8vw,130px) solid color-mix(in srgb,var(--red) 86%,white); border-radius: 50%; opacity: .94; }
.dealer-hero::after { content: ""; position: absolute; z-index: -1; top: 12%; right: 18%; width: 18rem; height: 1px; background: rgba(255,255,255,.24); transform: rotate(-28deg); box-shadow: 0 2rem 0 rgba(255,255,255,.12), 0 4rem 0 rgba(255,255,255,.07); }
.dealer-hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg,black,transparent 84%); }
.dealer-identity { align-self: center; max-width: 880px; animation: dealer-rise .7s cubic-bezier(.2,.75,.2,1) both; }
.dealer-identity .section-index { color: color-mix(in srgb,var(--red) 82%,white); }
.dealer-hero-logo { display: grid; place-items: center; width: clamp(5rem,8vw,7.5rem); aspect-ratio: 1; margin-bottom: 2rem; overflow: hidden; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); box-shadow: 0 1.4rem 4rem rgba(0,0,0,.18); }
.dealer-hero-logo img { width: 100%; height: 100%; padding: .55rem; object-fit: contain; }
.dealer-hero-logo span { font: 800 clamp(1.8rem,4vw,3.4rem)/1 var(--font-sans); letter-spacing: -.08em; }
.dealer-identity h1 { max-width: 13ch; margin: .7rem 0 1.2rem; font: 800 clamp(4.2rem,9vw,9.5rem)/.78 var(--font-sans); letter-spacing: -.085em; text-transform: uppercase; text-wrap: balance; }
.dealer-tagline { max-width: 42rem; margin: 0; color: rgba(255,255,255,.72); font-size: clamp(1rem,1.8vw,1.35rem); line-height: 1.45; }
.dealer-contact-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.dealer-contact { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 8.5rem; padding: .8rem .9rem; border: 1px solid currentColor; color: inherit; text-decoration: none; font: 700 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; transition: color .2s,background .2s,transform .2s; }
.dealer-contact:hover { color: var(--ink); background: white; transform: translateY(-2px); }
.dealer-hero-facts { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-self: end; color: var(--ink); background: white; box-shadow: 0 2rem 5rem rgba(0,0,0,.2); animation: dealer-rise .7s .12s cubic-bezier(.2,.75,.2,1) both; }
.dealer-hero-facts > div { display: grid; gap: .3rem; padding: 1.3rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dealer-hero-facts strong { color: var(--red); font-size: 2.4rem; line-height: 1; letter-spacing: -.06em; }
.dealer-hero-facts span { color: var(--ink-soft); font: 500 .6rem/1 var(--font-mono); text-transform: uppercase; }
.dealer-hero-facts p { grid-column: 1 / -1; display: grid; gap: .45rem; margin: 0; padding: 1.3rem; border-bottom: 1px solid var(--border); font-size: .85rem; line-height: 1.45; }
.dealer-hero-facts p b { color: var(--muted-foreground); font: 500 .56rem/1 var(--font-mono); letter-spacing: .08em; }
.dealer-hero-facts > a { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 1rem 1.3rem; color: white; background: var(--red); text-decoration: none; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.dealer-inventory-section { padding-block: clamp(4rem,7vw,7rem); }
.dealer-results-header .section-index { color: var(--red); }
.dealer-results-grid { align-items: start; }
.dealer-car-card { min-width: 0; background: transparent; animation: dealer-rise .55s var(--dealer-delay) both; }
.dealer-card-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; background: #d7d6d0; text-align: left; }
.dealer-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(16,37,60,.03),transparent 55%,rgba(16,37,60,.34)); pointer-events: none; }
.dealer-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .65s cubic-bezier(.2,.75,.2,1),filter .3s; }
.dealer-car-card:hover .dealer-card-photo img { transform: scale(1.035); filter: saturate(1.04); }
.dealer-car-card.is-sold .dealer-card-photo img { filter: grayscale(.7) contrast(.9); }
.dealer-no-photo { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(16,37,60,.46); background: repeating-linear-gradient(-45deg,#e7e6e1,#e7e6e1 14px,#dcdad4 14px,#dcdad4 28px); font: 700 .65rem/1 var(--font-mono); letter-spacing: .12em; }
.dealer-location { position: absolute; z-index: 2; top: .75rem; left: .75rem; display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .6rem; color: var(--ink); background: white; box-shadow: 0 .35rem 1rem rgba(16,37,60,.15); font: 700 .55rem/1 var(--font-mono); letter-spacing: .06em; }
.dealer-location i { width: .48rem; height: .48rem; border-radius: 50%; background: #8792a0; box-shadow: 0 0 0 3px rgba(135,146,160,.16); }
.dealer-location.is-kosovo i { background: #19a66a; box-shadow: 0 0 0 3px rgba(25,166,106,.16); }
.dealer-card-index { position: absolute; z-index: 2; right: .75rem; bottom: .7rem; color: white; font: 500 .58rem/1 var(--font-mono); }
.sold-stamp { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; justify-items: center; min-width: 8.5rem; padding: .55rem 1rem .45rem; border: .24rem double #fff; color: #fff; background: color-mix(in srgb,var(--red) 90%,transparent); box-shadow: 0 .5rem 1.5rem rgba(16,37,60,.25); transform: translate(-50%,-50%) rotate(-12deg); text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.sold-stamp b { font-size: 1.55rem; line-height: .95; letter-spacing: .05em; }
.sold-stamp span { margin-top: .25rem; font: 600 .5rem/1 var(--font-mono); letter-spacing: .32em; }
.dealer-card-body { padding-top: 1rem; }
.dealer-card-body > p { margin: 0 0 .45rem; color: var(--red); font: 600 .58rem/1 var(--font-mono); letter-spacing: .06em; }
.dealer-card-body h3 { min-height: 2.5em; margin: 0; font-size: 1.18rem; line-height: 1.22; letter-spacing: -.03em; }
.dealer-card-specs { display: flex; flex-wrap: wrap; gap: .4rem .9rem; min-height: 2rem; padding: .75rem 0; color: var(--ink-soft); border-bottom: 1px solid #d1d0ca; font-size: .7rem; }
.dealer-card-specs span:not(:last-child)::after { content: "/"; margin-left: .9rem; color: #aaa9a3; }
.dealer-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .8rem; }
.dealer-card-bottom > strong { font-size: 1.1rem; letter-spacing: -.04em; }
.dealer-card-bottom > div { display: flex; gap: .35rem; }
.dealer-card-bottom button { min-height: 2.3rem; padding: 0 .7rem; border: 1px solid #c9c8c2; color: var(--ink); background: transparent; font: 700 .58rem/1 var(--font-mono); text-transform: uppercase; }
.dealer-card-bottom button:hover { color: white; border-color: var(--ink); background: var(--ink); }
.dealer-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 2rem; padding: 3rem; border: 1px dashed #c4c2ba; }
.dealer-empty b { color: var(--red); font-size: 4rem; line-height: 1; }
.dealer-empty p { max-width: 32rem; margin: 0; color: var(--ink-soft); }
html.dealer-dialog-open { overflow: hidden; }
.dealer-detail-dialog { width: min(1220px,calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; overflow: auto; border: 0; color: var(--ink); background: #f5f4ef; box-shadow: 0 3rem 8rem rgba(8,20,32,.4); }
.dealer-detail-dialog::backdrop { background: rgba(8,20,32,.72); backdrop-filter: blur(8px); }
.dealer-dialog-close { position: sticky; z-index: 8; top: 1rem; float: right; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin: 1rem 1rem -3.8rem 0; padding: 0; border: 0; border-radius: 50%; color: white; background: var(--ink); font-size: 1.5rem; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.2); }
.dealer-detail-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(330px,.75fr); min-height: 640px; }
.dealer-detail-gallery { min-width: 0; padding: 1rem; background: #dddcd6; }
.dealer-detail-main { position: relative; min-height: 540px; height: calc(100% - 6.5rem); overflow: hidden; background: #cfcec8; }
.dealer-detail-main > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sold-stamp-large { min-width: 12rem; padding: .8rem 1.4rem .65rem; }
.sold-stamp-large b { font-size: 2.2rem; }
.dealer-detail-thumbs { display: flex; gap: .55rem; height: 5.5rem; margin-top: .7rem; overflow-x: auto; }
.dealer-detail-thumbs button { flex: 0 0 7rem; padding: 0; overflow: hidden; border: 2px solid transparent; background: #ccc; opacity: .62; }
.dealer-detail-thumbs button[aria-current="true"] { border-color: var(--red); opacity: 1; }
.dealer-detail-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.dealer-detail-copy { align-self: center; padding: clamp(2rem,5vw,5rem); }
.dealer-detail-copy .section-index { color: var(--red); line-height: 1.4; }
.dealer-detail-copy h2 { margin: 1rem 0 2rem; font-size: clamp(2.5rem,5vw,5rem); text-transform: uppercase; }
.dealer-detail-price { display: block; padding-bottom: 1.4rem; border-bottom: 1px solid var(--border); font-size: 2rem; letter-spacing: -.06em; }
.dealer-detail-copy dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.dealer-detail-copy dl div { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.dealer-detail-copy dt { color: var(--muted-foreground); font: 500 .55rem/1 var(--font-mono); text-transform: uppercase; }
.dealer-detail-copy dd { margin: .45rem 0 0; font-weight: 700; }
.dealer-detail-description { margin: 1.5rem 0; color: var(--ink-soft); line-height: 1.65; white-space: pre-line; }
.dealer-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.5rem; }
.dealer-detail-actions > * { min-width: 0; padding: .8rem; border: 1px solid var(--ink); color: var(--ink); background: transparent; text-align: center; text-decoration: none; font: 700 .6rem/1 var(--font-mono); text-transform: uppercase; }
.dealer-detail-actions > *:first-child { color: white; border-color: var(--red); background: var(--red); }
.dealer-share-toast { position: fixed; z-index: 300; right: 1.2rem; bottom: 1.2rem; max-width: calc(100% - 2.4rem); padding: .9rem 1.1rem; color: white; background: var(--ink); box-shadow: 0 1rem 2.5rem rgba(16,37,60,.25); font: 600 .72rem/1.3 var(--font-mono); animation: dealer-rise .3s both; }
@keyframes dealer-rise { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 900px) {
  .dealer-hero { grid-template-columns: 1fr; min-height: auto; gap: 3rem; }
  .dealer-hero-facts { width: min(100%,30rem); }
  .dealer-detail-layout { grid-template-columns: 1fr; }
  .dealer-detail-main { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .brand-mark.has-dealer-logo { width: 2.55rem; height: 2.55rem; }
  .brand-copy { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dealer-hero { padding: 3.5rem 1.25rem 2rem; }
  .dealer-hero::before { right: -55%; bottom: -20%; width: 125vw; border-width: 4rem; opacity: .68; }
  .dealer-identity h1 { font-size: clamp(3.6rem,20vw,6.2rem); }
  .dealer-tagline { font-size: 1rem; }
  .dealer-contact { flex: 1; min-width: calc(50% - .7rem); }
  .dealer-hero-facts { width: 100%; }
  .dealer-inventory-section { padding-top: 3.5rem; }
  .dealer-card-body h3 { min-height: 0; }
  .dealer-detail-dialog { width: 100%; max-height: 96dvh; margin: auto 0 0; }
  .dealer-detail-gallery { padding: .65rem; }
  .dealer-detail-copy { padding: 2rem 1.2rem 3rem; }
  .dealer-detail-copy h2 { font-size: clamp(2.4rem,13vw,3.6rem); }
  .dealer-detail-actions { grid-template-columns: 1fr; }
}