/* ==========================================================================
   IREVIEW DEMO

   A working miniature of iReview, with three live screens: the discovery
   home with its recent-activity feed, the browse page with working filters,
   and a business profile with its rating breakdown and reviews.

   Written rather than ported, but measured off the running product at
   local.ireview.com and read against its source in
   C:\laragon\www\ireviews_api_react\src\components\LocalIreview:

     Hero/Hero.js                 the eyebrow, the rotating headline pairs,
                                  the search placeholder, "Get Current
                                  Location", "Detecting..."
     Header/Header.js             the location pill, "Search Anything",
                                  "Saved"
     BrowsePage/browseConfig.js   STAR_OPTIONS, REVIEW_COUNT_OPTIONS,
                                  STATUS_OPTIONS and SORT_OPTIONS, verbatim
     BrowsePage/BrowseFilters.js  the filter panel labels
     BusinessPage/*.js            the trust banner, the action row, the
                                  rating breakdown, About, Review Summary
                                  and the Address / Working Hours sidebar
     RecentActivity/RecentActivity.js  the feed

   The palette is the running site's own, sampled by frequency of use:
   #1f2d3a ink (541 elements), #faaf00 stars (445), #707070 muted, #3281c4
   blue, #01a4d1 cyan, #eaf3fa soft. Type is Poppins, the family the site
   sets on 386 of its 400 text nodes, with Inter behind it because this site
   does not load Poppins.

   Every business, review and reviewer here is invented. The real product
   shows real Texas venues with real Google profile photos, and neither
   belongs on a marketing page.

   Everything is namespaced .irv-* and scoped under .irv-demo.
   ========================================================================== */

.irv-demo {
  --irv-ink: #1f2d3a;
  --irv-muted: #707070;
  --irv-faint: #98a4b0;
  --irv-gold: #faaf00;
  --irv-blue: #3281c4;
  --irv-cyan: #01a4d1;
  --irv-link: #0078a8;
  --irv-green: #34a353;
  --irv-red: #d94a3d;
  --irv-soft: #eaf3fa;
  --irv-panel: #f9f9f9;
  --irv-panel-2: #f5f7f9;
  --irv-line: #eef0f3;
  --irv-line-2: #e0e3e7;

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--irv-ink);
  background: #fff;
  text-align: left;
  overflow: hidden;
}
.irv-demo *,
.irv-demo *::before,
.irv-demo *::after { box-sizing: border-box; }
.irv-demo,
.irv-demo :where(button) { cursor: default; font: inherit; color: inherit; }
.irv-demo :where(button) { background: none; border: 0; padding: 0; text-align: left; }
.irv-demo [data-irv] { cursor: pointer; }

/* ---------------- header ---------------- */
.irv-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  padding: 10px 20px;
  border-bottom: 1px solid var(--irv-line);
  background: #fff;
}
.irv-head__logo { height: 30px; width: auto; flex: none; }
.irv-head__div { width: 1px; height: 24px; background: var(--irv-line-2); flex: none; }
.irv-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.irv-loc svg { width: 15px; height: 15px; color: var(--irv-ink); }
.irv-loc__caret { width: 11px; height: 11px; color: var(--irv-muted); }
.irv-head__search {
  flex: 1;
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid #cfe0ee;
  border-radius: 7px;
  color: #9aa5b0;
  font-size: 12.5px;
}
.irv-head__search svg { width: 15px; height: 15px; margin-left: auto; color: var(--irv-muted); }
.irv-head__spacer { flex: 1; }
.irv-ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #f0c351;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
}
.irv-ask svg { width: 15px; height: 15px; color: var(--irv-gold); }
.irv-hbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--irv-line);
  border-radius: 8px;
  background: var(--irv-panel);
  font-size: 12.5px;
  font-weight: 500;
}
.irv-hbtn svg { width: 14px; height: 14px; }
.irv-hbtn--icon { padding: 8px 10px; }

/* ---------------- the scrolling body ---------------- */
.irv-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* ---------------- hero ---------------- */
.irv-hero {
  position: relative;
  flex: none;
  min-height: 320px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #14262c;
}
.irv-hero__img {
  position: absolute;
  inset: 0 0 0 38%;
  background-size: cover;
  background-position: center 22%;
}
/* The photo runs under the copy and fades into the dark, the way the live
   hero does, so the headline never sits on busy pixels. */
.irv-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #14262c 0%, #14262c 34%, rgba(20, 38, 44, 0.72) 46%, rgba(20, 38, 44, 0) 62%);
}
.irv-hero__in {
  position: relative;
  padding: 26px 20px 26px 34px;
  max-width: 660px;
  border-left: 2px solid var(--irv-cyan);
  margin-left: 20px;
}
.irv-hero__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.irv-hero__h1 {
  margin: 0 0 16px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}
.irv-hero__h1 span { display: block; }
.irv-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 14px;
}
.irv-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  transition: color 0.15s ease;
}
.irv-cat:hover { color: var(--irv-gold); }
.irv-cat svg { width: 11px; height: 11px; opacity: 0.8; }
.irv-hero__find {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #fff;
  color: #8d959c;
  font-size: 13.5px;
  margin-bottom: 12px;
}
.irv-hero__find svg { width: 17px; height: 17px; margin-left: auto; color: var(--irv-ink); }
.irv-hero__near { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cfd8dd; }
.irv-hero__near b { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; }
.irv-hero__near svg { width: 13px; height: 13px; }

/* ---------------- section frame ---------------- */
.irv-sec { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px 20px; }
.irv-sec__head { display: flex; align-items: center; gap: 10px; flex: none; margin-bottom: 10px; }
.irv-sec__t { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.irv-sec__side { margin-left: auto; font-size: 12px; color: var(--irv-muted); }

/* ---------------- recent activity feed ---------------- */
.irv-feed {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  overflow: hidden;
}
.irv-rev {
  display: flex;
  flex-direction: column;
  padding: 13px 14px;
  border: 1px solid var(--irv-line);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.irv-rev:hover { border-color: #cfe0ee; box-shadow: 0 8px 20px -16px rgba(31, 45, 58, 0.5); }
.irv-rev__top { display: flex; align-items: center; gap: 9px; flex: none; margin-bottom: 8px; }
.irv-av {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--irv-av, var(--irv-soft));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.irv-rev__who { min-width: 0; }
.irv-rev__name { display: block; font-size: 12.5px; font-weight: 600; }
.irv-rev__when { display: block; font-size: 10.5px; color: var(--irv-muted); }
.irv-stars { display: inline-flex; gap: 1px; color: var(--irv-gold); flex: none; }
.irv-stars svg { width: 13px; height: 13px; }
.irv-stars--sm svg { width: 11px; height: 11px; }
.irv-stars--lg svg { width: 18px; height: 18px; }
.irv-stars .is-off { color: #dfe3e7; }
.irv-rev__biz {
  display: block;
  flex: none;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--irv-link);
}
.irv-rev__text {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.6;
  color: #4a5560;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.irv-rev__acts {
  display: flex;
  gap: 14px;
  flex: none;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--irv-line);
  font-size: 11px;
  color: var(--irv-muted);
}
.irv-rev__acts span { display: inline-flex; align-items: center; gap: 5px; }
.irv-rev__acts svg { width: 12px; height: 12px; }

/* ---------------- browse ---------------- */
.irv-chips {
  display: flex;
  gap: 8px;
  flex: none;
  padding: 10px 20px;
  border-bottom: 1px solid var(--irv-line);
  overflow: hidden;
}
.irv-chip {
  flex: none;
  padding: 6px 13px;
  border: 1px solid var(--irv-line-2);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  color: var(--irv-muted);
  transition: all 0.15s ease;
}
.irv-chip:hover { color: var(--irv-ink); border-color: #b9c6d2; }
.irv-chip.is-on { background: var(--irv-ink); border-color: var(--irv-ink); color: #fff; }

.irv-browse { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 14px 20px; overflow: hidden; }
.irv-filters {
  flex: none;
  width: 218px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.irv-filters__head { display: flex; align-items: center; gap: 8px; }
.irv-filters__t { font-size: 14px; font-weight: 700; }
.irv-filters__reset { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--irv-link); }
.irv-fgroup__t {
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--irv-ink);
}
.irv-fopts { display: flex; flex-wrap: wrap; gap: 6px; }
.irv-fopt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 11px;
  border: 1px solid var(--irv-line-2);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--irv-muted);
  transition: all 0.15s ease;
}
.irv-fopt:hover { border-color: #b9c6d2; color: var(--irv-ink); }
.irv-fopt svg { width: 11px; height: 11px; color: var(--irv-gold); }
.irv-fopt.is-on { background: var(--irv-soft); border-color: var(--irv-blue); color: var(--irv-blue); }

.irv-results { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.irv-results__head { display: flex; align-items: center; gap: 8px; flex: none; margin-bottom: 10px; }
.irv-results__n { font-size: 12.5px; font-weight: 600; }
.irv-results__n b { color: var(--irv-muted); font-weight: 500; }
.irv-sort {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--irv-line-2);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
}
.irv-sort svg { width: 11px; height: 11px; color: var(--irv-muted); }
.irv-list { flex: 1; min-height: 0; display: grid; gap: 9px; align-content: start; overflow: hidden; }
.irv-item {
  display: flex;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid var(--irv-line);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.irv-item:hover { border-color: #cfe0ee; box-shadow: 0 8px 20px -16px rgba(31, 45, 58, 0.5); }
.irv-thumb {
  flex: none;
  width: 74px;
  height: 74px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--irv-line);
}
.irv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.irv-item__body { flex: 1; min-width: 0; }
.irv-item__name { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.irv-item__rate { display: flex; align-items: center; gap: 7px; margin: 3px 0 5px; font-size: 11.5px; }
.irv-item__rate b { font-weight: 700; }
.irv-item__rate span { color: var(--irv-muted); }
.irv-item__meta { display: block; font-size: 11px; color: var(--irv-muted); }
.irv-item__meta em { font-style: normal; color: var(--irv-red); font-weight: 600; }
.irv-item__meta em.is-open { color: var(--irv-green); }
.irv-item__url { display: block; font-size: 10.5px; color: var(--irv-link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.irv-item__side { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.irv-tiny {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--irv-line-2);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.irv-tiny svg { width: 12px; height: 12px; color: var(--irv-muted); }
.irv-tiny--blue { background: var(--irv-blue); border-color: var(--irv-blue); color: #fff; }
.irv-tiny--blue svg { color: #fff; }

/* ---------------- business page ---------------- */
.irv-biz { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 14px 20px; overflow: hidden; }
.irv-biz__main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.irv-biz__side { flex: none; width: 260px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }

.irv-gallery { display: flex; gap: 8px; flex: none; height: 112px; margin-bottom: 10px; }
.irv-shot {
  border-radius: 8px;
  overflow: hidden;
  background: var(--irv-line);
}
.irv-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.irv-shot--big { flex: 1.6; }
.irv-shot--col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
.irv-shot--col > .irv-shot { flex: 1; min-height: 0; }
.irv-map {
  flex: 1.3;
  border-radius: 8px;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    repeating-linear-gradient(58deg, #f6efd8 0 3px, transparent 3px 26px),
    repeating-linear-gradient(-32deg, #f6efd8 0 3px, transparent 3px 34px),
    #eef4ea;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.irv-map__pin { width: 26px; height: 26px; color: var(--irv-cyan); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); position: relative; }
/* The live map prints the place name across the tile behind the pin. */
.irv-map__city {
  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa7b4;
}
.irv-map__addr {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 10.5px;
  line-height: 1.4;
}
.irv-map__addr b { display: block; font-size: 11px; }
.irv-map__addr span { color: var(--irv-muted); }

.irv-biz__title { flex: none; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 9px; }
.irv-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-bottom: 10px;
  padding: 10px 13px;
  border-radius: 8px;
  background: var(--irv-soft);
  font-size: 12px;
  font-weight: 500;
}
.irv-trust svg { flex: none; width: 16px; height: 16px; color: var(--irv-blue); }
.irv-trust__chev { margin-left: auto; width: 13px; height: 13px; color: var(--irv-muted); transition: transform 0.2s ease; }
.irv-trust.is-open .irv-trust__chev { transform: rotate(180deg); }
.irv-trust__more {
  flex: none;
  margin: -6px 0 10px;
  padding: 11px 13px;
  border: 1px solid var(--irv-line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  font-size: 11.5px;
  line-height: 1.65;
  color: #4a5560;
}
.irv-trust__more p { margin: 0 0 7px; }
.irv-trust__more p:last-child { margin: 0; }

.irv-acts { display: flex; gap: 8px; flex: none; margin-bottom: 12px; }
.irv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--irv-line-2);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  transition: filter 0.15s ease;
}
.irv-btn svg { width: 14px; height: 14px; }
.irv-btn--blue { background: var(--irv-blue); border-color: var(--irv-blue); color: #fff; }
.irv-btn--blue:hover { filter: brightness(1.08); }

.irv-rating { display: flex; align-items: center; gap: 22px; flex: none; margin-bottom: 12px; }
.irv-rating__l { flex: none; }
.irv-rating__t { display: block; font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.irv-rating__n { display: block; font-size: 12.5px; margin-top: 2px; }
.irv-rating__n b { font-weight: 700; }
.irv-rating__n span { color: var(--irv-muted); }
.irv-bars { flex: 1; min-width: 0; display: grid; gap: 4px; }
.irv-bar { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--irv-muted); }
.irv-bar > span:first-child { flex: none; width: 48px; }
.irv-bar__track { flex: 1; height: 6px; border-radius: 99px; background: var(--irv-line); overflow: hidden; }
.irv-bar__track i { display: block; height: 100%; border-radius: 99px; background: var(--irv-gold); transition: width 0.3s ease; }

.irv-h3 { flex: none; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 7px; }
.irv-tags { display: flex; flex-wrap: wrap; gap: 6px; flex: none; margin-bottom: 8px; }
.irv-tag {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--irv-panel-2);
  font-size: 10.5px;
  font-weight: 500;
  color: #4a5560;
}
.irv-about { flex: none; font-size: 11.5px; line-height: 1.7; color: #4a5560; margin-bottom: 10px; }
.irv-summary {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--irv-panel);
  border: 1px solid var(--irv-line);
  font-size: 11.5px;
  line-height: 1.65;
  color: #4a5560;
}
.irv-summary svg { flex: none; width: 17px; height: 17px; color: var(--irv-gold); }
.irv-biz__scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

.irv-card {
  flex: none;
  padding: 12px 14px;
  border: 1px solid var(--irv-line);
  border-radius: 10px;
  background: #fff;
}
.irv-card__t {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--irv-muted);
  margin-bottom: 3px;
}
.irv-card__v { display: block; font-size: 12.5px; font-weight: 600; color: var(--irv-link); word-break: break-word; }
.irv-card + .irv-card { margin-top: 0; }
.irv-card__row + .irv-card__row { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--irv-line); }
.irv-hours { background: var(--irv-panel-2); border-color: var(--irv-panel-2); }
.irv-hours b { display: block; font-size: 12px; color: var(--irv-red); }
.irv-hours b.is-open { color: var(--irv-green); }
.irv-hours span { display: block; font-size: 13px; font-weight: 600; }
.irv-claim {
  display: block;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--irv-line-2);
  border-radius: 7px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}
.irv-also { display: grid; gap: 8px; }
.irv-also__i { display: flex; align-items: center; gap: 9px; }
.irv-also__th {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--irv-line);
}
.irv-also__th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.irv-also__n { display: block; font-size: 11.5px; font-weight: 600; }
.irv-also__r { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--irv-muted); }

/* the review list on the business page */
.irv-revs { flex: 1; min-height: 0; display: grid; gap: 9px; align-content: start; overflow: hidden; }
.irv-revl {
  padding: 11px 13px;
  border: 1px solid var(--irv-line);
  border-radius: 9px;
}
.irv-revl__top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.irv-revl__text { font-size: 11.5px; line-height: 1.65; color: #4a5560; }

/* ---------------- narrow ---------------- */
@media (max-width: 1180px) {
  .irv-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .irv-biz__side { width: 210px; }
  .irv-hero__h1 { font-size: 32px; }
  .irv-head__search { display: none; }
}
@media (max-width: 900px) {
  .irv-demo { font-size: 11px; }
  .irv-head { padding: 8px 12px; gap: 9px; }
  .irv-head__logo { height: 24px; }
  .irv-loc, .irv-hbtn, .irv-head__div { display: none; }
  .irv-hero { min-height: 260px; }
  .irv-hero__img { inset: 0 0 0 20%; }
  .irv-hero__veil { background: linear-gradient(90deg, #14262c 0%, #14262c 46%, rgba(20, 38, 44, 0.8) 62%, rgba(20, 38, 44, 0.2) 100%); }
  .irv-hero__in { padding: 18px 14px; margin-left: 10px; max-width: none; }
  .irv-hero__h1 { font-size: 26px; }
  .irv-cats { gap: 10px; }
  .irv-cat { font-size: 11.5px; }
  .irv-sec, .irv-browse, .irv-biz { padding: 11px 12px; }
  .irv-feed { grid-template-columns: minmax(0, 1fr); }
  .irv-filters { display: none; }
  .irv-biz__side { display: none; }
  .irv-gallery { height: 96px; }
  .irv-biz__title { font-size: 19px; }
}

/* The mockup is absolutely positioned, so the laptop screen has nothing to
   size to. The pane is what holds it open. */
.kore-demo__pane[data-demo-pane="ireview"] { min-height: 880px; }
@media (max-width: 900px) {
  .kore-demo__pane[data-demo-pane="ireview"] { min-height: 640px; }
}


/* The category rail is one line of chips wider than any phone. It was set to
   overflow: hidden, so in a phone window everything past the third chip was
   simply gone. Scrolling it keeps the whole set reachable, and bleeding it to
   the edges is what says there is more to the right. */
@media (max-width: 900px) {
  .irv-chips {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-inline: 14px;
    scrollbar-width: none;
  }
  .irv-chips::-webkit-scrollbar {
    display: none;
  }
  .irv-chip {
    scroll-snap-align: start;
  }
}