/* seksjoner.css: det produktsidens seksjoner trenger i tillegg til nettsidens main.css.
   Kilde: mockup v5 (docs/handoffs/2026-09-30_LEVERT_arbeidsflyt-cad-miljo.mockup).
   Regler: to tekststemmer fra nettsiden, alltid svart, én strek (1 px), forklaringer i tips.
   Pakkebyggeren nekter klasser som verken står her eller i main.css. */
.ks-seksjon { --ks-ink:#000; --ks-paper:#fff; --ks-grey:#F5F5F5; }
[data-accordion-target] { transition:height .5s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) { [data-accordion-target] { transition:none; } }

/* «Nytt»: opphøyd og liten, øverst til høyre for etiketten (Nikolai 30.09) */
.ks-nytt { display:inline-block; margin-left:.2em; font-size:.62em; line-height:1; vertical-align:top; position:relative; top:-.25em; }

/* Størrelsesvalg: knapperad under innholdet, like felt, valgt er svart (Nikolai 30.09, utkast 4) */
.ks-faner--4 { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.ks-faner--4 button + button { border-left:0; }
.ks-faner button[aria-pressed=true] { background:#000; color:#fff; }
/* Mange valg (Wilkes: elleve oppsett): rader med to, tre eller fire, felles 1 px strek */
.ks-faner--mange { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); padding:1px 0 0 1px; }
@media (min-width:768px) { .ks-faner--mange { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1280px) { .ks-faner--mange { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.ks-faner--mange button { margin:-1px 0 0 -1px; }
.ks-faner button:focus-visible, .ks-fil:focus-visible, .ks-dialog__lukk:focus-visible, [data-ks-cad-open]:focus-visible { outline:1px solid #000; outline-offset:2px; }

/* (i)-tips i brødtekststemmen */
.ks-tips { position:relative; display:inline-block; vertical-align:middle; }
.ks-i { width:1.05rem; height:1.05rem; border:1px solid #000; border-radius:50%; background:#fff; color:#000; font-style:italic; font-size:.7rem; line-height:1; padding:0; cursor:help; }
.ks-tip { position:absolute; z-index:20; bottom:calc(100% + .5rem); right:-.5rem; width:max-content; max-width:16rem; padding:.6rem .75rem; background:#000; color:#fff; font-size:.875rem; line-height:1.35; visibility:hidden; opacity:0; transition:opacity .15s; pointer-events:none; }
.ks-tips:hover .ks-tip, .ks-i:focus + .ks-tip { visibility:visible; opacity:1; }

/* 3D: forhåndsbilde til raden åpnes, så lerretet. touch-action lar siden rulle på mobil. */
.ks-3d { position:relative; width:100%; height:min(80vw, 34rem); background:#F5F5F5; touch-action:pan-y; }
.ks-3d__bilde { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ks-3d canvas { position:relative; display:block; width:100% !important; height:100% !important; cursor:grab; }
.ks-3d canvas:active { cursor:grabbing; }
.ks-3d__status { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }

/* CAD: filikoner som kan velges, rutenett med felles 1 px strek */
.ks-filer { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid #000; border-left:1px solid #000; }
@media (min-width:640px) { .ks-filer { grid-template-columns:repeat(5, minmax(0,1fr)); } }
.ks-fil { display:grid; justify-items:start; align-content:start; gap:.5rem; padding:1rem; background:#fff; color:#000; border:0; border-right:1px solid #000; border-bottom:1px solid #000; text-align:left; cursor:pointer; transition:background .2s, color .2s; }
.ks-fil:hover { background:#F5F5F5; }
.ks-fil[aria-pressed=true] { background:#000; color:#fff; }
.ks-fil[aria-pressed=true]:focus-visible { outline-color:#fff; }
.ks-fil__ikon { width:2.5rem; height:3.125rem; overflow:visible; }
.ks-fil__ikon text { font-family:Agipo, sans-serif; font-size:9px; letter-spacing:.04em; fill:currentColor; }
.ks-fil[data-fmt="GSM"] .ks-fil__ikon path { stroke-dasharray:2 2; }

/* Lightbox: som formPopupButton.twig (bakteppe svart 50 %, hvit boks, ×, Escape) */
.ks-dialog { width:min(32rem, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); padding:0; border:0; background:#fff; color:#000; overflow:auto; }
.ks-dialog::backdrop { background:rgb(0 0 0 / .5); }
html:has(dialog.ks-dialog[open]) { overflow:hidden; }
.ks-dialog__lukk { position:absolute; top:.75rem; right:.75rem; width:2rem; height:2rem; background:none; border:0; cursor:pointer; font-size:1.5rem; line-height:1; color:inherit; }
.ks-dialog__inn { display:grid; gap:1.25rem; padding:1.5rem; }
.ks-dialog__skjema { padding:0; }
.ks-felt label { display:grid; gap:.4rem; }
.ks-felle { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.ks-melding { padding:.75rem 1rem; }
/* Ingen blå bakgrunn når nettleseren fyller ut feltene selv (Nikolai 06.10). */
.ks-dialog input:-webkit-autofill, .ks-dialog input:-webkit-autofill:hover, .ks-dialog input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #fff inset; box-shadow:0 0 0 1000px #fff inset; -webkit-text-fill-color:#000; caret-color:#000; transition:background-color 9999s; }
.ks-dialog input:autofill { background-color:#fff; }