/* ReStar landing: "Соберите заказ" section with the pizza and burger builders.
   The two demo apps follow the Foomy layout: a coloured stage with the app standing on it. */

.restar-builder-record {
  position: relative;
  z-index: 1;
  background: #050505 !important;
}

.restar-builder,
.restar-builder *,
.restar-builder *::before,
.restar-builder *::after {
  box-sizing: border-box;
}

.restar-builder {
  /* app surfaces: flour; ink: burnt crust; accent: ReStar orange */
  --rb-paper: #f9f4ea;
  --rb-paper-2: #f2eadb;
  --rb-card: #fdfbf7;
  --rb-ink: #2a1d17;
  --rb-ink-2: #574640;
  --rb-ink-3: #7d6b63;
  --rb-line: #e4d8c7;
  --rb-line-2: #cdbfa9;
  --rb-accent: #ff6b00;
  --rb-accent-press: #e45f00;
  --rb-accent-soft: #ffe7d5;
  --rb-on-accent: #fffaf3;
  --rb-cheese: #f2cf5b;
  --rb-cheese-soft: #f8eec4;
  --rb-basil: #2f7a3f;
  --rb-oven: #221713;
  --rb-oven-3: #3b2d27;
  --rb-oven-line: #4a3a33;
  --rb-shadow: rgba(66, 35, 22, 0.16);
  --rb-shadow-strong: rgba(52, 26, 15, 0.28);
  --rb-fire-1: rgba(245, 160, 60, 0.55);
  --rb-fire-2: rgba(205, 80, 30, 0.3);
  --rb-spark-1: #fbf5dc;
  --rb-spark-2: #f5d06b;
  --rb-spark-3: #f19a35;
  --rb-drop-1: rgba(30, 18, 12, 0.45);
  --rb-drop-2: rgba(30, 18, 12, 0.14);
  --rb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rb-font: "ForrestSans", Arial, sans-serif;

  position: relative;
  overflow: hidden;
  padding: clamp(72px, 6.4vw, 118px) clamp(16px, 3vw, 48px);
  color: #fff;
  background:
    radial-gradient(ellipse 46% 40% at 50% 74%, rgba(255, 106, 0, 0.12), transparent 72%),
    linear-gradient(180deg, #050505 0%, #080605 50%, #050505 100%);
  font-family: var(--rb-font);
}

.restar-builder__shell {
  width: min(100%, 1180px);
  margin: 0 auto;
}

/* ---------- intro ---------- */

.restar-builder__intro {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.restar-builder__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 0 0 18px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 107, 0, 0.24);
  border-radius: 999px;
  background: rgba(255, 107, 0, 0.08);
  color: #ff7a00;
  font: 600 14px/1.1 var(--rb-font);
}

.restar-builder__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6b00;
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.2);
  animation: rb-pulse 1.8s ease-in-out infinite;
}

.restar-builder h2 {
  margin: 0;
  color: #fff;
  font: 800 clamp(34px, 3.6vw, 64px)/1 var(--rb-font);
  letter-spacing: 0;
  text-wrap: balance;
}

.restar-builder h2 span {
  color: #ff6b00;
}

.restar-builder .restar-builder__lead {
  max-width: 560px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.7);
  font: 400 clamp(16px, 1vw, 19px)/1.45 var(--rb-font);
}

.restar-builder .restar-builder__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.restar-builder__points li {
  position: relative;
  padding-left: 36px;
  color: rgba(255, 255, 255, 0.68);
  font: 400 15px/1.4 var(--rb-font);
}

.restar-builder__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23ff7a00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat,
    rgba(255, 107, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 0, 0.24);
}

.restar-builder__points b {
  display: block;
  margin-bottom: 2px;
  color: #fff;
  font-weight: 700;
}

.restar-builder__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  margin-top: 32px;
}

.restar-builder__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff6b00, #ff7a00);
  color: #fff !important;
  font: 700 16px/1 var(--rb-font);
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(255, 107, 0, 0.26);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.restar-builder__cta a:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 48px rgba(255, 107, 0, 0.34);
}

.restar-builder__cta span {
  color: rgba(255, 255, 255, 0.5);
  font: 400 14px/1.35 var(--rb-font);
}

/* transform only: runs on the GPU, a box-shadow pulse would repaint every frame */
@keyframes rb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* ---------- two demos side by side; on phones one at a time, picked by the switch ---------- */

.restar-builder__switch {
  display: none;
}

.restar-builder__devices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
  margin-top: clamp(40px, 4vw, 64px);
}

.restar-builder__device {
  position: relative;
  min-width: 0;
}

/* ---------- stage: the coloured block the app stands on ---------- */

.restar-builder .rb-stage {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 24px;
  padding: 32px 32px 48px;
  border-radius: 30px;
  background-color: var(--rb-accent);
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 250, 243, 0.18) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--rb-ink);
  text-align: left;
}

.restar-builder .rb-stage--burger {
  background-color: #17110e;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 250, 243, 0.09) 1px, transparent 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.restar-builder .rb-stage p,
.restar-builder .rb-stage h3 {
  margin: 0;
}

.restar-builder .rb-stage button {
  font-family: var(--rb-font);
  color: inherit;
  cursor: pointer;
}

.restar-builder .rb-stage img {
  display: block;
  max-width: 100%;
}

.restar-builder .rb-stage [hidden] {
  display: none !important;
}

.restar-builder .rb-stage__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  max-width: 440px;
  color: var(--rb-on-accent);
}

.restar-builder .rb-stage__type {
  font: 800 clamp(26px, 2.2vw, 34px)/1 var(--rb-font);
  letter-spacing: -0.02em;
}

.restar-builder .rb-stage__hint {
  font: 400 14px/1.3 var(--rb-font);
  opacity: 0.85;
  text-align: right;
  white-space: nowrap;
}

/* ---------- the app ---------- */

.restar-builder .rb-app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  border-radius: 30px;
  background: var(--rb-card);
  box-shadow: 0 30px 60px -24px var(--rb-shadow-strong), 0 2px 0 rgba(255, 255, 255, 0.6) inset;
  overflow: hidden;
}

.restar-builder .rb-app__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 8px;
}

.restar-builder .rb-app__brand {
  font: 700 17px/1.1 var(--rb-font);
  letter-spacing: -0.01em;
}

.restar-builder .rb-app__table {
  color: var(--rb-ink-3);
  font: 400 12.5px/1.4 var(--rb-font);
}

.restar-builder .rb-view {
  padding: 0 16px;
}

/* title and sizes always stay above the oven glow and sparks */
.restar-builder .rb-app__head {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
}

.restar-builder .rb-app__title {
  color: var(--rb-ink);
  font: 800 24px/1.1 var(--rb-font);
  letter-spacing: -0.02em;
}

.restar-builder .rb-sizes {
  display: inline-flex;
  flex: none;
  gap: 4px;
}

.restar-builder .rb-sizes button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid var(--rb-line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--rb-ink-2);
  font-size: 13px;
  font-weight: 600;
  transition: all 140ms var(--rb-ease);
}

.restar-builder .rb-sizes button[aria-checked="true"] {
  border-color: var(--rb-accent);
  background: var(--rb-accent);
  color: var(--rb-on-accent);
}

.restar-builder .rb-app__hint {
  min-height: 1.4em;
  margin-top: 8px;
  color: var(--rb-ink-3);
  font: 400 12.5px/1.4 var(--rb-font);
  text-align: center;
  transition: opacity 250ms var(--rb-ease);
}

.restar-builder .rb-app__hint.is-swapping {
  opacity: 0;
}

.restar-builder .rb-hint-action {
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rb-accent-press) !important;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- tabs on the orange stage: own pizza or two halves ---------- */

.restar-builder .rb-tabs {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 440px;
  margin: -8px 0 -4px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 26px -14px rgba(80, 30, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.restar-builder .rb-tabs button {
  flex: 1 1 0;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 250, 243, 0.92) !important;
  font-size: 15px;
  font-weight: 700;
  transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.restar-builder .rb-tabs button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.restar-builder .rb-tabs button[aria-selected="true"] {
  background: var(--rb-card);
  color: var(--rb-accent-press) !important;
  box-shadow: 0 6px 16px rgba(80, 30, 0, 0.22);
}

/* ---------- "Из половинок": two reels of ready halves ---------- */

.restar-builder .rb-hv {
  --d: 300px;
  padding: 0 16px;
}

.restar-builder .rb-hv__size {
  flex: none;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--rb-accent);
  color: var(--rb-on-accent);
  font-size: 13px;
  font-weight: 700;
}

.restar-builder .rb-hv__names {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--rb-ink);
  font-size: 14px;
  line-height: 1.2;
}

.restar-builder .rb-hv__names b:last-child,
.restar-builder .rb-hv__desc p:last-child {
  text-align: right;
}

.restar-builder .rb-hv__stage {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 3px;
  height: calc(var(--d) * 1.7);
  margin: 4px auto 0;
}

.restar-builder .rb-reel {
  width: calc(var(--d) / 2);
  height: 100%;
  padding: calc(var(--d) * 0.45) 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}

.restar-builder .rb-reel::-webkit-scrollbar {
  display: none;
}

/* touch is handled by the script: one finger per reel, both reels at once */
.restar-builder .rb-reel {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.restar-builder .rb-reel.is-dragging {
  scroll-snap-type: none;
}

/* with a mouse the halves are grabbed and dragged (the site gives every button a pointer) */
#allrecords .restar-builder .rb-reel,
#allrecords .restar-builder .rb-reel__item {
  cursor: grab;
}

#allrecords .restar-builder .rb-reel.is-dragging,
#allrecords .restar-builder .rb-reel.is-dragging .rb-reel__item {
  cursor: grabbing;
}

.restar-builder .rb-reel__item {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--d) * 0.8);
  padding: 0;
  border: 0;
  background: none;
  scroll-snap-align: center;
  will-change: transform;
}

.restar-builder .rb-reel__item.is-on {
  z-index: 2;
}

.restar-builder [data-reel="L"] .rb-reel__item {
  transform-origin: right center;
}

.restar-builder [data-reel="R"] .rb-reel__item {
  transform-origin: left center;
}

#allrecords .restar-builder .rb-reel__item img {
  position: absolute;
  top: 50%;
  width: var(--d);
  height: var(--d);
  max-width: none;
  transform: translateY(-50%);
  filter: none;
}

.restar-builder [data-reel="L"] .rb-reel__item img {
  left: 0;
  clip-path: inset(0 50% 0 0);
}

.restar-builder [data-reel="R"] .rb-reel__item img {
  right: 0;
  clip-path: inset(0 0 0 50%);
}

/* a strip along the cut: a finger here scrolls the page instead of spinning the halves */
.restar-builder .rb-hv__seam {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  display: none;
  width: 40px;
  margin-left: -20px;
  touch-action: pan-y;
}

@media (pointer: coarse) {
  .restar-builder .rb-hv__seam {
    display: block;
  }
}

/* arrows for a mouse; on phones the reels are swiped */
.restar-builder .rb-hv__nav {
  position: absolute;
  z-index: 3;
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--rb-line);
  border-radius: 50%;
  background: var(--rb-card);
  box-shadow: 0 6px 16px rgba(52, 26, 15, 0.14);
  transform: translateX(-50%);
}

.restar-builder .rb-hv__nav::before {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--rb-ink-2);
  border-top: 2px solid var(--rb-ink-2);
  transform: translateY(2px) rotate(45deg);
}

.restar-builder .rb-hv__nav[data-dir="1"]::before {
  transform: translateY(-2px) rotate(225deg);
}

.restar-builder .rb-hv__nav[data-reel="L"] { left: calc(50% - var(--d) / 4); }
.restar-builder .rb-hv__nav[data-reel="R"] { left: calc(50% + var(--d) / 4); }
.restar-builder .rb-hv__nav[data-dir="-1"] { top: 2px; }
.restar-builder .rb-hv__nav[data-dir="1"] { bottom: 2px; }

@media (hover: hover) {
  .restar-builder .rb-hv__nav {
    display: grid;
  }
}

.restar-builder .rb-hv__desc {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 12px;
}

.restar-builder .rb-hv__desc p {
  flex: 1 1 0;
  color: var(--rb-ink-3);
  font-size: 12px;
  line-height: 1.35;
}

/* ---------- "Из половинок": the order goes into a kraft pizza box ---------- */

.restar-builder .rb-hv.is-packing .rb-reel {
  pointer-events: none;
}

.restar-builder .rb-hv.is-packing .rb-hv__nav {
  visibility: hidden;
}

/* opacity, not visibility: the site forces images visible */
.restar-builder .rb-hv.is-packed .rb-reel {
  opacity: 0;
}

.restar-builder .rb-box {
  --b: calc(var(--d) + 14px);
  --h: calc(var(--b) * 0.11);
  --rb-tilt: translateY(-4%) rotateX(32deg) rotateZ(-7deg) scale(0.88);
  --rb-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .18 0 0 0 0 .07 .9 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: var(--b);
  height: var(--b);
  margin: calc(var(--b) / -2) 0 0 calc(var(--b) / -2);
  perspective: 1100px;
  perspective-origin: 50% 60%;
  pointer-events: none;
}

/* the box is a real 3D box: top-down while it is packed, then it turns to the guest */
.restar-builder .rb-box__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: var(--rb-tilt);
}

.restar-builder .rb-box__side {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--h) * 0.18);
  background: #171412;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.restar-builder .rb-box__side--front,
.restar-builder .rb-box__side--back {
  left: 0;
  width: 100%;
  height: var(--h);
}

.restar-builder .rb-box__side--left,
.restar-builder .rb-box__side--right {
  top: 0;
  width: var(--h);
  height: 100%;
}

/* the printed front: two orange stripes and the logo between them */
.restar-builder .rb-box__side--front {
  top: 100%;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background:
    linear-gradient(90deg, transparent 29%, var(--rb-accent) 29%, var(--rb-accent) 31%, transparent 31%, transparent 69%, var(--rb-accent) 69%, var(--rb-accent) 71%, transparent 71%),
    linear-gradient(#211d1a, #120f0e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.restar-builder .rb-box__side--back {
  bottom: 100%;
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
}

.restar-builder .rb-box__side--right {
  left: 100%;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background:
    linear-gradient(transparent 22%, var(--rb-accent) 22%, var(--rb-accent) 24%, transparent 24%),
    linear-gradient(90deg, #0f0d0c, #090807);
}

.restar-builder .rb-box__side--left {
  right: 100%;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}

#allrecords .restar-builder .rb-box__side img {
  width: auto;
  height: 58%;
  max-width: none;
}

.restar-builder .rb-box__side span {
  color: #fff;
  font-family: "ForrestSans", Arial, sans-serif;
  font-size: calc(var(--h) * 0.48);
  font-weight: 700;
  line-height: 1;
}

.restar-builder .rb-box__side--right span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(var(--h) * 0.42);
}

.restar-builder .rb-box__base {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(160deg, #2a2623, #141110);
  box-shadow: 0 4px 0 #0b0908, 0 24px 40px -10px rgba(20, 10, 5, 0.5);
}

/* the bottom of the box inside thin cardboard walls */
.restar-builder .rb-box__base::before {
  content: "";
  position: absolute;
  inset: 1.2%;
  border-radius: 2px;
  background: var(--rb-noise), radial-gradient(circle at 50% 42%, #e8c899, #d3a670 78%);
  box-shadow: inset 0 0 0 1px rgba(110, 65, 30, 0.3), inset 0 3px 6px -3px rgba(90, 50, 20, 0.45), inset 0 -1px 3px rgba(255, 235, 200, 0.35);
}

.restar-builder .rb-box__pizza {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  transform: translateZ(1px) scale(0.92);
  filter: drop-shadow(0 3px 5px rgba(70, 35, 10, 0.35));
}

#allrecords .restar-builder .rb-box__pizza img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.restar-builder .rb-box__pizza [data-half="L"] {
  clip-path: inset(0 50% 0 0);
}

.restar-builder .rb-box__pizza [data-half="R"] {
  clip-path: inset(0 0 0 50%);
}

/* the lid is hinged on the back edge: its inner side shows while it flies over */
.restar-builder .rb-box__lid {
  position: absolute;
  inset: -1px;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: translateZ(2px);
}

.restar-builder .rb-box__in,
.restar-builder .rb-box__out {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.restar-builder .rb-box__in {
  transform: rotateX(180deg);
  background: var(--rb-noise), linear-gradient(#e3bf8d, #d2a670);
  box-shadow: inset 0 0 0 1px rgba(110, 65, 30, 0.3);
}

/* the printed lid of the client's box */
.restar-builder .rb-box__out {
  background: #141110 url("../img/builder/box-lid.webp") center / cover no-repeat;
  box-shadow: 0 4px 0 #0b0908, 0 22px 36px -12px rgba(20, 10, 5, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* the fold line along the hinge */
.restar-builder .rb-box__out::before {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  top: 7%;
  height: 1px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* a little gloss of the coated cardboard */
.restar-builder .rb-box__out::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.13), transparent 36%, transparent 72%, rgba(255, 255, 255, 0.05));
}

/* the order label of the kitchen, slapped on the corner */
.restar-builder .rb-box__label {
  position: absolute;
  z-index: 1;
  right: 7%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 58%;
  padding: 7px 10px 7px 11px;
  border-left: 4px solid var(--rb-accent);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--rb-ink);
  text-align: left;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transform: rotate(-5deg);
}

.restar-builder .rb-box__no {
  color: var(--rb-accent-press);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.restar-builder .rb-box__what {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.restar-builder .rb-box .rb-steam {
  z-index: 5;
}

@media (max-width: 440px) {
  .restar-builder .rb-tabs button {
    height: 40px;
    font-size: 14px;
  }

  .restar-builder .rb-hv {
    padding: 0 10px;
  }
}

/* ---------- pizza ---------- */

.restar-builder .rb-pizza {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 262px;
  aspect-ratio: 1;
  margin: 8px auto 0;
}

.restar-builder .rb-pizza__spin {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: transform 420ms var(--rb-ease);
}

.restar-builder .rb-pizza__base,
.restar-builder .rb-pizza__baked {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  filter: drop-shadow(0 14px 18px rgba(66, 35, 22, 0.22));
}

.restar-builder .rb-pizza__baked {
  opacity: 0;
}

.restar-builder .rb-pizza__cheese,
.restar-builder .rb-pizza__sauce {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.restar-builder .rb-pizza__cheese {
  filter: drop-shadow(0 14px 18px rgba(66, 35, 22, 0.22));
}

.restar-builder .rb-pizza__cheese--melted {
  opacity: 0;
}

.restar-builder .rb-pizza__toppings {
  position: absolute;
  inset: 0;
}

.restar-builder .rb-pc {
  position: absolute;
  aspect-ratio: 1;
}

.restar-builder .rb-pc__shadow {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(8%, 12%);
  background: radial-gradient(circle, var(--rb-drop-1) 0%, var(--rb-drop-2) 50%, transparent 72%);
}

.restar-builder .rb-pc__art {
  position: absolute;
  inset: 0;
}

.restar-builder .rb-pc__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px var(--rb-shadow));
}

.restar-builder .rb-pc__art img.ck {
  opacity: 0;
  filter: brightness(0.86) saturate(1.25) sepia(0.18) contrast(1.06);
}

.restar-builder .rb-pc__art img.ck-leaf {
  filter: brightness(0.62) saturate(0.9) sepia(0.25);
}

.restar-builder .rb-bottle {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  max-width: none;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 14px 16px var(--rb-shadow-strong));
}

/* oven */
.restar-builder .rb-oven {
  position: absolute;
  z-index: 0;
  inset: -2% -17%;
  border-radius: 22px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: var(--rb-oven);
}

.restar-builder .rb-oven__mouth {
  position: absolute;
  left: 50%;
  top: -6%;
  width: 125%;
  height: 112%;
  max-width: none;
  transform: translateX(-50%);
  object-fit: cover;
  opacity: 0.95;
}

.restar-builder .rb-oven__fire {
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: 150%;
  max-width: none;
  transform: translateX(-50%);
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 58%, transparent 100%);
}

.restar-builder .rb-oven__glow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 140%;
  height: 92%;
  transform: translateX(-50%);
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 50% at 50% 60%, var(--rb-fire-1) 0%, var(--rb-fire-2) 42%, transparent 70%);
}

.restar-builder .rb-pizza__ring {
  position: absolute;
  inset: 1%;
  z-index: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--rb-fire-1), 0 0 70px 10px var(--rb-fire-2);
}

.restar-builder .rb-spark {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--rb-spark-1) 0%, var(--rb-spark-2) 28%, var(--rb-spark-3) 50%, transparent 72%);
}

/* while baking the header steps aside and the oven takes the screen up to the top */
.restar-builder .rb-app__top,
.restar-builder .rb-tabs,
.restar-builder .rb-view > .rb-app__head {
  transition: opacity 400ms ease;
}

.restar-builder .rb-app.is-baking .rb-app__top,
.restar-builder .rb-app.is-baking .rb-tabs,
.restar-builder .rb-app.is-baking .rb-view > .rb-app__head {
  opacity: 0;
}

.restar-builder .rb-app.is-baking .rb-oven {
  border-radius: 0 0 22px 22px;
}

/* ---------- burger: stack, grill, steam, pick ---------- */

.restar-builder .rb-burger {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 290px;
  margin: 8px auto 0;
}

.restar-builder .rb-burger__stack {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transition: transform 450ms var(--rb-ease);
}

.restar-builder .rb-layer {
  position: absolute;
  left: 0;
  width: 100%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 4px rgba(52, 26, 15, 0.18));
}

/* the grill grate the burger sits on: hot bars in perspective with a glow from below */
.restar-builder .rb-burger__grill {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 2px;
  height: 30px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 150, 60, 0.85) 7px 9px, transparent 9px 14px),
    radial-gradient(ellipse 60% 70% at 50% 45%, #ff7a1a 0%, #c23a0c 45%, #3a1608 80%);
  box-shadow: 0 0 22px 6px var(--rb-fire-1), inset 0 0 0 2px rgba(40, 18, 8, 0.85);
}

/* flames rising from the grate around the burger, behind the stack */
.restar-builder .rb-burger__flames {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 136%;
  height: auto;
  aspect-ratio: 320 / 190;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 16%, #000 84%, transparent 96%);
  mask-image: linear-gradient(90deg, transparent 4%, #000 16%, #000 84%, transparent 96%);
  pointer-events: none;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
}

.restar-builder .rb-burger__firevid {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.restar-builder .rb-steam {
  position: absolute;
  z-index: 60;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(7px);
  background: radial-gradient(circle, rgba(253, 253, 253, 0.9) 0%, rgba(253, 253, 253, 0.4) 45%, transparent 70%);
}

.restar-builder .rb-bit {
  position: absolute;
  z-index: 60;
  width: 5px;
  height: 5px;
  border-radius: 40%;
  pointer-events: none;
  background: var(--rb-spark-3);
}

.restar-builder .rb-burger .rb-spark {
  z-index: 60;
}

.restar-builder .rb-pick {
  position: absolute;
  z-index: 70;
  width: 46px;
  height: 92px;
  pointer-events: none;
  transform: rotate(4deg);
  transform-origin: 6px 100%;
}

.restar-builder .rb-pick__stick {
  position: absolute;
  left: 4px;
  top: 6px;
  width: 3px;
  height: 86px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ecdcb6, #d2bd92);
}

.restar-builder .rb-pick__flag {
  position: absolute;
  left: 6px;
  top: 4px;
  width: 40px;
  height: 27px;
  filter: drop-shadow(0 2px 3px var(--rb-shadow));
}

.restar-builder .rb-pick__cloth {
  fill: var(--rb-on-accent);
}

/* bun picker */
.restar-builder .rb-buns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.restar-builder .rb-buns button {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  padding: 6px 4px 5px;
  border: 1.5px solid var(--rb-line);
  border-radius: 14px;
  background: var(--rb-card);
  color: var(--rb-ink-2);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color 140ms var(--rb-ease), background 140ms var(--rb-ease);
}

.restar-builder .rb-buns button:hover {
  border-color: var(--rb-line-2);
}

.restar-builder .rb-buns button span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restar-builder .rb-buns button img {
  width: 40px;
  height: 20px;
  object-fit: contain;
}

.restar-builder .rb-buns button[aria-checked="true"] {
  border-color: var(--rb-accent);
  background: var(--rb-accent-soft);
  color: var(--rb-ink);
}

/* ---------- ingredient tray: everything in view, no scrolling ---------- */

.restar-builder .rb-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 2px;
  margin: 8px 0 12px;
}

.restar-builder .rb-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 7px 0 4px;
  border: 0;
  background: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.restar-builder .rb-chip:focus-visible {
  outline: none;
}

.restar-builder .rb-chip:focus-visible .rb-chip__well {
  outline: 2px solid var(--rb-accent);
  outline-offset: 2px;
}

.restar-builder .rb-chip__well {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--rb-paper-2);
  box-shadow: inset 0 0 0 1px var(--rb-line);
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.25s, background 0.25s;
}

.restar-builder .rb-chip:hover .rb-chip__well {
  box-shadow: inset 0 0 0 1px var(--rb-line-2);
}

.restar-builder .rb-chip.is-pressed .rb-chip__well {
  transform: scale(0.9);
}

.restar-builder .rb-chip.is-on .rb-chip__well {
  background: var(--rb-accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--rb-accent);
}

.restar-builder .rb-chip.is-inviting .rb-chip__well {
  position: relative;
}

/* the inviting ring grows with transform/opacity (GPU), not with box-shadow (a repaint every frame) */
.restar-builder .rb-chip.is-inviting .rb-chip__well::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.5);
  pointer-events: none;
  animation: rb-invite 1.8s var(--rb-ease) infinite;
}

@keyframes rb-invite {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(1.32); opacity: 0; }
}

.restar-builder .rb-chip__art {
  position: relative;
  width: 48px;
  height: 40px;
  transform: scale(0.9);
  pointer-events: none;
}

.restar-builder .rb-ca {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
}

.restar-builder .rb-ca img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px var(--rb-shadow));
}

.restar-builder .rb-ca0 { left: 19%; top: 4%; z-index: 3; }
.restar-builder .rb-ca1 { left: -3%; top: 22%; z-index: 1; transform: rotate(-26deg) scale(0.82); }
.restar-builder .rb-ca2 { right: -3%; top: 20%; z-index: 2; transform: rotate(32deg) scale(0.86); }
.restar-builder .rb-ca.rb-ca--single { left: -2%; top: 0; width: 104%; height: 100%; }

.restar-builder .rb-chip__name {
  max-width: 100%;
  overflow: hidden;
  color: var(--rb-ink-2);
  font-size: 11.2px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.25s;
  pointer-events: none;
}

.restar-builder .rb-chip.is-on .rb-chip__name {
  color: var(--rb-ink);
}

.restar-builder .rb-chip__price {
  margin-top: -3px;
  color: var(--rb-ink-3);
  font-size: 10.5px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.restar-builder .rb-chip.is-on .rb-chip__price {
  color: var(--rb-accent-press);
}

.restar-builder .rb-chip__badge {
  position: absolute;
  top: 3px;
  left: calc(50% + 12px);
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--rb-accent);
  color: var(--rb-on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2.5px var(--rb-card);
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.3, 1.8, 0.5, 1);
  pointer-events: none;
}

.restar-builder .rb-chip.is-on .rb-chip__badge {
  transform: scale(1);
}

.restar-builder .rb-chip__minus {
  position: absolute;
  top: 3px;
  right: calc(50% + 12px);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rb-ink);
  color: var(--rb-paper);
  box-shadow: 0 0 0 2.5px var(--rb-card);
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.3, 1.8, 0.5, 1);
  pointer-events: none;
}

.restar-builder .rb-chip__minus svg {
  width: 12px;
  height: 12px;
}

.restar-builder .rb-chip__minus::after {
  content: "";
  position: absolute;
  inset: -11px;
}

.restar-builder .rb-chip.is-on .rb-chip__minus {
  transform: scale(1);
  pointer-events: auto;
}

/* while the dish is in the oven / on the grill the tray rests */
.restar-builder .rb-app.is-baking .rb-chips,
.restar-builder .rb-app.is-baked .rb-chips,
.restar-builder .rb-app.is-baking .rb-sizes,
.restar-builder .rb-app.is-baked .rb-sizes,
.restar-builder .rb-app.is-grilling .rb-chips,
.restar-builder .rb-app.is-ready .rb-chips {
  pointer-events: none;
}

.restar-builder .rb-app.is-baking .rb-chip,
.restar-builder .rb-app.is-baked .rb-chip,
.restar-builder .rb-app.is-grilling .rb-chip,
.restar-builder .rb-app.is-ready .rb-chip {
  opacity: 0.4;
  transition: opacity 0.4s;
}

.restar-builder .rb-app.is-grilling .rb-buns,
.restar-builder .rb-app.is-ready .rb-buns {
  pointer-events: none;
  opacity: 0.5;
}

/* ---------- order button ---------- */

.restar-builder .rb-app__foot {
  padding: 0 16px 16px;
}

.restar-builder .rb-order {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0 16px 0 24px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--rb-ink);
  color: var(--rb-paper) !important;
  font-size: 16px;
  font-weight: 700;
  transition: background 140ms var(--rb-ease), transform 140ms var(--rb-ease);
}

.restar-builder .rb-order:hover {
  background: #3a2a22;
}

.restar-builder .rb-order:active {
  transform: translateY(1px);
}

.restar-builder .rb-order.is-ok {
  background: var(--rb-basil);
}

.restar-builder .rb-order span {
  white-space: nowrap;
}

.restar-builder .rb-order > span:not(.rb-order__bar):not(.rb-delta) {
  position: relative;
}

.restar-builder .rb-order__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--rb-fire-1));
  pointer-events: none;
}

.restar-builder .rb-order__price {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.restar-builder .rb-delta {
  position: absolute;
  top: 50%;
  color: var(--rb-cheese);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* ---------- the kitchen ticket: a frosted glass push banner over the top of the phone ---------- */

.restar-builder .rb-ticket {
  position: absolute;
  z-index: 30;
  top: 10px;
  left: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: rgba(24, 19, 16, 0.8);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  color: #fff;
  box-shadow: 0 22px 44px -14px rgba(20, 10, 5, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.restar-builder .rb-ticket:not([hidden]) {
  animation: rb-ticket 560ms cubic-bezier(0.2, 1.25, 0.35, 1);
}

/* the same ticket as a push over the top of the real screen, when the phone's top is scrolled away */
.restar-builder.rb-push {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100000;
  padding: max(10px, env(safe-area-inset-top)) 0 0;
  overflow: visible;
  background: none;
  pointer-events: none;
}

.restar-builder.rb-push [hidden] {
  display: none !important;
}

.restar-builder.rb-push .rb-ticket {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: min(420px, calc(100% - 20px));
  margin: 0 auto;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(36, 30, 26, 0.93);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  pointer-events: auto;
  cursor: pointer;
}

@keyframes rb-ticket {
  from { opacity: 0; transform: translateY(-120%) scale(0.96); }
}

/* the banner's own timer: a thin line that runs out before it leaves */
.restar-builder .rb-ticket::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rb-accent), #ffb15c);
  transform-origin: left;
}

.restar-builder .rb-ticket:not([hidden])::after {
  animation: rb-ticket-timer 2300ms linear forwards;
}

@keyframes rb-ticket-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.restar-builder .rb-ticket__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff8a2a, var(--rb-accent));
  box-shadow: 0 6px 14px -4px rgba(255, 106, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* the white ReStar R, the fork is cut out and shows the orange */
.restar-builder .rb-ticket__icon img {
  width: 28px;
  height: 28px;
  max-width: none;
  filter: drop-shadow(0 1px 1px rgba(120, 40, 0, 0.35));
}

.restar-builder .rb-ticket__body {
  min-width: 0;
}

.restar-builder .rb-ticket__head {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.restar-builder .rb-ticket__num {
  margin-top: 3px !important;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

.restar-builder .rb-ticket__lines {
  display: -webkit-box;
  margin-top: 3px !important;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.restar-builder .rb-ticket__paid {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px !important;
  padding: 4px 10px 4px 7px;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.14);
  color: #7ee2a2;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
}

.restar-builder .rb-ticket__paid svg {
  flex: none;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- "order accepted": a card slides up inside the phone ---------- */

.restar-builder .rb-done {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: rgba(253, 251, 247, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: rb-done-fade 260ms ease both;
}

.restar-builder .rb-stage .rb-done[hidden] {
  display: none !important;
}

.restar-builder .rb-done__card {
  width: 100%;
  padding: 26px 18px 12px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 -10px 40px rgba(52, 26, 15, 0.16);
  text-align: center;
  animation: rb-done-up 420ms cubic-bezier(0.3, 1.3, 0.5, 1) both;
}

.restar-builder .rb-done__check {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #1fb35b;
  color: #fff;
  box-shadow: 0 10px 24px rgba(31, 179, 91, 0.32);
  animation: rb-done-pop 520ms 160ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.restar-builder .rb-done__check svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.restar-builder .rb-done__title {
  margin: 0 0 12px !important;
  color: var(--rb-ink);
  font: 800 22px/1.15 var(--rb-font);
}

.restar-builder .rb-done__lines {
  margin: 0 0 12px !important;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f3ee;
  color: #3b342f;
  font: 600 13.5px/1.4 var(--rb-font);
}

.restar-builder .rb-done__text {
  margin: 0 !important;
  color: #6b625b;
  font: 400 13px/1.45 var(--rb-font);
}

.restar-builder .rb-done__want {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 16px;
  padding: 0 14px;
  border-radius: 15px;
  background: linear-gradient(135deg, #ff6b00, #ff7a00);
  box-shadow: 0 12px 26px rgba(255, 107, 0, 0.28);
  color: #fff !important;
  font: 700 15px/1.2 var(--rb-font);
  text-decoration: none !important;
}

.restar-builder .rb-done__again {
  width: 100%;
  height: 44px;
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: #6b625b !important;
  font-size: 14px;
  font-weight: 700;
}

@keyframes rb-done-fade {
  from { opacity: 0; }
}

@keyframes rb-done-up {
  from { opacity: 0; transform: translateY(60px); }
}

@keyframes rb-done-pop {
  from { opacity: 0; transform: scale(0.4); }
}

/* ---------- things that fly over the page (outside the section) ---------- */

.rb-crumb,
.rb-flight,
.rb-carried,
.rb-tool {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 65;
  max-width: none;
  pointer-events: none;
  will-change: transform, opacity;
}

.rb-crumb {
  z-index: 60;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  object-fit: contain;
}

.rb-flight {
  z-index: 60;
}

.rb-carried {
  filter: drop-shadow(0 8px 10px rgba(52, 26, 15, 0.28));
}

.rb-tool {
  z-index: 66;
  filter: drop-shadow(0 12px 16px rgba(52, 26, 15, 0.28));
}

.rb-tool--spatula {
  z-index: 64;
}

/* the screen warms up while the pizza bakes */
.rb-heat {
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(225, 125, 60, 0.22) 78%, rgba(210, 90, 40, 0.38) 100%);
}

/* ---------- responsive ---------- */

@media (min-width: 1000px) {
  .restar-builder .rb-pizza {
    max-width: 300px;
  }
}

/* side by side: both stages and both apps get the same height, the pizza sits in the middle of the spare room */
@media (min-width: 900px) {
  .restar-builder__devices {
    align-items: stretch;
  }

  .restar-builder__device {
    display: flex;
  }

  .restar-builder .rb-stage {
    flex: 1 1 auto;
    grid-template-rows: auto 1fr;
  }

  /* side by side the switch sits in the "Пиццерия" row, so both phones start at the same height */
  .restar-builder .rb-stage--pizza .rb-tabs {
    position: absolute;
    z-index: 2;
    top: 23px;
    right: max(20px, calc(50% - 220px));
    width: min(252px, 54%);
    padding: 4px;
    margin: 0;
  }

  .restar-builder .rb-stage--pizza .rb-stage__hint {
    visibility: hidden;
  }

  .restar-builder .rb-stage--pizza .rb-tabs button {
    height: 38px;
    padding: 0 6px;
    font-size: 13px;
  }

  .restar-builder .rb-app,
  .restar-builder .rb-view {
    display: flex;
    flex-direction: column;
  }

  .restar-builder .rb-view {
    flex: 1 1 auto;
  }

  .restar-builder .rb-app__head {
    margin-bottom: 8px;
  }

  .restar-builder .rb-pizza {
    flex: none;
    margin: auto;
  }
}

@media (min-width: 1180px) {
  .restar-builder .rb-pizza {
    max-width: 340px;
  }
}

@media (max-width: 1080px) {
  .restar-builder .rb-stage {
    padding: 28px 20px 40px;
  }

  .restar-builder .rb-stage--pizza .rb-tabs {
    top: 19px;
  }
}

@media (max-width: 980px) {
  .restar-builder .restar-builder__points {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
    margin: 28px auto 0;
  }
}

/* phones and small tablets: one demo at a time, picked by the switch above it;
   only the title stays above the demo, the pitch and the button move under it */
@media (max-width: 899px) {
  .restar-builder__shell {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .restar-builder__intro {
    display: contents;
  }

  .restar-builder__eyebrow { order: 1; align-self: center; }
  .restar-builder h2 { order: 2; }
  .restar-builder__switch { order: 3; }
  .restar-builder__devices { order: 4; }
  .restar-builder .restar-builder__lead { order: 5; margin-top: 36px; }
  .restar-builder .restar-builder__points { order: 6; }
  .restar-builder__cta { order: 7; }

  .restar-builder__switch {
    display: flex;
    gap: 6px;
    width: min(100%, 440px);
    margin: 32px auto 0;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
  }

  .restar-builder__switch button {
    flex: 1 1 0;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font: 700 15px/1 var(--rb-font);
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease;
  }

  .restar-builder__switch button.is-active {
    background: linear-gradient(135deg, #ff6b00, #ff7a00);
    color: #fff;
    box-shadow: 0 10px 24px rgba(255, 107, 0, 0.28);
  }

  .restar-builder__devices {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    margin-top: 16px;
  }

  .restar-builder[data-rb-show="pizza"] [data-restar-builder="burger"],
  .restar-builder[data-rb-show="burger"] [data-restar-builder="pizza"] {
    display: none;
  }
}

@media (max-width: 559px) {
  .restar-builder .rb-stage {
    gap: 18px;
    padding: 22px 12px 26px;
    border-radius: 24px;
  }

  .restar-builder .rb-stage__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0 6px;
  }

  .restar-builder .rb-stage__hint {
    text-align: left;
  }
}

@media (max-width: 440px) {
  .restar-builder .rb-stage {
    padding-left: 8px;
    padding-right: 8px;
  }

  .restar-builder .rb-stage__head {
    padding: 0 8px;
  }

  .restar-builder .rb-view,
  .restar-builder .rb-app__top,
  .restar-builder .rb-app__foot {
    padding-left: 10px;
    padding-right: 10px;
  }

  .restar-builder .rb-chip__name {
    font-size: 10.6px;
    letter-spacing: -0.015em;
  }

  .restar-builder .rb-app {
    border-radius: 24px;
  }

  .restar-builder .rb-app__title {
    font-size: 21px;
  }

  .restar-builder .rb-wide {
    display: none;
  }
}

@media (max-width: 360px) {
  .restar-builder .rb-order {
    padding-left: 16px;
    font-size: 14px;
  }

  .restar-builder .rb-app__table {
    display: none;
  }

  .restar-builder .rb-chip__name {
    font-size: 9.8px;
    letter-spacing: -0.02em;
  }

  .restar-builder .rb-buns button {
    font-size: 10.5px;
  }

  .restar-builder .rb-chip__price {
    font-size: 9.3px;
    letter-spacing: -0.02em;
  }

  .restar-builder .rb-chip__well {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .restar-builder *,
  .restar-builder *::before,
  .restar-builder *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
}

/* The builder script is loaded one block ahead (index.html). Until it has drawn the app, the empty
   device keeps the same place it will take, so the page below does not move when it appears. */
.restar-builder__device[data-restar-builder]:empty { min-height: 933px; }
@media (max-width: 389px) { .restar-builder__device[data-restar-builder]:empty { min-height: 906px; } }
@media (max-width: 359px) { .restar-builder__device[data-restar-builder]:empty { min-height: 896px; } }
@media (min-width: 600px) and (max-width: 959px) { .restar-builder__device[data-restar-builder]:empty { min-height: 948px; } }
@media (min-width: 960px) { .restar-builder__device[data-restar-builder]:empty { min-height: 1070px; } }
@media (min-width: 1100px) { .restar-builder__device[data-restar-builder]:empty { min-height: 1080px; } }
@media (min-width: 1280px) { .restar-builder__device[data-restar-builder]:empty { min-height: 1083px; } }