/* Kleuren en letter volgen het live thema (settings_data: color_palette, Inter). */
:root {
  --wit: #ffffff;
  --inkt: #242320;
  --grijs: #68665f;
  --zand: #f2f1ee;
  --lijn: #deddd7;
  --kiezer-hoogte: 72px;  /* de knop "Kies een product" boven het totaal */
  --cat-breedte: 0px;   /* op een breed scherm de catalogus naast de foto */
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--inkt);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--wit); overscroll-behavior: none; }
[hidden] { display: none !important; }
/* Alleen voor een schermlezer. */
.voorlezen { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button { font: inherit; color: inherit; cursor: pointer; }

/* vh eerst: oudere browsers kennen dvh niet en zouden de regel anders overslaan. */
#app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; touch-action: manipulation; }
#app[data-fase="start"] .werk { display: none; }
#app:not([data-fase="start"]) .start { display: none; }

/* Startscherm */
.start { flex: 1; display: flex; flex-direction: column; background: var(--zand); overflow-y: auto; }
.start-beeld { flex: 0 0 36vh; flex: 0 0 36dvh; background: url("voorbeeld/kamer.jpg") center 58% / cover; }
.start-inhoud { padding: 28px 24px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; max-width: 520px; width: 100%; margin: 0 auto; }
.merk { margin: 0; font-size: 11px; letter-spacing: 0.22em; color: var(--grijs); }
h1 { margin: 0; font-size: 34px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.intro { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--grijs); }
.knop { position: relative; display: flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border-radius: 100px; font-size: 15px; font-weight: 600; border: 1px solid var(--inkt); cursor: pointer; user-select: none; }
.knop-vol { background: var(--inkt); color: var(--wit); }
.knop-rand { background: transparent; }
.knop-smal { height: 46px; padding: 0 22px; font-size: 14px; }
.knop:disabled { opacity: 0.35; cursor: default; }
/* Het bestandsveld blijft met het toetsenbord bereikbaar; de knop eromheen toont de focus. */
.verborgen { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.knop:has(:focus-visible) { outline: 2px solid var(--inkt); outline-offset: 3px; }
.tekstknop { background: none; border: 0; padding: 10px; font-size: 14px; color: var(--grijs); text-decoration: underline; text-underline-offset: 3px; }
.tips { margin: 8px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--lijn); display: grid; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--grijs); }
.tips li { padding-left: 18px; position: relative; }
.tips li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--inkt); }

/* Werkscherm */
.werk { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--inkt); }
.balk { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 6px; padding-top: env(safe-area-inset-top); background: var(--inkt); color: var(--wit); box-sizing: content-box; }
.balktitel { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.balkknop { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; background: none; border: 0; font-size: 13px; color: var(--wit); }
.balkknop:last-child { justify-self: end; }
.balkknop:disabled { opacity: 0.35; }
.balkknop svg, .gereedschap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.podium { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.doek { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
#canvas { display: block; width: 100%; height: 100%; }

.meetlaag { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 20px; background: rgba(36, 35, 32, 0.34); overflow: hidden; }
.meetlijn { position: absolute; left: 0; right: 0; height: 28%; top: -28%; background: linear-gradient(to bottom, transparent, rgba(255, 244, 222, 0.34) 88%, rgba(255, 250, 240, 0.95) 99%, transparent); animation: meet 2.1s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes meet { to { top: 100%; } }
.meetkaart { position: relative; width: min(100%, 340px); padding: 18px 20px; background: var(--wit); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.meettitel { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.meetbalk { height: 3px; background: var(--lijn); border-radius: 3px; overflow: hidden; }
.meetbalk i { display: block; height: 100%; width: 0; background: var(--inkt); transition: width 0.3s; }
.meetbalk.onbepaald i { width: 35%; animation: schuif 1.2s ease-in-out infinite; }
@keyframes schuif { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
.meetuitleg { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--grijs); }

.gereedschap { position: absolute; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--wit); border-radius: 100px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28); transform: translate(-50%, -100%); white-space: nowrap; z-index: 3; }
.gereedschap button { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; }
.gereedschap button:active { background: var(--zand); }
.maat { padding: 0 8px 0 12px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Past de balk niet naast elkaar op het scherm, dan staat de maat boven de knoppen (vier knoppen, of vijf met de wisselknop). */
.gereedschap.hoog { display: grid; grid-template-columns: repeat(4, 40px); padding-top: 6px; border-radius: 26px; }
.gereedschap.hoog.vijf { grid-template-columns: repeat(5, 40px); }
.gereedschap.hoog .maat { grid-column: 1 / -1; padding: 2px 8px; text-align: center; }

.wenk { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); margin: 0; padding: 9px 16px; max-width: calc(100% - 28px); background: rgba(36, 35, 32, 0.82); color: var(--wit); font-size: 13px; line-height: 1.35; text-align: center; border-radius: 100px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; z-index: 2; }

/* De knop naar de productkiezer (telefoon) */
.kiezer { flex: none; padding: 12px 14px 0; background: var(--wit); border-radius: 18px 18px 0 0; }
.kiesknop { width: 100%; gap: 8px; font-family: inherit; }
.kiesknop svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.kiesknop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
/* Tijdens het opmeten valt er nog niets te kiezen. */
.kiezer[inert] { opacity: 0.55; }

/* Productkiezer: opgebouwd als het menu van de winkel. Eerst de categorieën, daarna de producten van de gekozen
   categorie. Op een telefoon vult hij het hele scherm. Maten en kleuren volgen het menu van het live thema
   (nagemeten op 2026-10-10: zandkleurig vlak, Inter 18 px vet voor een groep, 15 px voor wat eronder valt). */
.catalogus { position: fixed; inset: 0; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); background: var(--zand); z-index: 31; }
.cat-kop { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 14px 20px 8px; }
.cat-kop h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.cat-terug { display: inline-flex; align-items: center; gap: 4px; height: 44px; margin-left: -8px; padding: 0 12px 0 2px; background: none; border: 0; border-radius: 100px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.cat-terug svg, .menu-rij svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.catalogus .sluit { flex: none; margin-left: auto; background: var(--wit); }
.zoek { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; margin: 0 20px 10px; padding: 0 16px; background: var(--wit); border-radius: 100px; color: var(--grijs); }
.zoek svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.zoek:focus-within { outline: 2px solid var(--inkt); outline-offset: 1px; }
/* 16 px: bij een kleinere letter zoomt een iPhone in zodra het veld wordt aangetikt. */
.zoek input { flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--inkt); appearance: none; -webkit-appearance: none; }
.zoek input::placeholder { color: var(--grijs); }
.zoek input::-webkit-search-decoration { -webkit-appearance: none; }

/* Het menu: categorieën waarvan er producten met een 3D-model zijn. */
.cat-menu, .cat-lijst { flex: 1; min-height: 0; padding: 12px 20px calc(32px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.menu-kop, .cat-pad { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--grijs); }
.cat-menu ul { margin: 0; padding: 0; list-style: none; }
.menu-rij, .menu-sub { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; background: none; border: 0; border-radius: 8px; text-align: left; user-select: none; -webkit-user-select: none; }
.menu-rij { min-height: 48px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.menu-sub { min-height: 40px; font-size: 15px; }
.menu-rij span, .menu-sub span { flex: 1; min-width: 0; }
.menu-rij small, .menu-sub small { flex: none; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--grijs); font-variant-numeric: tabular-nums; }
.menu-sub small { margin-right: 32px; } /* onder het pijltje van de groep erboven uit de lijn */
.menu-rij[aria-expanded] svg { transition: transform 0.18s; }
.menu-rij[aria-expanded="true"] svg { transform: rotate(180deg); }
.cat-menu ul ul { padding-bottom: 8px; }
.cat-terug:focus-visible, .menu-rij:focus-visible, .menu-sub:focus-visible, .tegel:focus-visible, .keuze-rij:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }

/* De producten van een categorie, of wat de klant zoekt. */
.cat-naam { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; outline: 0; }
.cat-aantal { margin: 4px 0 16px; font-size: 13px; line-height: 1.45; color: var(--grijs); }
.rooster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; align-content: start; }
.foto { position: relative; display: block; overflow: hidden; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; }
.foto img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
/* Uitverkocht: alleen een label, het product zelf blijft gewoon te bekijken en te plaatsen. */
.foto em { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; background: rgba(255, 255, 255, 0.94); border-radius: 100px; font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.3; color: var(--inkt); }
.tegel { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; background: none; border: 0; border-radius: 12px; text-align: left; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tegel.vast { opacity: 0.4; }
.tegel .foto { width: 100%; aspect-ratio: 1; margin-bottom: 6px; border-radius: 12px; }
/* Het plusje: tikken zet het product in de kamer. */
.tegel .foto i { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; background: var(--inkt); }
.tegel .foto i::before, .tegel .foto i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; background: var(--wit); border-radius: 2px; }
.tegel .foto i::after { transform: rotate(90deg); }
.tegel b { font-size: 14px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tegel small { font-size: 12.5px; line-height: 1.3; color: var(--grijs); font-variant-numeric: tabular-nums; }
.tegel .prijs { margin-top: 1px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.totaal { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--wit); }
.totaaltekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.totaaltekst strong { font-size: 14px; }
.totaaltekst span { font-size: 12.5px; color: var(--grijs); font-variant-numeric: tabular-nums; }

.zweef { position: fixed; left: 0; top: 0; width: 76px; height: 76px; margin: -92px 0 0 -38px; object-fit: cover; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); pointer-events: none; z-index: 20; }

/* Lijst */
.scherm { position: fixed; inset: 0; background: rgba(36, 35, 32, 0.5); z-index: 30; }
.scherm.boven { z-index: 32; } /* de keuze van een uitvoering ligt ook over de productkiezer heen */
.blad { position: fixed; left: 0; right: 0; bottom: 0; max-height: 82vh; max-height: 82dvh; display: flex; flex-direction: column; background: var(--wit); border-radius: 20px 20px 0 0; z-index: 31; max-width: 560px; margin: 0 auto; }
.blad header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 8px; }
.blad h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.sluit { width: 44px; height: 44px; background: var(--zand); border: 0; border-radius: 50%; font-size: 22px; line-height: 1; }
.blad ul { margin: 0; padding: 0 20px; list-style: none; overflow-y: auto; }
.blad li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.blad li img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--zand); }
.blad li a { color: inherit; font-size: 14px; font-weight: 600; text-decoration: none; }
.blad li small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--grijs); }
.blad li strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.blad-voet { padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.blad-som { display: flex; justify-content: space-between; font-size: 15px; }
.klein { margin: 0; font-size: 12px; line-height: 1.45; color: var(--grijs); }

/* Keuze van een uitvoering */
.keuze { z-index: 33; }
.keuze-uitleg { margin: 0; padding: 0 20px 6px; font-size: 13px; line-height: 1.45; color: var(--grijs); }
.blad.keuze ul { padding-block: 4px; } /* ruimte voor de focusrand van de eerste en de laatste rij */
.blad.keuze li { display: block; padding: 0; }
.keuze .blad-voet { padding-top: 2px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.keuze-rij { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 10px 0; background: none; border: 0; border-radius: 10px; text-align: left; }
.keuze-rij .foto { width: 60px; height: 60px; }
.keuze-rij .foto img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: none; }
.keuze-rij b { display: block; font-size: 14px; font-weight: 600; }
.keuze-rij small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--grijs); font-variant-numeric: tabular-nums; }
.keuze-rij strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.keuze-rij[aria-current="true"] b::after { content: " (staat in je kamer)"; font-weight: 400; color: var(--grijs); }
.tekstlink { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; font-size: 13.5px; color: var(--inkt); text-underline-offset: 3px; }

.melding { position: fixed; left: calc(50% + var(--cat-breedte) / 2); bottom: calc(var(--kiezer-hoogte) + 86px); transform: translateX(-50%); margin: 0; padding: 12px 18px; max-width: calc(100% - 32px); background: var(--inkt); color: var(--wit); font-size: 13.5px; line-height: 1.4; border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); z-index: 40; text-align: center; pointer-events: none; }

@media (min-width: 900px) {
  :root { --kiezer-hoogte: 0px; --cat-breedte: 380px; }
  #app[data-fase="start"] .melding { left: 50%; }
  .start { flex-direction: row; }
  .start-beeld { flex: 1 1 55%; }
  .start-inhoud { flex: 0 1 480px; justify-content: center; padding: 48px; margin: 0; }
  h1 { font-size: 44px; }
  /* De productkiezer staat vast naast de foto; de knop om hem te openen is hier niet nodig. */
  .kiezer { display: none; }
  .werk { margin-left: var(--cat-breedte); }
  .catalogus { right: auto; width: var(--cat-breedte); padding-top: 0; border-right: 1px solid var(--lijn); z-index: 5; }
  .catalogus[inert] { opacity: 0.55; }
  #catalogus-sluit { display: none; }
  .cat-kop { padding-top: 22px; }
  .tegel { cursor: grab; }
  /* Lijst en keuze van uitvoering: midden boven de foto, niet midden op het scherm. */
  .blad { left: var(--cat-breedte); }
}
@media (min-width: 1280px) {
  :root { --cat-breedte: 440px; }
}

/* Op een telefoon schuift de productkiezer van links het beeld in, zoals het menu van de winkel. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .catalogus:not([hidden]) { animation: menu-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
}
@keyframes menu-in { from { transform: translateX(-100%); } }

/* Telefoon op zijn kant: te weinig hoogte om de kamer in te richten. */
.kantel { display: none; }
@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  .kantel { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 25; margin: 0; padding: 24px; background: var(--inkt); color: var(--wit); font-size: 15px; line-height: 1.45; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .meetlijn { display: none; }
  .meetbalk i { transition: none; }
  .meetbalk.onbepaald i { width: 100%; opacity: 0.35; animation: none; }
}