/*
 * Walseng — benk2-ui.css · UI-laget for gravørbenken (#wbk2)
 * Version: 1.1 (26.10.2026 — Andreas: «oppdatere fontene våre til anbefalt innstillinger», lesbarhetsbriefen «Anbefalt»,
 *   pilot «ett konfiguratorpanel»): panelets tekst følger typeskalaen i style.css 5.37 (med fallback, som resten av fila).
 *   Feltetikettene (.w2-tlab) 16 px / 600 i vanlig setningsform uten sperring (var 12 px, .075em, versal fra benk2.css) ·
 *   fanene og Neste-knappen 16 px (var 15) · «valgfri», hjelpetekst, tilleggslinja og prisetiketten 15 px (var 12–13) ·
 *   summen --fs-price 22/24 px med tabulære tall (var 22). «valgfri» mister opacity .85 (tekst svekkes ikke med
 *   gjennomsiktighet). UNNTAK som står: Foto/3D-bryteren og brikkene på scenen (.w2-3dvalg/.w2-chip, 12 px) — de ligger
 *   oppå produktvisningen og vurderes for seg, så designflaten ikke krymper. Skrivefeltene, graveringsskriftene,
 *   bokstavfeltet, canvas/SVG og all tilstand er urørt.
 * Version: 1.0 (19.10.2026 — Andreas: «får du implementert dette?», overleveringen «layout og konfigurator-UI»)
 *
 * ENDRINGER (1.0, ny fil):
 *   Presentasjonslaget fra overleveringens configurator-ux.css, vurdert mot husreglene og tilpasset:
 *   • Aktiveres av klassen w2-ux på <body> (settes av mu-plugins/walseng-benk2-ui.php), ikke på #wbk2 —
 *     da trengs ingen endring i single-product.php. Selektoren «.w2-ux #wbk2» har samme vekt som
 *     forslagets «#wbk2.w2-ux».
 *   • Farger som husets tokens med fallback (samme mønster som benk2.css), ikke hardkodede hex.
 *   • Radius etter stil-låsen: knapper 9 px (forslaget hadde 3 px). Skrivefeltene beholder sidens 0 px.
 *   • Svaret under feltene (.w2-sk-svar): bg2 + topplinje i stedet for venstre-stripe (husregel), og
 *     ingen flate når det er tomt.
 *   • Neste-knappen beholder motorens farger (mørk «Neste», --gold-dark på siste steg via .gull) —
 *     forslaget farget alle stegene gull, så det siste steget ikke skilte seg ut.
 *   • Skala 17/15/13/12 px: 11 og 14 px i forslaget er rundet til 12 og 13. Maks to vekter (400/600).
 *   • Fokusring --gold, 2 px, som resten av siden.
 *   Lastes etter css/benk2.css. Rulles tilbake ved å fjerne mu-pluginen (eller produkt-ID-en i den).
 *   Ingen geometri, canvas, transformasjoner, graveringsskrifter, skjemafelt eller tilstand endres.
 */

.w2-ux #wbk2 .w2-panel {
  background: var(--surface, #faf6ec);
  box-shadow: -8px 0 30px rgba(40, 31, 22, .13);
}
@media (min-width: 1200px) {
  .w2-ux #wbk2 .w2-panel { flex-basis: 540px; width: 540px; }
}
.w2-ux #wbk2 .w2-track { scrollbar-width: thin; scrollbar-color: var(--sand-line-strong, #c9bca8) var(--surface, #faf6ec); }
.w2-ux #wbk2 .w2-sk { gap: 24px; }

/* Faner: rolig understrek i stedet for pille */
.w2-ux #wbk2 .w2-sk-faner {
  border: 0;
  border-bottom: 1px solid var(--sand-line, #d8cdbe);
  border-radius: 0;
  padding: 0;
  gap: 8px;
  background: transparent;
}
.w2-ux #wbk2 .w2-sk-faner button {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  min-height: 50px;
  padding: 8px 5px;
  color: var(--text-dim, #463a2c);
  font-size: var(--fs-ui, 1rem);
  font-weight: 400;
}
.w2-ux #wbk2 .w2-sk-faner button[aria-selected="true"] {
  border-bottom-color: var(--gold-dark, #6f5a33);
  background: transparent;
  box-shadow: none;
  color: var(--gold-dark, #6f5a33);
  font-weight: 600;
}

/* Etiketter og hjelpetekst */
.w2-ux #wbk2 .w2-panel .w2-tlab {
  font-size: var(--fs-ui, 1rem);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim, #463a2c);
  font-weight: 600;
}
.w2-ux #wbk2 .w2-panel .w2-valgfri {
  color: var(--text-dim, #463a2c);
  opacity: 1;
  font-size: var(--fs-help, .9375rem);
  letter-spacing: 0;
  font-weight: 400;
}
.w2-ux #wbk2 .w2-panel .w2-note,
.w2-ux #wbk2 .w2-panel .w2-sub { font-size: var(--fs-help, .9375rem); line-height: 1.5; color: var(--text-dim, #463a2c); }

/* Skrivefelt — style.css setter skjemafeltene med !important, derfor !important her (målt 19.10).
   Hjørnene følger siden (0 px), som live. */
.w2-ux #wbk2 .w2-panel .w2-tinp {
  background: #fffdf8 !important;
  border: 1px solid var(--sand-line-strong, #c9bca8) !important;
  color: var(--text, #1e1510) !important;
  box-shadow: none !important;
}
.w2-ux #wbk2 .w2-panel .w2-tinp:focus {
  border-color: var(--gold-dark, #6f5a33) !important;
  outline: 2px solid var(--gold, #a07f4d);
  outline-offset: 2px;
}
.w2-ux #wbk2 .w2-panel .w2-tinp::placeholder { color: var(--text-dim, #463a2c); opacity: .7; }

.w2-ux #wbk2 .w2-sk-rad { margin-top: 16px; }
.w2-ux #wbk2 .w2-sk-frad { gap: 10px; }
.w2-ux #wbk2 .w2-sk-lstr {
  border-color: var(--sand-line-strong, #c9bca8);
  border-radius: 6px;
  background: transparent;
}
.w2-ux #wbk2 .w2-sk-lstr button { width: 44px; color: var(--text-dim, #463a2c); }
.w2-ux #wbk2 .w2-sk-lstr span { min-width: 26px; font-size: 12px; }
.w2-ux #wbk2 .w2-sk-lstr span.aa { font-size: 17px; }

/* Tillegg og seksjoner */
.w2-ux #wbk2 .w2-sk-bakpa {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--bg, #f4ede2);
  border-color: var(--sand-line, #d8cdbe);
  font-size: var(--fs-help, .9375rem);
}
.w2-ux #wbk2 .w2-sk-bakpa small { font-size: var(--fs-help, .9375rem); opacity: 1; }
.w2-ux #wbk2 .w2-sk-seksjon {
  padding-top: 22px;
  border-top: 1px solid var(--sand-line, #d8cdbe);
}

/* Oppsummering av valgt design: husets meldingsmønster (bg2 + topplinje), ingen flate når tomt */
.w2-ux #wbk2 .w2-sk-svar {
  padding: 12px 14px;
  border-top: 3px solid var(--gold, #a07f4d);
  background: var(--bg2, #f0e8dc);
  color: var(--text-dim, #463a2c);
}
.w2-ux #wbk2 .w2-sk-svar:empty { padding: 0; border-top: 0; background: transparent; }

/* Prisområdet */
.w2-ux #wbk2 .w2-bar { background: var(--surface, #faf6ec); gap: 16px; }
.w2-ux #wbk2 .w2-bsum .l { font-size: var(--fs-help, .9375rem); letter-spacing: var(--ls-label, .06em); }
.w2-ux #wbk2 .w2-bsum .s { font-size: var(--fs-price, 1.375rem); font-weight: 600; line-height: 1.3; color: var(--text, #1e1510); font-variant-numeric: tabular-nums; }
.w2-ux #wbk2 .w2-next {
  min-height: 52px;
  border-radius: 9px;
  font-size: var(--fs-ui, 1rem);
  letter-spacing: 0;
}
.w2-ux #wbk2 .w2-close { min-width: 44px; min-height: 44px; }
.w2-ux #wbk2 .w2-3dvalg,
.w2-ux #wbk2 .w2-chip { font-size: 12px; }
.w2-ux #wbk2 .w2-panel button:focus-visible { outline: 2px solid var(--gold, #a07f4d); outline-offset: 2px; }

/* Mobil: tekstfeltet over hele bredden, størrelsesknappene ved etiketten */
@media (max-width: 440px) {
  .w2-ux #wbk2 .w2-sk-rad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
  }
  .w2-ux #wbk2 .w2-sk-rad > * { grid-column: 1 / -1; }   /* hjelpetekst o.l. under feltet: full bredde */
  .w2-ux #wbk2 .w2-sk-rad > .w2-tlab { grid-column: 1; grid-row: 1; align-self: center; }
  .w2-ux #wbk2 .w2-sk-rad > .w2-sk-frad { display: contents; }
  .w2-ux #wbk2 .w2-sk-rad .w2-sk-felt { grid-column: 1 / -1; grid-row: 2; }
  .w2-ux #wbk2 .w2-sk-rad .w2-sk-felt1 { max-width: 76px; }
  .w2-ux #wbk2 .w2-sk-rad .w2-sk-lstr { grid-column: 2; grid-row: 1; }
  .w2-ux #wbk2 .w2-sk-lstr { height: 44px; }
  .w2-ux #wbk2 .w2-sk-bakpa { justify-content: flex-start; }
}