/* Street-level map shared with the pharmacy renderer (ravimid-map.js). */
.rh-map { position: relative; margin: 12px 0 16px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--panel2); }
.rh-live[hidden] { display: none !important; }
.rh-map .rv-map { position: relative; background: var(--panel2); line-height: normal; height: 420px; min-height: 420px; max-height: 420px; overflow: hidden; }
.rv-map-gl-host { position: absolute; inset: 0; }
.rv-map-note { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--accent2); font-size: .88rem; font-weight: 700; pointer-events: none; }
.rv-map-note:empty { display: none; }
.rh-map .rv-dirs { list-style: none; margin: 0; padding: 8px 12px 12px; display: grid; gap: 6px; background: var(--panel); }
.rh-map .rv-dirs[hidden] { display: none !important; }
.rh-map .rv-dirs li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.rh-map .rv-dirs li:first-child { border-top: 0; }
.rh-map .rv-dirs span { color: var(--muted); white-space: nowrap; }
.rv-map-tools { position: absolute; z-index: 3; top: 12px; left: 12px; margin: 0; }
.rv-map-tools .button { min-height: 42px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.rv-map-tools [hidden] { display: none !important; }
/* Real Google Street View panorama over the vector map. */
.rv-streetview-btn[hidden] { display: none !important; }
.rv-streetview-btn.rv-streetview-float { position: absolute; z-index: 4; top: 12px; left: 12px; min-height: 42px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.rv-streetview-overlay { position: absolute; inset: 0; z-index: 5; background: #000; }
.rv-streetview-overlay[hidden] { display: none !important; }
.rv-streetview-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rv-streetview-frame[hidden] { display: none !important; }
.rv-streetview-status { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; padding: 72px 28px 28px; color: #fff; text-align: center; }
.rv-streetview-status[hidden] { display: none !important; }
.rv-streetview-close { position: absolute; z-index: 6; top: 12px; right: 12px; min-height: 42px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.rh-map-hint { margin: 0; padding: 8px 12px 12px; color: var(--muted); font-size: .82rem; line-height: 1.4; background: var(--panel); }

@media (min-width: 720px) {
  .rh-map .rv-map { height: 520px; min-height: 520px; max-height: 520px; }
}

/* Google Maps embed (place mode) — no MapLibre/OSRM needed. */
.tl-gmap { position: relative; margin: 12px 0 16px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--panel2); }
.tl-gmap-frame { display: block; width: 100%; height: 420px; border: 0; }
.tl-gmap-streetview { position: absolute; z-index: 2; top: 12px; left: 12px; min-height: 42px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.tl-gmap-streetview[hidden], .tl-gmap-streetview-overlay[hidden] { display: none !important; }
.tl-gmap-streetview-overlay { position: absolute; z-index: 3; inset: 0; background: #000; }
.tl-gmap-streetview-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tl-gmap-streetview-frame[hidden] { display: none !important; }
.tl-gmap-streetview-status { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; padding: 72px 28px 28px; color: #fff; text-align: center; }
.tl-gmap-streetview-status[hidden] { display: none !important; }
.tl-gmap-back { position: absolute; z-index: 4; top: 12px; right: 12px; min-height: 42px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }

@media (min-width: 720px) {
  .tl-gmap-frame { height: 520px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   restohinnad.ee's own skin (body.rh-v2)
   ─────────────────────────────────────────────────────────────────────────
   Why: this host was wearing sub.css, the dark chrome shared by 57 TempoLife
   subdomains, so a reader arriving from search at restohinnad.ee/vordlus got
   a dark page headed "TempoLife" with a nav pointing at the apex's
   calculators. The site's own pages — the /kategooria landings built by
   restohind-v2/scripts/build-landing.mjs — are light, warm and self-branded.
   These values are taken from those pages, not invented, so the two halves of
   the site finally agree.

   HOW: sub.css is 141 lines driven by eleven custom properties, so almost all
   of this is a token swap. Only the dozen places where that sheet hardcodes a
   dark colour need naming explicitly. Everything is scoped to .rh-v2, so no
   other surface can be touched by it. */
/* 2026-10-31: the token swap above was only half the job. A recoloured
   TempoLife template is still a TempoLife template — the reader got text-link
   navigation, no brand mark, and on a phone 420px of nav and eleven language
   chips before the dish name. Worse, the colours were mine: #7a2e3a appears
   nowhere else on this domain. These are now restohinnad.ee's OWN tokens,
   read out of the running V2 bundle's :root, so the PHP pages and the app
   are one site rather than two that merely agree on being beige. */
body.rh-v2 {
  --bg:#f4f2eb; --panel:#fffdf8; --panel2:#e9ece5; --line:#d9ded6;
  --text:#1c251f; --muted:#69736c; --accent:#c94121; --accent2:#2f5d4b;
  --warn:#a8603a; --bad:#9c3a3a; --max:1120px;
  --green:#173f32; --green-light:#2f5d4b; --cream:#fff8e9; --orange:#e85a35;
  --card-shadow:0 20px 55px rgba(25,47,35,.09);
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* The bundle already serves these, so the PHP pages cost no new asset. */
@font-face{font-family:Manrope;src:url(/assets/restohinnad-v2/fonts/manrope-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/restohinnad-v2/fonts/manrope-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/restohinnad-v2/fonts/manrope-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/restohinnad-v2/fonts/manrope-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/restohinnad-v2/fonts/manrope-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(/assets/restohinnad-v2/fonts/instrument-serif-italic.woff2) format('woff2');font-style:italic;font-weight:400;font-display:swap}
body.rh-v2 { font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
body.rh-v2 h1, body.rh-v2 h2, body.rh-v2 h3 { font-weight:800; letter-spacing:-.03em; }
body.rh-v2 h2 { font-size:1.35rem; margin:2rem 0 .6rem; }
/* The dozen hardcoded colours in sub.css, which no variable reaches. */
body.rh-v2 a { color: #7a2e3a; }
body.rh-v2 .button,
body.rh-v2 .skip:focus { color: #fff; }
body.rh-v2 .button:hover { background: #5f232c; }
body.rh-v2 .bridge .bridge-link { color: #7a2e3a; }
body.rh-v2 .notice.warn { border-color:#e3d3b8; background:#fbf4e6; color:#6d4a1f; }
body.rh-v2 .notice.ok   { border-color:#cfe3d4; background:#f0f7f1; color:#2f5d3f; }
body.rh-v2 .pill.ok   { border-color:#cfe3d4; color:#2f5d3f; }
body.rh-v2 .pill.warn { border-color:#e3d3b8; color:#8a6525; }
body.rh-v2 .pill.bad  { border-color:#e8cdcd; color:#9c3a3a; }
body.rh-v2 .badge { background:#f0f7f1; border-color:#cfe3d4; color:#2f5d3f; }
body.rh-v2 *:focus-visible { outline-color: #7a2e3a; }
body.rh-v2 .sub-head { background: rgba(244,242,235,.94); }
/* The phone tab bar hardcodes the dark panel too, and it is the one element a
   reader keeps in view the whole way down the page. */
@media (max-width: 719px) {
  body.rh-v2 .sub-bottomnav { background: rgba(255,255,255,.95); border-top-color: var(--line); }
  body.rh-v2 .sub-bottomnav a { color: var(--muted); }
  body.rh-v2 .sub-bottomnav .on { color: var(--accent); }
}

/* ── The host's own header bar ────────────────────────────────────────────
   Dark green, the brand mark, and the language control folded into one
   button instead of eleven chips above the heading. The chips are still in
   the DOM inside the <details>, so every hreflang target stays crawlable
   without JavaScript — a <details> is open to a crawler by default. */
body.rh-v2 .sub-head { background: var(--green); border-bottom: 0; padding: 0; }
body.rh-v2 .sub-head .head-row { min-height: 62px; gap: 1.4rem; flex-wrap: nowrap; justify-content: flex-start; }
body.rh-v2 .rh-brand { display:inline-flex; align-items:center; gap:.55rem; color:#fff;
  font-weight: 800; letter-spacing: -.02em; font-size: 1.06rem; text-decoration: none; white-space:nowrap; }
body.rh-v2 .rh-brand i { font-style: normal; color: #fff; }
body.rh-v2 .rh-brand .rh-mark { width:27px; height:27px; border-radius:9px; display:block; }
body.rh-v2 .sub-head nav { gap: 1.3rem; font-size: .88rem; flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none; }
body.rh-v2 .sub-head nav::-webkit-scrollbar { display: none; }
body.rh-v2 .sub-head nav a { color: #cfd8d1; font-weight: 500; white-space: nowrap; }
body.rh-v2 .sub-head nav a:hover { color: #fff; text-decoration: none; }
body.rh-v2 .sub-head nav a[aria-current="page"] { color: #fff; }
body.rh-v2 .sub-head nav a[aria-current="page"]::after { content:''; display:block; height:2px;
  border-radius:2px; background: var(--orange); margin-top:4px; }

/* sub.css styles every <details> as a padded white panel, which in the
   green bar is a white box with the brand clipped behind it. */
details.rh-lang { margin-left: auto; position: relative; background: none;
  border: 0; padding: 0; border-radius: 0; }
details.rh-lang > summary { list-style: none; cursor: pointer; color: #e7eae6; font-size: .82rem;
  font-weight: 600; padding: .4rem .75rem; border-radius: 11px; white-space: nowrap;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
details.rh-lang > summary::-webkit-details-marker { display: none; }
details.rh-lang > summary::after { content: ' ▾'; opacity: .7; }
/* display:none until open. An author `display:flex` BEATS the UA rule that
   hides a closed <details>' content, so the panel painted over the header on
   every page — white box, brand clipped behind it. */
details.rh-lang .lang-switch { display: none; }
details.rh-lang[open] .lang-switch { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  display: flex; flex-direction: column; gap: .25rem; width: max-content; max-width: 70vw;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: .5rem;
  box-shadow: var(--card-shadow); margin: 0; }
details.rh-lang .lang-switch .pill { border: 0; background: none; padding: .35rem .6rem;
  border-radius: 9px; font-size: .88rem; color: var(--text); }
details.rh-lang .lang-switch .pill.ok { background: var(--panel2); font-weight: 700; }
details.rh-lang .lang-switch a.pill:hover { background: var(--panel2); text-decoration: none; }

/* ── The hero band ────────────────────────────────────────────────────────
   The dish, the one number, and the extremes — the three things a reader
   came for, above anything that needs reading. */
body.rh-v2 .rh-band { background: var(--cream); border-bottom: 1px solid var(--line); }
body.rh-v2 .rh-band .wrap { padding: 1.6rem 0 1.7rem; }
body.rh-v2 .rh-band .crumbs { margin: 0 0 .8rem; }
body.rh-v2 .rh-band h1 { margin: 0; font-size: clamp(1.9rem, 4.4vw, 2.85rem); line-height: 1.05; }
body.rh-v2 .rh-band h1 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-weight: 400; letter-spacing: -.01em; }
body.rh-v2 .rh-eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }
body.rh-v2 .rh-band .lede { margin: .55rem 0 0; font-size: 1rem; }
.rh-facts { display: flex; gap: .6rem; flex-wrap: wrap; padding-bottom: .2rem; }
.rh-fact { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: .5rem .85rem; font-size: .78rem; color: var(--muted); }
.rh-fact b { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }

/* ── The price comparison ────────────────────────────────────────────── */
.rh-near { display:flex; gap:.9rem; align-items:center; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1rem; margin:0 0 1.2rem; }
.rh-near .rh-near-btn { min-height:0; padding:.5rem 1rem; font-size:.95rem; border-radius:8px; }
/* display:flex would otherwise beat the hidden attribute, which is how the
   radius chips showed before any location had been granted. */
.rh-near-radius { display:flex; gap:.35rem; flex-wrap:wrap; }
.rh-near-radius[hidden], .rh-near-btn[hidden] { display:none !important; }
.rh-near-radius a { border:1px solid var(--line); border-radius:999px; padding:.22rem .7rem;
  font-size:.85rem; text-decoration:none; color:var(--text); background:var(--panel2); }
.rh-near-radius a[aria-current="true"] { background:var(--accent); color:#fff; border-color:var(--accent); }
.rh-near small { color:var(--muted); font-size:.85rem; }
.rh-near[hidden] { display:none !important; }
.rh-cities { margin:0 0 1.3rem; color:var(--muted); font-size:.92rem; }
.rh-cities a { display:inline-block; margin:0 .3rem .35rem 0; padding:.2rem .65rem;
  border:1px solid var(--line); border-radius:999px; background:var(--panel2); text-decoration:none; }
.rh-cities a[aria-current="page"] { background:var(--accent); color:#fff; border-color:var(--accent); }
td.rh-dist, th.rh-dist { text-align:right; white-space:nowrap; color:var(--accent2); font-weight:700; }
.rh-flag { color:var(--warn); font-size:.72rem; font-weight:800; margin-left:.35rem; white-space:nowrap; }
.rh-sub { display:block; color:var(--muted); font-size:.82rem; font-weight:400; }

/* ── Phones ──────────────────────────────────────────────────────────────
   sub.css has NO breakpoint at all, on any of its 57 hosts, so a seven-column
   comparison simply ran off the side of a 375px screen. Each row becomes one
   block, and every figure keeps its column heading through the data-l
   attribute tlSubTable() now writes. */
@media (max-width: 680px) {
  body.rh-v2 .scroll { overflow: visible; }
  body.rh-v2 table.data,
  body.rh-v2 table.data tbody,
  body.rh-v2 table.data tr,
  body.rh-v2 table.data td,
  body.rh-v2 table.data th { display: block; width: auto; }
  body.rh-v2 table.data thead { display: none; }
  body.rh-v2 table.data tr { border:1px solid var(--line); border-radius:12px;
    background:var(--panel); padding:.8rem .95rem; margin:0 0 .65rem; }
  body.rh-v2 table.data td,
  body.rh-v2 table.data th { border:0; padding:.14rem 0; text-align:left !important; white-space:normal; }
  body.rh-v2 table.data th[scope="row"] { font-size:1rem; padding-bottom:.3rem; }
  /* Put the column heading back, as a caption above the figure. */
  body.rh-v2 table.data td[data-l]::before { content: attr(data-l); display:block;
    font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--muted); font-weight:700; }
  /* The short numeric cells sit side by side rather than one per line. */
  body.rh-v2 table.data td.n,
  body.rh-v2 table.data td.rh-dist { display:inline-block; margin:.25rem 1.3rem .1rem 0; }
  body.rh-v2 .rh-near { gap:.6rem; }
  body.rh-v2 .rh-near small { flex-basis:100%; }
}

/* ── The price distribution ──────────────────────────────────────────────
   One hero number, the shape behind it, three kitchens to act on. The table
   is still there, folded, because it is the detail behind the answer rather
   than the answer. Colours: accent #7a2e3a at 8.2:1 on this surface and the
   de-emphasis #6b6758 at 5.1:1, both measured, not guessed. */
.rh-hero { display: flex; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
/* The direct child only: the fact cards live inside .rh-hero too, and a
   bare `.rh-hero b` gave each of them the headline's 59px. */
.rh-hero > .rh-hero-n > b { font-size: clamp(2.6rem, 7vw, 3.7rem); line-height: 1;
  letter-spacing: -.04em; font-weight: 800; }
.rh-hero .rh-hero-n { display: flex; flex-direction: column; }
.rh-hero span { color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin-top: .45rem; }

/* Every block on these pages is one card, so the page reads as a stack of
   answers rather than a column of running text. */
body.rh-v2 .rh-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 1.3rem 1.4rem; margin: 0 0 1.1rem; box-shadow: var(--card-shadow); }
body.rh-v2 .rh-card > h2 { margin: 0 0 .2rem; font-size: 1.28rem; }
body.rh-v2 .rh-card > .rh-sub-note { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }

figure.rh-chart { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 .2rem; }
figure.rh-chart figcaption { color: var(--muted); font-size: .8rem; padding: .35rem 0 0; margin: 0; }

/* The size groups were two stacked sections a reader had to understand before
   they could look at anything. One switch, and only the matching group is
   shown. Radio inputs, so it works with CSS alone and a crawler sees both. */
.rh-sizes { display: inline-flex; background: var(--panel2); border-radius: 13px; padding: 4px; gap: 4px;
  margin: 0 0 1rem; flex-wrap: wrap; }
.rh-sizes label { border-radius: 10px; padding: .45rem .9rem; font-size: .83rem; font-weight: 700;
  color: var(--muted); cursor: pointer; white-space: nowrap; }
.rh-sizes input { position: absolute; opacity: 0; width: 0; height: 0; }
.rh-sizes input:checked + label { background: var(--panel); color: var(--text);
  box-shadow: 0 1px 3px rgba(25,47,35,.14); }
.rh-sizes input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.rh-chart-narrow { display: none; }
@media (max-width: 640px) {
  /* One viewBox cannot serve 830px and 310px: scaled down, an 11px axis label
     rendered about 4px. The phone gets its own taller geometry instead. */
  .rh-chart-wide { display: none; }
  .rh-chart-narrow { display: block; }
  .rh-hero > .rh-hero-n > b { font-size: 2.4rem; }
}

.rh-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.2rem 0 0; }
.rh-pick { display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 1rem 1.05rem; text-decoration: none; color: var(--text); }
.rh-pick:hover { border-color: var(--accent); }
.rh-pick b { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; margin: .4rem 0 .15rem; }
.rh-pick-l { display: block; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; }
.rh-pick-n { display: block; font-size: .92rem; }
.rh-pick-loc { color: var(--muted); font-size: .8rem; }
.rh-pick-u { display: block; color: var(--muted); font-size: .82rem; margin-top: .1rem; }
.rh-pick-w { display: block; color: var(--muted); font-size: .76rem; margin-top: .35rem; }
@media (max-width: 640px) { .rh-picks { grid-template-columns: 1fr; } }

details.rh-all { background: none; border: 0; border-radius: 0; padding: 0; margin: .6rem 0 0; }
details.rh-all > summary { cursor: pointer; padding: .7rem 1rem; font-weight: 700; font-size: .85rem;
  border: 1px solid var(--line); border-radius: 12px; display: inline-block; background: var(--panel); }
details.rh-all > summary:hover { border-color: var(--accent); }
details.rh-all .scroll { margin-top: .8rem; }

/* ── The ranked list ──────────────────────────────────────────────────────
   The table answered "list every price"; a reader scanning it still had to
   work out where each price sat. Each row now carries a bar showing its
   place between the cheapest and the dearest, so the shape of the market is
   legible in the list as well as in the chart above it. */
.rh-rank { margin: .2rem 0 0; }
.rh-row { display: grid; grid-template-columns: 34px minmax(0,1fr) 92px auto;
  gap: .9rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--text); }
.rh-row:first-child { border-top: 0; }
.rh-row:hover .rh-row-n { text-decoration: underline; }
.rh-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--panel2);
  display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: var(--green); }
/* The whole row is one link, so sub.css paints every part of it in the
   link colour — a price in accent red reads as a warning. */
.rh-row, .rh-row:visited { color: var(--text); }
.rh-row-n { font-weight: 700; font-size: .95rem; color: var(--text); }
.rh-row-m { display: block; color: var(--muted); font-size: .76rem; margin-top: .1rem; }
svg.rh-bar { display: block; width: 100%; height: 6px; }
svg.rh-bar .rh-bar-t { fill: var(--panel2); }
svg.rh-bar .rh-bar-f { fill: var(--green-light); }
.rh-row-p { font-weight: 800; font-size: 1.05rem; text-align: right; letter-spacing: -.02em; color: var(--text);
  white-space: nowrap; }
.rh-row-p small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted);
  letter-spacing: 0; }
@media (max-width: 680px) {
  .rh-row { grid-template-columns: 30px minmax(0,1fr) auto; gap: .7rem; }
  .rh-mark { width: 30px; height: 30px; }
  .rh-bar { grid-column: 2 / -1; }
  body.rh-v2 .rh-card { padding: 1.05rem 1.05rem; border-radius: 18px; }
  body.rh-v2 .sub-head .head-row { gap: .6rem; }
  /* The bar holds the back pair, the brand and the language control on
     375px; the nav links collided with the brand. sub.css already puts
     a bottom tab bar on this width, which is where they are. */
  body.rh-v2 .sub-head nav { display: none; }
  body.rh-v2 .rh-band .wrap { padding: 1.15rem 0 1.25rem; }
  .rh-facts { gap: .45rem; }
  .rh-fact { padding: .4rem .7rem; }
}

/* The in-app back/forward pair sits in the green bar on phones, where
   sub.css gives it a light panel face that reads as two holes punched in
   the brand colour. */
@media (max-width: 719px) {
  body.rh-v2 .tl-back, body.rh-v2 .tl-forward {
    background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff;
    flex-basis: 36px; width: 36px; height: 36px;
  }
}

/* The band paints full width from inside a width-limited <main>, through a
   pseudo-element rather than a 100vw box: a 100vw child is wider than the
   viewport whenever a scrollbar is present, which is a horizontal scroll on
   every desktop page. */
body.rh-v2 .rh-band { position: relative; margin: -28px 0 1.3rem; padding: 1.6rem 0 1.7rem; }
body.rh-v2 .rh-band::before { content: ''; position: absolute; inset: 0 50% 0 50%;
  width: 100vw; margin-left: -50vw; background: var(--cream);
  border-bottom: 1px solid var(--line); z-index: -1; }
body.rh-v2 .rh-band .rh-band-in { position: relative; }

/* The location block is one card: the city chips and "near me" answer the
   same question and were two loose rows between two cards. */
body.rh-v2 .rh-where .rh-cities { margin: 0; }
body.rh-v2 .rh-where .rh-near { margin: 0 0 .9rem; background: none; border: 0; padding: 0; }
body.rh-v2 .rh-near .button { background: var(--orange); border-color: var(--orange); border-radius: 12px; }
body.rh-v2 .rh-near .button:hover { background: var(--accent); border-color: var(--accent); }