/* Model hub (P8a): "{model} price in Bangladesh" — offers, price history, specs and every store's reviews. */
.hub-hero { padding-bottom: 18px; }
.hub-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.6rem; align-items: start; margin-top: .9rem; }
.hub-img { width: 220px; height: 220px; border-radius: var(--nt-radius); background: #fff; border: 1px solid var(--nt-line); display: grid; place-items: center; overflow: hidden; color: var(--nt-line-2); font-size: 2.4rem; }
.hub-img img { width: 100%; height: 100%; object-fit: contain; }
.hub-title h1 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin: .2rem 0 .5rem; }
.hub-title .lede { max-width: 70ch; }
.hub-title .eyebrow { display: inline-block; }
.hub-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem; margin: .4rem 0 .5rem; }
.hub-price .from { font-weight: 700; color: var(--nt-muted); }
.hub-price b { font-size: 1.9rem; color: var(--nt-ink); letter-spacing: -.02em; }
.hub-price .muted { color: var(--nt-muted); font-size: .9rem; }
.hub-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.hub-badges .chip .stars { --size: .8rem; }
.hub-none { display: flex; gap: .5rem; color: var(--nt-muted); max-width: 60ch; }

.hub-grid { display: grid; gap: 1rem; }
.hub-main { display: grid; gap: 1rem; min-width: 0; }
.hub-card { background: var(--nt-card); border: 1px solid var(--nt-line); border-radius: var(--nt-radius); padding: 1.1rem 1.2rem; box-shadow: var(--nt-shadow); }
.hub-card h2 { font-size: 1.15rem; margin-bottom: .8rem; }
.hub-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.hub-card__head h2 { margin: 0; }
.hub-range { display: inline-flex; background: var(--nt-paper); border: 1px solid var(--nt-line); border-radius: 999px; padding: .2rem; }
.hub-range a { padding: .25rem .8rem; border-radius: 999px; font-weight: 700; font-size: .84rem; color: var(--nt-ink-2); }
.hub-range a.on { background: var(--nt-ink); color: #fff; }

.hub-chart { margin: 0; }
.hub-chart svg { width: 100%; height: auto; display: block; }
.hub-chart .axis { stroke: var(--nt-line-2); stroke-width: 1; }
.hub-chart .line { fill: none; stroke: var(--nt-blue); stroke-width: 2.5; stroke-linejoin: round; }
.hub-chart .fill-top { stop-color: var(--nt-blue); stop-opacity: .2; }
.hub-chart .fill-bottom { stop-color: var(--nt-blue); stop-opacity: 0; }
.hub-chart .dot { fill: #fff; stroke: var(--nt-blue); stroke-width: 2.5; }
.hub-chart .dot.low { fill: var(--nt-ok); stroke: var(--nt-ok); }
.hub-chart .tick { font-size: 12px; fill: var(--nt-muted); }
.hub-chart .tick.end { text-anchor: end; }
.hub-chart .tick.low { text-anchor: middle; fill: var(--nt-ok); font-weight: 700; }
.hub-chart figcaption { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .4rem; font-size: .9rem; color: var(--nt-muted); }
.hub-chart figcaption b { color: var(--nt-ink); }
.hub-alert { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--nt-line-2); }
.hub-alert__form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.hub-alert__form label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--nt-ink); }
.hub-alert__form input { max-width: 200px; }

.hub-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.6rem; }
.hub-specs .spec-group h3 { font-size: .8rem; margin-bottom: .35rem; color: var(--nt-blue-deep); }

.hub-rv-sum { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.hub-rv-sum b { font-size: 2rem; color: var(--nt-ink); }
.hub-rv { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.hub-rv li { border-top: 1px solid var(--nt-line); padding-top: .8rem; }
.hub-rv__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.hub-rv li p { margin: .2rem 0; }
.hub-rv__reply { margin: .4rem 0 0; padding: .45rem .7rem; border-left: 3px solid var(--nt-lime-deep); background: var(--nt-paper); font-size: .88rem; }

@media (max-width: 767.98px) {
    .hub-head { grid-template-columns: 96px minmax(0, 1fr); gap: .9rem; }
    .hub-img { width: 96px; height: 96px; }
    .hub-price b { font-size: 1.5rem; }
    .hub-specs { grid-template-columns: minmax(0, 1fr); }
    .hub-card { padding: .9rem; }
}