/* =====================================================================
   REAL 3D DESIGNS PER STYLE (js/gallery3d.js) — the entry card on the
   style step and the full-screen viewer
   ===================================================================== */
.g3d-tag { position: absolute; inset-block-start: .45rem; inset-inline-end: .45rem; padding: .18rem .5rem; border-radius: 999px; background: var(--brand-orange); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; line-height: 1.3; box-shadow: 0 3px 10px rgba(241, 94, 37, .35); }
.opt-card .thumb { position: relative; }
.opt-card .thumb .g3d-tag-card { inset-inline-end: auto; inset-inline-start: .45rem; }   /* clear of the ✓ of a picked card */
.opt-card > .g3d-tag-card { position: static; order: 2; box-shadow: none; }   /* a card with no picture (free exploration): a pill under the name */

.g3d-card { position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; margin-top: .85rem; padding: .85rem 1rem; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-align: start; font: inherit; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(99, 195, 197, .35), transparent 55%), linear-gradient(135deg, #0F2A3A, #1C5A7A); box-shadow: 0 10px 26px rgba(15, 42, 58, .25); overflow: hidden; animation: pop .4s var(--ease); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.g3d-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%); transform: translateX(-100%); animation: g3dShine 4.5s 1s ease-in-out infinite; pointer-events: none; }
.g3d-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15, 42, 58, .32); }
.g3d-card:active { transform: scale(.985); }
.g3d-card:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 3px; }
.g3d-card-pics { position: relative; flex: none; width: 6.4rem; height: 4.4rem; }
.g3d-card-pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.g3d-card-pics.n2 img:nth-child(1), .g3d-card-pics.n3 img:nth-child(1) { transform: rotate(-7deg) translate(-6px, 2px) scale(.9); opacity: .75; }
.g3d-card-pics.n3 img:nth-child(2) { transform: rotate(5deg) translate(5px, 1px) scale(.94); opacity: .85; }
.g3d-card-pics .g3d-tag { inset-block-start: auto; inset-block-end: -.35rem; inset-inline-end: -.35rem; }
.g3d-card-ico { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 10px; background: rgba(255, 255, 255, .12); }
.g3d-card-ico svg { width: 2.2rem; height: 2.2rem; }
.g3d-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.g3d-card-t small { color: var(--brand-teal); font-size: .74rem; font-weight: 700; letter-spacing: .03em; }
.g3d-card-t b { font-size: 1rem; line-height: 1.35; }
.g3d-card-t span { font-size: .8rem; opacity: .8; }
.g3d-card-go { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.g3d-card-go svg { width: 1.3rem; height: 1.3rem; }
[dir="rtl"] .g3d-card-go svg, [dir="rtl"] .g3d-nav svg { transform: scaleX(-1); }
@keyframes g3dShine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---------- the viewer (always on a dark stage, in day and night mode) ---------- */
html.g3d-open { overflow: hidden; }
.g3d { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; color: #fff; font-family: var(--font);
  background: radial-gradient(90% 70% at 50% 45%, #2b4656 0%, #12222c 60%, #0a141a 100%); opacity: 0; transition: opacity .22s var(--ease); }
.g3d[hidden] { display: none; }
.g3d.in { opacity: 1; }
.g3d-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, transform .15s; }
.g3d-btn:hover { background: rgba(255, 255, 255, .18); }
.g3d-btn:active { transform: scale(.95); }
.g3d-btn:focus-visible, .g3d-thumb:focus-visible, .g3d-ref:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 2px; }
.g3d-btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.g3d-top { display: flex; align-items: center; gap: 1rem; padding: max(.9rem, env(safe-area-inset-top)) 1.2rem .6rem; }
.g3d-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g3d-title small { color: var(--brand-teal); font-size: .78rem; font-weight: 700; }
.g3d-title b { font-size: clamp(1.1rem, 2.4vw, 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g3d-count { font-size: .9rem; opacity: .85; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g3d-close { width: var(--touch); height: var(--touch); border-radius: 50%; }

.g3d-stage { position: relative; flex: 1; min-height: 0; }
.g3d-mv, .g3d-mv model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; }
.g3d-mv model-viewer { --poster-color: transparent; background: transparent; transition: opacity .3s var(--ease), transform .45s var(--ease); }
.g3d.swap .g3d-mv model-viewer { opacity: 0; transform: scale(.96); }
.g3d-load { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; pointer-events: none; font-size: .95rem; }
.g3d.loading .g3d-load { display: flex; }
.g3d-ring { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--brand-teal); animation: g3dSpin .9s linear infinite; }
.g3d-load span { padding: .3rem .8rem; border-radius: 999px; background: rgba(10, 20, 26, .55); }
.g3d-load i { width: min(14rem, 60vw); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.g3d-load i b { display: block; height: 100%; width: 0; background: var(--brand-teal); transition: width .2s; }
@keyframes g3dSpin { to { transform: rotate(360deg); } }
.g3d-err { position: absolute; inset-inline: 0; top: 45%; margin: 0; text-align: center; font-size: 1rem; }
.g3d-err[hidden] { display: none; }

.g3d-nav { position: absolute; top: 50%; width: 3.6rem; height: 3.6rem; margin-top: -1.8rem; border-radius: 50%; z-index: 2; }
.g3d-nav svg { width: 1.6rem; height: 1.6rem; }
.g3d-prev { inset-inline-start: 1rem; }
.g3d-next { inset-inline-end: 1rem; }
.g3d.single .g3d-nav, .g3d.single .g3d-thumbs { display: none; }

.g3d-ref { position: absolute; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 2; width: clamp(8rem, 18vw, 13rem); padding: 0; border: 2px solid rgba(255, 255, 255, .8); border-radius: 12px; overflow: hidden; background: #000; cursor: zoom-in; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); transition: width .35s var(--ease); }
.g3d-ref img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.g3d-ref span { position: absolute; inset-inline: 0; inset-block-end: 0; padding: .25rem .5rem; font-size: .72rem; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; text-align: start; }
.g3d.photo-big .g3d-ref { width: min(46rem, calc(100% - 2rem)); cursor: zoom-out; }
.g3d-ref[hidden] { display: none; }
.g3d-hint { position: absolute; inset-block-end: 1rem; inset-inline-start: 1rem; margin: 0; padding: .35rem .8rem; border-radius: 999px; background: rgba(10, 20, 26, .5); font-size: .8rem; pointer-events: none; animation: g3dHint 7s 1.5s forwards; }
@keyframes g3dHint { 0%, 80% { opacity: .9; } 100% { opacity: 0; } }

.g3d-bar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.2rem max(.9rem, env(safe-area-inset-bottom)); }
.g3d-tools { display: flex; gap: .5rem; flex: none; }
.g3d-tool { min-height: 2.8rem; padding: 0 .9rem; border-radius: 999px; font-size: .85rem; }
.g3d-tool[aria-pressed="true"] { background: var(--brand-teal); border-color: var(--brand-teal); color: #0F2A3A; }
.g3d-tool[hidden] { display: none; }
.g3d-thumbs { flex: 1; min-width: 0; display: flex; gap: .6rem; overflow-x: auto; padding: .3rem; scrollbar-width: thin; justify-content: safe center; }
.g3d-thumb { position: relative; flex: none; width: 6.5rem; height: 4.2rem; padding: 0; border: 2px solid rgba(255, 255, 255, .2); border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s, transform .2s; }
.g3d-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g3d-thumb span { position: absolute; inset-block-end: .2rem; inset-inline-start: .3rem; min-width: 1.3rem; padding: 0 .3rem; border-radius: 6px; background: rgba(0, 0, 0, .6); font-size: .75rem; }
.g3d-thumb:hover { opacity: .9; }
.g3d-thumb[aria-current="true"] { opacity: 1; border-color: var(--brand-teal); transform: translateY(-2px); }

@media (max-width: 640px) {
  .g3d-tool span { display: none; }
  .g3d-tool { width: 2.8rem; padding: 0; }
  .g3d-nav { width: 3rem; height: 3rem; margin-top: -1.5rem; }
  .g3d-hint { inset-block-end: auto; inset-block-start: .5rem; }
  .g3d-card-pics { width: 5rem; height: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .g3d-card, .g3d-card::before, .g3d-ring { animation: none; }
  .g3d-mv model-viewer, .g3d-ref { transition: none; }
}