/* ============================================================
   Lighting — the manufacturer's own product page.

   This page shows Rotaliana's Sol F1, so it is laid out and dressed
   like Rotaliana's page for it:

     https://www.rotaliana.it/en/products/floor/sol/

   Copied from that page: the two stacked header strips, the warm
   off-whites (#F4F2ED and #E3DED3), the brand red, the breadcrumb,
   the 30px/24px/20px/16px heading scale, hairline dividers with no
   radius and no shadow, uppercase text-only buttons tracked at 1.5px,
   underline-only form fields, the leader-dot download list — and the
   words: the description, the data sheet, the download names and
   sizes, the section titles.

   Not copied: everything on their page that leads somewhere else.
   This is one page — one lamp, configured — so the company menu, the
   language switcher, the search, the Products / Designers / Resellers
   sections, the "Collection" and "You may also like" rows and the
   four columns of footer links are all absent rather than drawn as
   dead ends. What is left of the chrome is the mark, the breadcrumb
   as text, and the one section this page is.

   Not copied: Theinhardt, which is licensed. It is named first in the
   stack so a machine that has it uses it, and Inter carries the rest
   at the same tracking.

   What is ours is the middle of the page: where their slideshow was,
   a live 3D configurator — half the viewport, on the left, sticky
   while the copy beside it scrolls. It reads as the page's hero
   image, which is what it replaces.

   Loaded AFTER common/css/configurator.css and overriding it: the
   shared engine's DOM is unchanged, so `#scene`, `#panel`, `#picker`
   and the rest are all still there — they are simply dressed as this
   manufacturer's page rather than as the studio's dark cockpit. The
   studio's own sheets (share, save, sessions) stay dark on purpose:
   they belong to Immersive Studio, not to the product page.
   ============================================================ */

:root {
  --rl-ink:        #000000;
  --rl-ink-2:      #1d1d1d;
  --rl-muted:      #666666;
  --rl-faint:      #999999;
  --rl-paper:      #ffffff;
  --rl-warm:       #f4f2ed;  /* bg-almost-white   */
  --rl-warm-2:     #e3ded3;  /* bg-almost-white-2 */
  --rl-line:       #e5e5e5;
  --rl-line-firm:  #cdcac2;
  --rl-red:        #fe4e56;  /* the wordmark, and the one accent */
  --rl-sans:       'Theinhardt', 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Their tracking, as a ratio: 1px at 18px. Every uppercase micro-label
     doubles it, as the reference does. */
  --rl-track:      0.055em;

  /* The sticky header: their two 50px strips, plus the breadcrumb strip
     the app bar became. Everything that has to sit under it — the render,
     every in-page anchor — is offset by this plus the studio bar. */
  --rl-head-h:     138px;
  --rl-chrome:     calc(var(--is-topbar-h) + var(--rl-head-h));

  /* The page's own gutter, which is the reference's .uk-container. */
  --rl-gutter:     clamp(1.25rem, 3vw, 2.5rem);
}

/* ── The document ───────────────────────────────────────── */

/* configurator.css builds a cockpit: full height, no scroll, black.
   A product page is a document. */
html, body { height: auto; }

body {
  overflow: visible;
  background: var(--rl-paper);
  color: var(--rl-ink);
  font-family: var(--rl-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--rl-track);
}

/* The studio frame stays black and stays on top; it is the one element
   every page in this repository carries. */
.studio-topbar { position: sticky; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--rl-red); }

/* The reference scrolls to its own anchors; these are the same three
   ("Information request", "Download", and our Configurator) and they have
   to clear the sticky header when they arrive. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--rl-chrome) + 1rem); }

h1, h2 { font-size: 30px; font-weight: 400; line-height: 1.3; }
h3 { font-size: 24px; font-weight: 400; line-height: 1.4; color: var(--rl-ink-2); }
h4 { font-size: 20px; font-weight: 400; line-height: 1.4; }
h5 { font-size: 16px; font-weight: 300; line-height: 1.4; }

.rl-fs12 { font-size: 12px; line-height: 1.5; }

/* Their button: no box at all — uppercase, tracked wider, with a rule
   under it on hover. */
.rl-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: none;
  color: var(--rl-ink);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 32px;
  cursor: pointer;
}
.rl-button:hover { color: var(--rl-red); }
.rl-button::after { content: '›'; font-size: 18px; line-height: 1; }
.rl-button--plain::after { content: none; }

/* ── The brand header ───────────────────────────────────── */

.rl-head {
  position: sticky;
  top: var(--is-topbar-h);
  z-index: 60;
  background: var(--rl-warm);
}

.rl-head__strip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 var(--rl-gutter);
}

/* Second strip: the one section this page is, centred and uppercase as
   their whole menu is. */
.rl-head__main {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-head__sections {
  display: flex;
  gap: 2.2rem;
  list-style: none;
  font-size: 15.75px;
  text-transform: uppercase;
  color: var(--rl-muted);
}
.rl-head__sections a:hover,
.rl-head__sections [aria-current="page"] { color: var(--rl-ink); }

/* ── The utility strip: breadcrumb, and the studio's menus ── */

/* This is the shared engine's `.appbar`, which on the dark pages is a
   navigation bar with the product's name in it. Here the product names
   itself under the render and the way back is a breadcrumb, so the bar
   keeps only what has nowhere else to go: the revision, the session
   badge, and the menus. */
.appbar {
  position: static;
  height: auto;
  min-height: 38px;
  padding: 0 var(--rl-gutter);
  gap: 1rem;
  background: var(--rl-paper);
  border-bottom: 1px solid var(--rl-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The title moved into the page (see `.rl-stage__title`), so the bar's
   copy of it would be the same words twice. */
.appbar__titles { display: none; }

/* Breadcrumb, then the way back, then the studio's own controls at the far
   end — which is the order the words are in, not the order the engine's
   markup happens to be in. */
.appbar__trail { order: 3; margin-left: auto; }
.appbar__trail .revision {
  border: 0;
  background: none;
  color: var(--rl-faint);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: none;
}

.rl-crumbs {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
  font-size: 12px;
  color: var(--rl-muted);
}
.rl-crumbs li + li::before { content: '|'; margin-right: 0.55rem; color: var(--rl-line-firm); }
.rl-crumbs [aria-current="page"] { color: var(--rl-ink); }

/* The engine's way back to the catalog, in the breadcrumb's own voice.
   It stays a button because that is what it is — it opens the picker —
   and it is hidden while the catalog holds a single lamp, because then
   the picker is a screen with one card on it and this page is already
   that card. `lighting.js` sets the class. */
body.is-single-product .appbar__back { display: none; }
.appbar__back {
  order: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--rl-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.appbar__back:hover { color: var(--rl-red); background: none; border-color: transparent; }
.appbar__chevron { font-size: 14px; }

/* ── The product: render on the left, copy on the right ──── */

.rl-product {
  display: grid;
  /* minmax(0, …) rather than 1fr: a bare `1fr` floors the column at its
     content's min-content width, and the data sheet's widest row ("6.820
     up + 1.980 down") is wider than a phone — which would widen the grid,
     the document and every centred line on it. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

/* Half the viewport, and it stays there while the column beside it
   scrolls — the reference's hero image is at the top of the page and
   this one has to be legible next to whichever paragraph you are
   reading, because it is the thing the paragraphs are about. */
.rl-stage {
  position: sticky;
  top: var(--rl-chrome);
  height: calc(100vh - var(--rl-chrome));
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rl-line);
  background: var(--rl-warm);
}

/* Was fixed and full-bleed; now it is simply the top of that column.
   `Stage` sizes itself off the canvas box with a ResizeObserver, so
   there is nothing to tell it. */
#scene {
  position: static;
  inset: auto;
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}

.rl-stage__foot {
  flex: none;
  padding: 0.75rem var(--rl-gutter) 1.5rem;
  text-align: center;
}

/* The catalog's own compositions, in the place — and the manner — of
   the reference's slideshow navigation. */
.viewpoints {
  position: static;
  transform: none;
  max-width: none;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1rem;
}
.viewpoints .ui-pill {
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--rl-muted);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.viewpoints .ui-pill:hover { color: var(--rl-ink); border-bottom-color: var(--rl-line-firm); }
.viewpoints .ui-pill[aria-current="true"] {
  background: none;
  border-bottom-color: var(--rl-ink);
  color: var(--rl-ink);
  font-weight: 700;
}

/* "Sol | Floor", under the render, as the reference sets it. */
.rl-stage__title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
}
.rl-stage__title h1 { font-size: 30px; line-height: 1; }
.rl-stage__category { font-size: 18px; color: var(--rl-muted); }
.rl-stage__category::before { content: '|'; margin-right: 0.6rem; color: var(--rl-line-firm); }
.appbar__subtitle,
.rl-stage__summary {
  margin-top: 0.6rem;
  font-size: 14px;
  color: var(--rl-muted);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── The column of copy ─────────────────────────────────── */

.rl-copy { min-width: 0; }

.rl-band {
  padding: 2.5rem var(--rl-gutter);
  border-bottom: 1px solid var(--rl-line);
}
.rl-band--warm { background: var(--rl-warm); border-bottom: 0; }
.rl-band--warm-2 { background: var(--rl-warm-2); border-bottom: 0; }
.rl-band > * + * { margin-top: 1.2rem; }
.rl-band h3 + * { margin-top: 1.2rem; }

.rl-lede { font-size: 18px; line-height: 1.5; }

/* The three shortcuts the reference puts in a warm strip under the
   hero: who designed it, and the two things further down the page. */
.rl-highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 2rem;
  padding: 1.1rem var(--rl-gutter);
  background: var(--rl-warm);
  font-size: 16px;
  font-weight: 300;
}
.rl-highlights > * + * { margin-top: 0; }
.rl-highlights__designer h4 { font-size: 20px; }
.rl-highlights__link { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Items — the reference's tab strip over the data sheet. One item
   today; the engine's catalog decides how many, so it is built from it
   rather than written here. See lighting/js/lighting.js. */
.rl-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 1.5rem;
}
.rl-items button {
  padding: 5px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--rl-muted);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.rl-items button[aria-current="true"] { color: var(--rl-ink); font-weight: 700; border-bottom-color: var(--rl-ink); }

/* Their data sheet: two columns, hairline under each row, values right. */
.rl-sheet {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  font-size: 14px;
  letter-spacing: 1px;
}
.rl-sheet td { padding: 10px 12px; border-bottom: 1px solid var(--rl-line); }
.rl-sheet td:first-child { padding-left: 0; font-weight: 700; }
.rl-sheet td:last-child { padding-right: 0; text-align: right; }

/* Downloads, with the leader dots the reference draws between the name
   and the size. A dotted rule on a stretching middle column is the same
   drawing and needs no fill string. */
.rl-downloads { list-style: none; }
.rl-downloads li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 16px;
}
.rl-downloads__name { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.rl-downloads__leader { flex: 1; border-bottom: 1px dotted var(--rl-faint); transform: translateY(-0.3em); }
.rl-downloads__size { flex: none; color: var(--rl-muted); font-size: 14px; }

/* The information request, in their idiom: stacked labels, and fields
   that are a single underline. */
.rl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.rl-form__field { display: flex; flex-direction: column; gap: 0.2rem; }
.rl-form__field--wide { grid-column: 1 / -1; }
.rl-form label { font-size: 15.75px; color: #333; }
.rl-form input,
.rl-form select,
.rl-form textarea {
  height: 40px;
  padding: 0 10px 0 0;
  border: 0;
  border-bottom: 1px solid var(--rl-faint);
  border-radius: 0;
  background: none;
  color: var(--rl-muted);
  font-family: inherit;
  font-size: 18px;
  letter-spacing: normal;
}
.rl-form textarea { height: auto; min-height: 80px; padding-top: 8px; resize: vertical; }
.rl-form input:focus,
.rl-form select:focus,
.rl-form textarea:focus { outline: none; border-bottom-color: var(--rl-ink); color: var(--rl-ink); }
.rl-form__consent { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; font-size: 16px; }
.rl-form__consent input {
  width: 16px;
  height: 16px;
  border: 1px solid var(--rl-red);
  background: #ebebeb;
  accent-color: var(--rl-red);
}
.rl-form__submit { grid-column: 1 / -1; }
.rl-form__note { grid-column: 1 / -1; font-size: 12px; color: var(--rl-muted); }

/* ── The configurator's panel, as a section of the page ──── */

/* On the dark pages this floats over the render as glass. Here it is
   one more section of the product page — because that is what it is:
   the two finish ranges and the two dimmers the reference prints as
   static swatch rows, live. */
.panel {
  position: static;
  inset: auto;
  width: auto;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}

.panel__head { padding: 0 0 1.2rem; border-bottom: 0; }
.panel__title {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: var(--rl-track);
  text-transform: none;
  color: var(--rl-ink-2);
}
/* The panel cannot be collapsed here: it is in the flow of the
   document, and sliding it out would leave a hole in the page. Both
   buttons stay in the DOM — the engine wires them — and neither is
   shown. */
#toggle-panel, .panel-reopen { display: none; }

.panel__body {
  overflow: visible;
  padding: 0;
  gap: 2rem;
}

.group__head { padding: 0 0 0.5rem; }
.group__head h3 { font-size: 16px; font-weight: 300; letter-spacing: var(--rl-track); text-transform: none; color: var(--rl-ink); }
.group__value, .group__chosen { color: var(--rl-muted); font-size: 14px; letter-spacing: 1px; text-transform: none; }

.group__card {
  border: 0;
  border-radius: 0;
  background: none;
}
.group__foot { color: var(--rl-muted); font-size: 12px; letter-spacing: 1px; padding: 0.5rem 0 0; }

/* Their swatch is a 60px circle with the code on it and the name under
   it. The catalog carries both — the colour and the manufacturer's own
   SKU — so this draws the reference's swatch out of catalog data. */
.swatches { gap: 1rem 0.9rem; }
.swatch { width: 60px; }
.swatch__ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  outline-offset: 3px;
  box-shadow: none;
}
.swatch[aria-current="true"] .swatch__ring { outline: 1px solid var(--rl-ink); }
.swatch:hover:not(:disabled) .swatch__ring { transform: none; outline: 1px solid var(--rl-line-firm); }
.swatch__label { color: var(--rl-ink); font-size: 12px; letter-spacing: 1px; }
.swatch[aria-current="true"] .swatch__label { color: var(--rl-ink); font-weight: 700; }

.options { border-top: 1px solid var(--rl-line); }
.option { padding: 0.7rem 0; border-top: 1px solid var(--rl-line); }
.option:first-child { border-top: 0; }
.option:hover:not(:disabled) { background: none; color: var(--rl-red); }
.option__name { font-size: 16px; }
.option__summary { color: var(--rl-muted); font-size: 12px; }
.option__check { color: var(--rl-red); }

.switch-row { padding: 0.7rem 0; }
.switch-row__state { color: var(--rl-muted); }
.switch input:checked + .switch__track { background: var(--rl-red); }
.switch__track { background: #e5e2db; }

.slider { padding: 0.4rem 0 0; }
.slider__bound { color: var(--rl-faint); font-size: 12px; }
input[type="range"] { background: var(--rl-line); }
input[type="range"]::-webkit-slider-thumb { background: var(--rl-ink); border: 0; }
input[type="range"]::-moz-range-thumb { background: var(--rl-ink); border: 0; }

/* The engine's read-out of the catalog's metadata. Same drawing as the
   data sheet above it, because it is the same kind of table — the
   difference is only that these numbers come from the catalog. */
.spec { font-size: 14px; letter-spacing: 1px; row-gap: 0; }
.spec dt { padding: 10px 0; border-bottom: 1px solid var(--rl-line); color: var(--rl-muted); }
.spec dd { padding: 10px 0; border-bottom: 1px solid var(--rl-line); color: var(--rl-ink); }
.spec .spec__total { font-weight: 700; border-bottom: 0; }

.row-action { padding: 0.8rem 0; color: var(--rl-muted); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.row-action:hover:not(:disabled) { background: none; color: var(--rl-red); }

/* ── The studio's own controls on a white page ───────────── */

/* Buttons and menus come from configurator.css in white-on-glass. The
   menus stay dark inside — they are the studio's sheets, and the
   sheets they open (share, save, sessions) are dark too — but the
   buttons that sit on this page have to read on paper. */
.btn {
  border-radius: 0;
  border-color: var(--rl-line-firm);
  background: none;
  color: var(--rl-ink);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
}
.btn:hover { background: none; border-color: var(--rl-ink); color: var(--rl-red); }
.btn--primary { border-color: var(--rl-ink); background: var(--rl-ink); color: var(--rl-paper); }
.btn--primary:hover { background: var(--rl-red); border-color: var(--rl-red); color: var(--rl-paper); }

.menu__button { border-color: var(--rl-line-firm); background: none; color: var(--rl-ink-2); border-radius: 0; }
.menu__button:hover { background: var(--rl-warm); }
.menu__button[aria-expanded="true"] { background: var(--rl-warm); border-color: var(--rl-ink); color: var(--rl-ink); }

/* ── Picker, loading, failure ───────────────────────────── */

/* Reached from the breadcrumb's way back, and on a catalog of more than
   one lamp it is the page you arrive on. Same paper as the rest. */
.picker {
  position: fixed;
  /* Under this page's header rather than the engine's, which is 84px
     shorter — otherwise the catalog's heading arrives behind the brand. */
  inset: var(--rl-chrome) 0 0 0;
  background: var(--rl-paper);
  backdrop-filter: none;
  color: var(--rl-ink);
}
/* auto-fill again: one lamp is one card, not one card the width of the
   window. */
.picker__cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.picker__eyebrow { color: var(--rl-red); letter-spacing: 1.5px; }
.picker__head h1 { font-size: 30px; font-weight: 400; letter-spacing: var(--rl-track); }
.picker__head p { color: var(--rl-muted); }
.product-card {
  border: 0;
  border-radius: 0;
  background: var(--rl-warm);
}
.product-card:hover { transform: none; border-color: transparent; background: var(--rl-warm-2); }
.product-card__art { background: var(--rl-warm-2); }
.product-card__name { font-size: 20px; }
.product-card__summary, .product-card__axes { color: var(--rl-muted); }
.chip { border-color: var(--rl-line-firm); background: none; color: var(--rl-muted); border-radius: 0; }

.loading { position: fixed; background: rgba(255, 255, 255, 0.92); color: var(--rl-ink); }
.loading__label { color: var(--rl-ink); letter-spacing: 1px; }
.loading__track { background: var(--rl-warm-2); }
.loading__bar { background: var(--rl-red); }
.loading__hint { color: var(--rl-muted); }

.failure { position: fixed; background: rgba(255, 255, 255, 0.96); }
.failure__card { border: 1px solid var(--rl-line); border-radius: 0; background: var(--rl-paper); }
.failure__card p { color: var(--rl-muted); }
.field label { color: var(--rl-muted); letter-spacing: 1px; }
.field input {
  border: 0;
  border-bottom: 1px solid var(--rl-faint);
  border-radius: 0;
  background: none;
  color: var(--rl-ink);
}
.field input:focus { border-bottom-color: var(--rl-ink); }

/* Notices are the engine talking — a rule broken, a saved
   configuration that no longer fits. White card, brand red for the
   blocking kind. */
.notice {
  border-radius: 0;
  border-color: var(--rl-line-firm);
  background: var(--rl-paper);
  color: var(--rl-ink);
  font-size: 14px;
  letter-spacing: var(--rl-track);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.12);
}
.notice--blocked { border-left-color: var(--rl-red); }

/* ── The footer ─────────────────────────────────────────── */

.rl-footer { padding: 2.5rem var(--rl-gutter) 3rem; background: var(--rl-warm); font-size: 14px; color: var(--rl-muted); }
.rl-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.rl-footer h5 { margin-bottom: 0.4rem; color: var(--rl-ink); text-transform: uppercase; }
.rl-footer ul { list-style: none; }
.rl-footer li { line-height: 1.7; }
.rl-footer__legal { line-height: 1.7; }
.rl-footer__legal p + p { margin-top: 0.6rem; }
.rl-footer__note { color: var(--rl-faint); font-size: 12px; }

/* ── Narrow ─────────────────────────────────────────────── */

/* Under 900px the two columns stop being two columns: the render takes
   the top of the screen and the copy runs under it, which is what the
   reference does with its hero on a phone. */
@media (max-width: 900px) {
  .rl-product { grid-template-columns: minmax(0, 1fr); }
  .rl-stage {
    position: sticky;
    top: var(--is-topbar-h);
    height: 62vh;
    border-right: 0;
    border-bottom: 1px solid var(--rl-line);
    z-index: 5;
  }
  .rl-copy { background: var(--rl-paper); }
  .rl-form { grid-template-columns: 1fr; }
  /* Two rows of words that are wider than a phone: the viewpoints and the
     item tabs. They scroll sideways rather than widening the document. */
  .viewpoints,
  .rl-items {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .viewpoints::-webkit-scrollbar,
  .rl-items::-webkit-scrollbar { display: none; }
  .rl-stage__foot { padding-left: 1rem; padding-right: 1rem; }
}