/*
 * Configurator op de productpagina. Basisopmaak in de huisstijl (zwart, wit, rood #8E0C12);
 * de pagina zelf staat in Breakdance (template Productpagina, 170).
 */

.xxlt-config { width: 100%; }
.xxlt-config .button { cursor: pointer; }
.xxlt-config__start .button, .xxlt-config__submit {
  width: 100%; padding: 14px 20px; border: 0; background: #111; color: #fff; font-size: 16px; font-weight: 700;
}
.xxlt-config__progress {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: stap;
}
.xxlt-config__progress li {
  flex: 1 1 0; min-width: 80px; padding: 8px 6px; border-bottom: 3px solid #E9E9E9;
  font-size: 12px; font-weight: 600; color: #8C8C8C; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xxlt-config__progress li.is-done { border-color: #111; color: #111; }
.xxlt-config__progress li.is-current { border-color: #8E0C12; color: #111; }
.xxlt-config__status { margin: 0 0 8px; font-size: 13px; color: #565656; }
.xxlt-config__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.xxlt-config__legend { margin: 0 0 12px; padding: 0; font-size: 20px; font-weight: 700; color: #111; }
.xxlt-config__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.xxlt-config__choice {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px;
  border: 1.5px solid #E9E9E9; background: #fff; cursor: pointer; transition: border-color 0.15s ease;
}
.xxlt-config__choice:hover { border-color: #8C8C8C; }
.xxlt-config__choice:has(input:checked) { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.xxlt-config__choice:has(input:focus-visible) { outline: 2px solid #111; outline-offset: 2px; }
.xxlt-config__choice input { position: absolute; opacity: 0; pointer-events: none; }
.xxlt-config__choice.is-unavailable { opacity: 0.5; cursor: not-allowed; }
.xxlt-config__visual { display: block; aspect-ratio: 1; overflow: hidden; background: #F6F6F6; }
.xxlt-config__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xxlt-config__visual--color { background: var(--xxlt-kleur); border: 1px solid #E9E9E9; border-radius: 50%; width: 44px; height: 44px; aspect-ratio: auto; }
.xxlt-config__visual--none { display: none; }
.xxlt-config__name { font-size: 14px; font-weight: 600; color: #111; }
.xxlt-config__price { font-size: 13px; color: #565656; }
.xxlt-config__note { font-size: 12px; font-weight: 600; color: #8E0C12; }
.xxlt-config__lines { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin: 0 0 12px; }
.xxlt-config__lines dt { margin: 0; color: #111; }
.xxlt-config__lines dd { margin: 0; text-align: right; color: #565656; white-space: nowrap; }
.xxlt-config__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: 12px; border-top: 1px solid #E9E9E9; font-size: 16px; }
.xxlt-config__total strong { font-size: 22px; color: #111; }
.xxlt-config__nav { display: flex; gap: 8px; margin-top: 18px; }
.xxlt-config__nav .button { flex: 1 1 0; padding: 13px 16px; border: 1.5px solid #111; background: #fff; color: #111; font-weight: 700; }
.xxlt-config__nav .xxlt-config__next { background: #111; color: #fff; }
.xxlt-config__nav .button:disabled { opacity: 0.4; cursor: not-allowed; }
.xxlt-config__nav .xxlt-config__submit { flex: 2 1 0; background: #111; color: #fff; }
.xxlt-config [hidden] { display: none !important; }