/* Eén visuele schaal voor breedte en hoogte: 2 px staat voor 1 cm. */
.lumo-visual {
  height: 180px;
}

.lumo-module,
.lumo-low,
.lumo-desk {
  height: 100px;
}

.lumo-high {
  height: 160px;
}

.lumo-desk {
  background: linear-gradient(to bottom, transparent 0 60%, #efe8de 60%);
}

/* Fotorealistische modulebouw: breedte en hoogte volgen de echte maatverhouding. */
.lumo-visual {
  height: auto;
}

.lumo-photo-module,
.lumo-photo-module.lumo-high,
.lumo-photo-module.lumo-low,
.lumo-photo-module.lumo-desk {
  height: auto;
  aspect-ratio: var(--module-aspect, 1);
  background: transparent;
}

/* Iedere 50 cm-module houdt dezelfde schaal, ook wanneer de kast breder wordt. */
.lumo-photo-stage {
  overflow-x: auto;
  overflow-y: hidden;
}

.lumo-visual {
  width: calc(var(--module-count) * 20.333%);
}

.lumo-visual.is-wide {
  left: 5%;
  transform: none;
}

.lumo-photo-module {
  overflow: visible;
  margin-right: -1px;
}

/* De verschillende transparante uitsneden worden hier exact gelijkgetrokken. */
.lumo-photo-module img {
  position: absolute;
  max-width: none;
}

.lumo-photo-module.lumo-high img {
  width: 110.1%;
  height: 101.4%;
  left: -10.1%;
  top: -1.4%;
  transform: translateX(5.5%) scaleX(1.307);
  transform-origin: center bottom;
}

.lumo-photo-module.lumo-low img {
  width: 100.1%;
  height: 100.7%;
  left: 0;
  top: -.7%;
  transform: scaleX(1.307);
  transform-origin: center bottom;
}

.lumo-photo-module.lumo-desk img {
  width: 103.2%;
  height: 14%;
  left: -1.6%;
  top: 6%;
  transform: scaleX(1.08);
  transform-origin: center top;
}

/* Maatvaste Lumo-tekening: 2 px staat voor 1 cm. */
.lumo-visual-wrap {
  overflow-x: auto;
  padding: 22px 18px 10px;
  background: #fff;
}

.lumo-drawing-visual,
.lumo-drawing-visual.is-wide {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: max-content;
  min-width: 100%;
  height: 220px;
  padding: 20px 14px 38px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  border-bottom: 3px solid #c7bcae;
}

.lumo-drawing-module {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  background: var(--module-body, #d5c0a7);
  border: 2px solid var(--module-edge, #ad967c);
  border-bottom: 0;
  transition: background .2s, border-color .2s;
}

.lumo-drawing-high {
  height: 160px;
}

.lumo-drawing-low,
.lumo-drawing-desk {
  height: 100px;
}

.lumo-drawing-desk {
  border: 0;
  background: transparent;
}

.lumo-drawing-worktop {
  position: absolute;
  /* Het blad vult alleen de vrije ruimte tussen de twee kastrompen. */
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: var(--module-top, #d5c0a7);
  border-top: 2px solid var(--module-top-edge, #ad967c);
  border-bottom: 2px solid var(--module-top-edge, #ad967c);
  box-sizing: border-box;
  z-index: 0;
}

/* Smalle aansluitnaden maken zichtbaar dat het blad ín het kastframe zit. */
.lumo-drawing-worktop::before,
.lumo-drawing-worktop::after {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--module-top-edge, #ad967c);
}

.lumo-drawing-worktop::before { left: 0; }
.lumo-drawing-worktop::after { right: 0; }

.lumo-drawing-door {
  position: absolute;
  inset: 5px;
  background: var(--module-front, #d5c0a7);
  border: 1px solid var(--module-front-edge, #b8a087);
}

.lumo-drawing-top {
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  height: 9px;
  z-index: 2;
  background: var(--module-top, #d5c0a7);
  border: 2px solid var(--module-top-edge, #ad967c);
  box-sizing: border-box;
}

.lumo-drawing-module small {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  text-align: center;
  font-size: .62rem;
  line-height: 1.2;
  color: #666;
}