:root{
  --bg: #0b0f17;
  --panel: rgba(255,255,255,0.06);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --border: rgba(255,255,255,0.12);

  --ballingslov-brown-50: #ff69b4;
  --ballingslov-brown-100: #f7f4f0;
  --ballingslov-brown-150: #f3ede6;
  --ballingslov-brown-175: #ede5dc;
  --ballingslov-brown-200: #dbd3ca;
  --ballingslov-brown-300: #d7d4c7;
  --ballingslov-brown-400: #8b7862;
  --ballingslov-brown-500: #ff69b4;
  --ballingslov-brown-600: #ff69b4;
  --ballingslov-brown-700: #ff69b4;
  --ballingslov-brown-800: #ff69b4;
  --ballingslov-brown-900: #ff69b4;
  --ballingslov-orange-50: #ff69b4;
  --ballingslov-orange-100: #ff69b4;
  --ballingslov-orange-200: #ff69b4;
  --ballingslov-orange-300: #ff69b4;
  --ballingslov-orange-400: #ff69b4;
  --ballingslov-orange-500: #d3915f;
  --ballingslov-orange-600: #ff69b4;
  --ballingslov-orange-700: #ff69b4;
  --ballingslov-orange-800: #ff69b4;
  --ballingslov-orange-900: #ff69b4;
  --ballingslov-gray-50: #fdfdfd;
  --ballingslov-gray-100: #f7f7f7;
  --ballingslov-gray-200: #f0ece6;
  --ballingslov-gray-300: #d9d7d4;
  --ballingslov-gray-400: #b5b5b5;
  --ballingslov-gray-500: #ff69b4;
  --ballingslov-gray-600: #8f8f8f;
  --ballingslov-gray-700: #636363;
  --ballingslov-gray-800: #404040;
  --ballingslov-gray-900: #ff69b4;
  --ballingslov-red-50: #ff69b4;
  --ballingslov-red-100: #ff69b4;
  --ballingslov-red-200: #ff69b4;
  --ballingslov-red-300: #ff69b4;
  --ballingslov-red-400: #ff69b4;
  --ballingslov-red-500: red;
  --ballingslov-red-600: #ff69b4;
  --ballingslov-red-700: #ff69b4;
  --ballingslov-red-800: #ff69b4;
  --ballingslov-red-900: #ff69b4;
  --everyday-green-50: #639;
  --everyday-green-100: #f1f2ed;
  --everyday-green-200: #e0e3d2;
  --everyday-green-300: #639;
  --everyday-green-400: #b8bc71;
  --everyday-green-500: #639;
  --everyday-green-600: #639;
  --everyday-green-700: #7e8c7d;
  --everyday-green-800: #639;
  --everyday-green-900: #639;
  --everyday-black-1000: #000;
  --everyday-white-000: #fff;
  --error-color: var(--ballingslov-red-500);
  --ballingslov-black-1000: #000;
  --ballingslov-white-000: #fff;
  --ballingslov-cta-color: var(--ballingslov-orange-500);
  --ballingslov-black-opacity-50: color-mix(in srgb, var(--ballingslov-black-1000), transparent 50%);
  --ballingslov-background-action-primary: var(--ballingslov-brown-400);
  --ballingslov-color-action-primary: var(--ballingslov-white-000);
  --ballingslov-background-cta-primary: var(--ballingslov-cta-color);
  --ballingslov-color-cta-primary: var(--ballingslov-white-000);
  --ballingslov-background-disabled: var(--ballingslov-brown-200);
  --ballingslov-color-disabled: var(--ballingslov-black-opacity-50);
  --ballingslov-border-radius-0: 0px;
  --ballingslov-border-radius-xxs: 2px;
  --ballingslov-border-radius-xs: 5px;
  --ballingslov-border-radius-sm: 7px;
  --ballingslov-border-radius-default: var(--ballingslov-border-radius-xs);
  --ballingslov-border-radius-default-outer: var(--ballingslov-border-radius-sm);
}

@font-face {
  font-family: Aptos;
  src:
    url(../fonts/aptos-reg.woff2) format("woff2"),
    url(../fonts/aptos-reg.woff) format("woff"),
    url(../fonts/aptos-reg.ttf) format("truetype"),
    local("Aptos"),
    local("Aptos Regular");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing: border-box; }
html,body{ height:100%; padding:0; margin:0; }
body{
  margin:0;
  font-family: Aptos, sans-serif;
  background: #FFF;
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Aptos, sans-serif;
  font-weight: 700;
  color: #111;
  margin: 0 0 0.35em;
  line-height: 1.15;
}

p, li, span, label, input, textarea, button {
  font-family: Aptos, sans-serif;
}

h1 { font-size: clamp(26px, 2.6vw, 36px); }
h2 { font-size: clamp(22px, 2.3vw, 30px); }
h3 { font-size: clamp(18px, 1.9vw, 24px); }
html, body { margin:0; height:100%; }
.stage { position:fixed; inset:0; }


html, body{
  height: 100%;
  overflow: hidden;
  touch-action: none;            /* stoppar scroll/zoom-gester på ytan */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(10,14,22,0.8);
  backdrop-filter: blur(8px);
}

.brand{ font-weight: 700; letter-spacing: 0.2px; }
.hint{ color: var(--muted); font-size: 13px; }

.wrap{
  padding: 16px;
}

.stage{
  width: 100%;
  height: calc(100vh - 72px);
  min-height: 420px;
  background: var(--panel);
  overflow: hidden;
}


canvas { display:block; width:100%; height:100%; }

html, body { height: 100%; }
body { margin: 0; }

.wrap { padding: 0; }

.stage{
  width: 100%;
  height: 70vh;         /* ✅ tydlig höjd */
  min-height: 420px;    /* ✅ aldrig 0 */
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  position: relative;
}

canvas{
  display: block;
  width: 100%;
  height: 100%;
}

.stage {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .stage {
    height: 100dvh;
  }
}

.stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 220ms ease;
}

.stage.stage--startup-masked canvas {
  opacity: 0.1;
}


.cab-add-zone{
  position:absolute;
  top:0;
  bottom:0;
  width:84px;
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition: opacity .15s ease;
}
.cab-add-zone--left{ left:0; }
.cab-add-zone--right{ right:0; }

#stage:hover .cab-add-zone{ opacity:1; }

.cab-add-pill{
        color: #000;
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  user-select:none;
}
.cab-add-zone:hover .cab-add-pill{
  background: rgba(255,255,255,.92);
  transform: scale(1.03);
}

.kitchenlab-brand {
  position: fixed;
  left: 20px;
  bottom: 22px;
  display: block;
  pointer-events: none;
  z-index: 31;
  opacity: 0.92;
}

.kitchenlab-brand-logo {
  width: 160px;
  height: auto;
  display: block;
}

@media (min-width: 769px) {
  .kitchenlab-brand-logo {
    width: 210px;
  }
}

@media (max-width: 900px) {
  .kitchenlab-brand {
    left: calc(9px + env(safe-area-inset-left, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .kitchenlab-brand-logo {
    width: min(160px, calc(100vw - 181px));
  }
}


#appLoader {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #ffffff 0%, #f5f6f7 65%, #eceef0 100%);
  color: #41454a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000000;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

#appLoader.is-opaque {
  background: radial-gradient(ellipse at center, #ffffff 0%, #f5f6f7 65%, #eceef0 100%);
}

/* Once faded out the loader is not painted at all; it fades in faster than out. */
#appLoader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.loader-inner {
  width: min(520px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  font-family: Aptos, sans-serif;
}

.app-loader-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 8px;
}

/* The status keeps its height: a longer text or the wait note must not move the
   centred group. The note hangs below the status, outside the layout. */
.loader-status { position: relative; width: 100%; margin-top: 20px; }
.loader-wait-note {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #41454a;
}

/* Decorative cabinets: no assets or dependency on the scene renderer. Each loop
   slides four different cabinets in from the sides as wireframes, gives them
   solid faces one by one, turns the faces into light wood, lays the worktop
   and turns the row. Only transform and opacity animate, so the compositor
   keeps it smooth while the main thread builds the kitchen.
   Timeline (7.5 s): slide-in 2-23 %, solid faces 27-47 %, wood 48-62 %,
   worktop 62-75 %, turn 0-75 %, hold, fade 86-97 %. */
.app-loader-kitchen {
  width: min(260px, 100%);
  margin-bottom: 32px;
  height: 110px;
  flex: 0 0 110px;
  perspective: 600px;
  animation: loader-kitchen-fade 7.5s ease-in-out infinite;
  pointer-events: none;
}
.app-loader-kitchen-row {
  position: relative;
  width: 184px;
  height: 62px;
  margin: 22px auto 0;
  transform: rotateX(-18deg) rotateY(-25deg);
  transform-style: preserve-3d;
  animation: loader-kitchen-orbit 7.5s ease-in-out infinite;
}
.app-loader-cabinet {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 62px;
  --cabinet-x: 0px;
  --cabinet-start-x: -110px;
  --loader-line: rgb(99 96 89 / 22%);
  --loader-handle: #a7a095;
  transform: translate3d(var(--cabinet-x), 0, 0);
  transform-style: preserve-3d;
  animation: loader-cabinet-slide-1 7.5s ease-out infinite;
}
.app-loader-cabinet:nth-child(2) { --cabinet-x: 46px; --cabinet-start-x: -64px; animation-name: loader-cabinet-slide-2; }
.app-loader-cabinet:nth-child(3) { --cabinet-x: 92px; --cabinet-start-x: 202px; animation-name: loader-cabinet-slide-3; }
.app-loader-cabinet:nth-child(4) { --cabinet-x: 138px; --cabinet-start-x: 248px; animation-name: loader-cabinet-slide-4; }
/* The two left cabinets come in from the left, the two right ones from the right. */
@keyframes loader-cabinet-slide-1 { 0%, 2% { transform: translate3d(var(--cabinet-start-x), 0, 0); } 14%, 100% { transform: translate3d(var(--cabinet-x), 0, 0); } }
@keyframes loader-cabinet-slide-2 { 0%, 5% { transform: translate3d(var(--cabinet-start-x), 0, 0); } 17%, 100% { transform: translate3d(var(--cabinet-x), 0, 0); } }
@keyframes loader-cabinet-slide-3 { 0%, 8% { transform: translate3d(var(--cabinet-start-x), 0, 0); } 20%, 100% { transform: translate3d(var(--cabinet-x), 0, 0); } }
@keyframes loader-cabinet-slide-4 { 0%, 11% { transform: translate3d(var(--cabinet-start-x), 0, 0); } 23%, 100% { transform: translate3d(var(--cabinet-x), 0, 0); } }
/* Fade the faces, never the preserve-3d containers: container opacity flattens
   boxes. The faces fill in one cabinet at a time, then turn into light wood. */
.app-loader-cabinet > span {
  position: absolute;
  display: block;
  backface-visibility: hidden;
  opacity: 0;
  animation: loader-face-1 7.5s ease-out infinite;
}
.app-loader-cabinet:nth-child(2) > span { animation-name: loader-face-2; }
.app-loader-cabinet:nth-child(3) > span { animation-name: loader-face-3; }
.app-loader-cabinet:nth-child(4) > span { animation-name: loader-face-4; }
@keyframes loader-face-1 { 0%, 27% { opacity: 0; } 35%, 100% { opacity: 1; } }
@keyframes loader-face-2 { 0%, 31% { opacity: 0; } 39%, 100% { opacity: 1; } }
@keyframes loader-face-3 { 0%, 35% { opacity: 0; } 43%, 100% { opacity: 1; } }
@keyframes loader-face-4 { 0%, 39% { opacity: 0; } 47%, 100% { opacity: 1; } }
/* Light wood, one plain colour: a layer inside each face, so it lies in the
   face's own plane, fades in over the pale surface one cabinet at a time.
   On the front it carries its own frame, panel lines and handles in brown,
   so the grey lines of the pale cabinet turn brown with the wood. */
.app-loader-cabinet > span > i {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: var(--loader-wood, #e2d8c8);
  animation: loader-wood-1 7.5s ease-in-out infinite;
}
.app-loader-cabinet:nth-child(2) > span > i { animation-name: loader-wood-2; }
.app-loader-cabinet:nth-child(3) > span > i { animation-name: loader-wood-3; }
.app-loader-cabinet:nth-child(4) > span > i { animation-name: loader-wood-4; }
.app-loader-cabinet-front > i { inset: -1px; border: 1px solid #d3bb98; --loader-line: rgb(150 112 68 / 20%); --loader-handle: #b89d7a; }
.app-loader-cabinet-front { --loader-wood: #e2d8c8; }
.app-loader-cabinet-side { --loader-wood: #c6b8a2; }
.app-loader-cabinet-top { --loader-wood: #ece6db; }
.app-loader-cabinet-left { --loader-wood: #d3c7b3; }
.app-loader-cabinet-back { --loader-wood: #d6cbb8; }
.app-loader-cabinet-bottom { --loader-wood: #b7aa94; }
@keyframes loader-wood-1 { 0%, 48% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes loader-wood-2 { 0%, 50% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes loader-wood-3 { 0%, 52% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes loader-wood-4 { 0%, 54% { opacity: 0; } 62%, 100% { opacity: 1; } }
/* The wireframe shares the faces' geometry; its see-through faces show every edge. */
.app-loader-wire {
  position: absolute;
  inset: 0;
  --loader-line: #9d9282;
  --loader-handle: #9d9282;
  transform-style: preserve-3d;
}
@keyframes loader-wire-1 { 0%, 2% { opacity: 0; } 6%, 29% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes loader-wire-2 { 0%, 5% { opacity: 0; } 9%, 33% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes loader-wire-3 { 0%, 8% { opacity: 0; } 12%, 37% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes loader-wire-4 { 0%, 11% { opacity: 0; } 15%, 41% { opacity: 1; } 49%, 100% { opacity: 0; } }
.app-loader-cabinet-front {
  inset: 0;
  background-color: #e3dfd8;
  border: 1px solid #c2bdb4;
  transform: translateZ(18px);
}
/* A door: an inset panel and a handle at the top. */
.app-loader-cabinet-front::before, .app-loader-cabinet-front > i::before {
  content: "";
  position: absolute;
  inset: 6px 4px 5px;
  border: 1px solid var(--loader-line);
}
.app-loader-cabinet-front::after, .app-loader-cabinet-front > i::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 2px;
  top: 11px;
  left: 17px;
  background: var(--loader-handle);
}
/* Drawers: dividing lines and a handle on every drawer. */
.app-loader-cabinet--drawers .app-loader-cabinet-front::before, .app-loader-cabinet--drawers .app-loader-cabinet-front > i::before,
.app-loader-cabinet--drawers-two .app-loader-cabinet-front::before, .app-loader-cabinet--drawers-two .app-loader-cabinet-front > i::before {
  inset: 0;
  border: 0;
  background: linear-gradient(to bottom, transparent calc(33.3% - 1px), var(--loader-line) calc(33.3% - 1px) 33.3%, transparent 33.3% calc(66.6% - 1px), var(--loader-line) calc(66.6% - 1px) 66.6%, transparent 66.6%);
}
.app-loader-cabinet--drawers .app-loader-cabinet-front::after, .app-loader-cabinet--drawers .app-loader-cabinet-front > i::after { top: 8px; box-shadow: 0 20px 0 var(--loader-handle), 0 40px 0 var(--loader-handle); }
.app-loader-cabinet--drawers-two .app-loader-cabinet-front::before, .app-loader-cabinet--drawers-two .app-loader-cabinet-front > i::before {
  background: linear-gradient(to bottom, transparent calc(40% - 1px), var(--loader-line) calc(40% - 1px) 40%, transparent 40%);
}
.app-loader-cabinet--drawers-two .app-loader-cabinet-front::after, .app-loader-cabinet--drawers-two .app-loader-cabinet-front > i::after { top: 9px; box-shadow: 0 26px 0 var(--loader-handle); }
.app-loader-cabinet-side {
  width: 36px;
  height: 62px;
  background-color: #b9b3a8;
  transform: translateX(28px) rotateY(90deg);
}
.app-loader-cabinet-top {
  width: 46px;
  height: 36px;
  background-color: #f1efea;
  transform: translateY(-18px) rotateX(90deg);
}
.app-loader-cabinet-left {
  width: 36px;
  height: 62px;
  background-color: #c7c1b7;
  transform: translateX(-18px) rotateY(-90deg);
}
.app-loader-cabinet-back {
  width: 46px;
  height: 62px;
  background-color: #cec8be;
  transform: translateZ(-18px) rotateY(180deg);
}
.app-loader-cabinet-bottom {
  width: 46px;
  height: 36px;
  background-color: #a7a095;
  transform: translateY(44px) rotateX(-90deg);
}
/* After the face colours: the wireframe keeps only the edges. */
.app-loader-wire > span {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 1px solid #9d9282;
  background: transparent;
  opacity: 0;
  animation: loader-wire-1 7.5s ease-in-out infinite;
}
.app-loader-cabinet:nth-child(2) .app-loader-wire > span { animation-name: loader-wire-2; }
.app-loader-cabinet:nth-child(3) .app-loader-wire > span { animation-name: loader-wire-3; }
.app-loader-cabinet:nth-child(4) .app-loader-wire > span { animation-name: loader-wire-4; }
@keyframes loader-kitchen-orbit {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  75%, 100% { transform: rotateX(-22deg) rotateY(360deg); }
}
.app-loader-countertop {
  position: absolute;
  left: -3px;
  top: -4px;
  width: 190px;
  height: 4px;
  transform-style: preserve-3d;
  animation: loader-countertop-place 7.5s ease-in-out infinite;
}
.app-loader-countertop > span { position: absolute; display: block; backface-visibility: hidden; animation: loader-countertop-face 7.5s linear infinite; }
@keyframes loader-countertop-face { 0%, 62% { opacity: 0; } 62.0001%, 100% { opacity: 1; } }
.app-loader-countertop-front, .app-loader-countertop-back { width: 190px; height: 4px; background: #c4beb4; }
.app-loader-countertop-front { transform: translateZ(21px); }
.app-loader-countertop-back { transform: translateZ(-21px) rotateY(180deg); }
.app-loader-countertop-left, .app-loader-countertop-right { width: 42px; height: 4px; background: #aaa296; }
.app-loader-countertop-left { transform: translateX(-21px) rotateY(-90deg); }
.app-loader-countertop-right { transform: translateX(169px) rotateY(90deg); }
.app-loader-countertop-top, .app-loader-countertop-bottom { width: 190px; height: 42px; }
.app-loader-countertop-top { background: #dedbd5; transform: translateY(-21px) rotateX(90deg); }
.app-loader-countertop-bottom { background: #aaa296; transform: translateY(-17px) rotateX(-90deg); }
@keyframes loader-countertop-place {
  0%, 62% { transform: translateY(-19.6px) rotateX(22.5deg); }
  75%, 100% { transform: translateY(0) rotateX(0deg); }
}
/* The worktop comes down grey and lands light brown: a warm layer of the same
   lightness inside each face fades in while it lands. */
.app-loader-countertop > span > i { position: absolute; inset: 0; opacity: 0; background: var(--loader-top-warm, #cbbca5); animation: loader-countertop-warm 7.5s ease-in-out infinite; }
.app-loader-countertop-front, .app-loader-countertop-back { --loader-top-warm: #cbbca5; }
.app-loader-countertop-left, .app-loader-countertop-right, .app-loader-countertop-bottom { --loader-top-warm: #b2a088; }
.app-loader-countertop-top { --loader-top-warm: #e4d8c6; }
@keyframes loader-countertop-warm { 0%, 65% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes loader-kitchen-fade { 0%, 97%, 100% { opacity: 0; } 4%, 86% { opacity: 1; } }
#appLoader.hidden .app-loader-kitchen, #appLoader.hidden .app-loader-kitchen * { animation-play-state: paused; }
.loader-text { min-height: 2.8em; }
@media (prefers-reduced-motion: reduce) {
  #appLoader .app-loader-kitchen, #appLoader .app-loader-kitchen-row, #appLoader .app-loader-countertop, #appLoader .app-loader-cabinet { animation: none; opacity: 1; visibility: visible; }
  #appLoader .app-loader-cabinet > span, #appLoader .app-loader-cabinet > span > i { animation: none; opacity: 1; }
  #appLoader .app-loader-countertop > span, #appLoader .app-loader-countertop > span > i { animation: none; opacity: 1; }
  #appLoader .app-loader-wire { display: none; }
  #appLoader, #appLoader.hidden { transition: none; }
}

.kitchen-booking-status { margin-top: 16px; }
.kitchen-booking-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.kitchen-booking-actions a, .kitchen-booking-actions button {
  border: 1px solid #8c7b65; border-radius: 10px; padding: 12px 18px;
  color: #41454a; background: white; font: inherit; cursor: pointer; text-decoration: none;
}
.kitchen-booking-actions [hidden], .kitchen-booking-actions[hidden] { display: none !important; }
#appLoader.kitchen-booking-page { overflow: auto; padding: 24px 0; box-sizing: border-box; }
.kitchen-booking-page .loader-inner { margin: auto; }
.loader-text {
    line-height: 1.4;
    font-size: 16px;
    color: #8a8f95;
    margin: 0;
    letter-spacing: 0.01em;
}

/* A highlight passes over the status text. It is a moving layer that only
   lightens what is darker than itself - the text, never the pale background -
   so it runs on the compositor instead of repainting the text every frame. */
.loader-text { position: relative; overflow: hidden; }
.loader-text::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, #e1e4e8 50%, transparent 60%);
  mix-blend-mode: lighten;
  transform: translate3d(-100%, 0, 0);
  animation: loader-text-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}
.hidden .loader-text::after { animation-play-state: paused; }
@keyframes loader-text-shimmer {
  0% { transform: translate3d(-100%, 0, 0); }
  85%, 100% { transform: translate3d(100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .loader-text::after { content: none; animation: none; }
}

/* Offered during a long startup wait, below the wait note and outside the
   layout, so the centred loader does not move. */
.app-loader-retry--waiting { position: absolute; top: calc(100% + 58px); left: 50%; transform: translateX(-50%); margin: 0 !important; white-space: nowrap; }
.app-loader-retry {
    margin-top: 16px;
    padding: 10px 20px;
    border: 1px solid currentColor;
    border-radius: 10px;
    color: #41454a;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.kitchen-price-plate{
    z-index: 50;
    background: rgba(255, 255, 255, 1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 9px 12px;
    box-shadow: none;
    width: 212px;
    font-family: Aptos, sans-serif;
    color: #1f1f1f;
    pointer-events: auto;
}

.kitchen-price-plate-title{ font-weight: 600; font-size: 14px; opacity: .75; }
.kitchen-price-plate-value{ font-weight: 800; font-size: 28px;     margin-top: -4px; }
.kitchen-price-plate-sub{ font-size: 12px; opacity: .7; margin-top: 6px; }

.kitchen-price-plate-toggle{
  margin-top: 8px;
  width: 100%;
}

.kitchen-price-plate-details{ margin-top: 8px; }
.kitchen-price-plate-list{ margin: 0; padding-left: 18px; }
.kitchen-price-plate-item{ font-size: 12px; opacity: .85; margin: 4px 0; }

.kitchen-brand-stack{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kitchen-price-plate {
    position: fixed;
    right: 20px;
    bottom: 20px;
    top: auto;
    left: auto;
    box-shadow: none;
}


/* The logo's proportions are known before it loads, so the centred loader
   does not move when it arrives. */
img.kitchenlab-logo-loader {
  width: min(400px, 72vw);
  aspect-ratio: 1187 / 189;
  filter: brightness(0) saturate(100%) invert(26%) sepia(6%) saturate(604%) hue-rotate(174deg) brightness(94%) contrast(88%);
  height: auto;
  padding: 0;
  margin: 0;
}