/* ==========================================================================
   NAJEMI ČISTO — glavni slog
   Barve so povzete po logotipu: mornarsko modra + sveža zelena + nebeško modra
   ========================================================================== */

/* --- 1. Spremenljivke (tu spreminjaš barve celotne strani) ---------------
   Podlaga je kamnita (topla siva brez rumene), da modra in zelena iz logotipa
   izstopita. IMEN spremenljivk ne spreminjaj — --green-500, --navy-100,
   --sh-lg, --ink-soft, --ink-mute in --header-h bere rezervacija.js. */
:root {
  --navy-900: #002340;
  --navy-800: #00305f;
  --navy-700: #14396f;
  --navy-600: #1d4c8a;
  --navy-100: #e8eefa;
  --navy-050: #f7f7f5;

  --green-800: #2c5c0f;
  --green-700: #3f7a1a;
  --green-600: #4e9822;
  --green-500: #629e26;
  --green-100: #e4f4d6;

  --sky-600: #026ab3;
  --sky-500: #3aa7ef;
  --sky-100: #e2f2fe;

  --ink: #132038;
  --ink-soft: #3d4a5e;
  --ink-mute: #5c6a82;

  --bg: #ffffff;
  --bg-soft: #f5f5f3;
  --bg-tint: #ebebe7;
  --green-tint: #eef8e4;
  --line: #e3e2dd;
  --line-strong: #c8c6bf;

  --warn: #d97706;
  --danger: #d64545;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --sh-xs: 0 1px 3px rgba(13, 44, 96, .09);
  --sh-sm: 0 3px 12px rgba(13, 44, 96, .11);
  --sh-md: 0 10px 30px rgba(13, 44, 96, .14);
  --sh-lg: 0 24px 60px rgba(13, 44, 96, .20);

  --wrap: 1400px;
  --wrap-wide: 1720px;
  --gap: 24px;

  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-naslov: "Archivo", "Inter", "Segoe UI", -apple-system, Arial, sans-serif;

  --header-h: 92px;

  /* Vzdevki za gradnike, prenesene iz potrjenega predloga. Brez njih se
     ozadja škatel na fotografiji in kartic sploh ne izrišejo. */
  --cream: #ffffff;
  --sand-050: var(--bg-soft);
  --sand-100: var(--bg-tint);
  --sand-200: #dcdbd5;
  --font-h: var(--font-naslov);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* --- 1b. Pisave (gostimo jih sami – brez zunanjih zahtev) ---------------- */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 2. Osnove ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--navy-600); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--green-600); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy-800);
  font-family: var(--font-naslov);
  font-weight: 800;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

:focus-visible {
  outline: 3px solid var(--sky-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy-800); color: #fff; padding: 10px 18px;
  border-radius: var(--r-sm); transition: top .2s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* --- 3. Postavitev ------------------------------------------------------- */
.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 48px, var(--wrap-wide)); margin-inline: auto; }
/* Ozek stolpec samo za daljša besedila (pogoji, zasebnost) – ni sredinsko poravnan */
/* Ovoj je zožan na širino, ki jo besedilo dejansko zasede. Prej je bil širok
   kot cela stran (1400 px), besedilo v njem pa omejeno na 80 znakov — zato je
   viselo ob levem robu in desna tretjina strani je bila prazna. */
.wrap-narrow { width: min(100% - 48px, 940px); margin-inline: auto; }
.wrap-narrow > * { max-width: 80ch; }
.wrap-narrow > h2, .wrap-narrow > h1 { max-width: 24ch; }

.section { padding: clamp(56px, 7vw, 96px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--navy-050); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.section-head { max-width: 720px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 0; }

/* Deljen naslov: naslov levo, pojasnilo desno – prekine sredinsko poravnavo */
.section-head--split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: end; max-width: none;
}
.section-head--split h2 { margin-bottom: 0; }
.section-head--split > div:last-child { padding-bottom: 5px; }
.section-head--split p { max-width: 52ch; }

/* Dvostolpčna postavitev za pogosta vprašanja */
.faq-layout {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 76px); align-items: start;
}
.faq-layout__aside { position: sticky; top: calc(var(--header-h) + 28px); }
.faq-layout__aside h2 { margin-bottom: 12px; }
.faq-layout__aside p { color: var(--ink-soft); }

.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px);
}
.section-head-row .section-head { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-700); margin-bottom: 12px;
}
.eyebrow--light { color: var(--green-500); }

.lead { font-size: 1.12rem; color: var(--ink-soft); }

/* Kratka predstavitev na domači strani – dve do tri povedi, sredinjeno,
   brez naslova (ni je treba najaviti, sledi takoj za herojem). */
.section-lead { text-align: center; }
.section-lead .lead { margin: 0 auto; max-width: 66ch; }

/* --- 4. Gumbi ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font: inherit; font-size: .97rem; font-weight: 700;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform .16s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--green-700); color: #fff; box-shadow: 0 4px 14px rgba(44, 92, 15, .30); }
.btn--primary:hover { background: var(--green-800); color: #fff; box-shadow: 0 8px 22px rgba(44, 92, 15, .38); }

.btn--navy { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); color: #fff; }

.btn--ghost { background: #fff; color: var(--navy-800); border-color: var(--navy-600); }
.btn--ghost:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* stanje "dodano v rezervacijo" — jasno navizno, ne bledo */
.btn.is-added { background: var(--navy-800); border-color: var(--navy-800); color: #fff; box-shadow: none; }
.btn.is-added:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.btn--block { width: 100%; }
.btn--sm { padding: 10px 18px; font-size: .9rem; }
.btn--lg { padding: 16px 34px; font-size: 1.03rem; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.link-arrow { font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.link-arrow svg { transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* --- 5. Glava ------------------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 247, 245, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header.is-scrolled { box-shadow: var(--sh-sm); }

.header__inner {
  display: flex; align-items: center; gap: 20px;
  height: var(--header-h);
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo svg, .logo__slika { height: 50px; width: auto; display: block; }
/* Ker je meni sredinsko poravnan, na širokih zaslonih ob logotipu nastane
   velika praznina. Logotip pomaknemo približno na njeno sredino, bližje
   meniju. Ker meni zapolni preostanek vrstice, se ob premiku logotipa sam
   presredini za polovico premika — zato je vrednost dvakratnik želene vrzeli.
   Pod ~1150 px je 0, ker ima meni tam komaj dovolj prostora; pod 900 px
   se meni umakne v predal in logotip gre spet skrajno levo. */
@media (min-width: 901px) {
  .logo { margin-left: clamp(0px, 33vw - 378px, 145px); }
}

/* meni na sredini med logotipom (levo) in akcijami (desno) */
.nav { flex: 1; display: flex; justify-content: center; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 600; color: var(--navy-800);
}
.nav__link:hover { background: var(--navy-050); color: var(--navy-800); }
.nav__link[aria-current="page"] { color: var(--green-600); }

.header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header__phone {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  font-weight: 700; font-size: .92rem; color: var(--navy-800);
}
.header__phone:hover { border-color: var(--green-500); color: var(--green-600); }
.header__phone svg { flex-shrink: 0; }

.burger {
  display: none; width: 46px; height: 46px; padding: 0;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 20px; height: 2px; background: var(--navy-800); border-radius: 2px;
  position: relative; transition: background .15s ease;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--navy-800); border-radius: 2px; transition: transform .22s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }
.nav__meni { position: relative; }


.usp__ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--navy-050); color: var(--navy-700);
  display: grid; place-content: center;
}

/* --- 8. Kartica izdelka -------------------------------------------------- */
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: transform .2s ease, box-shadow .22s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--green-500); }
/* display: flex zgoraj povozi privzeti [hidden] { display: none }, zato bi
   filtri po kategoriji kartice le označili, ne pa tudi skrili. */
.card[hidden] { display: none; }

/* Trdna višina namesto aspect-ratio: fotografije naprav so kvadratne in so
   okvir z razmerjem raztegnile (kartica je bila zato visoka 715 px), tu in tam
   pa je slika stekla čez besedilo. S trdno višino in object-fit: contain je
   višina kartice znana že pred nalaganjem slike — brez poskakovanja. */
.card__media {
  position: relative; height: 220px;
  /* Bela ploskev namesto modrega preliva: fotografije naprav so izrezane na
     belem, zato so na nevtralni podlagi čiste in brez barvnega pridiha. */
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; padding: 15px;
  overflow: hidden;
}
.card__media svg { width: 82%; height: auto; max-height: 100%; }
.card__tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, .94); color: var(--navy-700);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill); box-shadow: var(--sh-xs);
}
.card__tag--hot { background: var(--green-700); color: #fff; }

/* 190 px = 220 px okvirja brez 2 × 15 px notranjega roba. Višina v pikslih,
   ne v odstotkih — odstotek bi se skliceval na sidro, sidro pa na sliko. */
.card__media img { width: 100%; height: 190px; object-fit: contain; mix-blend-mode: multiply; }
.card__media a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 0;
}

.card__body { padding: 18px 18px 19px; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 1.02rem; margin-bottom: 2px; }
.card__title a { color: inherit; }
.card__title a:hover { color: var(--green-600); }
.card__model {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 9px;
}
.card__desc { font-size: .86rem; color: var(--ink-soft); margin-bottom: 14px; }
.card__gumbi { margin-top: 14px; }
.card__vec {
  display: block; text-align: center; margin-top: 9px;
  font-size: .84rem; font-weight: 600; color: var(--ink-mute);
}
.card__vec:hover { color: var(--green-600); }

.price { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.price__main { font-size: 1.5rem; font-weight: 800; color: var(--navy-800); line-height: 1.1; }
.price__main small { font-size: .8rem; font-weight: 700; color: var(--ink-mute); }
.price__sub { font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-top: 3px; }
.card .btn { margin-top: 14px; }

/* --- 9. Filtri / čipi ---------------------------------------------------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.chip {
  padding: 10px 18px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  background: #fff; font: inherit; font-size: .9rem; font-weight: 600; color: var(--navy-800);
  cursor: pointer; transition: all .18s ease;
}
.chip:hover { border-color: var(--green-500); color: var(--green-700); }
.chip.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* --- 10. Koraki (kako deluje) -------------------------------------------- */
.band-navy {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.band-navy::after {
  content: ""; position: absolute; right: -140px; top: -140px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 182, 47, .22) 0%, rgba(102, 182, 47, 0) 70%);
  pointer-events: none;
}
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy p { color: rgba(255, 255, 255, .82); }

/* Koraki najema — prevzeto iz naročnikovega oblikovnega predloga
   (predlog-sekcija-navodila): vsak korak je svoja plošča s prisekanima
   vogaloma, ikona v obročku, pod naslovom zelena črtica, med ploščami pa
   kljukica. Besedilo je naše, iz konstante KORAKI v build.py — predlog je
   imel natanko istih pet korakov. */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; position: relative; z-index: 1; }
.step {
  position: relative; text-align: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-md);
  padding: 26px 16px 24px;
  /* prisekana vogala zgoraj levo in spodaj desno */
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.step__ico {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .035);
  display: grid; place-content: center; margin: 0 auto 18px; color: #fff;
}
.step__no {
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  color: var(--green-500); display: block; margin-bottom: 6px;
}
.step h3 { font-size: 1.02rem; margin-bottom: 0; }
.step h3::after {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--green-500); border-radius: 1px; margin: 10px auto 12px;
}
.step p { font-size: .89rem; margin: 0; color: rgba(255, 255, 255, .74); }


.info-card {
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-lg);
  padding: 24px; box-shadow: var(--sh-sm); height: 100%;
  transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease;
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--green-500); }
.info-card__ico {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--green-600), var(--green-800)); color: #fff;
  display: grid; place-content: center; margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(78, 152, 34, .3);
}
.info-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.info-card p, .info-card address {
  font-size: .92rem; color: var(--ink-soft); font-style: normal; margin: 0;
}

/* --- 14. FAQ ------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 4px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 1.03rem; font-weight: 700; color: var(--navy-800); text-align: left;
}
.faq__q:hover { color: var(--green-600); }
.faq__q svg { flex-shrink: 0; transition: transform .22s ease; color: var(--green-600); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { display: none; padding: 0 4px 22px; color: var(--ink-soft); font-size: .97rem; max-width: 76ch; }
.faq__a.is-open { display: block; }

/* --- 15. CTA trak -------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy-800) 0%, var(--navy-600) 100%);
  border-radius: var(--r-xl); padding: clamp(30px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  color: #fff; position: relative; overflow: hidden;
}
.cta-band h2 { color: #fff; margin-bottom: 6px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem); }
.cta-band p { color: rgba(255, 255, 255, .82); margin: 0; }

/* --- 16. Noga ------------------------------------------------------------ */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, .72); padding: clamp(48px, 6vw, 72px) 0 0; }
.footer a { color: rgba(255, 255, 255, .72); }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.footer h4 { color: #fff; font-size: .82rem; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; font-size: .93rem; }
.footer__logo svg, .footer__logo .logo__slika { height: 52px; width: auto; margin-bottom: 16px; }
.footer__about { font-size: .93rem; max-width: 34ch; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .08); display: grid; place-content: center;
  transition: background .18s ease, transform .18s ease;
}
.footer__social a:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.footer__social a svg { display: block; }
/* Ikona brez vpisane povezave: vidna, a nekliknjiva — nočemo mrtvih povezav.
   Ko se povezava vpiše v podatki.py, se izriše kot <a> in oživi. */
.footer__social-cakanje {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05); display: grid; place-content: center;
  color: rgba(255, 255, 255, .35); cursor: default;
}
.footer__bottom {
  margin-top: 44px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .86rem;
}
.footer__bottom ul { display: flex; gap: 18px; flex-wrap: wrap; }

/* --- 17. Drobtinice ------------------------------------------------------ */
.crumbs { padding: 16px 0; font-size: .87rem; color: var(--ink-mute); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.crumbs li::after { content: "›"; margin-left: 8px; color: var(--line-strong); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--ink-mute); }
.crumbs a:hover { color: var(--green-600); }

/* Glava notranje strani: prej je bila ozek pas, ki se ni razlikoval od
   navadne sekcije. Zdaj ima zeleno črtico, večji naslov in več zraka —
   isti jezik kot pasovi na domači strani, le brez fotografije. */
.page-head {
  background: var(--navy-050);
  padding: clamp(40px, 5.5vw, 76px) 0 clamp(40px, 5vw, 68px);
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  margin-bottom: 14px; max-width: 20ch;
  font-size: clamp(2.1rem, 1.7vw + 1.5rem, 3rem);
}
.page-head h1::before {
  content: ""; display: block; width: 56px; height: 4px;
  background: var(--green-600); border-radius: 2px; margin-bottom: 22px;
}
.page-head p { color: var(--ink-soft); font-size: 1.08rem; max-width: 62ch; margin: 0; }
.page-head .eyebrow { margin-bottom: 6px; }

/* --- 18. Stran izdelka --------------------------------------------------- */
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

.gallery__main {
  background: linear-gradient(160deg, #f7fafd 0%, var(--bg-tint) 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 26px;
}
.gallery__main svg { width: 78%; height: auto; }
.gallery__thumbs { display: flex; gap: 12px; margin-top: 14px; }
.gallery__thumb {
  width: 78px; height: 68px; border-radius: var(--r-md); border: 1.5px solid var(--line);
  background: var(--bg-soft); padding: 8px; cursor: pointer; display: grid; place-items: center;
  transition: border-color .18s ease;
}
.gallery__thumb.is-active, .gallery__thumb:hover { border-color: var(--green-500); }
.gallery__thumb svg { width: 100%; height: auto; }

.product__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 18px 0 6px; }
.product__price .price__main { font-size: 2.1rem; }
.product__deposit { font-size: .95rem; color: var(--ink-soft); }

.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0; }
.spec {
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  padding: 18px 14px 16px; text-align: center;
  box-shadow: var(--sh-xs);
}
.spec__ico {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--green-100); color: var(--green-600);
  display: grid; place-content: center; margin: 0 auto 10px;
}
.spec strong { display: block; font-size: 1.28rem; font-weight: 800; color: var(--navy-800); line-height: 1.1; }
.spec span { font-size: .78rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding-left: 28px; position: relative; font-size: .95rem; color: var(--ink-soft); margin-bottom: 9px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 17px; height: 17px;
  border-radius: 50%; background: var(--green-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- 19. Rezervacija ----------------------------------------------------- */
.booking {
  background: #fff; border: 2px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); overflow: hidden; margin-top: 34px;
}
.booking__cols { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.booking__col { padding: clamp(20px, 2.4vw, 28px); }
.booking__col + .booking__col { border-left: 1px solid var(--line); background: var(--bg-soft); }

/* Rezervacija na strani izdelka — profesionalna postavitev čez celo širino:
   1) vrsta + koledar   2) kako poteka   3) povzetek s klicem k dejanju.
   Dnevi imajo fiksno višino, da je koledar viden v enem pogledu. */
.booking--mini .booking__cols {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
}
.booking--mini .booking__col { padding: clamp(20px, 2vw, 30px); }
.booking--mini .booking__col--summary {
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff;
}
.booking--mini .booking__col--summary .booking__label { color: rgba(255, 255, 255, .72); }
.booking--mini .booking__col--summary .rez-naprava strong { color: #fff; }
.booking--mini .booking__col--summary .rez-naprava span { color: rgba(255, 255, 255, .6); }
.booking--mini .booking__col--summary .summary li { border-bottom-color: rgba(255, 255, 255, .16); }
.booking--mini .booking__col--summary .summary li span:first-child { color: rgba(255, 255, 255, .78); }
.booking--mini .booking__col--summary .summary li span:last-child { color: #fff; }
.booking--mini .booking__col--summary .summary li.is-total { border-top-color: rgba(255, 255, 255, .3); }
.booking--mini .booking__col--summary .summary li.is-total span { color: #fff; }
.booking--mini .booking__col--summary .summary li.is-muted span:last-child { color: rgba(255, 255, 255, .75); }
.booking--mini .booking__col--summary .summary li.is-popust span { color: #a8e57a; }
.booking--mini .booking__col--summary .rez-naprava { border-bottom-color: rgba(255, 255, 255, .2); }
.booking--mini .booking__label { margin-bottom: 10px; }
.booking--mini .vrsta { gap: 10px; }
.booking--mini .vrsta__i { padding: 12px 14px; }
.booking--mini .vrsta__i span { display: none; }
.booking--mini .vrsta__i em { margin-top: 5px; font-size: 1rem; }
.booking--mini .cal__head { margin-bottom: 9px; }
.booking--mini .cal__day { aspect-ratio: auto; height: 38px; font-size: .84rem; }
.booking--mini .cal__legend { margin-top: 10px; }

/* seznam "dobro je vedeti" */
.rez-info { list-style: none; padding: 0; margin: 0 0 16px; }
.rez-info li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rez-info li:last-child { border-bottom: 0; }
.rez-info svg { flex-shrink: 0; color: var(--green-600); margin-top: 1px; }
.rez-info strong { display: block; font-size: .92rem; color: var(--navy-800); line-height: 1.35; }
.rez-info span { font-size: .82rem; color: var(--ink-soft); }

/* naprava v povzetku */
.rez-naprava { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px dashed var(--line-strong); }
.rez-naprava img { width: 52px; height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.rez-naprava strong { display: block; font-size: .98rem; color: var(--navy-800); }
.rez-naprava span { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--ink-mute); }

/* --- Zavihki (opis / tehnični podatki) na strani naprave ----------------- */
.tabs__nav { display: flex; gap: 6px; border-bottom: 2px solid var(--line); margin-bottom: 30px; flex-wrap: wrap; }
.tabs__btn {
  padding: 14px 26px; border: 0; background: none; font: inherit;
  font-size: 1.05rem; font-weight: 700; color: var(--ink-mute); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .16s ease, border-color .16s ease;
}
.tabs__btn:hover { color: var(--navy-800); }
.tabs__btn.is-on { color: var(--navy-800); border-bottom-color: var(--green-500); }
.tabs__panel { display: none; animation: tabIn .28s ease both; }
.tabs__panel.is-on { display: block; }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tabs__opis { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.tabs__opis h3 { font-size: 1.05rem; margin-bottom: 12px; }
.specs-full { columns: 2; column-gap: 56px; }
.specs-full li { break-inside: avoid; }

/* prednosti pod gumboma v heroju naprave */
.product__perks { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid var(--line); padding-top: 18px; }
.product__perks li { display: flex; gap: 10px; align-items: center; font-size: .92rem; color: var(--ink-soft); margin-bottom: 9px; }
.product__perks li:last-child { margin-bottom: 0; }
.product__perks svg { flex-shrink: 0; color: var(--green-600); }
.booking__label {
  font-size: .8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 14px; display: block;
}

/* koledar */
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__title { font-weight: 800; color: var(--navy-800); font-size: 1rem; }
.cal__nav {
  width: 34px; height: 34px; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong);
  background: #fff; cursor: pointer; display: grid; place-content: center; color: var(--navy-700);
  transition: all .16s ease;
}
.cal__nav:hover:not([disabled]) { border-color: var(--green-500); color: var(--green-600); }
.cal__nav[disabled] { opacity: .35; cursor: not-allowed; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow {
  text-align: center; font-size: .72rem; font-weight: 800; color: var(--ink-mute);
  text-transform: uppercase; padding-bottom: 6px; letter-spacing: .04em;
}
.cal__day {
  aspect-ratio: 1; border: 1.5px solid transparent; background: var(--bg-soft); border-radius: var(--r-sm);
  font: inherit; font-size: .92rem; font-weight: 700; color: var(--navy-800); cursor: pointer;
  display: grid; place-content: center; position: relative;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .1s ease;
}
.cal__day:hover:not(:disabled) { background: #fff; border-color: var(--green-500); transform: translateY(-1px); }
.cal__day:disabled { color: var(--line-strong); background: transparent; cursor: not-allowed; font-weight: 600; }
.cal__day.is-busy { color: #fff; background: #c0392b; text-decoration: line-through; cursor: not-allowed; }
.cal__day.is-range { background: #a9dd8c; color: var(--navy-800); border-radius: 0; border-color: transparent; }
.cal__day.is-start, .cal__day.is-end { background: var(--green-600); border-color: var(--green-600); color: #fff; box-shadow: 0 3px 8px rgba(78, 152, 34, .4); }
.cal__day.is-start { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.cal__day.is-end { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cal__day.is-start.is-end { border-radius: var(--r-sm); }
.cal__day.is-today::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--sky-500);
}
.cal__day.is-start.is-today::after, .cal__day.is-end.is-today::after { background: #fff; }

.cal__legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: .78rem; color: var(--ink-mute); }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal__legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* povzetek */
.summary { list-style: none; padding: 0; margin: 0 0 18px; }
.summary li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px dashed var(--line-strong); font-size: .93rem;
}
.summary li span:first-child { color: var(--ink-soft); }
.summary li span:last-child { font-weight: 700; color: var(--navy-800); text-align: right; }
.summary li.is-total { border-bottom: 0; border-top: 2px solid var(--navy-800); margin-top: 6px; padding-top: 14px; }
.summary li.is-total span { font-size: 1.15rem; font-weight: 800; color: var(--navy-800); }
.summary li.is-muted span:last-child { font-weight: 600; color: var(--ink-soft); }

/* izbirne kartice */
.opt-group { display: grid; gap: 10px; }
.opt {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: #fff; cursor: pointer; transition: border-color .16s ease, background .16s ease;
}
.opt:hover { border-color: var(--green-500); }
.opt input { margin: 3px 0 0; accent-color: var(--green-500); width: 17px; height: 17px; flex-shrink: 0; }
.opt strong { display: block; font-size: .93rem; color: var(--navy-800); line-height: 1.4; }
.opt span { font-size: .82rem; color: var(--ink-mute); }
.opt:has(input:checked) { border-color: var(--green-500); background: var(--green-100); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: .85rem; font-weight: 700; color: var(--navy-800); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: #fff; color: var(--ink); transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(102, 182, 47, .16);
}
.field textarea { min-height: 120px; resize: vertical; }
.field--check { display: flex; gap: 10px; align-items: flex-start; font-size: .87rem; color: var(--ink-soft); }
.field--check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--green-500); flex-shrink: 0; }
.field .hint { font-size: .8rem; color: var(--ink-mute); margin-top: 5px; }
.field .error { font-size: .8rem; color: var(--danger); margin-top: 5px; display: none; }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field.has-error .error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.notice {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--r-md); font-size: .88rem; line-height: 1.55;
  background: var(--navy-100); color: var(--navy-800); border: 1px solid #cdd9ee;
}
.notice svg { flex-shrink: 0; margin-top: 2px; }
.notice--warn { background: #fff5e6; border-color: #f5d9a8; color: #7a4a06; }
.notice--ok { background: var(--green-100); border-color: #bfe3a3; color: var(--green-700); }

/* modalno okno potrditve */
.modal {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(8, 33, 74, .55); backdrop-filter: blur(4px);
}
.modal.is-open { display: flex; }
.modal__box {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  width: min(100%, 560px); max-height: 90vh; overflow-y: auto; padding: clamp(24px, 3vw, 38px);
}
.modal__ico {
  width: 62px; height: 62px; border-radius: 50%; background: var(--green-100);
  color: var(--green-600); display: grid; place-content: center; margin: 0 auto 18px;
}

/* --- 20. Kontakt --------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact__list { list-style: none; padding: 0; margin: 0 0 26px; }
.contact__list li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.contact__list .usp__ico { background: var(--green-100); color: var(--green-700); }
.contact__list strong { display: block; color: var(--navy-800); font-size: .97rem; }
.contact__list span, .contact__list a { font-size: .93rem; color: var(--ink-soft); }
.contact__list a:hover { color: var(--green-600); }

.map {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-tint);
}
.map__frame {
  width: 100%; height: 360px; border: 0; display: block;
  filter: saturate(.92) contrast(1.02);
}
.map__pin {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-md);
  padding: 13px 16px; display: flex; gap: 12px; align-items: center;
  max-width: calc(100% - 32px);
}
.map__pin > svg { color: var(--green-600); flex-shrink: 0; }
.map__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Kontakt: zemljevid je zdaj samostojen pas čez cel spodnji del strani, ne
   stisnjen v kocko ob obrazcu (naročnikova pripomba) — večji in v širšem
   ovoju (.wrap-wide namesto .wrap). */
.map--full .map__frame { height: 360px; }
@media (min-width: 760px) { .map--full .map__frame { height: 460px; } }
@media (min-width: 1100px) { .map--full .map__frame { height: 520px; } }

/* --- 21. Piškotki -------------------------------------------------------- */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 22px 24px;
  max-width: 560px; margin-inline: auto;
  display: none;
}
.cookie.is-open { display: block; animation: cookieIn .3s ease both; }
@keyframes cookieIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cookie h3 { font-size: 1.05rem; margin-bottom: 8px; }
.cookie p { font-size: .89rem; color: var(--ink-soft); margin-bottom: 16px; }
.cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie__actions .btn { flex: 1 1 auto; }
.cookie__prefs { display: none; margin: 4px 0 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.cookie__prefs.is-open { display: block; }
.cookie__row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cookie__row:last-child { border-bottom: 0; }
.cookie__row strong { font-size: .89rem; color: var(--navy-800); display: block; }
.cookie__row span { font-size: .8rem; color: var(--ink-mute); }
.cookie__row input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--green-500); flex-shrink: 0; }
.cookie__link { background: none; border: 0; padding: 0; font: inherit; font-size: .84rem; color: var(--navy-600); cursor: pointer; text-decoration: underline; }

/* --- 21b. Košarica in stran rezervacije ---------------------------------- */

/* gumb s števcem v glavi */
.header__kos {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border: 1.5px solid var(--green-700); border-radius: var(--r-pill);
  font-weight: 700; font-size: .92rem; color: #fff; background: var(--green-700);
  box-shadow: 0 4px 12px rgba(87, 163, 39, .28); transition: background .16s ease, box-shadow .18s ease, transform .16s ease;
}
.header__kos:hover { background: var(--green-800); border-color: var(--green-800); color: #fff; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(44, 92, 15, .36); }
.header__kos-st {
  position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--navy-800); color: #fff;
  font-size: .74rem; font-weight: 800; display: grid; place-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.header__kos-st[hidden] { display: none; }

/* obvestilo ob dodajanju */
.obvestilo {
  position: fixed; left: 50%; bottom: 24px; z-index: 320;
  transform: translate(-50%, 16px); opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--navy-800); color: #fff; border-radius: var(--r-lg);
  padding: 14px 18px; box-shadow: var(--sh-lg); max-width: min(92vw, 520px);
  font-size: .94rem;
}
.obvestilo.is-in { opacity: 1; transform: translate(-50%, 0); }
.obvestilo > svg { color: var(--green-500); flex-shrink: 0; }
.obvestilo span { flex: 1 1 auto; }

/* postavitev strani rezervacije */
.rez {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.rez__blok { margin-bottom: clamp(30px, 4vw, 46px); }
.rez__blok:last-child { margin-bottom: 0; }
.rez__naslov {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.25rem; margin-bottom: 18px;
}
.rez__st {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy-800); color: #fff;
  display: grid; place-content: center; font-size: .95rem; font-weight: 800;
}
.rez__stranski { position: sticky; top: calc(var(--header-h) + 24px); }

/* seznam izbranih naprav */
.kos { list-style: none; padding: 0; margin: 0; }
.kos__v {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 36px;
  gap: 14px; align-items: center;
  padding: 14px; margin-bottom: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
}
.kos__sl { width: 64px; height: 64px; object-fit: contain; mix-blend-mode: multiply; }
.kos__op strong { display: block; font-size: .98rem; color: var(--navy-800); line-height: 1.3; }
.kos__op span { font-size: .78rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.kos__c { text-align: right; font-weight: 800; color: var(--navy-800); font-size: 1.02rem; white-space: nowrap; }
.kos__c small { font-size: .78rem; font-weight: 600; color: var(--ink-mute); }
.kos__c span { display: block; font-size: .76rem; font-weight: 600; color: var(--ink-mute); }
.kos__x {
  width: 36px; height: 36px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  background: #fff; color: var(--ink-mute); cursor: pointer;
  display: grid; place-content: center; transition: all .16s ease;
}
.kos__x:hover { border-color: var(--danger); color: var(--danger); background: #fff5f5; }

/* izbira vrste najema */
.vrsta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vrsta__i {
  display: block; padding: 18px 20px; cursor: pointer;
  background: #fff; border: 2px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color .16s ease, background .16s ease;
}
.vrsta__i:hover { border-color: var(--green-500); }
.vrsta__i.is-on { border-color: var(--green-600); background: var(--green-tint); box-shadow: 0 4px 14px rgba(78, 152, 34, .18); }
.vrsta__i input { position: absolute; opacity: 0; pointer-events: none; }
.vrsta__i strong { display: block; font-size: 1.02rem; color: var(--navy-800); }
.vrsta__i span { display: block; font-size: .84rem; color: var(--ink-mute); margin-top: 2px; }
.vrsta__i em {
  display: block; margin-top: 10px; font-style: normal;
  font-size: 1.15rem; font-weight: 800; color: var(--green-700);
}

/* povzetek ob strani — temno navlašč, da izstopa */
.povzetek {
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff; border: 0; border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 26px;
}
.povzetek__n { font-size: 1.2rem; margin-bottom: 16px; color: #fff; }
.povzetek__d { margin-top: 14px; font-size: .82rem; color: rgba(255, 255, 255, .6); text-align: center; }
.povzetek .summary li { border-bottom-color: rgba(255, 255, 255, .16); }
.povzetek .summary li span:first-child { color: rgba(255, 255, 255, .78); }
.povzetek .summary li span:last-child { color: #fff; }
.povzetek .summary li.is-total { border-top-color: rgba(255, 255, 255, .3); }
.povzetek .summary li.is-total span { color: #fff; }
.povzetek .summary li.is-muted span:last-child { color: rgba(255, 255, 255, .75); }
.povzetek .summary li.is-popust span { color: #a8e57a; font-weight: 700; }
.summary li.is-popust span { color: var(--green-700); font-weight: 700; }
.summary li.is-popust small { font-weight: 500; color: var(--ink-mute); }

.mt-16 { margin-top: 16px; }

/* --- 22. Pomožno --------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

/* Vsebina je vedno v polni barvi (nikoli obledela) – animira se le rahel dvig. */
.reveal { transform: translateY(14px); transition: transform .5s ease; }
.reveal.is-in { transform: none; }

/* --- 23. Odzivnost ------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto; margin: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh-md);
    padding: 12px 20px 22px; display: none; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 13px 12px; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .header__actions .btn--primary { display: none; }
  .header__phone { padding: 9px 12px; }
  .header__phone .header__phone-txt { display: none; }
  /* gumb Rezervacija na mobilnem: samo ikona koledarja, brez besedila */
  .header__kos { padding: 10px 12px; }
  .header__kos > span:not(.header__kos-st) { display: none; }
  .header__actions { gap: 8px; }
  .logo svg { height: 42px; }

  .product { grid-template-columns: 1fr; }
  .booking__cols, .booking--mini .booking__cols { grid-template-columns: 1fr; }
  .booking__col + .booking__col { border-left: 0; border-top: 1px solid var(--line); }
  .booking--mini .vrsta__i span { display: block; }
  .tabs__opis { grid-template-columns: 1fr; }
  .specs-full { columns: 1; }
  .contact { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  .section-head--split { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .section-head--split > div:last-child { padding-bottom: 0; }
  .faq-layout, .split { grid-template-columns: 1fr; gap: 28px; }
  .faq-layout__aside, .split__sticky { position: static; }
  .map__frame { height: 300px; }
  .rez { grid-template-columns: 1fr; }
  .rez__stranski { position: static; }
  .vrsta { grid-template-columns: 1fr; }
  .kos__v { grid-template-columns: 52px minmax(0, 1fr) 36px; row-gap: 8px; }
  .kos__sl { width: 52px; height: 52px; }
  .kos__c { grid-column: 2 / 4; text-align: left; }
  .obvestilo { left: 12px; right: 12px; transform: translateY(16px); max-width: none; }
  .obvestilo.is-in { transform: translateY(0); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap, .wrap-narrow { width: calc(100% - 32px); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Naprave ostanejo po dve v vrsti tudi na telefonu — sedem kartic v enem
     stolpcu je predolgo drsanje. Selektor je ID, zato prebije .grid-4 zgoraj.
     Opis naprave na tej širini odpade, ker bi ostale tri besede na vrstico. */
  #seznam-naprav { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  #seznam-naprav .card__media { height: 128px; padding: 8px; }
  #seznam-naprav .card__media img { height: 112px; }
  #seznam-naprav .card__body { padding: 12px 12px 13px; }
  #seznam-naprav .card__title { font-size: .92rem; }
  #seznam-naprav .card__model { font-size: .7rem; }
  #seznam-naprav .card__desc { display: none; }
  #seznam-naprav .price__main { font-size: 1.15rem; }
  #seznam-naprav .price__sub { font-size: .72rem; }
  #seznam-naprav .card .btn { margin-top: 10px; padding: 10px 8px; font-size: .84rem; }
  #seznam-naprav .card__vec { font-size: .76rem; margin-top: 6px; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .specs { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .cta-band { text-align: center; justify-content: center; }
  .cta-band .btn { width: 100%; }
  .gallery__thumb { width: 62px; height: 56px; }
  .cookie { left: 12px; right: 12px; bottom: 12px; padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .footer, .cookie, .btn, .booking { display: none !important; }
}

/* ==========================================================================
   DODANO PO PREGLEDU — ritem sekcij, dostopnost, novi sestavni deli
   ========================================================================== */

/* --- Ločevanje sekcij: nobena se ne dotika sosednje ---------------------- */
.section--soft, .section--tint { position: relative; }
.section--soft + .section--tint, .section--tint + .section--soft { padding-top: 0; }
.section--close { padding: clamp(44px, 5vw, 68px) 0 clamp(72px, 9vw, 112px); }

/* --- Skrito za oči, vidno bralnikom zaslona ----------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Mobilni meni: zavesa in zaklep drsenja ----------------------------- */
.nav-zavesa {
  position: fixed; inset: var(--header-h) 0 0; z-index: 90;
  background: rgba(0, 31, 69, .55); backdrop-filter: blur(2px);
}
.nav-zavesa[hidden] { display: none; }
body.je-meni { overflow: hidden; }

/* --- Vidno stanje ob uporabi tipkovnice pri izbiri vrste najema --------- */
.vrsta__i { position: relative; }
.vrsta__i input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.vrsta__i:has(input:focus-visible),
.opt:has(input:focus-visible) {
  outline: 3px solid var(--sky-600); outline-offset: 2px; border-color: var(--green-600);
}

/* --- Onemogočeni dnevi v koledarju morajo ostati berljivi --------------- */
.cal__day:disabled, .cal__day[aria-disabled="true"] { color: var(--ink-mute); opacity: .55; }

/* --- Galerija: slika na belem ozadju se zlije s podlago ----------------- */
.gallery__main img { mix-blend-mode: multiply; }

/* --- Cela kartica je klikljiva ----------------------------------------- */
.card { position: relative; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }

/* Domača stran: vodilna in preostale kartice naprav so v celoti klikljive
   (naročnik: "naj bodo klikabilne, da te vodijo točno na napravo"), po
   istem vzorcu kot .card__title zgoraj — naslov nosi povezavo, ::after jo
   raztegne čez celo kartico, gumb/povezava "Podrobnosti" ostane zraven kot
   viden, dosegljiv drugi vstop v isto povezavo. */
.vodilna, .naprava { position: relative; }
.card__gumbi { position: relative; z-index: 1; }

/* --- Video pri napravi -------------------------------------------------- */
.video { margin-top: 26px; }
.video__play {
  position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer; background: var(--navy-900);
  aspect-ratio: 16 / 9;
}
.video__play img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s ease, transform .3s ease; }
.video__play:hover img { opacity: 1; transform: scale(1.02); }
.video__btn {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-content: center;
  background: var(--green-700); color: #fff; box-shadow: var(--sh-md); padding-left: 4px;
}
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-lg); display: block; }
.video__caption { font-size: .86rem; color: var(--ink-mute); margin: 10px 2px 0; }

/* --- Akcijski paketi ---------------------------------------------------- */
.paketi { align-items: stretch; }
.paket {
  display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--green-600);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm);
}
.paket h3 { margin: 0 0 6px; }
.paket__head p { margin: 0; color: var(--ink-soft); }
.paket__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.paket__list li { display: flex; gap: 10px; align-items: flex-start; }
.paket__list svg { color: var(--green-700); flex-shrink: 0; margin-top: 2px; }
.paket__list strong { display: block; font-size: .97rem; }
.paket__list span { font-size: .86rem; color: var(--ink-mute); }
.paket__opis { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.paket__cena { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.paket__redna { text-decoration: line-through; color: var(--ink-mute); font-size: .95rem; margin-right: 8px; }
.paket__cena strong { font-family: var(--font-naslov); font-size: 1.9rem; color: var(--navy-800); }
.paket__cena small { color: var(--ink-mute); margin-left: 4px; }
.paket__prihranek { background: var(--green-100); color: var(--green-800); font-weight: 700; font-size: .82rem; padding: 5px 12px; border-radius: var(--r-pill); }
.paket__vikend { font-size: .86rem; color: var(--ink-mute); margin: 0; }

/* --- Pasovi dostave ----------------------------------------------------- */
.tabela-ovoj { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; min-width: 480px; }
.tabela th, .tabela td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela th { font-family: var(--font-naslov); font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.pas__km { white-space: nowrap; color: var(--ink-soft); }
.pas__cena { white-space: nowrap; font-weight: 800; color: var(--navy-800); }
.drobno { font-size: .86rem; color: var(--ink-mute); margin-top: 14px; }

/* --- Dodatki (čistila) -------------------------------------------------- */
.dodatki { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dodatki li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.dodatki svg { color: var(--green-700); flex-shrink: 0; margin-top: 3px; }
.dodatki div { flex: 1; }
.dodatki strong { display: block; }
.dodatki span { font-size: .88rem; color: var(--ink-mute); }
.dodatek__enota { font-weight: 500; color: var(--ink-mute); font-size: .86rem; }
.dodatek__cena { font-weight: 800; color: var(--navy-800); white-space: nowrap; }

/* --- Plasti: modal nad obvestili, obvestila nad piškotki ---------------- */
.modal { z-index: 400; }
.obvestilo { z-index: 350; }
.cookie { z-index: 300; }

/* --- Mobilno ------------------------------------------------------------ */
@media (max-width: 900px) {
  .header__phone { padding: 12px 14px; }
  .footer li a { display: inline-block; padding: 9px 0; }
  .footer__social a { width: 44px; height: 44px; }
  .card__vec { padding: 11px 0; }
  .link-arrow { padding: 9px 0; }
}

@media (max-width: 640px) {
  .booking--mini .cal__day { height: auto; aspect-ratio: 1; }
  .paket { padding: 22px; }
}

/* ==========================================================================
   IZOSTRITEV VIDEZA — tipografija, ritem, gostota, rezervacija na telefonu
   ========================================================================== */

/* --- Tipografska lestvica z večjim razponom -----------------------------
   Prej je bila razlika med H1 in H2 premajhna, zato je stran delovala ploska. */
h1 { font-size: clamp(2.25rem, 1.25rem + 3.9vw, 4rem); letter-spacing: -.03em; line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.65rem); letter-spacing: -.025em; line-height: 1.1; }
h3 { font-size: clamp(1.1rem, .99rem + .48vw, 1.35rem); letter-spacing: -.015em; }

.lead { font-size: clamp(1.05rem, 1rem + .28vw, 1.2rem); line-height: 1.6; max-width: 62ch; }
/* Nadaljnji odstavki opisa naprave: manjši od uvodnega, ista širina vrstice,
   ker je 65–75 znakov meja, pri kateri je daljše besedilo še berljivo. */
.opis__p { font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; margin-bottom: 1.1em; }

/* Cene in številke v naslovni pisavi – berejo se kot podatek, ne kot besedilo. */
.price__main, .product__price .price__main, .paket__cena strong,
.hero__price strong, .spec strong, .summary .is-total span:last-child {
  font-family: var(--font-naslov);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* --- Ritem: sekcije niso več vse enako visoke --------------------------- */
.section { padding: clamp(56px, 6.5vw, 96px) 0; }
.section--close { padding: clamp(40px, 4.5vw, 62px) 0 clamp(72px, 9vw, 116px); }
.section--tight { padding: clamp(36px, 4vw, 56px) 0; }

/* --- Kartice: gostejše, cena je glavni podatek -------------------------- */
.card__body { display: flex; flex-direction: column; gap: 8px; }
.card__desc { font-size: .92rem; line-height: 1.5; }
.price__main { font-size: 1.45rem; }
.price__sub { font-size: .82rem; }
.card__gumbi { margin-top: auto; padding-top: 4px; }

/* --- Rezervacija: bloki dobijo jasnejšo ločnico ------------------------- */
.rez__blok + .rez__blok { border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 36px); }
.rez__naslov { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; }
.rez__st {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy-800); color: #fff; display: grid; place-content: center;
  font-family: var(--font-naslov); font-size: .92rem; font-weight: 700;
}

/* --- Lepljiva vrstica z zneskom (samo telefon) -------------------------- */
.rez-vrstica { display: none; }
@media (max-width: 900px) {
  .rez-vrstica {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 340;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 22px rgba(0, 31, 69, .12);
  }
  .rez-vrstica[hidden] { display: none; }
  .rez-vrstica__c { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
  .rez-vrstica__c span { font-size: .78rem; color: var(--ink-mute); }
  .rez-vrstica__c strong { font-family: var(--font-naslov); font-size: 1.3rem; color: var(--navy-800); }
  .rez-vrstica .btn { padding: 13px 22px; }
  /* vsebina se ne sme skriti pod vrstico */
  body:has(.rez-vrstica:not([hidden])) { padding-bottom: 78px; }
  /* povzetek ob strani na telefonu ni lepljiv – vrstica opravi njegovo delo */
  .rez__stranski { position: static; }
}

/* --- Mobilni meni dobi glavno dejanje ----------------------------------- */
@media (max-width: 900px) {
  .nav__list { gap: 2px; }
  .nav::after {
    content: ""; display: block; height: 1px; background: var(--line); margin: 14px 0;
  }
}

/* --- Vrstica košarice na telefonu: dva stolpca, ne štirje ---------------- */
@media (max-width: 560px) {
  .kos__v {
    grid-template-columns: 52px minmax(0, 1fr) 36px;
    grid-template-areas: "slika opis brisi" ". cena cena";
    gap: 10px 12px; padding: 12px;
  }
  .kos__sl { grid-area: slika; width: 52px; height: 52px; }
  .kos__op { grid-area: opis; }
  .kos__op strong { font-size: .95rem; }
  .kos__c  { grid-area: cena; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .kos__c span { display: inline; }
  .kos__x  { grid-area: brisi; align-self: start; }
}

/* --- Samodejno dopolnjevanje kraja dostave ------------------------------- */
.field--samodej { position: relative; }
.samodej {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% - 22px);
  margin: 0; padding: 6px; list-style: none; max-height: 268px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.samodej[hidden] { display: none; }
.samodej li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: .95rem;
}
.samodej li strong { font-variant-numeric: tabular-nums; color: var(--navy-800); }
.samodej li span { margin-left: auto; font-size: .82rem; color: var(--ink-mute); white-space: nowrap; }
.samodej li:hover, .samodej li:focus { background: var(--navy-050); outline: none; }
.samodej li:focus { box-shadow: inset 0 0 0 2px var(--sky-600); }

/* --- Hitri izbor termina na strani Najemi -------------------------------- */
.hitri {
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 28px;
  background: var(--navy-800); color: #fff;
  border-radius: var(--r-md);
}
.hitri__c { flex: 1 1 240px; }
.hitri__n { font-family: var(--font-naslov); font-weight: 800; font-stretch: 108%; color: #fff; font-size: 1.1rem; display: block; }
.hitri__o { margin: 5px 0 0; font-size: .88rem; color: rgba(255, 255, 255, .72); max-width: 46ch; }
.hitri__polja { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.hitri__p { display: flex; flex-direction: column; gap: 5px; }
.hitri__p[hidden] { display: none; }
.hitri__p label, .hitri__oznaka { font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.66); text-transform: uppercase; letter-spacing: .05em; }
.hitri__p select, .hitri__p input {
  padding: 11px 13px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-sm);
  font: inherit; font-size: .95rem; background: rgba(255, 255, 255, .08); color: #fff;
  min-height: 44px; font-variant-numeric: tabular-nums;
}
.hitri__p select option { color: var(--ink); }
.hitri__p--izid strong { font-family: var(--font-naslov); font-size: 1.1rem; font-weight: 800; color: var(--green-500); padding-bottom: 10px; }
.hitri.je-nastavljen { box-shadow: inset 0 0 0 2px var(--green-500); }
@media (max-width: 560px) {
  .hitri { padding: 16px; gap: 16px; }
  .hitri__polja { width: 100%; }
  .hitri__p { flex: 1 1 130px; }
  .hitri__p select, .hitri__p input { width: 100%; }
}

/* --- Dodatek s količino (npr. čistilne tablete) -------------------------- */
.opt--kolicina { display: flex; align-items: center; gap: 16px; cursor: default; }
.opt--kolicina > span:first-child { flex: 1; }
.stevec { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.stevec__g {
  width: 40px; height: 40px; border: 1px solid var(--line-strong); background: #fff;
  border-radius: var(--r-sm); font-size: 1.2rem; font-weight: 700; color: var(--navy-800);
  cursor: pointer; line-height: 1;
}
.stevec__g:hover { border-color: var(--green-600); color: var(--green-800); }
.stevec__v {
  min-width: 40px; text-align: center; font-family: var(--font-naslov);
  font-size: 1.05rem; font-weight: 700; color: var(--navy-800);
}


/* ==========================================================================
   VSEBINSKE STRANI (nasveti, katera naprava, cenik, dostava)
   ========================================================================== */

/* --- Besedilo članka: širina vrstice, ki se še bere ---------------------- */
.clanek > p { max-width: 68ch; color: var(--ink-soft); line-height: 1.75; }
.clanek > p + h2 { margin-top: 40px; }
.clanek > h2 {
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); max-width: 34ch;
  padding-left: 16px; border-left: 4px solid var(--green-500); scroll-margin-top: calc(var(--header-h) + 20px);
}
.clanek .lead { max-width: 66ch; color: var(--ink); }

/* --- Kazalo vsebine ------------------------------------------------------ */
.kazalo {
  background: var(--navy-050); border: 1px solid var(--line); border-left: 4px solid var(--navy-600);
  border-radius: var(--r-md); padding: 22px 26px; margin: 32px 0 8px; box-shadow: var(--sh-xs);
  max-width: 68ch;
}
.kazalo__n {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 12px; padding: 0; border: 0;
}
.kazalo ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.kazalo li { color: var(--ink-mute); }
.kazalo a { color: var(--navy-700); font-weight: 600; font-size: .95rem; }
.kazalo a:hover { color: var(--green-700); text-decoration: underline; }

/* --- Povezave na naprave iz članka -------------------------------------- */
.pov-naprave { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.pov-naprava {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--sh-sm); color: var(--ink);
  transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease;
}
.pov-naprava:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--green-500); color: var(--ink); }
.pov-naprava img {
  width: 92px; height: 92px; object-fit: contain; flex-shrink: 0;
  background: var(--navy-050); border-radius: var(--r-md); padding: 6px;
}
.pov-naprava__t { display: flex; flex-direction: column; gap: 4px; }
.pov-naprava__t strong { font-family: var(--font-naslov); font-size: 1.02rem; font-weight: 800; color: var(--navy-800); }
.pov-naprava__t em { font-style: normal; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); }
.pov-naprava__t > span { font-size: .9rem; color: var(--ink-soft); }
.pov-naprava .link-arrow { color: var(--green-700); font-size: .9rem; margin-top: 6px; }

/* --- Kartica nasveta ----------------------------------------------------- */
.nasvet-k { display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.nasvet-k h2, .nasvet-k h3 { font-size: 1.06rem; margin: 0; max-width: none; }
.nasvet-k h2 a { color: var(--navy-800); }
.nasvet-k h2 a:hover { color: var(--green-700); }
.nasvet-k p { flex: 1; }
.nasvet-k .link-arrow { color: var(--green-700); font-size: .9rem; }
a.nasvet-k:hover { color: var(--ink); }
a.nasvet-k:hover h3 { color: var(--green-700); }

/* --- Tabeli: izbira naprave in cenik ------------------------------------ */
.tabela--izbira td:first-child { max-width: 30ch; }
.tabela--izbira td a { color: var(--navy-700); font-weight: 700; }
.tabela--izbira td a:hover { color: var(--green-700); text-decoration: underline; }
.tabela--izbira .drobno { margin-top: 0; }
.cenik__model { display: block; font-size: .84rem; color: var(--ink-mute); margin-top: 3px; }
.cenik__c { white-space: nowrap; font-weight: 800; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.tabela--cenik tbody tr:hover { background: var(--navy-050); }

@media (max-width: 640px) {
  .pov-naprava { padding: 14px; gap: 14px; }
  .pov-naprava img { width: 72px; height: 72px; }
  .kazalo { padding: 18px 20px; }
}
.clanek__datum { font-size: .84rem; color: var(--ink-mute); margin-top: 14px; }

/* --- Podpis izdelovalca v nogi ------------------------------------------ */
.footer__avtor {
  display: inline-block; margin-left: 14px; padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .62);
}
.footer__avtor:hover { color: #fff; text-decoration: underline; }
@media (max-width: 560px) {
  .footer__avtor { display: block; margin: 8px 0 0; padding: 0; border-left: 0; }
}

/* ==========================================================================
   GRADNIKI PRENOVLJENEGA VIDEZA (iz potrjenega predloga C4)
   Razredi so pobrani iz dejanske oznake strani, ne rocno — prvi poskus
   je izpustil .section--navy in ozadja skatel na fotografiji.
   ========================================================================== */
.eyebrow--light{color:rgba(255,255,255,.85);}
/* --- Skupno: fotografski pas čez celo širino (C1) --------------------------- */
.pas{position:relative; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;}
.pas__slika{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.pas__scrim-x{position:absolute; inset:0; background:linear-gradient(115deg, rgba(8,20,42,.92) 0%, rgba(8,20,42,.62) 38%, rgba(8,20,42,.18) 62%, rgba(8,20,42,0) 78%);}
.pas__scrim-y{position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,20,42,.55) 0%, rgba(8,20,42,0) 42%);}
.pas__vsebina{position:relative; z-index:2; width:100%; padding-block:44px 52px;}
.pas__vsebina .wrap{max-width:var(--wrap);}
.pas__telo{max-width:44ch;}
.pas h1, .pas h2{color:#fff;}
.pas p{color:rgba(255,255,255,.9);}
/* Pod ~700 px besedilo zasede celo širino pasu in bi se prekrivalo z znacko
   "Na sliki", ki je pripeta zgoraj desno (drugje na strani je nad njo dovolj
   fotografije, tu pa je pas nizek). Zato mu tam damo dodaten zgornji rob. */


.section--sand{background:var(--sand-050);}
.section--navy{background:var(--navy-800); color:rgba(255,255,255,.92);}
.section--navy h2{color:#fff;}
.section--navy p{color:rgba(255,255,255,.82);}
.section--navy .link-arrow{color:#fff;}
.section--navy .link-arrow:hover{color:var(--green-500);}

/* --- Pas s ključnimi številkami — na notranjih straneh (cenik, dostava,
   katera naprava) je bila dolga besedilna sekcija ena sama neprekinjena
   svetla ploskev; ta pas jo prelomi z resničnimi podatki iz iste konstante,
   ki jo bere tudi besedilo (POPUSTI, KM, DOSTAVA_MEJA_KM …). --------------- */
.stat-pas{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(28px,5vw,64px); text-align:center;}
.stat-pas__i{flex:1 1 190px; max-width:280px;}
.stat-pas__i b{
  display:block; font-family:var(--font-h); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem); color:#fff; line-height:1; margin-bottom:8px;
}
.stat-pas__i span{color:rgba(255,255,255,.82); font-size:.92rem; line-height:1.4;}

/* Kartica naprave v okvirju — prevzeto iz fotografskega predloga, ker so bili
   naročniku ti okvirji všeč; barve pa so tu iz znamke, ne opečnate. */
.naprava{display:flex; flex-direction:column; min-width:0;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--sh-sm);
  /* border-color namenoma NI v prehodu: ob menjavi palete s preklopnikom
     prehod zadrži staro barvo obrobe in primerjava je zavajajoča. */
  transition:box-shadow .22s var(--ease), transform .22s var(--ease);}
.naprava:hover{box-shadow:var(--sh-md); transform:translateY(-3px); border-color:var(--green-600);}


/* --- Domača stran po naročnikovem oblikovnem predlogu (4. 8. 2026) ------
   Hero s fotografijo in SVETLIM prelivom (naslov je moder, ne bel), pas
   štirih koristi, vodilna kartica levo čez dve vrstici s šestimi ob njej,
   dve kartici prevzema z značko, dvostolpčni pas popustov in kratka
   vodoravna vrstica petih korakov.

   Kartice naprav so ista komponenta .card kot na strani Najemi, zato gumb
   „Dodaj v rezervacijo" deluje tudi tu. Modifikator .card--vodilna samo
   poveča prvo kartico; .card__znak je oznaka v vogalu. */

.hero3{position:relative; overflow:hidden; background:var(--bg-soft); isolation:isolate;}
.hero3__foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 55%; z-index:-2;}
.hero3__zavesa{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(245,245,243,.99) 0%, rgba(245,245,243,.96) 34%, rgba(245,245,243,.72) 50%, rgba(245,245,243,.18) 68%, rgba(245,245,243,0) 82%);
}
.hero3__vrsta{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(20px,3vw,42px); align-items:end; padding:clamp(38px,6vw,74px) 0 clamp(26px,3vw,38px);}
.hero3 h1{font-size:clamp(1.85rem,1.1rem + 2.5vw,2.95rem); line-height:1.1; color:var(--navy-800); margin:0 0 .5em; letter-spacing:-.015em; max-width:17ch;}
.hero3__sub{color:var(--ink-soft); font-size:clamp(.98rem,.94rem + .2vw,1.08rem); line-height:1.6; max-width:44ch; margin:0;}
.hero3__gumbi{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}
.hero3__popust{display:flex; align-items:center; gap:9px; margin:18px 0 0; color:var(--green-800); font-size:.92rem; font-weight:600;}
.hero3__popust svg{width:19px; height:19px; flex:0 0 auto; color:var(--green-600);}

.hero3__karta{
  justify-self:end; align-self:end; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px; align-items:center; width:min(420px,100%);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); padding:14px 16px; text-decoration:none;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.hero3__karta:hover{box-shadow:var(--sh-lg); transform:translateY(-2px);}
.hero3__karta > img{width:78px; height:78px; object-fit:contain;}
.hero3__karta-telo b{display:block; font-family:var(--font-h); font-size:.98rem; color:var(--navy-800); line-height:1.2;}
.hero3__karta-telo i{display:block; font-style:normal; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); margin:2px 0 6px;}
.hero3__karta-telo em{display:block; font-style:normal; font-family:var(--font-h); font-size:1.25rem; color:var(--navy-800); line-height:1;}
.hero3__karta-telo em s{text-decoration:none; font-family:var(--font); font-size:.78rem; color:var(--ink-mute);}
.hero3__karta-telo small{display:block; font-size:.74rem; color:var(--ink-mute); margin-top:3px;}
.hero3__karta-pusc{
  width:34px; height:34px; border-radius:50%; background:var(--navy-100); color:var(--navy-800);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.hero3__karta-pusc svg{width:16px; height:16px;}

/* Pas štirih koristi */
.pas-koristi{background:var(--cream); border-bottom:1px solid var(--line); padding:clamp(18px,2.4vw,26px) 0;}
.k4{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,28px);}
.k4 li{display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:start;}
.k4 svg{width:38px; height:38px; padding:9px; border-radius:var(--r-md); background:var(--green-tint); color:var(--green-700);}
.k4 b{display:block; color:var(--navy-800); font-size:.93rem; line-height:1.25; margin-bottom:3px;}
.k4 span{display:block; color:var(--ink-mute); font-size:.82rem; line-height:1.5;}

/* Naslov sekcije z desno poravnano povezavo */
.section-head--vrsta{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 32px; flex-wrap:wrap;}
.section-head--vrsta > div{flex:1 1 460px; min-width:0;}
.section-head--vrsta > .link-arrow{flex:0 0 auto; white-space:nowrap; padding-bottom:4px;}
.section-head--vrsta h2{margin-bottom:.25em;}
.section-head--vrsta p{margin:0;}
.section-head--sredina{text-align:center;}

/* Mreža domače strani: vodilna levo čez dve vrstici, šest ob njej */
.mreza-domov{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch;}
.mreza-domov .card{margin:0;}
.card--vodilna{grid-row:span 2;}
/* Kartica se razteza čez dve vrstici, zato mora rasti SLIKOVNI del, sicer
   nastane prazen prostor med opisom in ceno (.card ima margin-top:auto na
   ceni). height:auto povozi fiksnih 220 px iz .card__media. */
.card--vodilna .card__media{height:auto; flex:1 1 auto; min-height:240px;}
.card--vodilna .card__media img{max-height:100%;}
.card__znak{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--navy-800); color:#fff; font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill);
}

/* Kartici prevzema z ikono in značko */
.prevzem2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.pk2{display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:start;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs); padding:20px 22px 22px;}
.pk2__ico{width:48px; height:48px; border-radius:var(--r-md); background:var(--green-700); color:#fff;
  display:flex; align-items:center; justify-content:center;}
.pk2__ico svg{width:22px; height:22px;}
.pk2 h3{font-size:1.02rem; margin:0 0 .35em; color:var(--navy-800);}
.pk2 p{margin:0 0 12px; font-size:.9rem; line-height:1.55; color:var(--ink-soft);}
.pk2__znak{display:inline-block; background:var(--green-tint); color:var(--green-800);
  font-size:.76rem; font-weight:700; padding:4px 11px; border-radius:var(--r-pill);}

/* Pas popustov: naslov levo, dve številki desno */
.popust2__vrsta{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(22px,4vw,56px); align-items:center;}
.popust2__vrsta .section-head{margin-bottom:0;}
.popust2__num{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,38px); text-align:center;}
.popust2__num > div{position:relative; padding:26px 10px;}
.popust2__num > div::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:132px; height:132px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); pointer-events:none;
}
.popust2__num b{display:block; position:relative; font-family:var(--font-h); font-size:clamp(1.9rem,1.3rem + 1.7vw,2.7rem); color:#fff; line-height:1; margin-bottom:10px;}
.popust2__num span{display:block; position:relative; color:#cbd6ea; font-size:.85rem; line-height:1.45;}

/* Kratka vodoravna vrstica petih korakov */
.korakivrsta{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.6vw,20px); text-align:center;}
.korakivrsta li{position:relative; padding:0 6px;}
.korakivrsta li + li::before{
  content:""; position:absolute; left:calc(-1 * clamp(10px,1.6vw,20px) / 2 - 4px); top:28px;
  width:8px; height:8px; border-top:2px solid var(--line-strong); border-right:2px solid var(--line-strong);
  transform:rotate(45deg);
}
.kv__ico{position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%; background:var(--green-tint); color:var(--green-700); margin-bottom:14px;}
.kv__ico svg{width:24px; height:24px;}
.kv__ico i{position:absolute; right:-4px; bottom:-2px; width:22px; height:22px; border-radius:50%;
  background:var(--navy-800); color:#fff; font-style:normal; font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--cream);}
.korakivrsta b{display:block; color:var(--navy-800); font-size:.95rem; line-height:1.3; margin-bottom:5px;}
.kv__op{display:block; color:var(--ink-mute); font-size:.83rem; line-height:1.5;}
.t-center{text-align:center;}

@media (max-width:1080px){
  .mreza-domov{grid-template-columns:repeat(3,1fr);}
  .card--vodilna{grid-row:auto; grid-column:span 3;}
  .card--vodilna .card__media img{max-height:280px;}
}
@media (max-width:900px){
  .hero3__vrsta{grid-template-columns:1fr; align-items:start;}
  .hero3__zavesa{background:linear-gradient(180deg, rgba(245,245,243,.97) 0%, rgba(245,245,243,.9) 55%, rgba(245,245,243,.6) 100%);}
  .hero3__karta{justify-self:stretch; width:100%; margin-top:22px;}
  .k4{grid-template-columns:repeat(2,1fr); gap:18px;}
  .mreza-domov{grid-template-columns:repeat(2,1fr);}
  .card--vodilna{grid-column:span 2;}
  .prevzem2{grid-template-columns:1fr;}
  .popust2__vrsta{grid-template-columns:1fr;}
  .korakivrsta{grid-template-columns:repeat(2,1fr); gap:26px 12px;}
  .korakivrsta li + li::before{display:none;}
}
@media (max-width:560px){
  .k4{grid-template-columns:1fr;}
  .mreza-domov{grid-template-columns:1fr;}
  .card--vodilna{grid-column:auto;}
  .popust2__num{grid-template-columns:1fr; gap:14px;}
  .korakivrsta{grid-template-columns:1fr;}
}


/* --- Naslovni pas s fotografijo (po predlogu na Najemi, Ceniku, Nasvetih,
   Navodilih in Kontaktu). Besedilo levo, fotografija desno; pod 900 px
   fotografija odpade, ker bi na telefonu samo podaljšala pot do vsebine. */
/* Odmik nosi BESEDILO, ne sekcija — sicer fotografija ne seže do zgornjega
   roba pasu in nad njo ostane 70 px prazne ploskve. */
.page-head--foto{padding-top:0; padding-bottom:0; overflow:hidden;}
.page-head__vrsta{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(20px,3vw,48px); align-items:stretch;}
.page-head__telo{align-self:center; padding:clamp(40px,5.5vw,76px) 0 clamp(40px,5vw,68px);}
.page-head--foto .page-head__telo h1::before{content:none;}
/* .wrap je width:min(100% - 48px, --wrap), torej 24 px odmika na vsaki strani
   pod 1448 px, nad tem pa (100vw - --wrap)/2. Fotografija mora ta odmik
   izničiti, da seže do desnega roba zaslona. */
.page-head__slika{align-self:stretch; min-height:280px; position:relative;
  margin-right:calc(-1 * max(24px, (100vw - var(--wrap)) / 2));}
.page-head__slika img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:var(--r-lg) 0 0 var(--r-lg);}

@media (max-width:900px){
  .page-head--foto{padding-bottom:clamp(22px,3vw,32px);}
  .page-head__vrsta{grid-template-columns:1fr;}
  .page-head__telo{padding-bottom:0;}
  .page-head__slika{display:none;}
}

/* Izbirnik termina kot samostojen moder pas (Najemi) — prej je bil znotraj
   .page-head--z-izbirnikom. Vsebina in id-ji so nespremenjeni, ker jih
   bere app.js; spremenjena je samo ovojnica. */
.pas-termin{background:var(--bg-soft); padding:0 0 clamp(22px,3vw,34px);}
.pas-termin .hitri{margin-top:0;}

/* Pas štirih koristi kot vodoravni trak (Najemi) */
.k4--pas{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs); padding:22px clamp(18px,2.6vw,30px); margin-bottom:clamp(26px,3vw,38px);
}

/* Kontakt po oblikovnem predlogu: kontaktni podatki v beli kartici z
   naslovom, pod obrazcem zelena škatla s telefonom. */
.kontakt-karta{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs); padding:22px clamp(18px,2.4vw,26px) 10px; margin-bottom:20px;
}
.kontakt-karta__n{font-size:1.15rem; margin:0 0 16px; color:var(--navy-800);}
.klic-box{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:center;
  background:var(--green-tint); border:1px solid #d3e9bd; border-radius:var(--r-lg);
  padding:16px 18px; margin-top:18px;
}
.klic-box__ico{width:44px; height:44px; border-radius:var(--r-md); background:#fff; color:var(--green-700);
  display:flex; align-items:center; justify-content:center;}
.klic-box__ico svg{width:20px; height:20px;}
.klic-box p{margin:0; font-size:.92rem; line-height:1.55; color:var(--ink-soft);}
.klic-box strong{color:var(--navy-800);}

/* Poudarki v modrem pasu z ikono (Cenik, po oblikovnem predlogu) */
.stat-pas__i--iko > svg{width:26px; height:26px; color:var(--green-500); margin-bottom:10px;}

/* Kartice nasvetov po oblikovnem predlogu: fotografija zgoraj z oštevilčenjem
   v vogalu, besedilo spodaj. Cela kartica je klikljiva prek h2 a::after —
   povezava NE sme biti position:relative (past 18). */
.nasvet-k{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs); transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.nasvet-k:hover{box-shadow:var(--sh-md); transform:translateY(-3px);}
.nasvet-k__slika{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-tint);}
.nasvet-k__slika img{width:100%; height:100%; object-fit:cover; display:block;}
.nasvet-k__st{
  position:absolute; left:14px; bottom:12px; z-index:1;
  font-family:var(--font-h); font-size:1.5rem; font-weight:800; color:#fff;
  text-shadow:0 2px 10px rgba(8,33,74,.55);
}
.nasvet-k__telo{padding:16px 18px 20px; display:flex; flex-direction:column; flex:1;}
.nasvet-k__telo h2{font-size:1.05rem; line-height:1.3; margin:0 0 .4em; color:var(--navy-800);}
.nasvet-k__telo h2 a{color:inherit;}
.nasvet-k__telo h2 a::after{content:""; position:absolute; inset:0; z-index:2;}
.nasvet-k__telo h2 a:hover{color:var(--green-700);}
.nasvet-k__telo p{margin:0 0 14px; font-size:.9rem; line-height:1.55; color:var(--ink-soft);}
.nasvet-k__telo .link-arrow{margin-top:auto;}

/* --- Rezervacija po oblikovnem predlogu -----------------------------------
   Vsak korak je svoja bela kartica z robom, oštevilčenje ostane modri krogec.
   Markup izrisuje rezervacija.js sproti, zato je tu SAMO CSS — razredov
   .rez__blok, .rez__naslov in .rez__st ne spreminjamo, le izgled. */
.rez__blok{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs); padding:clamp(18px,2.4vw,26px);
}
.rez__blok + .rez__blok{border-top:1px solid var(--line); padding-top:clamp(18px,2.4vw,26px);}
.rez__naslov{margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line);}

/* Izbrana možnost prevzema/plačila dobi zeleno podlago, kot v predlogu.
   Razred is-active nastavlja rezervacija.js — tu ga samo prebarvamo. */
.rez__blok label.is-active,
.rez__blok .izbira.is-active,
.rez__blok [class*="izbira"].is-active{
  background:var(--green-tint); border-color:var(--green-600);
}

/* Kazalo v članku po oblikovnem predlogu: modra glava nad seznamom. */
.kazalo{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--cream); padding:0;}
.kazalo__n{
  display:block; background:var(--navy-800); color:#fff; margin:0;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 18px;
}
.kazalo ol, .kazalo ul{margin:0; padding:16px 18px 18px 36px;}

/* Naslovi razdelkov na Navodilih z zeleno ikono v krogcu (oblikovni predlog).
   Ikona je izven besedilnega toka, da se dolgi naslovi lepo prelomijo. */
.nz{display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; align-items:center;}
.nz__ico{
  width:46px; height:46px; border-radius:50%; background:var(--green-tint); color:var(--green-700);
  display:flex; align-items:center; justify-content:center;
}
.nz__ico svg{width:21px; height:21px;}
@media (max-width:560px){
  .nz{grid-template-columns:38px minmax(0,1fr); gap:11px;}
  .nz__ico{width:38px; height:38px;}
  .nz__ico svg{width:18px; height:18px;}
}