/* Real results explorer (js/widgets/real3d.js) */
.cn-real3d-grid { display: grid; grid-template-columns: var(--cols, 1.15fr 1fr); gap: 18px; align-items: center; }
.cn-real3d-scan { aspect-ratio: 4/3; background: radial-gradient(ellipse at 50% 35%, #7a8399 0%, #3a4152 85%); }
.cn-real3d-scan .cn-3d-loading { color: #cfd5e6; }
.cn-real3d-hint { position: absolute; right: 10px; bottom: 8px; font-size: 1.15rem; color: rgba(230,235,250,.7); pointer-events: none; }
.cn-real3d-img { position: relative; width: 100%; aspect-ratio: 496/318; border-radius: 10px; overflow: hidden; background: #0f0202; }
.cn-real3d-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s; }
.cn-real3d-img img.show { opacity: 1; }
@media (max-width: 800px) { .cn-real3d-grid { grid-template-columns: 1fr; } }

/* shared button design (same as css/abc3d.css); scoped under .cn-real3d to beat the lab's button/button:focus rules */
.cn-real3d .cn-rbtns { display: flex; gap: 8px; margin: 0 0 4px; flex-wrap: nowrap; }
.cn-real3d .cn-rbtn { flex: 1 1 0; min-width: 0; height: 44px; line-height: 1.15; margin: 0; padding: 0 10px; border-radius: 10px;
  background: #fff; border: 1.5px solid var(--c); color: var(--c); font-family: inherit; font-size: 1.45rem; font-weight: 600;
  text-transform: none; letter-spacing: normal; display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: 0;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.cn-real3d .cn-rbtn i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); transition: background .15s; }
.cn-real3d .cn-rbtn:hover, .cn-real3d .cn-rbtn:focus { background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); }
.cn-real3d .cn-rbtn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.cn-real3d .cn-rbtn.on, .cn-real3d .cn-rbtn.on:hover, .cn-real3d .cn-rbtn.on:focus { background: var(--c); color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 45%, transparent); }
.cn-real3d .cn-rbtn.on i { background: #fff; }
.cn-real3d .cn-rbtn:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
/* presets (grey, select a combination) above the independent toggles */
.cn-real3d .cn-rpresets { margin-bottom: 8px; }
.cn-real3d .cn-rpreset { height: 40px; font-size: 1.4rem; background: #f3f4f6; }
.cn-real3d .cn-rbtns + .cn-rbtns { margin-bottom: 12px; }
/* toggles: the dot becomes a check box */
.cn-real3d .cn-rtoggle i { width: 14px; height: 14px; border-radius: 4px; background: #fff; border: 1.5px solid var(--c); position: relative; }
.cn-real3d .cn-rtoggle.on i { background: #fff; border-color: #fff; }
.cn-real3d .cn-rtoggle.on i::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--c); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cn-real3d .cn-rscan { flex: 0.6 1 0; }
@media (max-width: 700px) { .cn-real3d .cn-rbtns { flex-wrap: wrap; } .cn-real3d .cn-rbtn { flex: 1 1 calc(50% - 4px); } }
/* small image label above the image (shared look with css/abc3d.css) */
.cn-real3d .cn-imlbl { font-size: 1.3rem; line-height: 1.3; font-weight: 600; color: #4b5563; margin: 0 0 4px 2px; }

/* controls: presets above the toggles they select (third / fourth columns); "Scan only" sits apart, after a divider */
.cn-real3d .cn-rctl { display: grid; grid-template-columns: repeat(var(--n), 1fr) 1px 0.62fr; column-gap: 8px; row-gap: 8px; margin: 0 0 14px; }
.cn-real3d .cn-rctl .cn-rbtn { width: 100%; }
.cn-real3d .cn-rsep { grid-column: calc(var(--n) + 1); grid-row: 1 / 3; background: #d9dce2; margin: 4px 6px; width: 1px; justify-self: center; }
.cn-real3d .cn-rscan { grid-column: calc(var(--n) + 2); grid-row: 2; }
@media (max-width: 700px) { .cn-real3d .cn-rctl { grid-template-columns: repeat(var(--n), 1fr); }
  .cn-real3d .cn-rsep { display: none; } .cn-real3d .cn-rscan { grid-column: 1 / -1; grid-row: 3; } }
/* exclusive scenes (occluded, rough): one row of radio buttons, third OR fifth */
.cn-real3d .cn-rradio i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid var(--c); box-sizing: border-box; position: relative; }
.cn-real3d .cn-rradio.on i { border-color: #fff; }
.cn-real3d .cn-rradio.on i::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--c); }