/* Black Edition R8 · isolated from shared service styles. */
[data-black-configurator] .config-main{aspect-ratio:auto}
[data-black-configurator] .black-config-stage{position:relative;isolation:isolate;overflow:hidden}
[data-black-configurator] .black-config-stage[hidden]{display:none!important}
[data-black-configurator] .black-config-stage>img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
[data-black-configurator] .black-config-layers{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
[data-black-configurator] .black-config-layers[hidden]{display:none}
[data-black-configurator] .black-piece-layer{opacity:0;transition:opacity .18s ease}
[data-black-configurator] .black-piece-layer.is-selected{opacity:1}
[data-black-configurator] .config-thumbs img{aspect-ratio:4/3;object-fit:contain}
[data-black-configurator] .parts-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:none}
[data-black-configurator] .parts-options label{min-width:0;padding:0;border:1px solid #999;border-radius:12px;overflow:hidden}
[data-black-configurator] .parts-options label[hidden]{display:none!important}
[data-black-configurator] .parts-options label:has(input:checked){border-color:var(--red)}
[data-black-configurator] .config-options label:has(input:focus-visible){outline:2px solid var(--red);outline-offset:4px}
[data-black-configurator] .part-preview{display:block;width:100%;aspect-ratio:5/6;overflow:hidden}
[data-black-configurator] .part-preview svg{display:block;width:100%;height:100%}
[data-black-configurator] .part-preview svg[hidden]{display:none!important}
[data-black-configurator] .parts-options label.is-unavailable{opacity:.35;cursor:default}
[data-black-configurator] .part-caption{position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;justify-content:center;min-height:52%;padding:22px 3px 7px;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.65) 50%,transparent);color:#fff;font-family:SairaNav,Arial,sans-serif;font-size:clamp(.875rem,.9vw,1.05rem);font-weight:400;line-height:1.08;text-align:center;text-wrap:balance;opacity:0;pointer-events:none;transition:opacity .2s ease}
[data-black-configurator] .parts-options label:has(input:focus-visible) .part-caption{opacity:1}
[data-black-configurator] .finish-options{gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
[data-black-configurator] .finish-options label{justify-content:flex-start;min-width:0;background:#fff;padding:0;border-radius:10px;isolation:isolate}
[data-black-configurator] .finish-sample{display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:#111}
[data-black-configurator] .finish-sample svg{display:block;width:100%;height:100%}
[data-black-configurator] .finish-options label>span:last-child{display:block;width:100%;padding:5px 1px 6px;text-align:center;font-size:clamp(13px,1vw,19px);line-height:1.3;background:white}
[data-black-configurator] .finish-status{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
@media(hover:hover){
 [data-black-configurator] .parts-options label:hover .part-caption{opacity:1}
 [data-black-configurator] .part-preview svg,[data-black-configurator] .finish-sample svg{transition:transform .25s ease}
 [data-black-configurator] .parts-options label:not(.is-unavailable):hover .part-preview svg,[data-black-configurator] .finish-options label:hover .finish-sample svg{transform:scale(1.045)}
}
@media(max-width:800px){
 .configurator[data-black-configurator] .config-options{grid-template-columns:1fr}
 [data-black-configurator] .parts-options{gap:12px}
}
@media(max-width:420px){.configurator[data-black-configurator] .config-options{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){[data-black-configurator] .black-piece-layer,[data-black-configurator] .part-caption,[data-black-configurator] .part-preview svg,[data-black-configurator] .finish-sample svg{transition:none}}

/* R5: four image-only views share the right column on desktop. */
[data-black-configurator] .config-thumbs button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media(min-width:801px){
 [data-black-configurator] .config-grid{width:100%;max-width:min(1640px,calc(100vw - 252px),calc((100svh - var(--black-header-height,100px) - 64px)*1.79));grid-template-columns:minmax(0,3.3fr) minmax(0,1fr);align-items:stretch;scroll-margin-top:calc(var(--black-header-height,100px) + 14px)}
 [data-black-configurator] .config-gallery{min-width:0}
 [data-black-configurator] .config-options{display:flex;flex-direction:column;justify-content:space-between;gap:6px;height:100%;contain:size}
 [data-black-configurator] .config-options fieldset{padding:clamp(10px,1.05vw,20px);border-radius:22px;flex:0 0 auto}
 [data-black-configurator] .config-options legend{margin-bottom:10px}
 [data-black-configurator] .parts-options{gap:8px}
 [data-black-configurator] .finish-options{gap:8px}
 [data-black-configurator] .config-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;max-width:none;flex:0 0 auto}
 [data-black-configurator] .config-thumbs button{border-radius:14px;display:block;width:100%}
 [data-black-configurator] .config-thumbs .black-config-stage{width:100%;aspect-ratio:4/3}
 [data-black-configurator] .config-thumbs .black-config-stage>img{width:100%;height:100%;object-fit:contain}
}
@media(min-width:801px) and (max-height:800px){
 [data-black-configurator] .config-options fieldset{padding:10px}
 [data-black-configurator] .config-options legend{font-size:16px;margin-bottom:8px}
 [data-black-configurator] .parts-options,[data-black-configurator] .finish-options{gap:6px}
 [data-black-configurator] .config-thumbs{gap:8px}
}
@media(min-width:801px) and (max-width:1150px){
 [data-black-configurator] .config-options{gap:5px}
 [data-black-configurator] .config-options fieldset{padding:6px;border-radius:16px}
 [data-black-configurator] .config-options legend{font-size:15px;margin-bottom:5px}
 [data-black-configurator] .parts-options,[data-black-configurator] .finish-options,[data-black-configurator] .config-thumbs{gap:6px}
 [data-black-configurator] .finish-options label>span:last-child{font-size:12px;padding:3px 0}
}
@media(max-width:800px){
 [data-black-configurator] .config-grid{display:flex;flex-direction:column;gap:18px;scroll-margin-top:calc(var(--black-header-height,75px) + 12px)}
 [data-black-configurator] .config-gallery{order:0;width:100%}
 .configurator[data-black-configurator] .config-options{display:contents}
 [data-black-configurator] .config-thumbs{order:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:none;width:100%;margin:0}
 [data-black-configurator] .config-thumbs button{border-radius:12px}
 [data-black-configurator] .config-options fieldset{order:2;width:100%}
}

/* R6: compact finish cards, overlay captions and a bounded view grid. */
[data-black-configurator] .finish-sample{aspect-ratio:3/4}
[data-black-configurator] .finish-options label>span.finish-caption{
 position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;justify-content:center;
 width:100%;min-height:48%;padding:20px 2px 8px;
 background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.62) 48%,transparent);
 color:#fff;font-family:SairaNav,Arial,sans-serif;font-size:clamp(12px,1vw,19px);
 font-weight:400;line-height:1.1;text-align:center;pointer-events:none;
 opacity:1;transition:opacity .2s ease;
}
@media(hover:hover) and (pointer:fine){
 [data-black-configurator] .finish-options label>span.finish-caption{opacity:0}
 [data-black-configurator] .finish-options label:hover>span.finish-caption,
 [data-black-configurator] .finish-options label:has(input:focus-visible)>span.finish-caption{opacity:1}
}
@media(min-width:801px){
 [data-black-configurator] .config-options{
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:max-content max-content minmax(0,1fr);
  align-content:stretch;gap:clamp(16px,1.4vw,24px);min-height:0;
  container-type:inline-size;
 }
 [data-black-configurator] .config-thumbs{
  align-self:end;grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;
  width:100%;height:calc(75cqw + 5px);max-height:100%;min-height:0;margin:0;
 }
 [data-black-configurator] .config-thumbs button{height:100%;min-height:0}
 [data-black-configurator] .config-thumbs .black-config-stage{height:100%;aspect-ratio:auto}
}
@media(min-width:801px) and (max-width:1150px){
 [data-black-configurator] .config-options{gap:14px}
 [data-black-configurator] .config-thumbs{gap:8px;height:calc(75cqw + 4px)}
 [data-black-configurator] .finish-options label>span.finish-caption{font-size:12px;padding:16px 1px 6px}
}
@media(prefers-reduced-motion:reduce){[data-black-configurator] .finish-options label>span.finish-caption{transition:none}}

/* R7: restrained type, one selection stroke, full-frame thumbnails. */
[data-black-configurator]{--black-selection:rgba(224,0,0,.82)}
[data-black-configurator] .parts-options label,
[data-black-configurator] .finish-options label,
[data-black-configurator] .config-thumbs button{
 border:1px solid transparent;outline:none;outline-offset:0;box-shadow:none;
}
[data-black-configurator] .config-options label:has(input:checked),
[data-black-configurator] .config-thumbs button[aria-pressed=true]{
 border-color:var(--black-selection);outline:none;box-shadow:none;
}
[data-black-configurator] .config-options label:has(input:focus-visible),
[data-black-configurator] .config-thumbs button:focus-visible{
 outline:none;box-shadow:none;border-color:var(--black-selection);border-style:dashed;
}
[data-black-configurator] .part-caption,
[data-black-configurator] .finish-options label>span.finish-caption{
 font-size:12px;font-weight:400;line-height:1.18;letter-spacing:0;
 padding:20px 6px 8px;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto;
}
[data-black-configurator] .parts-options,
[data-black-configurator] .finish-options{gap:10px}
@media(min-width:801px){
 [data-black-configurator] .config-options fieldset{padding:clamp(10px,5.5cqw,20px)}
 [data-black-configurator] .config-options legend{font-size:clamp(16px,6.4cqw,22px);line-height:1.35;margin-bottom:10px}
 [data-black-configurator] .part-caption,
 [data-black-configurator] .finish-options label>span.finish-caption{font-size:clamp(10px,4.1cqw,14px)}
 /* With 1px borders and a 12px gap, this height fits two complete 4:3 photos.
    It never squeezes the photo to fit the remaining grid track. */
 [data-black-configurator] .config-thumbs{height:calc(75cqw + 4px);max-height:none;gap:12px}
 [data-black-configurator] .config-thumbs button{padding:0;border-radius:14px;background:transparent;overflow:hidden}
 [data-black-configurator] .config-thumbs .black-config-stage{width:100%;height:100%;border-radius:0}
 [data-black-configurator] .config-thumbs .black-config-stage>img{width:100%;height:100%;object-fit:contain}
}
@media(min-width:801px) and (max-width:1150px){
 [data-black-configurator] .config-options fieldset{padding:8px}
 [data-black-configurator] .config-options legend{font-size:15px;margin-bottom:8px}
 [data-black-configurator] .parts-options,[data-black-configurator] .finish-options{gap:8px}
 [data-black-configurator] .config-thumbs{gap:8px;height:calc(75cqw + 3px)}
 [data-black-configurator] .part-caption,
 [data-black-configurator] .finish-options label>span.finish-caption{padding:16px 4px 7px}
}
@media(min-width:801px) and (max-height:700px){
 [data-black-configurator] .config-options{gap:12px}
 [data-black-configurator] .config-options fieldset{padding:8px}
 [data-black-configurator] .config-options legend{font-size:15px;margin-bottom:8px}
 [data-black-configurator] .parts-options,[data-black-configurator] .finish-options{gap:8px}
}
@media(max-width:800px){
 [data-black-configurator] .part-caption,
 [data-black-configurator] .finish-options label>span.finish-caption{font-size:12px;padding:20px 7px 8px}
 [data-black-configurator] .config-thumbs button{padding:0;overflow:hidden}
}

/* R8: finish names stay visible, with the same R7 type and spacing. */
[data-black-configurator] .finish-options label>span.finish-caption{opacity:1}
[data-black-configurator] .config-main{
 touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none;
}
[data-black-configurator] .config-main.is-dragging{cursor:grabbing}
[data-black-configurator] .config-main img{-webkit-user-drag:none}
[data-black-configurator] .config-main button{cursor:pointer}
[data-black-configurator] .config-main button:disabled{cursor:default}