/* Public offer list. Brand tokens only, so the light and dark themes stay consistent. */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.offers-page { padding-bottom:48px; }
.offers-head { margin:32px 0 20px; }
.offers-head h1 { margin:0; font-size:clamp(28px,4vw,40px); line-height:1.1; letter-spacing:-.02em; font-weight:750; color:var(--brand-ink); }
.offers-head p { margin:8px 0 0; color:var(--brand-muted); }

.offers-views { display:inline-flex; gap:2px; margin:0 0 16px; padding:4px; border:1px solid var(--brand-line); border-radius:var(--radius-pill); background:var(--brand-surface); }
.offers-views a { padding:7px 16px; border-radius:var(--radius-pill); color:var(--brand-muted); font-size:14px; font-weight:650; text-decoration:none; }
.offers-views a:hover { color:var(--brand-ink); }
.offers-views a[aria-current] { background:var(--brand-action); color:var(--brand-on-action); }
.offers-views a:focus-visible { outline:2px solid var(--brand-focus); outline-offset:2px; }
.offers-area { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:14px 0 0; padding:10px 14px; border-radius:var(--radius-control); background:var(--brand-tint); color:var(--brand-ink); font-size:14px; }
.offers-area a { color:var(--brand-green); font-weight:650; }
.offers-search { margin-bottom:22px; }
.offers-filters {
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.4fr) minmax(0,.8fr) auto;
  gap:12px; align-items:end; padding:16px;
  border:1px solid var(--brand-line); border-radius:var(--radius-card); background:var(--brand-surface); box-shadow:var(--brand-shadow);
}
.offers-field { display:grid; gap:6px; min-width:0; margin:0; padding:0; border:0; }
.offers-field > span, .offers-field legend { padding:0; font-size:12px; font-weight:650; color:var(--brand-muted); }
/* Colours come from the shared input style in brand.css; this only sets size and shape. */
.offers-field input, .offers-field select, .offers-sort select {
  width:100%; height:44px; padding:0 12px;
  border:1px solid var(--brand-input); border-radius:var(--radius-control); font:inherit;
}
.offers-field input::placeholder { color:var(--brand-muted); opacity:.75; }
.offers-field input:hover, .offers-field select:hover, .offers-sort select:hover { border-color:var(--brand-input); }
.offers-field input:focus-visible, .offers-field select:focus-visible, .offers-sort select:focus-visible { outline:2px solid var(--brand-focus); outline-offset:1px; }
/* A floated legend becomes an ordinary grid item, so it lines up with the other field labels. */
.offers-range legend { float:left; }
.offers-range > div { display:flex; align-items:center; gap:6px; }
.offers-range > div > span { color:var(--brand-muted); }
.offers-submit .btn { height:44px; padding:0 22px; white-space:nowrap; }
.offers-errors { margin:10px 0 0; padding:10px 14px; list-style:none; border-radius:var(--radius-control); background:var(--brand-danger-bg); color:var(--brand-danger); font-size:14px; }

.offers-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; }
.offers-count { display:flex; align-items:baseline; gap:14px; margin:0; color:var(--brand-muted); font-size:14px; }
.offers-count strong { color:var(--brand-ink); font-size:16px; }
.offers-reset { color:var(--brand-green); font-weight:650; text-decoration:none; }
.offers-reset:hover { text-decoration:underline; }
.offers-sort { display:flex; align-items:center; gap:10px; color:var(--brand-muted); font-size:13px; }
.offers-sort select { width:auto; height:38px; padding-right:32px; }

.offers-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:0; padding:0; list-style:none; }
/* The item lifts as a whole, so the compare toggle laid over the photo moves with the tile. */
.offer-item { position:relative; transition:transform .18s ease; }
.offer-item:hover { transform:translateY(-2px); }
.offer-tile {
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  border:1px solid var(--brand-line); border-radius:var(--radius-card); background:var(--brand-surface);
  color:var(--brand-ink); text-decoration:none;
  transition:box-shadow .18s ease, border-color .18s ease;
}
.offer-item:hover .offer-tile { border-color:var(--brand-input); box-shadow:var(--brand-shadow-raised); color:var(--brand-ink); }
.offer-tile:focus-visible { outline:2px solid var(--brand-focus); outline-offset:3px; }
.offer-tile-photo { position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--brand-tint); }
/* Absolutely positioned so every photo, square or panoramic, keeps the same 4:3 frame. */
.offer-tile-photo img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
/* A photo whose file cannot be loaded shows the empty frame, not the browser's broken-image icon and alt text.
   Browsers draw ::before only on an image that failed to load; screen readers still read the alt text. */
:is(.offer-tile-photo, .compare-photo, .lot-main-photo, .lot-thumb) img { color:transparent; }
:is(.offer-tile-photo, .compare-photo, .lot-main-photo, .lot-thumb) img::before { content:""; position:absolute; inset:0; background:var(--brand-tint); }
.offer-tile-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:100%; color:var(--brand-green); font-size:13px; font-weight:650; }
.offer-tile-empty svg { width:44px; height:44px; opacity:.55; }
.offer-tile-when, .offer-tile-count {
  position:absolute; top:12px; display:inline-flex; align-items:center; gap:5px; padding:5px 10px;
  border-radius:var(--radius-pill); background:var(--brand-surface); color:var(--brand-ink);
  font-size:12px; font-weight:700; box-shadow:var(--brand-shadow);
}
.offer-tile-when { left:12px; }
.offer-tile-count { top:auto; right:12px; bottom:12px; }
.offer-tile-count svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; }
.offer-tile-body { display:flex; flex:1; flex-direction:column; gap:4px; padding:16px 18px 18px; }
.offer-tile-price { display:flex; align-items:baseline; gap:6px; margin:0; }
.offer-tile-price strong { font-size:22px; font-weight:800; letter-spacing:-.01em; }
.offer-tile-price span, .offer-tile-split { color:var(--brand-muted); font-size:13px; }
.offer-tile-split { margin:0; }
.offer-tile-title { margin:8px 0 0; font-size:16px; font-weight:650; line-height:1.35; color:var(--brand-ink); }
.offer-tile-place { display:flex; align-items:center; gap:5px; margin:0; color:var(--brand-muted); font-size:14px; }
.offer-tile-place svg { flex:none; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.offer-tile-facts { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; padding:0; list-style:none; }
.offer-tile-facts li { padding:4px 10px; border-radius:var(--radius-pill); background:var(--brand-tint); color:var(--brand-ink); font-size:13px; font-weight:600; }
.offer-tile-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; margin:auto 0 0; padding-top:14px; font-size:13px; }
.offer-tile-facts + .offer-tile-meta { margin-top:14px; border-top:1px solid var(--brand-line); }
.offer-tile-meta > div { display:flex; gap:5px; }
.offer-tile-meta dt { color:var(--brand-muted); }
.offer-tile-meta dd { margin:0; font-weight:700; color:var(--brand-ink); }
.offer-tile-fresh dd { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--brand-green); }
.offer-tile-fresh dd::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

/* Compare toggle: a pill over the photo on tiles, a full-width row on the offer page. */
.offer-compare {
  position:absolute; top:12px; right:12px; z-index:1;
  display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 12px 0 10px;
  border-radius:var(--radius-pill); background:var(--brand-surface); color:var(--brand-ink);
  font-size:12px; font-weight:700; box-shadow:var(--brand-shadow); cursor:pointer; user-select:none;
}
.offer-compare[hidden] { display:none; }
.offer-compare input { width:16px; height:16px; margin:0; accent-color:var(--brand-green); cursor:inherit; }
.offer-compare:has(input:checked) { background:var(--brand-green); color:var(--brand-on-green); }
.offer-compare:has(input:focus-visible) { outline:2px solid var(--brand-focus); outline-offset:2px; }
.offer-compare:has(input:disabled) { cursor:not-allowed; opacity:.6; }
.offer-compare--inline {
  position:static; display:flex; justify-content:center; width:100%; min-height:44px; margin-top:12px;
  border:1px solid var(--brand-line); border-radius:var(--radius-control); box-shadow:none; font-size:14px; font-weight:650;
}
/* Checked stays quieter than the contact button, which remains the main action. */
.offer-compare--inline:has(input:checked) { border-color:var(--brand-green); background:var(--brand-tint); color:var(--brand-green); }
.offer-compare-on, .offer-compare:has(input:checked) .offer-compare-off { display:none; }
.offer-compare:has(input:checked) .offer-compare-on { display:inline; }

/* Stays at the bottom of the screen while scrolling, then settles under the content. */
.compare-bar {
  position:sticky; bottom:16px; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:560px; margin:24px auto 16px; padding:10px 10px 10px 18px;
  border:1px solid var(--brand-line); border-radius:var(--radius-card); background:var(--brand-surface); box-shadow:var(--brand-shadow-raised);
}
.compare-bar[hidden] { display:none; }
.compare-bar p { margin:0; color:var(--brand-muted); font-size:14px; }
.compare-bar strong { color:var(--brand-ink); }
.compare-bar-actions { display:flex; gap:8px; }
.compare-bar .btn { display:inline-flex; align-items:center; height:40px; min-height:40px; padding:0 16px; border:1px solid var(--brand-line); text-decoration:none; }
.compare-bar [aria-disabled="true"] { opacity:.5; pointer-events:none; }

/* Compare page. Prefixed with .brand-ui to win over the app-wide table colours and padding in brand.css. */
.compare-head p { max-width:640px; }
.compare-wrap { margin-bottom:48px; overflow-x:auto; border:1px solid var(--brand-line); border-radius:var(--radius-card); background:var(--brand-surface); }
.compare-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; }
.brand-ui .compare-table :is(th,td) { padding:12px 16px; border-bottom:1px solid var(--brand-line); background:var(--brand-surface) !important; text-align:left; vertical-align:baseline; line-height:1.45; }
.brand-ui .compare-table thead th { vertical-align:top; font-size:14px; }
.brand-ui .compare-table tbody tr:last-child > * { border-bottom:0; }
.brand-ui .compare-table tbody tr:hover > :is(th,td) { background:var(--brand-surface) !important; }
.brand-ui .compare-table tbody tr.compare-row-key > :is(th,td) { background:var(--brand-tint) !important; }
.compare-table thead th:first-child { width:210px; }
.compare-table tbody th { font-weight:500; color:var(--brand-muted); }
.compare-table tbody th small { display:block; font-size:12px; font-weight:500; color:var(--brand-muted); }
.brand-ui .compare-table .compare-offer { padding-block:16px; }
/* Capped so two wide columns do not push the figures below the fold. */
.compare-photo { position:relative; display:block; max-width:320px; aspect-ratio:3 / 2; overflow:hidden; border-radius:var(--radius-control); background:var(--brand-tint); }
.compare-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare-photo .offer-tile-empty svg { width:36px; height:36px; }
.compare-name { display:block; margin-top:10px; color:var(--brand-ink); font-size:15px; font-weight:700; line-height:1.3; text-decoration:none; }
.compare-name:hover { color:var(--brand-ink); text-decoration:underline; }
.compare-city { display:block; margin-top:2px; color:var(--brand-muted); font-size:13px; font-weight:500; }
.compare-remove { display:inline-block; margin-top:8px; color:var(--brand-muted); font-size:13px; font-weight:500; }
.compare-remove:hover { color:var(--brand-danger); }
.compare-row-key th { color:var(--brand-ink) !important; font-weight:650 !important; }
.compare-row-key td strong { display:block; font-size:17px; font-weight:800; }
.compare-best { display:inline-block; margin-top:4px; padding:2px 9px; border-radius:var(--radius-pill); background:var(--brand-green); color:var(--brand-on-green); font-size:11px; font-weight:700; line-height:1.6; white-space:nowrap; }
.compare-yes { color:var(--brand-green); font-weight:650; }
.compare-none { color:var(--brand-muted); }

.offers-empty { padding:48px 24px; border:1px dashed var(--brand-line); border-radius:var(--radius-card); background:var(--brand-surface); text-align:center; }
.offers-empty h2 { margin:0 0 8px; font-size:20px; color:var(--brand-ink); }
.offers-empty p { margin:0 0 18px; color:var(--brand-muted); }
.offers-empty .btn { text-decoration:none; }
.offers-empty-owner a { color:var(--brand-green); font-weight:650; }
.offers-pager { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:32px; color:var(--brand-muted); font-size:14px; }
.offers-pager .btn { text-decoration:none; }
.offers-capped { max-width:560px; margin:16px auto 0; color:var(--brand-muted); font-size:14px; text-align:center; }

/* Offer page */
.lot-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:28px 0 14px; color:var(--brand-muted); font-size:14px; }
.lot-crumbs a { color:var(--brand-muted); text-decoration:none; }
.lot-crumbs a:hover { color:var(--brand-ink); text-decoration:underline; }
.lot-crumbs [aria-current] { color:var(--brand-ink); }
.lot-head { margin-bottom:22px; }
.lot-head h1 { margin:0; font-size:clamp(26px,3.6vw,38px); line-height:1.15; letter-spacing:-.02em; font-weight:750; color:var(--brand-ink); }
.lot-place { display:flex; align-items:center; gap:6px; margin:8px 0 0; color:var(--brand-muted); }
.lot-place svg { flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.lot-facts { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; padding:0; list-style:none; }
.lot-facts li { display:grid; min-width:96px; padding:10px 14px; border:1px solid var(--brand-line); border-radius:var(--radius-control); background:var(--brand-surface); }
.lot-facts strong { font-size:17px; color:var(--brand-ink); }
.lot-facts span { font-size:12px; color:var(--brand-muted); }

.lot-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; padding-bottom:48px; }
.lot-gallery { overflow:hidden; border:1px solid var(--brand-line); border-radius:var(--radius-card); background:var(--brand-surface); }
.lot-main-photo { position:relative; aspect-ratio:3 / 2; background:var(--brand-tint); }
.lot-main-photo img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.lot-photo-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%; color:var(--brand-green); font-size:14px; font-weight:650; }
.lot-photo-empty svg { width:56px; height:56px; opacity:.55; }
.lot-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin:0; padding:8px; list-style:none; }
.lot-thumb { display:block; width:100%; aspect-ratio:3 / 2; padding:0; overflow:hidden; border:2px solid transparent; border-radius:var(--radius-control); background:var(--brand-tint); cursor:pointer; }
.lot-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.lot-thumb[aria-current="true"] { border-color:var(--brand-green); }
.lot-thumb:focus-visible { outline:2px solid var(--brand-focus); outline-offset:2px; }

.lot-section { margin-top:18px; padding:24px; border:1px solid var(--brand-line); border-radius:var(--radius-card); background:var(--brand-surface); }
.lot-section-title { margin:0 0 14px; font-size:18px; font-weight:700; color:var(--brand-ink); }
.lot-description { color:var(--brand-muted); font-size:15px; line-height:1.7; }
.lot-description p { margin:0 0 10px; }
.lot-info { margin:0; }
.lot-info > div { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--brand-line); font-size:14px; }
.lot-info > div:last-child { border-bottom:0; }
.lot-info dt { color:var(--brand-muted); }
.lot-info dd { margin:0; font-weight:650; text-align:right; color:var(--brand-ink); }
.lot-group-title { margin:16px 0 8px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brand-muted); }
.lot-section-title + .lot-group-title { margin-top:0; }
.lot-tags { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.lot-tag { padding:5px 11px; border-radius:var(--radius-pill); background:var(--brand-tint); color:var(--brand-green); font-size:13px; font-weight:650; }
.lot-tag--warn { background:var(--brand-warning-bg); color:var(--brand-warning); }
.lot-tag--no { background:var(--brand-danger-bg); color:var(--brand-danger); }

.lot-aside { position:sticky; top:24px; padding:24px; border:1px solid var(--brand-line); border-radius:var(--radius-card); background:var(--brand-surface); box-shadow:var(--brand-shadow); }
.lot-price { display:flex; align-items:baseline; gap:8px; margin:0; }
.lot-price strong { font-size:34px; font-weight:800; letter-spacing:-.01em; color:var(--brand-ink); }
.lot-price span { color:var(--brand-muted); }
.lot-badges { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.lot-when, .lot-fresh { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-pill); font-size:13px; }
.lot-when { background:var(--brand-tint); color:var(--brand-green); font-weight:700; }
.lot-fresh { border:1px solid var(--brand-line); color:var(--brand-ink); font-weight:600; }
.lot-fresh::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand-green); }
.lot-costs { margin:18px 0; }
.lot-costs > div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:14px; }
.lot-costs dt { color:var(--brand-muted); }
.lot-costs dd { margin:0; font-weight:600; color:var(--brand-ink); white-space:nowrap; }
.lot-costs-total { margin-top:4px; border-top:1px solid var(--brand-line); padding-top:12px !important; }
.lot-costs-total dt, .lot-costs-total dd { color:var(--brand-ink); font-weight:750; font-size:15px; }
.lot-costs-once dt, .lot-costs-once dd { font-size:13px; }
.lot-costs-start { margin-top:4px; border-top:1px dashed var(--brand-line); padding-top:12px !important; }
.lot-costs-start dt { color:var(--brand-ink); font-weight:650; }
.lot-costs-start dt small { display:block; color:var(--brand-muted); font-size:12px; font-weight:500; }
.lot-costs-start dd { font-weight:750; }
.lot-cta { display:flex; justify-content:center; align-items:center; width:100%; height:48px; text-decoration:none; }
.lot-cta-note { margin:12px 0 0; text-align:center; color:var(--brand-muted); font-size:13px; }
.lot-cta-note a { color:var(--brand-green); font-weight:650; }

@media (max-width:1080px) {
  .offers-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .offers-field-city, .offers-submit { grid-column:1 / -1; }
  .offers-submit .btn { width:100%; }
  .offers-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lot-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
  /* On narrow screens: photos first, then price and contact, then the details. */
  .lot-main { display:contents; }
  .lot-gallery { order:0; }
  .lot-aside { position:static; order:1; }
  .lot-section { order:2; margin-top:0; }
}
@media (max-width:640px) {
  .lot-section, .lot-aside { padding:18px; }
  .lot-price strong { font-size:28px; }
  .lot-facts li { flex:1 1 calc(50% - 10px); }
  .offers-head { margin-top:20px; }
  .offers-filters { grid-template-columns:minmax(0,1fr); padding:14px; }
  .offers-bar { flex-direction:column; align-items:stretch; gap:10px; }
  .offers-sort { justify-content:space-between; }
  .offers-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .compare-bar { margin-inline:0; padding-left:14px; }
  .compare-bar p { font-size:13px; }
  .compare-bar .btn { padding:0 12px; }
  /* Phones: each feature becomes a heading row with the offers side by side underneath. */
  .compare-wrap { overflow:hidden; }
  .compare-table, .compare-table thead, .compare-table tbody { display:block; }
  .compare-table tr { display:grid; grid-template-columns:repeat(var(--compare-cols,3),minmax(0,1fr)); border-bottom:1px solid var(--brand-line); }
  .compare-table tbody tr:last-child { border-bottom:0; }
  .compare-cols-2 { --compare-cols:2; }
  .brand-ui .compare-table :is(th,td) { padding:8px 10px; border-bottom:0; overflow-wrap:anywhere; }
  .compare-table thead th:first-child { display:none; }
  .brand-ui .compare-table tbody th { grid-column:1 / -1; padding-bottom:0; font-size:12px; }
  .brand-ui .compare-table .compare-offer { padding:12px 10px; }
  .compare-remove-more { display:none; }
  .compare-name { font-size:14px; }
  .compare-row-key td strong { font-size:15px; }
}