/* ================= Landing ================= */
.landing {
  min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,0.55), transparent 60%),
    var(--sand);
}
.landing-head { text-align: center; padding: clamp(48px, 9vh, 96px) 24px 0; }
.landing-tag { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--muted); letter-spacing: 0.01em; }
.landing-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; max-width: 1080px; width: 100%; margin: 0 auto; padding: clamp(24px, 6vh, 64px) 24px; }
.landing-rule { width: 1px; background: linear-gradient(to bottom, transparent, var(--ink) 18%, var(--ink) 82%, transparent); margin: 20px 0; }
.landing-side {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 48px 24px; border-radius: 28px; text-align: center; transition: background 0.45s var(--ease);
}
.landing-side:hover { background: rgba(255, 255, 255, 0.42); }
.landing-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); opacity: 0; transform: translateY(6px); transition: all 0.4s var(--ease); }
.landing-side h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 300; color: var(--ink-2); }
.landing-art { width: 92px; height: 92px; color: var(--ink); transition: transform 0.6s var(--ease); }
.landing-art svg { width: 100%; height: 100%; }
.landing-desc { color: var(--muted); font-size: 13px; }
.landing-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); opacity: 0; transform: translateY(8px); transition: all 0.4s var(--ease); }
.landing-cta svg { width: 16px; height: 16px; }
.landing-side:hover .landing-kicker, .landing-side:hover .landing-cta { opacity: 1; transform: none; }
.landing-side:hover .landing-art { transform: translateY(-6px) scale(1.04); }
.landing-foot { display: flex; justify-content: space-between; gap: 16px; padding: 20px 32px; font-size: 11px; color: var(--faint); letter-spacing: 0.04em; }
.landing > * { opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.landing.in > * { opacity: 1; transform: none; }
.landing.in > :nth-child(2) { transition-delay: 0.12s; }
.landing.in > :nth-child(3) { transition-delay: 0.24s; }
@media (hover: none) { .landing-cta, .landing-kicker { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .landing-split { grid-template-columns: 1fr; }
  .landing-rule { width: 60%; height: 1px; margin: 0 auto; background: linear-gradient(to right, transparent, var(--ink), transparent); }
  .landing-foot { flex-direction: column; align-items: center; text-align: center; }
}

/* ================= Site chrome ================= */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-head { display: flex; align-items: center; gap: 28px; padding: 18px 28px; }
.site-brand { display: block; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); flex: 1; min-width: 0; padding-left: 28px; border-left: 1px solid var(--line); height: 32px; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--sand-3); }
.crumbs .cur { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-actions { display: flex; align-items: center; gap: 6px; }

.panel { min-height: 0; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 0; }
.panel-sec { padding: 22px 22px; display: grid; gap: 18px; }
.panel-sec + .panel-sec { border-top: 1px solid var(--line); }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-title h2 { font-size: 24px; }
.panel-title h2 small { font-family: var(--sans); font-size: 13px; margin-left: 4px; }
.ranges { display: grid; gap: 20px; }

.avail { height: 4px; border-radius: 4px; background: #E9DFD0; overflow: hidden; position: relative; min-width: 60px; }
.avail i { position: absolute; inset: 0; background: linear-gradient(to right, var(--green) 0 var(--a), var(--amber) var(--a) calc(var(--a) + var(--r)), transparent 0); }

/* ================= Explore ================= */
.explore-body { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: minmax(0, 1fr); gap: 20px; padding: 0 28px 28px; min-height: 0; height: calc(100vh - 76px); }
.map-card { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: #ECE6DC; }
#map { position: absolute; inset: 0; }
.map-legend { position: absolute; top: 16px; left: 16px; z-index: 500; display: flex; align-items: baseline; gap: 6px; background: rgba(251, 248, 243, 0.9); backdrop-filter: blur(8px); padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-sm); font-size: 13px; }
.explore-panel { overflow: hidden; }
.explore-panel .results { flex: 1; overflow: auto; align-content: start; gap: 12px; }
.results-head { display: flex; justify-content: space-between; }
.cards { display: grid; gap: 12px; }
.pcard { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: #fff; transition: all 0.25s var(--ease); }
.pcard:hover, .pcard.hl { border-color: var(--ink-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.pcard-img { position: relative; isolation: isolate; border-radius: 11px; overflow: hidden; background: #EFE9DF; aspect-ratio: 1; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); transition: transform 0.6s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.7); }
.pcard-img .pill { position: absolute; left: 6px; bottom: 6px; height: 20px; font-size: 10px; padding: 0 8px; }
.pcard-body { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 2px 4px 2px 0; }
.pcard-top { display: grid; gap: 2px; }
.pcard-top h3 { font-size: 19px; line-height: 1.15; }
.pcard-price { font-size: 12px; color: var(--muted); }
.pcard-price b { color: var(--ink); font-weight: 700; }
.pcard-loc { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.pcard-loc svg { width: 13px; height: 13px; color: var(--muted); }
.pcard-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; color: var(--muted); }
.pcard-foot { display: grid; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.pcard-foot b { color: var(--ink); }

/* ================= Stage card (project + building) ================= */
.stage-card { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(#EAE4DA, #F3EEE6 55%, #E9E1D4); box-shadow: var(--shadow); min-height: 480px; }
.stage-card > .stage { position: absolute; inset: 0; }
.stage-hint { position: absolute; top: 18px; left: 18px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: rgba(251, 248, 243, 0.9); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); font-size: 12px; }
.stage-hint .muted { color: var(--ink-2); }
.stage-hint kbd { margin: 0 1px; }
.stage-hint .pill svg { width: 13px; height: 13px; }
.stage-labels { position: absolute; inset: 0; pointer-events: none; }
.stage-tag {
  position: absolute; left: 0; top: 0; transform: translateX(-50%); display: grid; text-align: center; white-space: nowrap;
  background: rgba(251, 248, 243, 0.94); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 12px; box-shadow: var(--shadow);
  font-size: 12px; transition: background 0.25s var(--ease), color 0.25s, margin 0.25s var(--ease);
}
.stage-tag::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.stage-tag.below::after { bottom: auto; top: -5px; }
.stage-tag b { font-weight: 700; }
.stage-tag span { font-size: 11px; color: var(--muted); }
.stage-tag.on { background: var(--ink); color: var(--paper); margin-top: -6px; }
.stage-tag.below.on { margin-top: 6px; }
.stage-tag.on span { color: rgba(251, 248, 243, 0.7); }

.stage-info { position: absolute; top: 18px; left: 18px; z-index: 5; background: rgba(251, 248, 243, 0.88); backdrop-filter: blur(10px); border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow-sm); }
.stage-info h1 { font-size: 28px; line-height: 1.1; margin-top: 2px; }
.stage-info-row { display: flex; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.stage-info-row b { color: var(--green); }
.stage-legend { position: absolute; top: 18px; right: 18px; z-index: 5; display: flex; gap: 14px; background: rgba(251, 248, 243, 0.88); backdrop-filter: blur(10px); border-radius: 999px; padding: 8px 14px; font-size: 11px; font-weight: 600; box-shadow: var(--shadow-sm); }
.stage-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stage-legend i { width: 9px; height: 9px; border-radius: 3px; }
.stage-sibs { position: absolute; left: 18px; bottom: 22px; z-index: 5; display: flex; gap: 4px; background: rgba(251, 248, 243, 0.88); backdrop-filter: blur(10px); padding: 5px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.stage-sibs a { min-width: 34px; height: 30px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.stage-sibs a:hover { color: var(--ink); }
.stage-sibs a.on { background: var(--ink); color: var(--paper); }

/* ================= Project page ================= */
.pp-body { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr); gap: 20px; padding: 0 28px 28px; height: calc(100vh - 76px); min-height: 600px; }
.pp-panel { overflow: auto; }
.pp-title { font-size: 40px; line-height: 1.05; margin-top: -8px; }
.pp-loc { display: flex; gap: 6px; align-items: center; color: var(--ink-2); font-size: 13px; margin-top: -8px; }
.pp-loc svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.pp-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-desc { color: var(--ink-2); line-height: 1.65; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.kpis > div { padding: 14px; display: grid; gap: 2px; }
.kpis > div + div { border-left: 1px solid var(--line); }
.kpis b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.1; }
.kpis b small { font-size: 13px; color: var(--muted); font-family: var(--sans); }
.kpis span { font-size: 11px; color: var(--muted); }
.blist { display: grid; gap: 8px; margin-top: -4px; }
.brow { display: grid; grid-template-columns: 40px 1fr auto 20px; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; transition: all 0.2s var(--ease); }
.brow:hover, .brow.hl { border-color: var(--ink); box-shadow: var(--shadow); }
.brow-code { width: 40px; height: 40px; border-radius: 12px; background: var(--sand); display: grid; place-items: center; font-family: var(--serif); font-size: 18px; transition: all 0.2s; }
.brow.hl .brow-code, .brow:hover .brow-code { background: var(--ink); color: var(--paper); }
.brow-main { display: grid; gap: 4px; min-width: 0; }
.brow-main span { font-size: 12px; color: var(--muted); }
.brow-side { text-align: right; display: grid; }
.brow-side b { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--green); line-height: 1; }
.brow-side span { font-size: 11px; color: var(--muted); }
.brow-go svg { width: 18px; height: 18px; color: var(--muted); }
.panel-cta { position: sticky; bottom: 0; background: var(--paper); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ================= Building page ================= */
.bp-body { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 290px 340px; grid-template-rows: minmax(0, 1fr); gap: 20px; padding: 0 28px 28px; height: calc(100vh - 76px); min-height: 640px; }
.bp-filters, .bp-units { overflow: auto; }
.units-head { position: sticky; top: 0; background: var(--paper); z-index: 2; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.select-sm { height: 32px; width: auto; font-size: 12px; padding: 0 30px 0 12px; border-radius: 999px; background-position: right 10px center; }
.units { display: grid; padding: 8px; }
.urow { display: grid; grid-template-columns: 4px 1fr auto 30px 30px; gap: 12px; align-items: center; padding: 10px 10px 10px 8px; border-radius: 12px; cursor: pointer; transition: background 0.15s; outline: none; }
.urow:hover, .urow.hl, .urow:focus-visible { background: #fff; box-shadow: var(--shadow-sm); }
.urow-status { width: 4px; height: 30px; border-radius: 4px; }
.urow-main { display: grid; min-width: 0; }
.urow-main b { font-size: 14px; }
.urow-main span { font-size: 11.5px; color: var(--muted); }
.urow-price { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.urow-fav, .urow-cmp { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--faint); transition: all 0.15s; }
.urow-fav svg, .urow-cmp svg { width: 15px; height: 15px; }
.urow-fav:hover, .urow-cmp:hover { color: var(--ink); background: var(--sand); }
.urow-fav.on { color: #C2483A; }
.urow-fav.on:hover { color: #C2483A; }
.urow-cmp.on { background: var(--ink); color: var(--paper); }

.compare-tray { position: fixed; left: 50%; bottom: 24px; z-index: 700; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(28, 26, 23, 0.94); color: var(--paper); box-shadow: var(--shadow-lg); transform: translate(-50%, 160%); opacity: 0; pointer-events: none; transition: transform 0.4s var(--ease), opacity 0.3s; }
.compare-tray.in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.compare-tray .eyebrow { color: rgba(251, 248, 243, 0.55); margin-right: 4px; }
.tray-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 6px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: 700; }
.tray-chip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.tray-chip button:hover { background: rgba(255, 255, 255, 0.15); }
.tray-chip svg { width: 12px; height: 12px; }
.compare-tray .btn-primary { background: var(--paper); color: var(--ink); }

/* apartment drawer */
.apt { padding: 26px; display: grid; gap: 22px; }
.apt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.apt-head h2 { font-size: 34px; line-height: 1.1; margin-top: 4px; }
.apt-price { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.apt-price b { font-size: 30px; font-weight: 400; }
.apt-plan { background: #fff; border-radius: 18px; border: 1px solid var(--line); padding: 12px; }
.apt-plan img { width: 100%; aspect-ratio: 880 / 700; object-fit: contain; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.specs > div { background: var(--paper); padding: 14px; display: grid; gap: 2px; }
.specs svg { width: 18px; height: 18px; color: var(--accent); margin-bottom: 6px; }
.specs span { font-size: 11px; color: var(--muted); }
.specs b { font-size: 15px; }
.apt-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.apt-actions .apt-req, .apt-actions .apt-show { grid-column: 1 / -1; }
.apt-fav.on { color: #C2483A; border-color: rgba(194, 72, 58, 0.35); background: #FBEFEC; }

/* compare modal */
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp th, .cmp td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp tbody th { color: var(--muted); font-weight: 600; font-size: 12px; width: 130px; }
.cmp thead th { border-bottom: 0; }
.cmp thead img { width: 100%; max-width: 240px; aspect-ratio: 880/700; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.cmp thead b { font-size: 22px; font-weight: 400; }
.cmp td.best { color: var(--green); font-weight: 700; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input.invalid { border-color: var(--red); box-shadow: 0 0 0 4px rgba(180, 83, 63, 0.1); }

/* ================= Responsive ================= */
@media (max-width: 1360px) {
  .bp-body { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(520px, 1fr) auto; height: auto; }
  .bp-body .stage-card { grid-column: 1 / -1; height: 64vh; }
  .bp-filters { overflow: visible; }
  .bp-units { max-height: 640px; }
}
@media (max-width: 1100px) {
  .explore-body, .pp-body { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .map-card { height: 56vh; }
  .pp-body .stage-card { height: 62vh; }
  .explore-panel .results { overflow: visible; }
}
@media (max-width: 760px) {
  .site-head { padding: 14px 16px; gap: 14px; }
  .crumbs { display: none; }
  .site-actions { margin-left: auto; }
  .site-actions .btn-quiet:not(.fav-link) { display: none; }
  .explore-body, .pp-body, .bp-body { padding: 0 16px 16px; gap: 14px; }
  .bp-body { grid-template-columns: 1fr; }
  .bp-body .stage-card { height: 58vh; min-height: 380px; }
  .stage-info { padding: 10px 14px; }
  .stage-info h1 { font-size: 20px; }
  .stage-legend { display: none; }
  .stage-sibs { left: 12px; bottom: 78px; }
  .bp-body { grid-template-rows: auto; }
  .hide-sm { display: none; }
  .pcard { grid-template-columns: 96px 1fr; }
  .rotator-label { display: none; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .apt-actions { grid-template-columns: repeat(3, 1fr); }
  .apt-actions .btn-ghost { padding: 0 8px; font-size: 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .pp-title { font-size: 32px; }
}

/* draft preview banner */
.preview-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 650; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 16px; border-radius: 999px; background: #8D6A1F; color: #fff; box-shadow: var(--shadow-lg); font-size: 12.5px; }
.preview-bar > svg { width: 18px; height: 18px; flex: none; }
.preview-bar a { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-weight: 700; white-space: nowrap; }
.preview-bar a:hover { background: rgba(255, 255, 255, 0.3); }
.preview-bar a svg { width: 14px; height: 14px; }
body:has(.preview-bar) .rotator { bottom: 78px; }
@media (max-width: 760px) { .preview-bar span { display: none; } }

/* apartment photos (public) */
.apt-tabs { justify-self: start; }
.gal { display: grid; gap: 10px; }
.gal-main { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #EFE9DF; }
.gal-main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gal-nav, .gal-zoom { position: absolute; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(251, 248, 243, 0.9); box-shadow: var(--shadow); transition: background 0.15s; }
.gal-nav:hover, .gal-zoom:hover { background: #fff; }
.gal-nav svg, .gal-zoom svg { width: 18px; height: 18px; }
.gal-nav { top: 50%; transform: translateY(-50%); }
.gal-nav.prev { left: 12px; }
.gal-nav.next { right: 12px; }
.gal-zoom { right: 12px; bottom: 12px; width: 34px; height: 34px; }
.gal-count { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(28, 26, 23, 0.7); color: #fff; font-size: 11px; font-weight: 700; }
.gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.gal-thumbs button { flex: none; width: 76px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; opacity: 0.55; border: 2px solid transparent; transition: all 0.15s; }
.gal-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumbs button:hover { opacity: 0.85; }
.gal-thumbs button.on { opacity: 1; border-color: var(--ink); }

.lightbox { position: fixed; inset: 0; z-index: 1500; background: rgba(18, 16, 14, 0.94); display: grid; place-items: center; opacity: 0; transition: opacity 0.25s; }
.lightbox.in { opacity: 1; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 100px); object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.lb-close, .lb-nav { position: absolute; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, 0.1); transition: background 0.15s; }
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lb-close svg, .lb-nav svg { width: 22px; height: 22px; }
.lb-close { top: 20px; right: 20px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-nav.prev { left: 20px; }
.lb-nav.next { right: 20px; }
.lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 600; }
@media (max-width: 760px) { .lightbox img { max-width: 100vw; border-radius: 0; } .lb-nav { top: auto; bottom: 12px; transform: none; } }

/* favorites */
.fav-link { position: relative; }
.fav-link em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #C2483A; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.fav-body { width: min(1180px, 100%); margin: 0 auto; padding: 8px 28px 60px; }
.fav-head { margin-bottom: 24px; }
.fav-head h1 { font-size: 44px; line-height: 1.1; margin-top: 4px; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.fav-card { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.fav-card.missing { opacity: 0.7; }
.fav-img { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; display: block; }
.fav-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.fav-img img.plan { object-fit: contain; padding: 14px; }
.fav-card:hover .fav-img img { transform: scale(1.03); }
.fav-img .pill { position: absolute; left: 12px; top: 12px; }
.fav-body-c { padding: 16px 18px 18px; display: grid; gap: 6px; }
.fav-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fav-title h3 { font-size: 24px; }
.fav-title b { font-size: 15px; white-space: nowrap; }
.fav-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.fav-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.fav-rm { margin-left: auto; color: #C2483A; }
.fav-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 80px 20px; background: var(--paper); border-radius: var(--r-lg); color: var(--muted); }
.fav-empty > svg { width: 40px; height: 40px; color: #C2483A; opacity: 0.7; }
.fav-empty b { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--ink); }
.fav-empty .btn { margin-top: 12px; }
@media (max-width: 760px) { .fav-body { padding: 0 16px 40px; } .fav-head h1 { font-size: 34px; } }

/* VAT labels */
.vat-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #E9EEF2; color: #3D5A72; }
.vat-tag.excl { background: #F6ECD5; color: #8D6A1F; }
.urow-price { display: grid; justify-items: end; line-height: 1.2; }
.urow-price small { font-size: 10px; font-weight: 600; color: var(--muted); }
.tip-vat { font-weight: 500; opacity: 0.7; font-size: 10.5px; }
.fav-title b { display: grid; justify-items: end; line-height: 1.2; }
.fav-title b small { font-size: 10.5px; font-weight: 600; color: var(--muted); }