/* Model + Variant pages */
.pg-top { background: #F3F7FD; }
.pg-hero { background: linear-gradient(180deg, #F3F7FD 0%, #FFFFFF 100%); }
.car-hero { display: grid; grid-template-columns: 1fr 460px; gap: 32px; align-items: start; padding: 20px 0 56px; }

/* gallery */
.gal { position: relative; border-radius: 28px; background: linear-gradient(135deg, #DCE8FB 0%, #EBF2FC 50%, #F7FAFE 100%); height: 500px; overflow: hidden; border: 1px solid #E3ECF9; }
.gal .big { position: absolute; right: 30px; top: 64px; font-family: 'Outfit'; font-weight: 800; font-size: 150px; white-space: nowrap; letter-spacing: -0.05em; line-height: 1; color: rgba(37, 99, 235, .06); }
.gal .floor { position: absolute; left: 0; right: 0; top: 372px; height: 1px; background: linear-gradient(90deg, rgba(37, 99, 235, 0) 0%, rgba(37, 99, 235, .22) 50%, rgba(37, 99, 235, 0) 100%); }
.gal .shadow { position: absolute; left: 18%; right: 18%; top: 352px; height: 28px; border-radius: 50%; background: rgba(0, 22, 46, .3); filter: blur(16px); }
.gal .imgs { position: absolute; left: 7%; right: 7%; top: 90px; height: 300px; }
.gal .imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s var(--ease); }
.gal .imgs img.on { opacity: 1; }
.gal-tags { position: absolute; left: 22px; top: 22px; display: flex; gap: 8px; }
.gal-tags .tag { background: #fff; box-shadow: var(--sh-1); height: 30px; }
.gal-acts { position: absolute; right: 22px; top: 22px; display: flex; gap: 8px; }
.gal-acts button { width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: var(--sh-1); display: flex; align-items: center; justify-content: center; color: var(--ink-2); transition: color .2s, background .2s; }
.gal-acts button:hover { color: var(--blue); }
.gal-acts .ic { width: 18px; height: 18px; }
.gal-cols { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .9); }
.gal-cols .nm span { display: block; font-size: 12px; color: var(--muted); }
.gal-cols .nm b { display: block; font-size: 15px; font-weight: 600; }
.sws { display: flex; gap: 10px; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s var(--ease); }
.sw.on { box-shadow: 0 0 0 2px var(--blue); }
.sw:hover { box-shadow: 0 0 0 2px #93B4F5; }
.sw.on:hover { box-shadow: 0 0 0 2px var(--blue); }

.hl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
.hl-t { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.hl-t .ib { width: 38px; height: 38px; border-radius: 11px; background: var(--blue-50); color: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; }
.hl-t .ib .ic { width: 19px; height: 19px; }
.hl-t b { display: block; font-family: 'Outfit'; font-size: 18px; font-weight: 700; line-height: 1.2; }
.hl-t span { display: block; font-size: 12.5px; color: var(--muted); }

/* summary card */
.sum { position: sticky; top: 148px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 26px; box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: 18px; }
.sum .eyebrow { color: var(--muted); letter-spacing: .1em; font-size: 12px; }
.sum h1 { font-size: 40px; margin-top: 6px; }
.sum .by { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.sum .by .cb { width: 22px; height: 22px; border-radius: 6px; background: var(--blue-50); color: var(--blue); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sum .specline { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.prices { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.prices > div { padding: 14px 16px; }
.prices > div + div { border-left: 1px solid var(--line); background: var(--bg); }
.prices span { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.prices b { display: block; font-family: 'Outfit'; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.prices small { display: block; font-size: 12px; color: var(--muted); }
.sum .lbl { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; display: flex; justify-content: space-between; }
.sum .lbl span { color: var(--muted); font-weight: 500; }
.sum .cities { display: flex; flex-wrap: wrap; gap: 6px; }
.sum .chip { padding: 0 12px; height: 34px; font-size: 13.5px; }
.livebox { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--teal-50); border: 1px solid #CCF1EC; }
.livebox .t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--teal); }
.livebox .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.livebox .row span { display: block; font-size: 12.5px; color: var(--ink-2); }
.livebox .row b { display: block; font-family: 'Outfit'; font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.livebox .sv { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; color: var(--green); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.livebox .sv .ic { width: 14px; height: 14px; }
.sum .acts { display: flex; flex-direction: column; gap: 10px; }
.sum .acts .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sum .fine { text-align: center; font-size: 12.5px; color: var(--muted); }
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.trust div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 12px; color: var(--ink-2); font-weight: 500; line-height: 1.3; }
.trust .ic { width: 20px; height: 20px; color: var(--teal); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); }
.toggle-row b { display: block; font-size: 14px; font-weight: 600; }
.toggle-row span { display: block; font-size: 12.5px; color: var(--muted); }
.switch { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--blue); flex: none; cursor: pointer; transition: background .25s; }
.switch .knob { position: absolute; top: 3px; left: 21px; width: 20px; height: 20px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .25s var(--ease); }
.switch.off { background: #CBD5E1; }
.switch.off .knob { left: 3px; }

/* variants */
.var-card { display: grid; grid-template-columns: 220px 1fr 1fr 260px; gap: 28px; align-items: center; padding: 22px; border-radius: 22px; background: #fff; border: 1.5px solid var(--blue); box-shadow: 0 16px 40px rgba(37, 99, 235, .1); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.var-card:hover { box-shadow: 0 22px 50px rgba(37, 99, 235, .16); transform: translateY(-2px); }
.var-card .th { height: 120px; border-radius: 16px; background: linear-gradient(180deg, #F1F5FB 0%, #E6EDF7 100%); display: flex; align-items: center; justify-content: center; }
.var-card .th img { width: 88%; height: 100px; object-fit: contain; }
.var-card h3 { font-size: 24px; }
.var-card .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.var-card .chips span { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 8px; background: var(--bg); font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.var-card .chips .ic { width: 14px; height: 14px; color: var(--blue); }
.var-card .pp { display: flex; flex-direction: column; gap: 10px; padding-left: 28px; border-left: 1px dashed var(--line); }
.var-card .pp span { display: block; font-size: 12.5px; color: var(--muted); }
.var-card .pp b { display: block; font-family: 'Outfit'; font-size: 22px; font-weight: 700; }
.var-card .lv { display: flex; flex-direction: column; gap: 10px; }
.var-card .lv .t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--teal); }
.var-card .lv .best { font-size: 13.5px; color: var(--ink-2); }
.var-card .lv .best b { font-family: 'Outfit'; font-size: 18px; color: var(--ink); }
.var-note { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: var(--bg); font-size: 14px; color: var(--ink-2); }
.var-note .ic { width: 18px; height: 18px; color: var(--blue); }
.filters { display: flex; gap: 8px; }

/* on-road table + offer */
.two { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
.tbl { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; }
.tbl-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.tbl-h b { font-size: 16px; font-weight: 600; }
.tbl-r { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 22px; border-top: 1px solid var(--line-2); font-size: 15px; color: var(--ink-2); }
.tbl-r:first-of-type { border-top: 0; }
.tbl-r b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-r small { display: block; font-size: 12.5px; color: var(--muted); }
.tbl-r.tot { background: var(--bg); }
.tbl-r.tot span, .tbl-r.tot b { font-family: 'Outfit'; font-size: 19px; font-weight: 700; color: var(--ink); }
.tbl-r.cbp { background: var(--blue-50); }
.tbl-r.cbp span { color: var(--blue-d); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tbl-r.cbp b { color: var(--blue-d); font-family: 'Outfit'; font-size: 19px; }
.tbl-foot { padding: 14px 22px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line-2); }
.note { display: flex; gap: 14px; padding: 18px 20px; border-radius: 16px; }
.note .ic { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.note b { display: block; font-size: 15px; font-weight: 600; }
.note p { font-size: 14px; margin-top: 4px; }
.note.amber { background: var(--amber-50); border: 1px solid #FDE7B0; color: #78350F; }
.note.amber .ic { color: var(--amber); }
.note.green { background: var(--green-50); border: 1px solid #C9EED6; color: #14532D; }
.note.green .ic { color: var(--green); }
.stack { display: flex; flex-direction: column; gap: 14px; }

.offer-card { border-radius: 22px; background: var(--navy); color: #fff; padding: 24px; box-shadow: var(--sh-3); }
.offer-card .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.offer-card .hd b { font-family: 'Outfit'; font-size: 18px; font-weight: 600; }
.offer-card .hd .tag { background: rgba(57, 193, 240, .14); color: #7DD8F6; }
.offer-card .ln { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14.5px; color: #B9C8DA; }
.offer-card .ln:first-of-type { margin-top: 14px; }
.offer-card .ln b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.offer-card .ln b.g { color: #4ADE80; }
.offer-card .all { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 6px; padding: 16px; border-radius: 14px; background: rgba(37, 99, 235, .22); border: 1px solid rgba(96, 165, 250, .4); }
.offer-card .all span { font-size: 13px; color: #CFE0F2; }
.offer-card .all b { font-family: 'Outfit'; font-size: 26px; font-weight: 700; }
.offer-card .hid { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: #9FB4CC; }
.offer-card .hid .ic { width: 16px; height: 16px; color: #7DD8F6; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 18px; }
.checks div { display: flex; gap: 8px; font-size: 14px; color: var(--ink-2); }
.checks .ic { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 2px; }

/* calculators */
.calc { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; }
.calc .ins { padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.calc .outs { padding: 28px; background: var(--bg); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.rng { display: flex; flex-direction: column; gap: 10px; }
.rng .top { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.rng .top b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rng .rail { position: relative; height: 22px; display: flex; align-items: center; }
.rng .track { position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rng .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 50%); background: var(--blue); border-radius: 3px; }
.rng .thumb { position: absolute; left: calc(var(--p, 50%) - 11px); width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 2px 6px rgba(37, 99, 235, .3); pointer-events: none; }
.rng input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; margin: 0; }
.rng .ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); }
.big-out span { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.big-out b { display: block; font-family: 'Outfit'; font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.big-out.g b { color: var(--green); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kv div { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.kv span { display: block; font-size: 12.5px; color: var(--muted); }
.kv b { display: block; font-family: 'Outfit'; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmpbar { display: flex; flex-direction: column; gap: 12px; }
.cmpbar .r { display: flex; flex-direction: column; gap: 6px; }
.cmpbar .r .t { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.cmpbar .r .t b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cmpbar .bar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.cmpbar .bar i { display: block; height: 100%; border-radius: 6px; background: #94A3B8; width: 100%; transition: width .5s var(--ease); }
.cmpbar .bar i.ev { background: var(--teal); }
.split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #FBBF24; }
.split i { display: block; background: var(--blue); transition: width .5s var(--ease); }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-2); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.calc-note { font-size: 12.5px; color: var(--muted); }

/* how (horizontal) */
.how-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hw { position: relative; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.hw .n { display: flex; align-items: center; gap: 10px; }
.hw .n b { width: 36px; height: 36px; border-radius: 11px; background: var(--blue); color: #fff; font-family: 'Outfit'; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hw .n i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--blue-100) 0%, rgba(219, 234, 254, 0) 100%); display: block; }
.hw h3 { font-size: 19px; margin-top: 6px; }
.hw p { font-size: 14.5px; color: var(--muted); }

/* chart */
.chart-card { display: grid; grid-template-columns: 1fr 300px; border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; }
.chart-card .plot { padding: 24px 24px 18px; }
.chart-card .plot .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.chart-card .plot .hd b { font-size: 16px; font-weight: 600; }
.chart-card svg.ch { width: 100%; height: auto; display: block; }
.chart-card .side { padding: 24px; background: var(--bg); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.chart-card .side .kv { grid-template-columns: 1fr; }

/* specs */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spec { border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; }
.spec h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; padding: 18px 20px; border-bottom: 1px solid var(--line-2); background: var(--bg); }
.spec h3 .ic { width: 20px; height: 20px; color: var(--blue); }
.spec .r { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line-2); }
.spec .r:first-of-type { border-top: 0; }
.spec .r b { color: var(--ink); font-weight: 600; text-align: right; }
.feats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.feat { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.feat .ic { width: 18px; height: 18px; color: var(--teal); }

/* similar */
.sim-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* timeline */
.tl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.tl-i { position: relative; padding-right: 20px; }
.tl-i .dt { display: flex; align-items: center; gap: 0; }
.tl-i .dt b { width: 44px; height: 44px; border-radius: 14px; background: var(--blue-50); color: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; }
.tl-i .dt b .ic { width: 20px; height: 20px; }
.tl-i .dt i { flex: 1; height: 2px; background: var(--blue-100); display: block; }
.tl-i:last-child .dt i { background: rgba(0, 0, 0, 0); }
.tl-i .when { display: block; margin-top: 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.tl-i h3 { font-size: 18px; margin-top: 6px; }
.tl-i p { font-size: 14px; color: var(--muted); margin-top: 6px; }

@media (max-width: 1100px) {
  .car-hero { grid-template-columns: 1fr 400px; }
  .hl { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .crumbs { padding-top: 14px; font-size: 12.5px; }
  .car-hero { grid-template-columns: 1fr; gap: 16px; padding: 14px 0 36px; }
  .gal { height: 300px; border-radius: 22px; margin: 0 -4px; }
  .gal .big { font-size: 80px; right: 16px; top: 50px; }
  .gal .imgs { left: 4%; right: 4%; top: 52px; height: 170px; }
  .gal .shadow { top: 202px; }
  .gal .floor { top: 214px; }
  .gal-tags { left: 14px; top: 14px; }
  .gal-tags .tag:nth-child(2) { display: none; }
  .gal-acts { right: 14px; top: 14px; }
  .gal-acts button { width: 36px; height: 36px; }
  .gal-acts button:nth-child(3) { display: none; }
  .gal-cols { left: 12px; right: 12px; bottom: 12px; padding: 10px 10px 10px 14px; }
  .sw { width: 28px; height: 28px; }
  .sws { gap: 7px; }
  .hl { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
  .hl-t { padding: 12px; gap: 10px; flex-direction: row; align-items: center; }
  .hl-t:last-child { grid-column: 1 / -1; }
  .hl-t b { font-size: 16px; }
  .sum { position: static; padding: 20px; border-radius: 20px; box-shadow: var(--sh-1); gap: 16px; }
  .sum h1 { font-size: 32px; }
  .prices b { font-size: 21px; }
  .var-card { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .var-card .th { height: 140px; }
  .var-card .pp { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px dashed var(--line); flex-direction: row; justify-content: space-between; }
  .filters { overflow-x: auto; width: 100%; }
  .two { grid-template-columns: 1fr; gap: 16px; }
  .tbl-r { padding: 13px 16px; font-size: 14px; }
  .tbl-h { padding: 14px 16px; }
  .checks { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; border-radius: 18px; }
  .calc .ins, .calc .outs { padding: 20px; }
  .calc .outs { border-left: 0; border-top: 1px solid var(--line); }
  .big-out b { font-size: 36px; }
  .how-row { grid-template-columns: 1fr; gap: 12px; }
  .hw { padding: 20px; }
  .chart-card { grid-template-columns: 1fr; border-radius: 18px; }
  .chart-card .plot { padding: 16px 12px 12px; }
  .chart-card .side { border-left: 0; border-top: 1px solid var(--line); padding: 18px; }
  .chart-card .side .kv { grid-template-columns: 1fr 1fr; }
  .spec-grid { grid-template-columns: 1fr; gap: 12px; }
  .feat { height: 38px; font-size: 13px; padding: 0 12px; }
  .sim-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sim-grid .car-card .ph { height: 120px; }
  .sim-grid .car-card .ph img { height: 90px; }
  .sim-grid .car-card .bd { padding: 14px; }
  .sim-grid .car-card h3 { font-size: 16px; }
  .sim-grid .car-card .pr { font-size: 14px; }
  .sim-grid .car-card .ft { display: none; }
  .sim-grid .car-card .ph .tag { display: none; }
  .tl { grid-template-columns: 1fr; gap: 18px; }
  .tl-i { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; padding-right: 0; }
  .tl-i .dt { grid-row: span 3; flex-direction: column; align-self: stretch; }
  .tl-i .dt i { width: 2px; height: auto; flex: 1; margin-top: 6px; }
  .tl-i .when { margin-top: 0; }
}

/* mini room preview (variant) */
.mini { margin-top: 16px; border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 18px; }
.mini-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mini-h b { font-family: 'Outfit'; font-size: 17px; font-weight: 600; }
.mini-h span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--teal); }
.mini-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mo { padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; }
.mo .who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.mo .who i { width: 24px; height: 24px; border-radius: 7px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.mo b { font-family: 'Outfit'; font-size: 21px; font-weight: 700; margin-top: 6px; }
.mo .dn { display: flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--green); }
.mo .dn .ic { width: 13px; height: 13px; }
.mo .meta { font-size: 12px; color: var(--muted); }
.mo.best { background: var(--blue-50); border-color: var(--blue-100); }
.mo.best .who i { background: var(--blue); border-color: var(--blue); color: #fff; }
.mo.best .meta { color: var(--blue-d); font-weight: 600; }
.ch-m { display: none !important; }
@media (max-width: 900px) {
  .mini { padding: 14px; }
  .mini-rows { grid-template-columns: 1fr; gap: 8px; }
  .mo { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 12px 14px; }
  .mo b { margin-top: 0; font-size: 18px; }
  .mo .meta { width: 100%; }
  .ch-d { display: none !important; }
  .ch-m { display: block !important; }
}

/* summary chips fit one row; phone order: gallery, price card, tiles, room preview */
.sum .chip { padding: 0 10px; font-size: 13px; }
@media (max-width: 900px) {
  .car-hero > div:first-child { display: contents; }
  .car-hero .gal { order: 1; margin: 0; }
  .car-hero .sum { order: 2; }
  .car-hero .hl { order: 3; margin-top: 0; }
  .car-hero .mini { order: 4; margin-top: 0; }
  .crumbs a:nth-of-type(2), .crumbs a:nth-of-type(3), .crumbs .ic:nth-of-type(2), .crumbs .ic:nth-of-type(3) { display: none; }
  .chart-card .side .kv { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .chart-card .side .kv div { padding: 10px 12px; }
  .chart-card .side .kv b { font-size: 16px; }
}