.rei-configurator,
.rei-configurator * { box-sizing:border-box; }

.rei-configurator {
    --rei-green:#00ef19;
    --rei-purple:#7100c7;
    --rei-border:#e2e2e2;
    --rei-text:#292929;
    --rei-muted:#777;
    display:grid;
    grid-template-columns:minmax(0,1.16fr) minmax(360px,.84fr);
    gap:72px;
    width:100%;
    max-width:1180px;
    margin:0 auto;
    color:var(--rei-text);
    font-family:inherit;
}

.rei-configurator button,
.rei-configurator input { font:inherit; }
.rei-configurator button:focus-visible,
.rei-configurator input:focus-visible { outline:2px solid var(--rei-purple); outline-offset:3px; }
.rei-configurator__options { min-width:0; }
.rei-group { padding:0 0 20px; margin:0 0 18px; border-bottom:1px solid #d8d8d8; }
.rei-group__header { margin:0 0 17px; }
.rei-group__header h3 { margin:0 0 3px; color:var(--rei-purple); font-size:14px; line-height:1.2; font-weight:500; letter-spacing:.01em; }
.rei-group__header p { margin:0; color:#6f6f6f; font-size:12px; line-height:1.4; }

.rei-option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.rei-option-grid--capacity { gap:18px; }
.rei-option-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; transition:opacity .18s ease, transform .18s ease; }
.rei-option-card:hover:not(:disabled) { transform:translateY(-1px); }
.rei-option-card__image { height:132px; width:100%; border:1px solid var(--rei-border); border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
.rei-option-card__image img { width:100%; height:100%; object-fit:contain; padding:16px; }
.rei-option-card__placeholder { color:#b1b1b1; font-size:11px; }
.rei-option-card__content { min-height:49px; padding:10px 26px 0 0; }
.rei-option-card__title { display:block; font-size:12px; line-height:1.25; }
.rei-option-card__subtitle { display:block; margin-top:2px; color:#777; font-size:9px; line-height:1.3; }
.rei-option-card__radio { position:absolute; right:8px; bottom:17px; width:15px; height:15px; border:1px solid #d9d9d9; border-radius:50%; background:#fff; transition:.18s ease; }
.rei-option-card.is-selected .rei-option-card__image { border:2px solid var(--rei-green); box-shadow:0 0 0 1px rgba(0,239,25,.03); }
.rei-option-card.is-selected .rei-option-card__radio { border:4px solid var(--rei-purple); box-shadow:inset 0 0 0 2px var(--rei-green); background:var(--rei-green); }

.rei-option-card--capacity { min-height:70px; padding:0 36px 0 18px; justify-content:center; border:1px solid var(--rei-border); border-radius:8px; background:#fff; }
.rei-option-card--capacity.is-selected { border:2px solid var(--rei-green); }
.rei-option-card--capacity .rei-option-card__content { min-height:0; padding:0; }
.rei-option-card--capacity .rei-option-card__title { font-size:13px; }
.rei-option-card--capacity .rei-option-card__radio { right:18px; bottom:50%; transform:translateY(50%); }
.rei-option-card--capacity.is-selected .rei-option-card__title { color:var(--rei-purple); }

.rei-option-card.is-rule-hidden,
.rei-color-option.is-rule-hidden { display:none !important; }
.rei-option-card.is-rule-disabled { cursor:not-allowed; opacity:.38; transform:none; }
.rei-option-card.is-rule-disabled .rei-option-card__image { background:#f4f4f4; filter:grayscale(1); }
.rei-color-option:disabled { opacity:.3; cursor:not-allowed; }

.rei-configurator__preview-column { position:relative; min-width:0; }
.rei-preview-card { position:sticky; top:26px; border:1px solid #dedede; border-radius:5px; background:#fff; padding:28px 28px 30px; box-shadow:0 3px 18px rgba(0,0,0,.018); }
.rei-preview { position:relative; width:100%; aspect-ratio:1 / 1; min-height:350px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.rei-preview__layers { position:absolute; inset:0; }
.rei-preview__layer { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.rei-preview__empty { max-width:250px; color:#aaa; text-align:center; font-size:12px; line-height:1.5; }
.rei-preview__empty[hidden] { display:none; }
.rei-preview__art { position:absolute; left:var(--rei-art-left,50%); top:var(--rei-art-top,48%); width:var(--rei-art-width,28%); transform:translate(-50%,-50%); z-index:20; pointer-events:none; }
.rei-preview__art[hidden] { display:none; }
.rei-preview__art img { display:block; width:100%; height:auto; max-height:140px; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.08)); }

.rei-colors { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:4px 0 22px; }
.rei-color-option { width:16px; height:16px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; display:grid; place-items:center; }
.rei-color-option span { width:12px; height:12px; border-radius:50%; background:var(--rei-color); display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.rei-color-option.is-selected { outline:2px solid #777; outline-offset:2px; }
.rei-preview-card__divider { height:1px; background:#e2e2e2; margin:0 0 22px; }
.rei-designer-note { display:flex; gap:12px; align-items:flex-start; margin-bottom:26px; color:#777; }
.rei-designer-note__icon { flex:0 0 auto; width:26px; height:26px; border:1px solid #999; border-radius:50%; display:grid; place-items:center; font-size:12px; color:#555; }
.rei-designer-note p { margin:0; font-size:11px; line-height:1.5; }
.rei-designer-note p::first-line { color:#444; font-weight:600; }
.rei-quote-button { display:flex; align-items:center; justify-content:center; gap:9px; width:76%; min-height:44px; margin:0 auto; padding:10px 20px; border:0; border-radius:999px; background:var(--rei-green); color:#071900; font-weight:600; cursor:pointer; transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease; }
.rei-quote-button:hover { transform:translateY(-1px); box-shadow:0 5px 15px rgba(0,239,25,.15); }
.rei-quote-button:disabled { opacity:.65; cursor:wait; transform:none; }
.rei-quote-button__spinner { display:none; width:14px; height:14px; border:2px solid rgba(0,0,0,.22); border-top-color:#000; border-radius:50%; animation:rei-spin .7s linear infinite; }
.rei-quote-button.is-loading .rei-quote-button__spinner { display:inline-block; }
.rei-feedback { min-height:18px; margin:12px 0 0; text-align:center; font-size:11px; color:#555; }
.rei-feedback.is-error { color:#a30000; }

.rei-art-upload { padding:0 0 20px; margin:0 0 18px; border-bottom:1px solid #d8d8d8; }
.rei-art-upload[hidden] { display:none; }
.rei-art-upload__box { border:1px dashed #cfcfcf; border-radius:9px; padding:14px; background:#fbfbfb; }
.rei-art-upload__label { display:flex; align-items:center; gap:12px; cursor:pointer; }
.rei-art-upload__label input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.rei-art-upload__icon { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid #ddd; color:var(--rei-purple); font-size:20px; }
.rei-art-upload__label strong { display:block; color:#333; font-size:12px; }
.rei-art-upload__label small { display:block; margin-top:2px; color:#888; font-size:10px; }
.rei-art-upload__selected { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid #e5e5e5; font-size:11px; }
.rei-art-upload__selected[hidden] { display:none; }
.rei-art-upload__selected span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rei-art-upload__selected button { border:0; padding:0; background:none; color:#a30000; font-size:11px; cursor:pointer; }

@keyframes rei-spin { to { transform:rotate(360deg); } }

@media (max-width: 980px) {
    .rei-configurator { grid-template-columns:1fr; gap:32px; }
    .rei-configurator__preview-column { order:-1; }
    .rei-preview-card { position:relative; top:auto; max-width:620px; margin:0 auto; }
}

@media (max-width: 640px) {
    .rei-configurator { gap:24px; }
    .rei-option-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
    .rei-option-grid--capacity { grid-template-columns:1fr; gap:10px; }
    .rei-option-card__image { height:125px; }
    .rei-preview-card { padding:18px; }
    .rei-preview { min-height:290px; }
    .rei-quote-button { width:100%; }
}