/*
  Polica — predstavitvena stran.

  Barve so e-papir: cenovka zna natanko črno, belo in rdečo, zato jih stran
  uporablja kot celotno paleto. Rdeča je signal in je redka — nosi jo cena,
  gumb in ena oznaka, nič drugega.

  Brez okvirja, brez gradnje: ta datoteka in index.html sta cela stran.
*/

:root {
  --ink: #15171c;
  --ink-soft: #4b5260;
  --ink-faint: #767e8c;
  --paper: #ffffff;
  --paper-2: #f6f5f3;
  --paper-3: #ece9e4;
  --line: #dcd8d2;
  --accent: #c41f3e;
  --accent-dark: #a01830;
  --accent-wash: #fdeef0;
  --on-accent: #ffffff;

  --radius: 10px;
  --wrap: 1120px;
  --gutter: 16px;

  --shadow-sm: 0 1px 2px rgb(21 23 28 / 6%), 0 2px 8px rgb(21 23 28 / 4%);
  --shadow-md: 0 2px 4px rgb(21 23 28 / 6%), 0 12px 32px rgb(21 23 28 / 8%);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eceef2;
    --ink-soft: #a8b0bd;
    --ink-faint: #7d8694;
    --paper: #101218;
    --paper-2: #171a21;
    --paper-3: #1f232c;
    --line: #2b303a;
    --accent: #ff5a72;
    --accent-dark: #ff7d90;
    --accent-wash: #2a1620;
    --on-accent: #15171c;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 30%), 0 16px 40px rgb(0 0 0 / 40%);
  }
}

:root[data-theme="dark"] {
  --ink: #eceef2;
  --ink-soft: #a8b0bd;
  --ink-faint: #7d8694;
  --paper: #101218;
  --paper-2: #171a21;
  --paper-3: #1f232c;
  --line: #2b303a;
  --accent: #ff5a72;
  --accent-dark: #ff7d90;
  --accent-wash: #2a1620;
  --on-accent: #15171c;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 30%), 0 16px 40px rgb(0 0 0 / 40%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap.narrow {
  max-width: 760px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 50;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 14px;
  border: 2px solid var(--accent);
  border-radius: 8px;
}

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ glava */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

/* Logotip je napis, ne znak ob napisu. Crke dedujejo barvo, zato se na temni
   podlagi pobelijo same; rdeca cena v crki o ostane rdeca. */
.brand-logo {
  display: block;
  height: 30px;
  width: auto;
}

.brand-foot .brand-logo {
  height: 26px;
}

/* Na telefonu je glava ožja in napis poleg menija potrebuje nekaj manj. */
@media (max-width: 560px) {
  .brand-logo {
    height: 26px;
  }
}

.head-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 15px;
}

.head-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.head-nav a:hover {
  color: var(--ink);
}

/* Stran, na kateri obiskovalec je. Brez tega je navigacija na petih straneh
   povsod enaka in nic ne pove, kje si. */
.head-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Preklopnik jezika. Dve crki, ker je ime jezika v glavi predolgo, in ob
   gumbih za prijavo, ker tja seze oko, ki nekaj isce. */
.lang {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.lang:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.head-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ------------------------------------------------------------------ gumbi */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 560;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.btn-lg {
  padding: 13px 24px;
  font-size: 16.5px;
}

.btn-solid {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-solid:hover {
  background: var(--accent-dark);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: var(--paper);
}

.btn-ghost:hover {
  border-color: var(--ink-faint);
}

.btn-quiet {
  color: var(--ink-soft);
}

.btn-quiet:hover {
  color: var(--ink);
  background: var(--paper-2);
}

/* ------------------------------------------------------------------- hero */

.hero {
  padding: 64px 0 76px;
  background:
    radial-gradient(60% 70% at 88% 8%, var(--accent-wash) 0%, transparent 62%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
}

.eyebrow {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  margin-bottom: 20px;
}

.lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-note {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--ink-faint);
  max-width: 50ch;
}

/* ------------------------------------------------- hero vizual: cenovka */

.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.esl {
  width: 100%;
  max-width: 400px;
  background: #fdfdfb;
  color: #15171c;
  border: 1px solid #c9c6c0;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  padding: 18px 20px 16px;
  display: grid;
  gap: 12px;
  /* E-papir ni na zaslonu: podloga ostane svetla tudi v temnem načinu. */
}

.esl-name {
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.esl-sku {
  margin-top: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.esl-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-top: 1px solid #e3e0da;
  border-bottom: 1px solid #e3e0da;
  padding: 10px 0 12px;
}

.esl-amount {
  font-size: 62px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #c41f3e;
}

.esl-dec {
  font-size: 34px;
}

.esl-unit {
  font-size: 14px;
  font-weight: 600;
  color: #4b5260;
  margin-left: auto;
}

.esl-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.esl-badge {
  background: #c41f3e;
  color: #fff;
  font-weight: 680;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 4px;
}

.esl-prev {
  color: #6b7280;
  text-decoration: line-through;
}

.esl-shelf {
  width: min(100%, 440px);
  height: 10px;
  margin-top: -1px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(var(--paper-3), var(--paper-2));
  border: 1px solid var(--line);
  border-top: none;
}

.esl-caption {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-faint);
  text-align: center;
  max-width: 38ch;
}

/* ---------------------------------------------------------------- sekcije */

.section {
  padding: 76px 0;
}

.band {
  padding: 76px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-title {
  font-size: clamp(25px, 2.8vw, 33px);
  margin-bottom: 14px;
}

.section-lede {
  font-size: 17.5px;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 40px;
}

/* Opomba pod razdelkom: ne kriči, a je dovolj vidna, da se jo prebere. */
.section-note {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-2);
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 72ch;
}

.section-note a {
  color: var(--accent);
  font-weight: 600;
}

/* Obrazec za povpraševanje: dva stolpca na širokem, en na telefonu. */
.povprasevanje {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  max-width: 760px;
}

.polje {
  display: grid;
  gap: 6px;
}

.polje-sirok {
  grid-column: 1 / -1;
}

.povprasevanje label {
  font-size: 14px;
  font-weight: 600;
}

.neobvezno {
  font-weight: 400;
  color: var(--ink-faint);
}

.povprasevanje input,
.povprasevanje textarea {
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.povprasevanje textarea {
  resize: vertical;
}

.povprasevanje input:focus-visible,
.povprasevanje textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Vaba za robote: iz toka strani in iz branja zaslonskih bralnikov. */
.vaba {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.obrazec-dno {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.obrazec-stanje {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.obrazec-stanje.ok {
  color: #0f7b47;
  font-weight: 600;
}

.obrazec-stanje.napaka {
  color: var(--accent-dark);
  font-weight: 600;
}

@media (max-width: 640px) {
  .povprasevanje {
    grid-template-columns: 1fr;
  }
}

.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 36px;
}

.claim p:not(.claim-big) {
  color: var(--ink-soft);
  font-size: 16px;
}

.claim-big {
  font-size: 19px;
  font-weight: 640;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

/* ------------------------------------------------------------------- tok */

.flow {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  counter-reset: none;
}

.flow-step {
  position: relative;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.flow-step h3 {
  font-size: 17.5px;
  margin-bottom: 8px;
}

.flow-step p {
  font-size: 15.5px;
  color: var(--ink-soft);
}

.pipe {
  margin: 0;
  padding: 26px 20px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}

.pipe svg {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}

.pipe-box rect {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 1.2;
}

.pipe-box text {
  fill: var(--ink-soft);
  font-family: var(--font);
  font-size: 14px;
  text-anchor: middle;
}

.pipe-box .pipe-strong {
  fill: var(--ink);
  font-size: 19px;
  font-weight: 650;
}

.pipe-accent rect {
  stroke: var(--accent);
  stroke-width: 1.6;
}

.pipe-arrow path {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Stevilka pred razlogom: sest enakih odstavkov je bila stena, skozi katero
   oko zdrsne. Stevilka da vsakemu zacetek in oko ve, da jih je sest. */
.claim-num {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Pas s stevilkami: temen, da stran nekje zadiha, in kratek, ker so vse
   stiri stevilke ze zapisane drugje na strani. */
.stevilke {
  background: #15171c;
  color: #fff;
  padding: 44px 0;
}

.stevilke-vrsta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px;
}

.stevilka {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stevilka-opis {
  margin-top: 8px;
  font-size: 14.5px;
  color: #b9bfcb;
  max-width: 24ch;
}

/* --------------------------------------------------------------- kartice */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.card h3 {
  font-size: 17px;
  margin-bottom: 9px;
}

.card p {
  font-size: 15.5px;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ viri */

.sources {
  margin-top: 0;
}

.source {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.source h3 {
  font-size: 19px;
  margin-bottom: 9px;
}

.source p:last-child {
  font-size: 15.5px;
  color: var(--ink-soft);
}

.source-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 14px;
}

.source-tag-ready {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}

.callout {
  margin-top: 40px;
  padding: 24px 26px;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.callout h3 {
  font-size: 18px;
  margin-bottom: 9px;
}

.callout p {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 76ch;
}

/* Drobni tisk na cenovki v naslovu: prejsnja cena, ki jo zahteva 15. clen
   ZVPot-1. Majhna je namenoma — na pravi cenovki je prav tako. */
.esl-legal {
  margin-top: -4px;
  /* Drobno namenoma: na pravi cenovki je prejsnja cena drobni tisk pod
     znizano ceno, ne enakovredna vrstica. Stran naj kaze isto razmerje. */
  font-size: 10px;
  letter-spacing: 0.01em;
  color: #8a909b;
}

/* Sklep pod razlogi, cez celo sirino. */
.claim-foot {
  margin-top: 34px;
  font-size: 17px;
  color: var(--ink);
  max-width: 60ch;
}

.cols-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 34px;
}

/* Besedilo in slika drug ob drugem, kjer slika kaj dokazuje. */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.split p {
  margin-top: 14px;
  color: var(--ink-soft);
  max-width: 56ch;
}

.split .note,
.source .note {
  font-size: 15px;
  color: var(--ink-faint);
}

.split-figure {
  margin: 0;
}

.split-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.split-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-faint);
  text-align: center;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------------------------------------------------------------- cenovke */

/* Risane cenovke, ne fotografije iz kataloga: tam so napisi angleski in cene
   v dolarjih, kar bralca na slovenski strani vsakic ustavi — in slika tujega
   izdelka ni slika tega, kar stranka dobi. SVG je povrhu lazji od fotografije
   in ostane oster na vsakem zaslonu. */
/* Fotografije iz trgovin. Risbe povejo, kaj na cenovki pise; fotografija
   pove, kako to izgleda na polici — in to je prvo, kar kdo vprasa. */
.foto-grid {
  display: grid;
  /* 248px, da gredo stiri fotografije v eno vrstico in se zadnja ne znajde
     sama pod ostalimi tremi. */
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.foto-grid figure {
  margin: 0;
}

.foto-grid img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-2);
}

.foto-grid figcaption {
  margin-top: 9px;
  font-size: 14px;
  color: var(--ink-soft);
}

.esl-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.esl-gallery figure {
  margin: 0;
  padding: 14px 14px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.esl-gallery img {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: contain;
}

.esl-gallery figcaption {
  margin-top: 11px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.esl-gallery figcaption strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Mere pod vsako risbo. Oznaka in vrednost v dveh stolpcih, da se ocesu ni
   treba loviti po vrsticah razlicnih dolzin. */
.spec {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 3px;
  text-align: left;
  font-size: 12.5px;
}

.spec > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.spec dt {
  color: var(--ink-faint);
}

.spec dd {
  margin: 0;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.esl-gallery-pair {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 620px;
}

.esl-gallery-pair img {
  height: 150px;
}

.gallery-note {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 68ch;
}


.sub-title {
  margin-top: 54px;
  font-size: clamp(19px, 1.9vw, 22px);
}

.sub-lede {
  margin-top: 8px;
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 16px;
}

/* Tabela se na ozkem zaslonu raje drsi kot lomi: stiri stolpci, strnjeni v
   telefonsko sirino, so stolpec stevilk, ki jih nihce ne primerja vec. */
.table-scroll {
  margin-top: 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sizes {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15.5px;
}

.sizes th,
.sizes td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.sizes thead th {
  background: var(--paper-2);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sizes tbody th {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sizes td:nth-child(2),
.sizes td:nth-child(3) {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}

.sizes td:last-child {
  color: var(--ink-soft);
}

.sizes tbody tr:last-child th,
.sizes tbody tr:last-child td {
  border-bottom: none;
}

/* Na telefonu se tabela odreze brez vsakega namiga, da se da premakniti.
   Namig je zato viden samo tam, kjer je odrezana. */
/* Tabele na pravnih straneh nosijo stavke in ne mer, zato tu ne velja
   nelomljivost, ki je za milimetre prava. */
.sizes.sizes-besedilo tbody th,
.sizes.sizes-besedilo thead th,
.sizes.sizes-besedilo td,
.sizes.sizes-besedilo td:nth-child(2),
.sizes.sizes-besedilo td:nth-child(3) {
  white-space: normal;
  font-variant-numeric: normal;
  vertical-align: top;
}

.sizes-besedilo {
  /* Fiksna postavitev, sicer stiri stolpce stavkov razpre na dvojno sirino
     okvirja in tabela se drsi tudi na namizju. */
  table-layout: fixed;
  width: 100%;
  min-width: 620px;
  font-size: 14.5px;
}

.sizes-besedilo th:first-child,
.sizes-besedilo td:first-child {
  width: 26%;
}

.sizes-besedilo th:nth-child(2),
.sizes-besedilo td:nth-child(2) {
  width: 24%;
}

.sizes-besedilo th:nth-child(3),
.sizes-besedilo td:nth-child(3) {
  width: 22%;
}

.table-hint {
  display: none;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .table-hint {
    display: block;
  }
}

.table-note {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 68ch;
}

.fn {
  color: var(--accent);
}

/* Za bralnik zaslona, ne za oko. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Objavljena cena. En okvircek, ker je en znesek — trije paketi z isto
   stevilko bi bralca samo ustavili pri vprasanju, v cem je razlika. */
.cena-kartica {
  margin-top: 32px;
  padding: 34px 30px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.cena-glavna {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
}

.cena-vrstica {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cena-znesek {
  font-size: clamp(34px, 4.4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.cena-enota {
  font-size: 15px;
  color: var(--ink-soft);
}

.cena-plus {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-faint);
  align-self: center;
}

.cena-ddv {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 62ch;
}

.cena-gumbi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.source .plan-list {
  margin-top: 10px;
}

/* ------------------------------------------------------------------ cenik */

/* Pot do demota, potem ko gumbi na paketih vodijo v povprasevanje. Sredinsko
   pod mrezo paketov, ker velja za vse tri in ne za nobenega posebej. */
.plans-demo {
  margin-top: 26px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 16px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  margin-top: 36px;
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Izbrani paket je obrobljen, ne povecan: enaka visina vrstic naredi stolpce
   primerljive, kar je edini namen cenika. Zato oznaka "Najveckrat izbran"
   rezervira svojo vrstico tudi v paketih, ki je nimajo - sicer bi njihove
   cene sedele vsaka na svoji visini in jih oko ne bi moglo primerjati. */
.plan:not(.plan-featured)::before {
  content: "";
  display: block;
  height: 25px;
  margin-bottom: 8px;
}

.plan-featured {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}

.plan-flag {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}

.plan h3 {
  font-size: 19px;
}

.plan-price {
  margin-top: 10px;
}

.plan-amount {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* "Po dogovoru" je besedilo, ne znesek - pri 40px bi razbilo vrstico. */
.plan:last-child .plan-amount {
  font-size: 26px;
  letter-spacing: -0.02em;
}

.plan-per {
  font-size: 14px;
  color: var(--ink-faint);
  margin-top: 6px;
}

.plan-for {
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  /* Dve vrstici, da se seznami zacnejo na isti visini v vseh treh paketih. */
  min-height: calc(2 * 1.6em + 16px);
}

.plan-list {
  list-style: none;
  margin: 16px 0 24px;
  padding: 0;
  display: grid;
  gap: 9px;
  flex: 1;
}

.plan-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--ink-soft);
}

.plan-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.plan .btn {
  justify-content: center;
}

@media (max-width: 640px) {
  .plan-amount {
    font-size: 34px;
  }

  /* Paketi so zdaj drug pod drugim, zato ni vec cesa poravnavati - rezervirana
     vrstica in najmanjsa visina bi bili samo prazen prostor. */
  .plan:not(.plan-featured)::before {
    display: none;
  }

  .plan-for {
    min-height: 0;
  }
}

/* ------------------------------------------------------------------ demo */

.demo {
  padding: 76px 0;
  background: var(--ink);
  color: var(--paper);
}

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 56px;
  align-items: start;
}

.demo h2 {
  font-size: clamp(25px, 2.8vw, 33px);
  margin-bottom: 16px;
}

.demo .lede {
  color: color-mix(in srgb, var(--paper) 72%, var(--ink));
}

.ticks {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  color: color-mix(in srgb, var(--paper) 78%, var(--ink));
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.demo-safe {
  margin-top: 26px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  border-radius: 8px;
  font-size: 15px;
  color: color-mix(in srgb, var(--paper) 80%, var(--ink));
}

.demo .hero-note {
  color: color-mix(in srgb, var(--paper) 55%, var(--ink));
}

.demo .btn-solid {
  background: var(--paper);
  color: var(--ink);
}

.demo .btn-solid:hover {
  background: color-mix(in srgb, var(--paper) 86%, var(--accent));
}

.steps {
  list-style: none;
  margin: 0;
  padding: 24px;
  display: grid;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 5%, transparent);
}

.steps li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  font-size: 15.5px;
  color: color-mix(in srgb, var(--paper) 82%, var(--ink));
}

.steps li + li {
  border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}

.steps span {
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
}

/* ------------------------------------------------------------- vprasanja */

details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}

details:first-of-type {
  border-top: 1px solid var(--line);
}

summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 36px 17px 0;
  font-size: 17px;
  font-weight: 580;
  letter-spacing: -0.01em;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 25px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

details[open] summary::after {
  transform: rotate(-135deg);
  top: 28px;
}

details p {
  padding: 0 48px 20px 0;
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 72ch;
}

/* -------------------------------------------------------------------- cta */

.cta {
  padding: 84px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}

.cta-inner {
  text-align: center;
}

.cta h2 {
  font-size: clamp(25px, 3vw, 35px);
  margin-bottom: 14px;
}

.cta p {
  color: var(--ink-soft);
  font-size: 17.5px;
  max-width: 54ch;
  margin: 0 auto;
}

.cta .hero-actions {
  justify-content: center;
}

/* Dodatki za pritrditev. Slike so izrezi iz dobaviteljevega kataloga in
   imajo lastno modro podlago, zato polnijo okvir do roba — tako je videti
   namerno in ne kot slika, ki ji je ostal kos ozadja. */
.dodatki {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.dodatki figure {
  margin: 0;
}

.dodatki img {
  display: block;
  width: 100%;
  height: 128px;
  object-fit: cover;
  border-radius: var(--radius);
}

.dodatki figcaption {
  margin-top: 9px;
  font-size: 14px;
  color: var(--ink-soft);
}

.dodatki figcaption strong {
  display: block;
  color: var(--ink);
  font-weight: 640;
}

/* Specifikacije: prvi stolpec nosi ime podatka, ostali tri modele. */
.sizes.sizes-spec {
  table-layout: fixed;
  width: 100%;
  min-width: 620px;
  font-size: 14.5px;
}

.sizes.sizes-spec tbody th {
  white-space: normal;
  font-weight: 600;
  color: var(--ink-soft);
}

.sizes.sizes-spec th:first-child,
.sizes.sizes-spec td:first-child {
  width: 28%;
}

/* Veliki zasloni: eden je pokoncen, trije so dolgi trakovi. Zato dve mrezi
   in ne ena — trak v stolpcu kartice bi bil crta. */
.zasloni-par {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: 18px;
  margin-top: 26px;
  align-items: end;
}

.trakovi {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.zasloni-par figure,
.trakovi figure {
  margin: 0;
}

.zasloni-par img,
.trakovi img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.zasloni-par figcaption,
.trakovi figcaption {
  margin-top: 9px;
  font-size: 14px;
  color: var(--ink-soft);
}

.zasloni-par figcaption strong,
.trakovi figcaption strong {
  color: var(--ink);
  font-weight: 640;
}

@media (max-width: 760px) {
  .zasloni-par {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------- povecava */

.zoom {
  display: block;
  cursor: zoom-in;
  border-radius: var(--radius);
}

.zoom:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.povecava {
  width: min(92vw, 900px);
  max-height: 90vh;
  padding: 22px;
  border: none;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}

.povecava::backdrop {
  background: rgb(21 23 28 / 72%);
}

.povecava img {
  display: block;
  width: 100%;
  max-height: 74vh;
  object-fit: contain;
}

.povecava-opis {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--ink-soft);
  text-align: center;
}

.povecava-zapri {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink-faint);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.povecava-zapri:hover {
  background: var(--paper-2);
  color: var(--ink);
}

/* ---------------------------------------------------------------- pravno */

.pravno {
  max-width: 76ch;
}

.pravno h2 {
  margin-top: 36px;
  font-size: 19px;
}

.pravno p,
.pravno li {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.drobno {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-faint);
}

.pravno-datum {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-faint);
}

.pravno-seznam {
  margin-top: 6px;
  padding-left: 20px;
}

.pravno .table-scroll {
  margin-top: 18px;
}

/* Osnutek se mora videti, dokler je osnutek. Zato pas cez vso sirino in ne
   opomba v drobnem tisku, ki jo je mogoce spregledati do objave. */
.osnutek {
  padding: 14px 18px;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--accent-wash);
  color: var(--ink);
  font-size: 15.5px;
}

.todo {
  background: var(--accent);
  color: var(--on-accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------- noga */

.site-foot {
  padding: 44px 0 52px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

/* Mreza in ne ovijanje: trije bloki v vrsti so se ob ovijanju razsuli v tri
   vrstice, pri cemer je bil zadnji poravnan desno, prva dva pa levo. */
.foot-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: start;
}

.foot-inner > div:first-child {
  grid-column: 1;
  grid-row: 1;
}



.foot-note,
.foot-legal {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  margin-top: 8px;
}

.foot-legal a {
  color: inherit;
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 15px;
}

.site-foot nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-foot nav a:hover {
  color: var(--ink);
}

.site-foot nav {
  grid-column: 1;
  grid-row: 2;
}

.foot-legal {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  text-align: right;
}

@media (max-width: 760px) {
  .foot-inner {
    grid-template-columns: 1fr;
  }

  .site-foot nav,
  .foot-legal {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }
}

/* ----------------------------------------------------------- odzivnost */

@media (max-width: 960px) {
  .hero-grid,
  .demo-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  /*
    Vizual ostane pod besedilom tudi na ozkem zaslonu: naslov je tisto, kar
    mora obiskovalec videti prvo, cenovka ga podpira.

    Navigacija se na telefonu prelomi v svojo vrstico, namesto da bi izginila.
    Dokler je bila stran ena sama, je skrita pomenila drsenje; pri petih
    straneh bi pomenila, da do ostalih stirih s telefona ni poti razen noge.
  */
  .head-inner {
    flex-wrap: wrap;
    row-gap: 10px;
    padding-bottom: 8px;
  }

  .head-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 18px;
    font-size: 14.5px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .head-cta {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .hero {
    padding: 44px 0 56px;
  }

  .section,
  .band,
  .demo,
  .cta {
    padding: 56px 0;
  }

  .head-cta .btn-quiet {
    display: none;
  }

  .head-inner {
    gap: 12px;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
  }

  .esl-amount {
    font-size: 52px;
  }

  .foot-legal {
    margin-left: 0;
  }
}