/* The story phone: De Reiziger's guest menu, as the guest sees it.
   ================================================================

   The menu is drawn at its own size, a 390 by 800 phone viewport (.rz-vp),
   with the live /dereiziger page's own measurements: the Tailwind classes it
   renders, written out here as plain rules. CSS then scales the whole
   viewport into the frame, so type, cards, chips and the tab bar keep the
   menu's proportions instead of being re-picked by eye at a smaller size.

   Colours are the menu's (docs/palette.md, sections 2 to 4): band #C13A22,
   terracotta #E2472C, cream #FBF3E7, paper #F5EBDB, ink #2B1810, its diet
   and allergen chips, its wine-type pins and its map ground #D1E5D5. The
   page under the header is white, as it is on a phone.

   Everything that moves is hidden or at rest here; public/scripts/motion.js
   plays the film. With reduced motion it never runs, and this is the menu
   as it opens: Dutch, euros, the food tab at the top. */

.rz-screen {
  position: relative; overflow: hidden; isolation: isolate;
  width: 260px; height: 533.33px; border-radius: 1.6rem; background: #fff;
}
.rz-vp {
  position: absolute; left: 0; top: 0; width: 390px; height: 800px; overflow: hidden;
  transform-origin: 0 0; transform: scale(.66667);
  background: #fff; color: #2B1810; text-align: left;
  font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: 0;
}
@media (min-width: 640px) {
  .rz-screen { width: 290px; height: 594.87px; }
  .rz-vp { transform: scale(.74359); }
}
.rz-screen, .rz-screen * { box-sizing: border-box; }
:where(.rz-vp) p { margin: 0; }
/* The page's own paragraphs wrap "pretty"; the menu's wrap as the menu does. */
[data-site-lang] .rz-vp p { text-wrap: wrap; }
[data-site-lang] .rz-vp .rz-subline { text-wrap: balance; }
[data-site-lang] .rz-vp .rz-row-name { white-space: nowrap; text-wrap: nowrap; }
:where(.rz-vp) svg { display: block; flex: none; }
.rz-page { position: absolute; left: 0; top: 0; right: 0; }

/* Two or more lines stacked in a one-line window; motion.js moves the stack
   by a share of its height to roll from one to the next. */
.rz-clip { display: inline-block; vertical-align: top; overflow: hidden; height: var(--lh, 1.5em); line-height: var(--lh, 1.5em); }
.rz-roll { display: inline-flex; flex-direction: column; vertical-align: top; }
.rz-roll > span { display: block; height: var(--lh, 1.5em); }

/* ---- Header ---- */
.rz-head { background: #C13A22; color: #FBF3E7; }
.rz-head-in { padding: 0 20px; }
/* With the demo's back link taken out, the two pickers sit on the left. */
.rz-pickers { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: max-content; padding-top: 16px; }
.rz-sel {
  position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 28px 0 12px;
  border-radius: 999px; color: #C13A22;
  font-family: "Space Mono", monospace; font-weight: 700; font-size: 12px; line-height: 16px;
}
.rz-sel-cur { --lh: 28px; background: #FBF3E7; box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.rz-sel-lang { height: 30px; background: #F5EBDB; border: 1px solid rgba(255,255,255,.4); }
.rz-sel svg { position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; }
.rz-title { padding: 20px 0 28px; text-align: center; }
.rz-subline {
  font-family: "Space Mono", monospace; font-size: 11px; line-height: 16.5px;
  text-transform: uppercase; letter-spacing: .25em; color: rgba(255,255,255,.9);
}
.rz-name { margin-top: 8px; font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 36px; line-height: 40px; }
.rz-tagline { max-width: 28rem; margin: 12px auto 0; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.9); }
.rz-wave { display: block; width: 100%; height: 24px; color: #FBF3E7; }

/* ---- Allergy button ---- */
.rz-allergy-row { display: flex; justify-content: center; padding: 16px 20px 0; }
.rz-allergy {
  display: flex; align-items: center; gap: 6px; padding: 6px 16px;
  border: 1px solid rgba(226,71,44,.25); border-radius: 999px; background: #F5EBDB; color: rgba(43,24,16,.65);
  font-family: "Space Mono", monospace; font-weight: 700; font-size: 11px; line-height: 16.5px;
  text-transform: uppercase; letter-spacing: .025em; white-space: nowrap;
}
.rz-allergy svg { width: 13px; height: 13px; }
/* Takes no room until the filter is on; motion.js opens it up. */
.rz-count {
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  width: 0; height: 16px; margin-left: -6px; border-radius: 999px;
  background: #C13A22; color: #fff; font-size: 10px; line-height: 1; letter-spacing: 0; transform: scale(0);
}

/* ---- The three pages of the menu, in one place ---- */
.rz-main { position: relative; padding: 24px 20px; }
.rz-panel { position: absolute; left: 20px; right: 20px; top: 24px; visibility: hidden; }
.rz-panel[data-h="panelFood"] { visibility: visible; }
.rz-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content;
  margin: 0 auto 20px; padding: 4px; border: 1px solid rgba(226,71,44,.2); border-radius: 999px; background: #F5EBDB;
}
.rz-tog {
  display: flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 999px; color: rgba(43,24,16,.65);
  font-family: "Space Mono", monospace; font-weight: 700; font-size: 12px; line-height: 16px;
  text-transform: uppercase; letter-spacing: .025em;
}
.rz-tog.is-on { background: #C13A22; color: #fff; }
.rz-tog svg { width: 13px; height: 13px; }

/* ---- Postcards ---- */
.rz-grid { display: grid; gap: 24px; padding-top: 8px; }
.rz-card {
  position: relative; display: flex; flex-direction: column; padding: 20px;
  border: 1px solid rgba(43,24,16,.1); border-radius: 8px; background: #F5EBDB;
  box-shadow: 0 6px 0 -2px rgba(43,24,16,.06);
}
.rz-tilt-a { transform: rotate(-.9deg); }
.rz-tilt-b { transform: rotate(.8deg); }
.rz-flag {
  position: absolute; top: -12px; right: -12px; width: 48px; height: 48px; overflow: hidden;
  border-radius: 999px; transform: rotate(6deg);
  box-shadow: 0 0 0 2px #FBF3E7, 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.rz-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rz-origin {
  font-family: "Space Mono", monospace; font-size: 11px; line-height: 16.5px;
  text-transform: uppercase; letter-spacing: .1em; color: #C13A22;
}
.rz-dish {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding-right: 32px;
  font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 20px; line-height: 28px;
}
.rz-desc { flex: 1; margin-top: 6px; font-size: 14px; line-height: 20px; color: rgba(43,24,16,.65); }
.rz-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rz-diet {
  padding: 2px 6px; border: 1px solid; border-radius: 999px;
  font-family: "Space Mono", monospace; font-weight: 700; font-size: 11.5px; line-height: 17.25px;
  text-transform: uppercase; letter-spacing: .025em;
}
.rz-diet-vegan { background: #C9E7CE; color: #1F5C33; border-color: rgba(31,92,51,.2); }
.rz-diet-vegetarian { background: #C6DCF2; color: #1D4E80; border-color: rgba(29,78,128,.2); }

/* The pairing line and the wine names: a solid rule under the words and a
   round chevron chip after them (public/styles/menu-links.css). */
.rz-pair {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5em; align-self: flex-start; max-width: 100%;
  margin-top: 2px; padding: .35em 0; font-size: 12.5px; line-height: 1.5; color: #2B1810;
}
/* .65, not the menu's .6: at .6 the label measures 4.26:1 on the paper, under AA. */
.rz-pair-label { font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; opacity: .65; white-space: nowrap; }
.rz-pair-many { column-gap: .9em; row-gap: .2em; }
.rz-open { display: inline-flex; align-items: center; gap: .34em; padding-bottom: .06em; border-bottom: 1.5px solid rgba(0,0,0,.24); }
.rz-pair-many .rz-open { font-weight: 600; }
.rz-open-icon {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: clamp(13px, 1.02em, 17px); height: clamp(13px, 1.02em, 17px); border-radius: 999px; background: rgba(0,0,0,.08);
}
.rz-open-icon svg {
  width: clamp(7px, .56em, 9px); height: clamp(7px, .56em, 9px);
  fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
}
.rz-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(43,24,16,.15);
}
.rz-price { --lh: 24px; font-family: "Space Mono", monospace; font-weight: 700; font-size: 16px; line-height: 24px; color: #C13A22; }
.rz-add {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 999px;
  background: #C13A22; color: #fff; font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap;
}
.rz-add svg { width: 13px; height: 13px; }
/* "Toevoegen" becomes the "− 1 +" stepper: motion.js changes the pill's
   width and hands the label over to the stepper inside it. */
.rz-add-morph { position: relative; justify-content: flex-end; overflow: hidden; --lh: 16px; }
.rz-add-a { display: inline-flex; align-items: center; gap: 4px; }
.rz-add-b {
  position: absolute; top: 0; bottom: 0; right: 0;
  display: flex; align-items: center; gap: 12px; padding: 0 12px; opacity: 0; font-variant-numeric: tabular-nums;
}
.rz-add-b > span:first-child, .rz-add-b > span:last-child { width: 16px; text-align: center; }

/* ---- The list ---- */
.rz-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rz-list-title { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 24px; line-height: 32px; }
.rz-clear-all, .rz-total-k {
  font-family: "Space Mono", monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .025em;
}
.rz-clear-all { font-size: 12px; line-height: 16px; color: #C13A22; }
.rz-rows { display: flex; flex-direction: column; gap: 10px; }
.rz-row {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid rgba(43,24,16,.1); border-radius: 8px; background: #F5EBDB;
}
.rz-stamp {
  display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1.5px dashed currentColor; border-radius: 999px; color: #C13A22;
  font-family: "Space Mono", monospace; font-size: 9px; font-weight: 700;
}
.rz-row-main { flex: 1; min-width: 0; }
.rz-row-name {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 16px; line-height: 24px;
}
.rz-row-price { --lh: 16px; font-family: "Space Mono", monospace; font-size: 12px; line-height: 16px; font-weight: 700; color: #C13A22; }
.rz-qtys { display: flex; flex: none; align-items: center; gap: 8px; }
.rz-qbtn {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 999px; background: #FBF3E7; color: #C13A22; font-weight: 700;
}
.rz-qn { --lh: 20px; width: 20px; text-align: center; font-family: "Space Mono", monospace; font-weight: 700; font-size: 14px; line-height: 20px; }
.rz-trash { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; color: rgba(43,24,16,.65); }
.rz-trash svg { width: 16px; height: 16px; }
.rz-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 16px; border-top: 2px dashed rgba(226,71,44,.3);
}
.rz-total-k { font-size: 14px; line-height: 20px; color: rgba(43,24,16,.65); }
.rz-total-n { --lh: 36px; font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 30px; line-height: 36px; color: #C13A22; }
.rz-hint { margin-top: 16px; text-align: center; font-family: "Space Mono", monospace; font-size: 12px; line-height: 16px; color: rgba(43,24,16,.65); }

/* ---- Tab bar, and the back-to-top button above it ---- */
.rz-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 8px 16px 14px; }
.rz-nav-in {
  display: flex; align-items: center; justify-content: center; gap: 24px; padding: 24px 0;
  border: 1px solid rgba(226,71,44,.15); border-radius: 16px; background: rgba(251,243,231,.95);
  box-shadow: 0 14px 30px -10px rgba(43,24,16,.3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rz-tab {
  position: relative; padding: 4px 0; color: rgba(43,24,16,.65);
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 15px; line-height: 22.5px;
}
.rz-tab.is-on { color: #C13A22; }
.rz-tab.is-on::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 999px; background: #E2472C;
}
.rz-badge {
  --lh: 18px; position: absolute; top: -8px; right: -12px; min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: #C13A22; color: #fff; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; transform: scale(0);
}
.rz-top {
  position: absolute; right: 16px; bottom: calc(100% + 4px); width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: #C13A22; color: #FBF3E7; box-shadow: 0 14px 30px -10px rgba(43,24,16,.3); opacity: 0;
}
.rz-top svg { width: 20px; height: 20px; }

/* ---- Allergy sheet ---- */
.rz-scrim { position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; }
.rz-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 78%; padding: 24px;
  border-radius: 24px 24px 0 0; background: #FBF3E7; transform: translateY(101%); visibility: hidden;
}
.rz-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rz-sheet-title { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 20px; line-height: 28px; }
.rz-x { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; color: rgba(43,24,16,.65); }
.rz-x svg { width: 16px; height: 16px; }
.rz-kick {
  margin-bottom: 8px; font-family: "Space Mono", monospace; font-size: 11px; line-height: 16.5px;
  text-transform: uppercase; letter-spacing: .1em; color: rgba(43,24,16,.65);
}
.rz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rz-chips-last { margin-bottom: 0; }
.rz-chip {
  padding: 6px 12px; border: 1px solid; border-radius: 999px;
  font-family: "Space Mono", monospace; font-weight: 700; font-size: 11px; line-height: 16.5px;
  text-transform: uppercase; letter-spacing: .025em;
}
/* The guest menu's own chip colours (FILTER_STYLE in demo-gezellig.render.js). */
.rz-chip-vegan       { background: #C9E7CE; color: #1F5C33; border-color: rgba(31,92,51,.2); }
.rz-chip-vegetarian  { background: #C6DCF2; color: #1D4E80; border-color: rgba(29,78,128,.2); }
.rz-chip-pescatarian { background: #C2E4E2; color: #1B5C58; border-color: rgba(27,92,88,.2); }
.rz-chip-gluten      { background: #F6D3D3; color: #8A2A2A; border-color: rgba(138,42,42,.2); }
.rz-chip-dairy       { background: #EFDFC2; color: #7A5423; border-color: rgba(122,84,35,.2); }
.rz-chip-nut         { background: #DCD2F0; color: #4B3480; border-color: rgba(75,52,128,.2); }
.rz-chip-crustacean  { background: #F3D9E6; color: #8A2A5C; border-color: rgba(138,42,92,.2); }
.rz-chip-egg         { background: #FBEAC6; color: #8A6A1A; border-color: rgba(138,106,26,.2); }
.rz-chip-fish        { background: #CDE7E3; color: #1F6B5C; border-color: rgba(31,107,92,.2); }
.rz-chip-peanut      { background: #E6DAC6; color: #6B4A1F; border-color: rgba(107,74,31,.2); }
.rz-chip-soy         { background: #DEE7C6; color: #4E6B1F; border-color: rgba(78,107,31,.2); }
.rz-chip-celery      { background: #D6E6D2; color: #2F6B3A; border-color: rgba(47,107,58,.2); }
.rz-chip-mustard     { background: #F0DFC2; color: #8A5A1A; border-color: rgba(138,90,26,.2); }
.rz-chip-sesame      { background: #E3D6E9; color: #5C2F80; border-color: rgba(92,47,128,.2); }
.rz-chip-sulphite    { background: #D9DEEB; color: #33406B; border-color: rgba(51,64,107,.2); }
.rz-chip-lupin       { background: #EAD9D2; color: #7A3A2A; border-color: rgba(122,58,42,.2); }
.rz-chip-mollusc     { background: #D2E3E9; color: #2A5C7A; border-color: rgba(42,92,122,.2); }
.rz-status { position: relative; height: 16px; margin-top: 12px; font-size: 12px; line-height: 16px; font-weight: 600; color: rgba(43,24,16,.65); }
.rz-status > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.rz-status > [data-h="statusOn"] { opacity: 0; }
.rz-sheet-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(226,71,44,.2);
}
.rz-clear, .rz-done {
  font-family: "Space Mono", monospace; font-weight: 700; font-size: 11px; line-height: 16.5px;
  text-transform: uppercase; letter-spacing: .025em;
}
.rz-clear { color: rgba(43,24,16,.65); }
.rz-done { padding: 8px 20px; border-radius: 999px; background: #C13A22; color: #fff; }

/* ---- Wine map ----
   The tiles are a picture of the live menu's own Leaflet map of these five
   wines (OpenStreetMap, credited bottom right as on the menu). The flight
   lines, the pins and everything on top are drawn here, so they can move. */
.rz-map { position: absolute; inset: 0; z-index: 7; overflow: hidden; background: #D1E5D5; opacity: 0; visibility: hidden; }
.rz-map-img, .rz-map-lines { position: absolute; left: 0; top: 0; width: 390px; height: 800px; }
.rz-map-img { display: block; }
.rz-map-lines line { stroke: #E2472C; stroke-width: 1.5; stroke-dasharray: 1 7; stroke-linecap: round; stroke-opacity: .55; }
.rz-home { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.rz-home svg { width: 28px; height: 28px; }
.rz-pin {
  position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed currentColor; border-radius: 999px;
  font-family: "Space Mono", monospace; font-size: 11px; font-weight: 700; transform: scale(0);
}
.rz-zoom {
  position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; overflow: hidden;
  border: 2px solid rgba(0,0,0,.2); border-radius: 4px; background-clip: padding-box;
}
.rz-zoom > span {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: #fff; color: #000; font-family: "Inter", sans-serif; font-size: 20px; font-weight: 700; line-height: 1;
}
.rz-zoom > span + span { border-top: 1px solid rgba(0,0,0,.2); }
.rz-map-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: #C13A22; color: #fff; box-shadow: 0 8px 22px -8px rgba(0,0,0,.45);
}
.rz-map-close svg { width: 20px; height: 20px; }
.rz-map-hint {
  position: absolute; left: 16px; right: 16px; bottom: 30px; max-width: 22rem; margin: 0 auto;
  padding: 8px 16px; border-radius: 999px; background: rgba(251,243,231,.95); color: rgba(43,24,16,.8);
  font-family: "Space Mono", monospace; font-size: 12px; line-height: 16px; text-align: center;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.4);
}
.rz-attrib {
  position: absolute; right: 0; bottom: 0; padding: 0 5px; background: rgba(255,255,255,.8);
  color: rgba(0,0,0,.75); font-size: 12px; line-height: 1.4;
}
/* A wine's card over the page, opened from the pairing under a dish. */
.rz-wmodal {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.4); opacity: 0; visibility: hidden;
}
.rz-wcard { width: 100%; max-width: 24rem; padding: 24px; border-radius: 24px; background: #FBF3E7; }

/* A pin's wine, in a panel over the map. */
.rz-info-wrap {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.4); opacity: 0; visibility: hidden;
}
.rz-info { width: 100%; padding: 20px; border-radius: 16px; background: #FBF3E7; }
.rz-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.rz-info-name { margin-top: 2px; font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 24px; line-height: 32px; }
.rz-info-desc { font-size: 14px; line-height: 20px; color: rgba(43,24,16,.65); }
.rz-info-about { margin-top: 8px; font-size: 14px; line-height: 1.625; font-style: italic; color: rgba(43,24,16,.65); }
.rz-info-about-k {
  display: block; margin-bottom: 4px; font-style: normal;
  font-family: "Space Mono", monospace; font-size: 11px; line-height: 16.5px; text-transform: uppercase; letter-spacing: .1em;
}
.rz-info .rz-add { padding: 8px 16px; }

/* ---- The phone's own pickers for language and currency ---- */
.rz-pop {
  position: absolute; z-index: 8; min-width: 132px; padding: 6px; border-radius: 14px;
  background: #fff; color: #2B1810; font-size: 17px; line-height: 22px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 36px -10px rgba(0,0,0,.4);
  transform-origin: 18px 0; opacity: 0; visibility: hidden;
}
.rz-pop > span { position: relative; display: block; padding: 9px 12px 9px 34px; border-radius: 9px; }
.rz-check { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #C13A22; }

/* A thumb, not a cursor: this is a phone. */
.rz-touch {
  position: absolute; left: 0; top: 0; z-index: 9; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border-radius: 999px; background: rgba(26,11,5,.22); border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 3px 8px -1px rgba(26,11,5,.35); transform: translate(440px, 560px); pointer-events: none;
}
.rz-island {
  position: absolute; z-index: 10; top: 11px; left: 50%; width: 100px; height: 30px; margin-left: -50px;
  border-radius: 18px; background: #050201;
}