.sspc-configurator { --sspc-ink:#1e1e20; --sspc-muted:#696a70; --sspc-line:#dedfe2; --sspc-accent:#e75625; --sspc-soft:#f6f6f7; color:var(--sspc-ink); max-width:900px; margin:24px 0; }
.sspc-heading { margin:0 0 18px; font-size:clamp(22px,3vw,32px); line-height:1.15; }
.sspc-main-image { aspect-ratio:16/10; margin-bottom:22px; overflow:hidden; border-radius:16px; background:var(--sspc-soft); }
.sspc-main-image img { width:100%; height:100%; object-fit:contain; transition:opacity .18s ease; }
.sspc-fieldset { margin:0 0 22px; padding:0; border:0; }
.sspc-fieldset legend { width:100%; margin-bottom:10px; padding:0; font-size:14px; font-weight:700; }
.sspc-choice-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.sspc-choice { position:relative; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; min-height:48px; padding:10px; border:1px solid var(--sspc-line); border-radius:12px; color:var(--sspc-ink); background:#fff; cursor:pointer; transition:border-color .15s,box-shadow .15s,transform .15s; }
.sspc-choice:hover:not(:disabled) { border-color:var(--sspc-accent); transform:translateY(-1px); }
.sspc-choice.is-selected { border-color:var(--sspc-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--sspc-accent) 20%,transparent); }
.sspc-choice:disabled { opacity:.48; cursor:not-allowed; }
.sspc-choice-image { width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:8px; background:var(--sspc-soft); }
.sspc-choice-image img { width:100%; height:100%; object-fit:contain; }
.sspc-choice-label { font-weight:700; }
.sspc-badge { position:absolute; top:7px; right:7px; padding:3px 7px; border-radius:99px; color:#fff; background:var(--sspc-accent); font-size:10px; font-weight:700; }
.sspc-unavailable { font-size:11px; color:var(--sspc-muted); }
.sspc-style-buttons .sspc-choice-grid { display:flex; flex-wrap:wrap; }
.sspc-style-buttons .sspc-choice { min-width:76px; }
.sspc-choice-select,.sspc-option-group select { width:100%; min-height:48px; padding:0 14px; border:1px solid var(--sspc-line); border-radius:10px; background:#fff; }
.sspc-option-buttons { display:flex; flex-wrap:wrap; gap:9px; }
.sspc-option input { position:absolute; opacity:0; pointer-events:none; }
.sspc-option span { display:block; padding:10px 15px; border:1px solid var(--sspc-line); border-radius:10px; background:#fff; cursor:pointer; }
.sspc-option input:checked + span { border-color:var(--sspc-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--sspc-accent) 20%,transparent); }
.sspc-option small { color:var(--sspc-muted); }
.sspc-color-select { position:relative; width:100%; }
.sspc-color-trigger { display:flex; align-items:center; width:100%; min-height:48px; padding:0 14px; gap:10px; border:1px solid var(--sspc-line); border-radius:12px; color:var(--sspc-ink); background:#fff; text-align:left; cursor:pointer; transition:border-color .15s ease,background-color .15s ease,color .15s ease,box-shadow .15s ease; }
.sspc-color-trigger:focus-visible { border-color:var(--sspc-accent); outline:2px solid color-mix(in srgb,var(--sspc-accent) 22%,transparent); outline-offset:1px; }
html body .sspc-configurator button[type="button"].sspc-color-trigger:hover,
html body .sspc-configurator button[type="button"].sspc-color-trigger[aria-expanded="true"],
html body .sspc-configurator button[type="button"].sspc-color-trigger[aria-expanded="true"]:hover,
html body .sspc-configurator button[type="button"].sspc-color-trigger[aria-expanded="true"]:focus {
    border:1px solid #f4da04!important;
    border-color:#f4da04!important;
    color:#231f20!important;
    background:#f4da04!important;
    background-color:#f4da04!important;
    background-image:none!important;
    box-shadow:none!important;
    filter:none!important;
    text-decoration:none!important;
}
.sspc-color-current { flex:1; }
.sspc-color-chevron { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.sspc-color-trigger[aria-expanded="true"] .sspc-color-chevron { transform:rotate(225deg) translate(-2px,-1px); }
.sspc-color-menu { position:absolute; z-index:50; top:calc(100% + 6px); left:0; right:0; overflow:hidden; padding:6px; border:1px solid var(--sspc-line); border-radius:12px; background:#fff; box-shadow:0 12px 32px rgba(35,31,32,.14); }
.sspc-color-option { display:flex; align-items:center; width:100%; min-height:44px; padding:9px 10px; gap:10px; border:0; border-radius:8px; color:var(--sspc-ink); background:#fff; text-align:left; cursor:pointer; }
html body .sspc-configurator button[type="button"].sspc-color-option:hover,
html body .sspc-configurator button[type="button"].sspc-color-option:focus {
    border:0!important;
    color:#231f20!important;
    background:rgba(244,218,4,.35)!important;
    background-color:rgba(244,218,4,.35)!important;
    background-image:none!important;
    box-shadow:none!important;
    filter:none!important;
    outline:none!important;
}
html body .sspc-configurator button[type="button"].sspc-color-option[aria-selected="true"],
html body .sspc-configurator button[type="button"].sspc-color-option[aria-selected="true"]:hover,
html body .sspc-configurator button[type="button"].sspc-color-option[aria-selected="true"]:focus {
    border:0!important;
    color:#231f20!important;
    background:#f4da04!important;
    background-color:#f4da04!important;
    background-image:none!important;
    box-shadow:none!important;
    filter:none!important;
    outline:none!important;
}
.sspc-color-swatch { flex:0 0 22px; width:22px; height:22px; border:1px solid rgba(35,31,32,.25); border-radius:50%; background:var(--sspc-color); box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.sspc-color-swatch.is-empty { background:linear-gradient(135deg,#fff 0 45%,#dedfe2 46% 54%,#fff 55%); }
.sspc-color-native { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important; }
.sspc-purchase-row { display:grid; grid-template-columns:minmax(120px,1fr) auto minmax(160px,auto); gap:14px; align-items:end; padding-top:18px; border-top:1px solid var(--sspc-line); }
.sspc-price { align-self:center; font-size:24px; font-weight:800; }
.sspc-quantity-label span { display:block; margin-bottom:5px; font-size:12px; font-weight:700; }
body .sspc-configurator .sspc-purchase-row input[type="number"].sspc-quantity { display:block!important; width:76px!important; min-width:76px!important; max-width:76px!important; min-height:46px!important; padding:0 8px!important; border:1px solid var(--sspc-line)!important; border-radius:12px!important; color:var(--sspc-ink)!important; background:#fff!important; box-shadow:none!important; box-sizing:border-box!important; }
body .sspc-configurator .sspc-purchase-row button.sspc-submit.button.alt { min-height:46px!important; padding:12px!important; border:0!important; border-radius:12px!important; color:#fff!important; background:#231f20!important; box-shadow:none!important; filter:none!important; font-weight:800!important; }
body .sspc-configurator .sspc-purchase-row button.sspc-submit.button.alt:hover,
body .sspc-configurator .sspc-purchase-row button.sspc-submit.button.alt:focus { color:#231f20!important; background:#f4da04!important; filter:none!important; }
.sspc-error { margin:12px 0 0; color:#b42318; font-weight:600; }
@media (max-width:600px) { .sspc-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .sspc-purchase-row { grid-template-columns:1fr auto; } .sspc-price { grid-column:1/-1; } .sspc-submit.button { padding-inline:16px; } }


/* Gesloten knop na het maken van een keuze */
html body .sspc-configurator
button.sspc-color-trigger[aria-expanded="false"]:focus {
    border-color: #dedfe2 !important;
    color: #231f20 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    outline: 2px solid rgba(244, 218, 4, 0.35) !important;
    outline-offset: 1px !important;
    filter: none !important;
}

/* Hover en geopende dropdown blijven geel */
html body .sspc-configurator
button.sspc-color-trigger:hover,
html body .sspc-configurator
button.sspc-color-trigger[aria-expanded="true"],
html body .sspc-configurator
button.sspc-color-trigger[aria-expanded="true"]:focus {
    border-color: #f4da04 !important;
    color: #231f20 !important;
    background: #f4da04 !important;
    background-color: #f4da04 !important;
    box-shadow: 0 0 0 2px rgba(244, 218, 4, 0.22) !important;
    outline: none !important;
    filter: none !important;
}