/* =========================================================================
   Configurator: de 3D-fles met kleur- en ontwerpkeuze.
   Hoort alleen bij fles.html. De rest van de site gebruikt dit niet.
   ========================================================================= */

.config {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 960px) {
  .config { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}

/* Op een telefoon viel de naam van de fles met de prijs eronder net buiten beeld:
   je zag het venster met de fles ophouden en daarna niets meer, en dan lijkt de
   pagina afgelopen. Boven het venster gaat er daarom wat lucht af en het venster
   is iets minder hoog, zodat kop en prijs er nog net onder vallen. Dat stukje
   tekst onderaan laat zien dat er verder te scrollen valt. De fles blijft het
   eerste en het grootste op de pagina. */
@media (max-width: 959.98px) {
  .section--config { padding-top: clamp(2.5rem, 6vh, 4rem); }
  .section--config .viewer { aspect-ratio: 1 / 1; }
}

/* ---- Het venster met de fles -------------------------------------------- */

/* Een lichte plek achter de fles, alsof er licht op het vlak valt. Een zwarte
   fles op een egaal vlak leest als een silhouet; met dit verloop krijgt hij
   een ruimte om in te staan. */
/* Kolom, geen laag over elkaar: het bijschrift krijgt zijn eigen strook onder
   het doek. Zweefde het eroverheen, dan liep het op een smal scherm dwars door
   de onderkant van de fles. */
.viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(115% 85% at 50% 16%, oklch(97.8% 0.006 85), transparent 64%),
    var(--paper-2);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  touch-action: pan-y;
}
.viewer canvas {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  cursor: grab;
}
.viewer canvas:active { cursor: grabbing; }

.viewer__hint {
  flex: none;
  margin: 0;
  padding-bottom: 1rem;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
.viewer[data-gedraaid="true"] .viewer__hint { opacity: 0; }

/* Zichtbaar zolang de 3D-weergave nog laadt of niet werkt. */
.viewer__terugval {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}
.viewer__terugval img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
}
.viewer__terugval p {
  position: relative;
  margin: 0;
  max-width: 26ch;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  background: var(--paper);
  padding: 0.6rem 0.9rem;
  border-radius: 2px;
}
.viewer[data-klaar="true"] .viewer__terugval { display: none; }

/* ---- Keuzes ------------------------------------------------------------- */

.keuze {
  border: 0;
  padding: 0;
  margin: 0 0 2.25rem;
  min-width: 0;
}
.keuze > legend {
  padding: 0;
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

/* De letterstijl hoort bij de gravering, dus staat die keuze erin genest. */
.keuze--sub { margin: 1.5rem 0 0; }
.keuze--sub[hidden] { display: none; }

.keuze__uitleg {
  margin: -0.35rem 0 1.1rem;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  max-width: 46ch;
}

.kleuren { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.kleur {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.95rem 0.45rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 200ms var(--ease);
}
.kleur:hover { border-color: var(--ink-3); }
.kleur[data-aan="true"] { border-color: var(--ink); }
.kleur:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.kleur input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kleur i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(28, 32, 30, 0.16);
}
.kleur span { font-size: var(--fs-sm); color: var(--ink-2); }
.kleur[data-aan="true"] span { color: var(--ink); }

/* Zes graveringen: twee rijen van drie zodra het kan, anders drie rijen van twee. */
.ontwerpen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (min-width: 460px) {
  .ontwerpen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Bij een enkele kleur verbergt de configurator de kleurregel. */
.specs > div[hidden] { display: none; }

.ontwerp { cursor: pointer; display: block; }
.ontwerp input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ontwerp canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 200ms var(--ease);
}
.ontwerp:hover canvas { border-color: var(--ink-3); }
.ontwerp[data-aan="true"] canvas { border-color: var(--ink); }
.ontwerp:has(input:focus-visible) canvas { outline: 2px solid var(--accent); outline-offset: 2px; }
.ontwerp span {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--ink-3);
  text-align: center;
}
.ontwerp[data-aan="true"] span { color: var(--ink); }

/* ---- Tekstveld en letterstijl ------------------------------------------ */

.veld { margin-top: 1.25rem; }
.veld[hidden] { display: none; }
/* Het opschrift boven een invoerveld. Alleen labels die direct in .veld staan,
   niet de knop voor het bestand: die staat een niveau dieper en heeft zijn
   eigen vorm. .veld__kop is dezelfde regel boven een keuze die geen invoerveld
   is, zodat "naam" en "eigen ontwerp" er hetzelfde uitzien. */
.veld > label,
.veld__kop {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: 0.45rem;
}
.veld input[type="text"] {
  width: 100%;
  max-width: 20rem;
  height: 48px;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  color: var(--ink);
}
.veld input[type="text"]:focus-visible { border-color: var(--accent); outline-offset: 1px; }

/* ---- Eigen afbeelding --------------------------------------------------- */

.bestand-rij { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.bestand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.bestand:hover { background: var(--ink); color: var(--paper); }
.bestand:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bestand input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Sommige foto's lezen beter andersom, dus kan de klant de gravering omkeren. */
.omkeren {
  min-height: 48px;
  padding: 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.omkeren:hover { border-color: var(--ink-3); color: var(--ink); }
.omkeren[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.omkeren[hidden] { display: none; }

.veld__uitleg {
  margin: 0.85rem 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  max-width: 46ch;
}

/* Elke knop staat in zijn eigen letter, dus de knop is meteen het voorbeeld.
   De lettergrootte verschilt per stijl zodat ze even groot ogen. */
.letters { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.letter:hover { border-color: var(--ink-3); }
.letter[data-aan="true"] { border-color: var(--ink); color: var(--ink); }
.letter:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.letter input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.letter span { font-size: 1.0625rem; line-height: 1.2; }

/* ---- Samenvatting en bestelknop ---------------------------------------- */

.samenvatting {
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}
.samenvatting dl { margin: 0 0 1.75rem; }
.samenvatting .btn-row { margin-top: 0; }

.deel__uitleg {
  margin: 1rem 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  max-width: 46ch;
}