/* 3D models (shared: IKEA'ish + A.O.K.) */
.model-3d{display:grid;gap:18px;padding-bottom:56px}
.model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.model-card{margin:0;display:grid;gap:12px;align-content:start;min-width:0}
.model-card model-viewer{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/5;background:var(--soft);border-radius:4px;--poster-color:transparent}
.model-card figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:15px}
.model-card figcaption span{color:var(--mute);font-size:14px}
.swatches{display:grid;gap:12px}
.model-card model-viewer .dim{pointer-events:none;font:500 12px var(--font);color:var(--ink);background:rgba(255,255,255,.85);padding:2px 6px;border-radius:3px;white-space:nowrap;transform:translateY(-50%)}
.model-card model-viewer .dim-dot{display:none}
.model-card model-viewer .dim-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.model-card model-viewer .dim-lines line{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.model-card model-viewer.hide-dims-anim .dim,.model-card model-viewer.hide-dims-anim .dim-lines,.model-card model-viewer.hide-dims .dim,.model-card model-viewer.hide-dims .dim-lines{display:none}
.card-controls{display:flex;flex-wrap:wrap;gap:8px}
.swatch-group{display:grid;gap:8px;min-width:0}
.swatch-group h3{margin:0;font-size:13px;font-weight:500;display:flex;justify-content:space-between;gap:8px}
.swatch-group h3 span{color:var(--mute);font-weight:400}
.swatch-dots{display:flex;flex-wrap:wrap;gap:8px}
.swatch-dots button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);padding:0;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 3px var(--bg);transition:transform .15s}
.swatch-dots button[aria-pressed="true"]{border:2px solid var(--ink)}
.swatch-dots button:hover{transform:scale(1.06)}
.swatch-dots button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.states{display:flex;flex-wrap:wrap;gap:8px}
.dim-toggle{font:500 13px var(--font);padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.dim-toggle[aria-pressed="true"]{border-color:var(--ink)}
.dim-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.states button{font:500 13px var(--font);padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.states button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.states button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:860px){.model-grid{grid-template-columns:1fr;gap:40px}.model-card model-viewer{aspect-ratio:1/1}}
@media (prefers-reduced-motion:reduce){.swatch-dots button{transition:none}}
/* Homepage 3D hero: 2 viewers side by side */
.hero-3d{padding-bottom:40px}
.hero-3d .model-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.hero-3d .model-card model-viewer{aspect-ratio:1/1}
.hero-3d .swatches{display:none}
.hero-3d .model-card figcaption a{color:var(--ink);font-weight:500;text-decoration:none}
.hero-3d .model-card figcaption a:hover{text-decoration:underline}
@media (max-width:760px){.hero-3d .model-grid{grid-template-columns:1fr;gap:32px}}
.hero-3d .model-card figcaption a.more{color:var(--mute);font-size:14px;font-weight:400}
/* A.O.K. page: square small viewers */
.model-grid--aok .model-card model-viewer{aspect-ratio:1/1}
/* Wide card (A.O.K. Kit): own row, centered, max 720px */
.model-card--wide{grid-column:1/-1;width:100%;max-width:720px;justify-self:center;margin-top:24px}
.model-grid--aok .model-card--wide model-viewer{aspect-ratio:4/3}
/* zoom / centre buttons inside each 3D viewer (desktop only) */
.mv-zoom{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;z-index:2}
.mv-zoom button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:rgba(246,245,242,.9);color:var(--ink);font:500 17px/1 var(--font);display:grid;place-items:center;cursor:pointer;padding:0}
.mv-zoom button:hover{border-color:var(--ink)}
.mv-zoom button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mv-zoom svg{width:15px;height:15px;fill:currentColor}
@media (hover:none){.mv-zoom{display:none}}